Posted by Gloson
December 3, 2008

How I Made My Header

Miscellaneous

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

header bg How I Made My Header

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 How I Made My Header
For the color, I picked blue.

I dragged the mouse vertically…Now, it looks like this.
2 How I Made My Header

I then used the text tool to type the text. I dragged the mouse to make a text box.
3 How I Made My Header

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 How I Made My Header

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

I clicked the button below and clicked ‘Drop Shadow’
5 How I Made My Header

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 How I Made My Header

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 How I Made My Header

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

Next, I pasted it on the header.
8 How I Made My Header

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

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 How I Made My Header

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 How I Made My Header

Wondering how I did the outer glow?

Here’s how.

I clicked the button below, and then I clicked on ‘Outer Glow’.
13 thumb How I Made My Header

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 How I Made My Header

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

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 How I Made My Header
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 :) .

Related Posts with Thumbnails

Share and enjoy!

Mmm...Delicious!

Stumble Upon

You might also like to

Subcribe to Gloson Blog

Add a comment

RSS feed | Trackback URI

9 Responses »

Comment by Thomas UKM Subscribed to comments via email
2008-12-11 20:52:31

Hi Gloson,

A great step by step to create a header, by the way do you edit the header.php in the theme?

Thomas

 
Comment by Gloson
2008-12-11 21:01:59

No I didn’t. I just have to hit Ctrl + F5, so that it clears the cache and the new header shows.

 
Comment by Shi Man Subscribed to comments via email
2009-02-02 16:30:34

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

 
Comment by Shi Man Subscribed to comments via email
2009-02-02 16:33:07

and seriously, im way elder than u but u r way smarter than me >.<

 
Comment by Gloson
2009-02-02 17:18:12

What was the site that you found? Can you give me that link?

 
Comment by Shi Man Subscribed to comments via email
2009-02-02 18:35:22
 
 
Comment by Jojo
2009-02-03 12:19:14

use safari if your internet connection is too slow
download safari here:
http://www.download.com/Safari/3000-2356_4-10697481.html?tag=mncol

 
Name (required)
E-mail (required - never shown publicly)
URI
Subscribe to comments via email.
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.

If you are a first time commentator, your comment would have to be moderated before published. So please don't worry if your comment doesn't appear yet! ;-)
CommentLuv Enabled

Trackback responses to this post

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in


Website Statistics