Close
One second...

Photoshop Coloring Tutorial

WARNING: This is an extremely long post. It's meant to help beginning Photoshoppers with coloring their design and submitting it. I've noticed a lot of people have questions about coloring/submitting so I figured there should be some sort of tutorial post that they can reference.


Also, it's probably a good idea to use Illustrator in most cases. However, for the heavily detailed designs, vectors just aren't an option. For these cases, use Photoshop.


PHOTOSHOP TUTORIAL


Scanning
I usually scan in a document at 300 dpi in grayscale. The grayscale helps eliminate random colors which may show up in your submission.


Coloring
I will start off by saying that you must make sure to keep your colors separated in their own layers in Photoshop. The reason being, that if you should win, Threadless will want you to turn in a PSD file with all of the colors on different layers. So you may as well keep the colors separated from the get go.


1. Open up your scanned file in Photoshop.


2. Go to Image: Mode: RGB (make sure there is a check mark by RGB).


3. Go to Image: Adjustments: Levels. A dialogue box will pop up. You will see a bunch of peaks and valleys. Pull the left arrow towards the closest peak. Pull the right arrow towards its closest peak. You should see your image become more contrasty.


4. Go to Select: Color range. A dialogue box will pop up. Click on the black outline. There will be an arrow that you can pull back and forth which selects a wider or narrower range of colors. Pull it to the highest it can go (which is 200). You should see your image outlined in white. Hit OK.


5. Go to Edit: Copy. Go to Edit: Paste.


6. You now have your outline on its own layer. If you wanted your outline to be a different color than black then skip Step 5. Create a new layer by going to your Layers Palette, clicking on the arrow on the upper right hand side of the palette, and clicking New Layer. Then go to Edit: Fill. On the first drop down menu, go to Color. A new box will pop up. Click on the color you want the outline to be. Hit OK, and then hit OK again. Then go to your Layers palette, and double click on the title (right now it should be Layer 1). Type in a new name (such as ‘outline’). Keep all of your layers titled so it stays organized.


7. Click on your bottom layer (it should be titled background). Create a new layer (see step 6). Your tool bar should have a paint bucket icon on it (if you hover the mouse over the different tools, the name will show up). If you do not see it, but you see a tool called Gradient Tool, then click on Gradient Tool and hold down. You should see the Paint bucket pop up and you can click on it. You will need to choose your background color. Make sure the background color is the same as the one of the colors in the template provided by Threadless. This will be your shirt color. To choose your color, look towards the bottom portion of the tool bar. You’ll see two squares that are slightly askew from each other. Double click on the top square. A box will pop up. (note: have the Threadless template file open, with the colored shirt you want). Hover your mouse over the Threadless template and it should turn into an eyedropper. Click on the color you want, and hit OK. With the paint bucket tool, simply click once anywhere on your file.


8. Create a new layer. Double click on the color square or look at your Color Swatches to choose one of your colors. Remember to keep your layers titled. Then go to the tool bar and select the Paintbrush or Pencil tool. Simply color in where you wish. If you want to switch to a different color, create a new layer, title it, click on whichever color you want, and begin coloring. Just make sure that you only use one color per layer. Also make sure you save your file every now and then. The last thing you want is for Photoshop to crash, and then you lose all of your work.


Prepping your file for submission
Once your file is all colored in, and ready to go, you have a few more steps to save for Threadless standards.


1. Be sure your layered file is saved. Then go to Layers: Flatten Image. Then go to Image: Image size… A box will pop up. On the resolution part, type in 72. Hit OK.


2. Go to Select: Select all. Then go to Edit: Copy. Then go to File: New. In the box that pops up, make sure the width is 640 pixels, the height is no more than 800 pixels, the mode is RGB, and the resolution is 72. Hit OK.


3. Go to Edit: Paste. Your picture will drop into the new file. You make need to resize it to fit within the smaller frame. Go to Edit: Free transform. Hover your mouse over one of the corner points, and it will turn into a diagonal arrow. Hold down the shift key (to constrain proportions), click and hold the mouse, and drag it so that it becomes smaller. When it’s at a good size, hit return or enter.


4. You may use the paint bucket tool if you want to change the background color. You may also copy + paste the t-shirt provided in the Threadless template to show placement of your design on the shirt. Or you can use your own pictures to show placement.


5. When everything is layed out how you want it, go to File: Save for web. In the drop down menu, you may choose between GIF and JPG. If you choose GIF there will be another drop down menu which shows how many colors are being used. It defaults to 256. At the bottom of the dialogue box it will say how large in size the file is. Make sure it is at least under 250 kb. If it’s over the limit, then click on the 256 colors drop down menu, and select less colors. It’s a balancing act to keep as many colors as possible, but to also keep the file size below the limit. If you decide to use a JPG, you will adjust "Quality" until it's just under 250kb. When everything is just right, hit Save. You will need to give your file a title.


