Secrets of Designing

6 Great Tips On How To Prepare Artwork for T-Shirt Printing

2011-12-24T02:38:00.001-08:00

6 Great Tips On How To Prepare Artwork for T-Shirt Printing

Recently I have been posting about sweet t-shirt designs (here & here) so I thought this would be a good time to share this guest article. Blake from YouDesignIt, a t-shirt printing company, will guide us through some tips for preparing artwork for T-Shirt printing.
As many of you probably already know, doing graphic design, and doing graphic design specifically for t-shirt printing can be two totally different beasts. Have you ever worked extremely hard for long hours on a t-shirt design for yourself or a client, only to have the printer tell you that your design won’t work for t-shirt printing? This problem is not that uncommon and I would like to provide you with a few easy tips on how to prepare your artwork for printing on t-shirts.

1. Use PMS Colors in Your Artwork

You may typically do artwork in RGB and CMYK color modes, but to ensure the most accurate colors with a silk screener, definitely use PMS colors in your artwork. This also makes the colour separations a lot easier and more accurate. Here is a link on how to work with Pantone in Illustrator.
On a side note, the printer should not charge you extra for PMS color matching. That is an old fashion way to get more money because you are actually doing them a favour by being more particular for accuracy.

2. Convert All of Your Text to Outlines

Sometimes your artwork may call for a very obscure font or maybe even a custom designed font. When sending your artwork off for print, the last thing you want to to see, is a substituted font in your design. By converting the text to outlines, any computer that opens the artwork will view the text as an image. Therefore, no substitutions will be made.
To convert text to outlines right click on the text with the selection tool and then click Create Outlines.

3. Create Your Artwork at Actual Size

Do not trust the printer’s judgment without discussing it with them first. I am a printer… so why would I say that? Because the vision you have of the end product can be very different than what the printer has assumed as your vision. The safest way to defend yourself in this situation is to create the artwork in its final size. Don’t know what size you want to use? Slap a ruler to the shirt you are wearing. Sounds simple, but it works.
You can set the artwork size in the Document Setup menu, found under File.

4. Use Vector Artwork As Much As Possible

This is not an argument over raster versus vector, just more of a suggestion to use vector artwork when possible. It makes colour separations easier and the print comes out cleaner in the small details. This is a general rule for the everyday jobs and not an automatic in all situations.

5. Expand Your Strokes

If you have properly set all of your colors to PMS swatches, then the color separations software will have no problem. This is more of a human error that occurs because sometimes strokes are overlooked. I put this tip at #5 because it is one that can save you from a small mistake ruining an otherwise great project.
To expand your strokes select what you want to expand then go to Object > Expand.

6. Set Your Half-Tones with PMS Colors

This one goes along with Tip #1. Sometimes your design and/or budget may call for the use of halftones to save on the amount of colours printed. The best way to do this is to slide the colour scale down to a percentage of the PMS colour. The colour separations software used by the printer should handle the rest.
In the image below, notice in the top right corner, the number 40? Usually that is 100%. Change it to 40% to set a 40% half tone.

These six great tips on how to prepare your t-shirt design for printing should cover the majority of the problems you might face. This kind of preparation should ensure a faster turnaround time and a much more accurate print.

Enjoy..That's all.....

Design your own T-shirt with a typography portrait

2011-12-24T01:54:00.001-08:00

Design your own T-shirt with a typography portrait

Final Image

For this tutorial you can use your own portrait, or the one I took. So, open the portrait jpg and double click the background layer to unlock it and name the layer portrait.

Now go to Image > Adjustments > Black & white (or press ALT + SHIFT + CTRL + B), use my settings.

Before we posterize the image, pick your burn tool (range: midtones, exposure: 20% ). Carefully burn some areas of the images, around her lips, nose, eyes etc. (I marked some spots), then go to Image > Adjustments > Posterize and set the levels to 4

Disable the “Portrait” layer for now. Make a new group (call it “words”) and using your favorite font and color ( I used Helvetica and Black) type some words like I did.

Pick the rectangular marquee tool and make a selection like I did. Now go to edit > define brush preset. repeat this step for each word and you will see your brushes in your brush presets.

We’re going to edit the text sizes a bit but with free transform. Select each word and press CTRL + T (hold Shift so that the proportions will be the same). Now, select the “words” group, make it smaller (CTRL + T) then duplicate the group a couple of times and achieve my result (resize, move, etc.) You can edit each word and in the end try to obtain something like a rectangle.

Select all the words and make them smaller (CTRL + T) like I did. Now make a selection with the rectangular marquee tool and go to edit > define pattern

Disable the groups of words and make the portrait available again. Using the rectangular marquee tool make a small selection on black, then go to select > similar.

Disable the portrait again and make a new layer above CTRL + SHIFT + N (call it “black words”). Using the words brushes with different sizes try to achieve my result or even better. Select the rectangular marquee tool and press the right click over the selection, go to save selection “black selection”. Also, create a new layer (“background”) under the “portrait” one and fill it with white.

If you disabled the selection, load it again (select > load selection > black selection) then add a new layer (“black pattern”). Go to edit fill and use the pattern you just did. Your result should look something like mine.

We need to make the big words more visible. So, hold CTRL and click the “black words” layer. This will do a selection around the words. Now, go to select > modify > expand by 3px , select the black pattern layer and hit delete.

Make the portrait available again, and disable the black word and the black pattern. Repeat the steps from above to select the 1st grey. Make a new layer “1st grey words” and disable the portrait again.

Using the brushes and #636363 grey arrange the words then add a new layer called “1st grey pattern” repeat the steps above but this time set the opacity of the pattern fill to 60%. Make a selection again around the grey words (ctrl+ click on the layer > expand by 3px). In the end you should get something like I did.

Repeat the steps above for the other tone of grey (“2nd grey words”, “2nd grey pattern”) use #C1C1C1 for the brushes and 20% opacity for the pattern. You also can play with the layers opacity, so that the final image will look great.

This black and white typography portrait works fine for me, but we can add some colors to it. Add a new layer on top and call it “gradient”. using a linear gradient and this colors #5b002f, #a10070, draw like I did.

Now set the blending mode of the ”gradient” layer to lighten. Your result should look like mine. You can use different colors if you want.

So, if you want to print this typography portrait on your t-shirt or something else, we need to have a transparent background. So if you remember the trick from step 11, but now we need multiple selections that’s why you are going to hold CTRL + SHIFT and click on each layer except the gradient and the background. Now that you have the selection, right click on it and go to “layer via cut”. Call the new layer “color” and delete the gradient and the background layer. Save the file as PNG.

You can make also a tshirt simulation. Open the tshirt model from the resources and the final PNG format. Check my simulation and do one better.

That's all, enjoy!

Go Media’s Rapid-fire Illustration Technique

2011-12-24T01:53:00.001-08:00

Go Media’s Rapid-fire Illustration Technique

By Junoon

Hey Designer and Illustrator faithful! It’s time for another wicked tutorial from your brethren here at Go Media. I had a particular project I was working on recently that I thought would make a great tutorial. The technique I would like to share with you is a little illustration short-cut.
When you need to create something with that hand-drawn look but you’re on a tight time line – this is one way to do it fast. The project I was working on was a t-shirt design for Black Ace Clothing. They’re great guys and pay us well so I am not normally rushing through their projects. But on this particular project I had already completed a large hand-drawn illustration for the back of the shirt. They wanted an additional illustration for the front of the shirt, but I was concerned about the total budget for one t-shirt, so, I busted out this little trick of mine. It saved me time, and saved them money!
PSST – shameless plug: I recorded a five-hour video tutorial with solid instruction & a healthy dose art creation. Check out my quick video overview on Vimeo and download the full video tutorial on the Arsenal.

The Design

Let’s start by taking a look at the final printed t-shirt:

Here is both the front and the back of the design. The quote on the design is: “Sticks & stones may break my bones, but words will never hurt me.” This is a really cool project because this t-shirt design is destined to be worn by Tiffany Michelle on an up-coming reality TV show. So, given the potential national exposure, we wanted to really hit a home run with this design.
The part of the design that uses my rapid-fire illustration technique is the front design. You can see it here in more detail:

