Welcome to the second cDebris tutorial. Today we’ll be elaborating on some of the texturing tips mentioned in Tutorial 001 and combining them with some other easy Photoshop techniques to produce a rounded button that can then be used in a web site, including configurable text. This tutorial will also serve as a basis for the next one (coming soon) which will go into detail on how to make “Smart Mouseovers” using only a single image and a bunch of CSS trickery. Much better than JavaScript rollovers, trust me.
Anyway, this is a pretty easy tutorial. The final result will look like this:
Let’s get started!
Step 1 – Find a Base Texture
This is pretty much a repeat of the process from the first tutorial. Flickr provides a ton of great textures, many of them with creative commons licenses. I found a terrific one posted by ian.crowther, though I only ended up using the top part of it:
Step 2 – Crop, Resize, Sharpen
Here’s our base texture, pulled into photoshop and cropped, but still at gigantic size:
That’s not going to work for us, obviously, so let’s resize it down to something more manageable, shall we? Just go to the Image menu, choose “image size” and set your dimensions. I chose 200 wide and the height, with “constrain aspect ratio” checked, automatically set itself to 103. That’ll work. It’s a little big, but hey … it’s a tutorial. Check it:
Much better.
Step 3 – Find Another Texture
What’s better than one texture? Two textures of course. Texture layering is one of my five keys to success when it comes to making cool images. The other four keys? Start with good source pics, experiment a lot, don’t oversaturate/overdarken (I sometimes fail to remember this one), and listen to loud music while you work!
Anyway, I found another awesome, creative-commons-licensed texture, this one by joelgoodman on Flickr.
And with a little pasting and resizing (hint: Edit menu, “transform”, “scale”) we’ve now got a part of it that I like sitting on top of our original texture:
Now just drop the layer mode to “multiply” and we get this:
Which is a pretty cool texture, and good enough for our needs without further embellishment! So let’s make us a button, huh?
Step 4 – The Button Shape
The first thing I like to do is make a new layer, and then set some guides showing about how large I want my button to be. Then I use photoshop’s shape tool to draw a curved rectangle. You can scroll through the different shape tool settings by hitting shift-u, or just hitting U and then checking out the shapes up in your top toolbar (assuming you’re using a modern version of Photoshop. If you’re not … God help you. I remember Photoshops 3 through CS2). If you do things right, your result (zoomed in to 300%) should look like this:
Step 5 – Carving It Out
Next thing I do is turn off several of the layers, leaving just the original composite texture we had at the end of Step 3. I ctrl-click on the hidden layer that contains the button shape. This makes a selection based on that layer, without turning that layer on – very handy! Then I shift-ctrl-c (copy all layers — this basically means ‘copy what I can see’), and ctrl-v. This pastes the multi-layer copy. Now I make a new layer above everything else, and fill it with white. It’s like starting over fresh except all your other stuff is below it. This isn’t necessary, really … it’s just how I work. Move the white background below the layer I just pasted, and we’ve got this:
As you can see, I turned off all the layers that are no longer important. We’re really just working with “layer 4″ there – the textured button shape.
Step 6 – Give It Some Depth
Now, there’s about a hojillion ways of giving a shape depth in Photoshop. For simplicity’s sake, I’m going to stick with some very basic, easy things you can do using layer styles. Purists who love channels, paths and the like, please forgive me.
Double-click your layer (not on the text) to bring up the layer styles menu. Then turn on “Bevel and Emboss” and play around with the settings until you have something you like. I ended up with this:
Then turn on the Gradient Overlay and mess around some more. Remember: experimentation is good! When you have something you like, it’ll probably look similar to this:
And if it doesn’t, well … hopefully it looks good. That’s all that really matters, when you get down to it. Anyway, let’s give it a nice drop shadow just to increase the feeling of depth. That’s always fun. Turn on the Drop Shadow option, play around … you get the idea. Should end up looking roughly like this:
Sweet. Now turn the white layer off again, hit ctrl-a (select all), ctrl-shift-c, ctrl-n (new doc), enter, and ctrl-v (paste). Now you’ve got just the button and its shadow, with no excess border. See what I mean?
Step 7 – Save It
Now you have a choice – you can either save-for-web it with the white background on, or turn it off and save it as a 24-bit, transparent PNG. Keep in mind that IE6 and similar, older browsers don’t natively support 24-bit transparent PNGs (only 8-bit, which is crappy). There are tricks to get around this, of course, but that goes beyond the scope of this tutorial. Anyway, I ended up just saving it as a jpg with a white background, like this:
Now, let’s stop screwing around in Photoshop and get this thing into a web page, eh?
Step 8 – The HTML
This part is mostly simple, other than some minorly tricky stuff you need to remember when you get to the CSS stuff. First off, you need something upon which to click. Forms and their components are a pain in the ass, and I avoid them whenever possible, so let’s go with an anchor tag:
<a href="#" class="button">Click Me!</a>
Very exciting, eh? But that’s the beauty of CSS, of course … all your transformational work is done with stylesheets, leaving only the barebones html, easily readable by spiders and the like. And easier to modify, in the long run.
Here’s the CSS you need. It’s a pretty big chunk:
