MINI.MOVIES MINI.GUIDE
((sorry for the previous post, I completely forgot about a rule.))
animations
info
Photoshop CS3
(or cs/cs2 + Image Ready)
Windows Media Player
FRIENDME
THERULES
MYRESOURCES
If you're here for the perfect tutorial step by step for making that icon, this is the wrong place. It's more a guide, so you can have your style and make amazing animations.
This tutorial is divided into 3 parts, so everyone can choose what to read and what to skip. First part will teach you how to do your own screencaps and crop them for your minimovie icons, the second one explain what I did for my own spn icon such as coloring and texturing, and finally the third one is for saving your animations in the right way. As usually, I'm sorry for my poor english, I just hope I'll be able to explain myself. :D
0.TOOLS YOU NEED:
Photoshop CS3 OR Pothoshop CS/CS2 and Image Ready
Windows Media Player (optional).
Little explanation about programs.
The best program for iconizing is PHOTOSHOP CS3, since the animation tool is very simple and you don't have to open another program. I use it, and I'm comfortable with it. I'm aware there's a lot of programs out there for animations (Animation Shop Pro, just for example) but I tried everything and PS-CS3 works better.
If you have an earlier version of Photoshop you can still animate your images, but you need Image Ready, that is a program that come with Photoshop. Briefly, the animation tool that CS3 presents on his menu is basically Image Ready embedded into the major program, so you will not have so many problems with this tut, even if it's thought for CS3 users.
1. HOW TO MAKE YOUR OWN SCREENCAPS for a minimovie icon
Speaking about photoshop CS3, you have two possibilities: you can do the caps on your own, using the ALT+STAMP combination on the keyboard (frame by frame) or you can ask Photoshop to do it. I usually prefer the first option, since I like to see what I'm capping and I've always 90% of possibilities my Photoshop crash down with the other way. You just try and find out what do you prefer for your work.
- FIRST OPTION: CAPS FROM WINDOWS MEDIA PLAYER (manual)
If it's your first time with WMP screencapturing, you need to do a thing you'll probably not asked to do again in the future.
Open your video with Windows Media Player then go to Tools menu -> Options -> Performance -> Video Acceleration and set the value to 0. That will give you the possibility to actually take screencaptures with your keyboard. (Sorry, text on images is in italian for WMP, can't do otherwise).
Pause the video, then go to View -> Enhancements -> Play Speed Settings. WMP shows you a menu controller by wich you can watch the video frame by frame. Just try: click on the right arrow, the image should change into the next frame. This tool is always usefull, even for static icons.
Now, when you're ready you can start the capping. On your keyboard click ALT+STAMP then open Photoshop and create a new document. This new document should have the same number of pixels of your screen, so usually it's something like 1440x900 or 1280x1024, it depends on your screen.
Btw, when you've got your new document, just choose PASTE (CTRL+V). You should have something like this:
Now go back to WMP and click on the right arrow, move forward the video (3 frames) then click ALT+STAMP again. On Photoshop, PASTE the new screecap above the first one, since you'll need ONE DOCUMENT with multiple layers (about 15). When you're done you'll have ONE document with about 15 layers, ordered from the first to the last (so, if the first screencap is on layer 1, the 15th wil be on layer 15).
Go to Windows -> Animation. That' really similar to a Image Ready file, if you feel comfortable with it. In the box you can see, click on the "Duplicate selected frames" tool and you'll have two ideantical frames.
Now, be carefull.
- On the first frame, you must have on your layers palette the whole amount of levels, but they should be all invisible except for the FIRST one, the one with the first screencapture you made.
- On the second frame, the same thing but the only layers visible will be the SECOND one.
- And go on with that. Duplicate frames, change visibility of layers.
Once you've done it, you'll have your animation frames (you can check the animation by clicking the play button). Just crop it 100x100 pixel (72 dpi resolution).
SECOND OPTION: CAPS WITH PHOTOSHOP CS3 (auto)
Go to Windows -> Animation. That' really similar to a Image Ready file, if you feel comfortable with it.
Then choose File -> Import -> Video Frames to Layers and pick your video. A dialog box will pop up. (Usually, it's here Photoshop crash, so if you survived this step, you'll gonna be safe, I hope). Now, you can choose if you want to screencap the whole video or just a part of it, choosing between "from begining to end" or "selected range only". I suggest then to check the "limit to every __ frames" and to write 3, that means you'll have a capture every 3 frames. Obviously, since you're gonna make a minimovie check "Make frame animations". Now, you should have a screencapture for every layer of the document Photoshop created, you've just got to crop it 100x100 pixel (72 dpi resolution).
2. ADJUSTMENTS AND TEXTURES
Now it doesn't matter how you did your screencaptures, we've got a SINGLE DOCUMENT, divided into multiple layers (about 15) and with the animation bar with the same number of frames (so, if you have 16 screencaps, you'll probably have 16 frames, right?).
On the animation toolbar, click the arrow in the top right corner. From the menu choose "Select all frames."
Now, click on the arrow next to the word ".sec" you can find underneath any of your frames (doesn't matter wich one). Now, if you want, you can choose 0.1, that's usually good for animation. Usually, if you took a screencap every 3 frames, you need to multiply 3 for 0.4 (it's 0.12, near to the 0.1 I choose). If you'd choose to screencap every 2 frames, then -> 2x0.4= 0.08 and so on.
You'll probably need to sharpen you layers, so I suggest to select all you frames (on the animation toolbar, click the arrow in the top right corner. From the menu choose "Select all frames") then select the first layer and go to Filters -> Smart Sharpen and choose your values. Then select the second level, click CTRL+F and so on for every layer. You'll have the same sharp on all you layers.
Speaking about coloring, my icon is B/W, so it doesn't need special coloring, just some levels and curves. It's not a big difference, anyway, because every change you want in your icons should be done with adjustment layers, for both b/n and colors.
So, now you can act like you're working on a static icon (just be sure all your frames are selected, it's easy to lost something!), then use Layer -> New Adjustment layers -> Selective Colors/Curves/Color Balance...
[[[ If you choose the b/w style, transform your image into a grayscale one (Image -> Mode -> Grayscale) since it's lighter. ]]]
If you want to use textures, be sure you'll have them on top of everything (with all frames selected). I used some foggy textures by InnocentLexys you can find here. For the text too, it's basically the same thing. Just think you're working with 15 backgrounds at a time, instead of just one as in statics. Foe every frame you've got all the layers, but you can decide to use just one of them by make the others unvisible, so, for example, if you want the text just in the last frame, make his layer visible just there.
3. SAVING ANIMATIONS
Here we are, the most annoying part :D Livejournal accept 40 kb icons. So, animations, which are basically 15 icons stuffed together, must be compressed a lot, so don't you expect a great resolution icon, 'cause it will not be.
Firs, the extension must be .GIF, because if you choose something like JPG or PNG your animation will not move at all.
When you're done, with your image, don't click on SAVE AS. We need the SAVE FOR WEB & DEVICES tool. In the dialog box, you've to choose GIF-32 where 32 are the colors of you icon. Then, you can choose to change the Lossy to lose weight, till at least 39.9 kb. Just play around with values, try deleting a frame... it's up to you. Usually, Lossy 25% it's the most we can afford.
I hope everything is clear. If it's not, please, ask me everything you want. I'll try my best.
animations
info
Photoshop CS3
(or cs/cs2 + Image Ready)
Windows Media Player
FRIENDME
THERULES
MYRESOURCES
If you're here for the perfect tutorial step by step for making that icon, this is the wrong place. It's more a guide, so you can have your style and make amazing animations.
This tutorial is divided into 3 parts, so everyone can choose what to read and what to skip. First part will teach you how to do your own screencaps and crop them for your minimovie icons, the second one explain what I did for my own spn icon such as coloring and texturing, and finally the third one is for saving your animations in the right way. As usually, I'm sorry for my poor english, I just hope I'll be able to explain myself. :D
0.TOOLS YOU NEED:
Photoshop CS3 OR Pothoshop CS/CS2 and Image Ready
Windows Media Player (optional).
Little explanation about programs.
The best program for iconizing is PHOTOSHOP CS3, since the animation tool is very simple and you don't have to open another program. I use it, and I'm comfortable with it. I'm aware there's a lot of programs out there for animations (Animation Shop Pro, just for example) but I tried everything and PS-CS3 works better.
If you have an earlier version of Photoshop you can still animate your images, but you need Image Ready, that is a program that come with Photoshop. Briefly, the animation tool that CS3 presents on his menu is basically Image Ready embedded into the major program, so you will not have so many problems with this tut, even if it's thought for CS3 users.
1. HOW TO MAKE YOUR OWN SCREENCAPS for a minimovie icon
Speaking about photoshop CS3, you have two possibilities: you can do the caps on your own, using the ALT+STAMP combination on the keyboard (frame by frame) or you can ask Photoshop to do it. I usually prefer the first option, since I like to see what I'm capping and I've always 90% of possibilities my Photoshop crash down with the other way. You just try and find out what do you prefer for your work.
- FIRST OPTION: CAPS FROM WINDOWS MEDIA PLAYER (manual)
If it's your first time with WMP screencapturing, you need to do a thing you'll probably not asked to do again in the future.
Open your video with Windows Media Player then go to Tools menu -> Options -> Performance -> Video Acceleration and set the value to 0. That will give you the possibility to actually take screencaptures with your keyboard. (Sorry, text on images is in italian for WMP, can't do otherwise).
Pause the video, then go to View -> Enhancements -> Play Speed Settings. WMP shows you a menu controller by wich you can watch the video frame by frame. Just try: click on the right arrow, the image should change into the next frame. This tool is always usefull, even for static icons.
Now, when you're ready you can start the capping. On your keyboard click ALT+STAMP then open Photoshop and create a new document. This new document should have the same number of pixels of your screen, so usually it's something like 1440x900 or 1280x1024, it depends on your screen.
Btw, when you've got your new document, just choose PASTE (CTRL+V). You should have something like this:
Now go back to WMP and click on the right arrow, move forward the video (3 frames) then click ALT+STAMP again. On Photoshop, PASTE the new screecap above the first one, since you'll need ONE DOCUMENT with multiple layers (about 15). When you're done you'll have ONE document with about 15 layers, ordered from the first to the last (so, if the first screencap is on layer 1, the 15th wil be on layer 15).
Go to Windows -> Animation. That' really similar to a Image Ready file, if you feel comfortable with it. In the box you can see, click on the "Duplicate selected frames" tool and you'll have two ideantical frames.
Now, be carefull.
- On the first frame, you must have on your layers palette the whole amount of levels, but they should be all invisible except for the FIRST one, the one with the first screencapture you made.
- On the second frame, the same thing but the only layers visible will be the SECOND one.
- And go on with that. Duplicate frames, change visibility of layers.
Once you've done it, you'll have your animation frames (you can check the animation by clicking the play button). Just crop it 100x100 pixel (72 dpi resolution).
SECOND OPTION: CAPS WITH PHOTOSHOP CS3 (auto)
Go to Windows -> Animation. That' really similar to a Image Ready file, if you feel comfortable with it.
Then choose File -> Import -> Video Frames to Layers and pick your video. A dialog box will pop up. (Usually, it's here Photoshop crash, so if you survived this step, you'll gonna be safe, I hope). Now, you can choose if you want to screencap the whole video or just a part of it, choosing between "from begining to end" or "selected range only". I suggest then to check the "limit to every __ frames" and to write 3, that means you'll have a capture every 3 frames. Obviously, since you're gonna make a minimovie check "Make frame animations". Now, you should have a screencapture for every layer of the document Photoshop created, you've just got to crop it 100x100 pixel (72 dpi resolution).
2. ADJUSTMENTS AND TEXTURES
Now it doesn't matter how you did your screencaptures, we've got a SINGLE DOCUMENT, divided into multiple layers (about 15) and with the animation bar with the same number of frames (so, if you have 16 screencaps, you'll probably have 16 frames, right?).
On the animation toolbar, click the arrow in the top right corner. From the menu choose "Select all frames."
Now, click on the arrow next to the word ".sec" you can find underneath any of your frames (doesn't matter wich one). Now, if you want, you can choose 0.1, that's usually good for animation. Usually, if you took a screencap every 3 frames, you need to multiply 3 for 0.4 (it's 0.12, near to the 0.1 I choose). If you'd choose to screencap every 2 frames, then -> 2x0.4= 0.08 and so on.
You'll probably need to sharpen you layers, so I suggest to select all you frames (on the animation toolbar, click the arrow in the top right corner. From the menu choose "Select all frames") then select the first layer and go to Filters -> Smart Sharpen and choose your values. Then select the second level, click CTRL+F and so on for every layer. You'll have the same sharp on all you layers.
Speaking about coloring, my icon is B/W, so it doesn't need special coloring, just some levels and curves. It's not a big difference, anyway, because every change you want in your icons should be done with adjustment layers, for both b/n and colors.
So, now you can act like you're working on a static icon (just be sure all your frames are selected, it's easy to lost something!), then use Layer -> New Adjustment layers -> Selective Colors/Curves/Color Balance...
[[[ If you choose the b/w style, transform your image into a grayscale one (Image -> Mode -> Grayscale) since it's lighter. ]]]
If you want to use textures, be sure you'll have them on top of everything (with all frames selected). I used some foggy textures by InnocentLexys you can find here. For the text too, it's basically the same thing. Just think you're working with 15 backgrounds at a time, instead of just one as in statics. Foe every frame you've got all the layers, but you can decide to use just one of them by make the others unvisible, so, for example, if you want the text just in the last frame, make his layer visible just there.
3. SAVING ANIMATIONS
Here we are, the most annoying part :D Livejournal accept 40 kb icons. So, animations, which are basically 15 icons stuffed together, must be compressed a lot, so don't you expect a great resolution icon, 'cause it will not be.
Firs, the extension must be .GIF, because if you choose something like JPG or PNG your animation will not move at all.
When you're done, with your image, don't click on SAVE AS. We need the SAVE FOR WEB & DEVICES tool. In the dialog box, you've to choose GIF-32 where 32 are the colors of you icon. Then, you can choose to change the Lossy to lose weight, till at least 39.9 kb. Just play around with values, try deleting a frame... it's up to you. Usually, Lossy 25% it's the most we can afford.
I hope everything is clear. If it's not, please, ask me everything you want. I'll try my best.