How to Create a Planet Icon Set in Photoshop
In this tutorial you will learn an easy method for creating very cool looking planet icons by using free textures and some simple lighting and shading techniques. Before we get started, lets download some free textures. The Nebulae Grunge texture set from Caleb Kimbrough of Lost and Taken is perfect for what we are trying to accomplish.
First, take a look at what we’ll be creating. Click on the images below to see full size versions.
Let’s begin by making a nice background to create our icons on. Even though this won’t be included in the final icon file, it will make things look nice as we progress through the design process. Since OSX supports 512 x 512px icons, we will make this our base size. Once we have a completed the icon design, it’s easy to make different sizes. In the preview above, you saw that I have already created multiple sizes at resolutions of 256, 128, and 48.
Open a new Photoshop file and give it a width and height of 512px. Fill the background layer with black. Now, create a new layer and fill it with white. We will use the Lighting Effects filter (Filters > Render > Lighting Effects) on this layer to create a nice soft gradient. Next to the Intensity slider, choose any color that you like as long as it is somewhat dark. For this background, I’ve chosen a desaturated orange. In the Properties section set the color to black.
Now let’s start creating our planet. Open a texture file of your choice from the Nebulae Grunge pack we downloaded earlier. For this one, we’ll be use nebulae_3.jpg. Using the Rectangular Marquee Tool, select a square portion of the texture that looks interesting. Then Crop (Image > Crop) it.
Now, to give our texture a spherical appearance, we will use the the Spherize filter (Filters > Distort > Spherize). Leave the setting on default.
Resize the texture to 400 x 400px. Then using the Spherical Marquee tool, start in the upper left hand corner and shift+drag a selection until it touches the right and bottom edges of the canvas. This way you are only selecting the part of the texture affected by the Spherize filter. Copy and paste the selection onto a new layer above the background we created in Step 1. Name this layer “Planet”.
Even though our planet is starting to take shape, it still looks dull and flat. Let’s fix that by adjusting the color a bit. Open the Hue/Saturation (Image > Adjustments > Hue/Saturation) panel and increase the saturation to about 36.
To intensify the color even more, lets add an inner glow. Double click on the Planet layer, and select inner glow from the left column. Change the Blend Mode to Multiply. The color we choose will vary based on the texture being used, but for this one we will use orange.
Now that the color is looking much better, we need to add depth to our planet. Make a circular selection of the planet, and create a new layer above it named “Shading”. Using the Gradient Tool fill the selection from upper left to lower right with gradient seen below.
Lets give our planet an atmosphere. We are going to use inner glow again to reduce the amount of texture detail around the edges of our planet while adding another touch of color. Merge together the Planet layer and Shading layer. In the Inner Glow properties of this new layer, select a similar orange color as we used before, and reduce the opacity to about 70 and increase the size to 40.
To add additional atmospheric effects, we are going to use the Soft Brush tool to place various sized puffs of clouds forming shallow arcs around the planet. Set the opacity of the Brush tool to about 40.
Use the Smudge tool to add random swirl patterns to the clouds.
Here’s the final result:
That’s it. In just six simple steps we’ve created a pretty awesome looking planet. To create different icons in the set, just repeat this process using different textures, and don’t be afraid to experiment along the way for different results.
About the Author
The number of fonts designed to be used as icons, symbols and glyphs increases day by day. Using icon fonts you’re replacing raster images into vector ones. That means that you can easily resize your icon fonts without worrying about quality loss. Icon fonts is a flexible solution for adding icons to your website. Along…
Almost every design project requires icons. Icons can be found everywhere on a website and their primary purpose of guiding and giving out information to visitors is a highly important one. In other words, these tiny graphics within a website tell you how you can move to the next page, checkout the cart, cancel a…