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
sleeve

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.
marquee
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%.
hue/saturation
saturation

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.
cracks

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.
liquify

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.
Cheers


Comments are closed.

  1. R.Wojtas says:

    tutorial mistrz! , mam nadzieję że zobaczę jeszcze więcej tutoriali Twojego autorstwa :)

  2. Nick says:

    I like this tutorial, thanks a lot man. It seems like the shirt could have a more realistic and organic shape if you used the pen tool, but I’ll probably use it when I try to follow this tut.

  3. That was really inspirational. I also linked this tutorial on my blog.

  4. RAFi says:

    Fajny tutek.

  5. Stanislav says:

    Piękny tutorial, Majk! Dzdieńki!

  6. Felix Nagel says:

    Shirt Designs in PS? Without Illustrator aka without vectors? That doesnt work. Bad tutorial!

  7. Majk says:

    Dear Felix,
    I don’t want to learn people how to make their own t-shirt that will be useful for some of them, but how to think in Photoshop and how to combine different things like filters (clouds + displacement map). It’s essential for newbies to gain new techniques.

    And before I forget, I don’t understand why you are so spiteful. Feel at ease, bro ;)

  8. xMaCx says:

    very good tutorial Maciej, also inspired me to make some designs, PDS could share the file? so I added my logo on, please and thank you very much in advance

  9. Majk says:

    I think it wouldn’t be a problem…
    I’ll update this post soon with the link to PSD file.

  10. xMaCx says:

    Thanks for the reply as fast as you could =).

  11. I really like your technique on making the cracks in the logo, that was really cool. This will be really helpful for t-shirt designers and artists too. Thanks for posting how to achieve this effect in photoshop!

  12. Faisal Asif says:

    Totally amazing!, Good luck for your future :)

  13. kavitha/pixie says:

    hi …i have just completed learning psd from an insti and trying to make myself better …you are really good about this tut its easy as well as interesting

    hey can u gimme some tips to follow to be good at psd and also to be able to think creative ….

    i sometimes find myself creative and sometimes not wen it comes to psd i feel m zero m not able to think of nething on my own so m wandering around tuts but m afraid of becoming a copycat or just getting inspired n doing nothing on my own pls help wenever get time

    thanks

  14. Air Jordans says:

    Great articles and it’s so helpful. I want to add your blog into my rrs reader but i can’t find the rrs address. Would you please send your address to my email? Thanks a lot!

  15. iwan says:

    i love how you make some realistic t-shirt here. I make some tut how to make some cool illustration for t-shirt here…check this out….

  16. this tutorial is really cool to make some kind of tshirt prototypes with your own designs and try to look how they look printed! thanks for the tips

  17. Obiad Dnia says:

    nice work! thanx a lot

  18. Nice tut, thank you for sharing this, that is an easy way to start making your own t-shirt designs, you wouldn’t make a mess on a new shirt.

  19. cool i want convert this page using PDFmy URL thanks for sharing..


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.

Categories

Contact

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