fp-wiki>ImportUser (Imported from MoinMoin) |
m (→Color Palette) |
||
| (3 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
{{header|art}} | |||
{{ | |||
= Bluecurve Icon Guidelines = | = Bluecurve Icon Guidelines = | ||
| Line 17: | Line 11: | ||
Since pictures tend to illustrate this sort of thing better than words, check out the diagrams below: | Since pictures tend to illustrate this sort of thing better than words, check out the diagrams below: | ||
<BR> | |||
[[Image:Artwork_BluecurveIconGuidelines_window_perspectives2.png] | [[Image:Artwork_BluecurveIconGuidelines_window_perspectives2.png]] | ||
On the left, we see a window drawn in '''two-point perspective'''. Notice how the height of the vertical side of the window farther away from us is shorter than the vertical side of the window closest to us? Notice how the parallel lines of the top and bottom of the window frame are converging towards the top vanishing point? | On the left, we see a window drawn in '''two-point perspective'''. Notice how the height of the vertical side of the window farther away from us is shorter than the vertical side of the window closest to us? Notice how the parallel lines of the top and bottom of the window frame are converging towards the top vanishing point? | ||
| Line 26: | Line 20: | ||
Bluecurve icons are all drawn in isometric perspective in accordance with a particular grid. The gridlines of Bluecurve's grid are different from the isometric window example. You can see Bluecurve's grid below: | Bluecurve icons are all drawn in isometric perspective in accordance with a particular grid. The gridlines of Bluecurve's grid are different from the isometric window example. You can see Bluecurve's grid below: | ||
<BR> | |||
[[Image:Artwork_BluecurveIconGuidelines_bluecurve_grid_example.png]] | |||
<BR> | |||
The geometry of the isometric grid is as follows: | The geometry of the isometric grid is as follows: | ||
[[Image:Artwork_BluecurveIconGuidelines_grid_geometry.png]] | |||
Note: the left angle is at 45 degrees and the right one at 15 degrees. | Note: the left angle is at 45 degrees and the right one at 15 degrees. | ||
<BR> | |||
I've put together a full PDF page of this grid that you can print out and use to sketch out fabulous new Bluecurve icons. :) | I've put together a full PDF page of this grid that you can print out and use to sketch out fabulous new Bluecurve icons. :) | ||
[[Image:Artwork_BluecurveIconGuidelines_bluecurve_grid.pdf]] Bluecurve Grid Printout - Download Now | [[Image:Artwork_BluecurveIconGuidelines_bluecurve_grid.pdf]] Bluecurve Grid Printout - Download Now | ||
For creating new icons in Inkscape, here is a SVG grid: | For creating new icons in Inkscape, here is a SVG grid: | ||
[[Image:Artwork_BluecurveIconGuidelines_buecurve_svg_grid.svg]] Bluecurve SVG Grid - Download Now | [[Image:Artwork_BluecurveIconGuidelines_buecurve_svg_grid.svg]] Bluecurve SVG Grid - Download Now | ||
=== Kinds of perspective === | === Kinds of perspective === | ||
| Line 53: | Line 46: | ||
In addition of the isometric perspective, a "shelf" perspective is used, mainly in toolbar and menu icons. Unfortunately, Bluecurve is wrongly using a mix of both isometric and shelf perspective in the same toolbar. | In addition of the isometric perspective, a "shelf" perspective is used, mainly in toolbar and menu icons. Unfortunately, Bluecurve is wrongly using a mix of both isometric and shelf perspective in the same toolbar. | ||
[[Image:Artwork_BluecurveIconGuidelines_toolbars_icons_perspective.png] | [[Image:Artwork_BluecurveIconGuidelines_toolbars_icons_perspective.png]] | ||
Legend: | Legend: | ||
| Line 66: | Line 59: | ||
Well, no problem, here's a few flavors of Bluecurve icons that will hopefully clear things up: | Well, no problem, here's a few flavors of Bluecurve icons that will hopefully clear things up: | ||
[[Image:Artwork_BluecurveIconGuidelines_bluecurve_flavors.png] | [[Image:Artwork_BluecurveIconGuidelines_bluecurve_flavors.png]] | ||
= Color Palette = | = Color Palette = | ||
[[Image:Artwork_BluecurveIconGuidelines_bluecurve_palette.png] | [[Image:Artwork_BluecurveIconGuidelines_bluecurve_palette.png]] | ||
For working in Inkscape and GIMP here is a .gpl palette file: | For working in Inkscape and GIMP here is a .gpl palette file: | ||
[[Image:Artwork_BluecurveIconGuidelines_bluecurve.gpl]] GIMP Palette file - Download | [[Image:Artwork_BluecurveIconGuidelines_bluecurve.gpl]] GIMP Palette file - Download | ||
= Icon Components = | = Icon Components = | ||
| Line 82: | Line 75: | ||
As seen above, the current incarnation of Bluecurve does not have any kind of shadows. Here are some possible kinds of shadows: | As seen above, the current incarnation of Bluecurve does not have any kind of shadows. Here are some possible kinds of shadows: | ||
[[Image:Artwork_BluecurveIconGuidelines_shadows.png] | [[Image:Artwork_BluecurveIconGuidelines_shadows.png]] | ||
= Icon Sizes = | = Icon Sizes = | ||
| Line 97: | Line 90: | ||
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. | 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. | ||
[[Image:Artwork_BluecurveIconGuidelines_icon_sizes.png] | [[Image:Artwork_BluecurveIconGuidelines_icon_sizes.png]] | ||
= Attach Points = | = Attach Points = | ||
| Line 121: | Line 114: | ||
= Resources = | = Resources = | ||
* [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 gives 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 gives a good overview of isometric icon creation, with the specific goal of making 'Copeland' or old-school-Mac-style icons. | ||
| Line 129: | Line 122: | ||
* [http://tango-project.org/Tango_Desktop_Project Tango Project] - Tango Project Page | * [http://tango-project.org/Tango_Desktop_Project Tango Project] - Tango Project Page | ||
* [http://developer.gnome.org/projects/gup/hig/2.0/icons-design.html Designing Effective Icons] - Section from the Gnome HIG | * [http://developer.gnome.org/projects/gup/hig/2.0/icons-design.html Designing Effective Icons] - Section from the Gnome HIG | ||
[[Category:Artwork]] | [[Category:Artwork]] | ||
Latest revision as of 02:15, 22 January 2014
Bluecurve Icon Guidelines
Perspective
Understanding Isometric Perspective
Bluecurve icons use isometric perspective. What does this mean? Isometric perspective, simply put, is the lack of perspective. In other words, parallel lines drawn in isometric perspective are always equidistant - they never converge to a vanishing point.
Since pictures tend to illustrate this sort of thing better than words, check out the diagrams below:
File:Artwork BluecurveIconGuidelines window perspectives2.png
On the left, we see a window drawn in two-point perspective. Notice how the height of the vertical side of the window farther away from us is shorter than the vertical side of the window closest to us? Notice how the parallel lines of the top and bottom of the window frame are converging towards the top vanishing point?
On the right, we have a window drawn in isometric perspective. If you were to take a ruler to the left and the right vertical sides of the window, you'd notice that they are exactly the same length. You'll find the same is true of the top and bottom sides of the window. The parallel lines in this drawing do not appear to be converging to a common vanishing point at all.
Bluecurve icons are all drawn in isometric perspective in accordance with a particular grid. The gridlines of Bluecurve's grid are different from the isometric window example. You can see Bluecurve's grid below:
File:Artwork BluecurveIconGuidelines bluecurve grid example.png
The geometry of the isometric grid is as follows:
File:Artwork BluecurveIconGuidelines grid geometry.png
Note: the left angle is at 45 degrees and the right one at 15 degrees.
I've put together a full PDF page of this grid that you can print out and use to sketch out fabulous new Bluecurve icons. :)
File:Artwork BluecurveIconGuidelines bluecurve grid.pdf Bluecurve Grid Printout - Download Now
For creating new icons in Inkscape, here is a SVG grid:
File:Artwork BluecurveIconGuidelines buecurve svg grid.svg Bluecurve SVG Grid - Download Now
Kinds of perspective
In addition of the isometric perspective, a "shelf" perspective is used, mainly in toolbar and menu icons. Unfortunately, Bluecurve is wrongly using a mix of both isometric and shelf perspective in the same toolbar.
File:Artwork BluecurveIconGuidelines toolbars icons perspective.png
Legend:
- items highlighted in RED are using a Bluecurve isometric perspective;
- items highlighted in GREEN are using a Bluecurve shelf perspective;
- items without highlight are not Bluecurve, but Industrial (the upstream GNOME theme).
Composing Bluecurve Icons Using Isometric Perspective
'Okay,' you ask, 'so this whole grid thing makes it easier for me to draw isometric icons, but how do I know what angle within the grid to draw them at? And how do I handle groups of objects within the icon rather than a single object?'
Well, no problem, here's a few flavors of Bluecurve icons that will hopefully clear things up:
File:Artwork BluecurveIconGuidelines bluecurve flavors.png
Color Palette
File:Artwork BluecurveIconGuidelines bluecurve palette.png
For working in Inkscape and GIMP here is a .gpl palette file:
File:Artwork BluecurveIconGuidelines bluecurve.gpl GIMP Palette file - Download
Icon Components
Goes over lighting, outlines / line width, drop shadows, etc. Need this section. :)
As seen above, the current incarnation of Bluecurve does not have any kind of shadows. Here are some possible kinds of shadows:
File:Artwork BluecurveIconGuidelines shadows.png
Icon Sizes
Bluecurve icons come in 16x16 pixels, 24x24, 32x32, 36x36, 48x48, 64x64, and 96x96. The commonly used sizes being 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.
File:Artwork BluecurveIconGuidelines icon sizes.png
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.
[[Image:Artwork_BluecurveIconGuidelines_attachPts.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.
General Advice about Icon Creation
- Don't be afraid to sketch anything that comes to mind. Even if an idea is infeasible, it may be a valuable springboard for a great idea.
- Sketch out ideas on paper before going to the computer. It will save you a lot of trouble.
- Get feedback early and often! Feel free to send anything you come up with to fedora-art-list for critique and feedback!
- Issues to keep in mind with icon creation:
- Is there any text in this icon? Will it make it difficult for an international audience to understand? If so, are there any alternative representations or metaphors that could be used for the icon?
- Is there anything in this icon that could be considered offensive or lost on an international audience?
- Does this icon have a clear, distinct outline/profile? Would a color-blind user be able to distinguish this icon from other icons? How about a user with a badly-supported video card? :)
- Is there anything in this icon that may infringe upon other's intellectual property?
- Try to focus on getting the icon concept / metaphor right before spending a lot of time on the icon's rendering.
Resources
- OSXHI Guidelines - Apple Human Interface Guidelines doc section on Icons....
- Windows XP Icon Guidelines - windows XP icon guidelines from MSDN
- Icon Factory HowTo Article: Copeland - This article gives a good overview of isometric icon creation, with the specific goal of making 'Copeland' or old-school-Mac-style icons.
- Icon Factory HowTo Make Icons - This is the set of howto articles the Copeland article originated from - an interesting read for icon creators.
- One Thousand Square Pixels of Canvas - an interesting overview of computer icons from the Xerox Star to OSX. Some interesting omissions, like, say *ahem* any GNOME or KDE icons. Anyway, it's neat to see new and old icons alike on the same page and to be able to compare them.
- GUIdebook Icon Gallery - Nice gallery of cross-platform icons, includes Bluecurve!
- Tango Project - Tango Project Page
- Designing Effective Icons - Section from the Gnome HIG