How to create a T-shirt from scratch

How to create a T-shirt from scratch

1 November 2008

I had a little emptiness of inspiration in last days and my friend suggested me to write such tutorial. Firstly it was concentrated just on torn typo, but later I thought- hey! Why not to create whole shirt? It isn’t a big problem for me. My main rival is just a time. But giving a half hour each day for tut is possible. And here it is. Tutorial about making shirt and torn typo/logo on it from scratch. Maybe I’m repeating myself but… All You need is just photoshop.

Step 1
It’s good to start Your work from background. If You do so, You will later see if Your shirt is too dark or too bright and You will pick a right shadow for Your main object. If You start with dark background, try to finish with dark background.
I fastly created some pattern, pretty dark. Color isn’t playing a main role, because after changing a color of background, You can simply do the same with shirt. But If You will change a brightness of background, changing the lightness of tee could be a problem. Your shadows will probably break up and You will have too many light areas.
REMEMBER: If You will start with high res image, and then You will scale it down, You will lost some of details, but overall quality of the image should get higher. That’s why I’m going to work with res that have a width bigger than 2000px, and present You same image scaled two or three times. That’s a little trick that is often used in digital painting.
tee shirt photoshop tutorial

Step 2
I always try to start my work from simple shapes. I have made some sketch, but it’s not worth to show. The shape You can see below is a half of a shirt. Even now I can see that is too wide. However, I can scale it only if I will compare it with second part.
tee shirt main shape

Step 3
Pick the eliptical marquee tool and cut down the upper right part of shirt. It will be the head area. also try to cut out a small rectangle from head-area to the left. Then create another shape- it will be our sleeve. Rotate it a bit and merge down with main shape.
tee shirt photoshop tutorial

Step 4
Now compare whole shape with second part (Duplicate layer and go to Edit>Transform>Flip horizontal). I can see that shirt is too wide (or not enough long- as You wish), so I will select an area of shape exactly after sleeve to the end and go to Edit>Transform>Scale. For this shirt 75% in width is ok. There is possibility, that You wouldn’t have to scale Your shirt.
edit , transform , scale
tee shirt tutorial

Step 5
Merge all the layers of tee so You will have only one, main shape (remember to separate the background- do not merge it). Now we can make some additional stuff for our shirt on the borders. Pick some bright color (it will add a bit of live to design, my choice is yellow) and paint on the sleeves and head zone. Try to get something, like this below.
photoshop tutorial

Now the thing is that we have to cut unneeded parts of coloured borders. To do that hold CTRL and click on main shape. You will have a selection of whole tee.
PS tut

Then go to Select>Transform selection so You can modify Your selected area
transform selection

Here You can modify the selection in every way like a layer. By right-click You can choose things like rotate or skew. But all we need is just scale that is always default so we can immediately scaling. Hold mouse over W letter on top bevel or just type in input next to W some value. For me the best setting is 94%. Then move cursor above square between upper corners and move it down a bit.
transform selection

Apply the transformation (Enter on num-pad) and then press Delete to clear the selected area. Click on t-shirt’s layer again, then go to Select>Inverse (or press CTRL+SHIFT+I) and then press Delete button again. ou should have something like this.
photoshop tutorial

Grab the Polygonal lasso tool and clear the rest of undeleted part.
delete rest of yellow layer

For now our shirt looks like that.
tee tutorial

You can also add some threads on the bottom to add a bit of color also to the bottom.
tee's threads

Step 6
Create a new layer, choose the white and black as a foreground and background (just press “D” on Your keyboard to do that) and go to Filter>Render>Clouds.
clouds' filter

Another part of this step is to blur our clouds to hide the strong transitions of colors. This layer has to be very smooth. After bluring save the file as map.psd.
gaussian blur

Step 7
Hide the clouds’ layer and choose tee’s layer. Then go to Filter>distort>displace, type settings as in image below, apply settings and choose the file map.psd.
photoshop displace

Our tee should become little choppy. Then reveal clouds’ layer, move mouse cursor between clouds and tee’s shape layers, hold left alt and click. Then set clouds’ layer opacity to 45% and layer’s mode to overlay.
photoshop displace
photoshop displace

Step 8
Here we will make the internal part of tee. Pick the Pen tool and create some rectangle. Then choose Convert point tool and modify upper corners as I did below.
convert point tool

Step 9
Select the inner layer (ctrl+click on layer in layer’s window), move selection a bit to bottom (hold shift and press once or twice down-arrow on keyboard [shift will allow You to move selection/layer by 10px]), pick dodge tool and add some light into the layer. Also I have made a small tag there, but it’s so easy thing so I won’t explain that.
dodge tool

Step 10
Pick the polygonal marquee tool and create some triangels. Those will determine our waves on tee. See how I did it.
photoshop tutorial

