Category: Header

Posted on

Compose your header by combining several images – Photoshop

Not all of us are happy with the image that blogger gives for the header.. sometimes it doesn’t fit well with the concept of the blog…. and searching the internet for a relevant picture that conveys the idea behind your blog(Title) is time consuming and cannot guarantee success.

You may have a certain collection of pictures… when put together might give a boost to the appearance of your blog… but don’t know how to go about it… Never mind.. just read the instructions and you will have your own custom header… Checkout the Header here

Just for starters.. I have two images here.
JUST 4 PICS PUT TOGATHER…. NO SPECIAL EFFECTS-

Here…I HAVE MERGED THEM TO GIVE A SINGLE-PIC-LOOK

The idea is to combine the 4 pictures and create a new one that appears to be a single picture…. I have used 20 images to create a custom header for My Photoblog.. check it out

I have used Photoshop to achieve this effect.. Few important guidelines before going about creating your custom collage
PHASE-1

  1. Decide on the dimensions of the final picture you want (normal header is 980 x 200)
  2. Create copies of the pictures u want to collaborate ( this way you always have the originals to fall back on incase your attempts go hay-wire)
  3. Get used to working with the TRANSFORM OPTION…….
    • Resize the picture window.. so that you can clearly see all 4 corners ( by clicking and dragging the right corner of the picture window)
    • Select the entire picture — Ctrl + A
    • EDIT-FREE TRANSFORM (or)—-Ctrl +T
    • Notice the change in the cursor when you position it over  the anchor points (change to double headed arrows) at the corners and in the Left &Right sides (and) at the Top & bottom
      • Click and drag the points in the sides.. .. this will alter the width of the picture
      • Click and drag the points at the top / bottom .. .. this will alter the height of the picture
      • Click and drag the point at the corner.... will alter the width & height at the same time
      • Click and drag the point at the corner while keeping the SHIFT key pressed…. will alter the width & height  and also maintain the ratio between the height and width
    • Notice the cursor change to circular shaped arrow when positioned at a certain angle in the corner
      • Click and move the mouse…. this will turn the picture at an angle
    • Hit ENTER once you have decided to apply the changes
    • IF you donot wish to apply changes.. click on any tool… and a message-box will  pop up asking if you would like to apply the changes.. just say DONOT APPLY
  4. Some information about Layer Mask  ( IMPORTANT.. WE WILL BE USING A LOT OF THIS HERE)
    • As the name suggests… it links to the layer which holds your picture
    •  WHILE DRAWING ON THIS LAYER… those areas are rendered invisible in the picture ( I WILL TELL YOU HOW).. this is called masking selective areas in the picture
    • In case you have masked the wrong area.. and want to undo.. use CTRL+Z
    • Even after undoing.. you are not happy… no need to panic and delete the entire file
    • Just right click on the link symbol  that appears between the image and the mask   
      … and give DELETE LAYER MASK
    • Your picture is again back in its original state
    • You may add a new Layer Mask and continue with masking the way you want it to be
  5. Start with a 400×300 image that holds 2 images….. just to get acquainted with the whole process of the before and after appearance … before trying the 980×200 image for header