This image shows a 3-color design. In the end production of the shirt you’ll notice that Black Ace decided to keep the front design simple (1 color) as to not over-shadow the back design, which is 4 color with a gold foil print.

The Tools

Just so, you have a full understanding of the entire design process we went through, I will show you how I did the back, then reveal my rapid-fire shortcut for the front illustration. Before I get ahead of myself I should give you a list of the tools you’ll need for this illustration:

Bristol Drawing Paper (plate, smooth or vellum finish.)
Pencil, Mechanical Pencil, (I used a Koh-I-Noor Technigraph 5611 mechanical pencil)
Mechanical pencil sharpener
Staedtler Mars Plastic White Eraser
#1 or #2 fine-tip paint brush or crow quill pen (I used a #1 Windsor Newton University Series 233)
India Ink (I use Higgins Calligraphy Waterproof Black Ink)
Light Box (Or a window will work too.)
Scanner
Computer
Adobe Illustrator
Access to the internet or some source of photos

The Concept

Let’s do a quick fly-over of how the back was designed so you can understand what lead us to the front. For starters, Junoon– my contact over at junun.king966@gmail.com(and a mighty fine dude if I may say so) sent me over this concept layout.

Now, I know this may look a little rough, but I was actually very impressed with it. Not many clients come to me with such a refined concept. And while this particular incarnation of it doesn’t look so good – I could easily see that this was an awesome layout with great potential and just needed to be fixed up on the production end. Paul asked me to work with this concept, but to also sketch up two additional concepts for this design. Now, there is no shortcut to this early process. This is just a lifetime of drawing that allows me to do a real quick sketch. But as you’ll see later, the details I put into these are really not necessary. All you’ll really need to focus on is placement and size of your elements.
Here are the three sketches I did for Rakesh

This first one (above) is my interpretation of his rough layout. Now that it’s in this rough sketch phase you can start to see the potential. I KNEW this one was the best of the three, so I pushed to work on this one.

Above are the other two sketches I did, but Rakesh was wise enough to go with concept #1 (his own original layout.)
At this point I just drew this. There were no shortcuts used on the back design. OK, maybe one—we do own a skull over here at Go Media. Whenever I’m drawing a skull and need reference, I can pick it up and hold it at various angles to see how to draw it. And no, it is not the head of a Boston Red-Sox fan (Go Tribe!)

Above is the scan of the pencil sketch for the back before I inked it. As you’ll see, I left the text off because I knew I was going to drop that in with Adobe Illustrator later. Also, there will be a Black Ace logo in behind the banners. So, that too was just roughed in. As I said before, I’m not going to go into all the details of the back design, just a fly-over so you can see what I’ve done. For all my pencil drawings I use a Bristol paper because it’s very thick. This allows me to erase without fear of tearing the paper. Bristol paper also allows me to ink it without fear of the ink bleeding through to my desk. I use a mechanical pencil, well, just because it feels better in my hand then a regular wooden pencil. I use an HB or H hardness lead. Although the B, B1 and B2 leads feel GREAT when I’m drawing, the lead is too soft. It smudges all over the paper and makes a big mess. So, I use the harder leads.

Inking

Once the pencil drawing is done, I bust out my brush and “ink” the drawing. I use a paint brush because it allows me maximum line weight variation. Or, in layman’s terms – I can make my lines as thick or thin as I want. By varying the weight of my lines it gives the illustration a ton of character that is hard to duplicate on the computer.

You’ll notice a big roll of masking tape near the end of my brush. I put this on my brushes because I have big fingers. This gives me a better grip of my brush.
I make a lot of little shading lines that look best if they start as a thin line and thicken as they work their way into the dark. A crow quill pen can also accomplish the same effect. If you’re going to use a crow quill pen I suggest using a Hunt Artist’s Pen tip #512 and 102.

Scanning

Once this Illustration is done, I scan it into my computer using our flat-bed scanner. We’re fortunate to have an over-sized scanner here at Go Media. This over sized scanner allows me to scan the whole illustration in one single pass.

Not long ago we only had a legal-size scanner. I would have to scan my larger drawings in two or three pieces then assemble them in Photoshop. That was always a pain in the ass, but hey – what can you do? As I am planning on live-tracing this drawing in Illustrator, the higher the resolution the scan is the better. I like to scan my inked drawings at 500 dpi.

Typography

At this point I have my finished inks are in Illustrator and I’m ready to add my copy and colors. For this design I wanted an edgy, almost medieval font that looked like it was hand painted so it would match the rest of the illustration. I did an extensive search and found the font you see here.

I won’t tell you where I got it – ancient Go Media secret. Obviously, it was perfect!

I used the Effect>Warp>Arch tool in Illustrator to get the copy to follow along the shape of my banners. Then it was just a lot of nudging, kerning, stretching and scaling to get all the letters where I wanted them.

Coloring

I started the coloring by creating one single shape that filled the entire design. I made this by simply making a copy of my vectorized line art, selecting it, and then doing the following: Object>Compound Path>Release, then Object>Ungroup, then Pathfinder>Add to Shape Area. Basically this process broke all these vector pieces up, then merged them into one single shape.

Next I pick my colors. Paul was printing this shirt with silk screens and has asked me to restrict my design to 4 colors. I know that I’ll need a range of color values so that I can color both shadows and highlights. Here are the four colors I picked. I would love to give you a long explanation for why I picked these exact colors, but I don’t have one. I just picked some colors that I liked and thought worked well together.
As I was planning on putting this design onto a black shirt, I start by swapping my line art’s black with my darkest purple. It needs to be bright enough to pop off the black, but dark enough to act as my darkest value color. Next I fill the entire design with the middle value of the three remaining colors. This allows me to add shadows and bright spots to the middle. That’s much easier to figure out than any other method.
Once the middle value fills the shape I do my shadows next. If you’re wondering how I decide where to place my shadows – well, nothing magical here. I look at the shape, imagine it in 3D, imagine a light source and give my best guess at how the shadows will fall across the object. If I have a reference photograph or the actual object (like the skull) then I can hold it up to a light and see exactly how the light falls on the object.

Once the shadows are done, then the highlights are fun and easy to drop on. Remember where your light source is!

The last step is to add some finishing touches. For this design I added some radial vector shapes from Go Media’s Arsenal. I use these types of stock design resources to finish off a lot of my designs. They’re another fantastic tool for saving time.

And viola! The back design is finished. Last step is to pimp out the design on a sweet t-shirt template and present it to the client. (Designer’s Note: Taking a little extra time to mock-up your designs really has a huge impact on the client. It’s one thing to see a flat design, but to see an actual t-shirt with the client’s design ON it! Wow! Now it’s REAL.) For this, of course I use the FINEST t-shirt templates ever made – Go Media’s of course. And they’re ultra fast and easy to use because the shirt is already masked with the highlights and shadows on their own layer. So, you just drop in your design and poof! It looks like a real printed shirt! (Ok, gratuitous product plugs are done.)

Now for the really good stuff.
At this point Paul was ecstatic with the design (correct me if I’m over-stating your satisfaction level here Paul.) But he wanted a little something for the front of the t-shirt as well. Since he liked the sketch #2 that I had done, he asked me to make that one as well.
This front design was intended to be printed smaller and was also on a very tight budget (since the back had taken so much time/money.) I needed an illustration short-cut. I needed a trick. I needed Go Media’s Rapid-Fire Illustration Technique!
So, here is the way to really speed up an illustration project: just rough-cut together a bunch of photographs into your intended illustration. This will be easier if I just show you.

Rough Sketch

Here is the original sketch.

Rough Photo Collage

Now, obviously, this technique doesn’t work for all things. If Paul had asked me to illustrate a superhero flying with a dog under his arm, well, the likelihood of me finding that photograph would be remote. But this design had mostly common objects – roses, a skull, rib cage, bones and a banner (I couldn’t find a banner in the right pose, so I just left a spot open based on my original sketch.) Also, this is a fairly clean assembling of photos. In truth, it can be way rougher than this. This image is just to be used as a guide to help you get your illustration going. You can clean up and fix all the little details while you’re drawing.

Collage To Sketch

