Creating a banner or button

L
Posted By
L._Velez
Jun 7, 2007
Views
339
Replies
13
Status
Closed
Hello,

I am trying out Adobe Photoshop CS3. I would like to be able to make buttons and banners (125×125 & 468×60) for web use. I know how to make a static button. How do I make one that does the following:

Text moves, flashes, scrolls across the banner, or blinks.

And how do I make it go from one phrase and picture to another…am I making sense? There are a couple 125×125 button examples on this page:

<http://www.homebusinessresourcedirectory.com>

Also, one I really like is if you scroll down to the bottom there is an image (468×60) that is purple with juice bottles on the left and a click here on the righ…it changes colors and words…

How can I make those? Is there a tutorial? Do I need Flash 8?

Any help is VERY appreciated!!

THANK YOU!! 🙂

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

DP
Daryl_Pritchard
Jun 8, 2007
Flash is probably well-suited to some of what you describe such as scrolling banners, but I’ve never used it and thus can’t tell you much about how to use it. But, the website you linked is using simple animated GIF files for some things, such as that Dream Vacations image that has 5 or 6 unique phrases cycling through. That is easily created in Photoshop using the Layers Palette and Animation Palette, the latter showing each frame as a composite of whatever layers are set visible in your Layers Paletted. Keeping it simple, let’s say there are only 3 phrases, "A", "B", and "C". So, you create 3 layers, each with one phrase on it, and a fourth layer with your main image.

Now, selecting Frame 1 of the Animation Palette, you set the Image layer and the "A" layer active. Then, generate Frame 2 and leave the Image layer visible but hide the "A" and show the "B" layer. Generate Frame 3 again leaving the Image layer visible but hiding the "B" layer and showing the "C" layer. Finally, select all frames and set the animation options to loop and to have a specified time interval between the frames. Save the result as a GIF.

I left out some details, but that is the basic idea. Hope it helps. You should be able to Google search for Photoshop Animation Tutorials and find some helpful info. I have some animation examples on my website at <http://www.ambress.com/photoshop/guitar_spin.htm> which may be of some help, although again the creation is not covered in great detail. The video about the spinning circle is probably the most useful.

The wine bottle image you mention is also an animated GIF but HTML coding also turns it into a link for button-like functionality. That part is all just done in the web page design software or manually coded. Photoshop is used only for creating the animations.

Regards,

Daryl
L
L._Velez
Jun 8, 2007
Hello,

THANK YOU for responding! 🙂

OK, I was able to make some frames and then play them…it was very basic, but I got that part…now, I cannot figure out how to get them to play when saved…

Do you know what I mean? When I saved it as gif and then looked at it, it was like a static button.

I may have missed a step…am I supposed to merge? I tried and it went to a checkerboard look…LOL

Any help is appreciated! 🙂
DP
Daryl_Pritchard
Jun 8, 2007
The problem you had in seeing the animated results of your GIF may have simply been with the viewer. I’m in Windows Vista at the moment, and the Windows Photo Gallery does not show anything but a static image, which I believe is also true of the Fax and Photo Viewer of Windows XP. Apart from the application you created the animation in (Photoshop), just drag the GIF into your web browser since it is intended to be used for the web anyway.

Most of what I do in Photoshop, I learn "on the fly", reading help files and tutorials as the need arises. Today, while trying out PS CS3 for builing another example animiation, I learned that my approach is unnecessarily complicated by having too many layers. That is, I have always created a separate layer for each "stage" of movement, opacity change, or other layer modification that I would then associate with a particular animation frame. Each layer was in turn hidden or made visible for a frame of the animation.

What I did today, was more efficient and plays off how each frame of an animation works much like a snapshot of the current working state of an image. So, rather than create multiple layers to achieve movement for example, you simply create an animation frame and show those layers which you want visible in the frame. Then, you generate a new frame from the current one, modify all visible layers or hide them as desired, then repeat the process.

I upated my web page with a new example, if you want to check it out. With your questions in mind, I added text that scrolls into the image and also fades out of it.

Regards,

Daryl
L
L._Velez
Jun 8, 2007
OK, so I tried putting in a browser and even on a live web page and still static…let me tell you what I do…

I made 3 frames with the text:

Fram 1
Frame2
Frame3

I set it so they come up one at a time. I can play it on the animation tool bar. Then I click on save file as…and choose gif…An indexed color window pos up…I just left it the way it was the first time then when I tried again I put "web" in the forced box. Then the next window that pops up is gif options…I leave it as normal…

I feel like I may be missing a step or not doing something with the frames…I mean I can see the animation when I hit play on the animation bar, like I said…nothing when I take it out of my photoshop whough… 🙁
DP
Daryl_Pritchard
Jun 8, 2007
Hmmm….I think I know your problem but have no explanation for it.

