How to Create a Planet Icon Set in Photoshop

By / May 6, 2009 / Tutorials
shares

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.

25 Comments

  1. Nikki
    May 6, 2009

    WOW!

    Awesome tut! Thanks so much ;)

    This will definitely added to my Nerdiest of the Net for May ;)

    Reply
  2. JZine
    May 6, 2009

    These look amazing! Thanks!

    Reply
  3. Iva
    May 6, 2009

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

    Reply
  4. @todayinart
    May 6, 2009

    Awesome man, Thanks!

    Reply
  5. Emilio Bello
    May 6, 2009

    cool!!

    Reply
  6. joyoge designers’ bookmark
    May 6, 2009

    nice tutorial thanks..

    Reply
  7. Kayla
    May 6, 2009

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

    Reply
  8. alex
    May 6, 2009

    Nice tutorial thanks for the effort

    Reply
  9. Pariah Burke
    May 6, 2009

    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. ;-)

    Reply
  10. Caleb Kimbrough
    May 6, 2009

    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 ;)

    Reply
  11. moih60
    May 7, 2009

    great tutorial..thanks

    Reply
  12. photo retouching
    May 9, 2009

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

    Reply
  13. ─░brahim Nergiz
    May 10, 2009

    Oppsss, AMAZINGGGG

    Reply
  14. arGOne
    May 12, 2009

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

    Reply
  15. SEO
    May 24, 2009

    Super realistic looking planets. Great tutorial!

    Reply
  16. anton
    June 3, 2009

    nice tutorial … or more than great … thanks

    Reply
  17. retoucher77
    June 4, 2009

    great tutorial, very helpful :) Thanks for posting!

    Reply
  18. debbie
    June 14, 2009

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

    Reply
  19. eRotIk
    June 18, 2009

    Thank you for this nice and easy to lern tutorial.

    Reply
  20. Sicak Video
    July 21, 2009

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

    Reply
  21. planet icon rocks
    July 29, 2009

    Love the icons

    Reply
  22. yuNus
    September 29, 2009

    Very nice.
    Thanx.

    Reply
  23. dave
    September 30, 2009

    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?

    Reply
  24. Nicola
    October 6, 2009

    Dave, I think you should simply save as PNG.

    Reply
  25. Lost
    March 17, 2010

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

    Reply

Leave a Reply