Summary:

Text - Header Animated .gifs in Photoshop

    ●   Animated Text gifs are easy and fun in Photoshop.


Learn About:

Animation TimelineText & Font Blending Options

•   This tutorial is part of a series:

  •   302-rounded-corners-header-ai.htm   •   81_CSS_text-size_Dw.htm ~ OR ~ 04-clipping-mask-text-ai.htm  •   251_animated_text_ps.htm 

• This tutorial is part of Portfolio Project, We Can Be Heroes!, Art Genre and Other Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.

                           

Step #1: Open PhotoShop ~

Open a new document in PhotoShop approximately 600 x 175px …


Step #2: Text Tool~

Get the Text Tool or hit the keyboard shortcut letter (t) …

,

… click the canvas and type SOMETHING YOU CAN USE IN YOUR PROJCT!


Step #3: Select your Font ~

Select your text …

… click on Font Family in the menu bar …

… and set the size of the font here:


Step #4: OR - Go to dafont.com and Find a Font that Matches your Project ~

OR- go to http://www.dafont.com/ and search for a font that fits your project theme -

  •   For instance, if you want a text or font that looks Old, search for that at dafont.com.

OR

  •   If you want something that looks like Money, search for that. Get it?


Step #5: Dark background ~

You may want to add a background on a separate layer so you can see better …

You can remove that background later.


Step #6: Blending Options ~

Then go to: Layer > Layer Style > Blending Options …

Set your Outer Glow color to something that matches your color scheme …

outer glow color

Set your Outer Glow size to 2

outer glow size


Step #7: Duplicate the Layer ~

Right-Click the layer and hit Duplicate Layer …


Step #8: Click on the Outer Glow Layer Style ~

Double-Click on the "Outer Glow" layer style on the duplicate layer …

outer-glow-layer-effect

… set the "Outer Glow" size on the duplicate layer to 10.


Step #9: Repeat ~

Repeat the process as many times as you can, each time increasing the size by a factor of 5 …


Step #10: Animation ~

Go to: Window > Timeline and the Timeline window appears and click "Create Frame Animation" (if necessary) …

With Frame 1 of the animation selected, turn off the visibility of all your layers except the last one by clicking on the eye of each layer …

 

 

 

 

Leave the bottom one ON …

Step #12: Add New Frames ~

Click the little icon at the bottom to "Duplicate selected frames …"

… and with the Duplicate Frame selected …

… turn the visibility ON in the next layer up.

Create new frames for each layer.


Step #13: Reverse the animation ~

Once you've reached the end of your layers, now do the whole process in reverse - this time turining off the layer visibility as you add frames.

So it goes up and down …


Step #14: Play ~

Play your animation by clicking on the Play button.

plays animation

To speed up or slow down your animation, select all the frames by holding shift-key and clicking on the first and last frames.

Then click the seconds at the bottom of any of the frames.

frame delay

You probably want your animation to play quickly …

frame delay time

Also, set the number of times your animation plays, click here …

select looping options

… and set it to Forever.

forever


Step #15: Save for Web …

Go to: File > Save for Web … and save your work as a .gif …

gif

Hit

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

and put the file in the root folder of your project …

 


To view your .gif, right-click on it and open a web browser.


Step #16: Insert the animation in your Project …

Insert the animated gif anywhere you want the animation …

animated text

Step #17: Web Designers ~

Save the .gif file in the root folder of your project …


Step #18: Open your header Tag in CSS~

Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and Double-Click the header tag …

body tag

… select Background and attach the image.


Step #19: Background Position ~

Set Background-repeat to no-repeat

… set Background-position (X) to center

… and set Background-position (Y) to top or center.


Step #20: Background Size ~

Lastly, open styles.css by Double-Clicking your styles sheet.

open-styles-sheet.png


Step #21: Header Tag ~

Locate your #header tag. This is where you'll paste your code …

body tag code view


Step #22: Add Code ~

Copy the following code …


background-size: contain;

      

… and paste it in your header tag:

linear gradient body tag


Last Step: Save and Upload your site ~

Click on your root level folder and upload your site.

upload-site-dw.png

Attach the link.


Other Resources: http://www.youtube.com/watch?v=70F7V8eDNaM