Rockstar Icon Designer - Kate McInnes [39]
Type the percentage into the Pixel Dimensions and choose “Nearest Neighbor” from the Sampling options at the bottom. Nearest Neighbor will snap the lines of the Shape Layers to a pixel boundary. If all of your shapes are aligned with the pixel grid, the icon should be clear and crisp after it's scaled. If by some chance there are some blurry lines, it'll still be far less than other scaling methods. This method of scaling can also make some great large scale pixel images from small pixel style sprites.
Scale the icon and then tweak the lines to create a crisp design.
Because the icon is 100% vector shapes, if there are some elements which need simplifying, it won't take long to delete a few detail layers and refine some of the shapes so that the design is optimized for the smaller scale.
The design is optimized to look crisp when zoomed in at each scale.
Shelf View Icons
Shelf view is a style of icon mainly used in Mac OS X for utilities and settings. Shelf view can also be used with three dimensional objects that appear to be too distorted in desk view. Icons rendered in this view should be drawn with a straight on view with a drop shadow directly underneath and slightly towards the back of the object. Icons with more than one object can take advantage of the viewing angle by positioning elements to the front or back of the viewing plane. This is how shelf view is different from a flat view icon.
The viewing angle for shelf view icons.
The reason that many utilities icons are drawn at this angle is the level of readability that is needed for these designs. These icons help people change settings, fix problems and generally work their software and computers, so a very straight forward icon is needed. The shelf view displays the icon design with a clear silhouette which, on a crowded Toolbar or settings dialogue, is easier to see than an icon drawn in desk view.
This isn't to say that this style of icon needs to be overly bold or plain, it's just that the rate in which an icon is recognized can be improved by using a single view. You may also find that the Utility icons from the shelf view have pictographic versions made for Toolbar processes, with the front on view the silhouette can be the same no matter which style the icon is rendered in.
Another reason that shelf view icons are particularly useful for settings and utilities is that they're fairly adaptable to scaling with only a small amount of editing required for designs under 32px in size. This means the design doesn't change dramatically depending on the size or style they're being viewed in.
Tips for Creating a Glossy Shelf View Icon
For this design I will be creating a 512px sized glossy monitor icon with Photoshop using Shapes and Smart Filters. When creating icons that need both large and small scale, you should always strive to create everything with as much editability as possible. Shapes and Smart Filters will allow you to tweak the line weight and effects for each design so that they're as crisp and easy to understand as possible. It took me some time to fully understand the importance of editability, but when you have a large set of icons to make in a short amount of time, every little bit of reusable shapes and layer styles really help. The following exercise will demonstrate how an icon that's easy to edit and scale, can be made in Photoshop.
Plan the Design
Think about the object you want to draw, what stand out features does it have to make people recognize it? I'll be drawing a computer monitor. We all know that there are many buttons and cords on a computer monitor but for the purpose of drawing an icon, I will leave out the secondary details and focus on the screen and the stand. The larger scale icons need some added details to make the icon look more realistic, so I will also add an LED button at the front and an embossed symbol. I will also be adding a bright wallpaper to make the design stand out. Draw a