Super Icons (how to?)

[NukeouT]

Hello all..

Ive stumbled across this in my endless voyage across cyber space.

http://halflife2.filefront.com/file/Valve_World_Icon_Pack;46231

I was wondering if someone could be so kind as to explain, make very brief tutorial about how to make these icons in photoshop/max . Im betting they are fairly easy to make, I just dont know those specific features of the programs..

thanks bunches :)

[dozer]

They look pretty straightforward.Here's how I would do it in Photoshop (there are thousands of ways, of course):

Starting at the bottom layer, I would create a block of color in the basic shape (I personally would use Illustrator to make all shapes). This would be the border color in the examples.

The next layer would be a circle with the circle color. On this layer, I would paste a mask to mask out the design, allowing the border color to show through (in effect, cutting out the design). It looks as though they've added a drop shadow effect on this layer.

A third layer would have the gloss effect. This is pretty simple to do, and fun to see the results. Start with an oval selection in the shape of the reflection, and use the gradient tool to make it fade from strong at the top to near-transparent at the bottom.

On that same layer, they've added a reflected light. Using a circle selection slightly smaller than the colored circle, feather it slightly (I used 2.5 radius) and use a very weak gradation going from light at the bottom to transparent.

Finally, it looks as though they've probably added another shape on a top layer that's the shape of the border. The reason I say that is that there appears to be a subtle drop shadow on this layer as well, which helps give the glassy disk a bit more depth (makes it look sunk-in a tad). It also gives the border shape a drop shadow on the page.

The small Half-life logo is done roughly the same way.

This could all be done in Illustrator also, which would make it more flexible in sizing. It looks like they did it this way, since their edges are nice and crisp.

It helps to use colors that are middle value or lower. Notice how the effect doesn't really work well with the soccer ball or the tape reels, which are on white (they could have added a subtle tone to help these).

Once the pattern is set up, it's pretty easy to switch the art by changing the mask, and the colors can easily be changed as well, using Hue/Saturation controls.

I've got an hour to kill, so I'll try to do one to test the process. I'll post the results.

Well, it took about 15 minutes. Not exact, but you get the idea. I included the layers to help - layer three is the gloss effect... it doesn't look like anything's on it because it's white. They may have also added a subtle mutiply or color burn layer with a dark gradation from top to bottom over the colored circle - that would give it a bit more depth.

http://www.foersterstudios.com/logo_sample.jpg

[NukeouT]

:^^: ur awesome! thanks so much..

Ill try making one tomorrow and post results here.

[NukeouT]

:D Okay, thanks alot for the help

This is what i came up with after 1.30 hrs of messing around in photoshop.

http://img.photobucket.com/albums/v315/NukeouT/opposingforceiconcopy.jpg

done from this one

http://img.photobucket.com/albums/v315/NukeouT/OpposingForceScreen.jpg

So in the end I managed to get around and finish a super icon !

Problem now is that in that screenshot is a 16x16 pixel 96dpi.ico file.. which looks very high res and clean on the desktop or when zoomed into in windows picture viewer. How ever photoshop keeps horribly massacaring the icon when i attempt to get it down to 16x16 (obviously).

How would I go about exporting my 700x700 pixel high res photoshop file to do this, and into a working icon state all together?

[NukeouT]

I still havent figured out how to make this file into a usable icon. :android:

[Shatterdome]

google it....

I found it in 2 seconds so I won't post it....