Sleek and Spicy website header Tutorial - Web 2.0 Style

In this tutorial I am going to teach you how to make a nice sleek looking mockup for a website header.
It should look like this: Click here.

• We start by opening a new document (Ctrl+N) (Cmnd+N - Note for mac users - Replace the CTRL with Command) Dimensions 800px width X 120px Height - Background color set as white for now. OK
• On the background layer go choose black as your color and than go select the paint bucket tool- than click on your stage to fill the bg with black.
• Create a new layer above the bg(background) layer and name it "pattern". While the pattern layer selected go select paint bucket tool and then go up to the top of the screen to the properties panel and select PATTERN instead of FOREGROUND.

Select the thick pin stripes pattern.

• In order to have the pin stripes pattern in your pattern library - you first must create one. Keep this document open and go open a new document (CTRL+N) and create something like this

make sure you delete the background layer to be a transparent background. and not white. Than go to edit>Define pattern>give it a name "thickpin" and click ok.

• You will now be able to close that doc. and go back to your oringinal document and select that pattern from the pattern library. You should have the paint bucket selected so just click the stage to fill it with the pattern.
• Go select the pattern layer and double click it to open blending options. (if it doesnt open it for you than keep on clicking you will get it - make sure you are not clicking on the text - that wont work) - now select color overlay and choose a nice blueish color like I did #005777. and click OK. You should now see this:
  
• Now double click on the magnifying glass so you will see the image at 100% this is always good. And drag open the surrounding window around your stage - you should be able to see a gray color of the document around all sides of the current header. This is going to help you for the next step.
• Create a new layer and name it "gradient black" select that layer and go select the gradient tool and bring it back to the stage. place it inside the gray section below your header and hold on shift (this keeps it straight) and drag your cursor upwards all the way to the top of your header. now release. you should have this:
• Create a new layer above that and name it "hr"(stands for horizontal Rule) Go to the color pallete and choose a nice yellow color #e0ff36 . Now select the square tool and drag out a nice line at the bottom of your header.
  You should see this on your stage and this in your layer panel.
  
• Now go to the layers pallete and select the "pattern "layer - now hold down on shift and select the "hr" layer - you will see now that all three layers are selected. (This selection trick is a great new feature in cs2 - just how folders work on your pc or mac.) Now with all 3 layers selected go to the top right corner of your layers pallete and click on the triangle and it will drop a menu down
  
  - go select "new group from layers" now name it " Backgrounds" and click ok.
• Now your backround layers are in that nice little folder
  
  so they wont confuse you the rest of the way. To be smart - while the folder is selected , you can even click on the lock symbol at the top of the layers pallete in order to lock the folder so they wont be opened - even by mistake. Originization is very important - ALWAYS NAME YOUR LAYERS and USE FOLDERS!
• We will now do the text logo - go select the type tool and choose a nice font and a white color. - and write the name of your company . I wrote Shiny Black. This should have automatically opened another layer above your "backgrounds folder". now right click on that layer and select duplicate layer.
  If you are using a mac and you only have one clicker than Hold down on cmnd and click once to open the menu. Now while the duplicated text layer selected - name it reflection - than go to edit>transform>flip vertical and than select the move tool and bring it down so the bottoms of both texts are about 1px away from each other (foot to foot). give it a 40 or so opacity. you should currently see this:
  Than in the layers pallete click on the "ADD LAYER MASK" icon (3rd from left in cs2)
  
  now go select the mask layer. With the mask layer selected go change your foreground color to back .Select the gradient tool drag upwards from beneath your text to 2 thirds through it and release.
  You should have this:
  
• Now select those layers and create a group for it like we did with the "backgrounds folder" and name this folder "logo"
• We are now going to make the "forgot your password link" .
• Now Create a new layer above the logo folder and get the type tool and type out "forgot your password" it shouldnt be too big - i chose a 10pt for the size of text. i placed it closer to the right side of the header . Look at final image to see where it goes. View here.
• Now create new layer above that layer and name it underline - go to the tools panel and while your cursor is over the shape tool - hold down on the mouse clicker - and select the line tool from that menu.
  
• At the top of the screen - go to the line line properties and type in 1px for the weight.
  
• go to the choose an nice color for your underline I chose #e0ff36 .
• and now just below your text, drag out a nice thin line from one side of your text to the other - hold down on shift to keep it straight.
• once this is done make a folder for this and name it. I named it "fyp" forgot your password .
• Open a new layer above that folder and name it text field.
• Go choose white as your color.
• Go to the shape tool menu - but this time choose the "rounded rectangle tool" and in the properties at the top of the screen type in 3px for the raidus.
  
• Now on the far right side of the stage drag out a nice rectangle for the username text field - about this size.
  
  Double click on that layer to open the Blending options and select the inner shaddow - and enter the following numbers: 24% opacity, distance 3, size 1, - the rest keep as default.
  
  Duplicate that layer by draging the layer to the "create new layer icon" at bottom of the layer panel - it sits right next to the garbage icon . - or you can right click and select "duplicate layer".
• Change the foreground color to a dark grey. Select the type tool . You can type whatever text you want . I typed Photoshopit for the username and those little stars ("asterisks"or whatever they are called) for the password - and placed that text directly over the text fields.
• Change color back to white. Next to each text field should be the text which describes each field - in this tutorial I used USERNAME and PASSOWRD but every site may be different. I used size 20pt for my text.
• ok close them up in another folder and name that folder "text fields".

Now final item - the login button.

• Go into your text fields folder and duplicate on of the text field blocks. and drag it out of that folder so it sits on the layer above that folders. Name this layer "loginbutton" now double click on that layer to open its blending options and uncheck the inner shaddow effect and give it a color overlay and select a nice blue color like #15a7e3. click ok.
• Holding down on ctrl click "loginbutton" layer (your cursor must be directly over the square thumbnail of the layer for this to work) this should create a marquee selection around the button. now create a new layer above that and name it "bttn grad" for button gradient. Go to Select>Modify > Contract - type in 1 px and OK. Go get the gradient tool - choose the "FOREGROUND to TRANSPARENT "option and change your forground color to - #046993. Now drag your gradient tool Upwards from below the loginbutton to half way through. this will create the nice shade effect..
• I think we are done. Here is the header on a sample page. Click here.

---

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Powered by Wordpress
Copyright 2008. PhotoshopCandy. All rights reserved

• Home
• Freebie-Widget
• About
• Advertise
• Resources
• Contact
• Design Contests
• Jobs