|
Packit |
9c2278 |
Bugs and Requests
|
|
Packit |
9c2278 |
-----------------
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Requests for icons that will be useful for more than a a single
|
|
Packit |
9c2278 |
application and it makes sense to share it in an icon theme should be
|
|
Packit |
9c2278 |
filed in GNOME bugzilla (bugzilla.gnome.org) under the
|
|
Packit |
9c2278 |
gnome-icon-theme module.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
High resolution icons
|
|
Packit |
9c2278 |
=====================
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Application launcher icons and filetype icons in general will benefit
|
|
Packit |
9c2278 |
in providing a high resolution variant. For Tango, the canvas size is
|
|
Packit |
9c2278 |
256x256 pixels.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
We suggest creating artwork for this large canvas as vectors. It may
|
|
Packit |
9c2278 |
require more time as vector art with filter effects tends to be very
|
|
Packit |
9c2278 |
computentionally intensive, but the benefit is that it allows to
|
|
Packit |
9c2278 |
create derivative works easily. In addition, if we need a higher
|
|
Packit |
9c2278 |
resolution than 256x256 in future, it's simply a matter of
|
|
Packit |
9c2278 |
re-rendering the icons.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Due to the large canvas a lot of the guidelines discussed elsewhere in
|
|
Packit |
9c2278 |
this document do not apply. What still stands is the use of colors,
|
|
Packit |
9c2278 |
the perspective and lighting.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
FIXME: outlines (strokes alternative - wip)
|
|
Packit |
9c2278 |
FIXME: highlights (inner stroke alternative)
|
|
Packit |
9c2278 |
FIXME: shadows (wip)
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Inkscape workflow tips:
|
|
Packit |
9c2278 |
-----------------------
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
* The 256x256 icon needs to be nice when scaled down to 64x64 (25%
|
|
Packit |
9c2278 |
zoom), so, in inkscape, it's necessary to use a 1x1 pixels grid with
|
|
Packit |
9c2278 |
major lines every 4. Lining up the main objects to the major lines
|
|
Packit |
9c2278 |
of the grid will help making the icon less blurry when scaled down.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
* Text: the best trick we found (atm) for text in high resolution
|
|
Packit |
9c2278 |
icons is to use the text tool to write something (lorem ipsum, funny
|
|
Packit |
9c2278 |
things, nonsenses and so on:-)) using the Bitstream Vera Sans
|
|
Packit |
9c2278 |
typeface with a 6pt size, trying to have the main bodies of the
|
|
Packit |
9c2278 |
letters between two horizontal major grid lines, then we convert the
|
|
Packit |
9c2278 |
text object to path and simplify (ctrl+l) 3 times. In case the text
|
|
Packit |
9c2278 |
is not visible enough when scaling down overlaying the line with a
|
|
Packit |
9c2278 |
very subtle rectangle 4px tall will help (see text-x-generic).
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
* Outlines: to make the things stand out we darken the edges using
|
|
Packit |
9c2278 |
various tecniques. Lapo's favourite is to group the all objects
|
|
Packit |
9c2278 |
costituting the shape; copy, paste in place, ungroup and make the
|
|
Packit |
9c2278 |
boolean union to obtain the silouhette [ctrl+c, crtl+alt+v, ctrl+u,
|
|
Packit |
9c2278 |
ctrl++]; copy again; set this path fill to none, set the stroke from
|
|
Packit |
9c2278 |
0.5 to 2 pixels in a dark color (usaully black) and set blur from 1
|
|
Packit |
9c2278 |
to 2 points; group it with the previous group; paste in place and
|
|
Packit |
9c2278 |
select the new group and the pasted path apply a clipping mask (the
|
|
Packit |
9c2278 |
pasted path will be used as a clipping mask) [Object -> Clip ->
|
|
Packit |
9c2278 |
Set]. Now you can do group editing with the clipping mask in place
|
|
Packit |
9c2278 |
[ctrl+enter to "enter" the group]. You can play with various stroke
|
|
Packit |
9c2278 |
width and color or gradients and with different blur settings.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
* Shadows: there's usually two shadow objects, one darker, less
|
|
Packit |
9c2278 |
blurred, less offset. The other very fuzzy, very transparent. So you
|
|
Packit |
9c2278 |
get a nice soft, non-linear falloff.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Symbolic Icons
|
|
Packit |
9c2278 |
==============
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Purpose of this icon theme is to extend the base icon theme that
|
|
Packit |
9c2278 |
follows the Tango style guidelines for specific purposes. This would
|
|
Packit |
9c2278 |
include OSD messages, panel system/notification area, and possibly
|
|
Packit |
9c2278 |
menu icons.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Icons follow the naming specification, but have a -symbolic suffix, so
|
|
Packit |
9c2278 |
only applications specifically looking up these symbolic icons will
|
|
Packit |
9c2278 |
render them. If a -symbolic icon is missing, the app will fall back to
|
|
Packit |
9c2278 |
the regular name.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Primitive build instructions
|
|
Packit |
9c2278 |
============================
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Running the r.rb script will chop up the "source" SVG into individual
|
|
Packit |
9c2278 |
icons. Part of the process is converting paths strokes into
|
|
Packit |
9c2278 |
objects. This is for the external stylesheet to work at gtk3
|
|
Packit |
9c2278 |
runtime. This means objects that rely on this conversion need to be
|
|
Packit |
9c2278 |
undgrouped inside the master group.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Targets
|
|
Packit |
9c2278 |
=======
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Here's places that should make use of this style (and look up icons as
|
|
Packit |
9c2278 |
-symbolic).
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
* Panel systray (and gnome-shell equivalents)
|
|
Packit |
9c2278 |
* Nautilus' sidebar eject emblem for mounted drives
|
|
Packit |
9c2278 |
* OSD (volume levels, display, eject etc)
|
|
Packit |
9c2278 |
* text input widgets (caps lock warning, clear icons)
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
HOWTO
|
|
Packit |
9c2278 |
=====
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
The whole set is maintained in a single SVG,
|
|
Packit |
9c2278 |
src/gnome-stencils.svg. Each context (apps, actions, mimetypes...)
|
|
Packit |
9c2278 |
lives inside an Inkscape layer (group). Any group inside that layer
|
|
Packit |
9c2278 |
is treated as an icon and will be exported into the
|
|
Packit |
9c2278 |
gnome/scalable/<context>/<inkscape:label>-symbolic.svg of the
|
|
Packit |
9c2278 |
group. This export is handled by using Inkscape's verbs, which means
|
|
Packit |
9c2278 |
it will pop up Inkscape GUI at you and will take ages.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
The best way to assure your icon will be precisely 16x16, is to
|
|
Packit |
9c2278 |
include a blank rectangle in the group. This rectangle, as long as it
|
|
Packit |
9c2278 |
is 16 pixels wide and high, will be removed by the crop script. To
|
|
Packit |
9c2278 |
name the group, open up the object properties dialog (Ctrl+Shfit+O)
|
|
Packit |
9c2278 |
and use the 'label' field. Do not add the -symbolic suffix there, that
|
|
Packit |
9c2278 |
will be done by the script. Also, don't nest groups too much inside
|
|
Packit |
9c2278 |
the main one. The script will only convert outlines properly down to
|
|
Packit |
9c2278 |
two subgroups.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Recoloring
|
|
Packit |
9c2278 |
----------
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
The color of the icon set is defined at runtime by the gtk
|
|
Packit |
9c2278 |
theme. Every single icon from the set is actually embedded inside an
|
|
Packit |
9c2278 |
xml container that has a stylesheet overriding the colors.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
There is a couple of things the icon author needs to be aware of and a few
|
|
Packit |
9c2278 |
things s/he can make use of. The stylesheet is setting the color of the fill
|
|
Packit |
9c2278 |
for all rectangles and paths. _DO_NOT_ leave any rectangles or paths
|
|
Packit |
9c2278 |
with no fill/stroke thinking it's invisible.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
Note that the export script in gnome-icon-theme-symbolic will convert
|
|
Packit |
9c2278 |
strokes to paths, so you will need to do this manually (Path -> Stroke
|
|
Packit |
9c2278 |
to Path in inkscape) if you ship an icon outside of
|
|
Packit |
9c2278 |
gnome-icon-theme-symbolic.
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
If you need colorize specific part of an icon you need to set a class
|
|
Packit |
9c2278 |
of that object. In inkscape 0.47 this is sadly only achievable by
|
|
Packit |
9c2278 |
selecting the object, going into the xml editor and creating a new
|
|
Packit |
9c2278 |
attribute 'class' and setting its value. There are currently 3
|
|
Packit |
9c2278 |
possible values:
|
|
Packit |
9c2278 |
|
|
Packit |
9c2278 |
- warning - this maps to gtk @warning_color
|
|
Packit |
9c2278 |
- error - maps to @error_color
|
|
Packit |
9c2278 |
- success - maps to @success_color
|
|
Packit |
9c2278 |
|