Categories
Miscellaneous

How I Made My Header

I made this header for my blog on 28th of November 2008.

header-bg

Note: The header might change as time flies

I did it using Adobe Photoshop. Do you want to know how I did it?

Here are some easy-peasy steps with pictures.

First, I created a new picture, the width of my page, and the height of my header.
Then, I used the gradient tool:
1
For the color, I picked blue.

I dragged the mouse vertically…Now, it looks like this.
2

I then used the text tool to type the text. I dragged the mouse to make a text box.
3

I typed in, ‘Gloson Blog’. I used the ‘Cooper Black’ font. The size of the font is 70 pt. I used a very light blue for the color of the font.
4

Now, I am going to show you how I put the shadow.

I clicked the button below and clicked ‘Drop Shadow’
5

A window will pop up. Here, you can modify the shadow options. Below are the options I modified for ‘Gloson Blog’.
5.5
If you want to modify the options again, click the same thing and the same window will appear.

Then, I opened the photo of myself, and picked the ‘Magnetic Lasso’ tool.
(You need to hold your click for about 1.5 seconds on the ‘Lasso’ tool for the list to appear.)
6

To use the ‘Magnetic Lasso’ tool, you click near a point where the contrast is great. Then, you drag, not click the mouse along where you want the picture to be separated from the background. The tool will make points, they are like pins to keep the line from running away. Click to make a point. Press ‘Del’ to delete the previous point.

Tip: If the line doesn’t go where you want it to go, click to make a point. That would ‘pin’ the line.

That’s how I used the ‘Magnetic Lasso’ tool.
7

After lassoing the picture, I copied it. (Ctrl + C)

Next, I pasted it on the header.
8

To fix the ridiculously big photo of myself, I selected the ‘Move’ tool.
9

Then I resized my photo. To lock the pixels (if the picture is a square, it won’t turn into a rectangle), I pressed ‘Shift’ while dragging the corner of the bounding box.
(Make sure you tick ‘Show Bounding Box’ to show the bounding box.)11

Now, for the tagline. I used the text tool again. As you can see, the font is ‘Franklin Gothic Book’ and the size is 28.3pt. The color is black, of course.
12

Wondering how I did the outer glow?

Here’s how.

I clicked the button below, and then I clicked on ‘Outer Glow’.
13

And then a window will pop up. This is where you can modify the ‘Outer Glow’ options. Below are the options I had modified for the tagline.
14

I then clicked ‘File’ and then ‘Save As’ and saved it in the PSD format, so it is editable.
15

After that, I clicked ‘File’ and then ‘Save for Web’. This is where you can modify the picture quality, settings, etc. You can save it in many web formats – JPG, GIF, PNG, and etc. They are not editable, however.
16
I then uploaded the non-editable header to my blog. (The picture which I saved in the JPG format.)

To see the new header, I pressed Ctrl + F5 in my blog (that would clear the cache), so the new header will show.

And that’s how I created my header.

I hope you will find this information useful. Maybe you can use this information to create your own header one day 🙂 .

By Gloson

Hello, my name is Gloson and I am an 11-year-old kid who lives in Malaysia. Here, I blog about anything interesting that I learn, including how-to's tips, and more.

Besides blogging, I am a funny poet who writes funny poetry that makes you giggle. Some of my funny poems can be found in this blog.

You can also find my cats series, a series of the funny and cute cat photos I took, here.

9 replies on “How I Made My Header”

where do i download the adobe photoshop?
cause i couldnt download it through the website i found.
it stops at 70% when i download it

Leave a Reply to Thomas UKM Cancel reply

Your email address will not be published. Required fields are marked *