Create a Branded Text Necklace in Photoshop

We all are well aware of the importance of typography in web design. It should be eye-catching and unique to help your design stand out from a crowd of cybercompetitors. There are endless possibilities; all you need is your imagination and the right tool to help you turn it into a reality.  Undoubtedly, Photoshop is a great tool in this regard. It has tremendous potential, but we need to polish our Photoshop skills continuously.

So, today I am going to show you how to create a branded text necklace effect in Photoshop. We will learn how to use and manipulate various layer styling techniques, as well as different filters and tools to achieve the desired effect. Hopefully you will learn some handy tips on the way. Let’s start designing!

Final Result:

text effect

Step 1

Create a new document in Photoshop with a 1000px width and a 700px height.

text effect

Step 2

Fill the background with color #313131 using the paint bucket tool.

text effect

Step 3

Set #46d400 as your foreground color and select the type tool to type text on a new layer. We’ll use “Bauhaus 93” font here.

text effect

Step 4

Duplicate the text layer by going to “Layer” > “Duplicate layer.” Now double-click on the original text layer to open the layer style window. Apply the following settings on it.

text effect

text effect

text effect

text effect

Step 5

Now, double-click on the duplicated text layer and apply the following layer style settings.

text effect

text effect

text effect

text effect

Step 6

Next, press Ctrl + <click on any of the text layers> to make selection around the text. Now create a new layer and go to “Select” > “Modify” > “Contract.” Contract this selection by 10px.

text effect

Set #81a601 as your foreground color and fill the selection with this color using the paint bucket tool. Label this layer as inside text.

text effect

Step 7

Apply the following layer style settings on the inside text layer.

text effect

text effect

text effect

Step 8

Next, we’ll create highlights over the text. Set pure white as the foreground color and make the shape shown below either using the ellipse tool or the pen tool (Tool mode: Shape). Change the blending mode of this layer to “Overlay” and reduce its opacity to 75%.

text effect

In order to confine the highlight to the letter “D”, click on the ellipse layer then press Ctrl + <click on the text layer> to make selection around it. After that, click on the icon of “Add layer mask,” which is present at the bottom of the layers panel.

text effect

Step 9

Make highlights for the rest of the letters using the same method.

text effect

Step 10

Next, we’ll create chains to give the visual impression that our text is supported by them. Select the pen tool (Tool mode: Shape) to draw the shape shown below in pure white color.

text effect

Duplicate this layer and go to “Edit” > “Transform” > “Flip Horizontal.” Arrange it as shown below. After that, select both layers and right-click over these layers to choose “Merge Shapes” from the menu.

text effect

Keep on duplicating and merging these shapes until you get two chains like the ones shown below.

text effect

Step 11

Double-click on the chains merged layer and apply the following layer style settings.

text effect

text effect

text effect

Step 12

Duplicate the chains layer, drag it towards the right side as shown below, and turn them black using color overlay.

text effect

Step 13

Now go to “Filter” > “Blur” > “Gaussian Blur.” Use the following values to add blur to the chain shadows.

text effect

Reduce the opacity of this layer to 55%.

text effect

Step 14

Next, to form shadow for the text itself, duplicate the text layer and remove its effects by dragging them towards the “Delete layer” icon, which is present at the bottom of the layers panel. Place this layer below the original text layers. Once you are done, make the text pure black using color overlay as we did for the chains in step 12.

text effect

Step 15

Now go to “Filter” > “Blur” > “Motion Blur” and apply the following settings to give the shadow the following look.

text effect

Step 16

Press Ctrl+ “T” to activate the free transform tool. Now, tilt the shadow layer 25⁰ towards the right as shown below.

text effect

Clear the shadow that is above the text using the soft round eraser tool.

text effect

Step 17

To blend the shadow more nicely, go to “Filter” > “Blur” > “Gaussian Blur.” Use a 4.5px blur radius.

text effect

Step 18

Next, we’ll give our background some texture. To do so, set default colors that are black and white. Create a new layer just above the background layer and go to “Filter” >“Render” > “Clouds.”

text effect

Step 19

Now, click on the clouds layer and go to “Filter” > “Noise” > “Add Noise.” Use the following settings here.

text effect

Change the blending mode of this textured layer to “Overlay” and reduce its opacity to 30%.

text effect

Step 20

We are almost done. However, we need to adjust the lighting. Light source should be somewhere near the top-left corner. So, select the gradient tool, pick the black and white radial gradient from the top properties bar and drag it from the top-left corner to the right-bottom corner of the canvas on a new layer just above the textured layer.

text effect

Change the blending mode of gradient layer to “soft light” and reduce its opacity to 45%.

text effect

Step 21

Create a new layer above the gradient layer and apply the soft round brush tool in pure black color all around the text as shown below.

text effect

Drag this layer to the right and downward a bit. Change its blending mode to “Multiply” and reduce opacity to 40%.

text effect

That’s it. Our text effect is all done. I hope you guys enjoyed it. Do share your thoughts!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://e23242354 sharma john

    its to good

  • Wilson

    Kudos to you for a very clear and instructive set of instructions. The project made use of multiple techniques that one can readily apply to other projects. It was fascinating to see how adjusting or adding a few effects here and there created such a powerful visual. The cumulative effects were so balanced as to add to the overall visual impact.

    On the technical side, I used Photoshop CS6 and was prompted to have my chain shadow layers rasterized before PS would apply the blur effects…in case others experience this. I went ahead and gave the green light and proceeded with every step without any glitches.