Smiley Tutorial

[Paul Shepherd]

Can you imagine the upload/load times for that?! =P

[Michael]

Yes, but who cares?

It should be worth it!

[Paul Shepherd]

Well then mebbe I'll retake them all some time I've got half an hour to kill, and make it all prettiful for you. =P

[Michael]

[Mark]

It wouldnt take that long to download the image would it ?

[Rick Ace]

(15-01-2009 04:50 AM)Paul Shepherd Wrote:  Okay ladles and jellyspoons, here's the tutorial that... somebody wanted.

You'll have to excuse the occasional poor quality of these screenshots - to make things easier for me they were taken with a screencapture software that apparently doesn't do high-res. >_>

Oh, and the first picture is buggered, too. It didn't like menus either xD

Anyway, on with the show!





For the duration of this tutorial, I'll assume you're using Photoshop CS3, simply because I am. If you're not, you'll have to fill in the gaps yourself. =P



NEW FILE. Not that hard to work out, even with the poor image.

http://wimg.co.uk/bEaZFW.jpg



Choose your smiley size. I like 15x15, so that's what I set the canvass as. Means I don't have to crop later.

http://wimg.co.uk/bSIixm.jpg



You should now see something like this.

http://wimg.co.uk/GCv5y8.jpg



Use Ctrl and + to zoom in. I like to work between 800x and 1600x zoom.

http://wimg.co.uk/GB5CgP.jpg



Select the Circular Marquee tool. (top right of the tool bar - hold down on the square for a list of options)

http://wimg.co.uk/Ds845F.jpg



Make a new layer, with Ctrl & Shift & N. Feel free to name it. Don't use silly cute names.

http://wimg.co.uk/v7GPI3.jpg



You now have this!

http://wimg.co.uk/6cPODR.jpg



Click on the eye, on the background layer. (right hand side - yes I'm too lazy for arrows). We like transparency. =]

http://wimg.co.uk/7IMsJK.jpg



Now, using your circular marquee tool, mark the area you want to make the smiley in. Note that you can set anti-alias (fuzziness =P) using the checkbox at the top. I chose not to, because this plays merry hell with animated smileys.

http://wimg.co.uk/67QV3K.jpg



Making sure your fill colour is set to black (or whatever you want your border to be), Alt & Del to fill the selection.

http://wimg.co.uk/A1Onvw.jpg



New layer time again!

http://wimg.co.uk/hzTX_P.jpg



Now, make a second selection, this time smaller than the border. This area will be the coloured part of the smiley.

http://wimg.co.uk/NiGfWC.jpg



Change your colour to white, and fill with Alt & Del again.

http://wimg.co.uk/xIHF00.jpg



Now the screenshotting here isn't brilliant, due to the software not liking menus. However; Right click on the 'Colour' layer, and select 'Blending Options'. You should get this screen.

http://wimg.co.uk/jMSABn.jpg



Let's add a gradiant overlay.

http://wimg.co.uk/0mScT8.jpg



First I change the angle...

http://wimg.co.uk/9tpV_k.jpg



Then I click the gradient bar to get this screen.

http://wimg.co.uk/vojEBV.jpg



Double click one of the pointers on the bottom of the bar to get this.

http://wimg.co.uk/YMC3wo.jpg



Choose colours for both pointers, and then hit enter to find yourself back at the gradient overlay screen.

http://wimg.co.uk/DH6evm.jpg



At this point, feel free to play with the features. I also added a bevel, but I'm not going to show you all my settings, because that wouldn't help you much. Play, break things, and see what looks good.

http://wimg.co.uk/zW18nt.jpg



Hit enter, and voila!

http://wimg.co.uk/7pRkwM.jpg



New layer again!

http://wimg.co.uk/XcStVG.jpg



Select your pen tool! It might be hidden under the brush, so click and hold on that for your pen.

http://wimg.co.uk/bNwkRS.jpg



Now, start drawing your eyes! I like to keep eyes and mouths seperate, so that I can reuse the eyes on multiple smileys, without having to redraw them. =]

http://wimg.co.uk/IOYSni.jpg



Done! =]

http://wimg.co.uk/a1yTor.jpg



If you decide you don't like the placement, just select the pointer tool...

http://wimg.co.uk/WS4Kfp.jpg



... and move the entire layer. =]

http://wimg.co.uk/rWy6t0.jpg



And *another* new layer. =]

http://wimg.co.uk/jXIOER.jpg



Again, draw stuff. =P

http://wimg.co.uk/HP9ct8.jpg



Happy?

http://wimg.co.uk/B0S6X4.jpg



Well if you are, Ctrl & - back to 100% (or normal view) and see what things look like there. Make any changes necessary.

http://wimg.co.uk/0WKcgG.jpg



Now, here's something I forgot to mention before. SAVE YOUR BLOODY WORK! So often I don't, and end up regretting it. >_< I tend to save the main file as 'template.psd', but whatever suits you.

http://wimg.co.uk/gnh19A.jpg



Now, notice that we can hide layers?

http://wimg.co.uk/1FKzmB.jpg



Create a new one, for a different mouth this time.

http://wimg.co.uk/GxyCsX.jpg



Draw said mouth. =P

http://wimg.co.uk/vCVJBe.jpg



Now, because we can make several faces by hiding and showing different layers, we can keep ALL of the expressions in one psd file, and simply export them once we've made them through hiding layers. Ctrl & Shift & S to 'Save As'. I tend to use .gifs. Just because I do. =P

http://wimg.co.uk/o37RIB.jpg



Give it an obvious name. I shouldn't need to tell you this. =P

http://wimg.co.uk/Ag1XhV.jpg



The following two boxes will pop up - just 'Enter' through both.

http://wimg.co.uk/qB8i04.jpg
http://wimg.co.uk/2osTid.jpg


Now rearrange the layers to make your next face, and then Save As. Lather, Rinse, Repeat.

http://wimg.co.uk/cEr08D.jpg



And that's all folks. =]

Nice try, nice job

But I can't say its professional in any way either.... And you should have saved the images in PNG for better quality.

[Paul Shepherd]

I didn't have the option to. I was hoping the quality would be a little better. I just happened to have some software that told me it would save them automagically. I wasn't expecting them to come out so poorly. Taking better quality screenshots is on my list of things to do.

Regardless of slight fuzziness though, it's readable, so it's not a priority.

[Ajay]

Wouldn't it be easier if you put

Code:

[img][/img]

tags around all the images in the tutorial?

[Paul Shepherd]

[img] tags would kill the page. I'm fairly certain a few of the images are a bit wide. Or at least, they would the way I've got my browser on the page. =P Plus, I like really quick loading times, and I'm a crap wireless connection.

[Rick Ace]

You really should improve the professionalism... but then again, I'm a quality perfectist, in other words always look at quality. Even when I buy things at the store And thats probably a reason I'm over spending on brand name products