Subscribe

RSS Feed | RSS Email | Twitter
 

Sponsors

 

Search / Categories

 

Digital Sewing with Photoshop Thread

Posted on April 17th, 2009 by Zen Elements 9 Comments

Digital Thread Stitching Tutorial

Forget hunting for the needle and thread, sew digitally with this Photoshop tutorial and create your very own Digital Stitching. Source files are included and I promise you, you won’t have to spend hours threading a needle!

 

Step 1 – The inevitable ‘New Document’

Open Photoshop and create a New Document.
For the purpose of this tutorial, we have a document 630 pixels wide by 350 pixels.

Step 2 – Observe

Before we continue, take a look at the clothes you are wearing and somewhere on there, there will be some stitching. Look at how the fibres of the thread cross and twist together and what shadows are created.

This is what we are going to recreate in Photoshop.

Step 3 – Creating the ‘thread’

All we create here is a single stitch of thread as it appears above fabric, as this is all we are ever going to see.

In a new layer with a hard-edged, circular brush and in solid black, draw the following. Don’t worry if yours is not exactly the same as many threads are different and in any case, at the scale we will be ‘sewing’, minor details will not be seen.

Digital Thread Stitching Tutorial

Using the Rectangular Marquee Tool (M), select a box around your stitch and making sure you have a transparent background, create a brush present.
To do this go to Edit » Define Brush Preset… give it a name.

Digital Thread Stitching Tutorial

Step 4 – Threading the needle…

With the Brush Tool (B) selected, go to your newly created thread brush preset.

In order to achieve a natural sewing effect, we will apply a few settings through the Photoshop Brush Engine:-

Digital Thread Stitching Tutorial

Digital Thread Stitching Tutorial

You can see now in the preview window that the stitching flows more naturally and so now we can begin ‘sewing’.

NOTE: Depending on the size of stitching you wish to use will determine what you need to set in the Brush Engine. For example, if you are looking for a widely spaced stitch, alter the ‘Spacing’ accordingly until you find something that is suitable in the preview window.

Step 5 – Digital Sewing

Chose an appropriate colour for your thread and using the Pen Tool (P), create a path of your name or a word you desire to have in thread.

Digital Thread Stitching Tutorial

With your path(s) selected, right click and apply Stroke Path… making sure ‘Brush’ is selected in the dropdown and that there is not a check in ‘Simulate Pressure’.

Finally apply a subtle Bevel and Emboss for some highlight and shadow.

Digital Thread Stitching Tutorial

Digital Thread Stitching Tutorial

Step 6 – Final Details

Here is the final effect with some included shadow where the needle pierces the fabric and a basic background texture.

Digital Thread Stitching Tutorial

The shadow is created just using an opaque black circular brush on a layer behind the thread and exercising some patience. The background is just a layer with a canvas texture applied to it and two layers above with fibres set at a low opacity in Multiply blend mode.

Step 7 – Digital Stitching a website graphic

Digital Thread Stitching Tutorial

Above is another example of how this digital stitching can be applied in the creation of web site graphics.

Some examples of Digitally Sewn Thread

Digital Thread Stitching Source File

I hope you got something out of this tutorial and if you’ve got some digitally sewn creations, please feel free to share them in a comment! I have also included the source file for this tutorial above which is free for you to download and use.

Thanks for reading!

Alex | @ZenElements


 
RSS
Facebook
StumbleUpon

Comments (9)

hvdesignsApril 19th, 2009 at 5:43 pm

nice tut

MikeApril 22nd, 2009 at 3:53 am

Very simple, and cool tut. Nicely done.

huwaw69April 27th, 2009 at 2:11 pm

Wow cool it looks like a cloth! hahaha nice tutorial

photo retouchingMay 2nd, 2009 at 9:53 am

A really nice result! I spend most of my time doing photo retouching but it is nice to come to these sort of tutorials and see some creative design work!

Zen ElementsMay 3rd, 2009 at 11:20 am

Thank you folks, glad you liked the tutorial and got something out of this.

@Photo Retouching | I use Photoshop for a plethora of things, including photo retouches and editing but the amount of things you can do are truly is endless. I’m glad you enjoyed the tutorial and who knows, you might next be able to slip this technique in something of a more contemporary photo piece ;)

patrick jamesMay 4th, 2009 at 10:30 pm

Very, very cool! I love your approach to the stitching! :)

Buy Sewing SuppliesMay 17th, 2009 at 8:30 am

I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

Jason AmentJune 3rd, 2009 at 2:57 pm

Thanks for the tut. I’m impatient… You could create a second “Stitch Shadow” brush with the first one (Same attributes) that would stroke the path as well on a second layer. I haven’t tried it yet, but I’m sure that it will work and save time. Thanks again!

RnRDecember 27th, 2009 at 6:06 pm

THANKS!!!

Very great tutorial!!!

Leave a comment

Your comment

top
  • Zen Elements on Facebook
  • Zen Elements on Flickr
  • Zen Elements on Twitter
  • Zen Elements RSS Feed

© Zen Elements Ltd. 2008. All Rights Reserved. Sitemap | CSS | XHTML | Terms & Conditions