So, the next step is turning this photo montage into an illustration! Start by printing your photo montage at the appropriate size. In this case, I wanted it about 8 inches across. This is approximately twice the size the final design will get printed on the shirt. (Illustrator’s tip: Whenever working on an illustration – create it at about twice the size you’re going to print it. This allows you to be a little sloppy. Once it’s shrunk down to the final size it will look super tight! People will wonder how you got so much detail into it.) Ok, where was I? Oh yeah – turning our montage into an illustration. Now that you’ve printed out your photo montage, you want to tape it to a sheet of your Bristol paper. Make sure the printed side of your montage paper is facing the Bristol that you’ve taped it to.

Now take out your trusty-rusty light box and place your paper on top of it, Bristol paper up! Next, you’re going to draw your illustration using your photo montage like a draw-by-numbers guide.

If you need to change, exaggerate, or edit the photo montage, you can make corrections now. On this design, for instance, I thought the skull’s bottom jaw was waaaay too large. So, no problem, I just ignored the photo and drew it a little smaller.

If you don’t have a light box, you can always use a window during the day! But make sure not to push too hard! I don’t want you falling through your window.
This phase of the drawing doesn’t have to be perfect. The photomontage is there to help act as a guide. While on your light box just get all the major shapes in place. Then you can turn your light box off and finish the drawing using your innate drawing ability (if you have that). You can strengthen your lines, add shading, details, etc.
In this case time was at a premium and I knew I would be inking this myself, so I really just hammered the drawing out quick. I trust my ability to do a sweet job during the inking phase. Here is the finished pencil drawing I did using the photo montage as my guide.

You can see that I invented a lot – particularly the banner. Now, obviously I have years of drawing experience, so it may be a bit easier for me to “invent” details that are not actually in the photomontage.
So, that’s really the end of the “shortcut.” While this shortcut may still seem labor intensive, I can assure you that this will save you some serious time. The photos give you all those little details that you would otherwise have to invent. Also, having the photomontage as a guide completely eliminates the possibility of total failure. If you’ve spent any time drawing you certainly know this is a real possibility. I’ve personally had plenty of days when I simply cannot draw what’s in my head. After several frustrating hours and a waste paper basket full of failed drawings, I’ll usually just quit for the day and start again the next. Using this photomontage technique will leap frog you right over any of these types of problems.

Inking

Now we proceed as we did with the back design. Using Higgins Calligraphy ink and a #1 paint brush, we ink our illustration. Here are a few inking tips. First, your lines should be thinner on the side of your light source. If you have no light source, assume it’s coming from the top. So, if it’s a bald head you’re drawing, the line beneath the chin should be thick and the line on top of the head should be thin. Also, objects in the distance should be drawn with thinner lines. Objects in the foreground should be drawn with thicker lines. Using these techniques will give your drawings a sense of depth and character.
Here is the finished Inking of this drawing:

I was always a big fan of the comic strip Calvin and Hobbes, of course, who wasn’t. But it wasn’t just the brilliant writing. You could see that Calvin and Hobbes had been painted with a brush. Just look at all the character in the line art. You can see the thickness of the line weight varying dramatically.

Compare that to another comic I love: Foxtrot. The writing is still great. The characters are hilarious. But the line art is kind of flat and boring in my opinion. This is the difference between using a brush (or crow quill pen) and using a regular felt tip pen when inking your illustration.

Now we go through the same process that we did for the back design. I’ll break it down into numbered steps for you here. Sometimes that’s easier to follow:
1. Scan the art at 500dpi – save as jpeg.
2. Place the art into Adobe Illustrator.
3. Select the image.
4. Convert the line art to vector: Object>Live Trace>Make and Expand

5. Get rid of all the white shapes that the Live Trace function creates. Using your open arrow tool, click on any one of the white areas of your art. Then select the rest by clicking: Select>Same>Fill and Stroke. Warning! In illustrator this function grabs EVERYTHING that has the same fill and stroke, so if you have other white objects with no stroke in your document, it will erase them too! Once all the white shapes have been selected, hit delete.
6. Make a copy of your line art. Either select it then Edit>Copy, Edit>paste. Or select it and hit control+C, then Control+v. Or, while using your arrow tool, hold down the alt key, grab your line art and drag it to a new location. All three of these methods will make a copy.

7. Create your primary color fill object. Select the copy of your line art and use function: Object>Compound Path>Release. Then Object>Ungroup, then Pathfinder>Add to shape area.
Ok, now at this point you should have your line art and a single shape “fill.”

8. Add your copy. Now, just like on the back we’re going to use Adobe Illustrator to add our copy. It’s a simple text box with an effect>Warp>Arch applied to get it to fill our banner.

9. Color your design. The coloring on this side of the shirt is even simpler than the back. Paul asked for a simple 3-color design, so – that’s what I gave him. I’m going to be using the same colors I selected from the back. So, the line art is a dark purple and the primary fill color is a yellowish bone color.

The one additional color I’ll add will be the shadows.

After an initial proofing Rakesh felt that the rib cage was not working in the design. No problem! I just created a shape to remove the ribs and then used the Pathfinder>Subtract from shape area. I did this twice – once for the line art and once for the color fill.

And that’s it. Here is the final design for the front of the shirt. I got this entire piece done in about 5 hrs. 1 hr. to find these pics, 30 minutes to piece them together, 1 hr. to do the pencil drawing, 2 hrs. to ink, and 1 hr. to scan, vectorize and color!
I want to give a big shout-out and thank you to Paul and Rakesh for being such cool clients and allowing me to write this tutorial! For some reason a lot of our clients are overly protective of their assets and don’t let us show off our work! This shirt is NOW available for pre-order at BlackAceClothing.com or click here to get directly to this product.
Thanks for your time and attention. I hope you enjoyed this tutorial and learned a few new tricks!

Photoshop T-shirt Design

2011-12-24T01:17:00.001-08:00

Photoshop T-shirt Design

By Junoon

T-shirt design can be a pricey business. There are so many things to consider when you enter your local print shop: the expense of four-colour processing, the complexity of creating multiple templates, not to mention the cost of creating each individual screening template. There's even a cost associated with opening multiple digital files. The list can go on and on, while your pocket becomes lighter and lighter..
Well, there are ways around this spending. This tutorial will show you an approach to designing T-shirts that doesn't use multiple templates, multiple files and multiple colours. Less is often more, and simplifying the process won't detract from your designs. We'll create a T-shirt design with only one colour, that you will incorporate into one template, which you can then deliver to your printer in one digital file. Your costs will be cut substantially, but your end result will be innovative and stylish.
We're going to use Photoshop to create a design that looks antiquated and deconstructed. It will appear as if the shirt had been washed several thousand times, but will retain a degree of vividness. With a little technical forethought, Photoshop can save you a lot of cash...
Click here to download the tutorial for free

How to design a t-shirt on a budget and a tight deadline

2011-12-24T01:00:00.001-08:00

How to design a t-shirt on a budget and a tight deadline

Monday morning. You’re walking into work (or in some of your cases, waking up in your undies and walking 10 feet to your desk). You pound some coffee and peruse your inbox. You have a present. One of your regulars needs a t-shirt designed for the band Vomit Whistle, but can’t spend much money. To add to the chaos, they needed it last week so your deadline is within the business day. What do you do? WHAT DO YOU DO!?

You know damn well that drawing some hyper-magical illustration is out of the question. You’re not gonna go balls to the wall on some typographic masterpiece either. You need a solution that’s fast and looks good. You need to take some design detours because this design is on a time constraint and a BUDGET. You need stock vector art, and you need it now.
As you may very well know, We’re one of many different choices for theme-driven vector artwork, but since this is the GoMediazine… we’ll be using objects strictly from our packs to show the power of stock art when dealing with projects such as these.
Author’s Note: This tutorial does breeze by at a pretty brisk pace, but doesn’t require a black belt in Illustrator-jutsu. Any questions with the tutorial, please place in the comments following it, and I’ll answer all of them to the best of my abilities. Please be somewhat familiar with how adding and subtracting from objects works and the layering structure within Illustrator. The pathfinder and alignment tools will cover a lot of these nifty little tricks. When duplicating objects or grouped objects – alt+drag will handle that. To paste in place – ctrl+c and ctrl+f. If you’re still confused, these subjects are covered in numerous previous tutorials we have here in the zine. Read ‘em if you need ‘em.
We’re gonna make a new file in Illustrator. 11” x 11” and RGB color mode should do the trick. Make a black square that hits the edge of the artboard (true black, not that cmyk off-black) and lock the object in place. This will be our black t-shirt background.

