[Tutorial] creating gif for your SIGNATURE

Creating or adding GIF for your Signature
I'm currently uploading anime to share here in this forum since i'm an uploader lol. And while waiting for the uploads I made a new tutorial. It's another gif tutorial. hope you guys can try it out :D

Thinsg you need:
1. Adobe photoshop
2. Nothing else

Alrights, let's start :D

Open your adobe photoshop.
Go to File> New
a window will appear.

In this window, you can change the name,preset,width,height and many more :D
for resolution, images on-screen typically need a maximum of 72.
and for the color mode, just make it RGB (i'm not really familiar with the color mode. you can ask the GFX staff if you want to know more about it since it's their profession. )
Anyway, for the size of the image, it's up to you if you want to change it now but i prefer changing the size later because i'm the type of person whose not really sure of what i'm doing. looool :D anyway, later on, i'll show you how to change the image size. XDDD

As you can see in the image below, the zoom level is 66.7%. please zoom it to make it 100%. why did we zoom it? well, for us to see the actual size of the image.


alright now, if our image is way too big. let's change it.
Go to image> image size
The image size window will appear.


just change the width and height the way you want. Just explore things! :D
i change the width of mine to 6. As you can see, the constrain proportions is CHECKED.
And when it is checked, once you changed either the width or the height, the other will change also. The reason is to constrain it's proportion. If you want to change the value of both width and height, just uncheck the constrain proprtion. Now if you're satisfied with the size, let's start typing:)

Click the type tool(it can be found in the tool bar)


As you can see, the settings for type tool appear below the menu bar. i believe your familiar with those settings.


now to start typing, click somewhere in the work area and just start typing. A new layer will be added in the layer panel. The name of the layer is the same with what you type.


if you're done with the typing, duplicate the layer. Press ctrl+alt+j to duplicate.
A window like this will appear. change the name to "blur layer" and click OK


As you can see in the layer panel, the duplicated layer is added. Now, right click the duplicated layer. Then click Rasterize Layer.


Now that the layer is rasterized, Go to Filter>Blur>Motion Blur.


This window will appear. Just adjust the distance the way you want it. And if you're done, click OK.



Yey! we'll now start the animation =))))

open the animation window. Go to Window> Animation.
The animation window will appear.


click the create frame button. A new frame will appear.


Now go to the layer panel. Find the small eye in the left side of each layer. the small eye is for the visibility of the layer. it's like a switch, you can turn it on or off. =))))

Select the first frame and go to the layer panel.
For the visbility settings for the first frame:


Select the second frame and go to the layer panel.
For the visibility settings for the second frame:


Alright, now that we're done with the visibility settings, click the "tween animation frames" in the animation window. Before, you click it, make sure that the second frame is selected.


A window will appear. Change the "frames to add" to 7. It's up to you on how long do you want to make it blurry. Then press OK.



You can see that there are frames added. We now have 9 frames. Now click the play button if you want to see the effect.

Now add, another frame.

We now have 10 frames. Select the 10th frame and go back to layer panel. Turn off the visibility of "blur layer" and turn on the visibility of "TEEEY layer"


Go back to animation window. Make sure that the frame selected is the 10th frame. and click again the "tween animation frames" button. Then click OK.



Click play to see the effect. :)) yeeeey! we're done!!!! HOORAY HOORAY! HAHAHA

Just save it.
To save, go to File > Save for Web and devices.


And a window like this will appear. Just click the save button and your done :)


Final Output:


I also made a signature.

Pardon the signature. I made it in a rush. Anyway, there's shikamaru :Cat Emote25: on it so its fine. loooool :D
i just made it to show how it will look on a signature.

Thats it. Thaaanks for your time =)
For questions, don't hesitate to ask :)

The one piece look cool

I have been starting creating GIF last day xD

Thanks for the tutorial!! It was helpful!!!

ashtig panu yun.

nawala adobe ko..nung na reformat yung pc ko...

shinigami44 wrote:nawala adobe ko..nung na reformat yung pc ko...

angeLucefer uploaded a portable adobe photoshop. here's the link : photoshop

:D

thanks a lot!!!

anyway..im always doing great..thank you..and i hope you too..^_^

and why is my username in your signature??hehe

Whoa! Nice tutorial. This will be a good helping hand for those who want to create their own signatures .boxsh

A Helpful Thread. But i failed to create a gif signature.

Akai Ringo wrote:

Do other Photoshop versions have this feature? Timelines and Video something?

Yes but I think it was renamed to Timeline from Animation. I think it's on CS3

Can u make video for this so its easier :D xD

Topic Moved: from Art Corner to Tutorials

Arigato

how do you make that background in shikamaru signature

Kirito-kun07 wrote:how do you make that background in shikamaru signature

you mean the green abstract background? i didn't make it. just found it inside the net. can't remember where.

How about the One piece Signature it got One piece Characters inside the letter how did you do that

Kirito-kun07 wrote:How about the One piece Signature it got One piece Characters inside the letter how did you do that

hello :) i created a simple tutorial about that here : inserting image inside your text

if you still have questions, i'd be more than willing to help :D

Arigato

thank you very much to your guide :)

its helps me alot in creating my signature

Nice tut!

if you don't have any adobe photoshop, you could use other application that can be downloaded free on the internet.

and there are sites too where you can create GIF image type. but it will only be as simple as it gets.