From Fedora Project Wiki

< Artwork
(Redirected from BluecurveIconGuidelines)

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

Retrieved from "https://fedoraproject.org/w/index.php?title=Artwork/BluecurveIconGuidelines&oldid=367789"