Create a Set of Glossy Cloud Icons in Photoshop

In this tutorial we will be creating some glossy weather icons, that can be used on website or in your graphic design projects. The two icons we will be creating is a Sunny Daytime icon and a Moonlit Nighttime Icon. Let’s get started!

Glossy Cloud Daytime Weather Icon

Step 1

Create a new document and set the size to 512 pixels x 512 pixels at a resolution of 300 dpi. This will allow our icons to be high quality enough to be reduced to smaller size for web projects without loosing quality.

Step 2

We will start out by creating the clouds. Create a New Layer above the Background Layer and name it “Cloud”. Make sure your foreground color is set to black. Draw a rounded rectangle with the Rounded Rectangle Tool. Use the Fill Pixels option with a Radius of 100 pix.

Use the Ellipse tool to draw three circles for the top portion. Hold shift while dragging to make perfect circles, hold down the space bar also, in order to move the circle into position while you draw.

Step 3

Now we will add some Layer Styles. Double click the Layer Preview to activate the Layer Style options. Apply a Gradient Overlay,

Gradient color codes from left to Right: #24b9f7 #bcf4fd #e5f8ff

Add a 1 Pixel stroke with color #c4ecfd

Add a Drop Shadow with Angle 180 Degrees, Opacity of 31%, Distance 2 pix, Spread 0% and Size 8 pix. Click OK.

Step 4

Now we will soften up the cloud a bit at the top. Control Click the Cloud icon Mask to make a selection.

Create a New Layer above the Clouds and Drag a Radial Gradient From the top to Center.

Step 5

Now we will create the glossy reflection for the Cloud, with the Selection still active, create another New Layer and make a Gradient from white to transparency.

Drag the gradient to within the selection from top top bottom.

Create another selection with the Ellipse tool and cut the Gradient.

Click Delete to cut the gradient layer and reduce its Opacity to 19%.

Step 6

To create the sun, Create a New Layer behind the cloud and draw a perfect circle with the Ellipse tool. Color the Circle #f5ba2c

Create another New Layer and select the Polygon Tool.

Change the Number of Sides to 20. Click the drop down menu and change the Indent Sides to 80%.

Draw the Star on the New Layer.

Align the Circle and Star. Apply a Gaussian Blur to the Circle, with a Radius of 13.9. Filter > Blur > Gaussian Blur. Apply a Gaussian Blur to the Star, with a Radius of 1.5, then apply a Color overlay #ed9017 at 36% Opacity.

Final Image

Save Document as Sunny Day Glossy Icon.psd

Glossy Cloud Nighttime Weather Icon

Step 1

Make a Copy of the Sunny Day Glossy Icon.psd and open it up. Delete the sun and change the color of the Gradient to. #778c8f, #a5b0b2, #edefee. Change the Stroke Color to #dfe0e1

Step 2

Start creating the moon by drawing a circle with the Ellipse Tool.

Apply a Radial Gradient, with colors #fdfcdd, #ccc7a9 #7c7d6f

Create more circles for the moon craters.

Copy the gradient from the “moon circle” (Right Click the thumbnail in the layers palette > Copy Layer Style) and paste it on one of the craters (Right Click the thumbnail in the layers palette > Paste Layer Style), adjust the gradient with the settings below.

Add a stroke to the crater with colors #a6a390, #dad4b0

Copy the Layer Style to the other craters. adjust each craters gradient for darkness and lightness.

Final Image

Conclusion

Using some basic tool in Photoshop, we can create some really cool icons for our web projects or program interface. Paying attention to details such as lighting and contours can bring your icons to the next level.