Monday, May 20, 2013

Alright so were gonna be making a sicknastay (yes that's a word) web page design start by opening a Photoshop document that is 1080 by 2160 pixels RGB  with 300 pixel resolution, it will look like this-

Now your gonna want to go to http://hubblesite.org/gallery/album/nebula or any other category and find a really cool pretty image to use to make your background. Make sure you take the largest size image possible.
If the image is large enough then you can just paste it into your Photoshop document however what I chose was too small so I used ctrl+T to transform the picture and make it larger, I then pasted another copy of the image below it and flipped it upside down then used the smudge tool and the blur tool to blend them together-
now press ctrl+I to invert the image 
then play with the brightness so that you have a whiter background on which to display things, i set my brightness to 32
you can play with some filters if you want but I left mine unfiltered
Flatten the image and then double click the locked background layer to make it editable and then duplicate the layer.
Now we are going to create the header and navigation bar start by selecting a centered slice near the top of the background duplicate later using the rectangular marquee tool. you can use guidelines to make it more exact measuring 1/4 inch off each side and a half inch from the top making the selection a half inch tall.
copy your selection and create anew layer and past the selection onto that new layer and then invert it by pressing ctrl+I

Then you can add a stroke by double clicking the new layer and adding a black stroke that is 4 pixels wide 
and then begin to put your text into the Header/Navigation bar you can pick whatever color/font you think fits your design.  
Put a stroke on the header text and set the position to inside and the blend mode to vivid light.
Make however many buttons you need using the horizontal text tool under the first line of text to make the buttons for the navigation bar. then double click the text layer or layers and put a small black stroke around the text.

Then create a new layer and draw a rectangle around the first navigation bar button then duplicate that layer as many times as buttons you have. Pull some guidelines down so that you can make sure that everything is in line and use free transform (ctrl+t) to make the boxes the right length. then select all those layers and merge them drag that layer underneath the text layer and lower the opacity of the boxes to 20%. then double click the boxes layer in order to put a stroke on and set the position to inside, the blend mode to overlay and the size to 250 pixels.
aaaand nowwww youuu shhhould have sumthin like a da this!
BUT WAIT! were not done I'm going to show you how to make this functional using the splice tool!!!
Start by right clicking the crop tool and select the splice tool and then draw a box around your text on your navigation bar and then double click the little blue envelope and fill in the URL you want to link the button too.
cool.




No comments:

Post a Comment