Animated GIF in a Photoshop layout?

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.
P.S. What I'm trying to do will look a bit like this... http://www.russabbott.com/ I'm aware that this is Flash, but I'm hoping for a GIF.

You put an animated gif into the layout the same way you put a static gif into the layout.
As I never let Photoshop create my layouts/pages for me, I can't really advise on that, but if you send your layout to Dreamweaver with the part you want as an animated gif carefully sliced into an entity of its own with a static gif in that position, you can go back in and substitute your animated gif for it afterwards.
And for heaven's sake, don't be afraid of "failure"...you're just testing your skills and if it doesn't work exactly as you think it will, you will have learned something.
Beth

Similar Messages

Can i open and edit animated GIF in Adobe Photoshop Touch?

Can i open and edit animated GIF in Adobe Photoshop Touch?

No, only regular static GIF images are supported. The desktop version of Photoshop does support this however.

How to open animated .GIF files in Photoshop CS3 and newer

Q: Since ImageReady is long gone from Photoshop, how can I open animated GIF files in Photoshop CS3 and newer?
A: File -> import-> video to layers.
In the dialogue box type "*.*" to show all file types.
Select your GIF file and which frames to import.
They will now be available in your animation palette.

Zeno
curt y, sorry for the late reply, I tried that but I doesn't work. I have to choose at least two files in the Load Layers window in order for the OK button to be available and then some action script uses the different files to make layers and merges them but not from the frames of the gif file. I can undo through the script to see what it did but it never accessed the frames of the gif file, just the first frame. Choosing "make frames from layers" in the animation palette only puts the original files into layers - that is only the first frame of the gif file.
I guess I'm out of luck with the 64 bit version of Photoshop as Zeno suggested :-(
What program would you people suggest for opening each frame from gif files?

Putting animated gifs in a Fireworks layout: What is the deal?

Ok I have scoured the help files.
Im not finding what I need to know.
I want to create a Fireworks layout with 10 squares that have photos in them that fade back and forth between one image and another, slowly.
I would imagine I can pull this off with animated Gifs.
Thing is, I can not figure out how to pull this off in Fireworks.
Do I slice up my layout and make each photo square a symbol, then give it a different state and tween between them?
And if so, how do you control that?
Or do I make animated gifs in Photoshop and drop them into Fireworks?
I tried this and the gif came in with 40 states and the animation looked ridiculously bad. Not smooth and way to slow.
Is there a decent video tut on how to make animations in Fireworks.
I havent found it yet (nothing on Adobe TV oddly)
I have a feeling this shouldnt be that difficult but so far, it is.
I also want to have a rollover in the same layout.
Is this asking too much of Fireworks?

Well, some time ago I also thought: Why not create a set of very complicated animated GIFs (using Fireworks, of course;-) and connect them to the HTML/CSS layer of the web design, and thus do with html/css and images things that are only possible with Flash and/or adavanced AJAX scripting.
I soon realised that this is not possible -- and in certain cases, not needed at all. Animated GIFs (+ an HTML/CSS layer) cannot substitute AJAX scripting or Flash.
Even more: Even if in some cases you can achieve a certain effect using only animated GIFs, this will be at the cost of very poor browser performance! Reason? Animated GIFs slow down browser performance, and a lot. Flash does not slow down performance in browsers so much. JavaScript doesn't slow down performance so much, too (although it depends).
Example: Put 100 animated GIF images inside one simple html page and watch your browser slow down terribly. Put 500, and it will maybe even crash! Even simple GIF animations sometimes slow can be seen to slow down when starting, and then at some point, their speed goes back to normal. And that's just one example...
In some cases, Flash is the correct answer to your questions. Well, I don't like Flash much, too, but for certain tasks there are certain tools.
Using very complicated animated GIFs instead of Flash is like using a set of 60 spoons instead one simple shovel... :-)
Just my 2 cents...
PS I don't create Flash content, but in the worst case, I can ask a fellow developer to help me...
PPS I would have created a demo with very complex Fireworks GIF animations only for the sake of pure art/pushing Fw to the limits; never in production:)

Animated GIF exported from Photoshop is blurry

I have an animated GIF, 400px x 400px, 150dpi. It looks fine in Photoshop, but when I Save for Web and export it, the GIF appears in the browser double the size and blurry. Even if I choose the export settings to be half the size at 200px x 200px, the GIF is still blurry. I thought a retina display might have something to do with it, but when testing on a PC, the GIF is still too large, even though it appears more clear.
What am I doing wrong here? I just want what appears in Photoshop to appear in the browser.

