Stitched text

19/12/2008

Create an illusion as if text was stitched on a piece of cloth in your web-to-print templates.

Stitched text web-to-print template

Before you start

Since we are going for a realistic look, we need to make the text appear like the letters are made from cloth and each of them are stitched on a piece of cloth. For this we need a texture that looks like some kind of a cloth.

Lets create this texture using Adobe Photoshop.

Create a new document with the same size as the page size of your web-to-print template, draw a rectangle that covers the whole area and fill it with the color you chose for the cloth.

Web-to-print Difuse glow settings inside Photoshop/

Rasterize the shape (Right click on the layer / Rasterize layer), go to Filter/Distort/Diffuse Glow and adjust the difuse glow settings.

/

Web-to-print Difuse glow texture previewThe result should be similar to this.

/

Web-to-print Ink outlines settings inside Photoshop/

Duplicate the layer (Ctrl+J) and add Angled Bruch strokes to the copy (Filter/Brush Strokes/Ink Outlines).

Web-to-print Darken overlay optionChange the overlay mode of the copied layer to Darken and set its opacity to 40%.

Web-to-print texture preview/

The result should be similar to this.

/

/

You can also add a shadow to the texture. Create a new layer and use the gradient tool to add a small transparent gradient in the upper left corner.

Web-to-print Photoshop texture output/

/

The result should be similar to this. Save the texture as a jpeg file.

/

/

/

/

Note. Repeat these steps or simply adjust the Hue/Saturation, Color Balance or Brightness/Contrast values found under the Image menu to make two more textures that only differ in colors. We we’ll use each of them as the background fill, text fill and stitches fill inside CorelDRAW. Read about creating realistic texts on textured surfaces in Surface text post.

Fonts

Web-to-print Stitched and Stitching fonts overlayed/

This technique requires special fonts. The reason for this is that each letter in the plain base font needs to align with the stitching font that goes on top of it perfectly. Read more about Modifying fonts for effects.

Download the Stitched and Stitching fonts used in this template.

Note. Check out the Font resources page to find more free font archives and learn how to create your own font.

Dummy text

Input the dummy text, set its horizontal alignment and turn it into a variable web-to-print field.

Duplicate the dummy text and assign the Stitched font to the original and the Stitching font to the copy.

Note. Both dummy texts have to be placed perfectly on top of each other. A simple Ctrl+C/Ctrl+V copy will do the trick. Do not move them separately or change the horizontal or vertical alignment to only one of them.

Assigning the textures

Background

Web-to-print background fill/

Import the image you made for the background cloth texture and place it as the bottom object on the page.

Note. Center it on the page by pressing P on the keyboard.

The result should be similar to this.

/

Dummy text letters

Web-to-print base text fill/

Import the image that you will use as the fill for the text letters and place it inside the Base dummy text as a PowerClip (Effects/PowerClip/Place Inside Container).

The result should be similar to this.

/

/

Dummy text stitches

Web-to-print stitches fill/

One more to go! Use the third image you made as a PowerClip for the Stitches dummy text.

The result should be similar to this.

/

/

/

Note. It’s a good idea to center each of the bitmaps you just used as background and dummy fills on the page so that they align perfectly. Right click on the PowerClip (background, base or stitches text), go to Edit Content, select the bitmap and press P on the keyboard to center it on the page. Repeat for all PowerClips.

Final touches

Lets add a small shadow to the text. Select a dummy text (Ex. The base dummy text), click on Drop Shadow tool from the tool box menu on the left and choose Small Glow preset from the presets drop down menu in the top properties bar.

Set the drop shadow properties as you wish. Here are the settings you might want to use as a reference.

Web-to-print drop shadow settings

Note. Repeat this step for the Stitches dummy text as well.

Web-to-print stitches template/

/

The result should be similar to this.

All done!

Our web-to-print software can handle this effect easily! Upload the template into your catalog and test it.

Stitched text web-to-print template

Try this web-to-print template.

Download the FREE CorelDRAW template file.

Note. This technique was inspired by a Photoshop Tutorial on photoshopstar.com

See also: