Artwork/EchoIconGuidelines

From FedoraProject

< Artwork(Difference between revisions)
Jump to: navigation, search
(Imported from MoinMoin)
 
m (References)
 
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<!--language:en
+
{{header|art}}
-->
+
<!-- Pull Header from ArtWork
+
-->
+
{{:Artwork, , from="StartHeader", to="EndHeader"}}
+
  
 
= Echo Icons =
 
= Echo Icons =
  
{| border="1"
+
{{Admon/caution | Obsolete | Please refer to https://fedorahosted.org/echo-icon-theme/wiki/Guidelines for the latest version of the guidelines}}
|-
+
| {{Template:Caution}} '''Obsolete''' Please refer to https://fedorahosted.org/echo-icon-theme/wiki/Guidelines for the latest version of the guidelines
+
|}
+
  
 
Echo is currently a new set of icons proposed for inclusion in Fedora.  Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilzing high contrast and spots of vibrant colors.  The following are general guidelines to creating icons in the Echo look and feel.  To view and post icons, please visit the [[Artwork/EchoDevelopment|  EchoDevelopmentGallery]] .
 
Echo is currently a new set of icons proposed for inclusion in Fedora.  Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilzing high contrast and spots of vibrant colors.  The following are general guidelines to creating icons in the Echo look and feel.  To view and post icons, please visit the [[Artwork/EchoDevelopment|  EchoDevelopmentGallery]] .
 
 
  
 
== Design Characteristics ==
 
== Design Characteristics ==
Line 27: Line 18:
 
== Icon Sizes ==
 
== Icon Sizes ==
  
[[Image:Artwork_EchoIconGuidelines_sizes.png]
+
[[Image:Artwork_EchoIconGuidelines_sizes.png]]
  
 
Listed below are the various icon sizes and where they are used.  For now Echo will focus on the 3 commonly used sizes of 16 (appearing in the corner of window borders), 24 (used in the menu), and 48 (as icons on the desktop).
 
Listed below are the various icon sizes and where they are used.  For now Echo will focus on the 3 commonly used sizes of 16 (appearing in the corner of window borders), 24 (used in the menu), and 48 (as icons on the desktop).
Line 41: Line 32:
  
 
== Colors ==
 
== Colors ==
Courtesy of [BenArnold] .  ** GIMP and Inkscape palettes - [[Image:Artwork_EchoIconGuidelines_Echo-icon.gpl]] Download]  **<BR><BR>
+
Courtesy of [[BenArnold]] .  ** GIMP and Inkscape palettes - [[:Image:Artwork_EchoIconGuidelines_Echo-icon.gpl | Download]]  **
{| border="1"
+
 
 +
{|
 
|-
 
|-
|<|3 style="color: #636363;" |'''Fedora Blues'''||<bgcolor="#00578E" style="color: #FFFFFF;" | #00578E Logo BG
+
! Fedora Blues
 
|-
 
|-
|<bgcolor="#0084C8" | #0084C8 Logo Light
+
| style="background-color: #00578E; color: #FFFFFF;" | #00578E Logo BG
 
|-
 
|-
|<bgcolor="#00BBFF" | #00BBFF Echo Main
+
|style="background-color: #0084C8" | #0084C8 Logo Light
 
|-
 
|-
|<|5 ( style="color: #636363;" |'''Grayscale'''||<bgcolor="#333333" style="color: #FFFFFF;" | #333333 Black(ish)
+
|style="background-color: #00BBFF" | #00BBFF Echo Main
 
|-
 
|-
|<bgcolor="#666666" style="color: #FFFFFF;" | #666666 Dark Gray
+
!Grayscale
 
|-
 
|-
|<bgcolor="#999999" | #999999 Gray
+
|style="background-color: #333333; color: #FFFFFF;" | #333333 Black(ish)
 
|-
 
|-
|<bgcolor="#CCCCCC" | #CCCCCC Light Gray
+
|style="background-color: #666666; color: #FFFFFF;" | #666666 Dark Gray
 
|-
 
|-
|<bgcolor="#FFFFFF" | #FFFFFF White
+
|style="background-color: #999999" | #999999 Gray
 
|-
 
|-
|<|4 ( style="color: #636363;" |'''Metallic'''||<bgcolor="#0E232E" style="color: #FFFFFF;" | #0E232E Dark Metal
+
|style="background-color: #CCCCCC" | #CCCCCC Light Gray
 
|-
 
|-
|<bgcolor="#364E59" style="color: #FFFFFF;" | #364E59 Metal
+
|style="background-color: #FFFFFF" | #FFFFFF White
 
|-
 
|-
|<bgcolor="#9EABB0" | #9EABB0 Light Metal01
+
!Metallic
 
|-
 
|-
|<bgcolor="#BDCDD4" | #BDCDD4 Light Metal02
+
|style="background-color: #0E232E; color: #FFFFFF;" | #0E232E Dark Metal
 
|-
 
|-
|<|2 ( style="color: #636363;" |'''Red'''||<bgcolor="#BB0000" style="color: #FFFFFF;" | #BB0000 Dark Red
+
|style="background-color: #364E59; color: #FFFFFF;" | #364E59 Metal
 
|-
 
|-
|<bgcolor="#EE0000" | #EE0000 Red
+
|style="background-color: #9EABB0" | #9EABB0 Light Metal01
 
|-
 
|-
|style="color: #636363;" |'''Orange'''||<bgcolor="#FF7700" | #FF7700 Orange
+
|style="background-color: #BDCDD4" | #BDCDD4 Light Metal02
 
|-
 
|-
|<|2 ( style="color: #636363;" |'''Brown'''||<bgcolor="#996600" | #996600 Dark Brown
+
!Red
 
|-
 
|-
|<bgcolor="#CC9900" | #CC9900 Brown
+
|style="background-color: #BB0000; color: #FFFFFF;" | #BB0000 Dark Red
 
|-
 
|-
|style="color: #636363;" |'''Yellow'''||<bgcolor="#FFEE33" | #FFEE33 Yellow
+
|style="background-color: #EE0000" | #EE0000 Red
 
|-
 
|-
|<|2 ( style="color: #636363;" |'''Green'''||<bgcolor="#009900" | #009900 Dark Green
+
!Orange
 
|-
 
|-
|<bgcolor="#00EE33" | #00EE33 Green
+
|style="background-color: #FF7700" | #FF7700 Orange
 
|-
 
|-
|<|2 ( style="color: #636363;" |'''Blue'''||<bgcolor="#0000BB" style="color: #FFFFFF;" | #0000BB Dark Blue
+
!Brown
 
|-
 
|-
|<bgcolor="#0033EE" style="color: #FFFFFF;" | #0033EE Blue
+
|style="background-color: #996600" | #996600 Dark Brown
 
|-
 
|-
|style="color: #636363;" |'''Purple'''||<bgcolor="#6600AA" style="color: #FFFFFF;" | #6600AA Purple
+
|style="background-color: #CC9900" | #CC9900 Brown
 +
|-
 +
!Yellow
 +
|-
 +
|style="background-color: #FFEE33" | #FFEE33 Yellow
 +
|-
 +
!Green
 +
|-
 +
|style="background-color: #009900" | #009900 Dark Green
 +
|-
 +
|style="background-color: #00EE33" | #00EE33 Green
 +
|-
 +
!Blue
 +
|-
 +
|style="background-color: #0000BB; color: #FFFFFF;" | #0000BB Dark Blue
 +
|-
 +
|style="background-color: #0033EE; color: #FFFFFF;" | #0033EE Blue
 +
|-
 +
!Purple
 +
|-
 +
|style="background-color: #6600AA; color: #FFFFFF;" | #6600AA Purple
 
|}
 
|}
  
Line 94: Line 106:
 
Echo employs the use of three (3) types of perspective:<BR><BR>
 
Echo employs the use of three (3) types of perspective:<BR><BR>
  
{| border="1"
+
{|
 
|-
 
|-
| '''straight (or head-on)''' [[Image:Artwork_EchoIconGuidelines_straight_grid.svg]] SVG]  || '''slightly tilted table''' [[Image:Artwork_EchoIconGuidelines_table_grid.svg]] SVG] || most defining being the '''isometric grid''' [[Image:Artwork_EchoIconGuidelines_isometric_grid.svg]] SVG]
+
| '''straight (or head-on)''' [[Image:Artwork_EchoIconGuidelines_straight_grid.svg | SVG]]  || '''slightly tilted table''' [[Image:Artwork_EchoIconGuidelines_table_grid.svg | SVG]] || most defining being the '''isometric grid''' [[Image:Artwork_EchoIconGuidelines_isometric_grid.svg | SVG]]
|}
+
|-
[[Image:Artwork_EchoIconGuidelines_||[[Image:Artwork_EchoIconGuidelines_straight_grid.png,width=250] ||[[Image:Artwork_EchoIconGuidelines_table_grid.png,width=340] ||[[Image:Artwork_EchoIconGuidelines_isometric_grid.png,width=400] ||
+
|[[Image:Artwork_EchoIconGuidelines_straight_grid.png|250px]] || [[Image:Artwork_EchoIconGuidelines_table_grid.png|340px]] || [[Image:Artwork_EchoIconGuidelines_isometric_grid.png|400px]]
{| border="1"
+
 
|-
 
|-
|<^>to be used in creating 16x16 pixel icons|| to be used in creating "Action" icons<BR><BR>case-by-case basis (please discuss prior to implementing)...can also be used in creating icons of other groups that are difficult to render in smaller sizes (< 48x48 pixels) ||<^> to be used in the creation of all icons not covered by the previous two grids
+
|to be used in creating 16x16 pixel icons|| to be used in creating "Action" icons<BR>case-by-case basis (please discuss prior to implementing)...can also be used in creating icons of other groups that are difficult to render in smaller sizes (< 48x48 pixels) ||to be used in the creation of all icons not covered by the previous two grids
 
|}
 
|}
  
Line 107: Line 118:
  
 
The light source is located slightly to the left and in front of the object...not directly overhead. Highlight is located primarily in the front corner, along the left edge and a bit on the front of the right face of an object.
 
The light source is located slightly to the left and in front of the object...not directly overhead. Highlight is located primarily in the front corner, along the left edge and a bit on the front of the right face of an object.
<BR><BR>
+
 
 
The shadow is formed by lines from the isometric grid. It is appears primarily behind the object; as well as a bit in front of and under the object. Do not to use black, as it is too harsh and does not scale well...dark gray is acceptable.
 
The shadow is formed by lines from the isometric grid. It is appears primarily behind the object; as well as a bit in front of and under the object. Do not to use black, as it is too harsh and does not scale well...dark gray is acceptable.
<BR><BR>
+
 
[[Image:Artwork_EchoIconGuidelines_||[[Image:Artwork_EchoIconGuidelines_straight_light.png,height=250]  ||[[Image:Artwork_EchoIconGuidelines_table_light.png,height=250]  ||[[Image:Artwork_EchoIconGuidelines_isometric_light.png,height=250]  ||
+
{|
{| border="1"
+
 
|-
 
|-
|to be used in creating 16x16 pixel icons <BR><BR> '''Notice...''' Slight shading effect from the light (if at all) but no shadow for a cleaner 16x16 icon.|| to be used in creating "Action" icons <BR><BR> '''Notice...'''Shading effect from the light and shadow below object.  If the objects were closer, there would be a slight shadow projected from the circle on to the square. || to be used in the creation of all icons not covered by the previous two <BR><BR> '''Notice...''' Location and shape of highlights from the light and angle of the shadow cast by the shapes.  Also note a slight hint of shadow appearing in front of the object as well as to the side.
+
| [[Image:Artwork_EchoIconGuidelines_straight_light.png|250px]] || [[Image:Artwork_EchoIconGuidelines_table_light.png|250px]] || [[Image:Artwork_EchoIconGuidelines_isometric_light.png|250px]]
 +
|-
 +
|to be used in creating 16x16 pixel icons <BR> '''Notice...''' Slight shading effect from the light (if at all) but no shadow for a cleaner 16x16 icon.|| to be used in creating "Action" icons<BR> '''Notice...'''Shading effect from the light and shadow below object.  If the objects were closer, there would be a slight shadow projected from the circle on to the square. || to be used in the creation of all icons not covered by the previous two<BR> '''Notice...''' Location and shape of highlights from the light and angle of the shadow cast by the shapes.  Also note a slight hint of shadow appearing in front of the object as well as to the side.
 
|}
 
|}
<BR>
+
 
[[Image:Artwork_EchoIconGuidelines_shadowExtension.png]
+
[[Image:Artwork_EchoIconGuidelines_shadowExtension.png]]
  
 
'''Making a Shadow''' - MartinSourada
 
'''Making a Shadow''' - MartinSourada
Line 127: Line 139:
  
 
Steps:
 
Steps:
1. Create a basic shape for the shadow to start with (for most action icons an ellipse is good)
+
# Create a basic shape for the shadow to start with (for most action icons an ellipse is good)
2. Extend the shape to better fit the icon
+
# Extend the shape to better fit the icon
3. Add gradient if needed (in this example I used a linear gradient with the colors of: $2d2d2da0 -> 2d2d2db9 -> 2d2d2d32)
+
# Add gradient if needed (in this example I used a linear gradient with the colors of: $2d2d2da0 -> 2d2d2db9 -> 2d2d2d32)
4. Apply blur effect (in the example I set 12,4)
+
# Apply blur effect (in the example I set 12,4)
  
<BR>
 
 
'''Challenge:''' Something I'd like to try and and challenge this set to do is to create slightly tinted shadows.  From painting experience...object of any given color will cast a shadow tinged with that of its complementary color and tinting neighboring colors. Juxtaposing complementary colors will also add higher contrast to the icon.  Example: a blueish object will therefore cast an orangish shadow, while a reddish object will cast a greenish shadow.  (See below.)  The coloring is ''very subtle'' but I think that this could be one of the small things which could make Echo stand out.  <BR><BR>''If this is too involved, please use the standard dark gray instead.''
 
'''Challenge:''' Something I'd like to try and and challenge this set to do is to create slightly tinted shadows.  From painting experience...object of any given color will cast a shadow tinged with that of its complementary color and tinting neighboring colors. Juxtaposing complementary colors will also add higher contrast to the icon.  Example: a blueish object will therefore cast an orangish shadow, while a reddish object will cast a greenish shadow.  (See below.)  The coloring is ''very subtle'' but I think that this could be one of the small things which could make Echo stand out.  <BR><BR>''If this is too involved, please use the standard dark gray instead.''
  
[[Image:Artwork_EchoIconGuidelines_colorShadows.jpg]
+
[[Image:Artwork_EchoIconGuidelines_colorShadows.jpg]]
  
 
== Outlines ==
 
== Outlines ==
 
Outlines help define the shape of an icon. At smaller sizes, the outline should help users recognize the icon by presenting an identifiable shape. A well designed outline should also add to the discernability of an icon on light and dark backgrounds.
 
Outlines help define the shape of an icon. At smaller sizes, the outline should help users recognize the icon by presenting an identifiable shape. A well designed outline should also add to the discernability of an icon on light and dark backgrounds.
<BR><BR>
+
 
 
I did not want the outline to be a mere line which evelops the icon. The outline should add more to the icon...to be a shadow when it's on a light background, and a highlight when it's on a dark background. During my icon research I came across [http://iconfactory.com/home iconfactory.com] , whose contests section contained [http://yegor.gilyov.com/free/ Underwater - by Yegor Gilyov]  (shown below). The outline used here was not just an uniform solid line. Note its various widths (the outline towards the right and bottom are wider than the upper right), colors (the outlines are comprised of several colors cooresponding to the part it covered, there's even the use of gradients to add to the icons overall shape and shading), and overlap (the outline doesn't just exist on the outside, some flow inside to help define the shape of the icon). I incorporated this concept into the Echo icon design (see Echo sample icons below).
 
I did not want the outline to be a mere line which evelops the icon. The outline should add more to the icon...to be a shadow when it's on a light background, and a highlight when it's on a dark background. During my icon research I came across [http://iconfactory.com/home iconfactory.com] , whose contests section contained [http://yegor.gilyov.com/free/ Underwater - by Yegor Gilyov]  (shown below). The outline used here was not just an uniform solid line. Note its various widths (the outline towards the right and bottom are wider than the upper right), colors (the outlines are comprised of several colors cooresponding to the part it covered, there's even the use of gradients to add to the icons overall shape and shading), and overlap (the outline doesn't just exist on the outside, some flow inside to help define the shape of the icon). I incorporated this concept into the Echo icon design (see Echo sample icons below).
  
[[Image:Artwork_EchoIconGuidelines_||<|3>[[Image:Artwork_EchoIconGuidelines_outlineUnderwater.jpg]  ||<|3>[[Image:Artwork_EchoIconGuidelines_outlineEcho.png]  ||<bgcolor="#D7D7D7">'''Comparison of icon border against dark and light backgrounds.'''||
+
{|
[[Image:Artwork_EchoIconGuidelines_||<:>[[Image:Artwork_EchoIconGuidelines_outlineBW.png]  ||
+
{| border="1"
+
 
|-
 
|-
|<^>Above, is the same Microphone Icon on both the left and right.  Note how the outline adds to defining the icons shape by appearing as highlight against the dark background and shadow on the light background.
+
| [[Image:Artwork_EchoIconGuidelines_outlineUnderwater.jpg]]
 +
|-
 +
| [[Image:Artwork_EchoIconGuidelines_outlineEcho.png]]
 +
|-
 +
! Comparison of icon border against dark and light backgrounds.
 +
|-
 +
| [[Image:Artwork_EchoIconGuidelines_outlineBW.png]]
 +
|-
 +
| Above, is the same Microphone Icon on both the left and right.  Note how the outline adds to defining the icons shape by appearing as highlight against the dark background and shadow on the light background.
 
|}
 
|}
<BR><BR>
+
 
 
'''At 16x16 pixels''', please use a 1 pixel #364E59 border.
 
'''At 16x16 pixels''', please use a 1 pixel #364E59 border.
  
[[Image:Artwork_EchoIconGuidelines_16x16border.png]
+
[[Image:Artwork_EchoIconGuidelines_16x16border.png]]
  
 
== Echo Icons in Grids ==
 
== Echo Icons in Grids ==
Line 157: Line 174:
  
 
== Emblems ==
 
== Emblems ==
[[Image:Artwork_EchoIconGuidelines_EmblemPlusStar.png]
+
[[Image:Artwork_EchoIconGuidelines_EmblemPlusStar.png]]
  
 
'''Pluses and Stars''' - MartinSourada
 
'''Pluses and Stars''' - MartinSourada
  
'''Plus''' [[Image:Artwork_EchoIconGuidelines_plus.svg]] SVG]  is used for action icons (thus often forward facing) symbolizing the creation of something new by the user.  An example is the creation of a new contact in an address book.  Such things are created by clicking on a button with a representative icon; whose icon name usually ends with "-new."
+
'''Plus''' [[:Image:Artwork_EchoIconGuidelines_plus.svg | SVG]]  is used for action icons (thus often forward facing) symbolizing the creation of something new by the user.  An example is the creation of a new contact in an address book.  Such things are created by clicking on a button with a representative icon; whose icon name usually ends with "-new."
  
'''Star''' [[Image:Artwork_EchoIconGuidelines_star.svg]] SVG]  should be used to note something that is new or upcoming in time.  More generally, it symbolizes a state of being rather than the action of making it so (as the + would denote).  Examples are such icons as mail-marked-unread and appointment-soon.
+
'''Star''' [[:Image:Artwork_EchoIconGuidelines_star.svg | SVG]]  should be used to note something that is new or upcoming in time.  More generally, it symbolizes a state of being rather than the action of making it so (as the + would denote).  Examples are such icons as mail-marked-unread and appointment-soon.
  
 
=== Attach Points ===
 
=== Attach Points ===
Line 169: Line 186:
 
An attach point is a location (x,y) on the icon that can be used as an anchor point for attaching emblems or overlays.  If no points are specified, then default positions will be used.
 
An attach point is a location (x,y) on the icon that can be used as an anchor point for attaching emblems or overlays.  If no points are specified, then default positions will be used.
  
[[Image:Artwork_EchoIconGuidelines_attachPoints.png]
+
[[Image:Artwork_EchoIconGuidelines_attachPoints.png]]
  
 
Attach Points is a list of points, separated by "|". The points are pixel coordinates from the top left corner of the icon, except for SVG files, where they are specified in a 1000x1000 coordinate space that is scaled to the final rendered size of the icon. [http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html For additional technical information written by Alex Larsson.]  
 
Attach Points is a list of points, separated by "|". The points are pixel coordinates from the top left corner of the icon, except for SVG files, where they are specified in a 1000x1000 coordinate space that is scaled to the final rendered size of the icon. [http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html For additional technical information written by Alex Larsson.]  
Line 179: Line 196:
 
= References =
 
= References =
  
* [http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html]  - Apple Human Interface Guidelines doc section on Icons.
+
* [http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html OSXHI Guidelines]  - Apple Human Interface Guidelines doc section on Icons.
 
* [http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp Windows XP Icon Guidelines]  - windows XP icon guidelines from MSDN
 
* [http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp Windows XP Icon Guidelines]  - windows XP icon guidelines from MSDN
 
* [http://www.iconfactory.com/howto_copland.asp Icon Factory HowTo Article: Copeland]  - This article provides a good overview of isometric icon creation, with the specific goal of making 'Copeland' or old-school-Mac-style icons.
 
* [http://www.iconfactory.com/howto_copland.asp Icon Factory HowTo Article: Copeland]  - This article provides a good overview of isometric icon creation, with the specific goal of making 'Copeland' or old-school-Mac-style icons.
Line 189: Line 206:
 
* [http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php Icon Design: Bitmap vs Vector]  - Explaination about bitmap and vectorial image
 
* [http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php Icon Design: Bitmap vs Vector]  - Explaination about bitmap and vectorial image
 
* [http://mezzoblue.com/archives/2007/02/21/icon_design/ Icon Design: Sizing]  - This article explains how to properly size an icon from large to small
 
* [http://mezzoblue.com/archives/2007/02/21/icon_design/ Icon Design: Sizing]  - This article explains how to properly size an icon from large to small
 
-----
 
  
 
[[Category:Artwork]]
 
[[Category:Artwork]]

Latest revision as of 13:44, 17 October 2008

Artwork ArtTeamProjects WikiDesign ArtTeamN1.png


Contents

[edit] Echo Icons

Stop (medium size).png
Obsolete
Please refer to https://fedorahosted.org/echo-icon-theme/wiki/Guidelines for the latest version of the guidelines

Echo is currently a new set of icons proposed for inclusion in Fedora. Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilzing high contrast and spots of vibrant colors. The following are general guidelines to creating icons in the Echo look and feel. To view and post icons, please visit the EchoDevelopmentGallery .

[edit] Design Characteristics

  • Utilizes grays and gradients to provide a clean, yet detailed look. High contrast and spots of vibrant colors further define clean and simple designs.
  • Dynamic perspective with corresponding lighting and drop shadow.
  • Gradient outlines to provide subtle and versatile definition.

[edit] Process

Each icon is created in a vector program (Inkscape/Illustrator) and often finalized in GIMP/Photoshop. The used output is currently a .png with tansparent background. For OpenSource purposes, please also upload your vector file in .svg format so that others may derive and/or more easily create additional icons. Upload icons EchoDevelopmentGallery or post to Fedora-art-list for discussion and feedback.

[edit] Icon Sizes

Artwork EchoIconGuidelines sizes.png

Listed below are the various icon sizes and where they are used. For now Echo will focus on the 3 commonly used sizes of 16 (appearing in the corner of window borders), 24 (used in the menu), and 48 (as icons on the desktop).

  • 16x16 - menu icons "gtk-menu"
  • 18x18 - toolbar icons "gtk-small-toolbar"
  • 24x24 - toolbar icons "gtk-large-toolbar"
  • 20x20 - button icons "gtk-button"
  • 32x32 - dnd icons "gtk-dnd"
  • 48x48 - dialogue icons "gtk-dialog"

Note that the smaller icons are not merely scaled versions of the larger icons. Due to the limitation of space in the smaller sizes, there usually is a need for a bit of simplification and tweaking. Take the time to rework the icon if needed. Make sure the image is distinguishable and not muddy. With this said, keep in mind that any new icon/logo you design will have to work (or look similar) at 16x16.

[edit] Colors

Courtesy of BenArnold . ** GIMP and Inkscape palettes - Download **

Fedora Blues
#00578E Logo BG
#0084C8 Logo Light
#00BBFF Echo Main
Grayscale
#333333 Black(ish)
#666666 Dark Gray
#999999 Gray
#CCCCCC Light Gray
#FFFFFF White
Metallic
#0E232E Dark Metal
#364E59 Metal
#9EABB0 Light Metal01
#BDCDD4 Light Metal02
Red
#BB0000 Dark Red
#EE0000 Red
Orange
#FF7700 Orange
Brown
#996600 Dark Brown
#CC9900 Brown
Yellow
#FFEE33 Yellow
Green
#009900 Dark Green
#00EE33 Green
Blue
#0000BB Dark Blue
#0033EE Blue
Purple
#6600AA Purple

[edit] Perspective

Echo employs the use of three (3) types of perspective:

straight (or head-on) File:Artwork EchoIconGuidelines straight grid.svg slightly tilted table File:Artwork EchoIconGuidelines table grid.svg most defining being the isometric grid File:Artwork EchoIconGuidelines isometric grid.svg
Artwork EchoIconGuidelines straight grid.png Artwork EchoIconGuidelines table grid.png Artwork EchoIconGuidelines isometric grid.png
to be used in creating 16x16 pixel icons to be used in creating "Action" icons
case-by-case basis (please discuss prior to implementing)...can also be used in creating icons of other groups that are difficult to render in smaller sizes (< 48x48 pixels)
to be used in the creation of all icons not covered by the previous two grids

[edit] Lighting + Shadows

The light source is located slightly to the left and in front of the object...not directly overhead. Highlight is located primarily in the front corner, along the left edge and a bit on the front of the right face of an object.

The shadow is formed by lines from the isometric grid. It is appears primarily behind the object; as well as a bit in front of and under the object. Do not to use black, as it is too harsh and does not scale well...dark gray is acceptable.

Artwork EchoIconGuidelines straight light.png Artwork EchoIconGuidelines table light.png Artwork EchoIconGuidelines isometric light.png
to be used in creating 16x16 pixel icons
Notice... Slight shading effect from the light (if at all) but no shadow for a cleaner 16x16 icon.
to be used in creating "Action" icons
Notice...Shading effect from the light and shadow below object. If the objects were closer, there would be a slight shadow projected from the circle on to the square.
to be used in the creation of all icons not covered by the previous two
Notice... Location and shape of highlights from the light and angle of the shadow cast by the shapes. Also note a slight hint of shadow appearing in front of the object as well as to the side.

Artwork EchoIconGuidelines shadowExtension.png

Making a Shadow - MartinSourada

Shadows for icons can be created in Inkscape (using the blur effect). Here are some basic values.

Color: $2d2d2db9

Amount of blur: from about 12 to about 20.

Steps:

  1. Create a basic shape for the shadow to start with (for most action icons an ellipse is good)
  2. Extend the shape to better fit the icon
  3. Add gradient if needed (in this example I used a linear gradient with the colors of: $2d2d2da0 -> 2d2d2db9 -> 2d2d2d32)
  4. Apply blur effect (in the example I set 12,4)

Challenge: Something I'd like to try and and challenge this set to do is to create slightly tinted shadows. From painting experience...object of any given color will cast a shadow tinged with that of its complementary color and tinting neighboring colors. Juxtaposing complementary colors will also add higher contrast to the icon. Example: a blueish object will therefore cast an orangish shadow, while a reddish object will cast a greenish shadow. (See below.) The coloring is very subtle but I think that this could be one of the small things which could make Echo stand out.

If this is too involved, please use the standard dark gray instead.

Artwork EchoIconGuidelines colorShadows.jpg

[edit] Outlines

Outlines help define the shape of an icon. At smaller sizes, the outline should help users recognize the icon by presenting an identifiable shape. A well designed outline should also add to the discernability of an icon on light and dark backgrounds.

I did not want the outline to be a mere line which evelops the icon. The outline should add more to the icon...to be a shadow when it's on a light background, and a highlight when it's on a dark background. During my icon research I came across iconfactory.com , whose contests section contained Underwater - by Yegor Gilyov (shown below). The outline used here was not just an uniform solid line. Note its various widths (the outline towards the right and bottom are wider than the upper right), colors (the outlines are comprised of several colors cooresponding to the part it covered, there's even the use of gradients to add to the icons overall shape and shading), and overlap (the outline doesn't just exist on the outside, some flow inside to help define the shape of the icon). I incorporated this concept into the Echo icon design (see Echo sample icons below).

Artwork EchoIconGuidelines outlineUnderwater.jpg
Artwork EchoIconGuidelines outlineEcho.png
Comparison of icon border against dark and light backgrounds.
Artwork EchoIconGuidelines outlineBW.png
Above, is the same Microphone Icon on both the left and right. Note how the outline adds to defining the icons shape by appearing as highlight against the dark background and shadow on the light background.

At 16x16 pixels, please use a 1 pixel #364E59 border.

Artwork EchoIconGuidelines 16x16border.png

[edit] Echo Icons in Grids

[edit] Emblems

Artwork EchoIconGuidelines EmblemPlusStar.png

Pluses and Stars - MartinSourada

Plus SVG is used for action icons (thus often forward facing) symbolizing the creation of something new by the user. An example is the creation of a new contact in an address book. Such things are created by clicking on a button with a representative icon; whose icon name usually ends with "-new."

Star SVG should be used to note something that is new or upcoming in time. More generally, it symbolizes a state of being rather than the action of making it so (as the + would denote). Examples are such icons as mail-marked-unread and appointment-soon.

[edit] Attach Points

An attach point is a location (x,y) on the icon that can be used as an anchor point for attaching emblems or overlays. If no points are specified, then default positions will be used.

Artwork EchoIconGuidelines attachPoints.png

Attach Points is a list of points, separated by "|". The points are pixel coordinates from the top left corner of the icon, except for SVG files, where they are specified in a 1000x1000 coordinate space that is scaled to the final rendered size of the icon. For additional technical information written by Alex Larsson.

[edit] Terms of Use

Same as Tango, icons are cc-by-sa with icon naming licensed under the GPL (see the bottom of Tango Project page ).

[edit] References