Changing image for banner

[DavidC]

Hi all

Fairly novice website builder here! I would like to create a simple website banner that incorporates a changing image - so that say 4 different images are on a continuous loop - I guess it must be pretty standard stuff for most people! I have Adobe Photoshop Elements that I could use or would happily use any free downloaded software out there to do the trick.

Any help will be much appreciated. Many thanks.

David

[Fusion]

Assuming you’re using Photoshop Elements 7, although other versions should be similar, you can create an animated banner such as this:



I have created this --&gt;&gt; <font color="red">Short Video</font> &lt;&lt;-- for visual help as well as the instructions below.

I have assumed you have already created 4 images of equal sizes such as 600 x 173 @ 72dpi:

- - - - either - - - -

Drag and Drop Images as I have done in the video.
To drag and drop images:
1. Open the source images you want to copy and a destination image (new or existing image).
2. View all open images in the workspace (see video).
3. Click an image that you want to copy.
4. From the Select menu, select All or press Ctrl+A.
5. Select the Move tool.
6. Drag-and-drop the image on top of the destination image. When you release the mouse button over the destination image, the copied image is displayed on its own layer above the current layer.
7. Repeat until all source images are copied.

- - - - or - - - -

Copy and Paste Images
To copy and paste images:
1. Open the source images you want to copy and a destination image (new or existing image).
2. View all open images in the workspace (see video).
3. Click an image that you want to copy.
4. From the Select menu, select All or press Ctrl+A.
5. From the Edit menu, select Copy or press Ctrl+C.
6. Click the destination image.
7. From the Edit menu, select Paste or click Ctrl+V. Each image you add is displayed on its own layer above the current layer.

<font color="red">Note:</font> If you use the Drag &amp; Drop method, make sure the image is in the correct place in the new canvas.

You now have a canvas with the 4 images as layers in the one canvas.

Now go to Files -&gt; Save for Web -&gt; Check the ‘Animate’ button then go to the ‘Animate’ section. Click ‘Loop’ and adjust the ‘Frame rate’ to suit’. Try 2 seconds.

Click OK -&gt; Save to a location and give it a name.

Go to the save location and try the banner animation.

During the Save for Web stage, you can also experiment with different settings from the options.

I hope this helps you out.

[DavidC]

Thanks hugely Fusion. I will give that a go over the weekend.

[Fusion]

You're very welcome David.
Should you need any further help with your banner, you only have to ask.

[DavidC]

Thanks again Fusion. I've succesfully managed to put together an animated banner of images thanks to your superb step-by-step guide! I'm actually using version 2 - seems a bit old now!

I've tried incorporating the banner with bog standard text so that the banner still animates but with static text but so far no joy. The way I've been doing this is by creating a new file and inserting the gif banner and creating text, plus another static image (logo) but once I tell it to animate it, it just shows the static image and nothing else in the banner!

Any thoughts?

[Fusion]

Hi David



Try this very similar method --&gt;&gt; <font color="red">(See video)</font>&lt;&lt;-- of adding text to the original images:

1. Open the source images you want to copy and a destination image (new or existing image).
2. Create another image the exact same size as the source and destination image with a background colour. I have used white in this instance.
3. Type your chosen text into the new white image then use the Move tool to position the text.
4. From the Layer menu select Merge down.
5. Use the Move tool to drag the text and background to each of your source images and position correctly.
6. Use the Magic Eraser Tool to remove the white background then from the Layer menu select Merge down. Repeat for all of the images.
7. Drag as before the images with text into the blank destination source then go to Files -&gt; Save for Web . . . . etc as before.

[SteveC]

David / Fusion
I find this post very interesting and would like to go down the same route

I would like to ask Fusion if the same effect can be obtained using Paint.Net
as I can not afford Photo shop.

As Fusion has helped me before I know he will come up with the answer

SteveC

[Fusion]

Hello SteveC

I’ll try help you out if I can.

Paint.NET unfortunately can’t animate images but we have a way to do it for you.



First, download this animation utility --&gt;&gt;<font color="red">UnFreeze</font>&lt;&lt;-- which animated the above banner.

Unzip and save to a suitable location. If you have trouble unzipping let me know and I’ll put the program on my server for you to download from direct.

Assuming you have already created your images for your banner without any text in them and they are all equal sizes, open them all in Paint.Net and they will appear in the top right area and the active one in the main pane.

Select an image, anyone will do, and add a new layer to that image from the Layer tab.
In this new layer, use the ‘Type’ tool to input your text. You can change the font and size to your requirements. I’ve used SteveC in my video tutorial.
Position the text as you want it with the Move tool.

Go to Edit and Select All, then Copy.

Press the Enter key to Deselect each time your finished with the task at hand.

Now go to your next image, Add new Layer again, and paste the text into the new layer.

Repeat for all images and Save or Save As each one as a GIF -&gt; OK -&gt; Flatten.

Now navigate to the folder where you saved the images with the text included, then open UnFreeze,and drag them into the ’Frame drop’ area.

Check the Loop animation radio button and in the frame delay select say 100. This of course can be experimented with.

Now hit the Make animated gif button and give your new animating banner a name and a location to save it in.

Navigate to your saved location, D/click the file and there you have it. Hopefully you’ll have one animating SteveC special banner!

Here’s the --&gt;&gt;<font color="red">Paint.NET &amp; UnFreeze</font>&lt;&lt;-- video to help you along.

If your using Windows Media Player to watch it, press the Ctrl+Shift+S keys to slow it down a little.
To return to normal speed, press the Ctrl+Shift+N keys.

Hope this helps Steve.

Good luck.

[SteveC]

Thanks Fusion
I knew you would come up with the answer
Thanks again
Steve

[Fusion]

Pleased to help out.