Please note: for this tutorial, you should be familiar with basic Photoshop elements like: the gradient tool, the color picker, the ellipse tool, the type tool, and the layer styles palette.

Setting Up Your Background

Alright, let’s get crackin’. Open up Photoshop and create a new 600px square document and, using the gradient tool, fill the background with a subtle dark grey radial gradient. By having a slightly lighter grey in the center, grading to a slightly darker grey, we have a nice spotlighting effect. If you want, you can go to Filter > Noise > Add Noise and add some subtle noise texturing too. I used an Amount set to 1.5% with a Uniform distribution. You’ll end up with something like this:

Creating the Inset

We want our button’s background container to look like it’s “set-in” to the page, just a bit. Nice & subtle wins the race here. To do that, we need to create the inset.

First, go to your Photoshop color picker and set the foreground & background colors to two shades of grey: one slightly darker than the other, and both of which are darker than the background. The color picker tool should look like this (ish). We’re doing this to set up the gradient we’ll be applying in the layer styles palette a bit later.

Next, draw a circle in the center of page using the Ellipse Tool. Now, this first circle is not the initial button shape, so don’t draw it too small. Like so, in fact:

This will create a new shape layer in your Layers palette. You can see there are some effects going on in the above image – a subtle gradient, a bottom-edge highlight, and an inset shadow. In order to create these effects, we need to bring up Photoshop’s layer styles palette for that circular vector we just drew. Double-click the shape layer that is visible in the Layers Palette to do that. Note: we will be repeating this step for other shapes as we create them, so remember: double-click the layer you want to add styles to in order to bring up the layer styles palette!

Once you have your layer styles palette window open, we’ll apply the subtle gradient:

Checking the “Gradient Overlay” box brings up the window above. Click on the gradient bar and select the dark grey/darker grey gradient in the top left. This is visible because we set these colors using the color picker in a previous step – remember? Change the blend mode to normal, opacity to 100% and the rest of the settings should be good.

Next, we need to set up the Inner Shadow settings. Click the Inner Shadow checkbox in the same window that we set the gradient overlay in, and apply the following settings:

The Blend Mode is set to Multiply; the color is near-black, the opacity is 75% and the angle is 90 degrees. Distance is 3px and Size is 10px. This creates the inset shadow at the top of the circle.

Once we’ve set our Inset Shadow, we need to create the subtle highlight on the bottom edge. To do so, check the “Drop Shadow” box in the same layer styles window and apply the following settings:

The Blend Mode is set to Normal; the color is color is a light grey (we’ll expand on this); opacity is 100% and the angle is 90 degrees. The distance is 1px, spread and size are 0.

It’s important to note that you can achieve the same effect a variety of ways; this is just how I do it. You may have to play with the color in order to make sure the highlight isn’t too bright or too subtle, as well. That’s why it’s a lighter gray, and not a stark white.

Once we’ve completed the Drop Shadow settings, our circle should look like this:

Nice! On to the next.

Creating the Actual Button – First Circle

So the circle we just styled is a sort of “container” for the actual button; it isn’t the button itself. The first thing we need to do is figure out what color we want our button to be. I went with yellow; bright, attention-grabbing, and it works with our background. So, go to your Photoshop color picker and set the foreground to a paler yellow, and the background to a slightly more saturated yellow. Why? Because we’re setting up our gradient styles that we’ll apply shortly via the layer styles palette.

Draw a circle in the center of the page, about 75% the size of the last circle we worked on. We’ll apply some styles and get it looking like this:

Again, we have some subtle effects going on here, so let’s open up the layer styles palette (double-click on the layer under the Layers menu) and apply a Gradient Overlay first:

Blend Mode is normal; opacity is 100%. Make sure the paler yellow is at the top, grading to the saturated yellow at the bottom. Next, we’re going to apply a drop shadow, with these settings:

Color is black; opacity is 100%; blend mode is Multiply (Normal would work too); angle is 90 degrees. Distance is 5px, spread 0, size 10px. If we’re all on the same page, we’re done with this circle and it should look like so:

Slick. Next!