What aspect ratio are the photos in the slideshow? Have you tried cropping them to 3:2?
Happy New Year

Creating animated gif's in Photoshop CS5

I have created identical images in both Photoshop & .gif versions and can't get any of them to work
The images are saved in an 8 bit format. There are 8 layers. the largest version is 761px 760px.
When I get the dialog box for "save for web," no matter which version of the images I try, the animation choices are greyed out. I do not see a check box for "animate" like there is in my Elements 10 dialog box on another system. What do need to do to be able to save as an animation?

You need to ensure it's an animation in Photoshop's eyes.
An animated document is generally maintained with the frames in separate layers. For example, if you open an animated GIF, it may open each frame into a layer.
Make the Timeline panel visible (Window - Timeline).
If the animation doesn't show there, you may need to click the fly-out menu icon at the upper-right corner of the Timeline panel and choose Make Frames from Layers.
-Noel
Edit: Sorry, you said Photoshop CS5. In that version it's the Animation panel. Same panel, but renamed in Photoshop CS6 to Timeline.

Is it possible and how to open animated gif files in Photoshop CS4

I made a Google search and I found tips that Photoshop can open frames from animated gif files by using File->Import->Video Frames to Layers. But this menu is missing from Photoshop CS4 on the computer I'm using it. Searching this forum for "Import animated gif" didn't return any result. Any ideas?

Zeno
curt y, sorry for the late reply, I tried that but I doesn't work. I have to choose at least two files in the Load Layers window in order for the OK button to be available and then some action script uses the different files to make layers and merges them but not from the frames of the gif file. I can undo through the script to see what it did but it never accessed the frames of the gif file, just the first frame. Choosing "make frames from layers" in the animation palette only puts the original files into layers - that is only the first frame of the gif file.
I guess I'm out of luck with the 64 bit version of Photoshop as Zeno suggested :-(
What program would you people suggest for opening each frame from gif files?

Animated Gif file in Photoshop says 990kb, in the Finder it's 1.7mb. Solutions?

Can I see how large the file will actually be in the Save for Web dialog -- so I can set the lossy and settings appropriately? Why would the file double in size from what's indicated in the Save For Web dialog? What can I do to see the correct size before saving? Right now it's all trial and error.

mazz2000 wrote:
The best way to do it is go back to PS and place the navigation area in the design, i would make it 100% of the width and then re-slice the design making sure one single slice is the whole of this navigation area.
That would be the best way to do it while still using a table layout which in and of itself is not recommended, in large part for this very reason.
Every time you want to make a small change to the layout of your site, it will require re-slicing and re-generating code out of PS. You would be much better off taking the time to understand css layouts. Here is a good place to start to get the basics of css: http://www.w3schools.com/css

Complaint: Animated GIF, Photoshop CS4

I am a freelance print designer. Needless to say that I have upgraded to the Design Standard Edition of the Creative Suite 4. Still, some customers ask me to do their web banners, too.
Fact 1:
There is an animation palette in Photoshop CS4 Standard.
Fact 2:
You can create animations with that palette.
Fact 3:
You can save the animation as an animated GIF.
Fact 4:
Opening the animated GIF, you only get the first frame, so you cannot edit the animation or content inside the GIF.
Fact 5:
I need to alter a few animated GIFs which I created several years ago using Photoshop CS2. Due to a harddrive crash, I don't have access to the original layered PSD files any more.
Fact 5:
Photoshop CS4, the most advanced image editing tool on the face of the earth, is absolutely useless at this point, and I have to find freeware or shareware to do the job. Finding and purchasing this sort of software is MY time, and that is MY money.
Whatever drove Adobe to cripple Photoshop CS4 Standard, whatever drove them to expel the simple "Open Animated GIF" feature from Photoshop CS4, it was the wrong decision.
This, Adobe, is a customer complaint. Take it serious. There is competition, and I hear a lot about GIMP these days.
Frustrated,
Gero

