As more and more apps become available in the iTunes App Store, ensuring your graphics stand out is becoming increasingly important. I will take you through the process of creating a character for an iPhone app and saving it in the correct sizes for use on the many iOS devices with Smart Objects in Photoshop. I will also show you how to use the new Stroke Width and Shape Builder tools in CS5 Illustrator over the course of this three part tutorial blog.
Not got CS5? No need to fret, I’ll also take you through the alternatives for users on older versions of the Creative Suite.
First things first, original artwork. I find it best to start with a drawing so you never start with a blank canvas. Equip your pencil, start drawing and then get scanning.
Create a new document in Illustrator and use File > Place to import the drawing. Double click the layer in the Layers Palette that contains it to change the name and also change Dim Images to 25%. This will lighten bitmap images in the layer making it easier for us to re-draw. Finally click the Lock button before pressing OK to lock the layer.
Next we create a new layer to place our vector graphics in by pressing the New Layer button at the bottom of the Layers Palette. Then take the Pen Tool (P) and use the original artwork along with your imagination to start to re-draw the artwork in vector form. Ensure that Stroke is set to black with no colour fill.
Do not worry if mistakes rear there ugly heads when creating your path. Once it is finished the White Arrow Tool will help you move points and adjust the handles that control the curves. The Add/Delete Anchor Point tools can also be used to further adjust your path.
So far we have a black line. Hmm… Not so fond of the monochrome artwork? Letscolour our creation. Select one of your paths and add a fill that will be the primary colour of the graphic. At this point I find that the Window > Colour Guide Palette (Shift + F3) is invaluable when looking for colours that work well together. Drag suitable colours from the colour guide into your swatch for future use. You can also apply subtle gradients at this point if you choose.
To define the shape of our graphic we add shadows with the Pen Tool (P). Draw out your shadow ensuring it has a black fill with no stroke. Try to imagine where the light is coming from so you can picture where the shadows will fall. Once you have drawn a shadow select Window > Transparency and reduce the opacity. I used Opacity of 30%. This will all contribute to bringing the character to life.
Multiple overlapping shadows can be united into a single shape when using CS5s new Shape Builder Tool (Shift + M). Select the shapes to be united and then drag across them with Shape Builder selected. The same result can be achieved in earlier versions of the Creative Suite with Window > Pathfinder and clicking the Unite button on the far left with the shapes selected.
Highlights can be created in a similar way to shadows. They will continue to liven the character. Once again draw out your highlight with the Pen Tool but use a white fill. This time we do not only change the opacity but also the blending mode of the shape. Change it from Normal to Overlay which preserves the black strokes underneath. I used varying opacities for the highlights depending on the texture of the object. Set the opacity higher to give the effect of light reflecting off harder surfaces. Remember to bear in mind the direction of light so you can best position your highlights. Sometimes, you may want to layer highlights to also replicate specific surfaces.
In Creating an iPhone Graphic Part Two I will show you how to use the Stroke Width to bring your character to life.
