featured

How to create iOS7 icons in Adobe Illustrator? #04 – Weather icon

After releasing the new iOS 7 by Apple, app designers and developers needed to adjust their visual language to match the new design of iOS7.

Here on Vectorgraphit we will share a weekly a new tutorial on how to create one of the new iOS 7 flat icons in Adobe Illustrator. Remember, these tutorials are featuring some Adobe Illustrator technics, some changes may apply. If you want to create iOS 7 icons, you can read more about the Interface Guidelines here.

In the following weeks you will learn to create the following iOS7 icons:

#01 – Photos icon
#02 – Videos icon
#03 – Safari icon
#04 – Weather icon
#05 – Calculator icon
#06 – Compass icon
#07 – Phone icon
#08 – FaceTime icon

Today you learn to create the iOS Weather icon. You will learn to use the basic tools and line styles. The first 3 steps are similar to the first few steps in the other tutorials so if you’re already familiar with it, you can skip them. To start, download the grid we created. The file is an EPS file so you can use it in other vector editing software too. You don’t need to use this grid but we want to create icons like the originals, so this is the easiest way to do it.

Downloaded 2344 times

1. Now that you have the grid, insert it to a new layer and lock the layer. Make sure that the layer with the grid is on top of the other layers (see image in step 2). 2. Create a square with the Rectangle Tool (M) while holding the Shift key. Set its size to 120px (width and height). Place the square bellow the grid. ios_icon_photos_0004_Layer 1

3. Go to Effect -> Stylize -> Round Corners and set the Radius to 27°. ios_icon_photos_0003_Layer 3

4. Fill it in with blue. Create a circle with the Ellipse Tool. Change its size to 43.7px. Align to the center of the Rounded Rectangle. weather_0004_Layer 41  

5. Around this circle draw three new objects: two circles and a rounded rectangle. Set their size:

  • little circle (on the left) : 24px
  • big circle (on the right): 33px
  • rounded rectangle: 55 x 14 px

Align the bottom of these three shapes. Now select the three shapes and Unite them (Window -> Pathfinder Panel -> Unite). weather_0003_Layer 41 copy

6. Remember these steps in case that you want to create a cloud icon. You have to fill all the shapes with a gradient and you’re done! weather_0002_Layer 41 copy 3

7. Fill the background shape with a gradient of blue and the sun with a gradient of yellow – orange. The cloud will be white with 90% transparency (Window -> Transparency). weather_0001_R 255 G 224 B 0

8. And here is the final image! weather_0000_Layer 41 copy 5

I  hope you enjoyed this tutorial. Feel free to return for the next iOS7 icon tutorial (Calculator icon) or check out the last one (Safari icon)!

I'm a graphic designer from Transylvania, working with Adobe Illustrator and Photoshop, I just love vector illustration. My design interests include user interface design, icon design, branding and identity design.