Log in

No account? Create an account
Doccy's Graphics [entries|archive|friends|userinfo]

[ website | personal LJ ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Tutorial #011 [Oct. 15th, 2008|12:53 am]


[Current Mood |pleasedpleased]
[Current Music |The Domestic Fxxcker Family - Dir en grey]

Last night mangasakira asked me whether I could teach her how to make an icon similar to the one I'm using right now *points at icon above*. And since I'm feeling generous I decided to share it :P And now I present you yet another tutorial, which I'm hoping is as easy to follow as the ones I had written before.

How to put an animation over an icon.
Like this one:

First things first:
You need your icon base.

To make that, all you have to do is to have a general idea on how you want your base and animation to look like by the time you're done. After you figure that one out, you start making your base. That could be a simple 100x100px crop, or a nicely made icon.

I'm going for the nicely made icon ^__^

Adobe Photoshop CS2
1- Crop your image to 100x100px and sharpen once.

2- Dublicate, set the layer mode to Soft Light, and desaturate (ctrl+shift+U)
* if the desaturated image is too dark (you can see how it looks on the layer palette) then play with the layer adjustment: Image>>Adjustments>>Brightness/Contrast. Brightness: +29, Contrast: +37

3- Dublicate the soft light layer, and set it to Screen. Set the opacity to 20%.

4- Create a new layer, fill it with #f4ffe8 and set it to Color Burn.

5- Create a new layer, fill it with #e8f7ff and set it to Color Burn.

6- Create a new layer, fill it with #011925 and set it to Exclusion.

7- Duplicate the screen layer and pull it to the very top of the layer palette. (above all other layers)

8- Press ctrl+shift+E to merge all layers into one. This will be your new base for now ^_^
before -
after -

9- Double click on the base layer, and it'll pop up a little window called "New Layer", just click OK. It'll remove the little lock that you can see on the layer. And by default, your "Background" layer will be named "Layer 0". You can change the name if you want to.

10- Create a new layer, and start the brush/texture play. I only used one brush for this. (If you want to use more than one brush, do it now before proceeding to the next step).
(I don't remember where I got this one from. It was either LJ or DA. If you recognise it, please let me know so I could credit. The brush file name is: 080915-neke at ecenoci.abr)

11- Grab the Magic Wand Tool (or simply press W) and click on the parts of the icon that you want to delete.

12- Select the base layer, and then press delete on your keyboard. You'll see that it removed parts of the icon. These will remain transparent when we're done with the whole thing.

13- Press ctrl+D to remove those little selection dots. If you want to add text, this is the time for doing so. Create a new layer, add your text, prettify it the way you want.

Your icon base is now ready. Merge the layers (ctrl+shift+E) and save it as .psd (!!!!!!!!! use SAVE AS so you wouldn't accidentally ruin your original base image !!!!!!!!!). Now minimize that file, and go find the image sequence for your animation. (You should've done that waaaaaaaay before you started making the icon. duh! :P)

Moving on to Adobe ImageReady CS2
1- Open the program! ;D

2- Go to: File>>Import>>Folder as frames. (You'd better have your screencaps put together in a separate folder ^^) This will open your images into one file, and will create the animation frames, which saves you tons of time and effort ^_^

3- We're going back to photoshop because that's where the magic happens ;D Press shift+ctrl+M to move the newly opened file into photoshop for further editing ^_^

Aaaaaaand we're back to Adobe Photoshop CS2
1- Get your animation palette. Go to Window>>Animation.

2- Crop the images to a size that's small enough for your icon. (I used 54x42px)

3- Sharpen the layers. To do that, first select the frame on the animation palette, and then select the corresponding layer on the layer palette and then sharpen. Do that to all frames/layers. (the corresponding layer will have a little eye next to it)

4- Go to Image>>Canvas Size and set the size of the icon and the position of the animation.

5- Go to the previous file (the base icon) and copy it into the new file (the animation).

6- Drag the new layer to the very bottom of the layer palette so it'd be placed underneath the animation.

7- Now, because I don't want the animation to be exactly at the icon border, I'm going to move it. Do this step carefully, so when you're done, your animation frames wouldn't do random displacements.
*Select frame #1, and then the corresponding layer. And then select the Move Tool or simply press V on the keyboard. Now, move the layer using the keyboard arrows. (Five times upwards, and five times to the right)
before moving the frame -
after moving the frame -
Do that to all the other frames/layers.

This is how the icon will look after you're done:

8- Now, we can leave it at that, but don't you think that the little animation deserves a little frame to make it look better? ^^ Exactly. We're gonna make a frame for it. Select the Rectangular Marquee Tool or press M, and right click on the icon. Choose Load Selection from the little menu.

Note that you have the last frame AND layer selected (the one on the far right in the animation palette, and the one on the very top of the layer palette)

9- Click OK on the window that will pop up.

Your selection should look like this now:

10- Create a new layer (it should be placed on top of everything else.)

11- Use #d2dcde as your foreground color (that will be the border color)

12- Go to Edit>>Stroke, and set the width to 2px, location: inside.

13- Press ctrl+D to remove the selection dots. Then select the first frame and the animation border layer.
This is what we have so far:

14- Right click on the animation border layer and choose Blending Options. Give it an outer glow. (the color I chose for the glow is #cfd4d0)

This is what we have so far:

15- Now, all we need to do is to save the icon! To save it as an animated .gif, go to File>>Save for Web and save it as GIF. You can check the file size before saving so it'd be LJ compatible (reduce the colors and it'll reduce the file size. BUT that will cause some pixelation. Better do the color reducing in photoshop by an adjustment layer (Hue/Saturate) and place it on top of everything else. Black & white icons might have smaller sizes, depending on the number of the animation frames you have)

And this is the finished icon ^__^

And I've got a little extra for you =3
A zip file containing the PSD's and the images I used ^__^v

If you have any questions regarding this tutorial, don't hesitate to ask! ^__^

Have fun and enjoy making pretties! 8D

[User Picture]From: mangasakira
2008-10-15 11:51 pm (UTC)
thanks for taking the time for this, I appreciate it so much <333

as soon as I've got some time, I will try it out, k? I'm really curious what I'll come up with XD
(Reply) (Thread)
[User Picture]From: scwolf_10k
2008-10-15 11:58 pm (UTC)
It was my pleasure <33333

I'm very curious to see what you'll come up with! xDDD
(Reply) (Parent) (Thread)