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!
Create a new document in Photoshop with a 1000px width and a 700px height.
Fill the background with color #313131 using the paint bucket tool.
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.
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.
Now, double-click on the duplicated text layer and apply the following layer style settings.
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.
Set #81a601 as your foreground color and fill the selection with this color using the paint bucket tool. Label this layer as inside text.
Apply the following layer style settings on the inside text layer.
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%.
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.
Make highlights for the rest of the letters using the same method.
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.
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.
Keep on duplicating and merging these shapes until you get two chains like the ones shown below.
Double-click on the chains merged layer and apply the following layer style settings.
Duplicate the chains layer, drag it towards the right side as shown below, and turn them black using color overlay.
Now go to “Filter” > “Blur” > “Gaussian Blur.” Use the following values to add blur to the chain shadows.
Reduce the opacity of this layer to 55%.
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.
Now go to “Filter” > “Blur” > “Motion Blur” and apply the following settings to give the shadow the following look.
Press Ctrl+ “T” to activate the free transform tool. Now, tilt the shadow layer 25⁰ towards the right as shown below.
Clear the shadow that is above the text using the soft round eraser tool.
To blend the shadow more nicely, go to “Filter” > “Blur” > “Gaussian Blur.” Use a 4.5px blur radius.
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.”
Now, click on the clouds layer and go to “Filter” > “Noise” > “Add Noise.” Use the following settings here.
Change the blending mode of this textured layer to “Overlay” and reduce its opacity to 30%.
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.
Change the blending mode of gradient layer to “soft light” and reduce its opacity to 45%.
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.
Drag this layer to the right and downward a bit. Change its blending mode to “Multiply” and reduce opacity to 40%.
That’s it. Our text effect is all done. I hope you guys enjoyed it. Do share your thoughts!
Five Ways to Remove Backgrounds in Photoshop in 2021
By Amber Leigh Turner,
Need to remove an image background? Learn five ways to remove backgrounds in Photoshop, depending on the kind of image you're working with.
Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups
By Daniel Schwarz,
Take your wireframes and mockups to the next level by creating interactive FIgma prototypes that are navigable and animated. Here's how!
5 Web Design Trends for 2021
By SitePoint Sponsors,
Web design trends come and go. 2020 was no exception. Web designers will see some familiar trends replaced by safer and more dependable design choices.
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.