In this tutorial, I will tell you how to make just such an animated avatar (100×120 pixels in size).
Step 1. Open the image on which we will work in Photoshop.
Despite the fact that the avatar we will have a small, 100×120 pixels. in width, we will start working with a larger image.
* the better the quality of your image, the better the avatar will turn out. For this tutorial, I used a 340px image. wide *
Now open a photo with fire in Photoshop (try to find the most suitable flame for our work).
Drag the flame to our document.
Tool Move (Move Tool (V)), click on the image with fire and, without releasing the left mouse button, drag the image with fire into our document (you can also hold down the Shift key so that the layer with the flame is located right in the center of the document during transfer).
Most likely, the fact that the flame image will be better than the quality of the image chosen for the avatar and its size will be larger, and after you drag the flame into our document, it will be huge and close the first layer.
To shrink this layer, use Free transformation (Free Transform(Ctrl +T)).
Since the picture is huge, the Transform frame itself is not visible. Reduce the image itself (using the Ctrl+–), until the Transformation frame is visible.
Then holding the keys Shift +Alt, pull (towards the center) by one of the points on the corner of the frame and reduce the image in size (keyboard shortcut Shift +Alt uniformly transforms the image without distorting the shape).
* return the size of the image Ctrl++*
Clear the flame from the background.
Being on a layer with a flame tool Magic wand (Magic Wand Tool (W)), click on the black background and click Delete, This is the easiest and fastest way if the flame is located on a uniform background.
Decrease Opacity (Opacity) layer with a flame, so that the flame would look natural on the fabric, I stopped at 74%. Then instrument Eraser (Eraser Tool (E)), with Opacity (Opacity) 20% erase a little at the base of the flame to give more realism, in the transition from fabric to fire.
With help Free transformation (Free Transform (Ctrl +T)) turn, reduce or increase the flame and, using Deformation, place the flame on the edge of the hood.
Apply the Transformation by clicking Enter.
You can erase a little extra (in your opinion) place on the fire.
Copy the layer with fire (Ctrl +J), apply to copy Free transformation (Ctrl +T), right click on the Transform frame, select Flip horizontally (Flip Horizontal). Place the second layer with the flame on the opposite side of the hood.
In the same way, applying Transformation, Deformation, possibly reducing the Opacity of the layer, removing something extra Eraser (E), Copying the layers, place the flame around the hood.
Add flame to the eye socket, and apply to these layers. Layer style – External glow (Layer Style – Outer Glow) (double-click on the flame layer in the eye socket so that a window appears Layer style).
Set something like this.
As a result, you get something like this:
Step 2. Select all the flame layers and click Ctrl +E, they will merge into one layer, name it Flame. Then apply to this layer Levels (Levels (Ctrl +L)) in order to make our flame brighter.
Now we will create a glow from the fire on the very skull and hood.
To do this, copy the skull layer (Background) (Ctrl +J). Take the tool Clarifier (Dodge Tool (ABOUT)), in the tool settings, set Range – Mid Tones (Mid tones), and Exposure (Exposure) – 20% and lighten up their hood and skull in those places, which in theory should be the light from the flame.
Apply to this layer Hue / Saturation (Hue / Saturation), check the box Toning (Colorize). Set the parameters there approximately as in the screenshot.
* name this layer Clarified*
Now turn off visibility to the layers: Clarified and Flame (by removing the eye near the layer thumbnail) and go to the Background layer.
At this stage of work, the sequence of layers will be as follows:
Go to the palette Channels (Channels).
By clicking on each Channel, select the one in which the transition between the dark and light areas is the softest. I chose Red channel.
Duplicate it (click on the Red channel and hold down the right mouse button and drag it to Create a new channel).
You will have a copy of the Red Channel. Being on a copy of the Channel, call the window Levels (Ctrl +L).
Adjust the sliders, approximately as shown in the screenshot (you need to ensure that the light areas become brighter, but at the same time, the border between light and dark is not very sharp).
Why did we all do this ?? In order to load the highlight selection, and using this selection, remove all the excess from the layer to which you previously applied Hue / saturation.
Holding the key Ctrl click on the channel Red (copy). You will have a selection, then click on the channel. Rgb (to make the image color again) and go to the Layers Palette.
Go to layer Clarified and turn on its visibility (by placing an eye near the layer thumbnail).
Invert the selection (Ctrl +Shift +I) and press Delete. All the excess will be removed, only the orange light on the light areas will remain. Deselect (Ctrl +D).
Copy this layer (Ctrl +J) In order to make it brighter, merge both layers by pressing Ctrl +E.
Go to layer Flame and turn it on visibility, copy this layer (Ctrl +J) and reduce it (copies of the Flame layer) Opacity somewhere before 60%.
Well, we have prepared our image in order to start making animation (as a result of all our work, you should have four layers).
Step 3. Turn off visibility to all layers except the very first one (Background).
Go to Window / Animation (Window – Animation). Perhaps when the animation opens, it will be in the form (Timeline) in order to go to Frames, need to click on the icon Convert to frame animation.
In the window that appears Animation (Frames), in the first frame set Frame display time0.1 sec. (by clicking on the inverted triangle near 0.10 sec.) just below, set Cycle parameters – Is always.
The first frame is ready, now go to the second.
Click on the icon Create a copy of the selected frames. Turn on visibility for layers (in the layers palette) Clarified and Flame.
Then click on the icon Creating intermediate frames and in the window that appears, in paragraph Add frames, put 2. Click YES.
Photoshop itself will create layers with a smooth transition, from the first to the second.
Add another frame (by clicking on the icon Create a copy of the selected frames) and turn on the visibility of the layer Flame (copy).
Go back to the first frame, and change it Frame display time on 0.2 seconds
Everything, our animation is ready to see the result, click on the icon Starting animation playback.
Step 4. Now reduce our animation to the desired size.
Stop the animation by clicking on the icon. Stop playing animation.
Click Alt + Ctrl +I (to bring up the window Image size).
Dimension by Width set 100px., height will automatically change click YES.
Avatar will decrease in size in order to make it exactly the size 100×120 pix., we take the tool Crop (C) and in the settings tool set Width100px and Height120px.
We stretch the frame framing, from the upper left to the lower right. Since our image is slightly larger than we need in height, in order to maintain the proportions, we will have to sacrifice a part of the image. Place the Crop frame in the center and click Enter.
* the size of the image of the avatar is specially increased several times in order to better show the frame of cropping *
If you go to the size of the image Alt + Ctrl +I, the size of our image will be 100×120 pixels, as we needed.
Save our avatar.
Go in Menu / File / Save for Web and devices (File> Save for Web). Make sure the save format is worth Gif, and Colors 256.
As a result, we got such an avatar.
I hope you liked the lesson and did not cause difficulties in repetition. I wish you good luck in execution.