::A/S Shop:: Tutorials/PSD/Textures Here - DT Note Pg 86

First Previous

Page

Next Last

Frequent Posters

Ramya

@Ramya_98

Sparkler

+ 7

Posted: 8 years ago

#501

@Tanika_11- That gif is lovely!

Edited by --Elara-- - 8 years ago

Quote

Ramya

@Ramya_98

Sparkler

+ 7

Posted: 8 years ago

#502

Tutorial #1

^And i do strongly feel that this would be the last one.😛

This is a very simple Username blinky tutorial and i am pretty sure most of you must be way better than me in this but i am still sharing it, ludicrous and lumpish, isn't it? So enough of blabbering here you go.

1. Open Photoshop and go to File>New. In the dialogue box that appears, set the height, width and other details as follows. I have taken a huge width of 400 px just in case the UN we're taking is long(We will be trimming it later) but you can take it according to the UN you want it for.

Alternatively, you can also try setting the background color to IF's BG color #F9F9F9 as below.

2. Having done this, you have a new document open before you. Start typing therein with the font, color and size of your choice.

Next, play around with the effects. You can try border or shadow effects. Here, i am using shadow effect since it gives a certain depth to our blinky. Adjust the settings as per your requirement.

3. Now, duplicate the text layer you have and change its color/effects as you like.

In case you are using the BG color as mentioned above, then you need to duplicate the background as well and lets call them BG and BG copy along with Text and Text copy. So now, drag the BG copy above the Text in the layers window (i.e, Change the layer order) and the Text copy above that and merge the layers BG+Text and BG copy+Text copy(Shortcut: ctrl+e) before proceeding to the animation part. (To select two or more than two layers, click on the first layer in the layer window then click on the last layer while pressing shift key) If you want more details on this, let me know. (I missed taking the screenshots for this and too lazy to go and take them again!😛)

4. Moving on now to the most interesting as well as crucial part, animation. Click on the little menu button on the top right corner of your animation window and then click on 'Make frames from layers'.

You will see that you now have 2 frames overlapped over one another.

5. Up next is setting the time delay of each frame. So for that, click on the little arrow head on the bottom of your frame in the animation window and set the time. I have used a delay of 0.5 seconds here but it totally depends on you. You can play the gif and check using the controls on the bottom of the animation window.

6. Once you are satisfied with your blinky, you can trim it. Refer the screenshots for details.

7. So now that you're done, its time to save your work. You need to "Save for web and devices" and with a '.gif' extension.

Your blinky is ready and it looks somewhat like this-

Tip: If you want a sparkle effect on your blinky:

1. Select layer 1. Then go to Filter>Add Noise. Adjust the amount settings and set distribution to Uniform.

2. Now select the second layer and follow the above steps as such, just change the distribution to Gaussian.

Play the blinky to have a better look. 😊

Quote

Looks like you are new here. Register for free, learn and contribute.

Tanika

@TC_FA

Trailblazer

+ 8

Posted: 8 years ago

#503

Originally posted by: --Elara--
<div align="left"><font color="#000000" face="Arial, Helvetica, sans-serif" size="2">
@Tanika_11- That gif is lovely!</font></div><font size="2"><div align="left"></div></font>

Thanks 😳

Quote

Madhura

@Madhura..

Stunner

+ 4

Posted: 8 years ago

#504

Elara- saw the tut now, simple and good, will try.

Guys, I have tried random icon textures, will like to see your results, if you use. credit always appreciated

Quote

Myraaa

@Myraaa

Navigator

Posted: 8 years ago

#505

Thanks Ramya, for the tutorial. I might give it a try some time. :-D

Madhura, I love the textures. I am downloading it. Will give you credit when I use 'em. :-)

Quote

Starwalkers

@Starwalkers

Rocker

+ 2

Posted: 8 years ago

#506

Texture Pack #2

Download Here

Edited by Starwalker. - 8 years ago

Quote

Starwalkers

@Starwalkers

Rocker

+ 2

Posted: 8 years ago

#507

PSD #4

Credit isn't necessary if you're using this in IF, but it's appreciated a lot!

Download

Edited by Starwalker. - 8 years ago

Quote

panchan

@panchan

Rocker

+ 2

Posted: 8 years ago

#508

Gif PSD #1
Credit isn't mandatory but highly appreciated :)

Download here.

Quote

Madhura

@Madhura..

Stunner

+ 4

Posted: 8 years ago

#509

Rosh- Psd looks creamy and mast.

Quote

EkNoKiNashedi

@Phir_Mohabbat

Trailblazer

+ 13

Posted: 8 years ago

#510

*I am posting this tut for feedback cause even I am not sure how to make gifs like this. Tips from you guys is much needed😛

Tut on this gif

Tried to copy (and failed😆) from this one

^^credit to someone amazing in tumblr

Too much frame and looks like it will take loadsa time, and yep you are totally right. It will. 🤡

Step-1 chosing the scenes

I did it with Tera rasta chodu na scene and IMO it didn't work perfectly cause the scene was too dark. Original Olicity gif one had light and dark scene, the car one was full of sun and both of their frames had silhoutte. This time I am chosing one dark and one light scene.

Now make the frames in both gif of same number, copy the frames of light one and paste it over dark frames. Setting lighten (or screen depending upon the scene).

Step-2 Erasing

Pocho pocho pocho. For both Tera rasta and upar wala gif I took the outline of characters in dark gif and started erasing frame by frame. For this click on frame 1, then click on layer 1, select layer mask, and start erasing the parts that are out of character outine. (The passerby lady, the railing for above gif). Don't take many frames, the patience will run away. Start small, like 12 frame or 15 frame.Both gifs I did was of 18 frames. Use the soft brush for erasing. After you are done play it two three times to check if its decent enough. If it's satisfactory then adjust timing, > convert to timeline.

Step-3 Trick

Now you can see though the light gif setting is lighten/screen it's not visible enough, right? So what we will do is convert the group to smart object, then duplicate the layer and put it on linear dodge. Now adjust the opacity accordingly, something between 40 and 60 % should be okay. Run it few more times to check.

Step-4 coloring.

Original olicity gif as you can see had bw, tera rasta wala had bw+color while this time I tried both. When you decide to make one part bw and other color just create a clipping mask over the layer. Mine wala look like this.