Home Tutorials Drawing Create a Set of Weather Icons in Adobe Photoshop

Create a Set of Weather Icons in Adobe Photoshop

Hi there. This tutorial will teach you how to create a set of weather icons in Adobe Photoshop. You will learn how to use and combine basic tools to create vector shape icons and how to have a perfect alignment using the Snap to Grid feature. Next, you’ll find out how to add effects via the Layer Style window. In the end, you will know how to create your own weather icons by applying these techniques and if you play with the Layer Style settings you can easily make your own unique design. Let’s get on!

Tutorial Details

  • Program: Adobe Photoshop CC
  • Estimated Completion Time: 45 minutes
  • Difficulty: Beginner-Intermediate

Step 1

Create a 600x600px document, go to View > Show > Grid to enable the Grid and then go to View > Snap To > Grid to enable the Snap to Grid. Hit Control + K to open the Preferences, go to Guides, Grid & Slices and enter the settings mentioned in the next image. The grid will make it easier for you to create the shapes.

Step 2

Concentrate on your Toolbar, fill the foreground color with #02C0D1 and select the Paint Bucket Tool. Move to your canvas and click there to change the background color.

wi_2

Step 3

Change the foreground color to #FFFFFF and using the Ellipse Tool create 4 circles: 30x30px, 30x30px,35x35px, 20x20px.

Place them as you can see below.

Tip: Hold the Shift button from your keyboard to create a perfect circle.

wi_3

wi_3a

wi_3b

wi_3c

Step 4

Use the Rectangle Tool to create a 15x35px vector shape and place it as shown in the image below.

Look inside the Layers panel, select the vector shape made in this step with the vectors shapes made in the previous step, right click on one of these shapes and click on Merge Shapes.

wi_4

Step 5

Look inside the Layers panel, double click on the name of the vector shape made in the previous step and rename it “Cloud”.

Now, double click on this vector shape to open the Layer Style window and enter the settings mentioned in the next images.

In the end, place this cloud in the upper left corner of your canvas, approximately as shown in the last image of this step.

wi_5

wi_5a

wi_5bwi_5c

wi_5d

wi_5e

Step 6

Change the foreground color with #FCD524 and use the Ellipse Tool to create a 35×35 px circle.

wi_6

Step 7

Rename the yellow vector shape made in previous step “Sun”.

Go to the Layer Style window for this vector shape and enter the settings mentioned in the next images.

wi_7

wi_7a

wi_7bwi_7c

wi_7dwi_7ewi_7f

Step 8

Now select the “Sun” vector shape and place it as shown in the image below.

wi_8

Step 9

Select your “Cloud” and “Sun” vector shapes and duplicate them using the Control + J keyboard shortcut.

Look into the Layers panel and make sure that the “Sun” copy is below the “Cloud” copy.

Now, select these copies one by one, focus on your canvas and place the copies as you can see below.

wi_9

Step 10

Make a new copy of your “Cloud” vector shape and place it as shown in the next image.

Look into the Layers panel and rename this new copy “RainyCloud”.

wi_10

Step 11

To ease your work, you must change the grid to every 1px. Go to to Edit > Preferences > Guides, Grid & Slices and enter 1 in the Gridline Every box.

Switch the foreground color with #57DAFF, concentrate on the “RainyCloud” vector shape and use the Ellipse Tool to create a 4x4px circle.

Place it as shown below.

wi_11

Step 12

Make sure that the vector shape made in the previous step is still selected and pick the Direct Selection Tool.

Select the top anchor point and press the Up arrow button from your keyboard twice.

Return to the Layers panel and rename the vector shape edited in this step “WaterDrop”.

wi_12

wi_12a

Step 13

Duplicate (Control + J) your “WaterDrop” vector shape and spread the copies as shown in the next image.

wi_13

Step 14

Look into the Layers panel, select one of your “WaterDrop” vector shape and then open the Layer Stylewindow to enter the settings shown in the next images.

Right click on this vector shape and go to Copy Layer Style then select all “WaterDrop” and go to Paste Layer Style.

wi_14

wi_14awi_14bwi_14cwi_14d

wi_14e

Step 15

Make a new copy of your “Cloud” vector shape, rename it “SnowyCloud” and place it like in the image below.

wi_15

Step 16

Concentrate on your “SnowyCloud” vector shape, change the foreground color to #FFFFFF and select theEllipse Tool.

Create a 5x5px circle and place it as shown in the image.

wi_16

Step 17

Select the Rounded Rectangle Tool and set the Radius at 1px from the top bar.

Next go to your canvas, create 1x3px vector shape and place it exactly as shown in the first image.

Duplicate (Control + J) this vector shape and place the copy exactly as shown in the second image.

wi_17

wi_17a

Step 18

Look inside the Layers panel, select the vectors shapes made in the previous step, right click on one of these shapes and go to Merge Shapes.

Duplicate this new vector shape, make sure that the copy is selected and hit Control + T.

Rotate your shape 45 degrees and then hit Enter. Repeat this technique twice.

Tip: Hold the Shift button from your keyboard to perfectly rotate your selection.

wi_18

wi_18a

wi_18b

Step 19

Select the vector shapes that make up your snow flake and go to Merge Shapes.

Open the Layer Style window for this vector shape and enter the settings mentioned in the next images.

wi_19

wi_19awi_19bwi_19cwi_19d

Step 20

Duplicate the vector shape made in the previous step and place the copy as shown in the image below.

wi_20

Step 21

Make a new copy of your “Cloud” vector shape, rename it to “StormyCloud” and place it as as you can see in the image.

wi_21

Step 22

Look inside the Layers panel, select one of your “WaterDrop” vector shapes an make two copies.

Select these copies one by one, focus on your “StormyCloud” and place them as shown below.

wi_22

Step 23

Change the foreground to #FFDF45 and using the Pen Tool create the vector shape that you can see in the image below( follow the numbers and try to use the grid as a reference ).

wi_23

Step 24

Bring on the Layer Style window for the vector shape that makes up your lightning and enter the settings mentioned in the next images.

wi_24wi_24awi_24bwi_24cwi_24dwi_24e

Step 25

Change the foreground color to #FFFFFF, take the Ellipse Tool and move to your canvas.

Create a 36 x36 px circle and a 30 x30 px circle. Make sure that these new vector shapes are placed as shown below.

wi_25

Step 26

Make sure that the circles made in the previous step are still selected and go to Merge Shapes.

Pick the Path Selection Tool, click inside on the small circle (30 x30), focus on the top bar and select Subtract Front Shape.

wi_26

Step 27

Look inside the Layers panel, select the “Cloud” vector shape, hit right click and go to Copy Layer Style.

Return to your moon vector shape, right click and go to Paste Layer Style.

wi_27

Step 28

Duplicate (Control + J) your moon vector shape and place it as shown in the image below.

wi_28

Step 29

Select the Polygon Tool and click on your canvas to open the Create Polygon window.

Enter the settings shown in the top, left window (in the following image) and click the OK button to create your first star vector shape.

Using the same tool, follow the settings shown in the other two windows and create another two star shapes.

Concentrate on the Layers panel, select all your star vector shapes and go to Paste Layer Style.

wi_29wi_29awi_29b

Final Results

Here is how it should look.

wi_final

Tutorial by Razvan Gabriel

razvangabriel_profileI hope you’ve enjoyed this tutorial and you can apply these techniques in your future projects. Thank you for reading this tutorial ! See my portfolio here: MySketch.net

– Razvan Gabriel

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Start Learning With Head First Programming by O’Reilly

New to programming? It’s never too late to start to learn. With Head First Programming by …