Now grab the dodge tool and… have fun. Just position Your light and with dodge tool accent one border of selection.
dodge tool

Step 11
Choose the Burn tool, pick some soft, round brush and go to brush settings. Click on Shape dynamics and in Size Jitter’s “Control” pick Fade, then in nearest input type some value, like 25-50px.
burn tool.

Then create some shadows opposites to Your light areas.
burn tool

Now You can add some noise (Filter>Noise>Add noise) to Your tee, but don’t get too far with it. It’s also good idea to apply Filter>Blur>Smart Blur to soften the light’s edges. Here how it looks in high-res (this snapshot was taken before applying smart blur filter).
tee shirt tutorial

Step 12
I fastly created some logo.
prowseed logo

As You can see it’s flat, and our tee is pretty choppy. If we will just paste it onto the t-shirt it will looks unnatural.
prowseed logo

So here’s the steps to make it wavy as tee is.

Step 12a
Click on the icon aimed by red arrow and choose hue/saturation, there, in saturation value type -100%.

Step 12b
Make stronger Your lights and shadows by choosing curves or levels. My pick was levels, below You can see my settings.
levels in photoshop

Save this file as tee-map.psd.

Step 12c
And here repeat everything from Step 7, but here, as a distortion map choose tee-map.psd file. My out is here:
prowseed logo
photoshop tutorial

Step 13
Pick some lasso tool, doesn’t really matter which, and create some shapes on logo. Those will be a centers of cracks. Then fill it with some color- again doesn’t matter which because we will delete this layer in the end. Later on You can blur it a little with gaussian blur.
photoshop tutorial
photoshop tutorial

Step 14
Now take some small brush with brush tool, and apply settings from below. Again the main part is Fade.
photoshop brushes
photoshop brush options

Try to make cracks out from main-crack’s shapes. Just make simple lines, You don’t have to swirl anything, we will do this later.

And after bigger lines it’s time for small ones. Just enjoy Your mouse.
photoshop crack

Step 15
In this step we will add a bit of dizziness to our cracks. Go to Filter>Liquify, pick the Turbulence tool (T) and swirl Your cracks to give original shape for every lines. The settings You should set are shown below.

Here’s how it looks like for now.
photoshop tee tutorial

Step 16
Ctrl + Click on the cracks layer, select our logo i layers window and hit delete. Now You can hide or blow away crack’s layer because we won’t need it anymore.

Next, grab burn tool and burn the area around erased parts of shape.
photoshop tutorial

Final touch
From now You can leave it and mark as done. I changed the colors of background and tee a bit. I also turned my logo into solid-color shape, because I think it looks better. From now everything is up to You.
Remember: The more cracks You will create and the smaller they will be, the better effect You will get.
Here is my final result:
t-shirt tutorial

Thanks for reading.
Comment’s section is open for help.

Comments are closed.

  1. hey buddy,this is one of the best posts that I’ve ever seen; you may include some more ideas in the same theme. I’m still waiting for some interesting thoughts from your side in your next post.

  2. It’s hard to find knowledgeable people on this topic, but you sound like you know what you’re talking about! Thanks

  3. These are wonderful! Thank you for finding and sharing

  4. wow all those garments are so amazing and fabulous I don’t come to your blog as often as I would like, but whenever I do I see some really amazing things keep up the good work! =)

  5. hey,this is one of the best posts that I’ve ever seen; you may include some more ideas in the same theme. I’m still waiting for some interesting thoughts from your side in your next post.

  6. I’m still waiting for some interesting thoughts from your side in your next post.

  7. Terrific post, bookmarked, will be again later. Because this was a great piece of writing, keep up the fantastic operate.

  8. rachat de credit says:

    Man, really want to know how can you be that smart, lol…great read, thanks.

  9. bet365 says:

    Good day!This was a really quality post!
    I come from milan, I was fortunate to come cross your topic in google
    Also I get much in your subject really thanks very much i will come every day

  10. i like it a lot……..
    awesome use of a photoshop

    its awesome tutorial

  11. Tennille Klassen says:

    I have been examinating out some of your posts and it’s clever stuff. I will surely bookmark your website.

  12. Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  13. Spellen says:

    Great tutorial, to be honest it was a bit hard for me. But it definitily learns me new things. Is it possible to have a download of this t-shirt as photoshop file? I want to use this for my website. Want to give free t-shirt for my visitors. It would be nice to show cool looking t-shirt with my own logo on it.

About me

I am a Polish designer and webdeveloper, currently living in Lublin city. I study in the Lublin University of Technology.

My adventure with design began in 2005 and since then I was developing myself in sphere of computer graphic and web tech.

I enjoy sport, drawing and hard music. You can find me on twitter and check out my portfolio page. There's facebook now.



There are several ways to contact me. Yet, the easies one is to use this contact form. Just drop me a line and I will reply as soon as possible.

Links / Friends