The gold lettering that I’ve created actually only uses layer styles. I’ll show you them below.

First, you have to get your shape/text. You can see that there is a lot of variety in the width of my letters and you’ll need this when we apply some of the layer styles later on.

For the fill color, I used #927847 or 146R, 120G, 71B.

Inner Shadow

Next, for some depth, I applied the Inner Shadow layer style.

These are the settings I used:

Blend Mode: Multiply (default)

Color: Black (default)

Opacity: 17%

Distance: 2px

Remember that your shadow distance will depend on your resolution. Since this is for web, the resolution is 72px, so the 2px distance is sufficient. I almost always lower the opacity, too, because I want my shadows to blend, not stand out and say, “Hey! I’m a shadow! Look at me!”

Bevel and Emboss

“But real designers don’t use Bevel and Emboss!” I hear you cry. Oh, just like they don’t use gradients, eh? In the right hands, all of these tools are useful. But that is what they are, tools. You have to know when and how to use them to get the end results you have in mind. Here is an appropriate place to use Bevel and Emboss.

Style: Inner Bevel

Technique: Chisel Hard

Depth: 301

Size: 2

Angle: 117 degrees

Altitude: 69 degrees

Highlight: Color Dodge, #faecb4, 54% opacity

Shadow: Multiply, #000000, 22% opacity

I also used the Contour layer style to darken the gold color a little more. You can decide if that’s what you want for your gold look (I think it looks good without it too).

Contour: Cone Inverted preset

And there you have it!

----------------------------------------

Thanks for subscribing to the Creative Curio feed! You can pick up your free subscriber gift, a handy cheat sheet of common Photoshop shortcuts,  by going to the PDF Download Page. You are most welcome to read the articles and comments that helped create this PDF and contribute more if you have some!

Thank you for being a loyal Creative Curio reader. Since you like the content I publish so much, why not tell a friend?

No problem. We can check out what other people have done in the past. Below I’ve shown the original piece and then I took it into Photoshop and sampled a spot from the center of the gradient and also from the darkest area of the gradient. Just use those values to create a cool gradient for yourself.

In the second part of this post, I’ll show you a little experiment I created with the gradients and some “glowing” splatters.

And yes, I’ve even seen some really nice gradients from those template websites. Here are a few particularly nice ones.

Check out 25 Great Examples of Using Gradient Effects in Web Designs from Six Revisions for more inspiration (I found some of the examples here).

Of course, a lot more goes into creating these finished pieces than just spiffy gradients. This delve into the details of specific gradients was to give you ideas for how the gradients are constructed and how to put the finishing touches on your designs. Notice, for example, in that the last one with the apples, the center of the gradient was actually more yellow than green, but when put together with the green in a gradient, your eye doesn’t register that.

Practical Experiment

I worked up a quick experiment myself, using the colors from the Buddha Wallpaper. I’ll also show you a really easy way to make your piece look like it’s glowing.

I started off with the radial gradient background. #3a565b for the center, fading out to #1f282c at the edges (grab the image and sample the squares in the corner).

Then, using a splatter brush from Bittbox, I clicked on a new layer using the color #77e5e4.

I duplicated that layer and then selected the bottom one. With my favorite filter, Gaussian Blur, I blurred the bottom splat layer about 3px (at 72 dpi, blur radius will be higher for higher res images) and set the layer mode to Color Dodge.

Then set the top splat layer (NO blur) to the Linear Dodge layer mode.

You can try different colors for the splats and other little details and do the same blur and layer modes as above to achieve this glowing effect. The pink I used here, for example, is #e577d2. The gradient fade to dark in the background helps to create the illusion that these pieces really are glowing.

More Resources

1stWebDesigner recently published two great articles on gradients:

36 Color Gradient Sets For Photoshop and Resource Sites: Part 1 has a list of sites with free gradient downloads for use with Photoshop.

Beautiful Gradient Effects On Web design – Research: Part 2 is similar to the first part of my article here and details some sites that use gradients in their design and how to achieve those effects.

----------------------------------------

Thanks for subscribing to the Creative Curio feed! You can pick up your free subscriber gift, a handy cheat sheet of common Photoshop shortcuts,  by going to the PDF Download Page. You are most welcome to read the articles and comments that helped create this PDF and contribute more if you have some!

Thank you for being a loyal Creative Curio reader. Since you like the content I publish so much, why not tell a friend?

Like the other style with the blocks of color, this will require some manual tweaks for each header.