Creating the Actual Button – Second Circle

Now we’re going to give the button a nice, subtle concave look. To do that, we just need to duplicate the last layer we had, shrink it a touch from its center point, and change a few settings in the layer styles palette.

So, start by duplicating the layer. Right-click on the layer for the last circle we made, under the layers palette, and select “Duplicate”.

Next, make sure you have the newly duplicated layer selected and press COMMAND + T to transform the shape.

Then hold down ALT + SHIFT and size the new circular layer down just a bit – to about 80% of its original size. Here’s a size reference for you – we’ll jump into the layer styles palette next and get it looking like this:

So, to get it looking like the above version, we need to change a few things. Double-click the newly duplicated layer to enter into the layer styles palette, and click the Gradient Overlay checkbox. We’ll apply these settings:

All we have to do is check (or un-check, if the default for you was checked) the “Reverse” box next to the colored gradient bar. This gives the button the concave look by reversing the gradient so that the darker yellow is at the top, paler yellow at the bottom. Next, we need to apply a subtle Inner Shadow:

Blend mode is Normal, color is a slightly deeper yellow, opacity is 100% and angle is 90 degrees. Distance is 5px, choke is 0, size is 5px. This makes the top edge a bit more prevalent.

Lastly, we need to fix the drop shadow. Because we duplicated the previous yellow layer, we have a big black drop shadow – which isn’t what we want for the concave look. Instead, we want a nice, subtle bottom edge highlight. To do so, change the settings under Drop Shadow to the following:

Blend mode is normal, color is a slightly lighter/brighter yellow (not white!), opacity is 100%, and angle is 90 degrees. Distance/Spread/Size are 1/0/0, respectively.

If all has gone as planned, your button should now be looking like so:

Looking pretty sharp, no? I’d press that. All that’s left is some text to tell the user what to do!

Styling the Text

Let’s have two text styles happening here: a short but bold main heading, with a smaller subheading explaining what happens next. Press “T” to select Photoshop’s type tool, change the color to near-black & make sure the justification is set to center.

Click in the middle of the button and write whatever you want. For this tutorial, I wrote “CLICK ME” for line one, and “AND GREAT THINGS HAPPEN” for the second line. If you want to follow the style of this tutorial exactly, I’ve used League Gothic (set to 62pt) for the main heading and Open Sans Semibold (11pt) for the subheading. Both of these fonts are free too! We end up with this:

“But wait,” you exclaim, “there’s a slick letterpress effect going on there. How can I do that?” Nice eye, champ. To get the same effect, double-click the text layer under your Layers menu, select the Drop Shadow box, and apply the following settings:

Blend Mode is normal, color is a pale yellow, opacity is 100% and angle is 90 degrees. Distance/Spread/Size is 1/0/0 respectively.

And that’s it! You have a beautiful, inset circular button. And if you want to download the .PSD file, click the button you just made below!

Hope you enjoyed the tutorial, and happy designing!

Feedback for the presentation was positive, so I thought it might be worthwhile to share the slides on this here blog. In the presentation below, I cover the following…

• What I mean by “client-focused WordPress sites”
• Why we should make them, and
• How to start – tips, tricks, and specific areas.

The main part you’re likely interested in is the “How”. In that section, I talk about customizing the Visual Editor CSS, adding a “Styles” drop-down to tinyMCE, and how to handle advanced page layouts (amongst other things). Feel free to check out the slides below, and if you have any questions, fire away in the comments. Thanks!

Static HTML Drop Cap

If the site you’re working on is a static HTML site – meaning, no dynamic content, no CMS etc – adding a drop cap is a simple two-step process.

First, open your style.css file and add the following lines:

p.drop:first-letter {
font-size: 40px;
float: left;
margin:5px;
}

Next, add a class titled “drop” to the paragraph element you’d like to have the drop cap.

<p class="drop">This paragraph will start with a drop cap.</p>

There you go!

WordPress Dynamic Drop Cap

Drop caps are a little different when the content on the site is being handled by a CMS – a wrong bit of code can leave you with drop caps starting every paragraph. Not ideal.

