In this tutorial I will teach you how to create an outer space website layout that could be used for a portfolio design. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.
Click on the image to view the full-scale final result.
Lets get started…
1. The first thing we need to do is create a new document with the dimensions of 1020×1200.
2. On our template we are going to be working from the top down, so lets get started with our header. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000. This will be our header background layer and will stay black. We then want to Duplicate this layer (Command+J), and this will serve as our “Stars” layer.
3. While on your stars layer we now want to add some noise. Navigate to Filter>Noise>Add Noise and add 11% noise. Make sure to have Gaussian checked, as well as Monochromatic in the dialogue box.
4. We don’t want as many stars there as we have now, so to fine tune it we want to open up our Levels (Command+L). In the box move the white and gray slider in a similar way until you get something you are happy with. It won’t be exactly the same, but play around with it until you get something you like.
5. On our stars layer we now want to add a layer mask. Choose the layer mask icon at the bottom of your layers palette with your Stars layer selected. On your newly created mask, we now want to paint with a Soft Brush set to about 50% opacity. I’ve Hidden my black background layer to show you where I painted. We want to get rid of the stars around the edges of our document.
6. Now we need to add some “Space Dust”. To do so we want to Command+Click our headers background layer thumbnail in the layers palette to make it an active selection. Then on a new layer above everything else, go to Filter>Render>Clouds, and then lower your layers opacity to about 30%.
7. We don’t just want our clouds to be a boring black and white, so we need to change the Color Balance (Command+B). Insert the following adjustments:
8. Just like we did with the Stars Layer, we need to add a layer mask to our Space Dust Layer. Paint with a soft black brush set to about 50% around the outside of your document until you get something that looks like the following (make sure your painting on your mask layer, and not your pixel based layer):
9. To add some life to our scene, lets add some color. Using a large soft brush, make a brush that looks like the following using the color #DF05ED.
10. We then want to change that layers blending mode to Screen, and lower the opacity to around 14%. To get rid of the extra glow that goes below our header, we want to add a layer mask to this layer. Command+Click your headers background layer in the layers palette to make it an active selection while you still have your pink glow layer chosen, and then select the layer mask icon from the layers palette.
11. Using the same technique we used in steps 9 and 10, we want to add a blue glow (#05BFEE). Do the same thing, except this time instead of using Screen as your Blend Mode, we will be using Color Dodge.
12. Once you have that done, I chose to add a little more pink to the right side of our header, and then it will look a little something like the following:
13. One of the final steps is to add a couple planets. Go to the resource list at the top to view the two I chose to use. Using your Marquee Tool with a feather of about 15%, select the planets from their images and then place them on your document in a similar fashion.
14. To get rid of everything outside our header, we will apply another layer mask the same way we did in step 10. On your big planets layer, lower the opacity to about 45%, and change the blend mode to Soft Light. Then on the smaller planets layer, lower the opacity to about 60%.
15. For our logo I used the font Chunk and then added a line under the logo with a 1px white brush with a little motion blur set to Soft Light. Behind our logo I wanted to add some “Sparkles”. To do so you can use the Sparkles Brushes from the resource list, and paint with #FFFFFF, and set your layer to overlay. Your header should look like this:
16. Time to add a search field. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF.
17. Change your Fill to 5%, and then insert the following blending options by right clicking your layer in the layers palette and choosing blending options from the drop down menu.
18. All that is left for the search field is to add a search button. I used an arrow from the Mono Icon Set (link in resource list). On my icons layer I lower the opacity to about 80%, and then inserted the following blending options:
19. After adding some text to your search field to let users know what it is, your header will look like the following:
20. All that is left for our header is to add our navigation. Using a font similar to helvetica, place your links in the following manner:
21. Behind our home text we want to add a Rounded Rectangle with a radius of 5px, and a foreground of #667882 to symbolize our active link. Let the Rectangle hang a little below your header.
22. On your Rounded Rectangle Layer, insert the following blending options:
23. The last thing we want to do is add a little glow to the top of our active link rectangle. Using a Soft white brush paint something similar to the following on its own layer:
24. Change your glows blend mode to Overlay. We then want to make out everything outside our Rounded Rectangle. To do so Command+Click your Rounded Rectangles thumbnail in the layers palette to make it an active selection, and then choose the layer mask icon while on your glow layer. Your finished header will look like this:
25. Time to move onto our content area. Using your Marquee Tool, make a selection nearly the size of the rest of your document (leave some space for a footer), and fill it with #667882.
26. On this layer we then want to add the following blending options:
27. Next grab your Crusty Texture and open it up in Photoshop. We want to desaturate this texture before we use it, so hit Command+Shift+U on your keyboard to desaturate it. Move it onto your document and duplicate it until you fill up your content area. Merge your layers together and then lower the opacity to about 6%, and change the blend mode to Soft Light and you’ll have something that looks like the following:
28. Using your Elliptical Marquee Tool with no feather, make a oval that looks similar to the following and fill it with #FFFFFF. This will be the base of our featured content area.
29. Insert the following blending options onto its layer:
30. We want to add a little texture to our base, so to do so we want to Command+Click our bases thumbnail in the layers palette to make an active selection. On a layer above it, fill it with #000000. Now go to Filter>Noise>Add Noise and insert about 11% noise with Gaussian and Monochromatic selected. Lower the opacity of your layer to around 15%, and you’ll have something that looks like this:
31. For our thumbnail, we want to use our Rounded Rectangle Tool with a radius of 5px.
32. Insert the following blending options onto your rectangles layer:
33. To make it appear as if our box is floating we want to add a little shadow below it. So use your Elliptical Marquee Tool with a feather of about 10px to make a selection similar to the following and fill it with #000000.
34. You can resize the shadow a bit if needed. Then add an image to your thumbnail box and you should have something that looks like this by now:
35. With your favorite Ellipse Tool make a circle similar to the following:
36. Insert the following blending options onto its layer.
37. Using your Polygonal Lasso Tool make a triangle similar to the following and fill it with #383838.
38. Add the following blending options to your triangle layer.
39. Add a shadow in the same way we did in step 33 for our thumbnail box, and then repeat steps 35-39 for the right side.
40. All that is left for our featured area is to add our items description. For the title I used the font Georgia with #18242C.
41. Using your Rounded Rectangle Tool with a radius of 5px, we will make our badges displaying what format our portfolio piece is in. On your rounded rectangle layer, insert the following blending options:
42. Add some text with a light drop shadow and your badge will look like this:
43. I then did the same thing for another button that is green and when it’s all said and done, your featured area will look like this:
44. Using your Rounded Rectangle Tool with a radius of 10px, make a rectangle similar to the following.
45. Insert the following blending options onto your layer:
46. The icons used below are from the Mono Icon Pack. Go ahead and arrange your text and images in a similar way:
47. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.
48. Change the Fill to around 13%, and then insert the following blending options onto its layer.
49. All that is left is to add a footer. To do this, just go back and follow the same steps we used for our header. Make sure all your footers layers are under everything else. When it’s all finished, your template will look something like the following:
- Where to Find the Perfect Logo Inspiration
- Twitter Box User Interface Design in Photoshop
- Create a Chalkboard Style Wordpress Layout in Photoshop
- PSD to XHTML: Create a Chalkboard Style Wordpress Layout
- Beautiful Music Streaming Website Design in Photoshop
- Create a Theme Store Website Layout in Photoshop
Leave Your Response