Art: Super Icons (how to?)
Join the #1 Art Workshop - LevelUpJoin Premium Art Workshop

Results 1 to 6 of 6

Thread: Super Icons (how to?)

  1. #1
    Join Date
    May 2004
    Location
    Sunnyvale CA
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Follows
    0
    Following
    0

    Arrow Super Icons (how to?)

    Hello all..

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

    http://halflife2.filefront.com/file/...con_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

    Freelance User Interface Artist
    www.stepanshurygin.com
    Reply With Quote Reply With Quote  

  2. #2
    Join Date
    Jun 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Follows
    0
    Following
    0
    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.



    Last edited by dozer; August 21st, 2005 at 11:02 AM.
    Reply With Quote Reply With Quote  

  3. #3
    Join Date
    May 2004
    Location
    Sunnyvale CA
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Follows
    0
    Following
    0
    ur awesome! thanks so much..

    Ill try making one tomorrow and post results here.

    Freelance User Interface Artist
    www.stepanshurygin.com
    Reply With Quote Reply With Quote  

  4. #4
    Join Date
    May 2004
    Location
    Sunnyvale CA
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Follows
    0
    Following
    0
    Okay, thanks alot for the help

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



    done from this one



    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?

    Last edited by NukeouT; August 31st, 2005 at 09:32 PM.
    Freelance User Interface Artist
    www.stepanshurygin.com
    Reply With Quote Reply With Quote  

  5. #5
    Join Date
    May 2004
    Location
    Sunnyvale CA
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Follows
    0
    Following
    0
    I still havent figured out how to make this file into a usable icon.

    Freelance User Interface Artist
    www.stepanshurygin.com
    Reply With Quote Reply With Quote  

  6. #6
    Join Date
    Jan 2005
    Location
    Manitoba
    Posts
    325
    Thanks
    0
    Thanked 10 Times in 9 Posts
    Follows
    0
    Following
    0
    google it....

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

    Reply With Quote Reply With Quote  

Members who have read this thread: 0

There are no members to list at the moment.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •