How I Made My Header

By Gloson On December 3, 2008 Under Miscellaneous
  • Sumo

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 :) .

Related Posts with Thumbnails

1 Trackback

  1. How I Designed My New Twitter Background | Gloson Blog - Anything interesting that Gloson learns
    March 18, 2009 11:57 PM


8 Comments Add yours

  1. Thomas UKM
    (2 comments)

    December 11, 2008
    8:52 pm

    Hi Gloson,

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

    Thomas

  2. Gloson
    (527 comments)

    December 11, 2008
    9:01 pm

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

  3. Shi Man
    (3 comments)

    February 2, 2009
    4:30 pm

    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

  4. Shi Man
    (3 comments)

    February 2, 2009
    4:33 pm

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

  5. Gloson
    (527 comments)

    February 2, 2009
    5:18 pm

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

  6. Shi Man
    (3 comments)

    February 2, 2009
    6:35 pm

    yeahh..sure.. here’s the link..
    http://www.brothersoft.com/adobe-photoshop-download-59748.html

  7. Jojo
    (3 comments)

    February 3, 2009
    12:17 pm

    Shi Man here’s the link
    http://www.download.com/1770-20_4-0.html?query=adobe+photoshop&tag=srch&searchtype=downloads&filterName=platform%3DWindows&filter=platform%3DWindows&=%2F1770-20_4-0.html
    close all runing program when you downloading it

  8. Jojo
    (3 comments)

    February 3, 2009
    12:19 pm

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

Add a comment

  • Avatars are handled by Gravatar
  • Comments are being moderated

CommentLuv badge

This blog uses NOFF nofollow free plugin.