Photoshop Digital Sewing Thread
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.
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.
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:-
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.
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.
Step 6 – Final Details
Here is the final effect with some included shadow where the needle pierces the fabric and a basic background texture.
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
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
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
nice tut
Very simple, and cool tut. Nicely done.
Wow cool it looks like a cloth! hahaha nice tutorial
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!
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 ;)
Very, very cool! I love your approach to the stitching! :)
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.
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!
THANKS!!!
Very great tutorial!!!
Cool it looks like a cloth! nice tutorial
This is the best tutorial of digital sewing i found on the internet. Thnks and congratulations! Vinicius – Brazil.
Geez.. exactly what I’m looking for. Do you have any more tutorials similar to this one? I tried to google sewing font effect, thread font effect, stitching effect, and I can only find this blog. I think this tut is rare! Great job for this awesome tutorial! ^_^
This is the best tutorial of digital sewing i found on the internet. Thnks and congratulations!
Uttam – India
This is cool. I saw a graphics in TITAN FASTRACK Wild Life – Wrist Watch series. It had TITAN Logo with a cool stich effect on the box. This tut helps me do it by myself.
Great work i really love your tutorial………i was looking for it from long time.
If the ‘Stroke Path’ option is disabled when you right click, you’re doing it wrong (like I was). Do this:
1) Create a new layer
2) Go to the Paths panel (Window > Paths)
3) Create a new Path by clicking on the small button at the bottom of the panel
4) Then use the Pen tool to write your name (or any path tool)
5) Right click the name that you just wrote and you should see ‘Stroke Path’.
Hope this helps somebody
wow, very cool and easy! :) Thanks a bunch!
Love this tutorial, especially the details. These stitches look so real. Beautiful. Thank you!
Thanks for the great tutorial. One with not many steps, simple to follow and clear pictures! Perfect!
Thanks for the great tut!
Real nice website, this really answered some of my questions. Thank you!. If you have a chance check out my site Clothing and Apparel.