I tend to get into an almost instinctive habit of using Safe For Web when saving a GIF or JPG, that I didn’t give consieration to Save As being any different really. But, whether I did a Save As to GIF 87a or 89a format, both images were static images whereas using Save For Web and selecting GIF format did properly save the image as an animation. I would have thought Save As could be used for the same purpose but I don’t know what combination of options, if any, would save an animated GIF.

Daryl
L
L._Velez
Jun 8, 2007
ACK! I do not know what to do then?? Hmmm…I see no "save for web" ??
SS
Sugar_Sean
Jun 8, 2007
Try pressing [Alt+Shift+Ctrl+S]
DP
Daryl_Pritchard
Jun 8, 2007
Oops, sorry! I’ve got to remember to use CS3 lingo, now that Adobe changed that on us too. Save For Web (CS2) = Save For Web & Devices (CS3), or as Sugar said, Alt+Shift+Ctrl+S (A ripe keyboard shortcut for redefining!)
L
L._Velez
Jun 8, 2007
WHOO HOO! I did it!!! THANK YOU THANK YOU THANK YOU!!!!!

Can I ask another quick question? It is probably dumb…LOL

How do I make a border? Like if I just wanted a simple line around the square or something?

I am SO excited…it looks so cheesy…LOL…BUT…it’s animated!!
L
L._Velez
Jun 8, 2007
OK…I have another question…LOL…PLEASE be patent with me…I am trying to make another animated image…this time I want totally different words on each layer. Well everytime I try to go to the next layer it changes what I had on the first layer to the one I am working ono…

My first attempt was just adding new text with each layer…so I did not run into this…I tried to find help in the faq…no luck…
DP
Daryl_Pritchard
Jun 8, 2007
A line around any selected area, regardless of shape, can be created using Edit > Stroke, and setting the Stroke color, width, and placement (inside, outside, centered). You can also apply a stroke to a Layer via the Blending Options for the layer.

Your animation question sounds as if rather than going to the next layer, you’re actually going to the next frame, and changes to text layers do affect all frames in which they are visible. In fact, this led me to explore drawing changes as well, and they too are reflected in all animation frames making use of the layer on which they are created. So, going back to my earlier comments and how I often created animations using what seemed to be more layers than I actually needed, it seems that animation frames maintain the positional state of a layer, but not the content state. That is, if you move a layer from one frame to the next, that is retained. But, if you modify the image content of that layer, the content changes are visible in all frames where the layer is visible.

So, to get totally different words on each layer, you will need to create a layer for each different line of text you want to display. It is easiest, I think, to do that before you even begin creating the animation frames. Then, hide all text layers except that which you want visible for the first frame. Generate a new frame which will propagate the 1st frame’s content forward, but with that new frame selected, enable visibility for the next text layer you want and hide the unwanted text layer. Repeat that process for each subsquent frame unil complete.

Hope that makes sense,

Daryl
L
L._Velez
Jun 8, 2007
OK, you lost me…LOL…

Where should the "new" layers show up? In the animation box or the layer box? I am confused…

How can I ADD a new animation frame without copying the first one?

"hide layers" "enable visibility" what is that?
DP
Daryl_Pritchard
Jun 9, 2007
As often happens when trying to be helpful…I learn things along the way! 🙂 I don’t often make animations, so before I answer your questions, here’s a summary of what I learned (some book or help file would probably have told me this!):

1. Individual frames of an animation capture the positional state of a layer that is visible for that frame

2. Individual frames of an animation capture the state of the visible layer styles for a layer visible for that frame

3. Individual frames DO NOT CAPTURE the change in image content of a layer. Change in image content will be reflected across all frames for which the affected layer is visible.

Now, to your questions:

1. New layers will appear in the Layers Palette as you create them.

2. I’m not sure if a new, empty animation frame can be created. There is a "New Frame" command avaialble from the drop-down menu at the top right of the Animation paletted, yet I can’t tell how it really differs from the "Copy Frame" command. I didn’t explore this enough to learn the difference…I merely turn off what I don’t want in the new frame, by turning off the visi…

3. Visibility! The visibility option is controlled by the presence (visible) of the eye icon in the Layers Palette, to the left of the later. If you click the eye icon to remove it, the layer becomes hidden. Use of visible/hidden layers is worth learning about for animations as well as just general build-up of a complex image with multiple layers. If you apply layer styles to a layer, each style can also be set hidden/visible in a similar manner.

Hope that helps….and maybe this video I created will also: <http://ambress.com/photoshop/Animation_Demo_CS3> (8MB Flash Video)

Daryl

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections