There’s a noticeable style trending at present, and that is the popular stitched effect, used to decorate logos and panels in numerous web design layouts. This is a great way to add a real-world feel to your projects, giving designs an aesthetic that you can almost touch. It’s no surprise then, that the purpose of applying the stitch is most noticeable when working with textured elements. These are, in turn, fundamental to achieving a wholly authentic look on your website.
In this tutorial, we’ll show you how to use some of Photoshop’s one-click and more intuitive options to cleverly combine stitch and texture effects. The use of Layer Styles will become the main focus of your application, applying Drop Shadow, Stroke, and Bevel & Emboss effects to create 3D looks. Also explored are the means with which you can create similar stitch effects using CSS3 code, for those of you that want a quicker fix than Photoshop allows.
Sketch it out
The first step when embarking on a project like this is to sketch out your ideas, getting a grip on what functionality you’d like to incorporate, how the user will interact with your gallery, and at least an idea of the visual approach you’d like to take. Spend five minutes with your sketch pad or a scrap of paper to work out the basics first!
Select File>New. Set Width at 450 pixels, Height at 450 pixels, Background Contents to Black. Select Filter>Texture>Texturize. Set Texture to Canvas, Scaling between 90% and 100%, Relief between 2 and 5. Click OK. Duplicate your layer (Ctrl/Cmd+J) and select Edit>Transform>Rotate 90° CW. Set the duplicate layer blending mode to Screen, editing layer opacity to verify effect strength.
Merge both layers (Ctrl/Cmd+Shift+E) then press Ctrl/Cmd+E and increase the brightness of your layer by pulling your curve upwards. Select Filter>Sharpen>Smart Sharpen. Set Amount at 50%, Radius at 3.0 pixels. Select Edit>Define Pattern naming it ‘Made Texture’. Select File>New. Set Width at 1 pixel, Height at 3 pixels. Zoom in to 3200%.
Save a Pattern Preset
Select 1 pixel (one third) at the top of your layer with the Rectangle Marquee tool. Fill this with black (Shift+F5). Deactivate your selection (Cmd/Ctrl+D) then select Edit>Define Pattern titling Texture Horizontal. Select Image>Image Rotation>90° CCW. Select Edit>Define Pattern, saving as Texture Vertical. Now it’s time to apply some texture.
Work with gradients
Easily establish your design’s colour scheme by changing the colours of your mock shapes. Simply double click them and choose in the Color Picker. We’ve applied a pastel purple (#62587C). Select Layer>Layer Style>Gradient Overlay. Set a black to transparent gradient style, setting Blend Mode to Overlay, Opacity at 40%, Style to Radial, and activate Reverse.
Add pattern presets
Select Pattern Overlay from the Layer Style options and open the pattern picker. Apply your Texture Horizontal preset, setting Blend Mode to Overlay, Opacity at 40%. Duplicate this layer, setting layer opacity at 70%. Select Filter>Noise>Add Noise, setting Amount at 20%, Distribution to Gaussian, activating Monochromatic. Click OK to exit these options.
Authentic stitch effect
Now we’re going to show you how to create one of several stitch effects in this tutorial. Start by activating your banner shape layer and select the Rounded Rectangle tool. Set shape Radius to 2mm then draw out your base shape. Select Gradient Overlay from the Layer Style options. Set a black to white to black gradient style.
Add pattern presets
Also set Blend Mode to Multiply, Opacity at 35%, Angle at 0 degrees. Activate Outer Glow (Layer Style), setting Blend Mode to Normal, Noise at 17%, Size at 4 pixels and colour to a darker purple. Also apply a Drop Shadow (Layer Style), Opacity at 75%, Angle 21 degrees and repeat the texture application from step 6.
Manual stitch effects
Create a new layer, placed beneath your stitch layer. Apply a 40% Hardness black brush beneath the right edge of your shape. Create another new layer above your stitch layer, applying a small hard 30% white brush, to the bottom edge of your stitch layer, setting blending mode to Overlay.
Place your stitches
The basic premise of your stitch effect is here, creating a looped stitch with a bevelled edge. Shift+click each related stitch layer, Ctrl+click one of these layers and select Convert to Smart Object. Now we duplicate and place our stitches, which are situated in each corner of our panel layer.
Perfect with Layer Styles
Compliment this stitch effect by firstly applying a Bevel & Emboss Layer Style. Set Style to Inner Bevel, Technique to Chisel Hard. Set Size at 5 pixels, Angle at 99 degrees. Set Highlight and Shadow Mode opacities at both 70%. Also apply a black to white Gradient Overlay, Angle set at 90 degrees, Blend Mode to Overlay, Opacity at 30%.
Perfect with Layer Styles (2)
Finish your panel effect by adding a Drop Shadow Layer Style with the Opacity at 40%, Distance at 4 pixels, Size at 30 pixels, and also the same texturing technique that we used in step 6. Take a moment to perceive the combination of effects that help to create one of your authentic stitch effects.
Save a style preset
Reactivate your Layer Styles applied to your panel layer at select Styles then click New Style. Name this Entire texture effect. Now you have saved the look of your panel as a preset. Now you can apply uniform Layer Style effects across all your layers. Finish here by transforming your panel layers into a Smart Object.
Add your Style preset
We’ve created part of our banner, or badge if you will, using the Polygon tool, set at 12 sides, Polygon Options Smooth Corners, Smooth Indents and Star>Indent Side By 20% all active. We then select Layer>Layer Styles>Blending Options and apply our Style preset, with each Layer Style applied fully customisable to create the look you want.
Prepping for the second stitch effect
Activate your logo shape layer and refrain from applying your Style preset. Instead apply a Stroke Layer Style, set at a 20 pixels Size, Position set to Outside, Blend Mode set to Linear Burn. Set your Color to the same as your Polygonal layer. Also apply a 45% Opacity Inner Shadow, Choke set to 35%, Size 5 pixels.
Make a work path from a selection
Finish this layer effect by once again applying texturing effects (see step 6). Ctrl+click your logo layer Vector Mask thumbnail making a selection. Activate the Paths panel and press the Make Work Path from Selection button. Back in your layers panel select the type tool. Click in the outside of your path, apply dashes, and then scale inside your logo shape.
Type stitch effect
Once again you can add texture effects as you see fit. But, you must apply a Drop Shadow Layer Style, setting Opacity at 80%, Distance at 1 pixels, Size at 4 pixels. The effects may seem small when zoomed out, but it’s this attention to detail that adds authenticity to
Subtle stitch effects
This effect is similar to the previous Type stitch, but is more subtle. It also seems to work best with straight edges. Begin by activating your Type tool and again typing out dashed lines, this time aligned near the edge of one of your ribbon layers. Use a darker variation of this layer’s colour.
Alternate Drop Shadow
With this Type layer active select Drop Shadow from your Layer Style Options. We’re going to apply the opposite of what you’d normally expect. Set Color to pure white (#ffffff) and Blend Mode to Overlay. Set Opacity at 75%, Angle at -90 degrees, Distance at 2 pixels. A very subtle, yet authentic effect.
Finalise your ribbon
From here apply texture effects to fashion a complete look in your ribbon. To create ribbon edges, simply select the Ellipse tool, draw out a circle shape, place behind both your panel and ribbon layer, and align with the ribbon layer edge. Simply duplicate and place a copy shape the other side to finish the effect.
Apply Clipping Mask
From here you can repeat any of the above effects to create authentic looks. However, if you want photo-real textures you can easily apply these. Simply copy and paste in the texture about your layer (sxc.hu; 1154337), set a Luminosity blending mode, 10% Opacity. Ctrl+click your layer and select Create Clipping Mask.
We’ve applied a photo texture to our panel, and in some cases you may need to increase or decrease layer size to get the texture detail you want. A little word to the wise – when doing so make sure you’re not distorting pixels. Do so by selecting Photoshop>
Preferences>General, setting the according Image Interpolation setting.
Piece it all together
Using the effects you’ve learned here you can now go ahead and style the rest of your panels, button and ribbons. We’ve applied and tweaked the supplied Entire effects style to our main panel and subsequent buttons. We’ve used the stitch effect from steps 16 and 17 to create authentic looks.
You can apply similar effects to your type, but don’t over-egg it as this can disrupt the legibility in important information in your website. Use bold type faces – in this case we’ve used Tahoma and a free Dafont typeface, Bebas (www.dafont.com/bebas.font). We’ve added a little something extra to our body text, applying a letterpress effect.