Tutorial How to create life-like embroidery on Photoshop

[Andonis1997]

Hey guys,

Embroidery has been a much talked about topic on here, and whether it can be done.
It can and I'm about to show you how.

Now, I'm sorry if I explain this like you're all 6 year olds, but some things may help you get a decent sized logo or just a better understanding of Photoshop.
Also, I'm using a Macbook so I'm sorry if it isn't the same steps for Windows users.

I'm going to bold everything really important for the tl;dr people if they know what they're doing already.
And you'll need Adobe Illustrator for one step, so if you don't have that, choose a logo that does not have a black outline surrounding it.

First, get your logo. I'm going to use the FC Barcelona logo because it's got a mixture of curves and straight lines.
So I'm obviously searching 'FC Barcelona' in google and going to click on the Wikipedia page. Then click on the Barcelona logo to the right (unless you're reading it in Arabic or Hebrew, it's on the left ).
There should be the logo and underneath there should be other sizes in PNG format.

Always click the highest quality one (in this case, 2000px) for the best results with anything you do in terms of logos.
You should get this size.


Now we save the image to our desktop or somewhere where you can find it. Then open it with Photoshop because the background will turn black if we paste it directly into Photoshop from the web and of course, my Barça logo has a black outline so we can't get rid of it with the background.

find a picture of an embroidered logo of the team of your choice on the web. Write 'embroidered logo' or 'stitched logo', either one will do. Then go into Google images (assuming you are using google). OR you can search the teams kit, staying in Google images or go to the club's official online shop and look at the logo whether it's stuck on or sewn. Try to find a decent resolution version on either site and try to look at the logo there.

In this case, I've found a great quality picture on the Official Store. HOWEVER I'm going to change a few things up.

Next, go to this website and Download the brush pack. Credit to nadinepau.


Once you've followed all the necessary steps, go into finder, to your downloads and go to Embroidery_Pack etc... .It should be a folder containing two items. Double click the .abr file.
Wait for like 5 seconds and it should be ready to use in your photoshop brushes. There should also be another .abr file called Embroidery-Brush. Click that too and wait for a few seconds.


As you can see, we don't need most of them (especially the nadinepau wordmark brush on the bottom right) but we need the one that have the 11 underneath them.

This is the brush that we will create 'magic' with.
(continuing on in the next post)

 

[Andonis1997]

Now to the editing of the logo. Stitching is cut into segments usually and we will do exactly that, so I'm starting with the colour black.

So we draw a path above the section we want to use. Doesn't have to be exact. Though if you have sharp edges, on the logo (like my logo) then you need to join it up with the point on the outline as well like I tried to do....If that made any sense


Get up a new layer, then go to 'paths', right click the layer and then click 'fill path'. You should get this end result. Or something similar.


I'll use the magic wand tool on the yellow part of the logo, click on the beige shape's layer and delete all of it that's inside the yellow.....by pressing delete.


Do the same to the black outline of the logo, except once you select the black with the wand, then you go 'select > inverse'. It will delete all of the beige shape that's outside the selection. From there, select the beige shape layer and delete all that's outside the black. Once again by pressing delete.

This is what I got and similar to what you should get.

If you want you can move the shape to the right a little to get rid of that line of black showing on the right, but it's not necessary. Sorry about the edges being a little rough.

Now that we have that, we can finally use the brush tool.
Get up a new layer and get the downloaded brush that is size 11 at the moment, and change it to whatever size you think will fit 'snug'. ..
I've gone for size 46 and we try to follow the shape quite quickly with the brush. If we go slow, then the brush will go everywhere. As shown here.
So try to be as quick as you can while still controlling the brush. So, not as fast as you can go.

I've used too big of a brush size, so I'll go down to size 38.
I've figured out a cheat way below that will make it much easier for straight lines, however it won't work at all for curves.
Click the brush, but make sure the brush's bottom point is a little bit off of the shape's top left point (well for me anyway). Then do the opposite. The top point of the brush then should be a little be off of the bottom right point of the shape.
If you click the brush and it turns out like this...