But the code that follows won’t leave your web copy riddled with drop caps. Instead, it will turn the first letter of the first word of the first paragraph element on your page or post into a drop cap. Note the CSS class “.post”; this is WP specific and is generated by the loop. If you aren’t using the loop/don’t have a div class wrapping your content titled “.post”, this will not work.

Here’s the code:

.post p:first-child:first-letter {
font-size: 40px;
float: left;
margin:5px;
}

This is how we got rolling with drop caps over on the Chorus Magazine build.

Custom Styling Your Drop Cap Initial

Of course, once you have your drop cap working, play around with the styling if you wish. You can change the font; you can change the drop cap color; add text-shadows; background colors and so forth. The only limits are your imagination and what CSS can do. For some inspiration, check out Daily Drop Cap too!

This tutorial is quick and easy to follow; however, if you have any questions, please leave them in the comments.

We’ll be using this tutorial to add a shadow with perspective to a 960px by 350px wide box, which you will see on quite a few websites. This size is the generally accepted maximum width for viewer’s screen resolution, and the height brings a nice ratio to the table. Anyway, enough rambling. Hit the jump to follow along.

1. Create a New Photoshop Document

Fire up Photoshop and create a document 1440X900 pixels – or whatever you want, so long as it’s bigger than 960px by 350px. RGB color space, 72dpi. You don’t need a visual guide for this, right? Good.

2. Fill in Your Background Color

You don’t need to do this; I just filled mine in with grey and added some noise for texture (Filter->Noise->Add Noise->1.2). White will be fine though.

3. Create a Box 960px Wide by 350px High

This will be our main image. First, create a new layer. Then click the marquee tool; go to the top of  your window and select ‘Fixed Size’ from the drop down. Put in your values as shown below, and click in your working area once to make the selection.

4. Put Your _____ In That Box

The content of this box doesn’t matter right now; I just made a quick image of a recent logo design of ours. You can place in a photo, fill it with a solid color, or do anything else you wish. To fill in the box with a solid color, just select your desired color from the color picker window in the bottom left hand corner and hit Alt+Delete. If you’re using a photo, just crop it to 960px by 350px and drag it into this document.

5. Create the Shadow

To create the shadow, first create a new layer directly above the background layer. Then CMD + Click (CTRL + Click for Windows users) in the thumbnail of the Box layer – in the Layer palette, bottom right – we created in the previous step. This creates a selection 960px by 350px, which is the exact size we want for our shadow.

Next, fill that layer with the desired color of your shadow. Remember, shadows aren’t pure black. If you’re on a white background, choose a charcoal grey; if you’re on red, choose a deep/dark red. Since I am working on a grey background, I just used the same color of the background and changed the blending mode of the layer to “Multiply”. You can see the order of my layers below (note: I was lazy and didn’t title them). The top two (Vector Smart Object + Layer 1) make up the image inside the box, Layer 2 is my shadow, Background is background.

Since we created a selection of the Box layer, then filled it, our shadow is hiding behind that Box layer. Hold down CMD (CTRL for Windows) and hit the down arrow 5 or 6 times. This nudges our shadow down the page 50-60 pixels (depending on how many times you moved it). Now you can see the start of our shadow, directly below and partially hidden by the image.

6. Gaussian Blur

Shadows are never that precise on the edges; we need to blur them. To do that, make sure you have your shadow layer selected and go to Filters->Blur->Gaussian Blur and set the value to 7 or thereabouts; whatever you think looks good. Hit OK.

7. Set Guides

Our shadow is looking a bit more like a shadow by this point, but it needs some perspective. To do this, bring in two vertical guides and place them at equal distances from the edges of the Box layer. I used the outer left and right edges of the logo in my image as a reference point; you may have to measure yours.

Once you have the vertical guides in place, bring down a horizontal guide. Place it about halfway through your Box layer (I used the bottom center of the text “Warriors” for my reference here). The reason we are doing this is to make sure our perspective on the box is correct when we transform it in the next step.

8. Transform