6. Go back to your flattened original image. In your tools bar there is a rectangular marquee tool at the top. Click on this. On the top of the window you will see several options, including a drop down menu for Style. Click on Style: Fixed aspect ratio. Then in the first box type in 100. The second box should be 70. Using the marquee tool, drag it out and select what portion of the picture you want to show up in your thumbnail. While you drag, you can hold down the spacebar to move the selection around. Then copy your selection and paste it into a new document. Go to Image: Image size. Make sure the Constrain proportions box is checked. In the width, type in 100 px. The height should automatically change to 70. Hit OK. Go to File: Save for web. Then do the same that your did for your submission, except make sure it’s under 10 kb, and it has to be a GIF.


7. Close your original file. When it asks if you wish to save the file, hit the option that says Do not save file.


And that’s about it! Just go to Threadless’ submission page, upload your files and you’re good to go!


Added 4.12.09:
I just made a high-res blank tee template that makes it pretty easy to place in your design on a mock-up image. Click here to access it.

Watch this
Page:
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
a. cline

RGB and not CMYK, ok.

When designing I will just go to town with the colors as to how they look on my screen, but printed out they can look totally different and i've always HATED that. i suppose my issue is related to flows^^^^ in some manner. im using photoshop.

anyone have any suggestions to keep my colors as consistent as possible from creation to print?

valorandvellum
valorandvellum profile pic Alumni

I think that has more to do with your monitor and printer settings. Maybe you need to calibrate your monitor or go into your print settings and make adjustments so it matches what you see on screen a little better.

Regardless, when you design for Threadless subs, it matters more how it looks in your on-screen presentation rather than how it looks when you print it out at home. If you want to make sure about your colors, try looking at your design on someone else's computer to see how it compares. I believe the generality is that colors look a little brighter on PCs than they do on Macs.

a. cline

valorandvellum! thank you so very very much.

i read elsewhere that designbyhumans prefers that designers use a pantone book and i didnt know if threadless was the same. i plan on submitting to the crit area soon, so i just wanted to be as prepared as possible. thanks again :)

valorandvellum
valorandvellum profile pic Alumni

If you're very picky about color choices, it wouldn't be a bad idea to flip through a Pantone swatch book, match it to your print out and then type in the PMS color as the layer name. However, I've never done this and Threadless has always done a great job color matching – so I've never seen any reason to do it myself :-P

a. cline

getting a pantone book does sound like a really good idea for the future. for now ill just take your advice and let Threadless do their thing ^_^

ellmo39

i know that the tutorial says keep your colors on separate layers, but if you were to use just a photograph or scan in an already colored painting could u just divide it into three layers in photoshop for printing-cyan, magenta, yellow?

valorandvellum
valorandvellum profile pic Alumni

If it's a photograph, you could keep it as one layer. They would have to use simulated process printing for that. When I did Seven Swans, I just gave them the artwork with everything on one layer on top of the background. Not sure if it was a pain for them or not, but it seemed to work! :-P

nooneschange

i feel so stupid, (for a different colored outline) am I supposed to keep "reselecting" the image and using fill?
or for a black outline...do I keep "pasting" the image into another layer all the time?

Abdulla Habib

Thanks valorandvellum & everybody add a comment or a quastion in this great blog... I found it really great .. and I have benefited greatly from all comments, even the quastions

many thanks


Specie Circular

Hello, I was reading your instructions but I have Photoshop Elements 8 for Windows and steps 3 and 4 do not coincide with mine. So needless to say I am utterly confused and if you could help me, or anyone else for that matter, it would be much appreciated.

valorandvellum
valorandvellum profile pic Alumni

nooneschange, try to keep all of the same colors on one layer. For instance, keep all of your black on one layer, keep all of your red on one layer, etc. When you use your black outline to select areas for color, be sure to paste that color into its own separate color layer.

Specie Circular, I'm sorry, but I'm not familiar with Photoshop Elements 8. A program like that would be very limited compared to the full version of Photoshop. I think your best bet would be to find a tutorial on that program to learn the basics, and then you could read through this tutorial again to apply some of the concepts with the program you have. Or you would try upgrading to a newer version of Photoshop :-)

fabrichi

Great tutorial! I've been coloring and scanning all different things into photoshop and they just come out confusing too many layers and bad! I started using this method for one of my critiques at it looks better! You're also the first person that I've seen that uses the same method of scan and photoshop, it makes me feel like I'm doing my ideas right. But my question is how do you do more intricate color combinations, like the one you have in seven swans. thanks for your help!

valorandvellum
valorandvellum profile pic Alumni

Seven Swans utilized simulated process printing techniques so I was able to use as many colors/gradients as I wanted! That followed an entirely different process where I used both Illustrator and Photoshop in combo to achieve the effects I wanted.

The swans and ship line art were brought into Photoshop per usual. Then I drew the big water droplets in Illustrator and used the gradient mesh tool for coloring/shading. Then I brought the droplets into Photoshop, added the vintagey paper texture and other minor adjustments. It would probably be easier to show you in real life than try to explain it here, but hopefully you get the general idea :-P

