Difference between revisions of "Creating a multicolor icon"

From Inkscape Wiki
Jump to navigation Jump to search
m (Moini moved page Multicolor - Icon theme to Creating a new multicolor icon theme without leaving a redirect: Grammar)
m (First two sections fixed.)
Line 1: Line 1:
== Multicolor icons ==
== What are multicolor icons? ==


New Icons with abilit of having 4 colors + Theme backround ( and mixies of this colors) which are cusomizable in preferences live by user. This was discoverd and developed by @jabiertxof and @ede123
From Inkscape 1.0 on, Inkscape icon sets can make use of 4 user-customizable highlight colors, plus a user definable base color (colors can be mixed and blended). A user can select the colors in Edit > Preferences > Interface > Theme: Display icons.


Multicolor theme was design and documented by me Adam Belis. With base for most of icons from Hicolor theme.
The stock multicolor icon theme was designed and documented by Adam Belis. Most of its icons are based upon those contained in the hicolor symbolic icon theme.


Since KDE 3 every icon has its own file. There is '''~ 444 icons''' in whol Inkscape. You dont need to change every singe one you change just spesific one and use rest of the other icon themes.
Since Inkscape's switch to Gtk3, every icon is saved in a separate file. There are about '''450 different icons''' used in Inkscape. When you're creating your own icon theme, you don't need to make a new one for each of those, but can base your changes on an existing icon theme.


== How it works ==
== How does it work? ==


I would say this is kind of hacking of KDE (gnome ?). You can set up 4 clases of colors : Base, Success, Warning, Danger in CSS selectors ( or XML editor). Normaly .danger is red, warning is orange and success green base is black and backround is white ( you cannot change it in icon theme). But you can set up this 4 colors with CSS file in your icon folder. And also user also can change this colors in preferences live if he wants to customize look of icons.
Gtk supports up to 4 classes of colors: .base, .success, .warning and .error. Normally, .error is set to red, .warning is orange and .success is green. .base is black and the background is white (transparent?). The default colors can be set in a CSS file in /share/inkscape/icons/<theme_name>/highlights.css.


== How to design new set of icons (Practical guid) ==
== How to build a new set of icons (practical guide) ==


==== Creating new icon theme and set defoult colors ====
==== Creating new icon theme and set defoult colors ====

Revision as of 16:20, 11 February 2020

What are multicolor icons?

From Inkscape 1.0 on, Inkscape icon sets can make use of 4 user-customizable highlight colors, plus a user definable base color (colors can be mixed and blended). A user can select the colors in Edit > Preferences > Interface > Theme: Display icons.

The stock multicolor icon theme was designed and documented by Adam Belis. Most of its icons are based upon those contained in the hicolor symbolic icon theme.

Since Inkscape's switch to Gtk3, every icon is saved in a separate file. There are about 450 different icons used in Inkscape. When you're creating your own icon theme, you don't need to make a new one for each of those, but can base your changes on an existing icon theme.

How does it work?

Gtk supports up to 4 classes of colors: .base, .success, .warning and .error. Normally, .error is set to red, .warning is orange and .success is green. .base is black and the background is white (transparent?). The default colors can be set in a CSS file in /share/inkscape/icons/<theme_name>/highlights.css.

How to build a new set of icons (practical guide)

Creating new icon theme and set defoult colors

  1. Copy folder firom Multicolor (direct) and move it to (WIN) C: YOUR USER NAME
  2. Rename the folder to your new name (let say name is SUPER COOL ICONS)
  3. If you want you can set up your defoult color theme you can do it right now but also edit it later
  4. in your new folder SUPER COOL ICONS is file highlights.css
  5. Open it with notepad or any text editor of your choise
  6. Change HEXA color codes of the classes you want to change
  7. Lets say you want your .success class to be green you will chang it to #009909
  8. You can copy hexa colors from Inscape color dialog or mix it https://htmlcolorcodes.com/
  9. .dark classes are for changeich your color theme for dark themes
  10. Now when you are happy with your colors we can jump in to Icon editing

Editing/creating first icon

  1. Open any icon you like in Inkscape 1.0 from SUPER COOL ICONS
  2. Open CSS selectors and styles Dialog
  3. Open Edit/Preferences> Interface> Theming and select your icon theme your just created
  4. Delete content of layer in Object dialog
  5. Design your icon
  6. When you want to add color to path select it and go to CSS selectors
  7. You will see 5 classes (.base, .success, .warning, .danger .dark)
  8. you can assine color to path by clickin plus button next to desired class
  9. So lets say we want to add green (.success) you will click on plus button next to .success
  10. If you changed your mind and want diffrent color you can click on triangel roll up all paths in that class and delet it form class with x button.
  11. To preview your icon designs live-ish SAVE ( Ctrl+S ) and than go to (Edit/Preferences> Interface> Theming) and double click chcek box Dark theme.
  12. This will reload Icons and you can see how they look ( note that this technique does not work for dock icons you need to restart inksacpe to see thees icons change )
  13. Now do it 450 more times and you made SUPER COOL ICONS
  14. Congratulation you did it dont forget to share your SUPER COOL ICONS theme with comunity on inkcape.org

Feature support

Suported:

  • 4 colors + opacities of this colors (set by classes)
  • solid fills (set by classes)
  • LPE (life paths effects)
  • Cliping masks
  • Filters ( dont reccomend to us it )
  • Bitmaps embeds ( dont reccomend to us it )

Unsuported:

Best technical practisies

  • Keep it all in one layer and DONT change name of layer
  • Keep in mind that this icons are going to be very small (16*16px) so use grid for chrisp rendering
  • Add color class to all paths If you cont defoult class is .base
  • Try to keep SVG small and simple so it does not take long time to render them (this can impact start up time )
  • Try use opacities 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, % to keep SVGs small
  • Try to use max 0.xx on in your cordinations ( nodes poritions , object transformations etc)
  • Tips and tricks

  • to render Strokes add LPE Join paths ( It just nondestractivly convert strokes to paths )
  • you can create more than 4 colors by mixing 4 colors with opacity. Create duplicat of path you want to mix color add new color and change opaciy. Succes 100% + Base 50% for darker shade of Succes color
  • keep your icon folder in (WIN) C: YOUR USER NAME
  • You can set your defoult colors of normal theme and dark theme in highlights.css
  • you simulate linear gradients by creating buch of rectangles in row and changing their opacity (0,10,20,30...) and than clip this grupe with shape you want to make linear gradient
  • you simulate radial gradient by making circles goign from small to big and changing their opacity (0,10,20,30...) and cliping this grupe with shape you want to make linear gradient
  • you can simulate gradients by using blur on paths
  • to preview your icon designs live-ish keep preference panel (Edit/Preferences> Interface> Theming) open in corener a SAVE ( ctrl+S ) and double click chcek box Dark theme this will reload Icons and you can see how they look (Note that this technique does not work for dock icons you need to restart ink to see changes)
  • you can ajust your color schem in dark mode by editing highlights.css dark.class name ( contras works diffrently on dark and white backround)
  • Have a fun