Making sure your shadow layer is selected, hit CMD + T (CTRL + T for Windows) to select Transform. Then go up to the top right corner of the Transform box and hold down CMD (CTRL for Windows). This allows you to select that corner independently from the rest of the image. While holding CMD, click and drag the corner of the box to the intersection of the guides closest to you. Repeat this step for the other corner; you should have something like this below:

Hit Enter to accept the transformation.

9. Bask in Your 3D Awesomeness

That’s it! By creating a shadow and transforming it, we have immediately added depth and visual interest to an otherwise flat web design. Now, don’t go buck wild and do this everywhere – use it in good taste and when required. The same skills can be used on any box or shape too!

If you enjoyed this tutorial, please share it. Thanks!

1. Gradients

Gradients can add subtle depth and lighting effects to your web design. If you’re stuck on a flat design, all you might need to add is the most subtle of gradients. That being said, please don’t use any super harsh gradients; in my opinion, the best gradients use tints or shades of the same color (ie. no pink to yellow gradients, please). Of course, each design is unique. Gradients can be achieved two ways: in Photoshop and CSS3.

Photoshop Gradients

Photoshop’s gradient tool allows you complete control over your gradient – it’s easy to use and can make your designs really shine.

To use Photoshop’s gradient tool, simply do the following:

1. Click the icon shown in the bottom left corner of the above image.

2. Select subtle colors in your color swatches (bottom right corner) – these will make up your gradient.

3. At the top of the page, choose either linear or radial for your gradient, set the mode to Normal, and adjust the opacity to your liking.

4. Click and drag the gradient tool on the layer you wish, in the direction you want the gradient to move.

That’s it! Looking at the above image, it’s important to note that subtle colors are used (bottom right). Some examples of gradients being used in web design can be seen here & here.

CSS3 Gradients

CSS3 gradients are really cool – the more you can do in-browser, the better – but keep in mind that not everyone uses a CSS3-compatible browser, so not everyone will be able to see your gradients if you only use CSS3. That aside, here is a handy CSS3 gradient generator (scroll down the page bit). It allows you to use hex codes and generates the proper CSS code for you. Booya!

Hit the jump for the whole article!

2. One Pixel Lines

If your web design isn’t looking quite as sharp/crisp as you’d like, look at adding a subtle one-pixel line or border on the edges of some of your design elements. Make the line a slightly darker shade of the color you’re using, or a slightly lighter tint. Adding this one pixel line can be used to simulate lighting effects (the edges of a box being hit by light from above will have a highlight on the top, and a darker bottom edge), or it can be used to sharpen the edges of a design element. Again, this can be done in Photoshop or CSS.

Photoshop Lines

Photoshop’s line tool is easy to use and customize exactly to your liking. It’s great for client mockups; however, I recommend using CSS whenever possible in an actual website.

To use Photoshop’s line tool, simply

1. Click the icon shown in the bottom left corner of the image above

2. Select your desired color from the color palette

3. Set your settings at the top of the Photoshop window as desired

4. Click and drag to create the line.

In the above image, note how subtle the line is that appears at the bottom of the red bar. Barely noticeable, but it gives the design a nice, sharp edge.

CSS Lines

To create the same effect in CSS, all we would do is add a “border-bottom” element to the red div. For example:

border-bottom: solid 1px #700000;

That’s it!

3. Letterpress Text Effect

The letterpress text effect is a newer design technique that you’ll see in quite a few modern website designs. This style mimics the look of the letterpress printing technique, and when done correctly, it looks great. Once more, this can be done in Photoshop or CSS3.

Photoshop Letterpress Text Effect

A combination of layer effects makes up the letterpress text effect in Photoshop. Below are a series of images with separate dialogue boxes which made up the sample text effect. All you have to do is double click your text layer to open up this dialogue box, and pump in the following numbers.

Please note the drop shadow settings: Blend mode set to screen, color is white at 27% opacity, angle is 88 degrees (90 ideally; apparently I was rushing), distance 1px and everything else zeroed out. This gives you the nice white highlight.

Please note the inner shadow settings: Blend mode set to multiply, color is a navy blue at 44% opacity, 90 degree angle, distance of 2px and size of 1px. This gives you the “pressed-into-the-page” look.

