The Internet is a hotbed for building trends. You can literally sit through thousands of different styles, but each year a few step to the front and are hard to ignore. Web stitch effects are an obvious example. The popularity of these looks is easy to understand.
Stitch effects coupled with textured elements take a digital format and give tangibility, breathing life into your 2D designs. In this tutorial we will show you how to simulate a stitched look, inspired by various everyday fabrics, specifically for web. Photoshop has some excellent tools that are perfect for crafting various examples of our intended effect. These include versatile Shape and Path tool functionality, as well as Pattern options and a range of styling methods to give the stitching a realistic and authentic feel.
Step 1: Set up your Document
Select File>New and enter the width, height and resolution. Whether you work with 300cbi or 72dpi isn’t hugely important, as we will be using the vector-based Shape tools provided in Photoshop, which are infinitely scalable. However just keep in mind that your final elements will be scaled to fit a canvas with a minimum width and height of 300px and a resolution of 72. Set up guides by selecting View>New Guide, setting one horizontal and another vertical both at 50%.
Step 2: Use a Textured Background
Fill the canvas with a colour (#551978) Apply a Pattern layer style by double-clicking the layer and selecting Pattern Overlay. Set a watercolor pattern with the Blend Mode set to Linear Bum, then apply a Gradient Overlay from the Layer Style options to create depth. Use the default gradient, reversed, with Opacity set at 65%, an angle of 90 degrees and Blend Mode set to Overlay. Also add an Inner Glow set to black, with Blend Mode set to Overlay, Opacity at 25% and Size at 140.
Step 3: Create your Ribbon Shape
The first element we will be making is a ribbon, so grab the Rounded Rectangle tool and draw a thin rectangle at 100 x 250px, with a Radius of 4px. The Fill colour needs to be lighter and more saturated than the Background colour, we applied a purple (#9f6bbd). Position horizontally and in the centre, but up a notch so the top is hidden. Remove the two bottom anchor points using Delete Anchor Point Tool from Toolbox and add one in the centre of the bottom path line using Add Anchor Point Tool. Drag it down by 60 pixels and curve off the edges with the Direct Selection tool.
Step 4: Apply Texture
Pick a pattern of your choice from the Patterns available. Feel Free to play around with the opacity and modes to experiment and get a feel for how each texture interacts with your colour. If it’s a light pattern apply a Linear Burn, if it’s dark then apply Soft Light or Overlay. Add a darker-purple Stroke at around 4px and apply depth with a Gradient Overlay. This is much like in Step 2, but with Opacity at 50% and a Soft Light Blend Mode.
Step 5: Create Stitching
Zoom in at 3,200% to one of the edges of your ribbon, then create a small rounded-rectangle shape at around 2 x 8px. Goto Edit>Transform Path> Perspective and drag the bottom of the rectangle left. Grab the Path Selection tool, click on the slanted rectangle, copy, paste, place the duplicate under the original layer then move it so it‘s three pixels under the original. Repeat until you fill one side of your ribbon, Cmd/Ctrl-click all your rounded-rectangle layers, duplicate and position on the alternate side.
Step 6: Styled Stitching
For a more authentic look, double-click one of your rounded-rectangle shape layers, activating the Layer Style options. Set Advanced Blending>Fill Opacity at 50%. then add a Bevel & Emboss. Change Style to Pillow Emboss, Technique to Chisel Soft and reduce Size to 1. In the Shading options set Shadow and Highlight mode to Overlay, then set Shadow Mode Opacity at 100%. Add an Inner Shadow with the Blend Mode set to Overlay, Opacity at 100%,
Angle at -90 degrees, Distance at 2 and Size at 3.
Step 7: Add More Detail
We now have the basics, but they look a bit flat. Add a shadow by duplicating the ribbon layer, Ctrl/ right-click, clear the effects and move the layer below the original. Change the Fill colour to black, grab the Direct Selection tool and move the bottom anchor point even further down, about 10px. With the layer selected and the path visible, navigate to the Properties panel and set Feather at 4px. Add a few black icons vertically, aligned set at a low opacity around 65%, then apply an Inner Shadow layer style.
We’ve now made an element which can be used anywhere while designing, specially your website as per your need.