Create Animated Head Bar For Beginners - using Photoshop and ImageReady

Hello ,

First of all this is for beginners only .

The simple way to create animated Head bar in a small size and easy way
Software used Potoshop cs and ImageReady
--------------------------------------------------------------------------------------
You will need to design a head bar for your new site to add a welcome or a company , site name ..... ,
If this head bar is animated it would be better look
also if you put it in all your your site page it will be the first thing to appear , will catch the visitors eye untill your page loads

so here are my steps to create a gif file 1584 pixels width , 216 pixels hight and the size of this head bar is 13.5 kb

Now lets start

First open Photoshop ....

Create a new file using the command New form File menu or just use the shortcut Ctrl+N
a dialoge will appear like this one in the image below
Name it and type the width and hight values
In this example width is 21 inches and height 3 inches and resolution 72 which is good for web graphics.




Now hit ok button to generate the new blank document .

And here is what you get on your screen


that is right a blank bar and if you look at the layers to the right you will see a Background with a lock ,
This is your new document which by the end of this will be you head bar .

Now let us type some words like your site name for example
to do this you will have to use type tool the T button in your keyboard or the small T icon in the left tool menu .....
Did you find it ?!
Yes this is the type tool now when you move your cursor over the blank document it will change to a small vertical line ..

Now click where you want to type and start typing you site name .



you can increase the font size or change the font by using the upper font menu dispalyed with the type tool in Photoshop ..

Did you notice that there is a new layer now a type layer has your site name in layers above the Background , this is the layer which contains what you already typed .

The next step is to make another condition to your site name like change the type color for example ,
which is simply one of your head bar seens ..

To do that you will have to duplicate the type layer you already have above Background

And to duplicate a layer right click on it and chose Duplicate layer from the context menu ...



Now you have another copy of the type layer with the name copy of site name above you first type layer

Now to make a change in this copy of type layer Photoshop gives you many ways .. ,

In this example will just change the color of it to red by useing Blending options .

ok now right click on the copy of layer and chose Blending options



and the Blinding options window will show in your screen .
Select Color Overlay to have your copy of text layer in red

You see that the text is now red .

 

 

 

Comment/Reply (w/o sign-up)

Now the job is done for Photoshop , lets go to ImageReady to animate these two layers and create our head bar



Click at the end of the tool menu to export your head bar to ImageReady .
This might take seconds to open the application and export your image depending on you computer and the size of your image

Now after the export operation is done from Photoshop to ImageReady you will see this



If the animation palette is not shown you will have to select it from the menu window and click on animation

You see now your image is shown in the animation palette as a frame with the number 1 on it .
To create a gif you must have 2 or more frames , to do that you have to duplicate frame 1 by clicking on Duplicate current frame



Now as you can see we have frame 2 which is a copy of frame 1 .

Now go to the layers and click on the small eye icon to hide the first layer - copy of layer -



That is it your are done
You just created your animation congratulations .......

Ahh You want to see it ?

ok go to animation palette and click on the play/stops animation icon



and look at the image swaps red and blue

Dont forget to save it

To save your gif go to File menu and choose save optimized as or just click Ctrl+Alt+Shift+S





That is it ....


here is the result of this example




Hints :

Try type more than a line or use other Blending Options , also add lines and backgrounds and start animate them as you wish

hope you like it


hazemmostafa

 

 

 

Comment/Reply (w/o sign-up)

Here are 2 more examples using more options and more frames to animate

Try doing them yourself


This is done by changing backgroud color to black and swap the text color between black and white



Another example here more diffecult using Blending Option Outer Glow and a type layer for each letter of the name then show them one after one to create the typewriter effect



Now show what you did in reply


Thank You



hazemmostafa

Comment/Reply (w/o sign-up)

this will be good for beginnners however i think i'm rather experienced at this sort of thing.

Comment/Reply (w/o sign-up)

Thanks^^

Comment/Reply (w/o sign-up)

Hi, this is my first time ever using photoshop, and this is my first lil project. I wanted to make a banner for a lil virtual shop I hold with my boyfriend on a forum we belong to, and this is what I came up with.



Is not the greatest but I think its a good start. I will keep reading your tutorials and hopefully get better with practice and time. Thank you very much for taking the time to help others <3

Comment/Reply (w/o sign-up)