With smartphones increasing the pixel density of their screens it's in a designers best interest to consider vector graphics when creating apps and their icons alike. Designing an app icon with vectors will let you increase or decrease the size of the icon to suit the requirements met by various app stores. In this tutorial I'll show you how to create a wooden mailbox icon for iOS in Adobe Illustrator. We'll create a semi-realistic wood grain pattern and an airmail envelope forced perspective to give your icon a 3D feel.
Please be aware that for this tutorial you'll need the "Round Any Corner" script that you can download here.
1. Create a New Document
With the introduction of the iPad 3 with retina display Apple is now asking designers to provide an icon size of 1024 x 1024px for display in their app store. Since retina displayed are doubled this means that the final image will only appear at 512 x 512px on the device itself but the result is crisp, pixel perfection on your screen.
To this end we will need to open Illustrator and create a document of 1024 x 1024px and the settings outlined below. If you wish, there is a pretty great template already made and ready to be installed by the great folks at HicksDesign. You can download and open this file instead if you so wish. For the purposes of this tutorial I will be creating a new document from scratch at 1024 x 1024px. I will leave it up to you the reader to scale and adjust your design to fit the other required file sizes.
With our art board in place let's create a mask to work under. When creating an app icon please work from corner to corner. Though the corners are rounded and cut off in the app store the original image is a square and is cropped by code, this way if there is bleed the correct colors will peek through and you won't have a black halo effect around the edges.
Let's select the Rectangle Tool (M) and click on the art board and create a square that is 1024 x 1024px. Now select the Rounded Rectangle Tool and click on the art board and create a square that is also 1024 x 1024px and be sure to adjust the Corner Radius to 180px.
With our mask shapes made let's select them both at the same time and navigate to the Align panel (Window > Align) and choose the center the objects Horizontally and Vertically to the art board itself.
With both objects still selected navigate to the Pathfinder panel (Window > Pathfinder) and select the Minus Front option.
At this point your free to adjust the color of the mask and remove the default border.
Navigate to the Layers panel (Window > Layers) and change the layer name to "Mask" or what ever you choose then click the empty square space in between the eye icon and the layer name to lock the layer.
Now create a new layer and drag it beneath the mask. This will be the layer we will create the icon on so the mask hides the edges we want to work around.
2. Create Your Wooden Box Basic Shapes
We'll now begin our wooden mailbox. The mailbox section is a composite of many different layers. To help with confusion let's start off by creating multiple shapes that we will color code for later refinement. We'll be recoloring them later properly but for now we want to get all the shapes in place and avoid any confusion.
To start off we'll select the Rectangle Tool (M) again and create another square at 1024 x 1024px and center it to the art board. I'll color this cyan for each access. This will be the very back of the canvas but will serve as the front most facing side.
Select the Rounded Rectangle Tool and click to create a rectangle shape that is 1024px wide by 874px high with the corner radius set to 180px. I'll recolor this to magenta then alight it to the top and center of the art board. This will be our inner front facing side.
Copy the previous shape and Paste in Front (Command + F) then change the color, I've chosen yellow. With this rounded rectangle still selected go to Object > Path > Offset Path and enter the information below. Then select Object > Expand to expand the shape to the proper size. Now, while holding Shift on your keyboard press the Down Arrow on your keyboard 15 time to nudge the shape down 150px. At this time the shape is a bit too tall but we will correct this later.
Select the magenta shape and Copy and Paste in Front, making sure to then Right-click and select Bring to Front or Shift + Command + ] to bring it to the very front of that layer. I'll color this green.
We'll now repeat the step before our last and copy the previous shape and Paste in Front. With this rounded rectangle still selected go to Object > Path > Offset Path and enter the information below. Then select Object > Expand to expand the shape to the proper size.
Now select both green shapes and choose the Minus Front option from the Pathfinder panel (Window > Pathfinder).
Next we'll need to add some anchor points to this green shape. Select the Add Anchor Point Tool (+) then click to create 4 extra points on each of the bottom shape paths (8 in total). Don't worry about the exact location at this time, we'll adjust that in the next step, just try to keep them grouped in sets of twos to either side of the rounded corners. As seen below.
Now select a point to the far left on one of the paths and navigate to the Transform panel (Window > Transform) and adjust the X axis to 277px. Now repeat this for the corresponding anchor point on the other path. We're going to adjust this for each anchor point on these paths using the following measurements.
We can now select the 4 inner most anchor points, 2 from the upper path and 2 from the lower path, then while holding Shift on your keyboard nudge these anchor points down 6 times.
Select all 8 anchor points you created then run the Round Any Corner Script (File > Scripts > Round Any Corner) with a radius of 15px.
While we're here let's fix that yellow shape. If you notice it's hanging below the green shape which is supposed to be covering it. Select the Direct Selection Tool (A) and select the bottom 4 anchor points then drag them up so they sit within the green shape without any yellow showing below.
With the Selection Tool (V) select the whole green shape then Copy and Paste in Front and I'll color this shape purple. With the Rectangle Tool (M) draw out a selection over the top of this purple shape covering the top part but leaving the dipped in section at the bottom. Now select the purple rectangle we just drew and the one we copied earlier and in the Pathfinder panel (Window > Pathfinder) select to Minus Front to crop the shape as seen below.
Let's select the green shape again and Copy then Paste in Front, making sure to then Right-click and select Bring to Front or Shift + Command + ] to bring it to the very front of that layer. I'll color this white since it will be a highlight later on.
With the white shape still selected go ahead and Copy it then Paste in Front. Ensure the Selection Tool (V) is enabled then press down on the keyboard 5 times to nudge it down 5 pixels.
Select both white shapes then in the Pathfinder panel (Window > Pathfinder) select to Minus Front to crop the shape as seen below. We might as well change the Blending Mode of this white shape and drop the opacity since it's the only adjust we'll be making to it. So set the Blending Mode to Overlay and drop the Opacity to 25%. It won't look like much now but you'll be able to see it later on.
3. Add Color and Gradients to Your Wooden Box
With our basic shapes created let's start to bring our mailbox to life. Start by selecting our cyan shape on the bottom and add a Linear gradient with the following colors and stops.
Now select the magenta shape and apply a Linear gradient to this as well using the following colors and stops.
Let's continue by selecting the yellow shape and adding a Linear gradient rotated 90 degrees with the following information. We're also going into the Appearance panel (Window > Appearance) and adding an Inner Glow and an Outer Glow with the following attributes.
Select the green shape and apply the following Linear gradient as well as a Drop Shadow using the Appearance panel (Window > Appearance).
Finally select the purple object and add a Linear gradient with the following colors and stops, paying close attention to the transparency of each color stop. We can then change the Blending Mode to Overlay and drop the Opacity to 34%.
4. Create a Wooden Texture
At this point our mailbox is looking pretty great. The colors and gradients really give it a 3D feel but it's still a bit flat and needs some texture to make it feel like wood.
To start off I'm going to hide the Mask and App layers I have then create a new one and name it "Wood texture".
With the Ellipse Tool (L) selected create a circle on your art board, the position doesn't matter nor the size, but keep in mind we're going to be copying and expanding this circle a few times to achieve the desired effect. Mine will be 200x200px.
Copy the circle and Paste in Back (Command + B) and while it's still selected hold Shift + Alt then click and drag one of the corners of the selected bounding box to increase the size of the circle. Repeat this step about 6 more times so you have 8 circles in total creating a sort of 'bullseye' pattern. Try also to vary the distance between the circles, this will give it a more randomized natural look later on.
After you have your circles in place select them all simultaneously and then enable the Warp Tool (Shift + R). You can double click on this tool to bring up its settings and adjust them as you see fit. I'll be using the settings outlined below but adjusting the radius during this process. With the tool adjusted to your liking and the circles still selected, click and drag your mouse over the rings to warp them slightly. Try not to go all the way through the shape and stop a few times between circles to get a nice random look. Here's how mine looks after I'm done.
With the shapes still selected let's add a Radial gradient, Drop Shadow, and Inner Glow and remove any strokes if there are any as outlined below.
We'll now Group (Command + G) these shapes together and turn on the Mask and App layers so we can see what we're working with. Before we continue please ensure that the scale Strokes and Effects option is disabled in your preferences. Go to Illustrator > Preferences > General or press Command + K then ensure the "scale Strokes & Effects" check box is deselected and hit OK.
Now with our group selected grab the handle of the bounding box and flatten the shapes to make warped elongated ovals. You may need to stretch it longer than the app actually is keeping in mind the placement of the center most object as this is considered a "wood knot" and while pretty, can be an eyesore if too prominently placed.
With the group still selected let's set the Opacity to 75% and Blending Mode to Soft Light. Enable the Warp Tool (Shift + R) again and further warp the shape so that it's fluid and natural and flow around the rounded corners of the box. Feel free to make any final tweaks to the texture at this time. The more random the more natural the wood will feel. You may also wish to double click the grouping and select the individual shapes to adjust the gradient slightly. I found that the center "knot" gradient was a bit too harsh so I enlarged it some and adjusted the placement to make it blend better.
Let's mask the excess texture so it's not visually impairing. Select the Rectangle Tool (M) and click on the art board and create a white square with no stroke that is 1024 x 1024px and align it to the center of the art board. Enable the Selection Tool (V) and Shift-click on the texture group so both the square and the texture are selected. Navigate to the Layers panel (Window > Layers) and in the upper right of the layers section there is an icon that looks like 4our horizontal lines with an arrow next to it. Click this icon and select the "Make Clipping Mask" option.
While in the layers panel open the App layer by clicking the Arrow next to the layer name/icon. Now click and drag the Wood Texture layer into this layer and drop it in the space right above the bottom most layer. I also recommend that you lock this layer as well as the mask will only hide the excess, the hidden elements will still be selectable and can get in the way.
If you wish, you can duplicate this texture layer and rotate it and warp it some more to fit the inner part of the inbox icon. However, for this tutorial this area will be covered later by envelopes so there really is no need for this extra element.
We'll now create the wood grain for the cut section of the inbox. This is the 100px wide inner section with the dip cut out at the bottom. Let's begin by creating a new layer called "Wood Cut" then select your Pen Tool (P) and adjust the Fill to transparent and a black Stroke that is 3px wide. With this we will now click to create a swirly, squiggly line that will represent the cross section of the wood grain.
Keep in mind that when wood is cut, the grain from the front bisects to the corresponding grain ring on the back. Since we can't exactly see the back at this perspective we will take some artistic licenses and imagine where they would end, however we can see the front grain pattern and where it connects to the cut portion of the box. When drawing your path you may wish to zoom into the box to get a better idea of where the grain intersects on this front portion. For the rest you can make it up as you go along.
With the squiggly path selected enable the Width Tool (Shift + W) and make small adjustments to the path to vary the weight in some areas. Wood grain is far from perfect and should not be a uniform size.
Now let's blend the squiggly path with the box itself. Open the Appearance panel (Window > Appearance) and adjust the Opacity to 50% with the Blending Mode set to Overlay, Then add a Drop Shadow as outlines below.
Let's mask off the excess. Select the cut section of the inbox from the App layer and Copy it. Navigate to the Layers panel (Window > Layers) and click the round icon to the right of the layer named "Wood Cut". Now Paste in Front and change the Fill color to white.
Enable the Selection Tool (V) and Shift-click on the squiggle path so both the cut section and the squiggle are selected. Navigate to the Layers panel (Window > Layers) and in the upper right of the layers section there is an icon that looks like 4our horizontal lines with an arrow next to it. Click this icon and select the "Make Clipping Mask" option. Feel free to lock this layer as well so it won't get in the way later.
While in the layers panel open the App layer by clicking the Arrow next to the layer name/icon. Now click and drag the Wood Cut layer directly above the corresponding cut layer.
With that in place step back and bask in the beauty that is your wood!… er… Wooden inbox.
5. Create the Envelopes
Now that the Wooden inbox is complete, you can stuff this section with anything you wish, however since it is an inbox let's fill it with airmail envelopes.
Let's start by hiding the Mask and App layer then create a new layer named "Envelope" so we're starting with a clean slate.
Enable the Rounded Rectangle Tool and click no the art board and make a rectangle that is 790 x 500px with a rounded radius of 32px. This will be the base of our envelope.
Let's style this shape with the following attributes in the Appearance panel (Window > Appearance). We'll be adding a Linear gradient, an outside stroke and a Drop Shadow.
Now we'll create the stripped border pattern. To do so select the Rectangle Tool (M) and click on the art board and create a square that is 40 x 40px.
With our new square selected Right-click on the rectangle and choose Transform > Transform Each then enter the following parameters and click Copy, not OK. Clicking OK will simply move the rectangle, but clicking Copy will move and duplicate it. Now Right-click on the new shape and select Transform > Transform Again (Command + D) 10 more times so we should have a total of 12 squares.
Now select each alternating square and adjust the colors. We're creating a Blue > Red > Blue > Red… pattern with the colors. outlined below, and make sure to remove and strokes.
Enable the Selection Tool (V) and click and drag a selection over all of the colored square to select them and Group (Command + G) them together. Then grab the top middle handle of the bounding box and stretch the boxes upward morning elongated rectangles. Now position your mouse near one of the corners of this multi colors. bar code grouping and while holding SHIFT-CLICK and rotate it till it clicks once into place. Click and drag the bar code group so it is positioned over the envelope shape so the top blue stripe lines up with the top left corner and the bottom red stripe lines up with the bottom right corner. You may need to grab the bounding box handle and fiddle with the adjustment to your liking, just make sure that the stiles follow through the entire cross section of the envelope shape.
Click on the envelope shape and Copy and Paste in Front now Right-click and select Bring to Front or Shift + Command + ] to bring it to the very front of that layer and press D on your keyboard to reset the default layer style/colors.
Copy and Paste in Front this new top envelope shape. With the duplicate top envelope shape selected go to Object > Path > Offset Path and enter the information below. Now Shift-click so both top most envelope shapes are selected and navigate to the Pathfinder panel (Window > Pathfinder) and select the Minus Front option.
Now Shift-click so the hollowed out envelope shape and the rotated bar code shape are selected and in the Pathfinder panel (Window > Pathfinder) click the Crop option from the bottom row of icons.
Once again select the bottom envelope shape and Paste in Front now Right-click and select Bring to Front or Shift + Command + ] to bring it to the very front. Now in the Appearance panel (Window > Appearance) remove the Fill color and Drop Shadow. We'll be adjusting the current Stroke and adding another. One will be 4px wide and one that is 10px wide both set to Inside and with an Opacity of 35%.
Our envelope is pretty much done but let's embellish it a little. Select the Text Tool (T) and click on your art board and enter a name and address of your choosing. I've chosen a nice handwritten font called Handwriting Dakota but feel free to use what ever you fancy. Then be sure to align the text inside your envelope.
I'll continue the embellishment by adding some stamps. For the first one select the Rectangle Tool (M) and click on the art board and make a rectangle that is 180 x 98px then adjust the fill color to blue and add two inside facing strokes as outlined below. This drag it so it's in the upper left corner of the envelope.
Now select the Text Tool (T) and click inside the blue rectangle and add the text as outlined below.
Let's continue with the stamps and make another. Begin by selecting the Ellipse Tool (L) and click on your art board and make a circle that is 155 x 155px then give it an outside stroke of 6px and set to a grey color
With the circle selected Copy and Paste in Front and remove the stroke and contract the circle so it fits inside the stroked circle. Mine will be 97 x 97px. With that inner circle selected enable the Text Tool (T) and position it over the inner circle and click on the path and enter the text below, or what ever you like, using the settings outlined below.
Select the Rectangle Tool again and click on the art board and create a rectangle that is 25 x 55px. Now fill this rectangle with the same grey color from the stroke on the circle. Copy and Paste in Front and rotate it so it is laying horizontally then select both grey rectangles. In the Pathfinder panel (Window > Pathfinder) select Unite and the two rectangles should now be a plus sign. Now center this plus sign in the middle of the circle and text.
With the Rectangle Tool (M) still enabled click on the art board once more and create a rectangle that is 400 x 6px.
Line this rectangle up to the top of the stroked circle then while Shift + Option and click and drag the rectangle to the bottom of the circle to duplicate and move it at the same time.
With both elongated rectangles selected go to Object > Blend > Blend Options and enter the settings seen below. Now go to Object > Blend > Make to apply the blend. You should now have 6 elongated rectangles perfectly spaced.
Now visit Effect > Warp > Flag and enter the settings below.
Click and drag the now wavy lines over the stroked circle so all the lines touch part of the circle. Select the stroked circle and Copy and Paste in Front then reverse the stoke and fill color so it's a solid grey circle. Now go to Object > Path > Offset Path and enter the information below. Then Right-click and select Bring to Front or Shift + Command + ].
With the grey circle selected Shift-click on the wavy lines to select them both then in the Pathfinder panel (Window > Pathfinder) click the Divide option from the bottom row of icons. Now double click the object and select the grey circle as well as all the wavy bits inside the circle then delete them from the art board. Double click in the empty space around the long wavy bits to return.
Select all the objects of the new wavy stamp and position this stamp in the upper right corner of the envelope and rotate it a bit so it's not perfectly straight. Now select the envelope shape and Copy and Paste in Front then Right-click and select Bring to Front or Shift + Command + ] to bring it to the very front. Press D on the keyboard to rest the fill/stroke to to default then remove the stroke completely so it's just a white rectangle. Shift-click the wavy lines so both the white rectangle and the waves are selected then in the Pathfinder panel (Window > Pathfinder) click the Crop option from the bottom row of icons. Now select all of the shapes from this stamp and Group (Command + G) them together.
6. Bring the Elements Together
Our envelope is now complete and we're ready to duplicate them. Before we do so select all the objects that make up the envelope and Group (Command + G) them together.
Let's turn on our Mask and App layer so we can see where to position this Envelope. Then drag the envelope to the bottom of the cross but section so it covers the hole where the dip is cut out.
Right-click on the envelope grouping and choose Transform > Transform Each then enter the following parameters and click Copy, not OK. Now Right-click on the new envelope and select Transform > Transform Again (Command + D) 13 more times so we should have a total of 14 envelopes stacked on top of each other.
At this point select some of the envelopes at random and rotate them slightly. Some to the left, and others to the right. This will give the stack a more natural random feel.
In the Layers panel (Window > Layers) open the Envelop layer and the App icon layer by clicking the arrow next to the layer name/icon. Command + Click the circle icons next to the bottom 4 sublayers to select the bottom 4 envelopes then Group (Command + G) them together and drag that group to the App layer below the gross section cut with the dip in it to hide the excess. This bottom 4 number may vary depending on the way you rotated your envelopes.
Congrats! You're Done.
And with that final detail we are done! I'll leave you to export out the finally copy to your specifications, just be wary that before you do so you should hide the Mask layer we created.
I hope I was able to share a few time saving techniques for copying and nudging items quickly as well as how to create a semi-realistic woodgrain pattern. I'm sure the base for this wooden box will also come in handy for further app icon projects.