Pixelmator Tip #19 – How To Design A Simple IOS7 App Icon

Ninja Share:

In this tutorial we show you how to create a simple IOS7 app icon in Pixelmator. Weather icons are all the rage at the moment, so we thought a simple design for a weather app icon would be cool.

The final product:

Here is what you will be able to create at the end of this tutorial.

weather-app-icon-gradient

Before you start…

We would recommend that you try your hand at:

Step 1:

So let’s get started. Create a new document 1200x1200px. We want to ensure we give enough space for the dimensions of the IOS7 app icon (1024×1024) and also the notification circle. 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.

tip19-1

We’ve also created a freebie IOS7/IOS8 App Icon Grid Template for Pixelmator to help you design app icons quickly.

ios-grid-system-poster-new

Step 2:

Next add in a rounded square of size 1024x1024px, filled with white colour, and position it in the middle of the page. We’d recommend that you use our IOS7 App Icon Grid System Template to set exact proportions and perfect corners.

tip19-2

Step 3:

Now using the layer styles for the rounded rectangle, we are going to fill it with a gradient. We went for a default yellow/light blue gradient already available in Pixelmator. The gradient is set to radial, and all we did was adjust the bottom handle of the gradient to about two thirds of the way up as shown below.

tip19-3

 

Step 4:

Now switch over into Vectormator mode (CMD+Shift+V). Choose the standard cloud shape provided by Pixelmator, add it on top of the icon layer, and position it in the middle of the icon.

tip19-4

Also, ensure that the shape has no fill, but a stroke with white colour, and a size of 20px.

tip19-5 Step 5:

Now let’s add in the sun. Draw a circle and place it on the top left corner of the cloud using the same settings of the cloud (stroke with white colour and size 20px). The circle is going to overlap the cloud, so use the free transform feature (cmd + F), then right click and select “make editable”. This will expose the handles of the shape, and you can now adjust them. You can also right click on the shape and select add point to add extra handles. For more details on creating and editing shapes, check out our tutorial on the basics.

tip19-6

Add in additional handles and manoeuvre the overlapping part, so that it looks like the sun is behind the cloud.

tip19-7

Step 6:

Next we are going to create the notification circle at the top right hand corner of the icon. Select the Circle shape, and place a circle at the top right hand corner. Adjust the size so that the circle is centered at the top right hand corner, and also covers the corner of the icon fully. The colour of the circle should be set to the standard red (#ed1f24).

tip19-9

Add in some text for the notification number. Apple in IOS7 have chosen to use Helvetica Neue. Select this font for the text, which is standard in Pixelmator, set to thin, and size 160. Position this text in the middle of the notification circle.

tip19-10

Step 7:

Finally let’s add a long shadow to the weather icon to create a great flat design effect. Add a rectangle, filled with black colour (no stroke), and angle it at -45 degrees.

tip19-11 Expand the rectangle to the cover the bottom half of the cloud and so that it is lined up with the bottom right corner of the icon. You can always turn the long shadow the opposite direction at this stage, just angle the rectangle to +45 degrees.

tip19-12

Using free transform, adjust the rectangle shape to line up with the edges of the cloud and the edges of the icon as shown. For more details on creating and editing shapes, definitely check out Tip #22. Select the layer with the long shadow shape, and set the layer opacity to 20% to create this subtle long shadow effect.

tip19-14

Step 8:

The final stage is to select the Image menu option, followed by Trim Canvas, and then select transparent pixels option.

tip19-15 and finally we come to our final icon image created using Pixelmator.

weather-app-icon-gradient

 

You can also play around with just flat colour or the standard layer styles for the rounded square to get some great designs.

weather-app-icon-flat weather-app-icon-layerstyle

If you are feeling confident after this tutorial, why not try your hand at Tip #31 – How to create a cool game app icon.

SIGNUP TO GET NOTIFIED:
Our best content on designing with Pixelmator. Delivered Regularly!
You'll learn exactly how to become a Pixelmator Ninja using our tutorials and templates. We won't send you any spam. Unsubscribe at any time.

Comments

Oops. Comments are now closed on this post!