anesthezea wrote in icon_tutorial 😊accomplished

Listens: Marcy Playground - It's Saturday

PS7 tute....

The moderator of this lovely community asked me to post this tutorial here. ^_^x It's a little trick for making transparent icons in Adobe Photoshop 7. I am not sure if this works in any other version of Photoshop, or if it will work in Paint Shop Pro. If anyone tries this in anything other than PS 7 and it works, please let me know and I'll add those specs to the tutorial.


Notes: This tutorial is for use with Adobe Photoshop 7. Like it's previous versions, PS 7 has a wizard to help you create a transparent gif, but it really doesn't work very well. I've put together this tutorial to show how you can make an easy transparency in PS 7 without that ugly wizard. ^_^x

1. I looked through tons and tons of pics and found this lovely ice-blue confection of Mr. Depp and knew I just had to make an icon of it.



2. Then I opened Photoshop and created a NEW document. I set my height and width to 100 x 100 pixels (standard icon size). I like to keep my resolution at the default of 72. Anything higher can sometimes make my icons too large in file size. Under contents, I selected TRANSPARENT for the background layer.



2. I created a NEW LAYER and PASTED my picture of Johnny D. into it...



3. ... but the picture was too big so I SCALED it down by about 40 or 50%. I wanted the colors to be a little more vibrant so I played with the BRIGHTNESS/CONTRAST settings a little.



4. Then I created a another NEW LAYER and used the PENCIL tool to draw a border in black. You can't see it very well in the screenshot, but I hope you get the idea.



5. In yet another NEW LAYER, I used the PENCIL tool in white to color around the outside of the black border. This layer will be "shut off" to make the icon transparent later on. So WHITE = TRANSPARENT.



Note: I would like to add that it's a very, very good idea to SAVE YOUR WORK OFTEN. In the middle of this tutorial, my power went out and I lost what I was working on. So have had to start again on this thing from scratch. But such is life! So on with the tute!

6. So then I add my text and decorations and what-not in NEW LAYERS until I like what I see.



7. Still with me on this? Ok. I go back and select the white layer so that it's ACTIVE. Then I use the magic wand tool to SELECT the white on that layer.



8. Then, with the selection still on, I make Johnny's picture layer ACTIVE and hit BACKSPACE on my keyboard to erase the selected area of the picture.



9. And it comes out like this.



10. So then I click FILE/SAVE AS and when the dialog box pops up, I check the box next to AS A COPY. It's important that you click this box first when making a gif file.



11. I save it as a COMPUSERVE GIF and click OK to the two or so dialog boxes that pop up afterwards.




And here's the finished product. EDIT: I've put the icon in a grayscale table to better show the transparancy.






Ta!