How to Create a Planet Icon Set in Photoshop

By / May 6, 2009 / Tutorials

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.

Orange Planet

Purple Planet

Step 1

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.

Step 1

Step 2

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.

Step 2

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”.

Step 2_b

Step 3

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.

Step 3

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.

Step 3_b

Step 4

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.

Step 4

Step 4

Step 5

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.

Step 5

Step 6

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.

Step 6

Use the Smudge tool to add random swirl patterns to the clouds.

Step 6_b

Here’s the final result:

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

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

  • http://blog.designnerd.net Nikki

    WOW!

    Awesome tut! Thanks so much πŸ˜‰

    This will definitely added to my Nerdiest of the Net for May πŸ˜‰

  • JZine

    These look amazing! Thanks!

  • http://www.iva-is-me Iva

    Dugg. :)So simple to do, yet AMAZING.

  • http://todayinart.com @todayinart

    Awesome man, Thanks!

  • http://designerslab.blogspot.com/ Emilio Bello

    cool!!

  • http://www.joyoge.com/ joyoge designers’ bookmark

    nice tutorial thanks..

  • http://webitect.net Kayla

    Very cool tutorial! I’ll have to come back and follow it more closely. :) Thank you!

  • http://design-notes.info alex

    Nice tutorial thanks for the effort

  • http://iampariah.com Pariah Burke

    Very nice. The purple planet looks a lot like Dantooine… er… I mean, Star Wars geeks would probably say it looks like Dantooine. Not that I would know. πŸ˜‰

  • http://lostandtaken.com/ Caleb Kimbrough

    Thanks for the mention Henry! I’m really glad you find that set of textures useful. I had a blast making it and it’s nice to see them getting some use πŸ˜‰

  • http://thepharmashopist.blogspot.com/ moih60

    great tutorial..thanks

  • http://photorestorationretouching.com/ photo retouching

    A very realistic result in this tutorial. I think those textures really added another dimension!

  • http://www.ibrahimnergiz.info Δ°brahim Nergiz

    Oppsss, AMAZINGGGG

  • arGOne

    AWESOMEEEE!!
    THANKS!!!!!!!!!
    MUY BUEN TUTORIAL!!!

  • http://www.shorehills.net SEO

    Super realistic looking planets. Great tutorial!

  • http://serambiblogs.blogspot.com anton

    nice tutorial … or more than great … thanks

  • http://www.photorestorationandretouch.com/ retoucher77

    great tutorial, very helpful :) Thanks for posting!

  • debbie

    wonderful, was amazed at how easye yet effective this is,…. thank you

  • http://www.liebeslaute.de eRotIk

    Thank you for this nice and easy to lern tutorial.

  • http://www.hepizle.org Sicak Video

    Oo its ver nice share..Thank u..Well done..:)

  • http://www.forum-22.com planet icon rocks

    Love the icons

  • http://fxyd.blogspot.com yuNus

    Very nice.
    Thanx.

  • dave

    Hi there – nice tutorial – thanks very much. Could I ask how you save these files so they have a transparent background when used as icons please. Do you use Icon Builder?

  • Nicola

    Dave, I think you should simply save as PNG.

  • Lost

    Nicola, you can’t use PNG files for icons.