PREPARE YOUR EFFECTS WITH BASIC SHAPE, COLOUR AND TEXTURE APPLICATION
01
SET UP YOUR DOCUMENTSelect File>New and enter the width, height and resolution. Whether you work with 300dpi 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%.
02
PLAN YOUR PROJECTDesigning a stitching effect in Photoshop is very easy once you get the hang of three basic techniques. The first involves using simple shapes, the second takes advantage of Pattern styles and the third uses paths and text in a unique way. These techniques are complemented with the right type of blending and styling. When combined they create an authentic and aesthetically pleasing stitching effect, which is even further enhanced when applied to textured backgrounds.
03
USE A TEXTURED BACKGROUNDFill the canvas with a clay colour (#924c42). Apply a Pattern layer style by double-clicking the layer and selecting Pattern Overlay. Set a Groovepaper pattern with the Blend Mode set to Linear Burn, 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.
04
CREATE YOUR RIBBON SHAPEThe 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 red (#a80b0b). Position horizontally and in the centre, but up a notch so the top is hidden. Remove the two bottom anchor points and add one in the centre of the bottom path line. Drag it down by 40 pixels and curve off the edges with the Direct Selection tool.
074-077_AVP_104.indd 75 04/12/2012 11:48
WorldMags.net
WorldMags.net
076
techniques BUILD WEB ELEMENTS
05
apply texturePick a pattern of your choice from the Subtle Patterns pack we’ve been using. 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-red Stroke at around 4px and apply depth with a Gradient Overlay. This is much like in Step 3, but with Opacity at 50% and a Soft Light Blend Mode.
06
create stitchingZoom in at 3,200% to one of the edges of your ribbon, then create a small rounded-rectangle shape at around 2 x 8px. Go to 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.
07
styled stitchingFor 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.
08
add more detailWe 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, then apply an Inner Shadow layer style. We’ve now made our first element.
09
stitch some buttonsThe same technique as before can be applied to any number of elements. When applying to a button, add the stitch shapes to all sides. You can also create nice highlights and shadows by applying Drop Shadow with Distance set at 2, Size at 3 and a white Inner Shadow with Distance set at 1, Size at 0 and Blend Mode set to Soft Light. Also apply an Inner Glow and Satin – both at a low opacity to enhance the depth. Add a Pillow-style emboss to the text and create a recessed look.
quick tip
When dealing with vectors and path-related tools, be sure to have a good grid that clearly defines every pixel (Edit>Preferences>Guides, Grids and Slices). Also make sure that Pixel Snapping is enabled by selecting View>Snap/Snap to.
074-077_AVP_104.indd 76 04/12/2012 11:48
WorldMags.net
WorldMags.net
077
10
design your badgeCreate a new canvas and add a textured background like in Steps 1 to 3, alternating colour and pattern, for example a lilac colour (#856299) and fabric_1 pattern. However, set the Gradient Overlay to Radial rather than Linear. Activate the Ellipse tool and draw a circle of 200 x 200px in the centre, holding Shift to maintain ratio. With the circle path still in view, draw another smaller circle on the edge of the larger one while holding Shift. Keep drawing small circles around the edge of the circle until you have a badge shape (see example).
13
bring the detailsGrab the Ellipse Shape tool and drag from the centre holding Shift+Opt/Alt to draw a circle with a 200px diameter. Hit Opt/Alt and click to draw another circle inside the one you’ve just applied with a diameter of 150px. Reduce the Fill to 20%, adding an Inner Shadow with Distance set at 1 and Size set at 2. Add a white Drop Shadow with Blend Mode set to Soft Light, Opacity at 45%, Distance at 1 and Size at 0. Finally add some text, using Drop Shadow settings to add depth.
14
stitch a patternThe third technique to create stitching uses patterns, particularly striped patterns. Start by creating a new canvas with a width of 20px and a height of 1px. Fill half of the canvas with colour and select Edit>Define Pattern. Create a new canvas, draw a rectangle with the Rectangle tool, set its Fill Opacity to 0 and add the pattern. With the Marquee Rectangle tool, draw a rectangle that covers our previously drawn rectangle but leaves 1-2px at the top and bottom. Next go to Layer>Layer Mask>Hide Selection, simply applying some styling like in Step 7 and we’re done! Unfortunately this method doesn’t use any vector paths or type so is not scalable.
15
unify the designUsing the three techniques we have discussed, you’ll now be able to produce an array of different elements, which you can then combine into a web page or app design. Be sure to experiment with different characters using the Type tool and Path technique. Feel free to add more detail to individual stitches, for example holes on either side of a stitch or a striped pattern to give more of a stringed feel. Try out varying methods to make something truly unique.
11
use shadowAdd a 1px Stroke with a darker shade of the badge colour. Add an Inner Glow with the Size set at around 20 and Opacity at 30%. Set the Blend Mode to Soft Light, then add an Inner Shadow and Drop Shadow similar to the button element in Step 9. Create a nice pattern, in this case a large leather emblem, and add the Satin, setting the Blend Mode to Soft Light, Opacity to 35%, Angle to 35 degrees, Distance to 14, Size to 40 and make sure Anti- aliased and Invert are both activated. Finally we’ll set the Contour option to Cone Inverted.
12
add stitching to curved shapesDuplicate your badge layer, hit Cmd/Ctrl+T then click and hold one of the corners, dragging inwards while holding Shift and Opt/Alt to maintain the shape ratio and central position. Reduce the shape by 30px, then activate your Text tool and select a 13px Helvetica font. Hover your text cursor over the visible path, clicking then typing hyphens until these surround the edge of the path. Increase spacing between hyphens by editing with the Character panel’s Tracking values. Apply a Pillow-style emboss like in Step 7 and reduce Layer Fill Opacity to 30%.
advanced shape and path tools
When delving into paths and shapes, it can seem a bit daunting at first so here are a few tips. More tools can be listed when clicking and holding on an icon in the left toolbar. When drawing shapes and paths we can add to a shape area by holding Shift, subtract by holding Opt/Alt and intersect by holding Opt/Alt+Shift. When altering anchor points, use the Convert Point tool to adjust individual handles. Use the Direct Selection tool to select multiple anchor points by holding Shift or clicking and dragging.
techniques BUILD WEB ELEMENTS
074-077_AVP_104.indd 77 04/12/2012 16:27
WorldMags.net
WorldMags.net
078
techniques code stitch effect
New Media