Fred-ifying my icons

You have photoshop right?

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]

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! )

Thanks! Can't wait to get home and try this.

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!

Thanks, Markus!

Thanks 2.

What if I want to put an image (png, bmp, jpg...) in there rather than text?

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)

Thx again.

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.

Can't try it till I get home. Then I'll see if I made a mess or something worth uploading...lol.

lol...ok.

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.

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]

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?"

Yup, that's what it was. Learn something new...
[Message Edited]

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!

Aw damn....I just wrote that entire thing for nothin? Oh well, at least now I have an icon modifying tutorial.

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]

Oh ok....I was wondering what that was...

and I might work on that IconPackage. We'll see
[Message Edited]

Here's the finished product: http://img78.photobucket.com/albums/v255/tealfan/Temp/Screenshot_-_Fredification.jpg

They're IconX...uhh...icons, so I changed my settings so that they light up like the Start button does. I also have single-click turned on in my Folder Options, so these button-like things actually work like buttons. The icon labels only turn on on mouse over. If these icons are decent enough, I'd be happy to help with an icon package. Never uploaded anything before, so I'll just follow Cerebro's lead on how the process works. If they're not decent enough, thats okay. I had fun making 'em.

Oh. As far as separating out the icon size I wanted from the Fred Icon.psd file... I created a new canvas of size 48x48, then ed the 48 folder in Fred Icon.psd, then dragged the icon onto my new canvas and centered it. I deleted the text layer and set the backgrounds opacity to 0. Then I saved this canvas for future use. Then I did my work on this canvas. Whew! I'm off to bed!

Oops almost forgot...

Thanks for all the help guys!!!

Cant talk for long right now, but I think we should talk more about the icon package tealfan...thats good work.

I think we might have to focus more on making the program icons on our own though, and not just using existing graphics....might be some copyright issues there.