|
Was this a good tutorial? | Yes | | 100% | [ 13 ] | No | | 0% | [ 0 ] |
| Total Votes : 13 | | |
|
Author |
Message |
alexrogahn
I'm New
From : England
OS : Mac OS X Leopard
|
Subject: 32px Wand December 2nd 2008, 6:07 am |
|
|
I like to think of myself as a 32px wizard (I suck at larger sizes though) with a lot of people its the other way round and people are tempted to just scale their icon down all the way to 16px. You've probably heard this said a thousand times "Don't do that, redraw the small sizes" well in this tutorial I shall show you how to make a good old fashioned 32px wand, simple, Right?
RESULT:
1) So the first thing you need to do is make a canvas at, yeah you guessed it 32px by 32px
2) Now zoom in (I zoomed to around 1000%) , it's important you get up close and personal with the pixel grid so you can align the pixels correctly otherwise your icon will come out blurred. With the new photoshop CS4 you also get a nice grid which helps a lot.
3) Ok now to get off preparation and actually do some designing Grab the rectangle tool and draw a rectangle, it should be about 3px wide and 28px in height. And will look similar to this:
(and i know in the image its actually 4px wide. My bad )
4) Now for a gradient, the layer styles should be like this:
5) Duplicate that layer and set its fill to white and its opacity to 30%, remove the layer style, after that grab the free-transform tool and make it 1px in width and make sure you align it to the pixel grid a well as you can. it should look like this:
6) Now to add a white tip, put this layer on top of the black base but below the gloss, it should be 5px height and 3px wide, it should look like this:
Now add another simple gradient:
7) Time to Make some nice little sparkles and colors grab the eclipse tool and make a circle by holding the shift key whilst dragging it out.
Change the color to your liking (blues, purples, oranges, greens and yellows / oranges work best). Then we will convert to a "smart object" by right clicking the circles layer and clicking "convert to smart object":
TaDa you now have a smart object, If you don't know what these are then I suggest you learn, but to put it simply its a way of having editable vector filters.
Simply go to Filter > Blur > Gaussian Blur and adjust till your happy, after that reduce the opacity down to somewhere between 25-80%, then repeat this process with different colors, different strengths of blurring and you should have something resembling this:
Note: the smart object feature is only available in CS3 or higher, in cs2 or below use the eclipse marquee tool > fill it with your color > deselect (ctrl / cmd + D), then go to Filter > Blur > Gaussian Blur and adjust accordingly then continue. --------------------------------------------------------------------------------------------------------- Ok now for some sparkles, now get the custom shape tool and get the star shape:
Pull out a white star keeping the shift key pressed down so its perfectly symmetrical, use the free-transform tool to give it an angle and adjust the size. Then apply a glow to it with this layer style:
Then bring its opacity down to around 70-80%. Same as the glows, experiment with different angles and sizes.
8) We're pretty much done with the icon now, now to give it a nice perspective, select all the layers (click the top layer, press and hold shift and press the bottom layer (not the background) then free transform and rotate it holding the shift key down and let it snap 3 times.
Now it will look something like this:
9) If you want move some stuff around, change the background etc. then you should do it now. Now for the last part which is the drop shadow. First grab you eclipse tool then pull out a black, reasonably thin oval now so it looks like this:
Ok now its a simple matter of converting it to a smart object, doing a gaussian blur and lowing the opcaity to 25% now its time to step back and see your (hopefully) masterpiece. And If its not too much trouble I would like to see everyones attempts at this and possibly get a little community thread going "32px wand thread"
Oh and if there's something messed up in this tutorial just say and I'll try and fix it
|
|
|
|
salocin
I'm New
|
Subject: Re: 32px Wand December 2nd 2008, 6:31 am |
|
|
nice tut but I min still looks shoot
|
|
|
|
randomus_r
Resident Artist
From : Devon, England
OS : Vista
|
Subject: Re: 32px Wand December 2nd 2008, 6:42 am |
|
|
Ooh wow, I lurve 32px icons! Thanks so much for this tutty
EDIT: My attempt
Pinky
|
|
|
|
alexrogahn
I'm New
From : England
OS : Mac OS X Leopard
|
Subject: Re: 32px Wand December 2nd 2008, 7:29 am |
|
|
looks good
|
|
|
|
Rob
I'm New
From : Yorkshire
OS : Vista Ultimate, Win 7.
|
Subject: Re: 32px Wand December 2nd 2008, 8:15 am |
|
|
Nice tutorial, but I prefer nice high definition images that work well when scaled down. Also, in Vista, 32px is quite small for a thumbnail.
But anyway, very nice outcome, very nice tutorial.
Good job.
|
|
|
|
alexrogahn
I'm New
From : England
OS : Mac OS X Leopard
|
Subject: Re: 32px Wand December 2nd 2008, 8:50 am |
|
|
haha but I'm not using vista, 32px looks great of os x and on the web, but thanks
|
|
|
|
Wil1113
I'm New
From : You don't want to know
OS : Leopard
|
Subject: Re: 32px Wand December 2nd 2008, 11:28 am |
|
|
Nice tutorial Alex! I still like your original wand more though. XD
|
|
|
|
GoSco
Administrator
From : England
OS : Leopard 10.5.6
|
Subject: Re: 32px Wand December 2nd 2008, 12:14 pm |
|
|
A bit different from how I would do it, but helpful tutorial nonetheless
|
|
|
|
.: Stezz :.
Regular Visitor
|
Subject: Re: 32px Wand December 2nd 2008, 12:36 pm |
|
|
Thats pretty nifty Alex, nice one
|
|
|
|
StupidGirl
Moderator
From : U.S.A.
OS : Leopard
|
Subject: Re: 32px Wand December 2nd 2008, 1:20 pm |
|
|
This tutorial is awesome, and i LOVE 32px
|
|
|
|
alexrogahn
I'm New
From : England
OS : Mac OS X Leopard
|
Subject: Re: 32px Wand December 2nd 2008, 3:12 pm |
|
|
- GoSco wrote:
- A bit different from how I would do it, but helpful tutorial nonetheless
why how would you do it?
|
|
|
|
PineApple
Premium Subscriber
From : Italy
OS : Mac OS Leopard
|
Subject: Re: 32px Wand December 2nd 2008, 3:35 pm |
|
|
- StupidGirl wrote:
- This tutorial is awesome, and i LOVE 32px
Completely agree Thanks for this!
|
|
|
|
pjdark
Premium Subscriber
From : Minnesota
OS : vista/ ubuntu linux/ mac os x
|
Subject: Re: 32px Wand December 2nd 2008, 7:00 pm |
|
|
Well, i guess if i ever need a 32 px wand this will come in handy. lol. Nice tutorial though.
|
|
|
|
SbuxBlaze
Founder
From : Southern California
OS : Win 8 x64, Android 4.0
|
Subject: Re: 32px Wand December 2nd 2008, 8:26 pm |
|
|
Great tutorial. I suck at making icons so I'm going to give this a try
|
|
|
|
GoSco
Administrator
From : England
OS : Leopard 10.5.6
|
Subject: Re: 32px Wand December 2nd 2008, 8:50 pm |
|
|
- alexrogahn wrote:
- GoSco wrote:
- A bit different from how I would do it, but helpful tutorial nonetheless
why how would you do it? [strike] For the wand I had done I made it big, at a 45˚ and put on a custom gradient, usual stuff the resize and add.
|
|
|
|
Macintoshdznr
I'm New
OS : Mac OS X Leopard
|
Subject: Re: 32px Wand December 2nd 2008, 11:34 pm |
|
|
Did this really quick and this is what I came up with:
It isn't that great but I definitely should have spent more time on it.
Last edited by Macintoshdznr on December 2nd 2008, 11:40 pm; edited 1 time in total (Reason for editing : Image URL)
|
|
|
|
Lopagof
I'm New
OS : Windows, 7/Vista/XP Linux, Debian/Ubuntu/Fedora Mac, OS9/OSX Leopard
|
Subject: Re: 32px Wand December 14th 2008, 12:35 pm |
|
|
My attempt in vector. Exported @256 by 256
Great tutorial by the way.
|
|
|
|
Sponsored content
|
Subject: Re: 32px Wand |
|
|
|
|
|
|
|