Create Animated Head Bar For Beginners using Photoshop and ImageReady

[hazemmostafa 0]

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 .

[hazemmostafa 0]

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

[hazemmostafa 0]

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

[threesix 0]

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

[dani2810 0]

Thanks^^

[Velvet 0]

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