This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.
This tutorial will provide examples wood and fabric texture creation techniques. Also we will learn how to render the light play on the objects with the help of the Opacity Mask, Blend Tool and Art Brushes. Studying this tutorial step-by-step, you'll get to know all the secrets of the professional icon design creation.
The icons for iOS applications have a typical size. Even though we are going to use a vector editor, the icon will be made at the required preset size. Understanding the above enables us to create a professional graphic, avoid creation of odd detail, which shall not ever be visible in real scale, or could affect its general view.
Today, we are going to make an icon with the size of 512 by 512 px. This size is used for displaying in iTunes, including CoverFlow and the App Store. The retro style is considered to be one of the fancy directions of modern design. Therefore, I've decided to make Radio App Icon as a retro-style radio set of the middle of the last century.
We'll begin with using the Rounded Rectangle Tool to shape the icon form having a set required size and corner rounding radius, as shown below.
Fill the form with dark brown color.
All the objects will be colored in the course of the icon creation process, but it is required to determine in advance the light source position. In our case, the light source is located top right. The gradient fill colors, drop shadow direction, highlight position and intensity depend on its position.
Application of some light sources or similar images shall be avoided. This is because our brain perceives the real world and graphics in a different way; therefore, should there be some light sources applied, your image might look unnatural and even lose its 3-D features. We need to use our artistic judgement with determining how to display light on our icon design.
Make a copy of the rounded rectangle and paste it directly on top of the previous one (Command + C; Command + F). Fill the copy with a linear gradient consisting of several brown color with light and dark tints.
As you can see, lighter sliders of the gradient are located to the right of this form, according to the light source position.
Make a copy of the last rounded rectangle made and paste it in front. Fill it with a black to white gradient, as shown in figure below.
Select two top rectangles and create an Opacity Mask by choosing Make Opacity Mask in the Transparency panel menu.
Therefore, we have achieved uneven light distribution within the top part of the image.
Make a copy of the rectangle initially created during the first step and paste it in front. Place the new form on the top of all created objects and fill it with a dark brown to brown linear gradient.
Select points A, B, C and D with the help of Direct Selection Tool (A), then move it vertically down by holding the Shift key to constrain it.
Keep the object selected, go to Object > Path > Offset Path, and set the offset value shown in the dialogue box.
Fill the rectangle with a dark brown color.
Now go to Object > Blend > Blend Options, and set the number of Specified Steps shown in the dialogue box. Select two forms on the top and go to Object > Blend > Make.
Make a copy of the top object and paste it in front. Move the new form from blend object in the Layers panel.
Fill it with a light brown color.
Now let's create the vector wood texture. Use the Rectangle Tool (M) to create a gray-filled rectangle. The height of such a rectangle shall be more than that of the light brown rectangle.
Keep the object selected, go to Effect > Sketch > Graphic Pen and set the parameters for such effect in the dialogue box.
Now, go to Object > Expand Appearance, and then to Object > Live Trace > Trace Options, and set the parameters shown in the figure below.
Go to Object > Expand and extend the vector texture horizontally with the help of the Selection Tool (V), while holding down the Alt key. The texture width shall be more than that the light brown rounded rectangle.
Fill the texture with a light brown color. This color shall have a slightly lighter tint relative to the rectangle placed under it.
Use the Warp Tool; Double-click on this tool icon in the toolbar, which will open the dialogue box with its settings.
Apply horizontal and vertical offsets of the texture grains with the help of the Warp Tool.
Select the whole texture and go to Effect > Distort & Transform > Roughen, and set the parameters for such effect simultaneously observing the changes applied to the texture.
Make a copy and paste the texture in front. Fill the copy with a darker tint of brown color and move it slightly down. Modify the parameters of the Roughen effect; set the Multiply Blending Mode and decrease the Opacity. All these parameters are accessible from the Appearance panel.
Applying the technique described in steps 7 and 8, I've created one more kind of the texture and placed it above the two previous ones. For demonstration purposes, the visibility of the first two textures has been disabled, as shown in the figure below.
However, all textures together look as follows.
Using the Pen Tool (P) to make the shape of the shadow.
Keep the object selected, go to Effect > Blur > Gaussian Blur, and set the radius value as shown below.
Apply the Multiply Blending Mode and decrease the Opacity with the help of the Transparency panel.
Make a copy of the light brown rounded rectangle and paste it in front. Place the copy above all previously created objects.
Select all textures, the shadow shape, and top rounded rectangle, then click on the shortcut Command + 7, thus creating the Clipping Mask.
Now, the shadow and all objects of the texture are grouped. Decrease the Opacity of this group with the help of the Transparency panel.
Select the sublayer with the Clipping Path in the Layers Panel and paste it in front.
Move the created path out from the group with Clipping Path and fill it with a white to gray linear gradient.
Apply the Multiply Blending Mode for the object with the help of the Transparency panel.
Now let's create a radio set tuning scale. Use the Ellipse Tool (L) to draw a dark brown filled ellipse.
Make a copy of the created ellipse and paste it in front. Hold down the Alt + Shift keys, then decrease the size of the ellipse on the top with the help of the Selection Tool (V).
Select both ellipses and go to Object > Blend > Make.
Create two more ellipses as shown in the figure below.
Use the Scissors Tool (C) to cut the ellipses in points 1-8. Delete the segments between them.
Apply the appropriate profile from the Stroke panel to the left segments.
Select all the segments and go to Object > Expand Appearance. Now we can fill the objects with linear gradients. Therefore, we have created the glares on the tuning scale rim.
Create the new ellipse and fill it with a complex linear gradient, as shown in the figure below.
Next we'll fill the two ellipses with a brown color and linear gradient.
Let's create a series of ellipses with strokes of various widths and without filling them.
Select them and go to Object > Expand. Now fill them with linear gradients as shown in the figure below.
Draw the ellipse in the center of the tuning scale.
Fill it with a conical gradient.
Detailed instructions for such conical gradient fill creation are provided in my tutorial accessible here Create a Conical Gradient with Adobe Illustrator, in Two Minutes!.
Using the Pen Tool (P) to draw a sloped line that shall come across the center point of the central ellipse.
Use the Scissors Tool (C) to cut it into two points and then delete the central segment.
Select both segments and go to Object > Expand; now, fill the objects with a white to yellow linear gradient.
Select both segments, copy them, and paste it in back. Fill the lower segments with a dark gray color and move them a little bit down.
Now let's create the glare. Use the Ellipse Tool (L) to draw an ellipse. Now turn and stretch it, then drag one of it points in the direction of the tuning scale center with the help of the Direct Selection Tool (A). Fill the object with a light yellow color.
After that, draw one more ellipse and fill it with a white color.
Set the Opacity value at 0% in the Transparency panel for the lower placed object.
Select both objects, then having used them as the base, create the blend (Object > Blend > Make).
Draw one more ellipse and place it below all tuning scale objects. Fill it with black, apply the Multiply Blending Mode, and decrease the Opacity in the Transparency panel.
Now let's proceed to the radio set loudspeaker creation. Use the Pen Tool (P) to create the form shown in the figure below.
Now create the circle, select both forms, and press the Minus Front key in the Pathfinder panel.
Fill the obtained form with a dark beige color.
Unfortunately, it isn't efficient to round the corners of such forms with the help of standard Adobe Illustrator tools. The Round Corner effect is not applicable in such cases, as it distorts all the form.
Therefore, it is helpful to round the corners manually by adding the points and moving them with the help of handles. The most convenient way chosen by me for solving this problem is the VectorScribe plugin that enables easy rounding of any corners with the help of the Dynamic Corners Tool.
Let's create the fabric texture on the loudspeaker. Use the Rectangle Tool (M) to draw a rectangle a 1px width.
The color fill for such a rectangle can be any for the moment. Leaving the rectangle as selected, go to Object > Transform > Move, and set the horizontal offset value, then press the Copy button.
Now press apply Command + D as many times as required to cover the loudspeaker form with the rectangle copies.
It is required that all such rectangles are filled with different tints of brown color. To our good fortune, this could be done automatically. Use the Color panel to create some tints of brown color and save them in the Swatches panel.
Now, select all the rectangles, chose the required colors form the Swatches panel, and start the Random Color Swatches script. You can download this freeware script and get the detailed information on it by clicking on the following link Random Swatches Fill.
Keep the rectangles selected, go to Effect > Distort & Transform > Roughen, and set the parameters of the effect.
Group all the rectangles. Apply the previously described technique to create a group of horizontal rectangles.
Apply the Multiply Blending Mode for the group.
Copy the loudspeaker form and paste it in front, and then place it above all the objects.
Select the fabric texture and the top form by applying Command + 7, thus creating the Clipping Mask.
Use the Rectangle Tool (M) to draw a few rectangles, which are to be filled with a linear gradient.
Group them and drag them to the group with the Clipping Mask of the loudspeaker. This manipulation should be done in the Layer panel.
Copy the grouped rectangles and paste them in back. Fill the group with a gray color and apply the Multiply Blending Mode using the Transparency panel.
Now the shadow is created.
Let's make the inscription on the loudspeaker. For this purpose I've used the Sf American Dreams font that can be downloaded by clicking on the following link. So, use the Type Tool (T) and create the inscription "Radio".
Keep the text selected, go to Type > Create Outlines, and then to Object > 3D > Extrude & Bevel, and set the parameters of the effect shown in figure below.
Also you can adjust the object illumination; for this purpose it is necessary to press the More Options key in this dialogue box.
Copy the inscription and paste it in back. Fill the low placed inscription with a gray color and then apply the Multiply Blending Mode with a decreased of opacity in the Transparency panel. Now move it a little bit down and to the right. Thus the dropping shadow of the inscription is created.
Use the Pen Tool (P) to create the form of the end part of the opening in the radio set case.
Apply the technique described in steps 7-8 to create the texture for this object.
Create the shape of the shadow from the right edge of the opening in the radio set case and fill it with a brown color.
Drag the sublayer with this form to the group with the Clipping Mask of the loudspeaker.
Leaving the object as selected, go to Effect > Blur > Gaussian Blur, and set the blur radius in the dialogue box.
Now, decrease the Opacity of the shadow form.
Now, let's create the indicator. The technique of the creation is similar to the same ones just described in this tutorial; therefore, I am going to show you the steps of it creation for you to work from.
Now it's time to create the tuners. Using the Pen Tool (P), create the form similar to the form shown in figure below.
Drag this form to the Brushes panel and save the new brush as the Pattern Brush.
Create the circumference and apply the Pattern Brush to it.
Keep the tuner form selected, go to Object > Expand Appearance, and swap fill and stroke.
Use the Ellipse Tool (L) to create the circle shown in figure below.
Select all tuner elements and press the Unite button in the Pathfinder panel.
Make the obtained form smaller and place it in the bottom part of the radio set.
The fill color for such forms can be any for the moment.
Select the tuner and go to Effect > 3D > Extrude & Bevel, then set the parameters shown in the figure below.
Now, go to Object > Expand Appearance. The said manipulations shall result in the creation of the regular vector objects group. Fill the end surfaces of the tuner with linear gradients to render the light distribution on them.
Create the ellipse on the front tuner surface and fill it with a radial gradient, as shown in the figure below.
Now create the rim on the tuner, and fill it with a linear gradient.
The glares on the tuner are created with the help of Blend objects by applying the technique described above.
It is possible to apply another technique for the creation of the glares. Use the Pencil Tool (N) to create the form of glares with the following application of the Gaussian Blur effect.
These forms reproduce the soft illumination. Now, let's create more intensive glares. The said forms are also created with the help of the Pencil Tool (N), but without application of the Gaussian Blur effect in this case.
Use two ellipses and the Blend Tool to create the shadow from the tuner.
Group all the elements of the tuner, and duplicate it twice, having placed the tuners as shown in the figure below.
Let's proceed with the creation of the glares on the radio set case. Use two ellipses to create the Blend object.
Drag it to the Brushes panel and save the new brush as the Art Brush.
Now use similar brushes mentioned to create all the glares.
App Formatting and the Final App Icon
So, we have created an icon with the size of 512 by 512 px. It is possible to use the existing objects for creation of icons with other sizes. To our good fortune, we are dealing with 'dimensionless' vector. However, it's recommended to alter some elements when resizing.
For example, for the icons that are smaller sizes, it's advisable to modify the inscription in order to make it more readable. Also you can simplify the textures and delete some glares. Any time you have applied transformations, always verify its efficiency by looking at the real sized icon.
Any icon for iOS-applications shall finally have the bit-mapped format (PNG) and therefore, you are able to view your artwork in the Pixel Preview mode (View > Pixel Preview) in order to estimate the quality of the final product.
The final icon is shown below.