Yay! A lot of people have liked those icons from my last post. So here's a tutorial on how to do them! :)
edit: I knew I'd forget! I'm using Photoshop 7 and Image Ready 3(?)!
We'll make this icon:
Step 1: Start with the Photo you'd like to use. You want to make sure that the picture is either wide, or long so that you can see the whole thing, and it'll look better when you scroll. I chose this image. Please note, I have shrunken it down to size, so that it's easier to see here. I used the Hi-Res HUGE photo for my icon.
Step 2: Crop the image. Set your cropping tool to 300 x 100 px OR if you want it to scroll up and down, set it to 100 x 300 px and in a rectangular shape, have the image that you'd like to use. This is what I got:
Step 3: You want to make sure that whatever editing you're doing to the picture, you do it now. This includes, colors, brushes, etc. etc. etc. I did several things here on the editing aspect of it.
Step 3a: Desaturate the picture. (Ctrl + Shift + U)
Step 3b: Duplicate the layer (Ctrl + J) and set the top layer to soft light. Next go to filters, and go to Filter >> Sharpen >> Sharpen on both layers.
Step 3c: On the bottom layer, go to Filter >> Texture >> Patchwork. Set the settings to: Square Size: 1, Relief: 0. It gives you sort of a coolish looking thing underneath. (Stay with me here :-D)
Step 3d: Still on the bottom layer, Go to Filter >> Blur >> Motion Blur, and use these settings: Angle: -51; Distance: 10. Then go to the top layer, and duplicate it.
Step 3e: Merge the layers, so you have one picture. (Ctrl + Shift + E). Now, choose a color, any color that you'd like out of your palette. Hit Ctrl + U to bring up the Hue/Saturation window. Click on the colorize button, and play around with the settings of Saturation and Lightness until you find a nice color that you like.
Step 3f: Now duplicate the image again. (Ctrl + J) and set the top layer to soft light. Between the two layers, create a new layer. Fill this layer with color #004A80 and set it to exclusion. You should get something like this.
Step 3g: Now, I like this, but at the same time I don't. So I merge the layer again (Ctrl + Shift + E) and create a new layer on the top. Fill it with Black, set it to color 50% opacity.
Step 3h: Last step in the editing of colors etc stuff. Just merge the layers (Ctrl + Shift + E) and then duplicate the picture you have. (Ctrl + J) Go to Edit >> Stroke and put a 2px Black Stroke around the whole picture. Then merge the layers again. (Ctrl + Shift + E)
Step 4: Now here's where it can get tricky. You want to go to File >> Jump To >> Adobe Image Ready. When you get to image ready, DUPLICATE THE IMAGE THAT YOU HAVE (Ctrl + J) so that the layer you're editing isn't locked. Then delete the bottom layer. Okay, if you get confused here, just let me know. IN IMAGE READY: Go to Image >> Canvas Size and set the Canvas to 100x100 px. The image will look a little awkward, but we're getting there.
Step 5: Take your little movey thing (
) and move it so that the edge of the picture you want the animation to start with is lined up and in focus. In this case, I'm going to scroll from Charlie to Claire, so I want Charlie to be in focus first. The stroke we put on originally, is a good guide. Just line the edge of the stroke up with the edge of the canvas. It should look something like this:
Step 6: On your ANIMATION FRAMES PALETTE, click on the NEW LAYER button. Make sure the new layer is highlighted, and then move the picture over to feature the other person. So now you should have two frames. One of Charlie, and one of Claire.
Your frames palette should look like this:
Step 6: With the first image selected, Click on the Tweens image. (
) and use the following settings:
Step 7: We're almost there, yay! Now, all you want to do is decide the speed for your frames. For this instance, I used the Charlie Picture, and the Claire Picture at 1.5 seconds each. The inbetween frames are at .03 seconds each, So now your layers palette should look like this:
Step 8: All you have to do now is make sure it's fit to LJ requirements :) So up at the top of your image, click on the 2-up tab. (
) It'll show you two different versions of the same picture. Always work with the right one, and you want to make sure that it's under 40kb (
),otherwise it's outside LJ requirements. I always try to keep the highest quality, with the most color. So use as little bit of lossy as you can, and as many colors as you can. For this particular icon, I used these settings: (It really varies based on icon, you'll have to play around with it!)
Step 9: To save the icon in a GIF format, you'll need to go to File >> Save Optimized As and then name your file, and save it. Ta da...ICON! :) Hope you enjoyed this, and it helped :)
edit: I knew I'd forget! I'm using Photoshop 7 and Image Ready 3(?)!
We'll make this icon:
Step 1: Start with the Photo you'd like to use. You want to make sure that the picture is either wide, or long so that you can see the whole thing, and it'll look better when you scroll. I chose this image. Please note, I have shrunken it down to size, so that it's easier to see here. I used the Hi-Res HUGE photo for my icon.
Step 2: Crop the image. Set your cropping tool to 300 x 100 px OR if you want it to scroll up and down, set it to 100 x 300 px and in a rectangular shape, have the image that you'd like to use. This is what I got:
Step 3: You want to make sure that whatever editing you're doing to the picture, you do it now. This includes, colors, brushes, etc. etc. etc. I did several things here on the editing aspect of it.
Step 3a: Desaturate the picture. (Ctrl + Shift + U)
Step 3b: Duplicate the layer (Ctrl + J) and set the top layer to soft light. Next go to filters, and go to Filter >> Sharpen >> Sharpen on both layers.
Step 3c: On the bottom layer, go to Filter >> Texture >> Patchwork. Set the settings to: Square Size: 1, Relief: 0. It gives you sort of a coolish looking thing underneath. (Stay with me here :-D)
Step 3d: Still on the bottom layer, Go to Filter >> Blur >> Motion Blur, and use these settings: Angle: -51; Distance: 10. Then go to the top layer, and duplicate it.
Step 3e: Merge the layers, so you have one picture. (Ctrl + Shift + E). Now, choose a color, any color that you'd like out of your palette. Hit Ctrl + U to bring up the Hue/Saturation window. Click on the colorize button, and play around with the settings of Saturation and Lightness until you find a nice color that you like.
Step 3f: Now duplicate the image again. (Ctrl + J) and set the top layer to soft light. Between the two layers, create a new layer. Fill this layer with color #004A80 and set it to exclusion. You should get something like this.
Step 3g: Now, I like this, but at the same time I don't. So I merge the layer again (Ctrl + Shift + E) and create a new layer on the top. Fill it with Black, set it to color 50% opacity.
Step 3h: Last step in the editing of colors etc stuff. Just merge the layers (Ctrl + Shift + E) and then duplicate the picture you have. (Ctrl + J) Go to Edit >> Stroke and put a 2px Black Stroke around the whole picture. Then merge the layers again. (Ctrl + Shift + E)
Step 4: Now here's where it can get tricky. You want to go to File >> Jump To >> Adobe Image Ready. When you get to image ready, DUPLICATE THE IMAGE THAT YOU HAVE (Ctrl + J) so that the layer you're editing isn't locked. Then delete the bottom layer. Okay, if you get confused here, just let me know. IN IMAGE READY: Go to Image >> Canvas Size and set the Canvas to 100x100 px. The image will look a little awkward, but we're getting there.
Step 5: Take your little movey thing (
) and move it so that the edge of the picture you want the animation to start with is lined up and in focus. In this case, I'm going to scroll from Charlie to Claire, so I want Charlie to be in focus first. The stroke we put on originally, is a good guide. Just line the edge of the stroke up with the edge of the canvas. It should look something like this:Step 6: On your ANIMATION FRAMES PALETTE, click on the NEW LAYER button. Make sure the new layer is highlighted, and then move the picture over to feature the other person. So now you should have two frames. One of Charlie, and one of Claire.
Your frames palette should look like this:
Step 6: With the first image selected, Click on the Tweens image. (
) and use the following settings:Step 7: We're almost there, yay! Now, all you want to do is decide the speed for your frames. For this instance, I used the Charlie Picture, and the Claire Picture at 1.5 seconds each. The inbetween frames are at .03 seconds each, So now your layers palette should look like this:
Step 8: All you have to do now is make sure it's fit to LJ requirements :) So up at the top of your image, click on the 2-up tab. (
) It'll show you two different versions of the same picture. Always work with the right one, and you want to make sure that it's under 40kb (),otherwise it's outside LJ requirements. I always try to keep the highest quality, with the most color. So use as little bit of lossy as you can, and as many colors as you can. For this particular icon, I used these settings: (It really varies based on icon, you'll have to play around with it!)Step 9: To save the icon in a GIF format, you'll need to go to File >> Save Optimized As and then name your file, and save it. Ta da...ICON! :) Hope you enjoyed this, and it helped :)