Fred-ifying my icons
Monday, July 19, 2004 by tealfan | Discussion: Skinning
Wasn't sure if this should go here or in Help Discussion, so I flipped a coin. 
I'm using farkusmarkus's Fred skin and I want to create my own matching icons to use on my desktop. For example, I want to change the Mozilla icon so that matches all the other Fred icons. He provided the *.psd file for one example icon, so I guess I'm supposed to start there. Any tips to help this newbie get started? Thanks in advance.
I'm using farkusmarkus's Fred skin and I want to create my own matching icons to use on my desktop. For example, I want to change the Mozilla icon so that matches all the other Fred icons. He provided the *.psd file for one example icon, so I guess I'm supposed to start there. Any tips to help this newbie get started? Thanks in advance.
 |
|
Page 1 of 2 | |
|
|---|
tealfan
Reply #2 Monday, July 19, 2004 4:50 PM
Reply #2 Monday, July 19, 2004 4:50 PM
I do, but I'm a virgin. I mean a Photoshop virgin!
Well, I know a little bit. I made the wallpaper in my profile desktop from a magazine cover with text all over the place.
[Message Edited]
Well, I know a little bit. I made the wallpaper in my profile desktop from a magazine cover with text all over the place.
[Message Edited]
CerebroJD
Reply #3 Monday, July 19, 2004 5:51 PM
Reply #3 Monday, July 19, 2004 5:51 PM
Ok...here we go.
So..your starting with your basic Fred icon. The first thing that you have to do is open the .psd file that Fred came with. That will give you your basic template. Now, the Mozilla icon is just a stylized M, so you just need to make a new text layer between the glossy surface and the rest of the psd. Then, pick a font that you like, and put the letter M in the text layer. Make sure its centered and stuff the way you want it, then you should be able to save the image as a png. Then open that png with IconDeveloper and create an icon from it. Save the icon somewhere. Now (finally!) open the properties box for the Mozilla shortcut on your desktop and click the "Icon" tab. Browse for the icon, it and hit apply.
(note, I just did this entire thing without even trying it myself, since I'm on a public computer, but thats how it should work. Good luck! )
So..your starting with your basic Fred icon. The first thing that you have to do is open the .psd file that Fred came with. That will give you your basic template. Now, the Mozilla icon is just a stylized M, so you just need to make a new text layer between the glossy surface and the rest of the psd. Then, pick a font that you like, and put the letter M in the text layer. Make sure its centered and stuff the way you want it, then you should be able to save the image as a png. Then open that png with IconDeveloper and create an icon from it. Save the icon somewhere. Now (finally!) open the properties box for the Mozilla shortcut on your desktop and click the "Icon" tab. Browse for the icon, it and hit apply.
(note, I just did this entire thing without even trying it myself, since I'm on a public computer, but thats how it should work. Good luck! )
farkusmarkus
Reply #5 Monday, July 19, 2004 6:58 PM
Reply #5 Monday, July 19, 2004 6:58 PM
I thought I felt Fred's ear burning....
Most of the icons for Fred use fonts such as Webdings\Wingdings\etc and I saved the PSD so that the example icon is still a font. So if I may add on to CerebroJD's Fred tutorial, you would simply have to the "Globe" in the PSD with your text tool, change the font to whatever your heart desires and then type the letter M. This way you keep the gradient that is applied to the font and the illusion that it is underneath the glass-like-substance remains intact.
Happy Fred-ifying!
Most of the icons for Fred use fonts such as Webdings\Wingdings\etc and I saved the PSD so that the example icon is still a font. So if I may add on to CerebroJD's Fred tutorial, you would simply have to the "Globe" in the PSD with your text tool, change the font to whatever your heart desires and then type the letter M. This way you keep the gradient that is applied to the font and the illusion that it is underneath the glass-like-substance remains intact.
Happy Fred-ifying!
tealfan
Reply #8 Tuesday, July 20, 2004 11:43 AM
Reply #8 Tuesday, July 20, 2004 11:43 AM
What if I want to put an image (png, bmp, jpg...) in there rather than text?
CerebroJD
Reply #9 Tuesday, July 20, 2004 11:50 AM
Reply #9 Tuesday, July 20, 2004 11:50 AM
Then its a matter of putting that png (i wouldnt use the other two) in where the text layer is, and copying the style from the text layer into the the layer. (you can colourize/tweak the layer as needed)
CerebroJD
Reply #11 Tuesday, July 20, 2004 5:36 PM
Reply #11 Tuesday, July 20, 2004 5:36 PM
Did it work out allright for ya? Since you're now a pro at this, you could, like, make the official icon package of Fred lol. 
tealfan
Reply #12 Tuesday, July 20, 2004 8:08 PM
Reply #12 Tuesday, July 20, 2004 8:08 PM
Can't try it till I get home. Then I'll see if I made a mess or something worth uploading...lol.
tealfan
Reply #14 Tuesday, July 20, 2004 9:44 PM
Reply #14 Tuesday, July 20, 2004 9:44 PM
Okay my cluelessness is showing now.
I put everything together, created my PNG and opened it up in Icon Developer. But, in there it just shows as a black square with some small colored squares here and there...lol.
I put everything together, created my PNG and opened it up in Icon Developer. But, in there it just shows as a black square with some small colored squares here and there...lol.
tealfan
Reply #15 Tuesday, July 20, 2004 11:31 PM
Reply #15 Tuesday, July 20, 2004 11:31 PM
Okay here's how far I've gotten:
http://img78.photobucket.com/albums/v255/tealfan/Temp/first_cut.jpg
I can't seem to get the area outside the circle transparented out. Even when I set the background layer to Opacity 0%. Also, I couldn't seem to apply the layer style from that text correctly. I did Copy Layer Style and then Paste Layer Style, but it just replaed my Mozilla image with a gradient. So, I just moved the Glare layer up front. Help?
[Message Edited]
http://img78.photobucket.com/albums/v255/tealfan/Temp/first_cut.jpg
I can't seem to get the area outside the circle transparented out. Even when I set the background layer to Opacity 0%. Also, I couldn't seem to apply the layer style from that text correctly. I did Copy Layer Style and then Paste Layer Style, but it just replaed my Mozilla image with a gradient. So, I just moved the Glare layer up front. Help?
[Message Edited]
farkusmarkus
Reply #16 Wednesday, July 21, 2004 1:11 AM
Reply #16 Wednesday, July 21, 2004 1:11 AM
The gradient was only really intended for symbols that were one solid color. The glare layer should always be in front.
As far as transparency goes, I'm not sure what the issue is. You aren't flattening your image before saving it to PNG, are you?
As far as transparency goes, I'm not sure what the issue is. You aren't flattening your image before saving it to PNG, are you?
tealfan
Reply #17 Wednesday, July 21, 2004 1:37 AM
Reply #17 Wednesday, July 21, 2004 1:37 AM
"
As far as transparency goes, I'm not sure what the issue is. You aren't flattening your image before saving it to PNG, are you?"
Yup, that's what it was. Learn something new...
[Message Edited]
As far as transparency goes, I'm not sure what the issue is. You aren't flattening your image before saving it to PNG, are you?"
Yup, that's what it was. Learn something new...
[Message Edited]
CerebroJD
Reply #18 Wednesday, July 21, 2004 1:50 AM
Reply #18 Wednesday, July 21, 2004 1:50 AM
Ok....dont use the gradient from the text layer. You dont need it...whats cool about this psd file (which I'd never seen before) was the grouped layers. Right click on the 128 folder (or whatever res you want) then hit "Duplicate Layer Set". Set the destination to be a New document name Mozilla for simplicity. Now you're sittin with a grouped set of layers in a new document. (I just saved this file as a png and did the rest of my tweaking with fireworks, but you probably dont have that option) Zoom in really far to help you move the layer group to the point where the top edge is right at the top and the left edge is 1 pixel from the side. Then go into the "Image" menu and hit "Canvas Size..." set this to 128 by 128 pixels (or whatever res your using) and make sure that the little orientation box is set to upper left. Now, go "File", "Save As..." and png from the drop down menu. Name it what you want, then hit Save.
Now, open IconDeveloper, then hit "File", "New", "Icon from Image...". Navigate to your png in the box and click on it. Now you should be presented with the Icon making screen, where you can choose what type of icon you want it to be. Make your ion (it should be the one that you've been supplying the numbers for the resolution) and hit Ok. Now go "File", "Save As..." and name it what you'd like, then hit Save.
Ok, I'm done....wow. That should work, since I just walked through every step on my computer and now have an incredible lookin mozilla icon if yours doesnt work out.
Good luck!
Now, open IconDeveloper, then hit "File", "New", "Icon from Image...". Navigate to your png in the box and click on it. Now you should be presented with the Icon making screen, where you can choose what type of icon you want it to be. Make your ion (it should be the one that you've been supplying the numbers for the resolution) and hit Ok. Now go "File", "Save As..." and name it what you'd like, then hit Save.
Ok, I'm done....wow. That should work, since I just walked through every step on my computer and now have an incredible lookin mozilla icon if yours doesnt work out.
Good luck!
CerebroJD
Reply #19 Wednesday, July 21, 2004 1:51 AM
Reply #19 Wednesday, July 21, 2004 1:51 AM
Aw damn....I just wrote that entire thing for nothin? Oh well, at least now I have an icon modifying tutorial. 
farkusmarkus
Reply #20 Wednesday, July 21, 2004 2:10 AM
Reply #20 Wednesday, July 21, 2004 2:10 AM
Okay, CerebroJD, time for you to release the official Fred icon package! If you or tealfan actually want to do it, just reference this post for your permission file.
One more thing, the blue background that is in the PSD (but hidden) was put there to help you with cropping. That way you can click the layer on to see where the background gradient starts and ends and then click it off before you save.
[Message Edited]
One more thing, the blue background that is in the PSD (but hidden) was put there to help you with cropping. That way you can click the layer on to see where the background gradient starts and ends and then click it off before you save.
[Message Edited]
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
|
|
Page 1 of 2 | |
|
|---|
Reply #1 Monday, July 19, 2004 4:28 PM