[Tutorial] creating gif for your SIGNATURE

First topic message reminder :

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 :)

Tsundere13 wrote:What if inside the text is image and you want that image to be gif? Same pdin po ba yung steps? kasi nung na try ko sa image ayaw mag rasterize
Thank You Po ! :)

hola! i'm sorry for the late reply.:) here's the tutorial if you want to insert your image inside your text http://www.tnmaa.net/t5140-inserting-adding-image-inside-your-text

kung gif siya, same process pa rin naman. clipping mask pa rin ang gagamitin.
Una, open mo muna yung gif mo. Tapos create ka ng layer then lagay mo sa pinakailalim or sa last layer. Sa last layer mo ittype yung text. Make sure na naka-open din yung animation frames, tapos i select mo lahat ng frames mo and make your text visible to all your frames but please take note na nasa likod siya kaya hindi mo muna makikita. Then after nun, i-select mo lahat nung layers ng gif image mo at saka mo ipasok or i-clipping mask sa loob ng text then play mo na :D

about rasterizing your image, just right click the layer and click "rasterize type"
anyway, ano nga pala yung irarasterize mo? :D
if it still confusing, just tell me and i'll try to create a step by step tutorial about inserting a gif inside a text later.
Good luck :)

teeey wrote:

Tsundere13 wrote:What if inside the text is image and you want that image to be gif? Same pdin po ba yung steps? kasi nung na try ko sa image ayaw mag rasterize
Thank You Po ! :)

hola! i'm sorry for the late reply.:) here's the tutorial if you want to insert your image inside your text http://www.tnmaa.net/t5140-inserting-adding-image-inside-your-text

kung gif siya, same process pa rin naman. clipping mask pa rin ang gagamitin.
Una, open mo muna yung gif mo. Tapos create ka ng layer then lagay mo sa pinakailalim or sa last layer. Sa last layer mo ittype yung text. Make sure na naka-open din yung animation frames, tapos i select mo lahat ng frames mo and make your text visible to all your frames but please take note na nasa likod siya kaya hindi mo muna makikita. Then after nun, i-select mo lahat nung layers ng gif image mo at saka mo ipasok or i-clipping mask sa loob ng text then play mo na :D

about rasterizing your image, just right click the layer and click "rasterize type"
anyway, ano nga pala yung irarasterize mo? :D
if it still confusing, just tell me and i'll try to create a step by step tutorial about inserting a gif inside a text later.
Good luck :)

Sorry late din reply.
Yung irarasterize ko is yung image ni Aisaka.
Medyo confusing pa dn po :/

Thanks pala ! :)

Aw Tsundere ur Avatar is so Big please resize it i cant see replies!

Tsundere13 wrote:

teeey wrote:

Tsundere13 wrote:What if inside the text is image and you want that image to be gif? Same pdin po ba yung steps? kasi nung na try ko sa image ayaw mag rasterize
Thank You Po ! :)

hola! i'm sorry for the late reply.:) here's the tutorial if you want to insert your image inside your text http://www.tnmaa.net/t5140-inserting-adding-image-inside-your-text

kung gif siya, same process pa rin naman. clipping mask pa rin ang gagamitin.
Una, open mo muna yung gif mo. Tapos create ka ng layer then lagay mo sa pinakailalim or sa last layer. Sa last layer mo ittype yung text. Make sure na naka-open din yung animation frames, tapos i select mo lahat ng frames mo and make your text visible to all your frames but please take note na nasa likod siya kaya hindi mo muna makikita. Then after nun, i-select mo lahat nung layers ng gif image mo at saka mo ipasok or i-clipping mask sa loob ng text then play mo na :D

about rasterizing your image, just right click the layer and click "rasterize type"
anyway, ano nga pala yung irarasterize mo? :D
if it still confusing, just tell me and i'll try to create a step by step tutorial about inserting a gif inside a text later.
Good luck :)

Sorry late din reply.
Yung irarasterize ko is yung image ni Aisaka.
Medyo confusing pa dn po :/

Thanks pala ! :)

ay confusing pa din. sige i'll make a tutorial na lang maybe tomorrow:)
and i agree with kirito-kun. kidly resize your avatar. it's soooooo BIG . hahahha
and here i thought forumotion automatically resize the image for avatar once uploaded. well, i guess it's not. hahaha XD

I don't have a photoshop!!! How frustrating..

Accelerator wrote:I don't have a photoshop!!! How frustrating..

You can download the portable here in the forum. I think in the software section.

Cool.

YAY! been looking for this thanks!

by the way how to use the one i just made? :Cat Emote7:

iman30 wrote:YAY! been looking for this thanks!

by the way how to use the one i just made? :Cat Emote7:

how to use? you mean as signature here in this forum?
first, upload it in any image hosting sites. (photobucket,tinypic,postimage.org)
once done uploading, copy the direct link and paste it in profile>signature
:)

rajang07 wrote:Thanks for this. see my Text on my Ava.? =u=

yea. i can see it. your welcome :)
thank you too for using my tutorial :)

Can tou give me the link to download that adobe photoshop?

Thx :)

chuen13 wrote:Can tou give me the link to download that adobe photoshop?

Thx :)

here's the link to download photoshop. just choose either of the two :) have fun! XD
Adobe Photoshop cs6 (portable)-angelucefer

adobe photoshop cs6 full-psychoserum

Ayieee naexcite naman ako doon :D

kaso gamit ko po CS6 . . wala naman po ung animation sa window tab waaah help please :Cat Emote9:

waaah . . pero ang cool nun

moJajoJa wrote:Ayieee naexcite naman ako doon :D

kaso gamit ko po CS6 . . wala naman po ung animation sa window tab waaah help please :Cat Emote9:

waaah . . pero ang cool nun

if you don't have this part in your CS6 go to
Window(Alt+W)>Enable Timeline.
Click "Create Video Timeline"

Spoiler:

then

Spoiler:

Nice tutorial :)

johncarlo.estrada.1 wrote:

moJajoJa wrote:Ayieee naexcite naman ako doon :D

kaso gamit ko po CS6 . . wala naman po ung animation sa window tab waaah help please :Cat Emote9:

waaah . . pero ang cool nun

if you don't have this part in your CS6 go to
Window(Alt+W)>Enable Timeline.
Click "Create Video Timeline"

Spoiler:

then

Spoiler:

ayiee thanks much . . I'll try it this coming vacation ^_^
thanks po :D . . more power . . hihi

I'll ask na lang po for help kung pede :Cat Emote32:

Thanks Po d2 may nakuha na kong Idea!

How will you put the gif in your signature?