Even though you made sure both points were a little bit apart, then that's fine because if you do the opposite, it will turn out fine, like this:

Now we magic wand the beige shape (by clicking on the shape's layer first, then using the magic wand first). Then select>inverse, click on the stitching layer and delete the excess. OR instead of the magic wand, command-click the thumbnail of the shape and then click the stitching layer and delete the excess.

You should end up with something like this:


We double click the shape layer and bring up the 'fx' menu or layer style menu.
Click on colour overlay and choose black as the colour (to match the logo).

Click OK.


Then do the same with the layer with the brush strokes or 'stitching' layer.
Choose a dark grey, but make sure it's not too dark, but not light.



(continuing on next post, 10 uploaded images per post..)

 

[Andonis1997]

So there's one section done. Now I'll do the curved section to show you how to do it.

So repeat the steps. You start by drawing the shape, filling it, making it fit inside the black outline by deleting the excess shape, using the paintbrush with the stitching brush (freehand, not the 'cheat' way) and making the stitching fit inside the drawn beige shape. You should get to this.


Now colour it with the colour overlay like the first section of the outline in an earlier post.

The curves are much harder to do, so you can go a little bit slower, rather than undoing all your mistakes that are bound to happen by rushing it!
If you don't mind I'll complete the rest of that half of the outline using the same technique.
Here's how the completed half should look like.


Now, select all the layers of the stitching and the shapes (command-click OR select the first layer and shift-click the last one) and press command-G to make a new group (just in case we stuff it up)

Now duplicate the group (right click the group>duplicate group), and inside the 1st group, merge all of the stitching layers and then the shape layers (select all of the layers inside, right click>merge layers).

On the stitching layer, go to the Layer Style menu and go to Inner glow. Play around with the levels, though you still want to see the edges of the stitching (just).
However you NEED to set the blend mode to Multiply for the black glow to show up.


From there, we can duplicate the 2 merged layers (the stitching and shape layers), then flip them horizontally (edit>transform>flip horizontal) and move it to the other, untouched side of the Barcelona logo.

You can get rid of the shapes layers now if you want to get a cleaner and smoother finish, although I would keep the second group's shape layers just in case
If you get excess stitching because of removing the shapes, do the same steps with the magic tool and the delete button.
We can also use the same technique and rules with the FCB text in the middle of the logo however using a smaller brush size and different levels with the inner glow. (I recommend keeping 34% opacity for stitching whenever you use an inner glow for stitching.)




But for now, we shall move on to the rest of the logo, starting with the white and yellow on the top, and the yellow football.
Then I will explain using a different texture for the yellow background and the reds. I'll also show you how to make your own Texture to achieve working with the yellow and the reds

 

[Andonis1997]

So, here's the second part of the embroidery, the yellow and white stitching on the top of the logo. As these are light colours, I will try to use the same technique and method but change it up slightly.

I'll start with the yellow stripes, as these are easier. And as it's straight, I can use the 'cheat way'.
Unlike the example I used, the Catalan stripes are vertical, so I can put the brush right at the top, in the middle.
I've got a white and black dashed line to show you where I'm talking about.

So I magic wand all 5 of the yellow stripes (hold shift and click all of the stripes), copy and paste them. Then I get up a new layer, select the 'stitching' brush and put it to a level that just fits inside with a little bit of the edge hanging out of it (for me, size 62)
Here's what I get:

I've kept a lot of the top to be ready for the next step I can do which is to duplicate the stitching 4 times so we can use it for the other 4 yellow stripes.

As you can see, the most-right one still has a lot of yellow showing, so I can simply duplicate another stitching layer, move it to the left, making sure you don't make too much of a gap between the other layer.

Now, I can command-click the yellow stripes layer's thumbnail, and delete all of the extra parts of the stitching one by one (you have to do it one by one..)
Here's my result:

From now I will also follow the highlights and colours from the stitching shown in the Official Store photos.

Now merge the stitching. Here's where it differs from the black stitching.

From there we can colour overlay the stitching layers as the same colour as the yellow stripes and we can also colour overlay the vertical stripes a slightly lighter yellow. Light enough to notice a difference when you zoom out.

And finally, add an inner glow, and make it the same colour as the stripes underneath the stitching.
I've used these settings.


Time for the white.
But I won't need to explain this one, I'd just do the same things except: I will increase the size of the brush and instead of having the colour overlay of the stitching white, I will have it a very light grey to distinguish it from the background.

The top half is now half complete.


When I next get time, I will be using a new texture, and I will start the other thing I wanted to start. The gold and the reds' textures and how to make it.

 

[Andonis1997]

And again.

 

[Andonis1997]

Reserved

 

[Andonis1997]

Reserved.

 

[Andonis1997]

Reserved

 

[Andonis1997]

Reserved.

Just making sure I don't run out of posts..

 

[Andonis1997]

Reserved.

I have completed the first part of the actual embroidery if you guys want to try that.. Not now, as it's 2:30AEST obviously, but feel free to let me know if I explained something weirdly and ask questions if you need to.

 

[Klim]

Now we save the image to our desktop or somewhere where you can find it. Then open it with Adobe Illustrator because the background will turn black if we paste it directly into Photoshop and of course, my Barça logo has a black outline so we can't get rid of it with the back

Just save the image and then open in Photoshop. No need for Illustrator.

 

[Klim]

\Next, go to this website and Download the brush pack. Credit to nadinepau.

View attachment 53206
Once you've followed all the necessary steps, go into finder, to your downloads and go to Embroidery_Pack etc... It should be a folder containing two items. Double click the .abr file.
Wait for like 5 seconds and it should be ready to use in your photoshop brushes.

View attachment 53280
As you can see, we don't need most of them (especially the nadinepau wordmark brush on the bottom right) but we need the one that have the 11 underneath them.

This is the brush that we will create 'magic' with.
(continuing on in the next post)

I've followed up to here and downloaded the brushes. I've clicked on the 11 but it doesn't look the same. Perhaps you could give me a screenie of which one?

 

[Andonis1997]

Just save the image and then open in Photoshop. No need for Illustrator.

Ah yeah. Sorry, I rewrote that at 1:30 in the morning. Was not thinking.

I've followed up to here and downloaded the brushes. I've clicked on the 11 but it doesn't look the same. Perhaps you could give me a screenie of which one?

There should be three of them.

Have you increased the sizeof it or have you kept it on size 11?

 

[Klim]

There should be three of them.
Have you increased the sizeof it or have you kept it on size 11?

I only have two. I'll post a screenie of what I have.

 

[Klim]

 

[Andonis1997]

View attachment 53419

What do you have the hardness set to?

 

[Klim]

What do you have the hardness set to?

Brush 1 - Cannot be done
Brush 2 - 100%

 

[Andonis1997]

Brush 1 - Cannot be done
Brush 2 - 100%

Here are all three of mine.. Hardness 100%...

I don't know what's happened with your brushes.

 

[Klim]

Here are all three of mine.. Hardness 100%...

I don't know what's happened with your brushes.
View attachment 53424

I've followed the tutorial 100%.

 

[Andonis1997]

I've followed the tutorial 100%.

Do you have these settings?

 

[Klim]

Do you have these settings?
View attachment 53429

I don't have that brush.

 

[Andonis1997]

I don't have that brush.

In the Embroidery_Pack file, try clicking on the other file in there, the .asl one. Maybe I clicked on that file too..?

 

[Klim]

In the Embroidery_Pack file, try clicking on the other file in there, the .asl one. Maybe I clicked on that file too..?

Could not open. Not compatible.

 

[Andonis1997]

Could not open. Not compatible.

AH, got it.
Search up embroidery-brush in finder.
Click it and see if you get the same result.

 

[Klim]

AH, got it.
Search up embroidery-brush in finder.
Click it and see if you get the same result.

I'm on Win 8 and nope nothing.