Now let’s double check what your client had in mind for the design. They mentioned that the design shouldn’t exceed 3 colors, and gave you creative freedom because they like your work so much. They just want it to look gruesome and crazy and all that brutal stuff. This is good because the edge of having to reinvent the wheel on a pressure-filled job like this is relieved. I’m gonna start digging through the design weaponry.
Here’s a list what packs I think will be good for the job, and why. We have stuff that makes amazing background elements for just about anything brutal, focal pieces that can bring just the right attention to the design, and decorative add-ons that help bring everything home as a whole piece.
So now I pick some colors to play with. The main thing I keep in mind with this job when choosing colors is if it will look good on black. Black makes all sorts of colors pop way more than on any other color… so I like using some pretty intense stuff, but not to the point where it’s seizure inducing. Know what I mean? On 3-color designs, I go with a dark, medium, and light tone. That’s the general rule with most designers. Below is what I settled with after some trial and error.
Author’s Note: Experiment with colors, you’ll surprise yourself sometimes. For added inspiration in the color selection process, visit Colourlovers.com – a great community site with all sorts of color schemes and patterns.

So now I start dragging objects that would complement each other into the Illustrator file. Below is what I ultimately ended up using, once again, after some trial and error.

Colors? Check. Objects to use? Check. Now let’s get on with the design.
We’re starting with the abstract halftone first. This will be our background. I applied the darkest swatch from our color scheme to it because it’s in the background. I’m not a huge fan of the negative space that gets left behind on this so I duplicate the object and flip it upside down so it fills out more.

