Learn how to create a cool weather icon in Photoshop
In this Photoshop tutorial i will show you how to create a simple weather icon using Photoshop. Simple but effective this modern icon is easy to create. No special techniques or Photoshop skills required to make your own weather icon. You can use the same technique to create the icon using Illustrator.
Tutorial Details and Resources
Apps Used: Adobe Photoshop (CS5 or later)
Estimated Completion Time: 10-15′ Minutes
Step 1 > Create a New Document
Create a new Photoshop document. For this tutorial i used 800px width and 400px height.
Step 2 > Background
You can go straight to the icon but i filled the empty background using Paint Bucket Tool (G) and #ebeee1 color.
Step 3 > Base
To create the icon base change foreground color to #3bc3f6 and pick the Rounded Rectangle Tool (U). Press left-click on your document and set 250px Width, 250px Height and 65pcx Radius. To align the shape press (Ctrl + A) and use “Align vertical/horizontal center” buttons from the top toolbar. Next, rename the layer to “Base”.
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.
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 of sun. Press (Ctrl + E) to merge the 2 sun rays. To create more sun rays, duplicate the sun-rays layer and go to Edit > Transform > Rotate 90° CW. Next, merge the (4) rays by selecting them using (Shift) and pressing (Ctrl +E) on your keyboard. Finally, press (Ctrl + T) on your keyboard and rotate the sun-rays 45°.
a) Create (2) rounded layers and merge them together.
b) Duplicate the rays and rotate them by 90° CW.
c) Duplicate again the rays and rotate them by 45°.
Step 6 > Cloud
To create the cloud, first 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 circle layers using (Shift) and press (Ctrl + E) to merge them in to 1 layer. Next, go to Layer > Layer Style > Blending Options. and add the follow settings (image c – d):
a) Create s small circle
b) Duplicate the circle change the size and position several times.
c) Add Drop shadow with the follow settings: Blend Mode: Normal, Opacity: 65%, Distance: 7px, Size and Spread: 0px, Color: #1da3c7
d) Add Gradient Overlay with the follow settings: Blend Mode: Normal, Opacity 100%, Color: #def1f6 to #f2f2f2 gradient, Style: Radial.
Step 7 > Highlight
Create a new layer and rename it “Highlight 1”. With Highlight 1 layer active, press (Ctrl + Left click) on the “Base” 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%.
Step 8 > Another Highlight
To create the highlight reflection, first create another layer and rename it “Highlight 2”. Pick the Elliptical Marquee Tool (M) and draw a rounded selection like the (image a). Fill the selection with white color using Paint Bucket Tool (G). With the “Highlight 2” layer still active press (Ctrl + Left click) on the “Base” layer icon. Next, go to Select > Inverse to inverse the selection and hit (Delete) on your keyboard. Change the blending mode to Overlay with 30% Opacity.
a) Draw a rounded selection and fill it with white color.
b) Inverse the selection and press Delete on your keyboard.
Step 9 > Shadow
To create the shadow pick again the Elliptical Marquee Tool (M) and draw a small rounded shape under the icon (image a). Fill it with black color and press (Ctrl + D) to deselect your selection.Go to Filter > Blur > Motion Blur and change 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.
a) Draw a small rounded shape and fill it with black color.
b) Add Motion Blur with 100 pixels distance.
c) Add Gaussian Blur with 2,7 pixels Radius and press OK.
If you like flat icons over the glossy, then simply deactivate the Highlight 1 and Highlight 2 layers. To save the icon with transparent background deactivate the background we created. Change the base color and add more icons to create a full set of weather icons.
We provide free and premium web resources for everyone. Download our graphic design elements, icons, backgrounds, vectors and everything else. Stay tuned for more freebies, Photoshop tutorials and inspirational articles.