PRODUCE A FANTASTIC SEAMLESS REPEATING BACKGROUND FOR USE ON YOUR WEBSITE USING JUST BASIC TOOLS IN PHOTOSHOP AND A BIT OF INSPIRATION

STYLES AND FASHIONS come and go, but there are those that are always in vogue – timeless designs that work whatever the era. The word ‘vintage’ suggests age, refinement, an air of sophistication and experience, and things that fit into this category will never go out of fashion. In this tutorial we’re going to create a classic fleur-de-lys in Photoshop, starting from a sketch, and work it up into a fantastic vintage wallpaper tile that will repeat perfectly for use on your website. To add to the effect, we will weather and age our design a little to help create that time-beaten look, and take a quick look at the CSS because you will need to get the image into your website once it’s all said and done. If you don’t fancy using a fleur-de-lys then feel free to sketch some other olde world motif. Simply scan it and follow on from step three; the design approach works for any kind of repeating pattern element you choose.

Author: Sam Hampton-Smith | Originally appeared in Issue 159

01 Do your research
We bang on about this, but it really is worthwhile doing your research and getting some real-world reference material. You can go to the library and get a book of interior design, visit your local wallpaper shop, or take the easy option and use a search engine to find images of the motif you have in mind.

02 Sketch your design

Sketch out your design elements on a sheet of paper. Don’t worry about getting all the fine details right at this stage, this is more the idea generation stage of the process so experiment with different shapes and forms. Consider how the design might sit in a pattern and make a note of this in sketch form.

03 Scan in your artwork

Plug in your scanner and get your sketches scanned in to your computer. Open up the sketches in Photoshop and decide on your favourite design. If you would like to incorporate elements from two sketches into one final design, that’s also fine; identify which part you want to start drawing first, and zoom in close around that object.

04 Select the Pen tool

For our particular motif here, we’re going to use the Pen tool to create a path. The Pen tool is ideal for areas with clearly defined edges. Click with the Pen tool to create a point on one corner of your sketch motif. Add a second point by clicking again further along the same edge. Photoshop will draw a straight line between the two points.

05 Paths and the Pen tool

You need to work your way around the element adding points until you can click on the original point to close the path. If you hold the mouse button down after clicking, you can drag your mouse to one side or the other and create a curved segment. When you complete each path double-click on the work path in the Paths panel and name the path.

06 Finish paths

Work your way around each object in turn. Use guides (View>Show>Guides) to get perfect alignment. We created a total of ten paths, one for each of the top and bottom petals, three for the central bands, and one for the central flourish. Once you’ve created all your paths you can turn off your scan layer by clicking on the eyeball icon in the layers panel.

07 Fill each path

On a new layer Ctrl/Cmd+Click on the first path to load it as a selection. You’ll now need to fill your selection with black by using the Paintbucket tool, or instead you can use the shortcut keys Alt/Opt+Delete. After completing this for the first fleur-de-lys, simply repeat the same process for each path in turn, making sure each new path is filled on a new layer.

08 Add layer styles

Choose one of your layers and select Layer>Layer Style>Gradient Overlay. Choose the copper preset. Tick the checkboxes for Bevel and Emboss and Texture. Play with the settings for both to create an effect you’re happy with. When you’re done, right-click on the layer in the layers panel and choose Copy Layer Style. Right-click and paste the layer style onto each layer in turn.

09 Merge and decorate

Turn off any background layers then choose Merge Visible from the Layer panel pop-out menu. Choose the Burn tool from the toolbox and burn in shadows across the fleur-de-lys to create a lightly distressed style. Add a Hue/Saturation adjustment layer (Layer>New Adjustment Layer>Hue/Saturation) and reduce the copper to silver by desaturating the image.

10 Lay out the pattern

Highlight the fleur-de-lys and Adjustment Layer layers and choose Convert to Smart Object from the layer panel menu. Increase your canvas size (Image>Canvas Size) to 1800px square and change your Grid options to Show grid lines every 200px (Photoshop/Edit> Preferences>Guides, Grid & Slices). Copy and position your fleur-de-lys across your canvas at even intervals.

11 Add texture

Choose a duck-egg blue for your foreground, and a slightly darker version for the background colour. On the background layer choose Filter>Render>Clouds. Duplicate this layer and position it at the top of the layer stack. Set the blending mode to Exclusion. Create another copy at the top of the stack and choose Filter>Render>Fibers. Set the blending mode to Overlay.

12 Extra distress

Download a free concrete texture from http://www. bittbox.com/freebies/free-texture-tuesday-concrete/ and then add it to your image. Set it to blend using Darker Color and reduce the opacity to approximately 20% so that there’s some general additional distress to your image.

13 Offset

Merge all visible layers together so that you have a single layer, then choose Filter>Other>Offset. Enter values of 900px for both Horizontal and Vertical; this is half the canvas size. You’ll probably see a slight seam across the middle of your image. Use the Clone Stamp tool to blur this seam.

14 Offset, tweak and save

Your image will now tile perfectly. Add a Curves Adjustment layer and Hue/Saturation Adjustment layer to increase contrast and re-colour the artwork if desired, then choose File>Save for Web and reduce the size of the output to be 450px by 450px. Save the image in JPEG format.