tealfan

Join Date 06/2004

Fred-ifying my icons

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.

skinning

Locked Post

Advanced Search

Watch this post

Do not email me updates for this post Email me updates for this post

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

You have photoshop right?

Successfully updated karma reason!

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]

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

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

Successfully updated karma reason!

Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.

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

Successfully updated karma reason!

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!

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

Thanks, Markus!

Successfully updated karma reason!

Thanks 2.

Successfully updated karma reason!

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

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

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)

Successfully updated karma reason!

Thx again.

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

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.

Successfully updated karma reason!

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

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

lol...ok.

Successfully updated karma reason!

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.

Successfully updated karma reason!

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]

Successfully updated karma reason!

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?

Successfully updated karma reason!

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

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

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!

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

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

Successfully updated karma reason!

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]

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

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

and I might work on that IconPackage. We'll see

[Message Edited]

Successfully updated karma reason!

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.

Successfully updated karma reason!

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!

Successfully updated karma reason!

Oops almost forgot...

Thanks for all the help guys!!!

Successfully updated karma reason!

CerebroJD

Join Date 01/2003

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.

Successfully updated karma reason!