Skip to main content
Tutorial: Weather Icon in Photoshop

In this Photoshop tutorial, we will learn how to create a simple weather icon using Adobe Photoshop CS6+. No special techniques or Photoshop skills required to make your own weather icon. You can use the same technique to create a similar vector icon using Adobe Illustrator.

Tutorial details and resources

Difficulty: Beginner
Apps Used: Adobe Photoshop (CS5 or later)
Estimated Completion Time: 10-15′ Minutes
Resources: –

Step 1 > Create a New Document

Create a new Photoshop document. For this tutorial i used 800px width and 400px height.

Tutorial: Weather Icon in Photoshop

Step 2 > Background

You can go straight to the icon but i filled the empty background using Paint Bucket Tool (G) and #ebeee1 color.

Tutorial: Weather Icon in Photoshop

Step 3 > Base

To create the icon base change the foreground color to #3bc3f6 and pick the Rounded Rectangle Tool (U). Press left-click on your document and set 250px width, 250px height and 65px Radius. To align the shape in the center of our background press (Ctrl + A) and then “Align vertical/horizontal center” buttons from the top toolbar.

Next, rename the layer to “Base”.

Tutorial: Weather Icon in Photoshop

Tutorial: Weather Icon in Photoshop

Step 4 > Sun

To create the sun, first, create a new layer and then pick the Ellipse Tool (U). Draw a small circle with #e8db4b color.

Tutorial: Weather Icon in Photoshop

Step 5 > Sun Rays

To create the sun rays, create a new layer and draw a small rounded line with Rounded Rectangle Tool (U).

Next, go to Layer > Duplicate Layer and move the new duplicated ray on the other side. Press (Ctrl + E) to merge the sun rays. To create more sun rays, duplicate the sun-rays by going to Edit > Transform > Rotate 90° CW.

Next, merge the rays by selecting them and pressing (Ctrl +E) on your keyboard. Finally, press (Ctrl + T) on your keyboard and rotate the sun-rays 45°.

Create (2) rounded layers and merge them together.

Tutorial: Weather Icon in Photoshop

 

Duplicate the rays and rotate them by 90° CW.

Tutorial: Weather Icon in Photoshop

 

Duplicate again the rays and rotate them by 45°.

Tutorial: Weather Icon in Photoshop

Step 6 > Cloud

To create the cloud, press (D) on your keyboard to reset to default colors. Create a new layer and pick the Rounded Rectangle Tool (U).

Draw a small circle and duplicate it several times (Layer > Duplicate Layer). Change the size and position of circles to make them look like a cloud (image b).

Select all the circles and press (Ctrl + E) to merge them into one layer.

Next, go to Layer > Layer Style > Blending Options. and add the following settings:

 

Create s small circle

Tutorial: Weather Icon in Photoshop

 

Duplicate the circle change the size and position several times.

Tutorial: Weather Icon in Photoshop

 

Add Drop shadow with these settings: Blend Mode: Normal, Opacity: 65%, Distance: 7px, Size and Spread: 0px, Color: #1da3c7

Tutorial: Weather Icon in Photoshop

 

Add Gradient Overlay with these settings: Blend Mode: Normal, Opacity 100%, Color: #def1f6 to #f2f2f2 gradient, Style: Radial.

Tutorial: Weather Icon in Photoshop

Step 7 > Highlight

Create a new layer and rename it “Highlight 1”. With Highlight 1 layer active, press (Ctrl + Left click) over the layer to load the selection. Pick the Brush Tool (B) with white color, 300px size, and 0 hardness.

Paint over the selection and press (Ctrl + D) to deselect. Change the blending mode to Overlay and opacity to 90%.

Tutorial: Weather Icon in Photoshop

Step 8 > Another Highlight

To create another highlight, create another layer and name it “Highlight 2”. Pick the Elliptical Marquee Tool (M) and draw a rounded selection. Fill the selection with white color using the Paint Bucket Tool (G).

With the “Highlight 2” layer still active press (Ctrl + Left click) to load the selection.

Next, go to Select > Inverse to invert the selection and then hit (Delete) on your keyboard. Change the blending mode to Overlay with 30% Opacity.

 

Draw a rounded selection and fill it with white color.

Tutorial: Weather Icon in Photoshop

 

Invert the selection and press Delete on your keyboard.

Tutorial: Weather Icon in Photoshop

Step 9 > Create a Shadow

To create a shadow pick again the Elliptical Marquee Tool (M) and draw a small rounded shape under the icon.

Fill the new layer black color and press (Ctrl + D) to deselect your selection. Go to Filter > Blur > Motion Blur and change the distance to 100 pixels, angle to 0.

Next, go to Filter > Blur > Gaussian Blur and add 2,7 pixels radius. Move the shadow layer under the “Base” layer and change the blending mode to Linear Burn with 25% Opacity.]

 

Draw a small rounded shape and fill it with black color.

Tutorial: Weather Icon in Photoshop

 

Add Motion Blur with 100 pixels distance

Tutorial: Weather Icon in Photoshop

 

Add Gaussian Blur with 2,7 pixels Radius and press OK.

Tutorial: Weather Icon in Photoshop

Conclusion

If you like flat icons over the glossy, then simply skip Highlight 1 and Highlight steps.

To save the icon with a transparent background hide the background and save as a PNG.

Tutorial: Weather Icon in Photoshop