I add the two together and expand them. Lock this object into place (like we did with the background) and we’re on to the next step.
Now I took a bunch of those wormies from the doodle pack and made the fill color on them our lightest colors (while maintaining the true black inked outline. I also did this with the eyeballs we took from our first anatomy pack. I chose a handrawn skull from the pack of the same name, made the fill color our medium turquoise-ish color, and assembled everything how you see here.

Now notice above that I took the entire skull with worms piece and duplicated it. I ungrouped everything and added it together and expanded it. I made it a stroke with the background color (stroke weight of 3 and positioned to the outside of the shape) and expanded the appearance (object > expand appearance). I aligned them together to the middle and center, with expanded stroke being on the bottom of the skull, and grouped them. Added it appropriately to the design and voila!

Author’s Note: I added this stroke because it helps isolate the skull more from the background. This approach to object isolation in design isn’t always a great thing and should be used tastefully. You give strokes to every single object and you’ll have something retarded as hell on your hands – Junoon

So we need some text dammit! Vomit Whistle. Hmmm, well… The Arsenal does have a gnarly-as-hell font called Goatbeard. We’ll use that!
So I typed out the band name. I duplicated the text, right clicked it and converted it to paths. I then ungrouped it and moved all the letters closer together to my personal liking. I kept the words Vomit and Whistle as seperate objects (I did add them and expand them, however). I then applied an arch to them with a more positive vertical distortion on the “Vomit”, and a more negative distortion on the “Whistle” (because they’ll be going around the top and bottom of the skull). If you’re totally lost to what I just said .. effect > warp > arc. Play around with the settings. That should get you back on track.

Now remember the splatter we put aside? Here’s where it becomes useful to this piece. We’re going to duplicate our band name’s layers, drag them to the side, and make them the lightest color we’re using on the design. Copy and paste them in place (ctrl+c and then ctrl+f). Take the splatter and throw the sucker right on top of one word and size it appropriately. Duplicate the splatter and do it to the other one. Now select the word (this should only choose the second layer of the word you pasted in place, not the original) and then hold shift and select the corresponding splatter. Intersect them using your pathfinder tool and you should have the splatter cut out into the shape of the word. Do the same for the other and you should have about the same result as I have shown here below.

Now I applied a black stroke using the method I explained on the skull, and then once that was grouped into the text, I repeated it again with the background color.

I then placed the text appropriately into the design, and we’re done!
Now be professional – mock up the shirt for your client and send them a decent sized proof of the actual design too. Wait for them to approve, collect your earnings, send them their final files, and keep your eyes peeled for when it hits merch stores internet-wide… FOR YOU ARE THE DESIGN CHAMPION!!!
… and this only took you about an hour.

Design Your Own Graphic Tee in Photoshop – Part 2

2011-12-24T00:31:00.001-08:00

Design Your Own Graphic Tee in Photoshop – Part 2

Final Product What You'll Be Creating

This tutorial is the second installment of a 2 part series on designing graphic tees in Photoshop. If you have not already checked it out, please take a look at Part 1: An In-Depth Look Into the Graphic Tee. As printing technology and methodology improve, designers are given more freedom to push the canvas – in this case a t-shirt – to its limits. Don’t feel like you have to design in your favourite Vector package, Photoshop is a powerful creative tool that can be used to great effect. In today’s tutorial I will demonstrate how you can create a composite t-shirt design from photo assets and basic drawing techniques.

Resources

The following resources were used during the production of this tutorial:

A photo of myself
Top Hat
Bow Tie

Step 1

Open your start image and draw a path roughly around the face using the Pen Tool (set to Paths). Imagine you’re using scissors to cut the face out of the background and work loosely. This doesn’t mean you can’t create sharp corners though. Do this by drawing in an anchor point with a handle and then splitting the handle by holding Alt and drawing out from same point.

Step 2

Create a selection from your path by opening the Paths palette and Cmd-Clicking the path thumbnail. Copy this to the clipboard. Create a new canvas set at 300dpi 300×400 mm for a nice, big, bold print. Paste your face into and the new document and rename the layer, I’ve gone with STEVE.

Step 3

Use the Free Transform Tool (Edit > Free Transform) to resize STEVE so he’s massive.

Step 4

Download the Top Hat images from Deviant Art, cut it out using the Pen Tool and paste it into your working document. Use the Free Transform Tool to resize the hat to fit STEVES head. I think the hat could be taller so stretch the height more than the width

Step 5

Download the Bow Tie from sxc.hu and copy & paste it into your working document. Go to Edit > Transform > Flip Horizontal and use the bounding box to resize and rotate the Bow Tie to fit. You should also skew it – using the same bounding box – as the perspective is slightly off by holding the Cmd key whilst manipulating the top central point. I also shifted the top right point to adjust the perspective slightly.

Step 6

Select the Ellipse Tool (set to Shape Layers) and draw a white circle. Hold down the Shift key to maintain a perfect circle. Then, with your new shape layer selected on the Layers Palette, go to Layer > Layer Style > Inner Shadow and set-up as in the screen grab.

Step 7

Next we want to draw guides running through the Eyeball (circle layer you just drew) so go to View > Rulers and draw a vertical and horizontal guide by pulling them from the rulers. If you have the Eyeball layer selected, the guides will snap to the centre. Then, using the Pen Tool, draw in some black shapes on one quarter of the circle. Select Add shape layer so they’re all on one layer. Use the direct Selection Tool to clean up your shapes so they look exactly like the screen grab.

Step 8

Duplicate the SHAPES layer so you have four of them. Use the Free Transform Tool to rotate each one by 90, 180 and 270 degrees (holding down the SHIFT key whilst rotating will snap at 15 degree intervals making it easier to hit the required angles.

Step 9

Select all four SHAPES layers and go to Layer > Merge Layers. Then go to Filter > Liquify, select the Twirl option on the right hand side. Then use the Tool Options to make a brush that completely covers your black shapes. Hover this brush over your shapes and click & hold until your shapes resemble the screen shot. Keep the brush stationary.

Step 10

Create a selection from your Eyeballs by Cmd + clicking the Eyeball path thumbnail, then selecting the SHAPES layer and clicking Add Layer Mask (bottom of Layers Palette). Duplicate these two layers and position over the eyes

Step 11

Desaturate (Image > Adjustments > Desaturate) the TOP HAT, BOW TIE and STEVE. Then select the Dodge Tool and set it to Highlights with an exposure of about 15% on the Options bar. Then select STEVE and use a soft-edge brush to dodge all of the mid grays in the skin. We want to keep the details only.

Step 12

I want to make the Bow Tie darker so select the Bow Tie layer and go to Image > Adjustments > Levels and tweak the settings as shown in the screen grab.

Step 13

Duplicate all your layers and Group the duplicates. Call the Group ORIGINALS. Select all of your loose layers and merge them into one. Then Go to Filters and apply a Noise, Gaussian Blur and Smart Sharpen in turn. Use the settings as in the screen grabs.

Step 14

Use the Dodge Tool to further bleach out any grays within the skin. Then use the Burn Tool to strengthen detail such as the mouth and nostrils.

Step 15

Once you’re satisfied, run one more Smart Sharpen to further boost the contrast and strengthen the details. It should begin to look a little like a detailed sketch.

Step 16

If you want to add a little colour here try the following. Turn the merged image layer Blending Mode to Multiply. Then create a new layer directly beneath it. Make a selection using your ORIGINALS by Cmd + Clicking STEVE’s layer thumbnail. Then Cmd + Alt-click the TOP HAT, BOW TIE and EYEBALL layers to remove them from the section. Then select a new colour and fill the selection on your new layer. You could now flatten this and send it to a print shop for them to separate.

Step 17

If you have your own screen printing set-up or just want to send the print shop a more finished plate you could try the following. Bear in mind that printers have different set-ups (meshes, inks etc), use different software (some very expensive) or employ different techniques. There is no definite rule that works for every design and I’m sure some people who use a different method will comment on this, but I’ve found that this technique has yielded pretty good results in the past. Either way, the artwork you have just created should print well in the hands of someone who knows what they are doing. Turn off all layers except your flattened and flatten the image.

Step 18

Then go to Image > Mode > Grayscale. Then go to Image > Mode > Bitmap and set-up as on screen.

Step 19

Click OK and input the settings as in the screen grab. In the past I’ve used a print shop that uses screens with a 220 mesh count. They recommended dividing this number by 3.5 to get your dot frequency – in this case is 63. The angle is more affected by the way the mesh interacts with the shirt weave. Trial and error is the only way to get this perfect as far as I know, but 52.5 or 45 degrees has never produced bad results for me. Apply this and zoom in to see your dots.

Step 20

Here’s where it gets a bit homebrew but again, it has never failed for me. Select all and copy it to the clipboard. Open up your History Palette (Window > History) and go back to before you flattened the image. Then paste your half-toned image into the document.

Step 21

Delete all layers except your Black plate (halftoned image) and your colour plate (Pink). Then use the Magic Wand Tool, turn Anti-aliasing off and uncheck the Contiguous box. Select any white space on your newly half-toned layer and delete. These are your two final plates.

Final Image

That’s it! We’re finished! Thanks a lot and I hope you’ve learned something new.

Photoshop & Illustrator Tutorial: Create an iconic T-Shirt artwork

2011-12-24T00:25:00.001-08:00

Photoshop & Illustrator Tutorial: Create an iconic T-Shirt artwork

Tuesday 20dec 2011

Joshua Smith, aka maverick illustrator Hydro74, has a style that’s instantly recognisable – combining the thick, clean lines of graffiti with the iconography of tattoos and the symmetry and patterns of vector art. Here he takes you through how he created his latest work, based around his regular motifs of skulls and swirls mixed with this spring/summer’s illustration icon, the owl.
As you follow this tutorial, you’ll discover lots of tricks to help you create better art and work faster in Illustrator. You’ll learn how to improve your skills with line art, shading using flat fills and colour techniques for limited palettes (to keep printing costs down).
Joshua says that as his techniques are more about drawing vector shapes using the Pen tools than brush strokes, you’ll get better results from a mouse than a graphics tablet. Joshua adds that he wrote this tutorial using Illustrator CS3, as he finds the Pathfinder tool – which features a lot in this tutorial – in CS4 to be painful when dealing with complex paths.

Step 1 First off, I did a really rough drawing of the head of an owl to get the piece in motion. Then I went into Photoshop and made it symmetrical. The goal here with a rough, basic drawing is to allow yourself to be more creative in Illustrator as you click away. You never just want to trace what is there, but add your touch on what feels right and allow that inner creative demon to ask: ‘What if we did this?’. You can use your own sketch here, or download Owl.ai from the Download Zone.

Step 2 Import your image into Illustrator, enlarge it to a decent size and drop the transparency down to 50%. From there, set up a guide in the centre of the image. The goal is to save time, thus drawing one side and perfecting that. Create a new layer to allow you to click off the drawing to see how progress is going.

Step 3 Now it’s time to click and drag using the Pen tool (P). As you click away, start adding small amounts of detail and exploring what works. Don’t follow your lines directly from the drawing, but allow yourself to be free – you’re doing this to explore.

Step 4 When you get to a good spot, copy the art and flip it. Once I put the two sides together, I can see where my mistakes are, or if I’m on target. This is a good point to step away for a few moments and get a cup of tea, so you can look at the piece with fresh eyes.

Step 5 Once you’ve drawn the outline, it’s time to add some details. I’ve worked a little etching into the piece by creating long, thin triangle-shaped pieces arranged together in a row.

Step 6 Take the etching element and play with it by stretching it then placing it over the owl’s eyebrows. To funnel it between the eyebrows, select the element, open the Pathfinder (Shift + Cmd/Ctrl + F9) and use the Crop function. One downside to this function is that every time you crop, you’ll notice annoying blank lines. To remove them, use the Pen tool to make a line with no colour or stroke, then click on Select > Same > Fill & Stroke. Hit Delete and you’re done. Keep a copy of the etching lines nearby.

Step 7 Detail the forehead by creating some half circles and aligning them in a row. Stack these rows to cover the area that you want to fill. It helps to group (Cmd/Ctrl + G) these shapes before placing them on top of the illustration so you don’t have to click them individually if you make a mistake.

Step 8 Repeat the techniques from Step 6 to add etching to these ‘feathers’ (this is why I told you to keep a copy of those etching lines.) You can fill each half-circle separately, or fill the whole section with this element to save time. I’ve decided to do each one individually, as it looks better.

Step 9 To fill each half-circle individually, duplicate the cropped element you just created, rather than cropping each area. Once done filling those areas, select each one and crop it into the head. If you want to experiment here, try using wider or smaller shapes, or halftone dots.

Step 10 Now for some detail. This is a good point to start filling in areas with black, and adding little texture scrapes. The goal is to make it look somewhat organic. At this point, I also like to start deleting things I don’t need, but I don’t want to lose anything I worked on in case I change my mind. Create a copy, drag it to the top and you’re free to experiment without worry.

Step 11 Add some feathers at the sides, flowing downwards to tie in the body elements. They also fill out the artwork’s dimensions to better suit a T-shirt print. I want to put a skull under the head, but if skulls aren’t your thing, add a fluffy little cloud, or a happy little tree, or something.

Step 12 If you have a Hydro74 trademarked skull handy, feel free to use it now. Custom typography would work well here, too. Drop in the skull and start building the surrounding areas. It’s starting to come together a little now.

Step 13 Section off the different components – the owl and the skull – as individual elements. To do this, group together the owl head and trace around it in white. Repeat with the skull. This way, you can resize those elements more easily.

Step 14 Since you have the two heads filled in, start dropping in some highlights and dark areas onto one of the wings to add detail. Play around with some etching elements and send them to the back, behind the owl head and skull. To detail the other wing, take the side you worked on, duplicate it and flip it. Finally for the outline, add some eyes to the skull. Try to ignore the fact that your owl now has eyeballs for nipples.

Step 15 Time to add colour. This is the hard part, but here’s a trick: create a line-art version of your artwork under the ‘etched’ one, so you can fill the parts without fiddling with the shading. To do this, place a large rectangle over the top and select Crop in the Pathfinder palette. Delete all blank fills and strokes. Lock down everything except the current piece. Click Cmd/Ctrl + Shift + D for a transparent background. Select a piece of white in your illustration, then click Select > Same > Fill Color and delete it. All that’s left should be the black. Merge it together. Now create a new layer and place it under your line art. Lock the line art layer.

Step 16 To fill out the print and make it seem more iconic, I’ve added some organic swirls and shapes around the main design.

How to design a funny Monkey T-Shirt illustration

2011-12-24T00:18:00.001-08:00

How to design a funny Monkey T-Shirt illustration

A few days ago we published a set of tee shirts mock-up templates. Today I gonna show you how to create a nice monkey illustration and how to apply it on a t-shirt of the set. We will use Photoshop tools to modify stock images and work with shadows and color contrasts. Then we will switch to Illustrator to create the vector monkey. Even if the result can appear easy to achieve, I’m sure you will learn some new tricks with this tutorial.

T-shirt design world is one of my favourite source of inspiration. Every time I walk in my city shopping streets, I spend most of the time observing appeal design and graphics. This is the classical obsession of the graphic designer: to see everywhere patterns and inspirational forms! On the web side, there are sites like DesignByHumans and Threadless that I regularly visit.
There are nice tutorials on the web about how to create a graphic tee in Photoshop and how to prepare files for screen-printing. Recently James Davies has written a tutorial on this specific matter on PSDTuts. I suggest you to take a look at this video-tutorial published by Jimmy Heartcore too.
Today I’m not talking about printing technique. This tutorial deals with how to create a funny vector image that can be easily applied on a shirt. At the end of the process we will use the live trace tool in Illustrator to achieve the final result, but it requires a process in Photoshop to make the image ready for live tracing. Let’s start!

Final Result:

Step 1

We will start making a composition in Photoshop with these three images:

Open the monkey image in Photoshop, zoom on the animal face, grab the pen tool and start tracing the head. We are going to extract it, which is the only part we need. You don’t have to be too much accurate with the pen tool.

Once the path is closed, press ctrl+enter to create a selection. Then press the “add layer mask” button to isolate the selection from the background.
Note: If you’re a newby and don’t know how to extract objects in Photoshop, take a look at our tutorial about Photoshop extraction techniques

Step 2

Open the glasses image in Photoshop, and use the same technique of step 1 to extract them. In the glasses document ctrl+click on the mask in the layer window to select glasses, then ctrl+C to copy. Open monkey document and press ctrl+V to paste in.

Step 3

Glasses need to be re-sized and rotated to match monkey’s face. Press ctrl+T to activate transform tool and decrease glasses size and rotate them a little bit.

Step 4

Monkey’s left ear is too high positioned. Remove the mask: right-click on the mask in the layers window and select “Apply layer mask”. Then go to filter>liquify. The image will appear in a new window. In case you want to visualize glasses position, check “show backdrop”. Grab the forward warp tool (W) and move the ear lower down. If you want, you can modify other face details. For example, I’ve played with monkey’s lips to give the impression it is smiling.

After made glasses layer visible, the ear is still too high. Here is the solution: select the glasses layer and go to Edit>transform>warp. Move anchor points to modify glasses form.

We have to eliminate some parts of glasses. Reduce layer opacity: this will help understand better where to work. Then select the mask in the layer window, grab a black brush and paint over the parts you want to remove
Note: With the mask selected, black brushes are used to remove image areas, while white brushes to restore them.

Step 5

Now that glasses perfectly match monkey’s face, we can extract the cigarette and paste it into the canvas:

Step 6

Hide for the moment glasses and cigarette layers. We need to modify a little bit monkey’s head. Take in mind: we will use Illustrator live trace tool to recognize and trace black and white areas of the image. To obtain a good result, we need to increase image contrasts and darken image edges. Let’s start from desaturating the image. With the monkey layer selected, go to image>adjustments>desaturate or press shift+ctrl+U. Then press ctrl+M to open curves and make a “S” as shown in the screenshot below.

Grab the burn tool (O) and start painting at the top of monkey’s head to darken these areas. Continue using the burn tool to darken all the parts you want to be sure will be black in the vector format. Also you can use the dodge tool to lighten those parts you want to be white.

The last retouch to this nice face: create a new blank layer above the monkey’s one. Ctrl+click on monkey’s layer to select its pixels. Grab a black soft (hardness 0%) brush and start painting over the edges. The aim of this step is to highlight the edges with a black brush so that the final vector will have black edges. This will be really useful if you’d like, for example, to color the vector in Illustrator using the live paint tool.
A little summary:

create a new blank layer above the monkey’s one
ctrl+click on monkey layer (in the layer window) to select its pixels
grab a black soft (hardness 0%) brush
paint over the edges of selection to highlight head edges

Step 7

Make visible glasses’ layer and desaturate it (shift+ctrl+U). Pres ctrl+L to open levels window and move the black arrow to the right to darken the image.

Press ctrl+I to invert image colors. Then right-click on glasses’ layer and select blending options. Add a 3px black stroke effect:

Step 8

We now have to replace glasses lens. Grab the pen tool in “paths” mode and create a path that traces one of the lens

Create a new blank layer. Press ctrl+enter to activate the selection and alt+delete to fill selection with foreground color. The color used is not important. We will replace it later using blending options.

Right-click on the lens layer just created and select “blending options”. Add a gradient overlay going from white to black and a 3px black stroke effect.

Do the same with the other lens:

Step 9

Make visible the cigarette layer, grab the eraser tool (E) and eliminate the top part as shown in the screenshot below. A reduction of layer opacity can helps you achieve a better result

As we made with monkey’s head in step 6, highlight cigarette edges using a black soft brush.

Step 10

The image is now ready for live tracing. Save as a jpg and open it in Illustrator

Go to object>Live trace>make and expand. Then grab the magic wand tool (Y), select the white area and hit delete. Now you have your ready-to-use vector monkey!

Step 11

Let’s apply the illustration on the t-shirt mockup. Open the mock-up psd and choose one from 5 available t-shirt templates. In Illustrator copy the illustration (ctrl+C) and paste it in Photoshop as a smart object.

Using blending options, switch monkey’s color to white. Now duplicate the t-shirt (layer>duplicate layer) and move the duplicated layer above the monkey’s one. Switch the layer blending mode to multiply and reduce opacity to 35%. You can notice that some shadow effects of the shirt affect now also the illustration, thus giving realism to the image.

White is now too faded. Go to layer>new adjustment layer>levels and use them to increase image contrasts:

Ok the image is ready to be showed to our friends or clients. Place a nice background and a soft shadow below the t-shirt. Finished! Try using different t-shirts templates and other colors for your illustration. This is my result:

Design a one-colour T-shirt

2011-12-24T00:16:00.001-08:00

Design a one-colour T-shirt

By Junoon

Creating single-colour T-shirts saves time and money without compromising creativity, as Olly Moss explains.

Every designer wants to make a T-shirt at some point. The versatility of the medium allows for any style - there's always a niche to fill and something that hasn't already been done.

It helps that over the last few years the T-shirt scene has really grown up. Websites such as Threadless enable anyone to sell their work and get noticed, provided they have a good idea and a bit of know-how.

In this tutorial I'll explain how to create a T-shirt design that's easily reproducible at any print shop - or even at home if you have access to some simple screen-printing equipment. I decided it would feature a monster truck, which is bold and iconic, making it easily recognisable. This works in a single colour and I think my target audience will want to wear it. I'll also embellish the illustration with old-fashioned heraldic flourishes.
Click here to download the support files (1.82MB)
Click here to download the tutorial for free

Create a balanced T-shirt graphic

2011-12-24T00:12:00.001-08:00

Create a balanced T-shirt graphic

By Junoon

In an era of tough T-shirt design competition, Jared Nickerson shows you how to make sure your threads are quality.

In this tutorial I'll talk you through the creation of a well-arranged, busy T-shirt design, using 'Temper, Temper' - a design of mine that's currently available at www.designbyhumans.com - as the springboard.
While I'd recommend having fun with your own elements, to start you off, the drawn elements that I've used in my design are provided on the disc. When using the provided images, make sure you have 'Scale Strokes & Effects' enabled in the Preferences panel, as the objects have variable-sized strokes. That's the beauty of vector: nothing is irreversible.
Click here to download the support files (1.05MB)
Click here to download the tutorial for free

Vectorize a Landscape Photo Into a Watercolor Painting

2011-12-24T00:09:00.001-08:00

Final Image

Here is a preview of the image that we are going to be creating:

Introduction: the easiest way

There are several interesting and creative ways to create vector illustrations. The technique obviously depend on the final work you want to get, the kind of image you have (if you have one), and your experience to do the job.
The most common way are three, you can start from a blank canvas, from a sketch, or use a photo.
Starting from a blank canvas is the most difficult way. You have no lines to follow and you are alone with your creativity. The bad side of the technique is that you need to be really able and having strong hand-drawing skill.
The second option is hand-drawing a sketch of what you want first. Even to do this step you need to be able with hand-drawing but, once scanned the image, youíll have a template to work to.
The last way is the easiest one and that is the one we are going to use with this tutorial. You start from a photo of the thing you want to vectorize and use it as template building it up level by level.

Choosing the Right Photo

Once chosen the procedure the next extremely important step is choosing the right photo. Not anyone is good to start with. The right photo has to be well contrasted and not too dark but with definite distinction between light and shadow areas. This will help you in identifying the contours.
If you are not comfortable with taking picture than you can purchase images, from a stock photo service, which are suitable for your upcoming creation. Anyway the best thing to do is using shots from your own so that you are not occurring in copyright problems.

Preparing the Image in Photoshop

Step 1

Once identified the technique and chosen the image there are still few steps to accomplish. Before we get started are a few basics need to be covered. To make the vectorization working better once within Illustrator platform we need to prepare it by adjusting lights and levels, turning the image in w/b and deleting some areas of the picture.
As suggested, I prefer taking the picture which I use by myself. Last weekend, having a walk around Iive taken several pictures of the Turinís Mole Antonelliana. Among the various shots Iíve selected this nice and clear pic of the historical monument:

It contains several typical city elements: the Mole, the characteristic dormer windows, a beautiful streetlamp and an old-style tram recently restored. I think it well represent Turin and its beautiful elegance.
Open up the image in Photoshop. Adjust contrast and lights as you like and turn the image w/b by going to Image > Mode > Grayscale.

This is what you get:

Duplicate the level as backup and go ahead.

Step 2

Click CTRL + L (or CMD + L) to open the Level panel.
Adjust levels so that the gray in the sky disappears and leaves all around the main subject clean. Move the handles so that you clean the borders from exceeding gray or black shadows. Move the white handle toward the right side and the black handle toward left has shown below.

Step 3

Go then to Filter > Stylize > Trace Contour
This feature traces the areas in the picture that have the most contrast in value to each other.

Set Upper Edge and a tracing level high to better outline the image. Experiment with the options. These are the value and setting which Iíve used.

Step 4

Once that the photo has been stylized we need to make the lines darker. Duplicate the level, and apply a Multiply blending.

This is what we get.

Step 5

Select the white color by using the magic wand tool and refine the selection by going to Select > Similar.

Delete the white color and leave the image in a transparent level.

Step 6

Select the Rubber Tool. From the Rubber option panel select a dry brush, increase the size and delete part of the artwork. Consider that too many details will make the Illustrator file heavy to manage once vectorized. The cleaning up of the image will avoid a useless proliferation of anchor points.

In the example Iíve removed branches from the trees. In addition Iíve removed the border making the image suitable to fit different shapes without the need of constraining it in a frame.
Have you reminded yourself to save? If not (bad boy/girl!) than do it now.

Polished and with its undefined silhouette the image is now ready to be managed in Illustrator and turned in a vector.

Vectorizing the Image

Step 7

Create a new document by going to File > New.
The document size depending on what your artwork you are going to use for. Iíve selected a 15 x 25 cm size to be sure I can use it as design for a merchandising t-shirt.
In the advanced options choose CMYK as color mode because it has printing use, and High Resolution Raster Effect.

Step 8

Take your photo already managed with Photoshop and import it into Illustrator. To do that go to File > Place and choose the .psd file which you have previously saved.

Place it inside your artwork area.

Step 9

Keep the object selected and go to Object > Live Trace > Tracing Options

Step 10

This step is extremely important. The Tracing Option Panel contains a lot of parameters which are going to affect the vectorizing result. Let’s have a close reading to them.

Preset Specifies a tracing preset.
This change between different presets that Illustrator offers.
Mode
Specifies a color mode for the tracing result.
It allows to switch from black and white, grayscale, or color mode.
Threshold
Specifies a value for generating a black and white tracing result from the original image. All pixels lighter than the Threshold value are converted to white; all pixels darker than the Threshold value are converted to black. (This option is available only when Mode is set to Black and White.).
Palette
Specifies a palette for generating a color or grayscale tracing from the original image. (This option is available only when Mode is set to Color or Grayscale.)
To let Illustrator determine the colors in the tracing, select Automatic. To use a custom palette for the tracing, select a swatch library name. (The swatch library must be open in order for it to appear in the Palette menu.).
This allows you to specify your own color.
Max Colors
Specifies a maximum number of colors to use in a color or grayscale tracing result. (This option is available only when Mode is set to Color or Grayscale and when panel is set to Automatic.).
Obviously the more are the color the heavier is the file.
Output To Swatches
Creates a new swatch in the Swatches panel for each color in the tracing result.
This will give you a control on the colors automatically picked up from the image so that you may change them later.
Blur
Blurs the original image before generating the tracing result. Select this option to reduce small artifacts and smooth jagged edges in the tracing result.
Resample
Resamples the original image to the specified resolution before generating the tracing result. This option is useful for speeding up the tracing process for large images but can yield degraded results.
Fills
Creates filled regions in the tracing result.
Strokes
Creates stroked paths in the tracing result.
Max Stroke Weight
Specifies the maximum width of features in the original image that can be stroked. Features larger than the maximum width become outlined areas in the tracing result.
Min Stroke Length
Specifies the minimum length of features in the original image that can be stroked. Features smaller than the minimum length are omitted from the tracing result.
Path Fitting
Controls the distance between the traced shape and the original pixel shape. Lower values create a tighter path fitting; higher values create a looser path fitting.
Minimum Area
Specifies the smallest feature in the original image that will be traced. For example, a value of 4 specifies that features smaller than 2 pixels wide by 2 pixels high will be omitted from the tracing result.
Corner Angle
Specifies the sharpness of a turn in the original image that is considered a corner anchor point in the tracing result.
Raster
Specifies how to display the bitmap component of the tracing object.
Vector
Specifies how to display the tracing result.
[Italic text from Adobe Illustrator CS4 Help http://help.adobe.com/en_US/Illustrator/14.0/WS714a382cdf7d304e7e07d0100196cbc5f-6226a.html]
Not cited from the Adobe Help we still have:
Ignore White
It omits white from the vectorization. This means that all white areas will be empty and left transparent.
Preview
Le t you see what you have to expect from your settings. Pay attention that depending on the inserted values the preview may slow your computer in the image calculation process.
Info
The shown details hereby listed are the result in terms of anchor points, colors, etc, which coming from your chosen options.

Step 11

Go to Object > Live Trace > Expand the image shows the paths and you can edit whatever you like. This will give you a great flexibility if you need to modify shapes or anchor points.
Once finished lock the level and save.

Step 12

Once you have accomplished this step the main part of the work is completed. At this point the only thing to do is making it better by adding some creative elements. In the example, Iíve decided that my Mole Antonelliana artwork have to look like a watercolor painting. Thatís why I need now is the right tool for the job: a watercolor brush for Illustrator.
You can produce by yourself watercolor brushes or, otherwise, you can use free resources from the web to provide you with the elements you need to finish your artwork. Please, always pay attention to copyright and license of use for any resource you get. Respect your fellows work!
In the example Iíve downloaded the nice Vectips Watercolor Brushes from Vectips.com http://vtfreebi.es/65MP).
Download the resource and load the brush by going in the brush palette. Select the drop down menu and choose Open Brush Library > Other Library. Load the brush from the folder where you have saved it

Step 13

Letís start to paint our artwork to make it more attractive.
Create a new level. Choose brush number 5 and draw a line onto the tram. Change the color with a bright green one.

Step 14

Select brush number 1, pick a bright yellow color and draw few lines around the city lamp.

Step 15

Select brush number 6 and a dark green color. Make irregular circle in the branches area.

Step 16

Select brush number 5 again and with a gray color paint the city lamp pole.

Step 17

Choose cyan color and select brush number one. Make a circle in a new layer and move this layer behind that one which contains the Mole outline.

Step 18

We still can add a touch of color to the Mole by selecting brush n. 4 and red and drawing a single vertical line.

Step 19

Do not forget you sign! Otherwise how can people recognize your work? Sign in a new layer by using your tablet or, otherwise, scan your sign and follow a similar workflow as that one just accomplished to vectorize it well. To stick with the general style of the artwork Iíve handwritten it with my tablet.

And We’re Done!

Here below you can see the final image we get. The subtle and elegant watercolor effect matches perfectly with the general elegance of Turin as city. The outline is clear but detailed, really different form a cartoon style or a simple black silhouette skyline.

As said I think it is a perfect artwork to be printed on city merchandise. Here below Iíve mounted it on a t-shirt to let you see what I mean.
What do you think about?

I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.

Devian art

2011-12-23T23:49:00.001-08:00

DIY vintage T-shirts

By Junoon

It's easy to create authentic collegiate T-shirt designs using a good old-fashioned iron. In this tutorial, illustrator Derek Lea reveals how combining both applications can create stunning results.

Trends go around in circles, old becomes new, new soon becomes old, and illustration, design and fashion are often at the mercy of the latest trend.

The world of T-shirt design has recently been swinging around to the old in terms of looks and execution. Manufacturers are printing on thinner, softer cotton so that the shirts look like old vintage T-shirts that have been washed a thousand times over the years. The designs that are being printed are not only traditional and retro in terms of design, but they are also given an aged and distressed look as part of the execution.
In this tutorial I'll show you how to create your very own traditional American collegiate T-shirt design. And for the ambitious readers among you, I'll even explain how to transfer your artwork on to a T-shirt. The bulk of the art is created in Illustrator, but as with any successful design, an imported sketch proves to be a very helpful template to work from.
Once the Illustrator work is complete, your design will be pasted into Photoshop, where you'll learn a thing or two about Alpha Channels and masks. These two functions, combined with a scan of genuine scratched paper, will have you producing a useful effect that will scratch and distress your art until it looks as if it has been worn a few too many times.
When your Photoshop work is complete, you'll simply print out your artwork onto paper made especially for T-shirt transfers. After that, the process of transferring your work from paper to fabric is as simple as purchasing a blank T-shirt, getting out the ironing board and heating up the iron.
Click here to download the support files (~1MB)
Click here to download the tutorial for free

How to design an impressive graphic tee in Photoshop

2011-12-23T23:31:00.000-08:00

Here at WeGraphics we are working hard on a new project. I can’t reveal too much for the moment, but I can anticipate you that a new awesome t-shirt brand is coming to life…I’m personally designing 10 tee graphics for the first collection and the style is the WeGraphics one: strong, expressive and with a touch of dirty!
After studied in the last months some techniques related to t-shirt design, which was difficult for me to deal with since I love complex digital photo-manipulations, today I want to share with you what I’ve learned. We will create together a stylized portrait of a blindfolded lady, using some of our resources and dealing with simple Photoshop techniques.
I’m considering to include this graphic in the first tee collection, so I’d like to hear from you in the comments: would you buy this t-shirt?

Preview:

Step 1

Let’s start creating the Photoshop document where we will put in the graphic ready to be sent to the printing company. The size: 12×16 inches (around 30×40 cm) will work fine. Resolution is 300pixels/inch and color mode CMYK.

Step 2

You can save and hide this document for the moment. In the first phase we will create a custom brush for the face of the lady. So search for the image of someone’s portrait, maybe a friend or a stock photo from Morguefile for example. I’ve used this attractive woman portrait from Shutterstock:

Step 3

To realize the custom brush, we need to create a second Photoshop document. This time the size is 2500×2500 pixels always at 300 pixels/inch of resolution but in greyscale mode. You can consider to save this preset for future brushes. Once created the document, paste in the photo you’ve decided to work with.

Step 4

Since I want to include the hair of the model into the brush, we have to darken them. So grab the Burn Tool, set it on Mildtones, and start painting over the hair using a soft (hardness 0%) brush. In case your model’s hair are black, this step is not necessary. Consider that the more you darken the hair, the more they will be included in the custom brush.

Step 5

Now isolate the head with the help of the Eraser tool (or a layer mask if you prefer). Remember to always set hardness to 0%.

Step 6

Let’s add more style to the photo. Start by increasing a lot contrasts. Press Ctrl+L to open the levels window and bring nearer the black and white arrows as shown below:

Step 7

My aim is to create a kind of blindfolded goddess. To create the shape of the bandage you can use the pen tool. It’s not important to add depth or to make the bandage realistic (you could also extract the bandage from another photo for this step), since we will cover it later using other brushes. Anyway try to follow lady’s lineaments and add a soft drop shadow to the shape. Also if you want to enhance face’s details you can also consider to apply the sharpen filter (Filter>Sharpen>Sharpen), but be sure to select lady’s layer before.

Step 8

To complete the custom brush, increase again contrasts. This time use a Level adjustment layer (Layer>New Adjustment layers>Levels) and move the arrows as shown before.

Step 9

The brush is ready to be saved. Go to Edit>Define brush and title it as you prefer.

Why can’t I click on “define brush preset”? This happens because you have the adjustment layer selected – in the layers window. Try clicking on the lady’s layer and repeating the same process (Edit>Define brush preset). This time it should work.

Step 10

Let’s switch to the main Photoshop document. Create a new layer and click once using the brush just created.

Step 11

The fortune of working for WeGraphics is to have a huge amount of great resources always at your disposal. Since my aim is to replace the hair of the model using other brushes, I’ve surfed through our arsenal and finally decided to use this awesome set titled Floral Emergencies created by Nathan Brown. Create a new layer, pick up one of the brushes from the set and click over the canvas.

Step 12

Press Ctrl+T to activate the transform tool, so you can rotate/resize the brush and place it wherever you prefer:

Step 13

Finally eliminate the area of the brush that overlaps the lady’s face. Also refine the edges of the brush as shown below:

Step 14

Use the same technique to add more details with other brushes of the same set. Or you can experiment with other brush sets, mixing different elements and forms. There’s no trick, just experiment.

Step 15

The design is almost complete. Select the lady’s layer and the ones with the splatter brushes. Press Alt+Ctrl+E to merge the selected layers into a new layer. Now you can group and hide the layers merged and work only with the last one created from now go on. The result is nice, but we can go on with other paint effects. The important thing is that next effects will affect only the area of the lady with her abstract hair. So create a new group, where we will put in paint effects, Ctrl+click on the lady’s layer (the layer that contains the face and the splatters merged together), and add a layer mask.

Step 16

At this point inside the group you can create new layers and paint over them using paint effect brushes, with white as foreground color. In my case I’ve used 2 of our sets: Dry Paint Strokes Brushes Vol1 and Watercolor brushes Vol1.

Step 17

The black&White version is complete. We can go on and add some colors to the graphic. Create another group, title it “colors” and apply the same mask of the paint brushes (step 15). Switch the blend mode of the group to overlay. Now create a layer inside the group, set a nice red as foreground color, grab a large (around 1000-1500 pixels) and soft (hardness 0%) round brush and click over a detail of the graphic.

Create other layers and use different colors like orange and yellow to give style to the image.

Step 18

The design is ready to be shown! Hide the white background and save as a .png image. We will now place the graphic on a t-shirt mockup. I’ve used our Ladies Tee Shirt Templates Vol1. Download the file and open it in Photoshop. In the layers window you’ll find 5 groups that represents 5 different templates. Hide the visibility of the purple t-shirt and make visible the white one. Open the .png image of the graphic and place it between the front mockup layer and the shadows one. Press ctrl+T and resize the graphic.

Finito!

All what remains to do is adding a nice background, and the tee graphic is complete! What do you think? Would you like to wear this t-shirt?