Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout How to Design a Cosmic Layout (Exclusive Tutorial)

How to Design a Cosmic Layout (Exclusive Tutorial)

In this tutorial, we'll learn how to design a web page for a fictional client 'Space App'. The tutorial is rather intermediate, so I recommend you learn about Photoshop basics first.

Preview of Final Results


Download the PSD | 13 MB
Download from Filesonic
Download from Website

Design a modern cosmic web layout


Step 1

Since we are using the 960 grid system's template, we don't need to specify the properties of the document, as it is already done. Rename the template to 'layout' or something similar and open it in Photoshop. Turn on snapping to guides and lock them (View -> 'Snap' and 'Lock Guides')


Step 2

It's very helpful to create wireframes first. You can sketch them on a paper or use special software for wireframing, but Photoshop does the cut as well. The outline will tell you where to later put certain content without disturbing your creative flow.


Step 3

It's a good idea to create a few layer groups for sourting out layers as they are made. Hide the wireframe and 960 grid layers and paste the starry texture into the document (you can just drag and drop the file). Hit enter and create a new layer. Choose the gradient tool and use settings on the image. We need a colorful gradient which starts and ends in the same color.


Step 4

Make sure you have the newly created layer selected and 'radial gradient' chosen and then create the gradient. Its center should be in the center of the upper third of the page. Lower the layer's opacity down to 50% or to your taste.


Step 5

Draw a rounded rectangle with radius of 5px for the header and select its lower part. Make a layer mask and hide the selection. Put the created layer into the 'header' layer group.


Step 6

Create a black rectangle 940x330px underneath the header. Paste in one of the shadows in the downloaded pack and move it underneath the black rectangle.


Step 7

Select the brush tool and set its size to about 850px and hardness to 0%. Click on the rectangle shape layer while holding Ctrl to select the area, create a new layer and click in the center of the upper half with white color selected - make a use of guides to determine where center is. Lower layer's opacity to 35%.


Step 8

Draw a line on top of the rectangle and set its layer style to gradient overlay with center being lighted up. Lower the opacity of the layer to taste (I used 30%).


Step 9

Draw 4 rounded rectangles (alt+drag to duplicate, shift+drag to follow a straight line) and lower their opacity down to 10%. Sort the layers to groups.


Step 10

Add layers some effects according to image.


Step 11

Select header and set its fill to 0% and apply layer style Gradient Overlay from white to transparent. Design a logo. Here I used a few glyphs from the Governor font to create the simplified rocket and applied some hard drop shadow. That is of course not the professional way of designing a logo, but this is only a web design tutorial.


Step 12

We need to build the navigation now. Draw a few rounded rectangles with white fill and set opacity to 10%. Choose a font and use it to write links (here, it's Helvetica). Align the navigation according to the logo and design the hower state by setting opacity to 30%.


Step 13

Close the header group and move to content. Grab a video placeholder and paste it to the right side. Set the layers style to inside stroke of 3px. Paste the copy you have on the left and set it to 43px and 16px in Helvetica.


Step 14

Draw two rounded rectangles to create buttons and apply Bevel and Emboss, Drop Shadow and Gradient Overlay according to picture. Mind that the right one will look a bit darker due to the background, so lighten it up accordingly. Create a hover state by reversing the gradient (see arrow).


Step 15

Find images of planets or applicable icons and paste them into documents. Draw rectangles where you want images to be seen and create clipping masks with them (alt click between two layers).


Step 16

Paste in the text and set it to Helvetica, 18pt for headlines and 16pt for text.


Step 17

Apply gradient to the footer rectangle in same way as to header, only that it fades to top.


Step 18

Duplicate the logo to footer and pun in respective layer group. Then place the rocket to right corner and tilt it a bit. Use Pen Tool to draw its path and create a new layer.


Step 19

Set the Brush panel accordingly to the picture and click 'Stroke Path With Brush' under the Path panel. Make sure you have the new layer selected, then apply drop shadow same as logo.


Step 20

Add footer links, copyright and back to top button.


Final Results



Heidi Pungartnik

This tutorial was written by Heidi Pungartnik, web and graphic designer. You can follow her on Twitter (@ashocka18) or visit her website at

- aShocka

subscribe to newsletter