Creating a simple header in Photoshop CS4

Every website needs a header of some sort to frame the top of the page and give an impression of the website's purpose, the overall design and mood, and the layout. Headers can be created by CSS, but if you'd rather whip something up quickly and without the hassle of fumbling with coding, then you can create one in Adobe Photoshop CS4. Here's how to do it.

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

Creating a navigation bar using Photoshop CS4

Although navigation bars can be created using CSS and CSS3, many designers opt to use an image for the navigation bar because it allows them more control during the design process and is easier to do. With tools such as Adobe Fireworks and Adobe Photoshop, it has become increasingly easier to create navigation bars and other elements using visual tools instead of coding. In this tutorial, we'll look at how to create a slick, sophisticated looking navigation bar using Adobe Photoshop CS4.

First, open Photoshop and create a new document by clicking File and then New. A dialogue box will pop up asking you to define the dimensions and background color. Enter the width you'd like your navigation bar to be (I've made mine 600 px for demonstration purposes). Then make the height a little more than you want your bar to be, to give you room to add drop shadows and see what you're doing (I've made mine 200 px). For now, let's leave the background transparent. When editing the document, you can always add a fill layer of color or black so you can better see the edges while you work.

The first thing we're going to do is create our navigation bar. You can use the rectangle shape tool, but I'm going to use a rectangular marquee so I can specify the exact size. Select the rectangular marquee tool; it may be hidden under another tool, in which case you can click the small black arrow at the corner of the marquee tool button to get a list of options. Once you have the tool selected, go to the top bar and click the drop down box for Style. Choose Fixed Size and type the values in the width and height boxes next to the drop down.



Click anywhere on the screen. By this point, you should have a box that looks a little something like this:



You can fill your navigation bar with any color or gradient you'd like. I've chosen to use the gradient tool for mine, and have used the color picker (the color swatches at the bottom of the Tools panel) to choose a foreground color of #000000 and a background color of #333333 (with the reverse checkbox selected along the top bar). You can find the gradient tool under the paint bucket tool by clicking the black arrow in the corner of the button. Now drag the gradient tool down inside the selection.



We need to add a stroke around the selection to define the edges and give it a nice, crisp feeling. Navigate to the bottom of the Layers panel on the right side of the workspace and click the fx. Go up to Blending Options and click on it.



For the stroke, I chose to give it a thin line of 1 px and change the color to #464646. This way, the edges are defined without the stroke being overbearing.



Now we're going to add a glossy overlay to give it a more sophisticated appearance and more body, so we need to set the rectangular marquee tool back to its original setting. To do this, select the tool then click on the Style drop down box and select Normal.



It's time to create a new layer. To do so, click on Layer then New and then Layer. A dialogue box will pop up asking you to name your layer and choose any additional options. I've named my layer to keep it separate from the others.



Now drag the marquee over the top half of the box and fill it with white using the paint bucket tool. You'll find it under the gradient tool if you click the black arrow at the corner. To change the foreground color, click on the color swatch at the bottom of the Tools panel to open the color picker and choose your color.



Now we need to lower the opacity to give it that glossy overlay without being overwhelming. On the right side of the workspace at the top of the Layers panel, you'll find a drop down box for opacity. Enter the amount desired or move the slider. I've chosen to make my opacity 5%. This gives it just enough gloss without the bottom edge being too prominent.



It's looking nice and neat so far, but we need dividers between our links to better set them apart. Select the line tool from the Tools panel; it may be hidden under another shape, in which case you should hold down the black arrow at the corner of the button to list more options. Once you've selected the line tool, use the color picker to make the foreground color the same color as your navigation bar stroke; in my case, that would be #464646. Change the weight to 1 px.



Before we start drawing our lines, we want to make sure that we space them an equal distance apart. The way I do this is to display the rulers. Click View then Rulers to display the rulers.



The rulers will display, but there is a problem; the default measurement is in inches and our canvas is measured in pixels. In order to get a more accurate measurement, double click one of the rulers to pull up the options box. Under the Rulers drop down, choose pixels.



