Super practical! Let’s talk about icon design process and tips

Icon design requires proficiency in the use of software, covering various vector properties, masks, and constructive solid geometry. Therefore, students will need to use different software tools and techniques. Today's translations are all super practical skills.

Graphic creation vs Graphic style

I think it is very important to make the correct distinction between creating vector paths and setting graphic styles because they are achieved through two completely different design software - Photoshop and Illustrator.

Photoshop's rendering quality and masking capabilities surpass almost all design software, while Illustrator includes a wealth of vector functions. In my long journey of icon design, Illustrator is the king of vector paths.

Thankfully, the transition between Photoshop and Illustrator is pretty seamless. My workflow is usually to do simple graphics in Photoshop, but if it comes to a whole set of icons or anything complex, I’ll start with Illustrator and then move to Photoshop for styling.

In short, Illustrator is used to create graphics, and Photoshop is used to set styles and output.

Specification

If you have control over the icon size, then the icon style and line weight should help with the specifications, as many icons must have a center line. That is, if an icon is an even number in width, then the center line cannot be an odd number in width. Similarly, if an icon is an odd number in width, then the center line cannot be an even number in width.

When you use an even line width, the icon size should be: even (width) x even (height). When the line width is odd, the icon size should be: odd (width) x odd (height).

Try not to mix odd and even sizes as much as possible (unless you go crazy if you don't, then also make sure to use different line thicknesses on different axes).

Don’t use high resolution to mask this problem — using 1pt (or 1dp) lines in an odd-width icon may look fine on a Retina device, but will definitely cause problems at 1× and 3× sizes.

In fact, as long as you think of all the points as the basic grid of the icon and avoid too small offset positioning, everything is not that complicated. Make sure that all icon designs should start from 1×.

OS X App Icons

Using a simple grid system can help with the drawing of app icons. OS X app icons grow in multiples, so I can use the 16×16 pixel icon to roughly define the positioning of the 1024×1024 icon, which makes the workflow much easier. For those very small versions, there is no need to adjust too many details.

However, Apple’s icons don’t follow the grid perfectly. For some reason, they’re off by a few pixels — the Safari icon is 898 pixels in diameter instead of 896 pixels, which would fit perfectly on the 1/16 grid.

To sum up, the icon size I defined is not exactly the same as Safari, iTunes and other Apple icons, but it is only 2 pixels out of 1024 pixels, and following the grid is more important to me. I am curious why Apple chose this size.

iOS App Icon

iOS app icon sizes are not as consistent as OS X icon sizes, so the workflow is a little more complicated. Below is a list of all current iOS icon sizes.

• 29×29

• 40×40

• 58×58

• 76×76

• 80×80

• 87×87

• 120×120

• 152×152

• 180×180

• 1024×1024 (App Store)

There are currently 10 sizes in total, but if you only need to make a 1x grid size, then you only need to focus on the 5 main sizes.

• 29 (1×), 58 (2×), 87 (3×)

• 40 (1×), 80 (2×), 120 (3×)

• 60 (1×), 120 (2×), 180 (3×)

• 76 (1×), 152 (2×), 228 (3×)

• 1024×1024 (App Store)

With 4 basic sizes plus the App Store size of 1024×1024 pixels, the workload is halved. Another good news is that if Apple releases a 3x size iPad one day, you have basically completed the icon for that specification.

In the beginning, it’s important to resist the temptation to go for high-resolution sizes and focus on 1x, which can save us time and lead to more efficient and maintainable designs. When things get right, it’s not too late to start working on 2×, 3×, or 4× versions.

Be especially careful with Smart Objects, as they may have unusual size variations.

#p#

Start with Illustrator

Illustrator not only allows you to clearly observe all vector nodes when designing icons at a 1x grid size, but also has countless unique features that cannot be achieved in any other software. Many of these features are really addictive, which is why I choose Illustrator as the first step in my icon workflow.

Snap to Grid Settings

I don’t really like Illustrator’s Snap to Pixels setting, but the effect is still very good after checking “View → Snap to Grid”. Remember to turn off Snap New Objects to Pixels. Snap New Objects to Pixels can be found in the New Document or Transform panel.

If you need to make very fine pixel adjustments, use the Move panel (Object → Transform → Move, or just press Enter).

Customize the Tools Panel

I recently re-edited my tool palette, removing some tools that I don't use very often and showing tools that were previously hidden.

Pathfinder

If you want to add, subtract, or exclude shapes (often called Boolean operations or constructive solid geometry), the Pathfinder in Illustrator is the most useful feature of any vector editing software.

My favorite feature of the Pathfinder tool is the Divide function - it separates overlapping shapes into separate shapes, making it easy to delete the unwanted parts.

Shape Generator

The Shape Builder feature is newer than the Pathfinder feature and is quicker to use. If you have several independent shapes overlapping each other, select the Shape Builder and drag to combine the shapes, or hold down Option while dragging to subtract shapes.

M Select Shape Generator.

#p#

Real-time rounded corners

Illustrator CC 2014 adds a new live rounded corner feature, which appears like a small handle at all corners. Drag the small handle to control the angle of the rounded corner. This feature is not only for rectangles, but also for all shapes.

The Live Rounded Corners feature makes it possible to create graphics that would otherwise be difficult or time-consuming to draw. Like many other lovely features of Illustrator, this feature makes the work of designers easier.

If you want to define the angle precisely, you can enter the corner diameter value in the control panel.

distortion

Illustrator's Distort and other Envelope Distort tools can be used to bend and twist various shapes to make graphics more interesting.

Path Profile

I usually convert the strokes to paths first, then go into Photoshop to set the style. Some software also has this function, but not many. For me, this function is essential in vector editing software.

Stroke variables

In Illustrator, we can adjust the width of each part of the stroke.

Select the Width Tool (Shift-W), double-click the node you want to edit, and a control panel will appear for you to input data to precisely control the width. This tool can accurately draw shapes that other tools cannot draw.

dotted line

There are two modes for dashed lines in Illustrator - corner aligned and regular spacing. Corner aligned dashed lines always look more comfortable, but most design software do not include this option. Dashed lines can be converted into paths and placed in Photoshop for subsequent editing.

#p#

Single Transformation

In Illustrator, it is quite easy to adjust the size, rotation angle, and displacement of multiple objects at the same time, and it can also make the above adjustments for each individual object. This small function can save us a lot of time and energy.

Lasso selection

When a marquee selection doesn't fit the complex selection, the Lasso tool can. You can use the Lasso tool in conjunction with the following keys: (Add Selection), (Subtract Selection).

Graphic Style

To improve my work efficiency, I set some graphic styles in Illustrator. If your icon contains many elements with the same graphic style, this will definitely help you save a lot of time.

Pixel Preview

To be honest, Illustrator's pixel preview is pretty bad, and the example picture shows how bad it is - scattered pixels, no gradient dithering, etc. These make its pixel preview unconvincing. Because I will eventually set the style in Photoshop, Illustrator's pixel preview has no effect on me, but we still need to be aware of this feature.

You can see the comparison of the pixel previews of Illustrator and Photoshop in the picture, the difference is quite obvious.

Scattered pixels are dangerous. The specifications of iOS and OS X interface images must be exact multiples of data, so an extra scattered pixel in an image will cause problems.

Photoshop Style Settings

Once I have the paths for the icon, I paste them into Photoshop as shape layers. If you have multiple paths, you can select and copy them all in Illustrator and paste them into Photoshop as separate layers. Select a path and press the [[140207]] J key to move it into a new layer.

Output

I don't recommend exporting bitmaps through Illustrator.

I also don't save iOS icons as PDFs.

I use Photoshop slices to export to PNG or other bitmap formats. This approach has many advantages, such as: you can choose a layer that takes 10 seconds to load, or a whole set of icons that takes 100 seconds to load; keep the style intact; easy to edit. (The original author has another article on the application design process, which contains more details about the slice tool. If you are interested, the editor can compile it later.) If it is exported to SVG format, I usually use Photoshop's generator and Illustrator in combination.