SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  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

img

Download the PSD

tutorialname.zip | 13 MB
Download from Filesonic
Download from Website

Design a modern cosmic web layout

Resources

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

img

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.

img

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.

img

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.

img

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.

img

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.

img

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

img

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

img

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.

img

Step 10

Add layers some effects according to image.

img

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.

img

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

img

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.

img

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

img

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

img

Step 16

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

img

Step 17

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

img

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.

img

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.

img

Step 20

Add footer links, copyright and back to top button.

img

Final Results

img

   

ABOUT THE AUTHOR

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

- aShocka

subscribe to newsletter