Think about how many buttons you want and divide that number by the width of your bar. For example, I want to make three buttons so I perform the following calculation: 600/3. This gives me 200 px for each button. When I move the line tool in the workspace, a subtle dotted line appears at the top of the ruler, and I use this to measure out 200 px between each line. Once you have the tool lined up, press shift while holding the mouse button and dragging it down to make a perfectly straight vertical line. Do this as many times as you need to create the number of buttons you want. After you've made sure your lines are where you want them (and you can adjust them by using the move tool at the top of the tools panel and dragging it or nudging it with the arrow keys), select the path selection tool, which looks like a plain black arrow. Then click the check mark on the top bar.



In order to make the lines look like they're engraved, we need to create a second set of lines in a lighter color; in this case, I've chosen to use #b8b8b8. Use the color picker to select the color you'd like.



It may be a little difficult to see what you're doing since the lines are so thin, so you can use the zoom tool (which looks like a magnifying glass) to zoom in. Draw your lines one or two pixels to the right of the first line, making sure to hold down the shift key while drawing them in order to keep them straight. Once you're satisfied with your lines, click on the path selection tool and then the arrow at the top bar.



Now we want to add a shadow along our lines to make them look more sunken in. In order to do that, we need to create a new layer by clicking Layer + New + Layer. When the dialogue box pops up, you can give it any name you want or leave the default; I've named mine Shadow. Now select the brush tool from the Tools panel. Along the top bar, next to the sample brush dot and size, click the arrow button to reveal more options. Enter a size (I've chosen 30 px) and move the hardness slider down to 0%. This will give it a soft, shadowed edge.



Make a dot on the middle of each of your lines. It should look something like this:



The contrast is a little too noticeable, so we need to bring the opacity down. Navigate to the top of the Layers panel on the right side of the workspace and find the drop down for opacity. Type it in or move the slider; I've chosen to make mine 25%.



In order to perform the next step, we need to group the lines and shadows. To do this, click Layer, then New, then Group. When the dialogue box pops up, you can choose the options and a name or leave the default.



Select the shadow and line layers by holding down Ctrl while clicking on them. Then drag and drop them into the group layer.



Now we need to create a layer mask. To do this, make sure the Group layer is selected and click on the third icon, next to the fx.



Select the brush tool from the tools panel and click the drop down box next to the dot and size sample. Move the hardness slider back to 100% and make the size of the brush tip smaller. I've chosen to make mine 10 px. Then use the color picker to make your brush color black.



Move the brush along the top and bottom edges of your lines. As you brush, you'll notice that the line and shadow disappears. You don't want to take a lot off—just enough to make the lines less intrusive and disruptive.



Our bar's design is mostly finished, but we need to add some text. Select the text tool from the Tools panel and use the drop down along the top bar to pick a font. You can also pick a font weight, a font size, and a font color. I've chosen 18 px Arial in white.



Drag a text box or click in the button area, then start typing. You can specify the alignment by using the buttons along the top bar; I've chosen to center it. You can also use the move tool at the top of the tools panel to drag or nudge your text until you're satisfied with the placement. Finish typing the names of your links and align them using the move tool and the rulers. It should be uniform and consistent. It should look something like this:



At this point, you can crop some of the extra white space out using the crop tool. Just drag a box around the area you want to keep and hit Enter.

Now it's time to save the file. Click File then Save for Web & Devices since we want to put this on a web page. This will ensure the file is optimized for loading. When the dialogue box pops up, choose PNG-24 from the drop down so the transparent edges won't be visible against a web page background. Click Save then name it and navigate to the folder you want to save in.

Using Photoshop is a great way to create navigation bars, buttons, and more for your web page. Just remember that the more images your page has, the longer it'll take to load. If you're careful, though, using one or two elements created in Photoshop won't hurt and will make your site look nice and sleek.

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

How to add a border to images in Photoshop CS4

How you choose to display your images on the web can affect the whole mood of your web page. Whether you choose to leave them plain or add styles to them can add personality to your designs. One of the simplest ways to format your images on a web page is to add a border. There are many ways to display borders, but we're going to look at how to create a border that looks like a picture frame in Adobe Photoshop CS4.

