In this tutorial we show you how to create a bad piggy app icon from scratch. Game App Icons have really become an art form onto themselves, and we thought we would show you how to create your own using Pixelmator.
Bad Piggies are the baddies from the Angry Bird series of games.
The final product
Here is what you will be able to create at the end of this tutorial.
Before you start…
We would recommend that you try your hand at:
- Pixelmator Tip #19, which shows you how to create a simple IOS app icon;
- Pixelmator Tip #22, which shows you the basics of creating and editing shapes using the Free Transform tool;
- Pixelmator Tip #14, which gives you an introduction to layer styles; and finally
- Pixelmator Tip #31, which shows you how to draw a cool game app icon.
So let’s get started. Create a new document 1200x1200px. We want to ensure we give enough space for the dimensions of the IOS app icon (1024×1024). We left the PPI at 72, and generally you only need to worry about this for really complex designs. This awesome article gives you a great IOS7 cheat sheet for you to get all dimensions for creating anything for IOS7.
We’d recommend that you use our IOS7 App Icon Grid System Template to set exact proportions and perfect corners for your app icon base.
Now that we created our app icon base in our Pixelmator document, we coloured it based on our character – a nice bad piggy green (#51b732).
We’ll also recommend keeping the colours to a maximum of 3-4 overall, and use the opacity, and colour darkness setting for any variations for shadows or highlights.
We also copied and pasted the icon twice and centre aligned all three app icons. In your layers panel, this should look like 3 app icons. Select the top layer, and adjust the top and bottom slightly, so you get an offset at either end.
Select the lowest app icon in the layer panel and fill it with a lighter green colour – use the colour panel (Shift+CMD+C).
Select the middle app icon and fill it with a dark green colour using the colour panel.
You should get something like the below, light offset at the top, and dark offset at the bottom.
Add a circle shape in a new layer and centre it on top of the app icon layers.
Right-click and select Make Editable, which should show you the shape handles i.e. red dots, which you can manipulate as you wish. Using those handles, stretch and create the shape of the nose for our pig as shown.
Then in new layer, add two further circles for nostrils, and adjust their shape as you wish.
For now, we’ll use basic colours, and then once we are happy with the shapes, we’ll add in the final colours.
On a new layer, add two circles for eyes, and two circles for each iris. Again feel free to manipulate these shapes as you want to. This is where you can have the most fun.
Let’s add in two further shapes for eyebrows, and roughly place the at the above the eyes.
The principles are the same for the moustache; however it needs further shape handles.
Once you are in edit mode, just right click, and Add Point, where ever you need additional points to manipulate the shape. Make sure the moustache roughly hugs the bottom of the nostril.
By adding new editable points, tweak the shape of the moustache to add in some sharp corners, and peaks and troughs, like a real moustache.
Let’s colour in the shapes. For the nose, we used a lighter green #a5e900, and we left the nostrils the same colour as the base app icon #51b732.
The eyes were just white colour, the iris of each eye, and the eyebrows were just black colour.
The moustache – we outlined the shape with 6px of black colour, but we filled it with a light brown colour #ea661f.
Next we add in a shadow – for this added in a rectangle filled with a black colour, but with a 25% layer opacity. We then rotated the rectangle and adjusted the size so that it covered the key features of the bad piggy face.
Now it is just a matter of editing the points of the rectangle to align with key points on the facial features. The key is to keep the angle of the shadow the same to make it look consistent.
You also need to make sure to adjust the shadow to fit the app icon shape where it touches the edges.
Here is a view of our final layers panel – notice where we placed the shadow layer, below all the key facial features, but above the app icon layers. This will ensure that your shadow looks like a shadow.
And finally we come to our final app icon made using Pixelmator. We can continue adding more detail and keep tweaking this icon to make it a truly kick-ass icon, but that is for another tutorial.