I’ve set the width to column this time, unlike the previous example. I also needed to adjust the offset to get the rule where I wanted it to be vertically.

If you understood the way we did the last headers, this is very similar in that you must adjust the indents. With this style, though, unlike the last one, you’ll need to use soft returns (shift+enter) to get header text on a new line. If you use a hard return (regular enter), then you’ll get that black rule above every line.

Experiment with Rules

You can find new and interesting things to do with paragraph rules just through experimenting with all these different options. The ones that really make a difference are the Width, Offset and Left and Right Indent fields.

Here’s an idea for using a double rule:

Yes, ok, maybe that particular example is not altogether jaw-dropping, but have you ever thought about using two rules to create an overlapping effect like that?

If you want settings for this particular rule style here they are:

Note that the Rule Below overlaps the Rule Above. Stacking order matters here!

Ultimately, the point I want to demonstrate with these last two articles is that paragraph rules can be a powerful way to create interesting headers. You don’t just have to use them for the traditional solid rule above or below. Did you know there are also about a dozen different stroke styles you can choose from? Dashes, dots and even wavy lines and diamonds can add a different touch to your type.

Do you need more help with InDesign? Feel free to leave a comment below, contact me or head over to Lynda.com and sign up for their InDesign Tutorials. It’s only $25/mo for unlimited access! This is a resource I use myself and I highly recommend it. You can get a free 7 day pass to lynda.com, now too! Just follow that link.

Note: This post contains affiliate links. Please use them in an effort to Support Creative Curio. Thanks!

----------------------------------------

Thanks for subscribing to the Creative Curio feed! You can pick up your free subscriber gift, a handy cheat sheet of common Photoshop shortcuts,  by going to the PDF Download Page. You are most welcome to read the articles and comments that helped create this PDF and contribute more if you have some!

Thank you for being a loyal Creative Curio reader. Since you like the content I publish so much, why not tell a friend?

By modifying the paragraph rules found under paragraph panel flyout menu>Paragraph Rules… you can make these color blocks appear behind your text.

How big your text is and how big you want your color blocks to be will determine your exact settings, but if you turn on preview (check the box) then it shouldn’t be too difficult to simply adjust the values with the arrow keys until you get the desired effect.

Want an example? Okie-dokie.

Here I have Franklin Gothic Heavy set to 24/20 (24 pt font size with 20 pt leading) and all caps, which adds to the blocky feel of this look. Use the cap feature in the character settings to do this instead of retyping your text.

In my Paragraph Rules, I’m using a 24 pt “rule above.” Here’s the important part: I set the width to text and the offset to -4 pts. I also extended the left indent (negative number means it extends further to the left of the text) and the right indent (negative number here means it’s pushing the rule farther to the right). Without those settings, this is what the block behind the text would look like.

This is also a perfectly acceptable look, though I would offset it by a (positive) point so that the round letters (O, G, U, C, etc) aren’t hovering so awkwardly.

Oh, and for this setup to work, you have to either have single lines of text or add a hard return at the end of each line (otherwise the rule won’t show). If you don’t set a space after/before paragraph, the blocks won’t have the white gap between each line. If you want to adjust that gap, you’ll need to do it with the space before or after in the paragraph settings (I set mine to 5 pts in this example), as opposed to the leading like you would normally.

It’s not perfect, but if you’re only using it for small amounts of text like headers, then it’s not too much work to do the returns. Plus, because you will turn it into a paragraph style, you can update the look in a snap! Different color, different sized text or rule or space between paragraphs? Easy.

I’ve got another one to show you, but it’s a little more complicated and isn’t quite as clean. That’ll be up next week!

Do you need more help with InDesign? Feel free to leave a comment below, contact me or head over to Lynda.com and sign up for their InDesign Tutorials. It’s only $25/mo for unlimited access! This is a resource I use myself and I highly recommend it. You can get a free 7 day pass to lynda.com, now too! Just follow that link.

Note: This post contains affiliate links. Please use them in an effort to Support Creative Curio. Thanks!

----------------------------------------

Thanks for subscribing to the Creative Curio feed! You can pick up your free subscriber gift, a handy cheat sheet of common Photoshop shortcuts,  by going to the PDF Download Page. You are most welcome to read the articles and comments that helped create this PDF and contribute more if you have some!

Thank you for being a loyal Creative Curio reader. Since you like the content I publish so much, why not tell a friend?