CerebralDebris

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:

    a.button {
        display:block;
        width:160px; height:56px;
        padding:20px 14px 0px 10px;
        margin:auto;
        background:transparent url("button.jpg") no-repeat;
        color:#FFF;
        font-size:24px;
        font-weight:bold;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-align:center;
        text-decoration:none;
    }

Let’s take a closer look at what we’re doing there. I’ve grouped the CSS into three sections: physical shape, imagery, and text treatment. I try to stay pretty organized with my stylesheets … when you’re working with CSS documents that are 3000+ lines long, it comes in handy, trust me. Anyway, let’s break this down, line by line:

display:block; – This is vital. It tells your browser to treat the anchor tag as a block-level element and not an inline-element. Without this, things like width, height, and padding may not work.

width:160px; height:56px; – These are not the actual dimensions of the image. The basic formula here is: subtract all PADDING, MARGINS, and BORDERS to get to the final width and height. Look at the next line for more info.

Padding:20px 14px 0px 10px; – This means: 20 pixels top padding, 14pixels right padding, 0 pixels bottom padding, 10 pixels left padding. Why more right than left? Because the shadow extends slightly further to the right than our actual button. This helps the font centering (below) look correct. Crafty!

margin:auto; - this is just in here so if you stick the anchor in a centered container, it will float in the center, rather than slam to the left (which is the default way that display:block tends to work).

background:transparent url(“button.jpg”) no-repeat; – ah, the nitty-gritty of making the button look like our image. This sets the background’s color to “transparent” (ie: clear), sets the background to our button image, and tells it not to repeat the background, in case the container gets forced too big, for some reason (too much text, for example).

color:#FFF; – Make the font white. In CSS you can shorthand full hex values that have duplicate vaules. So FFFFFF becomes FFF, FF6600 becomes F60, and such. Not vital, but a nice thing to know.

font-size:24px; – Set the font size.

font-weight:bold; – Make it bold.

font-family:Verdana, Arial, Helvetica, sans-serif; – Pretty much every computer has one of the first three fonts, but on the off chance the system doesn’t, it’s damn near guaranteed to have a default sans-serif font of some sort.

text-align:center; – center the text.

text-decoration:none; – Don’t underline the text, even though it’s a link (which most browsers underline automatically).

Now, here’s what we get:

Bigtime exciting, I know … but hey, a tutorial’s gotta start somewhere. Here are some handy links:

• » Example HTML
• » Tutorial Zip File (includes PSD, Example HTML, and example JPG)

I hope this was useful to you. Feel free to leave questions or comments! Next time, I’ll show you how to make this same button change on mouse over without using any JavaScript at all. Hooray!