I know this thread is getting on a bit now, but I do have the answers.
Quite simply, as far as I can tell, this cannot be done without Quicktime installed.
To open an animated gif in CS4 on a PC:
1. Go to File->Import->Video Frames to Layers
2. In the File Name box type “*” ( or you can type the name manually) The window will now show every type of file
3. Select your gif and you are done
To open animated gif in CS4 on a MAC:
1. Go to open, select your GIF, then in the bottom left corner of the open file dialogue box select Quicktime Movie as the format, then open your GIF.
2. You’ll need to open your animations window by going to window -> animation. This will bring up the time line.
3. If you want to have all of the frames broken up into layers, click the options in the animation window, and select “Flatten Frames into Layers”.
This will give you access to all the frames as layers and you can now edit the GIF as though it was a movie.
I hope this helps to ease somebody's frustration.

Import animated GIF from Photoshop?

I have a question... I am unable to create custom animated gif's in Photoshop 5/6 and import them into Captivate 7. It just says "The GIF file contains errors". I've tried exporting on multiple settings and still no luck, same with exporting from Fireworks.
I am however able to import an exported gif from Flash, yet the quality is horrible and the transparency is buggy. Is anyone else having this issue, or is there some setting that I am missing? Basically I need to animate some images within a Captivate project, without the need of using a .SWF (for HTML5 output). Any help would be much appreciated, thank you.

I experienced this issue with Captivate 8 and Photoshop CC...
I eventually realized if the animation has any frames with "no delay" I would get the error. Changing those frames to a 0.1 second delay resolved my issue. Not sure if this is the same bug you are experiencing but it's worth a try!

Animated gif only plays one time??

An animated gif created in Photoshop and exported with 'loop forever' output only loops once on my home page. I have not resized, cropped it or added any effects but as it plays once Muse can't have rasterized it.
I am using adobe muse cc 7.1 build 329, OSX 10.9
the lilly in the top left gif image should animate continuously. - jimmymcgilchrist.comhttp://www.jimmymcgilchrist.com/index.html
any assistance appreciated.
Jimmy

Hi DrStrik9,
Thanks, I just tried it directly in the browser and it works fine. When previewing in the finder window on my desktop it works fine as well.
I have had animated gifs working fine previously on the same muse site as a browser fill and as buttons.
Nothing has changed about the way I make the animation but these are some variables that have changed:
- update Operating System from OSX 10.8 to 10.9
- udate to current muse version
- switch from Godaddy - wordpress hosting to Adobe Business Catalyst
- upload via 'publish' within muse rather than via 'upload to FTP host' within muse.
Thanks,
Jimmy

Animated GIF with Flex

Hi all,
I designed a animated GIF image by Photoshop. And now, I want to add it into my web application. I referenced from
http://www.bytearray.org/?p=95
http://iamjosh.wordpress.com/2009/02/03/animated-gifs-in-flex/
Have I must to download the AS3 GIF Player Class to use my animated gif with flex ?? Has Flex 3.0 support animated gif that I not need download that libriary ?
Thanks !

Anybody help !!

Animated Gif files in Captivate

I have created an animated GIF file in Photoshop that i want to use in my captivate file.
The file wont preview in any of the preview modes other than the HTML5 output preview. All other previews just show the first frame of the GIF file.
If i chose to SWAP the animation with another GIF from the library the preview shows the animation playing.. see attached
Is there something im doing wrong here.
I guess i could upload my final file to the LMS with HTML5 output as this preview shows the animation but i also read there are limitations with this output as some transitions / effects dont work.
Any help would be greatly appreciated.
Thanks
Darren

Hi Darren,
Yes, you can verify whether your GIF would fucntion correctly on HTML5 platform by Window--HTML5 Tracker Pod.
I am not an expert on Photoshop, but still would like to make a recommendation.
Set the 'delay' value for each of your Frame to 0.01 or some value if it shows as 0, this can be done using the animation frame Window. Save it as GIF again for Web Devices and import in Captivate, see, if you are abale to preview this time.
Thanks,
Anjaneai

Animated .gif in HTML article won't upload

Hello!
I have an article built with HTML; although largeish and complicated (js, video, blah blah blah), it imports from the Folio panel just fine.....until I put the animated .gifs back into the layout.
With animated .gifs, the folio panel spins (slowly) at the "building" bar, runs the CPU load up to 50%, and never ever does anything else. (I've left it overnight even.) The web Folio Producer will show an article with an alert: "Corrupt layout. Delete and try adding article again."
I've made a stripped-down HTML page with a single .gif and it fails just as hard.
Anyone else noticing this? How do we get this to work? Expensive project is on deadline...
Thanks!!
-Miriam

Please share the folio with [email protected] and let me know what page within what article is causing the crash. I also need to know what version of InDesign is being used, OS and version, what version of the FOlio Builder panel and if you are on CS5 or CS5.5 what version of the digital publishing plug in.

Splash page with animated gif only question

Hello all:
I have a splash page (index.html) that is designed using an animated gif created in photoshop. The rest of my site is Css/XHTML, but has some divs containing animated gifs. I have two questions;
1: By using only the animated gif on the splash page, am I limiting or hindering my SEO (google, microsoft, yahoo) ranking opportunities as there is no "content" on the page that the spiders/bots can see? I went ahead and included some "content" but hid it by coloring the type the same as the background color hoping that might do something, but obviously I'm a SEO newbie so any suggestions are more than welcomed. I will include the code at the end of this post, and my site is: http://reynolds-marketing.com.
2. Is there a way to pre-load the animated gifs on my pages so that they play more smoothly and efficiently?
TIA for any of your help. Murman
The code for the splash page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reynolds Marketing - The Marketing Resource Source</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Reynolds Marketing is a marketing services company offering a full spectrum of marketing services including: consultation, creative, production and logistical marketing services headquartered in Temecula, CA." />
<meta name="keywords" content="Reynolds, Reynolds Marketing, marketing services company, marketing services agency, full spectrum of marketing services, full service marketing agency, marketing consultant, print creative, digital printing, offset printing, website design, website development, digital marketing, digital print on demand, DPOD,Video Production, Video Production, Direct Mail, Temecula, powerpoint presentations" />
<link rel="shortcut icon" href="http://www.reynolds-marketing.com/favicon.ico"/>

<style type="text/css">

</style>

</head>
<body bgcolor="#FFFFFF" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" id="index_" style="background-color:#FFFFFF;">
<p>

<img src="images/index.gif" alt="" width="640" height="480" border="0" usemap="#indexMap" id="index" /></p>
<p>Reynolds Marketing offers a full spectrum of marketing communications services including: consultation, creative, production and logistical marketing services located in Temecula, California. Our services include marketing consultation, press relations, public relations, copy writing, print creative, direct mail creative, video creative, web creative, interactive creative. Print production, direct mail, video production, web page creation and production. Digital print on demand, fulfillment services, powerpoint presentations, marketing communications, marketing communications conformance. To find out more about our services, please go to <a href="http://www.reynolds-marketing.com/who_we are.html">http://www.reynolds-marketing.com/who_we are.html</a> . </p>
<p>Site map:<br />
<a href="http://www.reynolds-marketing.com/index.html">http://www.reynolds-marketing.com/index.html</a><br />
<a href="http://www.reynolds-marketing.com/who_we_are.html">http://www.reynolds-marketing.com/who_we_are.html</a><br />
<a href="http://www.reynolds-marketing.com/contact_us.html">http://www.reynolds-marketing.com/contact_us.html</a><br />
<a href="http://www.reynolds-marketing.com/what_we_do.html">http://www.reynolds-marketing.com/what_we_do.html</a><br />
<a href="http://www.reynolds-marketing.com/services.html">http://www.reynolds-marketing.com/services.html</a><br />
<a href="http://www.reynolds-marketing.com/clients.html">http://www.reynolds-marketing.com/clients.html</a><br />
<a href="http://www.reynolds-marketing.com/projects.html">http://www.reynolds-marketing.com/projects.html</a><br />
<a href="http://www.reynolds-marketing.com/news.html">http://www.reynolds-marketing.com/news.html</a></p>
<p>
<map name="indexMap" id="indexMap">
    <area shape="rect" coords="296,434,342,444" href="who_we_are.html" />
    <area shape="rect" coords="228,451,286,461" href="who_we_are.html" />
    <area shape="rect" coords="296,451,353,461" href="what_we_do.html" />
    <area shape="rect" coords="364,451,416,461" href="contact_us.html" />
</map>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</p>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8703884-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

My guess is yes, but that is just my opinion. I believe the text/background same color idea was really in vogue back in the late 90's and we all heard that it was the kiss of death for SEO that the SE's hated them so much you got de-listed, not sure if that is a fact or not.
My bigger concern would be how many people you are losing by making them wait to get to where they want to go. I have told many a client that in some sense, the interent is too big, you have too much competition and people have thin patience for things like splash pages. The ooo and aaa effect of animated gifs is long dead...again, in my opinion.
I dont know the answer to your load question...
Gray

Animated GIF in a Photoshop layout?

Similar Messages

Maybe you are looking for