Hi, thanks for coming to Idiot Tips 101. Just going to do a quick register before I start. Phil? Jake? Samantha? Stuart? sexygurl75? Good, you're all here. Right, let's get to it.
This one's a weird one. If you've left it on Photoshop's default settings, it's at a crazy angle, and although it's got a cool future-y vibe, it's going to make you look like a Comic Sans enthusiast.
So, you're thinking, what's a good default, then? And what the hell do I use it for? Personally, I use it to give a nice shadow to buttons, like so: http://cl.ly/FOw9
To achieve this, all you've got to do is:
1. Change the angle to 0°.
2. Set the distance to 2px and size to 10px (although I'd adjust to preference).
3. Bam! Subtle shadowing effects.
Here's the layer style window I use: http://cl.ly/FQmj
Bevel and Emboss
So the button we just made looks pretty good, but it could "pop" a bit more. BZZZT! Wrong answer. Ain't no such thing as pop, just more details. But the bevel tool, when used subtly, adds a whole new layer of detail.
You know what? This one's a bit more practical, and definitely needs you to fine-tune it yourself. My only tip here is to never let the opacity on the style itself go over 25%. If you do, I'll hunt you down and krill you (that's right, I'll slap you in the face with a fish). Here's the layer style window: http://cl.ly/FQ8Z
That's al— oh, you want the .gif again? Sigh. Here you go: http://cl.ly/FPoa
Right, I'm going to go do whatever it is a panda teacher does when he's done with the day. Probably play some Xbox or eat bamboo. Best of luck in your layer style endeavours!
over 1 year ago
Thank you, teacher.
They're a lot more than what meets the eye.This tutorial shows how they can be used to achieve complex metal shading.
That's helpful! Have fun eating bamboo
Thank you for this 101, quite useful indeed :)
On a side note... *phew* I guess I'm not the only one who can't stand the look of 'em when I see someone using default styles or changes all the default settings of layer styles immediately... Or uses the term "default look" in a sentence, e.g. "Look at that default look of that shadow! Ugh, I hate '120% 5px 0% 5px'." ;)
Idiot Tips 101 sounds like a newsletter or site I would definitely subscribe to...
Good show old chap. Pip pip.
@Visual Idiot Solid tip, I'll definitely keep this in mind :) You have the best sense of humour of any designer by far haha!
@Asher That's awesome! I never knew you could create a shiny metal effect :D
@Chris Veto It's firstname.lastname@example.org
@Louis Bullock Lmao. I think I know her.
I thought this was common knowledge :P But thanks anyway.
Not sure which I like more, the commentary or the tutorial.
This is fantastic, great help for newbies like myself. PLEASE keep these coming, teach us how to drop shadow properly ;)
satin as I call it pluto, never gets talked about or used. GJ =)
font por favor
My hard disk ate my homework. =( I'll do some make up work tonight! Thanks Teach.
Thanks a lot for this!
Heh, neeed more :) Thanks!
@Jared Erondu Uni Sans!
Thanks guys, happy to know I have some knowledge to impart or something.
Awesome, thanks for sharing this!
Your writing style always put a smile on my face ;)
Thanks for the insight!
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter