View Full Version : Animated GIF in a Photoshop layout?

01-24-2010, 11:23 AM
I'm pretty new to website building stuff.

I want to make an entire webpage layout in Photoshop CS4 and put it into Dreamweaver and turn it into a template for a website. I understand all of the slicing and importing stuff, but I want the image in the upper left corner to be an animated GIF. The image in the upper left corner would be the only animated part.

How can I put the animated GIF into the layout? Can I put it directly in using Photoshop and have it work properly after slicing? Do I have to put it over top of the layout some how?

Ideally, I would be able to create the layout as one thing including the Gif and slice it up from there.

I'd like to know how this can work beforehand because I'd rather not invest a lot of time into it, just to have it fail.

I'm sure some people would suggest Flash, but I have no idea how to use Flash, and I would prefer to use an animated GIF made in Photoshop.

I would really, really appreciate some advice on this. Thanks in advance.

01-24-2010, 11:28 AM
I understand all of the slicing and importing stuff

Then I'm afraid you need to forget everything you know. Read the FAQs here;


Basically you need to hand slice the images you need to create your layout and then build your HTML and CSS from scratch to make your page. Once you have done this you'll easily be able to add animated gifs to your heart's content.

01-24-2010, 11:42 AM
Thank you.

Yes, I understand that I have to slice it... I just don't understand how to get the GIF in there and have it look right.

Here's and example of a very similar idea... http://www.russabbott.com/
I know his was done in flash, but I'd rather use Photoshop.

When you say I can add gif after the slicing, would that mean I float them over the page in Dreamweaver? Or are you saying I need to hand code the page? There must be some way to use Dreamweaver?

01-24-2010, 11:53 AM
That's a nice, fun little graphic on that site. Good touch. If you have your banner image set as a background to a div tag, add the gif image you want to use and set some padding up to position it over the background. It can all be done with one div tag and CSS rule.

Dreamweaver is just a tool for making coding more efficient. You'll have to learn some code at some point.

01-24-2010, 11:59 AM
Okay, I think I'm slowly starting to grasp it. Lol. Thank you.

01-24-2010, 12:05 PM
You might find this useful before you go much further...


Avoid those, 'sobbing into your hands at 3 a.m.' moments.

01-24-2010, 12:18 PM
That's very helpful. I'm sad that exporting as HTML from Photoshop is considered a mistake. Lol. Most of my plans were based on doing that with editable areas for the copy.

Back to the drawing board, I guess.

01-24-2010, 12:39 PM
If it is any consolation, you should have seen my face when I checked the first website I'd spent days and days on in Firefox and realised I'd probably have to start again. We've all been there.

02-01-2010, 01:56 PM
Why was it when i clicked on alli50n's web link was i expecting to hear "Atmosphere, i love a happy party with an atmosphere"? '0)