1 / 9

Log In to your User

Learn how to create a custom website header using Photoshop Elements. Follow step-by-step instructions to add gradients, logos, navigation bars, and text for a professional look. Customize with your unique style.

whutchens
Download Presentation

Log In to your User

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Log In to your User Start: Photoshop Elements

  2. Start a new document 700x120 pixels with white background. Create a new layer by clicking Layer -> New Fill Layer -> Gradient and name it header_bg and click ok. Click the Gradient Color Scheme and click on the middle of the sliders to set opacity and change the color. Use the following colors: #0B73A3 -> #141D3C

  3. Set your foreground color to: #5D6372 and background to Black. Create a new layer and name it "Clouds". Then go to Filter->Render->Clouds. Set this layer's Blending mode to Color Dodge. You should now have something similar to mine.

  4. Open your image, copy and paste your image into your header like mine. Layer Styles pane -> Drop Shadow Layer -> Layer Style -> Style Setting (adjust direction ~-47) Layer Styles pane -> Inner Shadow. Then set the blending mode to "Color Dodge".

  5. Choose the Rounded Corner Shape tool, set its radius to 25px, and create a shape on the far left of the header. Draw it so that the bottom of the shape is outside the viewable area, so we have a round top and square bottom.This is where your logo will be. Then apply the following layer style. Layer-> Change Layer Content-> Gradient Specify how you want it to look by clicking on the gradient color as we did previously And add Layer Styles -> Drop Shadow.

  6. Now use your type tool to create your logo/site name on top of the rounded shape. You should create your own unique logo and colors should be in your design scheme. Set your foreground color to #5D6372. Choose the square shape tool, and draw a 700x30 shape and position it at the bottom of the header. Move the layer so its underneath the logos, but above the globe. This is your navigation bar.

  7. Use the type tool to create your text for your menus. Select the line tool (under shapes tool). set it to 1px and your foreground color to something lighter than #5D6372 and draw a vertical line. This will be your separators for your menu, the number of separators you need will depend on the number of menus you have. Now lets add some details into our header, it’s looking rather plain at the moment. You can add just about anything, if you don’t have any ideas, then just follow my steps.

  8. I'll add some micro texts like web page coding to the background. "Right Click" on a web page and choose "View Page Source". copy a few lines of code from the page. Then in Photoshop, select the type tool. Then click on the canvas and drag to make a paragraph box (if you don’t click and drag, you will just get the regular text tool.) Then paste the source code into this paragraph box.

  9. Now modify your paragraph/text. - Set the paragraph to left align. - Set the following character settings Set this text layer's blending mode to: Overlay and Opacity to 60% Now add some slogan to the header to fill up the space. Now MY header is complete. You can add more spice to it if you like.

More Related