fabrichi

Thanks and thanks for the quick response. As i said I'm currently using this method for one of my ideas and i finished the base and it looks great! If you want to look at the critique I'd enjoy your comments! The new version with proper coloring will be up soon.
URL: http://www.threadless.com/critique/64258/Brighter_Future

SuperRyan
SuperRyan profile pic Alumni

This was very helpful. Thank you for making it!

:^)

Time and Time again

I am so glad that i found this blog i have a couple of questions.

  1. when you request simulated process printing you can use all the colors you want on any type of design as long as you ask for simulated? and does it matter on the amount of layers used?

  2. on the 8 color method if you have, say your first layer is green "like the grass" and you use a second layer on top of that which is say skin color, and your holding a cup which is the same color of the grass. Would you color that cup on the first layer? and in the end only have 8 layers? If so i have alot of rework to do.

If i didn't do the 8 color layer could i just request for a simulated process print.

Thanks for all the advise you have given here!!

valorandvellum
valorandvellum profile pic Alumni
  1. Yes. I'm not sure how to color separate for simulated process... when I sent Seven Swans in, everything was on one layer on top of the shirt color layer :-o They did all the work of color separations!

  2. If the cup is the green color, it goes on the green layer. So the cup would go on the first layer. You should have one layer per color.

flip doubt

Fantastic tutorial. Easy to follow and really well written.

PurpleHesse

This should be made in to a sticky, I really would have liked to have known to keep colour layers separate.

Braniel

Thanks for this awesome blog!:)

77degrees

Great article! I have one little trick to add. On step #6 , when you go to change the colour of your outline, selecting it and filling it works fine the first time, but each time you do this it changes the artwork slightly. An alternative way to alter the colour is to do a colour overlay. Click on one of those little buttons on the bottom of the layers palette and you'll find it. When you alter your work using this layer effects it won't permanently affect your artwork. You can come back and change it anytime! Cheers :)

applesforjonah

AAAAAAAAAAWWWWWWWWWWW YEAH, SHI......... NOW I KNOW HOW TO GET A SIX PACK.

bottleHeD

Hmm, I usually keep every single element on a different layer, so I have multiple layers even for the same color.

Mightor

Thanks for this tutorial!!!

mermaidmachine

thanks for the tutorial! i had no idea how to do this and just submitted my first painfully simple design, but i have all the color layers separated!

mosaiq

great thank you :) sadly i only have adobe photoshop elements, and i can't find "select color range" (i pretty much think i translated it right to german, but still can't find it.) any other way to get clean outlines? thanks

valorandvellum
valorandvellum profile pic Alumni

To be honest, I've never used Photoshop Elements. I'm pretty sure there are limited features that won't show up in that version of the program, though I'm not sure which. Since I don't have that program right in front of me, I'm not sure how to help you, but I'll take a stab in the dark. Perhaps you could try duplicating the scan layer, and then use the magic wand tool (on a high range setting) to select and delete the white around the outlines. Not sure what kind of results that would give, but it might be worth a shot.

mosaiq

thank you. i downloaded gimp2 there are similar tools as in cs2 and there it works. thank you for sharing and answering

boatman2u

Thanks, I needed that.

sombers_eye

thanks valor. this is great help! and keep up your amazing work. really love your lady with a cute hat entry!

Mockingjay42

Thank you soo much for this! It really helped :)

Mockingjay42

Thank you soo much for this! It really helped :)

Mockingjay42

Thank you soo much for this! It really helped :)

dmaster555

I can't express how much I love you for making this tutorial.

alonsomi

thanks a lot !! i just have one question....if a i have differente values of blue, each value goes on a different layer?

alonsomi

or tone...i am not sure wich one is the right word

Nick Leppmann

Thanks a lot! I have just started using photoshop and have a lot to learn, but your blog really helped me out and gave me a good start. Thank you so much!

beside

LOVE IT, Going get started, is an older version of the creative suites OK to use?

goofrey

beside: Any current version of CS should be able to open old files maybe with the exception of font handling. (Backwards compatibility is another story.)

roslynrocket

Thanks so much, this helped a lot! I was having real trouble saving such small gif's and jpegs to the specifications required and you finally showed me how. Cheers!

Teresa2011

Some of my papers don't fit in the scanner I think I'd rather use a camera.

Musarter
Musarter profile pic Alumni
Teresa2011 said:

Some of my papers don't fit in the scanner I think I'd rather use a camera.

DON'T DO IT, unless you have a super, amazing, epic camera and a great photography set-up (lighting, tripod, etc.). Instead, scan the art in multiple scans and piece it all together in Photoshop.

khstars82

i clicked on the link to access the simple template you made but it just goes to your page to access your twitter account. where else can i access this template at?

Page:
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
No account?
Join Us