Tweed is a woven fabric that can have a herringbone, twill or plain structure. The color patterns can be stripes, plaids and checks. This cloth is associated with sophistication and class in design. For that reason, it comes in handy for Web designers and 3D texture artists who want to create their own custom tweeds for use in their projects. In this tutorial, you will find out how to make tweed in Photoshop in a few manageable steps.
To perform this how to, you should comprehend Photoshop's basic tools before starting. Since the majority of the process deals with elements common to all image editors, you don't need to have Adobe Photoshop to create the look. It should take 10 to 15 minutes to finish the task.
First, you will learn how to make a herringbone micro pattern. This image, created on the pixel level, will define the tweed appearance in your picture. It is extremely easy to make one as long as you have a graph of it and a little patience.
The optional last step will add an extra level of realism to your project by placing loose fibers across the surface. This will reproduce the stray wool hairs that are characteristic of this sturdy cloth. Then, you will see how to combine all the layers together to get an authentic final result.
Creating a Diagonal Pixel Background Effect
In this video clip, the instructor takes you through the steps of making a diagonal micro pattern that can be used for backgrounds of all kinds. Although he doesn't go on to show it on fabric, you do get to see the process needed to make your herringbone image. The running time is 2:57.
Step 1: Establishing the Colors
The first layer that you will add to your document will set up the base color pattern. Since tweed can be a stripe, check or plaid, feel free to use either when you customize it. In this example, a purple, green and brown stripe is used.
- Create a new document by typing Ctrl+N.
- Set the width to 13 and height to 6 pixels.
- Give the file a transparent background.
- Name the transparent layer baseColors.
- Zoom in to 1600% by holding down Ctrl and tapping the + key until the image is maxed out.
- Activate the rectangular marquee tool with the M shortcut.
- Drag a selection around the first three columns and fill with the color #65464c.
- Color the next column #484850.
- Then, select the following five columns and make them #65464c.
- The next column is #915646.
- Finally, fill the last pixels with the color #65464c.
- Now, you need to save this file and set it aside until later.
Background Colors
Step 2: Herringbone Micro Pattern
At this point, you will make the micro pattern that is responsible for giving this particular tweed its structure. Although this sample uses herringbone, you could substitute a twill or plain balanced weave.
- Create a new document.
- Set the width and height to 6 pixels and give the file a transparent background.
- Change the foreground color to #9B8B8c.
- Zoom in to 1600% by holding down Ctrl and tapping the + key.
- Place a guide line along each 1 x 1 pixel square.
- Name the layer herringbone.
- Activate the rectangular marquee tool with the M shortcut.
- Drag a 1 x 1 pixel square in the bottom right corner. The guides will help show you how many pixels you are selecting.
- Fill the pixel with your foreground color.
- Refer to the image below and fill in the rest of the opaque squares.
- Select the whole image with Ctrl + A then go to Edit -> Define Pattern. Name it herringbone.
- Save the pixel file and close it.
- Go back to your original file and create a new layer called herringbonePattern.
- Fill it with your pattern. Use the shortcut Shift + F5. Then, choose the one you just made.
- Change the opacity to 50%.
- Now, you select all the graphic and define a new pattern called myTweed.
Note: To learn more about micro patterns, visit How to Make Micro Patterns in Photoshop.
Herringbone Micro Pattern
Final Pattern
Step 3: Application
To finish up, you will place random fibers across the picture. This will reinforce the woolen appearance. Then, you will take your finished texture and apply it to a sample cloth to see it in a practical situation. Keep in mind the the highlights on this fabric should be extremely soft and diffuse.
- Create a new document with a width and height of 500 pixels and give the file a transparent background.
- Call the original layer tweed.
- Fill the layer with myTweed using the shortcut Shift + F5.
- Add grain by picking Filter -> Noise -> Add Noise. Choose Gaussian and Monochromatic at 15%.
- Use Shift + Ctrl + N to add a new layer. Name it fibers.
- Stray Fibers:
- Change your foreground color to white and the background to black.
- Go to Filter -> Render -> Clouds.
- Then, add Filter -> Sketch -> Chrome with a Detail setting of 10 and Smoothness of 0. Repeat this step a second time.
- Pick Filter -> Brush Strokes -> Ink Outlines. Use the following settings: Stroke: 1, Dark Intensity: 0, Light Intensity: 50.
- Open Image -> Adjustments -> Threshold. This will flatten out the values to just black and white.
- Go to Select -> Color Range. Change the Select option to Sampled Colors then activate the first eyedropper on the window. After this, click a black spot in your image window and click OK.
- Delete the selection.
- Change the layer blend mode to Overlay or Soft Light. Blend modes are located in the top left corner of the layer window. Make the opacity between 25% and 50%.
- Test It:
- Make a new layer named cloth then drag it under your tweed.
- Using the gradient tool, fill the background with a black to white transition. This tool can be accessed with the shortcut G.
- Change the mode on the tool to difference then make a few short horizontal drags. This layer will represent a cloth texture you can blend with your texture.
- Change the layer blend mode on the layer tweed to Overlay.
Tweed Aplication