Skip navigation
scielement
Currently Being Moderated

Using Photos to Create a Header

Apr 27, 2009 11:08 AM

Currently have PE 5 and would like to know the easiest and quickest way to create a blog or web site header using only photos.

 

If there is a video, text or combo thereof that walks a person through this process, it would greatly appreciated.

 

Scielement

  • Currently Being Moderated
    Adobe Employee
    Apr 27, 2009 12:00 PM

    Can you point us to an example of what you are trying to acheive?

    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Apr 27, 2009 1:57 PM

    Well, I don't know of a tutorial, but it's fairly straighforward:

    I just made this example:

    example.jpg

     

    Pick your six photos and open them in the PSE Editor

     

    Use the Crop tool to crop them to the right Aspect Ratio. Your example uses 10x8 (Set the Crop Tool Aspect Ratio to 8x10 and then click the little double arrows to get it to be Width 10in Height 8in)

     

    Then, resize them all to 130 pixels Wide x 104 pixels High

    Use Image>Resize>ImageSize... make sure Resample Images is checked, and then set the pixels (130Wx104H) in the Pixel Dimensions box.

     

     

    Now, open the attached Banner.psd file [Note: This site won't let me upload a .psd, so I changed the extension to .txt.  After downloading it, change it back to .psd]

     

    Drag each of your images into this file to create a new Layer for each image. (Use the Move Tool to drag and drop)

    You can do this by simply having the two image windows side by side, and litterly dragging from the image window onto the banner.psd window.

    Drag all six, and arrange them in the order you want. Positioning does not have to be exact, except for the one all the way on the left and the one all the way on the right.

     

    You should now have the layer from the origional Banner.psd file, and six new layers.

    Select all six of the new layers by holding the CRTL key down and clicking on each layer in the Layers pallette.

    Then, select Align>Vertical Centers in the Tool Options Bar near the top of the window

    The select Distribute>Horizontal Centers from up there as well.

     

    Now, add an outside Stroke (black border) to each image

    In the Effects pallete, select the Layer Styles filter, and then select Strokes from the pulldown.

    Drag and drop the Black Stroke 0.5 Px onto each of your images.

     

    Now, arrainge the layers so that you have one of the included Photo Filter layers on top of each of your photos by simply dragging the layers up and down to get them in the right order.

    And, for the faded Color Left B&W Right effect, drag the Hue/Saturation layer up to the top.

    You should end up with something like:

    Hue/Saturation 1

    Photo Filter 6

    Layer 6

    Photo Filter 5

    Layer 5

    Photo Filter 4

    Layer 4

    Photo Filter 3

    Layer 3

    Photo Filter 2

    Layer 2

    Photo Filter 1

    Layer 1

     

    Where Layer 1 is that layer with your Photo 1, Layer 2 = your photo 2, and so on.

    You can play around with the effect of each Photo Filter layer by double clicking on the little circle that's half black and half white.

     

    Once you have it all as you'd like, save it for your web banner using File>Save for Web.

     

    There you go.

    Not too tough.

    Cheers

    Bob

    Attachments:
    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Apr 27, 2009 3:05 PM

    Sure. I'll go edit my origional post with some screen shots.

    If there are any particular steps you like to see first, let me know.

    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Apr 27, 2009 3:35 PM

    Well, I don't know of a tutorial, but it's fairly straighforward:

    I just made this example:

    example.jpg

     

    I'm using PSE7, so my screen shots are a little different than PSE5

    Pick your six photos and open them in the PSE Editor

     

    Use the Crop tool to crop them to the right Aspect Ratio. Your example uses 10x8 (Set the Crop Tool Aspect Ratio to 8x10 and then click the little double arrows to get it to be Width 10in Height 8in)

    crop.jpg

     

    Then, resize them all to 130 pixels Wide x 104 pixels High

    Use Image>Resize>ImageSize... make sure Resample Images is checked, and then set the pixels (130Wx104H) in the Pixel Dimensions box.

    resize menu.jpgimage size.jpg

     

     

     

    Now, open the attached Banner.psd file [Note: This site won't let me upload a .psd, so I changed the extension to .txt.  After downloading it, change it back to .psd]

     

    Drag each of your images into this file to create a new Layer for each image. (Use the Move Tool to drag and drop)

    move tool.jpg

    You can do this by simply having the two image windows side by side, and litterly dragging from the image window onto the banner.psd window.

    drag.jpg

    Drag all six, and arrange them in the order you want. Positioning does not have to be exact, except for the one all the way on the left and the one all the way on the right.

    order images.jpg

     

    You should now have the layer from the origional Banner.psd file, and six new layers.

    Select all six of the new layers by holding the CRTL key down and clicking on each layer in the Layers pallette.

    align.jpg

    Then, select Align>Vertical Centers in the Tool Options Bar near the top of the window

    The select Distribute>Horizontal Centers from up there as well.

    distribute.jpg

    Now, add an outside Stroke (black border) to each image

    In the Effects pallete, select the Layer Styles filter, and then select Strokes from the pulldown.

    Drag and drop the Black Stroke 0.5 Px onto each of your images.

    stroke.jpg

     

    Now, arrainge the layers so that you have one of the included Photo Filter layers on top of each of your photos by simply dragging the layers up and down to get them in the right order.

    And, for the faded Color Left B&W Right effect, drag the Hue/Saturation layer up to the top.

    You should end up with something like:

    Hue/Saturation 1

    Photo Filter 6

    Layer 6

    Photo Filter 5

    Layer 5

    Photo Filter 4

    Layer 4

    Photo Filter 3

    Layer 3

    Photo Filter 2

    Layer 2

    Photo Filter 1

    Layer 1

    layers.jpg

     

    Where Layer 1 is that layer with your Photo 1, Layer 2 = your photo 2, and so on.

    You can play around with the effect of each Photo Filter layer by double clicking on the little circle that's half black and half white.

     

    Once you have it all as you'd like, save it for your web banner using File>Save for Web.

     

    There you go.

    Not too tough.

    Cheers

    Bob

    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Apr 28, 2009 11:40 AM

    So everyone can enjoy it, it's attached again to this response.

    Just click on banner.txt below, save it to your hard drive, and then rename it to banner.psd.

    Cheers

    Bob

     

    [EDIT: The banner.txt line below is currently showing Queued. Just scroll up to my origional long tutorial without the screenshots to get it.]

    Attachments:
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)