Online Book Reader

Home Category

Rockstar Icon Designer - Kate McInnes [52]

By Root 407 0
has a depth of 1% and an angle of 90 degrees with a 70% opaque white highlight and a 25% opaque black shadow.

Tab icons are supplied with two states, unselected and selected. An unselected icon is a mid grey (hex value 808080) with the counter shapes of the glyph set to be transparent. The selected version is white with transparent details and a 3px black drop shadow set to 25% opacity.

Status bar icons have a 90 degree gradient fill from hexadecimal color #828282 to #919191 with the counter shapes of the glyph set to be transparent and a 1px 90 degree inner shadow of 10% opaque white.

Viewing Angles Used: Android icons use zero-point perspective and should appear to be flat against the surface of the screen.

Light Source: The light source for the Launcher icons is top-lighting with a soft effect falling over the surface of the icon that gradually fades to zero opacity. A black drop shadow set to 75% opacity and a 90 degree angle is also used.

Format: PNG-24

Tango


Background

The Tango Desktop Project was created to provide technical and style guidelines that help designers and developers create a consistent user experience for open source desktop environments and software. With the aim to create a flexible and coherent collection of icons released under creative commons, The Tango Desktop Project encourages community involvement in creating clear and easy to use icon designs for a variety of open-source programs and operating systems. You can find the Tango style guides online at tango.freedesktop.org.

Style

The main aim for the style of the Tango icon set is to create icons that blend into both commercial and open-source desktop environments. The icons have a clean appearance with a soft and subtle use of gradients and neutral outlines, to help the designs stand out on both dark and light backgrounds. The objects are modern, simplified and slightly rounded on the corners.

Tango icons are designed to blend effortlessly into all major operating systems.

Technical Breakdown

Sizes: Because the Tango icon guidelines is to help create a library of icon assets rather than specific user interface designs, each icon is rendered at four standard sizes, 22px, 32px, 48px and 256px.

Note that the 256px icons are optional and should be designed with more detail than the main icon style. The icons should have some added detail, thin strokes and subtle highlights on key areas of the design.

Colors Used: The color palette for the Tango icon style consists of nine main primary and secondary colors in three shades. You can download swatches from the Tango Icon Theme Guidelines. The overall color palette is muted with a soft subtle use of color with darker outlines in a matching hue. The colors shouldn't be super saturated or have any bright lighting effects. The style should be modern, soft in appearance and harmonious alongside the main Tango Library.

Viewing Angles Used: Toolbar and document style icons have zero-point perspective and should appear to be flat against the surface of the screen. Application icons are drawn with table-op perspective with a subtle vanishing point behind the object.

Light Source: The light source is slightly above and to the left of the object and casts a soft blurry shadow underneath.

Format: PNG-24, SVG

Basic Steps to Plan and Create an Icon Set


Now that you have a better understanding of how to design and render icons, you're ready to make an icon set. The following is an outline of how to plan and render a basic icon set.

Get the Specs


Whether you're working as part of a development team or creating an icon set for stock, each project should begin with a clear understanding of the final output. Knowing the format that the icons will be required in will help you decide the software you will use to make the icon in, and how many different scales and color modes are needed.

If you're working with developers ask them for a list of the icon assets with the formats and the scales they are needed in. Once the list is made, spend some time checking it over and have

Return Main Page Previous Page Next Page

®Online Book Reader