Log in

Previous Entry | Next Entry

This is a long, complicated tutorial. I assumed that you knew only the BASICS of icon making. Most of you know more, but there is always a tiny section. Uhm, there is a mini-tutorial within the bigger tutorial. Lots of pictures. Hope this helps.

1. Create a New Document, 1 x 100 pixels (width = 1, height = 100, 72 pixels/inch).

2. Magnify the picture twice (this step isn't necessary, but it is helpful). Click the fill bucket and fill the line with whatever colour you'd like. (However, for a more antique look, I'd go for black.)

3. At this point, you can zoom the line back to its original size. Go to Filter --> Noise --> Add Noise. I use Gaussian at 66.5, but it's really your choice. *IMPORTANT* Check the box next to Monochromatic. The line won't be scratchy enough if you don't.

4. Save the line as a .psd.

5. Open the icon you want to use. (Voila, Monsieur Dominic Monaghan.)

6. Save your icon as a .psd. (Trust me on this.) Whatever you save it as, add a one (1) to the end of it.

7. Create three NEW documents, 100 x 100, 72 pixels/inch.

8. Go to your original icon (which you will notice, is named dom1.psd). Press Ctrl A (which selects the whole picture), then Ctrl C (which copies the document fully).

9. In one of the new, untitled 100 x 100 documents, press Ctrl V (which pastes the icon into the new one). In the layers tool-bar, you will see two distinct layers.

10. Go to Layers --> Flatten Image.

11. Repeat steps #9 and #10 twice more, for each of the blank documents. Voila, four exact copies of the same icon.

12. *a little side tut*If you want a little border around your icon, for each of the four pictures, press Ctrl A, and go to Edit --> Stroke --> 1 px black, center.

13. Save each of the images as a .psd in succession. (So, for my tutorial, I have saved the documents as dom1.psd, dom2.psd, etc.)

14. Return to your neglected line (named scratchline.psd for the tutorial). Press Ctrl A, then Ctrl C.

15. Return to your first icon, and press Ctrl V (which pastes the line onto the image.)

16. *IMPORTANT* Go to the layers toolbar, and make sure Layer 1 is selected. Go to the drop down menu that says normal and choose "Overlay".

17. Use the move arrow to move the line wherever you please.

18. Repeat steps #15-#17.

*(Even though you can't see the lines, they're there.)*

19. Save the icon.

20. Repeat steps #15-#19 for each of the icons.

21. Open ImageReady and open each of the four icons.

22. Go to your second icon, and at the toolbar at the bottom, click on the small blue arrow in the circle. Choose "Copy Frame".

23. Return to your first icon, click on the same blue arrow and choose "paste frame". Make sure that the radio button next to "Paste After Selection" is chosen.

24. Repeate steps #22 and #23 for each of the other icons. Return to the first picture, and you will se that there are four frames in the animation toolbar.

25. On the icon, click the "optimized" tab. It will tell you the size of your icon (make sure it's under 40K).

26. *IMPORTANT* Go to File --> SAVE OPTIMIZED AS... Save your file.

This is what the end result looks like. Voila!


( 75 comments — Leave a comment )
Page 1 of 2
<<[1] [2] >>
Mar. 7th, 2004 01:54 pm (UTC)
this is the best lesson I've seen yet on here.

Thank you sooo much for the effort it took you put that together.
People like me appreciate it --alot.
Mar. 7th, 2004 02:22 pm (UTC)
Thank you so much for the compliment. I really tried my best.
Mar. 7th, 2004 02:06 pm (UTC)
wow! you go through a lot to get that effect! I just use animation shop and it has that as an option.. lol.. but thanks for the tut! v. Helpful!
Mar. 9th, 2004 06:28 pm (UTC)
*blinks* it is? *makes note to start playing around more in Animation Shop*
(no subject) - perfectsquare - Mar. 10th, 2004 01:12 pm (UTC) - Expand
Mar. 7th, 2004 02:08 pm (UTC)
in step #22, when i click on my image, the window under it with the blue arrow doesnt appear. what can i do about that?
Mar. 7th, 2004 02:25 pm (UTC)
You may not have the animation toolbar showing. If this is the case, go to Window --> Animation. If there is no check mark next to "Animation" click on it, and your toolbar will come up.
(no subject) - j0ci - Mar. 7th, 2004 02:27 pm (UTC) - Expand
(no subject) - sobota - Mar. 7th, 2004 02:31 pm (UTC) - Expand
Mar. 7th, 2004 03:58 pm (UTC)
Awesome tutorial! I've had trouble finding decent ones for Photoshop since a lot of people make theirs for PSP.

I also heard somewhere that there's a plug-in you can download from Adobe to add the effect also. Do you know anything about that?
Mar. 7th, 2004 04:13 pm (UTC)
If there is one, it costs money. Or you can search on google under "Photoshop plugins". I haven't heard; I do mine the hard way.
Jul. 12th, 2004 07:14 am (UTC)
oh wow! thats sooooo cool! thank you sooooo much! so easy to follow! yyyaaaaayyyy *so happy she managed to make something!*


Aug. 23rd, 2004 02:59 am (UTC)
Wow, thanks! It's great! My first animation! *G*
Dec. 12th, 2004 10:29 pm (UTC)
I love you. Thanks soooo mcuh!
Dec. 31st, 2004 07:56 pm (UTC)
will this only work with imageready?
i have psp, is that no good? :(
Jan. 2nd, 2005 08:50 pm (UTC)
Apparently, if you PSP and Animation Shop, there is an effect similar to this. I do not know the name of it, however, in Animation Shop, you right-click your icon and choose image effects.

Hope that helps!
Feb. 12th, 2005 11:26 pm (UTC)
hello :)
i just happen to go thru ur tutorial which is great btw :)
i just have one question.
i already finished but when i put Save Optimazied As the computer tells me that imageready doesn't save pgn and jpeg so only the selected frame will be saved =/
what do i do?
Feb. 13th, 2005 01:00 am (UTC)
Did you save each one of your icons as a .psd or as a .png or .jpeg? You have to save each file as a .psd.
Grrr. - smallraven - Jan. 6th, 2006 04:02 am (UTC) - Expand
Re: Grrr. - sobota - Jan. 6th, 2006 04:29 am (UTC) - Expand
Feb. 18th, 2005 12:49 pm (UTC)
omg, ive been trying to learn how to do this for months! i just happen to get really determined to find a tutorial that could help me and i came across urs, thank you so much, urs was extremely helpful! <3
Feb. 25th, 2005 08:55 pm (UTC)
ive been wondernig how to do that..thanks soo much for this tutorial!<3
Mar. 8th, 2005 11:47 am (UTC)
^^ Points to icon ^^ Thank you!
Mar. 9th, 2005 10:14 pm (UTC)
Awesome!! Thank you! Off to do one!

Mar. 13th, 2005 07:52 pm (UTC)
omg! thank you sooooooooo much. i made an icon using the tutorial:)

Image hosted by Photobucket.com
Mar. 14th, 2005 09:39 pm (UTC)
Thank you so much! I've been trying to work out how to make an animation for ages! Thank you!
.... is there any way you can change the speed of the animation? (I realise there's probably a really obvious answer, but I'm stupid!)
Mar. 15th, 2005 03:26 pm (UTC)

Underneath each frame, you can see the time of each frame (here, 0 secs.). Click the little arrow next to the time, and you can change it to whatever you would like.
(no subject) - aliphaunt - Mar. 15th, 2005 08:29 pm (UTC) - Expand
Mar. 16th, 2005 02:45 am (UTC)
Thank you for should a great tutorial.

I made this:

It didn't actually turn out all that well, but that is in no way a fault of the tutorial.

Thanks again!
May. 1st, 2005 09:49 pm (UTC)
Wow, great idea. I thought it'd be forever out of my grasp snce I don't use PSP, but this is neat and simple. Thank you!
May. 11th, 2005 08:08 pm (UTC)
Wow, thanks. I get lost in ImageReady, but this worked out great for me.
Jun. 4th, 2005 06:29 am (UTC)
Im pretty sure i did everything i was suposed to do, but it still didnt work. i just CANNOT figure this animation stuff out. and that tutorial was really well put! im a failure... *dies*
Jun. 4th, 2005 06:50 pm (UTC)
Don't every say that! If you want, you can email personally or IM me, and I'll take you through the steps once more.
Jun. 4th, 2005 07:17 pm (UTC)
ah! i fugured it out! yay! thank you!
Jun. 4th, 2005 07:41 pm (UTC)
Jun. 4th, 2005 09:39 pm (UTC)
Lovely, there's nothing wrong with that! You look like you followed the directions exactly.
Jun. 17th, 2005 06:48 pm (UTC)

WHAT DID I DO!?!?!?!
Image hosted by Photobucket.com

thenn i tried fixing it and i got...
Image hosted by Photobucket.com

Jun. 18th, 2005 07:58 pm (UTC)
It looks like you didn't make four separate icons, just four different layers on one icon. Make sure each icon is a separate one.
Jul. 9th, 2005 09:22 am (UTC)
hey im stuck at at step number 2.i cant seem to find the toolbar with the blue arrow in circle.help?thanks in advance.
Jul. 9th, 2005 01:01 pm (UTC)
You may not have the animation toolbar showing. If this is the case, go to Window --> Animation. If there is no check mark next to "Animation" click on it, and your toolbar will come up.
(no subject) - guava1406 - Jul. 9th, 2005 01:07 pm (UTC) - Expand
(no subject) - sobota - Jul. 9th, 2005 08:10 pm (UTC) - Expand
(no subject) - guava1406 - Jul. 9th, 2005 11:53 pm (UTC) - Expand
Jul. 11th, 2005 10:31 pm (UTC)
Thanks very much!
Wonderful! This is what I made
Image Hosted by ImageShack.us
I just added more frames. And I put the lines on exculsion. Looked more gentle.
Jul. 11th, 2005 11:40 pm (UTC)
Re: Thanks very much!
That looks lovely!
(Deleted comment)
Aug. 17th, 2005 03:47 pm (UTC)
I would use Darken or Multiply, or use dark red or dark green for the line.
Page 1 of 2
<<[1] [2] >>
( 75 comments — Leave a comment )

Latest Month

October 2015


Powered by LiveJournal.com