Posted tagged ‘layers’

Tutorial on Making a Header

August 3, 2008

Since blogs are really popular, I thought I would show you how to make your own header. This way you can add your own personal touches to your site. We will use the header I just made for another site as an example to get you started.


If you have Photoshop Elements or another version of Photoshop open it up. I happen to be using Photoshop CS. Click on File > New


This is where the size of your header (or canvas size) is entered. The header for my blog is going to be 600 pixels by 175 pixels. In the pop up window (shown below) for the width I entered 600 pixels and for the height I entered 175 pixels. Your measurements may be different than what I have entered for mine.


Once your new file is open, double click on the lock symbol in the Layers pallet to unlock the layer. (As indicated below) A pop up will open to rename the unlocked layer. The default is layer 0, click OK. In the Tools pallet choose the Paint bucket. If the current color showing for the Foreground color isn’t the color you want, click on the color chip on the Tools pallet. The Color picker will pop up, choose your desired color and click OK. Place the Paint bucket cursor into any area of the white canvas and click your left mouse button. The area should now be what ever the color was that you choose.


Next, make a New Layer from the Layers pallet by clicking on the symbol at the bottom of the Layers pallet. I then clicked on the Shape Tool (from the Tools pallet) to draw an ellipse in the middle of my canvas. Be sure to change the color so you can see it on top of the background color. Something that complements your first color you choose would be good. Use the Move tool from the Tools pallet to move the shape to the desired placement.


For some added texture I opened a photo I have on my hard drive. Click on the photo and drag it to the canvas you are working on. Move the photo around until you are satisfied with the area that will be showing in the header. I then changed the opacity of the photo to 50% in the Layers pallet. This way the colors from the bottom layers can show through.


Add a New Layer. Choose the Text Tool from the Tools pallet. You may need to change the color of the text so you can see it. Use the same procedure to change the color as we did previously in the Tools pallet. Left click your mouse button to place the curser in the area you want to add your text.


Use the tool bar at the top of your screen to select the Font and Font size that you want to use. I have selected Arial Black with a 30 point font size. Then, using your keyboard, type your desired title.


Make another New Layer and use this same procedure to type your subtitle. Don’t worry if it’s not exactly in the correct area; use the Move tool to place the text in the correct spot.


This is what your layers pallet should look like when you are finished. If something isn’t showing up just click on the layer and drag it to the correct placement.


Finally, save your file by clicking on: File > Save As. On the window that pops up name your file something like “Blog header” and then click Save. (This saves the Photoshop file incase modifications are needed.) To use the header on your site just save the file again: File > Save For Web.


On the next screen (a section shown to the left) make sure GIF is selected as the file type, change number of colors used if needed. Then click Save. Name the file and where to save it. Click Save again.


Here is the finished header, ready to FTP to your site.


For the tutorial with images click this link: tutorial-on-making-a-header PDF


This tutorial was written by Joann Snell. For more information visit http://jlsnell/ or

You may use this tutorial as is on your site as long as the credits are included and no changes are made to the original content.