First, open Photoshop and click File, then New. When the dialogue box pops up, set the background color to white and set the dimensions to the size you'd like. Keep in mind that if you want a header to stretch across the entire width of the page, that most screens are set to 1024 px. But you should offer a little extra room for wider screens. I've made my document 1110 px wide, giving myself 10 px for layer styles. I've also made my document 210 px tall so I have 10 extra px to play with.
Now we need to create a new layer for our picture. Click Layer then New then Layer to create a new layer. If desired, you can fill in a name for the layer once the dialogue box pops up.
Now navigate to where you've stored a picture or logo you want to use in your header. Open the file and alter the image size by clicking Image then Image Size.
Change the size of the height and give yourself 10 px of extra blank space to play with. For this project, since my header canvas is 210 px tall, I've made my picture 200 px tall.
Select the picture by clicking Select and then All. You can also press Ctrl + A.
Paste the image into the document by clicking Edit and Paste, or by pressing Ctrl + V. Then go to the top of the Tools panel on the left side of the workspace and select the move tool. Use it to drag the picture or nudge it with the arrow keys.
Create a new layer by clicking Layer + New + Layer. Then choose the rectangular marquee tool from the Tools panel. If it is not visible, click the black arrow in the lower corner of the marquee tool button to bring up a list of options. Next, change the Style from Normal to Fixed Size. Here's where you will have to do a little math. Find the width of your picture and add ten to that. Then subtract that number from the size of the canvas. For example, my canvas is 1110 px wide and my picture is 299 px wide. If I add 10 to 299, I get 309. Then, if I subtract that from 1110, I get 801. So the width of my selection will be 801 px, and the height will be 10 px less than the height of the canvas (210 – 10 = 200).
Click anywhere on the document; you can always use the move tool to adjust the placement if you're dissatisfied with the outcome. Once the marquee appears, select the paint bucket tool from the Tools panel (you may find it under the gradient tool, in which case you should click the black arrow at the corner of the button). Now click the foreground color swatch at the bottom of the tools panel and use the eyedropper to select a color from your picture. I've chosen to select a darker green from the edge of the leaf. Once you've chosen your color, fill the selection.
The green looks a little dark, so we can adjust it by lowering the opacity. Make sure that the fill layer is active and go to the Layers panel. At the top, you'll find an opacity drop down box. Type in the value or move the slider until you're satisfied with the look. I've chosen to lower my opacity to 45%.
Our header still looks a little too plain, so we need to add some layer styles to give subtle, yet effective definition. Click on the picture layer and go to the bottom of the Layers panel and click the fx. Then choose Blending Options.
Add a drop shadow to the picture. You can adjust the size and distance (how far the shadow comes from the picture) to your liking. Once you're finished choosing options, you can use the move tool to bring the picture closer to the fill to close any white space in between.
Now select the fill layer. Again, go to the bottom of the Layers panel and click the fx, then Blending Options. When the dialogue box pops up, click on Stroke and change the size, position, and color to your liking. I've chosen to make my stroke 2 px wide and position it on the inside of the fill to ensure the corners are sharp instead of rounded. I've also changed the color by sampling the fill color and dragging the color picker slider down to a dark shade of green.
Add text by selecting the text tool from the Tools panel. Along the top bar are options for changing font, font weight, font size, color, and alignment. I've chosen Arial in 18 pt as my h1 font, and Brush Script Std in 9 pt as my h2 font.
At this point, you may be done if you wanted a very simple heading. However, I like to spice my headings up a little more, so we're going to add a faint background picture behind the fill. Find a picture, pattern, or texture you like and open it in Photoshop. Go to Image and Image Size to resize it so the width is 1100 px (giving yourself those 10 px of room). Once you've resized it, you may need to do some cropping so the height is the right size (200 px). Just keep cropping and checking the image size; if it's close enough, you can uncheck Constrain Proportions so you can resize it without it affecting the width you've already set. Just be careful when editing this way because too much change can affect the quality of your picture.
Now that you have your image resized, you can copy it by clicking Select + All then Edit + Copy. Switch over to your header document and select the background layer, then paste the picture. You can use the move tool to adjust its placement.
Since we haven't used every last bit of extra space, we need to crop some out so there won't be a white outline around our header. Select the crop tool and carefully select the header. Once you're satisfied, press Enter.
Our header is done and ready to save. You can save it in any format you'd like, but it's best to save it for optimal web rendition. Click File then Save for Web & Devices.
Once the dialogue box pops up, choose the format you want to save it in; I chose PNG-24. After you've made sure all the options are correct, click Save then give the file a name and navigate to the folder you'd like to save it in. And you're done!
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
No comments:
Post a Comment