Please note the gradient overlay settings: we chose colors similar to the background color (two shades of blue), blend mode is set to normal, opacity 100%, style is linear, angle is 90 degrees and scale is 150. This gives a nice lighting effect from the top, which complements the white highlight we did first.

Using all three of these effects subtly & together allows for a classy letterpress text effect, created all in Photoshop!

CSS3 Letterpress Text Effect

You can replicate this effect in CSS3, which is ideal as it can be applied to live text (as opposed to slicing the Photoshop text and using it as an image). However, as we stated earlier, not everyone has CSS3-compatible browsers, so be conscious of this when you make your decision on which to use.

Instead of reinventing the wheel, allow me to point you to a great tutorial by Chris Spooner over at Line25 showcasing, step-by-step, how to achieve this effect using only CSS3.

4. Subtle Textures

Textures are going to be huge in 2010 web designs, but I don’t mean the heavy grunge texturing of websites from a few years ago. I’m talking light, light texturing that almost simulates fine paper. The best way to do this is in Photoshop – allow me to explain, but first have a look at this example:

It might be a little tough to see at that size, but the blue bar has a light texture effect applied to it. Click the image to go to the live site and see what I mean.

In order to do this, first you need to either make a pattern yourself or get a nice noisy/grainy texture pack from the internet. Here’s a handy one right here! (instructions to install are on the site). Then select the layer you want to apply the texture to, double-click it in the layers menu to bring up the dialog box, and play with the settings. Here’s a standard grouping of settings I use, below.

If you can’t read that, we’re in the Pattern Overlay style with our desired pattern selected, blend mode is multiply, opacity is 11% and scale is at 50%.

In order to apply this to your live site, you’ll have to make a very careful slice and repeat the image along the x & y axes. As of now, there is no way to replicate texture in CSS3 to my knowledge.

5. Drop Shadows

Drop shadows, like every other element in this list, need to be used very lightly and sparingly. Please do not make your element look as if it’s being hit by the world’s harshest light while it’s floating 5 feet off of the page. Keep it subtle and your designs will flourish. Drop shadows can be achieved in either Photoshop or CSS3. For an example of a great site design using CSS3 drop shadows, look no further than Chris Coyier’s CSS-Tricks.com:

Click through to view the live site. Chris uses drop shadows very subtly, and in an interactive fashion – a great example of using drop shadows in web design.

Photoshop Drop Shadows Using Outer Glow

Lately I’ve been using Photoshop’s Outer Glow layer style as opposed to its Drop Shadow style when it comes to drop shadows on the web. Why? Because I mockup the designs in Photoshop, but then use CSS3 to generate the drop shadow on the actual website – and Photoshop’s Outer Glow looks a lot more like a CSS3 drop shadow in the manner I use it. However, the Photoshop Drop Shadow layer style is just fine depending on the elements of your web design. For this example, though, I’ll be using the Outer Glow layer style.

Note, again, how subtle the effect is. To use this effect, double click on the layer in the layer menu to bring up the dialog box. Click Outer Glow, and play with the settings to get what you want. For this example, my settings were as follows: Blend mode to Multiply, color is a navy blue at 40% opacity, size at 9px. The rest of the settings weren’t touched, and voila! We have a nice, even and subtle drop shadow.

CSS3 Drop Shadows

Instead of slicing around the image and capturing the shadow, why not replicate this effect using CSS3? In order to do so, you’ll need two lines of CSS code in order to have the effect work in all modern browsers:

-webkit-box-shadow: 1px 4px 10px #ccc;

-moz-box-shadow: 1px 4px 10px #ccc;

Where the first number is the horizontal distance from the div element; the second is the vertical distance from the div element; the third is the radius (blur) of the shadow; and the final is, of course, the color of the drop shadow.

There you go! 5 of my favorite Photoshop/CSS tricks when designing a website. Please keep in mind that any good design should use only one or a couple of these elements, and use them lightly. Do not combine everything together, or you risk overdesigning and having visual elements that make no sense together.

This list aside, what other design tricks do you use in your web designs?