Galaxy GUI
Would you like to react to this message? Create an account in a few clicks or log in to continue.


A Universe of Customization
 
HomeHome  Latest imagesLatest images  SearchSearch  RegisterRegister  Log inLog in  
Galaxy GUI v2 Coming Soon - Stay Tuned for Details

 

32px Wand

View previous topic View next topic Go down 

Was this a good tutorial?
Yes
32px Wand I_vote_lcap100%32px Wand I_vote_rcap
 100% [ 13 ]
No
32px Wand I_vote_lcap0%32px Wand I_vote_rcap
 0% [ 0 ]
Total Votes : 13
 

Author Message
alexrogahn

alexrogahn

I'm New
I'm New

From : England
OS : Mac OS X Leopard

32px Wand Vide
PostSubject: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 6:07 am

I like to think of myself as a 32px wizard tongue (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:

32px Wand Wand

1) So the first thing you need to do is make a canvas at, yeah you guessed it 32px by 32px tongue
32px Wand 1

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 smile Grab the rectangle tool and draw a rectangle, it should be about 3px wide and 28px in height. And will look similar to this:
32px Wand 2
(and i know in the image its actually 4px wide. My bad tongue)

4) Now for a gradient, the layer styles should be like this:
32px Wand 3

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:
32px Wand 4

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:
32px Wand 5

Now add another simple gradient:
32px Wand 6

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":
32px Wand 7

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:
32px Wand 8

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:
32px Wand 9

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:
32px Wand 10

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:
32px Wand 11

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:
32px Wand 12

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

Oh and if there's something messed up in this tutorial just say and I'll try and fix it smile
salocin

salocin

I'm New
I'm New


32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 6:31 am

nice tut but I min still looks shoot happy
randomus_r

randomus_r

Resident Artist
Resident Artist

From : Devon, England
OS : Vista

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 6:42 am

Ooh wow, I lurve 32px icons! Thanks so much for this tutty happy

EDIT: My attempt
32px Wand MyWand
Pinky lol
alexrogahn

alexrogahn

I'm New
I'm New

From : England
OS : Mac OS X Leopard

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 7:29 am

looks good thumbs up
Rob

Rob

I'm New
I'm New

From : Yorkshire
OS : Vista Ultimate, Win 7.

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 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

alexrogahn

I'm New
I'm New

From : England
OS : Mac OS X Leopard

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 8:50 am

haha but I'm not using vista, 32px looks great of os x and on the web, but thanks wink
Wil1113

avatar

I'm New
I'm New

From : You don't want to know
OS : Leopard

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 11:28 am

Nice tutorial Alex! tongue I still like your original wand more though. XD
GoSco

GoSco

Administrator
Administrator

From : England
OS :  Leopard 10.5.6

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 12:14 pm

A bit different from how I would do it, but helpful tutorial nonetheless wink
.: Stezz :.

avatar

Regular Visitor
Regular Visitor


32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 12:36 pm

Thats pretty nifty Alex, nice one wink
StupidGirl

StupidGirl

Moderator
Moderator

From : U.S.A.
OS : Leopard

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 1:20 pm

This tutorial is awesome, and i LOVE 32px happy
alexrogahn

alexrogahn

I'm New
I'm New

From : England
OS : Mac OS X Leopard

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 3:12 pm

GoSco wrote:
A bit different from how I would do it, but helpful tutorial nonetheless wink

why how would you do it? tongue
PineApple

PineApple

Premium Subscriber
Premium Subscriber

From : Italy
OS : Mac OS Leopard

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 3:35 pm

StupidGirl wrote:
This tutorial is awesome, and i LOVE 32px happy

thumbs up Completely agree tongue Thanks for this!
pjdark

pjdark

Premium Subscriber
Premium Subscriber

From : Minnesota
OS : vista/ ubuntu linux/ mac os x

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 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. thumbs up
SbuxBlaze

SbuxBlaze

Founder
Founder

From : Southern California
OS : Win 8 x64, Android 4.0

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 8:26 pm

Great tutorial. I suck at making icons so I'm going to give this a try smile
GoSco

GoSco

Administrator
Administrator

From : England
OS :  Leopard 10.5.6

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 8:50 pm

alexrogahn wrote:
GoSco wrote:
A bit different from how I would do it, but helpful tutorial nonetheless wink

why how would you do it? tongue
[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. smile
Macintoshdznr

Macintoshdznr

I'm New
I'm New

OS : Mac OS X Leopard

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 2nd 2008, 11:34 pm

Did this really quick and this is what I came up with:

32px Wand Macintoshdznrwandrj5

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

Lopagof

I'm New
I'm New

OS : Windows, 7/Vista/XP Linux, Debian/Ubuntu/Fedora Mac, OS9/OSX Leopard

32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1December 14th 2008, 12:35 pm

32px Wand Rect31853vk9

My attempt in vector.
Exported @256 by 256

Great tutorial by the way.
Sponsored content






32px Wand Vide
PostSubject: Re: 32px Wand   32px Wand Icon_minitime1

32px Wand

View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum: You cannot reply to topics in this forum
Galaxy GUI :: GUI Customization :: Requests and Discussions :: Tutorials -
RSS Feed  

Topic and post times are displayed in GMT (Greenwich Mean Time) for guests
Go to Top · Contact Us · Privacy Policy · Terms of Use

Creative Commons 3.0 License. Last update: February 29, 2012
All trademarks mentioned on this page are the property of their respective owners







Free forum | ©phpBB | Free forum support | Report an abuse | Forumotion.com