PHASE 2—–INSTRUCTIONS TO CREATE YOUR COMPOSITE HEADER

  1. Open Photoshop and create a new file giving the dimentions …. Lets name it Collage.psd
  2. Have a Transparent Background
  3. Open the all the images that you want to combine…( ALWAYS SAVE YOUR ORIGINAL IMAGES AND … USE ONLY THE COPIES HERE)
  4. We are going to resize & transform the images so that they fit into the New file.. ie Collage.psd
    1. Select IMAGE-1 and use the TRANSFORM TOOL  to resize and rotate ………….. PHASE1–STEP3
    2. Apply changes by hitting ENTER
    3. You will notice that the resized picture is already selected …(take care not to click anywhere at this point)
    4. Copy using Ctrl+C  ( or Edit- Copy)
  5. Click on the New file …Collage.psd
    1. Paste using Ctrl+V ( or Edit-paste)
    2. You will notice that the image is added as a new layer in your layer pallete
    3. If the resized image is too large / small… donot worry.. just click CTRL+T to transform the image
    4. Increase / Decrease the size… or rotate the picture… and hit ENTER when you are satisfied
    5. Use the Move Tool to move the IMAGE-1 at a position you feel best
  • Follow STEPS 4 & STEP 5 till you have all the images positioned neatly and arranged according to you wish
  • Save the Collage.psd frequently so that you donot loose any changes… Once you are satisfied with the manner of arrangement of the pics… you may close the individual pictues
  • You may notice that they overlap with once another… and certain pics are displayed only half… here is where the magic of Layer-Mask starts
  • Its advisable to start from the topmost layer and then work towards the layers positioned at the bottom
    1. Select the layer whose areas you want to render invisible… and look here at the bottom of the layer pallete

    2. Click on in the layer palette to add the layer mask
    3. You will notice that the image layer has changed to this
    4. Notice the double outline around the Mask-Layer… this means that the "Layer Mask in selected"
    5. Always make sure that the Layer Mask is selected when you begin the Masking process
  • The Process of Masking the areas in the image which you donot want to be seen
    1. Make sure that the MASK LAYER IS SELECTED

    2. Click on the Brush-Tool … if you see a pencil the
      n click and hold the mouse button down a little longer… you will see the brush… then click it
    3. In the Brush Tool bar ( Seen at the top… just below the Menus)… … click on the down arrow to adjust the diameter of the brush…ie… make the brush large / small
    4. Similarly adjust the strength / hardness also

    5. Select the various styles of hardness from the list given

    6. Make sure that the foreground color is black
    7. Once again make sure that the MASK LAYER IS SELECTED.… the double outline at the mask layer
    8. Now just click on the image.. at the area which you wish to conceal

    9. Notice that the particular area is faded & erased.. revealing the image underneath
    10. Also notice that the Masked-Layer (in the layer palette) will show patches exactly in the same areas where you had concealed.. SAVE collage.psd
    11. Continue procedure…. (h) (i) (j) till you have masked ( hidden) the relevant parts of the image

    12. Once you are satisfied with the appearance of this layer… choose another image ( which is in another layer) and repeat the processes  from STEP-9 ( a,b,c,d,e) STEP -10 (a,b,c,d,e,f,g,h,i,j,k,l)
  • You may notice .. as you slowly start masking the layers.. one by one.. all the pics merge into on another to create a single-picture-look… Save your Collage.psd
  • Now save this image as a jpeg by FILE – SAVE AS – choose JPEG from the dropdown box.. and give a name
  • VOILA !!!… your own custom collage is now ready for upload to be displayed

    • Hope I have included every conceivable obstacle that you might face… incase I have missed out any do let me know by dropping a word at the comment section.. Once you get the feel of working with Layer Masks… there is no stopping at the effects you can achieve in matter of minutes. I insist that you experiment with the procedure listed above by choosing 2 pictures and merging them as one… by using layer masks…

    Once your Eyes & hands work in synchronization … then you can go about merging ‘n’ number of pictures to give yourself a customized image that can be used in the header – background .. or just plain composite image .

    If this post has been helpful to you.. do drop a word of appreciation. Your appreciation is my motivation

    From Deepa’s Template Tips

    Posted on

    Modifying your Date-Header

    The Date Header is something that appears right above each post.Depending on the template chosen..the date-headers will be dispalyed in a certain font-size-color.
    However its possible to give an entirely different look to your date header

    1. SAVE AND BACK UP YOUR TEMPLATE

    2. Locate……
      <Variable name=”dateheadercolor” description=”Date Header Color” type=”color” default=”#4F5052″>
      This determines the color in which the date header is displayed.You can Give the color of your choice by modifying the default=”#4F5052″.In order to know the Hexadecimal Value of the color that you would like to use..refer to
      Hexa-decimal Color chart

    3. Locate……
      .date-header {
      margin: 0 0 0 0;
      margin-right: 10px;
      margin-left:10px;
      border-bottom: 1px solid #942d08;
      text-decoration: none;
      font-family: Georgia, “Times New Roman”, serif;
      color: #940f04;
      font-size: 11px;
      text-align: right;
      }

    4. Here you may modify the font-family , font-size , color ie..The Color in which you want the date to appear ..eg:-My date header appears in maroon color

    5. Perform the required changes

    6. Save and View

    Hope you were able to follow the instructions and arrive at the look you always wanted for your blog.Drop in your comments to let us know how you feel after making these changes.And..dont forget to backlink to this post so that you may guide a fellow blogger who would like to have the same changes made.

    From Deepa’s Template Tips

    Posted on

    To have Background picture for your header

    Many custom templates offered by blogger beta either does not have a Background picture.. or the picture presented by default may not suit our taste. You too can have a custom looking header to your blog.Just follow the instructions closely

    1. SAVE YOUR TEMPLATE
    2. in TEMPLTE -EDIT HTML LOOK FOR
      #header-wrapper
      {
      width:700px;
      margin:0 auto 10px;
      border:1px solid $bordercolor;
      }
    3. Add the background-image: url(THE URL OF YOUR PICTURE); to your header-wrapper
    4. So that your final code should look something like this
      #header-wrapper
      {
      width:700px;
      margin:0 auto 10px;
      border:1px solid $bordercolor;
      background-image: url(THE URL OF YOUR PICTURE);
      }
      • If the picture of your choice is in the web.. then give the webURL
      • IF the Picture is in your hard disc then
        1. Then have a new post and insert that picture
        2. Go to edit html page…. You will see the html code for that picture
        3. Copy paste that code into a notepad
        4. Publish this new post (don’t worry u can delele later)

      • Use the URL u got from the previous step to get that picture on the header
      • IF you are satisfied with the new look of the header then you can delete the post having the picture. Don’t worry.. this will not affect the header…as the picture is stored in blogger
    5. SAVE and view your blog

    You make me happy by comming and reading this post.You can make me feel little more happier by dropping in your comments.Good luck to have your customised header picture

    From Deepa’s Template Tips

    Posted on

    3 colum Header

    Many would like to have header with compund attributes.The header you see here has single picture in the background with 3 colums.The middle colum has the Blog Title and description the right-colum has a clock and i have left the left-colum empty.

    PHASE: 1

    1. Look for
      &ltb:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=‘no’>

    2. delete–maxwidget=’1′

    3. change–showaddelement=’yes’

    4. save

    5. Your final line of code should look like this
      &ltb:section class=’header’ id=’header’ showaddelement=’yes’>

    PHASE:2

    1. Template—Page Elements

    2. You must be able to see the “Add Page elements” in the header section

    3. Delete the Existing header

    4. Add new page HTML-JavaScript element

    5. Copy paste the code into a Notepad and make required URL changes

    6. After making the changes Copy paste the code to the HTML-Javascript widjet that you just added in the header section

    7. Save and view your blog

    PHASE:-3 Addendum Thanks to jsanchirico
    You may change the following to suit your template color-schema

    1. This uses the “Table within a table” kind of logic

      2. Table 1—— has one Row and one colum
      |   First row of this table has the picture
      |
      |___Table 2 is inserted into the row1 of table 1
      | |______Table 2 has 1-row and 3-colums
      |
      Now the title is written inside the 2nd colum of the table 2
      I have left the 1st colum blank and insert a JScript code for clock in 3rd colum

    2. So feel free to come up with your own version

    3. &width=”760px” background=”URL_OF THE HEADER PICTURE” height=”150px Just change the height of you find your header to be too large

    4. Sometime the larger font size will also affect the header height.In such case make required alterations herespan style=”font-size:21.0pt; color:white” YOUR BLOG DESCRIPTION

    5. If your header stylesheet has a bacground image..just delete it

      6. As for Example:-

      #header {
      background-color: #A9B5BF;
      background-image: url(http://nea.ngi.it/templates/img/33-onde.jpg);
      background-position: top;
      background-repeat: no-repeat;
      border-style: solid;
      border-width: 1px;
      border-color: #375267;
      height: 150px;
      margin-bottom: 5px;
      }

    IF you liked this feature do let me know. It will make me happy.If you face any difficulty do drop a comment, i shall respond at the earliest.
    And..dont forget to include me in your credits section

    From Deepa’s Template Tips

    Posted on

    Date header for multiple posts

    Now i can dispaly my posts irrespective of wheter i have posted them on the same day or not.Normally, if you are performing multitple posts on the same day , then the date header will appear only once.I made a slight modification and VOILA,, even multiple posts show individual headers.

    1. Take a back up of your template before even you attempt

    2. Locate the following lines of code
      <div class=’blog-posts’>
      <b:loop values=’data:posts’ var=’post’>
      <b:if cond=’data:post.dateHeader’>
      <h2 class=’date-header’>
      <data:post.dateHeader/>
      </h2> </b:if>
      <b:include data=’post’ name=’post’/>

    3. Delete the lines in red

    4. Insert the lines in green
      <div class=’blog-posts’>
      <b:loop values=’data:posts’ var=’post’>
      <div class=’date-header’>
      <data:post.timestamp/>
      </div>
      <b:include data=’post’ name=’post’/>
      <b:if cond=’data:blog.pageType == “item”‘>

    Save and view

    From Deepa’s Template Tips

    Privacy Policy - Terms and Conditions