First, open Photoshop and create a new file by clicking File then New. A dialogue box will pop up asking you for the dimensions and the color of your new canvas. You should make your canvas a little larger than your photograph to give you some room to play with strokes and drop shadows, if you have those in mind. In this case, I've made my canvas 100 px wider and taller than the photograph to give me plenty of room. I've also left the background transparent so the edges won't show up against web pages.

Now you want to retrieve your photograph. Click File then Open and navigate to the folder where your photograph is saved. Once you've opened the file, click Select and then All, or press Ctrl + A. Next, click on Edit and then Copy, or press Ctrl + C.

Switch over to the tab of your new document and create a new layer. To do this, click Layer, New, and then Layer on the top bar, or navigate to the bottom of the right Layers pane and click on the second to last icon.



If you've used the top bar to create a new layer, a dialogue box will pop up prompting you to enter a layer name and choose other options. You can leave the default name or choose an appropriate name to label your new layer.

Click Edit + Paste or press Ctrl + V to paste the picture on the new layer. Then navigate to the Layers pane on the right side of the workspace and click on the fx at the bottom. Click on Blending Options to customize your layer styles.



For this layer, we're going to add a stroke. Click on Stroke in the dialogue box and look over your options. For this project, I changed the size of the stroke to 50 px and put the position to Inside. This will give the border a more rectangular appearance. For rounded edges, choose Outside.



At this point, if you wanted a simple border, then you're done. You can always go back over your options and add items such as an outer glow or a drop shadow if it fits the effect you're going for. For this project, though, we're going to keep going and see how to make our border look a little fancier.

Create a new layer by navigating to the top bar and clicking Layer + New + Layer. When the new layer dialogue box pops up, give it a name and select the checkbox Use Previous Layer to Create Clipping Mask. This will allow us to fill a selection without filling the entire canvas.



Select the rectangular marquee tool from the Tools panel on the left side of the workspace and make sure the Photograph layer is active. Make a selection on the inside of the black border, taking care not to leave any gaps.



Switch back to the new Inner Frame layer and select the paint bucket tool from the Tools panel. You might find it hidden under the gradient tool, in which case you should click the black arrow at the corner of the tool button. Go to the color picker swatch at the bottom of the tools panel and choose a color you like; here, I've already chosen a yellow-orange color for my fill. Then click on the inside of the selection.



Deselect the pixels by clicking Select then Deselect. This way, you won't accidentally drag your selection out of the box when you go to make another marquee. Then, make sure the rectangular marquee tool is selected and create another box inside the first one. You can choose how big or small you want to make it. Just leave plenty of room to show the picture.



Once you've made your selection and are happy with it, press Delete to delete the pixels. Now you have a second border. You can leave it like this if you're happy with it, or you can stylize it further.

To make it look a little more realistic and 3D, navigate to the bottom of the Layers panel and click on the fx, then Blending Options. We want to give our frame the illusion of being a little higher than the photograph, so let's choose a stroke to outline it. I've left the position to Outside this time but I've lowered the opacity to 75% and made it 10 px wide. This gives it a bit of definition and the illusion of a sunken-in shadow.



Now let's add an emboss and some texture. First select Bevel and Emboss and choose Pillow Emboss from the drop down. In this case, I only changed the size to 25 px. After that, select Texture under Bevel and Emboss. You can use the arrow to browse current patterns, and the second arrow on the drop down box to browse texture categories; the one I've chosen came from the Patterns category and is called Rusted Metal. You can choose any of the textures you like.



We're going to add a Gradient overlay. The default is black and white, so click on the arrow next to Gradient to get more options. I've chosen the second one, which is a fading yellow-orange.



Now we're ready to save. You can save it in any format you like, but it's best to save it in a format for the web. To do this, click on File then Save for Web & Devices. Because this is a photograph, I've chosen JPEG from the drop down box, though you could also save it as a PNG-24.

There are many ways to showcase your images and many different kinds of borders. Once you get more comfortable with creating borders, you can play around with it and see what you like best.

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