Members Area Tutorial: Create a Set of Weather Icons in Adobe Photoshop

In the following Photoshop tutorial you will learn how to create a set of weather icons in Adobe Photoshop.

Photoshop Star Premium Members can login now for full access to this tutorial. Premium Members get access to exclusive tutorials for Photoshop and Illustrator. Also access to dozens of tutorial source files.

Get a Premium Membership now.


Final Image

As always, this is the final image that we’ll be creating:

Create a Set of Weather Icons in Adobe Photoshop Final

Tutorial Details

  • Program: Adobe Photoshop CC
  • Estimated Completion Time: 50 minutes
  • Difficulty: Beginner-Intermediate
  • Description: The tutorial is divided in two parts. In the first part you will learn to create the weather icons and in the second part you will learn to create the character’s faces.

Step 1

Create a 600 x 400px document, go to View > Show > Grid and 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 as shown in the next images. The Grids will make it easier for you to create the shapes.
Along the tutorial I turn off the grid ( Control + ‘ ) for you to have a better view. The grid will make it easier for you to create the shapes.

Create a Set of Weather Icons in Adobe Photoshop 1

Step 2

Move on the Layers panel, double click on your Background locked layer and set the new name to BG.

Create a Set of Weather Icons in Adobe Photoshop 2

Step 3

Focus on your Toolbar, fill the foreground color with #55827F, select the Paint Bucket Tool and click on your canvas to set a new background color.
From the Layers panel, open the Layer Style window and enter the settings shown in the second image.

Create a Set of Weather Icons in Adobe Photoshop 3
Create a Set of Weather Icons in Adobe Photoshop 3

Step 4

Set the foreground color to #FFCC00 and select the Ellipse Tool.
Move to your canvas and create a 35x 35px circle.

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

Create a Set of Weather Icons in Adobe Photoshop 4

Step 5

Open the Layer Style window for your vector shape and enter the settings shown in the next images.

Create a Set of Weather Icons in Adobe Photoshop 5
Create a Set of Weather Icons in Adobe Photoshop 5
Create a Set of Weather Icons in Adobe Photoshop 5
Create a Set of Weather Icons in Adobe Photoshop 5
Create a Set of Weather Icons in Adobe Photoshop 5
Create a Set of Weather Icons in Adobe Photoshop 5
Create a Set of Weather Icons in Adobe Photoshop 5

Step 6

Now you must change the grid every 1px. Go to to Edit > Preferences > Guides, Grid & Slices and set 1 in the Gridline Every box.

Select the Rounded Rectangle Tool and set the Radius to 1px from the top bar.
Move to your canvas, create 3 x 9px vector shape and place it as shown in the image below.
Duplicate ( Control + J ) this vector shape and place the copy exactly as shown in the second image.

Create a Set of Weather Icons in Adobe Photoshop 6
Create a Set of Weather Icons in Adobe Photoshop 6

Step 7

Look inside the Layers panel, select the vector shapes made in the previous step, right click on one of these shapes and click on the 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 rotate perfectly.

Create a Set of Weather Icons in Adobe Photoshop 7
Create a Set of Weather Icons in Adobe Photoshop 7
Create a Set of Weather Icons in Adobe Photoshop 7

Step 8

Select the vector shapes that make up the sunlight, right click on one of these shapes and click on the Merge Shapes.
Open the Layer Style window for this new vector shape and enter the settings shown in the next images.


Create a Set of Weather Icons in Adobe Photoshop 8
Create a Set of Weather Icons in Adobe Photoshop 8
Create a Set of Weather Icons in Adobe Photoshop 8
Create a Set of Weather Icons in Adobe Photoshop 8
Create a Set of Weather Icons in Adobe Photoshop 8
Create a Set of Weather Icons in Adobe Photoshop 8

Step 9

For the next steps you will need a grid every 5px. ( Control + K )

Set the foreground color to #C5C5C5 and pick the Ellipse Tool.
Move to your canvas and create the circles as you can see in the next images.

Create a Set of Weather Icons in Adobe Photoshop 9
Create a Set of Weather Icons in Adobe Photoshop 9
Create a Set of Weather Icons in Adobe Photoshop 9
Create a Set of Weather Icons in Adobe Photoshop 9
Create a Set of Weather Icons in Adobe Photoshop 9

Step 10

Select the vector shapes that make up your cloud and click on the Merge Shapes.

Open the Layer style window for this new vector shape and enter the settings shown in the next images.

Create a Set of Weather Icons in Adobe Photoshop 10
Create a Set of Weather Icons in Adobe Photoshop 10
Create a Set of Weather Icons in Adobe Photoshop 10
Create a Set of Weather Icons in Adobe Photoshop 10
Create a Set of Weather Icons in Adobe Photoshop 10
Create a Set of Weather Icons in Adobe Photoshop 10
Create a Set of Weather Icons in Adobe Photoshop 10


That's the end of the preview!

Continue Reading this Tutorial at our Members Area - Pixolution.com

Get a Premium Membership now.

If you are already a Premium member you can login here to access this tutorial.

Advertisement

Pin It on Pinterest

Share This
Sign up for our Newsletter

Signup today for free and receive all new free tutorials published at Photoshop Star.