Articles by Month: March 2011
So you want to make beautiful, photo realistic t-shirt mockups? This is a tutorial for newbies or beginners on using the t-shirt mockup templates we provide at Go Media’s Arsenal. Note: this tutorial was done with our Tri-Blend Templates, which features a removable tag layer. This feature may not be included in older templates.
Place Your Design
Step 1: Open your desired t-shirt template in Photoshop
Step 2: Make sure your top layer (or layer group) is selected so that your design is placed on the top layer. Older template products might not have a “tag” layer, so just select whatever is the top most layer.
Step 3: Go to file, then place.
Step 4: Select your art (a flattened JPG file works best) and hit place. It will show up on top of everything with a big X on it. Those are the transform controls in case you wish to resize it. Just press ENTER to finish placing your art. There are a variety of ways to get your art onto the template, but this is a simple method. You can always copy and paste it from another Photoshop document too.
Step 5: Your artwork is now the top layer. This will make selecting your design’s background color easier
Grab Your Shirt Color
Step 6: Use the Eyedropper tool (I) to select your designs background color. This is your desired color for the shirt and will be used in Step 9-10 to create the correct shirt color.
Mask Your Design
Step 7: Drag your design below the layer named “Your Art Here”. This will automatically create a clipping mask that confines your design to the edges of the shirt template.
Step 8: Your design is now masked onto the shirt. Time to change the shirt color to match.
Change The Shirt Color
Step 9: Expand the group called “Shirt Color”. You will see a variety of pre-set default colors. Simply select the color layer on top and move onto the next step.
Step 10: Use the Paintbucket tool (G) and click on the layer to change the shirt color to your foreground color (the color you selected in Step 6).
Resize and Arrange Your Design
Step 11: Select your artwork’s layer again.
Step 12: Use the Free Transform Tool (Ctrl + T or Cmd + T) to resize and arrange your design. Hold down shift while resizing to keep your design in proportion. Feel free to move it around, even off the edges of the shirt. You’ll see the template won’t allow the design to bleed over the edges of the shirt. That’s because of what you did in step 7!
Step 13: Hide the guides (Ctrl + ; or Cmd + ;) to take a look at your design.
Looks so real. You’ve learned well Grasshopper! That’s how most of our templates work. However, some older templates might have a slightly different layer setup, but the basic idea is the same. You place or paste your artwork into the template, drag it under the “your art here” layer to make sure it doesn’t bleed off the edges, and change the shirt color to the same color as your design’s background.
Pro Tip: If you wanted to change the above design to a different color t-shirt you can. But you must change the background color on your original artwork first. So save out your art on a red background first, then place it into the template and change the shirt color to the same red as your artwork’s background. Awesome!
Hello hello! Today, I’d love to start a “new” series of posts about inspiration to talk about one of the great collaborative design efforts currently going on in the design community (no, it’s not the Weapons of Mass Creation Fest). Today, I’m going to talk about The state mottos project.
What the heck is The state mottos project?
About 50 and 50
50 and 50 is a collective, curated project where fifty designers are invited to represent their state by illustrating its motto.
This project was initiated by Dan Cassaro, aka Young Jerks. I reached out to Dan to know more about the project, and here’s (part of) our email exchange:
Hey Dan, My name is Simon and I would love to do a feature about the 50 and 50 project on the GoMediaZine. Could you give us some background info about the project, how it came to life and so on?
I can tell you that the idea for this project was born out of a trip taken almost 2 years ago. My girlfriend and I took a road trip to California on a whim 2 summers ago. We didn’t know each other and essentially our first date was a 2 week trip in an RV that week rented, driving around Northern California and panning for gold. We have been taking trips across the country to various places since, trying to see as much of the country as we can. We recently purchased a camper of our own (seen below) and have plans to work out of the back of it while traveling this summer.
I began noticing the mottos on signs when we crossed the borders to different states and was very taken with them. The original plan was to do type treatments for all of them myself, but I eventually scrapped the idea, thinking it would be better to have it be a collaboration with all the people from the different states. It helped to vary the project and now I have friends in every state!
GMZ: Could you give more info about the various directions and/or constraints you gave to the designers that worked on the project?
Dan Cassaro: The direction was really simple. I gave everyone the sizes and the 2 colors and told them to go for it. I didn’t want to have to do too much art directing so the easiest way to do that was to just pick people whose work I knew i already loved. It’s really an awesome team of some of the best young(ish?) designers working right now. The colors were chosen to unify the project, and for obvious reasons, had to be red, white, and blue. I wanted to make them subtle though, didn’t want to hit people over the head with a bald eagle or whatever.
With all that said and explained about the project, I’m going to now share some of those great illustrations with you!
Don’t leave now, there’s more!
Don’t forget, there are many more to be seen on the 50 and 50 website’s gallery. The ones I selected here are part some of the ones Dan provided material for, part personal (and quick) selection. And what would be YOUR interpretation of your state’s motto?
If you want more updates about The state mottos project and/or Dan’s work, you can check the following links:
- 50 and 50, the state mottos project – http://statemottosproject.com
- YoungJerks, Dan’s creative side – http://youngjerks.com
- Dan @ Twitter, where he posts the updates about 50 and 50 – http://twitter.com/youngjerks
- Also, Dan is on tumblr – http://number34.tumblr.com/
I’d like to thank Dan for his kindness and all the material he provided us to do this post. Also, even if it seems obvious, all the content here belongs to their respective authors.
Go Media president Bill Beachy sits down to give you some daily inspiration and advice. Bill shares his years of experience building Go Media into the company it is today. Topics in this video series include Getting Started, Happiness, Humility, Patience, Flow, Focus, Productivity, Business Systems, Courage, Eating Well, Obstacles, and Creativity.
For more information about Bill Beachy, check out his bio on gomedia.us. Bill is currently accepting opportunities to speak at your event, university, or business.
Sponsored by Weapons of Mass Creation
The Daily Inspiration video series is brought to you by WMC Fest – a grassroots event put on by Go Media to inspire and enable the creative mind. It takes place in Cleveland, OH on June 11 and 12, 2011 and will feature 20 speakers, 20 bands, and 20 designers in what aims to be the premier event for artists/designers in the midwest.
Hope you enjoy the video!
Or download the podcast
How to create a Leprechaun’s shoe in Adobe Illustrator CS4
In this detailed tutorial we’ll be learning how to create a Leprechaun’s shoe in Adobe Illustrator CS4 for the upcoming holiday, St. Patrick’s day. Combination of linear and radial gradients can be very useful for achieving nice results in creating realistic vector illustrations.
Here’s a preview of the final illustration:
Step 1: Creating the shape of the shoe
First we’ll try to create the shape of the shoe. From the Tool panel grab the Pen tool (P) and draw the path as it is shown on the picture below. You can use a tablet if you have one (it might be much easier to draw with actual pen). If it’s hard for you to draw it all at once, try to break it into few paths you will put together in order to get the shape of the shoe.
Now we have all the paths. We just need to put them together. Select endpoints and under right click select Join.
Now we need the upper part. Using the same technique try to draw the shape of upper part of the shoe.
Next step is making a sole. Grab the Pen tool (P) and draw the path like you see on the picture below.
Select the green part of the shoe and the path and under the Pathfinder panel hit Divide button
Ungroup it by selecting Ungroup under right click or simple by hitting Shift+Ctrl+G on your keyboard. Set the Fill color for lower part of the shoe to dark red for now.
Select the green part of the shoe and hit Ctrl+C and then Ctrl+F. This will copy and paste-in-front the object. Now we have two pieces of the green part. Soon you will see why. Take again a Pen tool (P) and draw the line like you see on the next picture.
Select the green part of the shoe and the yellow line and under the Pathfinder panel hit Divide.
Ungroup it (Shift+Ctrl+G) and delete a bigger part. Change the color of the smaller part to white. You should end up with something like this.
We are going to add gradients to the green part of the shoe.
Select the white part of the shoe and under Object>Path>Offset path set the Offset to -3 pt. Change the color of the new object to yellow just to make it visible. Now using the arrow keys on the keyboard nudge the yellow object to the left.
Copy and then paste-in-front (ctrl+C then ctrl+F) the white part. Holding the Shift key on the keyboard select both, yellow and the white part, and under Pathfinder panel hit Intersect.
Remove the Fill color for the new object we’ve just made and add the stroke. Using Direct Selection Tool (A) remove the anchor points on the left side of the stroke line.
Select the stroke line and under Object select Expand. After that change the color to dark red. This is what you should have now.
Step 2: Creating the shadows
Let’s create a few shadows. That will make our shoe look more realistic.
Select the green part of the shoe and make a copy of it (Ctrl+C, Ctrl+F). Do the same thing for the upper red part of the shoe. With the upper part of the shoe still selected, using the arrow key on the keyboard nudge it a few times downwards. Then holding Shift on your keyboard, select the green part of the shoe and under the Pathfinder panel hit Intersect button.
Change the color of that part to dark green and send it behind upper red part of the shoe using right click>Arrange>Sending Backward ( Ctrl+[ )
This is how your shadow should look like.
We will do the same thing for the white part of the shoe, to make it look like it’s attached to the shoe. Select the white shape and hit the Ctrl+C, Ctrl+F on the keyboard. Set the Fill color of the copy to dark green. Using Arrow keys on the keyboard nudge it 2 pixels to the right and under the right click select Arrange>Backwards ( Ctrl+[ ). It looks like the white part of the shoe is casting the shadow on the green part.
Change the Fill color of the lower part of the shoe to dark green, a little bit darker then the shoe.
Let’s create few more shadows. Just imagine a source of light above the shoe. According to that light try to create some interesting shadows. Shadows are actually one of the most important things in illustrations. They simulate a nice realistic look.
Select now everything except upper red part and its shadow. Copy and paste-in-front the selected objects, and under the Pathfinder panel hit Unit button.
Now duplicate the new object we’ve just created and change the Fill color to blue (just to make everything more visible). Move it to the left a little bit. Grab the lower right point of the selection box and rotate it a little bit. Like it’s shown on the picture below.
Holding the Shift key on your keyboard select the red and blue objects and under Pathfinder panel hit Minus Front. You will end up with funny parts of the shoe.
Select that funny shape and ungroup it (Shift+Ctrl+G). You can delete all parts except the one we will be using for the shadow. See the picture below.
Duplicate the new shape we’ve just created, duplicate the lower red part of the shoe. Select both parts and hit the Intersect button under the Pathfinder panel.
Change the color of the new shape to dark green (darker than lower part of the shoe). Do the same for the bigger part of the shape. This is how the shadow should look now.
Using the same technique make a few more shadows on the shoe. Some of them should have a lighter color to look like a highlight. Remember the source of the light right above the shoe we talked about in previous steps? That light is very important. According to that light you can create different highlights and shadows. I will select all shadows and highlights I’ve made. I think you can get the idea how to do that.
Step 3: Creating the four leaf clover
Let’s create a four leaf clover for luck.
We’ll start with a circle. Grab the Ellipse Tool (L) from a Tool panel and create two overlapping circles. Select them both and under the Pathfinder panel hit the Unite button.
Grab a Direct Selection Tool (A) from a Tool panel and select lower anchor point and holding the Shift key on the keyboard drag it downwards like shown on the picture below.
Select Convert Anchor point Tool (Shift+C) and click on the same lower anchor point. You should end up with something like this.
With Delete Anchor Point Tool (-) remove two anchor points on the both sides of the object. That will make a shape of the heart we can use to complete the four leaf clover.
Now we have to add a golden linear gradient to the heart shape.
Select the heart shape and under Object>Path set the Offset path to -6. Set the Fill color to green. Grab the Line Tool (/) from the Tool panel and draw the vertical line. Select the green part of the shape and the vertical line and hit the Divide button under the Pathfinder panel.
Ungroup the shape (Shift+Ctrl+G) and apply the radial gradient to both parts.
Select the heart shape with the golden part and group it (Ctrl+G). Grab the Rotate Tool ( R ) from the Tool panel. Holding the Alt key on the keyboard click on the lower anchor point of the the golden heart shape and set the Angle in the Rotate box to 90. Hit the copy button.
Repeat that action by hitting the shortcut Ctrl+D. To complete the clover hit that shortcut two more times.
You can also select all golden parts and unite them under the Pathfinder panel. After that offset the path for about 3 pixels and change the direction of the gradient. You should end up with something like this.
Place the four leaf clover on our shoe but don’t forget to create a shadow. Make a copy of the clover (Ctrl+C, Ctrl+F). Ungroup the copy (Shift+Ctrl+G) and unite all the paths under Pathfinder panel (by hitting Unite button). Change the Fill color to dark green and send it backwards under right click>Arrange>Send Backward ( Ctrl+[ ). Using the Arrow key on the keyboard nudge the shadow 1 pixel to the right and 1 pixel downwards.
Step 4: Creating the shoelaces
Let’s make shoelaces for the shoe. Grab a Pen Tool (P) and draw a line like this.
Under stroke panel set the thickness of the line to 5 and select Round cap to make end of the line rounded.
Expand it under Object>Expand, make a few copies and place them like shoelaces.
Select the white and the green part of the shoe (use Shift key on your keyboard to do that) and unite them using the Unite button under the Pathfinder panel. Make 6 copies of that shape (because we have to complete 6 shoelaces) and use them for cropping shoelaces (using Intersect button in Pathfinder panel). After cropping add radial gradient to our shoelaces.
Group all of the parts together, make a copy (Ctrl+C, Crtrl+F), change the color to dark green, nudge it downwards for a pixel or two and send it behind white part of the shoe.
Repeat the previous step, but this time we will set the Fill color to gray, nudge it for the same amount like in previous step and send it underneath the shoelaces. Crop the shadow using the white part of the shoe. This might look like lots of work, but I think it is much better to do that then to make just one shadow to set the color to black and then to lower opacity. I think we can make the artwork look more realistic.
If you are not too lazy do it one more time to create the shadow for the thin red line. Repeat the previous step and set the color for tiny parts to dark red. Just make a 6 copies of the red line and one copy of the shadow for the shoelaces. Each part of the shoelaces select with one copy of the red line and using Intersect button under the Pathfinder panel make a crop which will be a small shadow casting on the red line.
Now we need holes for the shoelaces. With Ellipse Tool (L) make few circles and place them to look like holes for shoelaces. Set the color to dark green.
Holding the Shift key on the keyboard select all circles and under Object>Path>Offset Path set Offset to 1 pt.
With new circles still selected remove the Fill color for them and set the stroke to 1.
Expand them under Object>Expand and use a golden gradient as a Fill color. Make a copy of the golden rings, nudge them in the same directions as other shadows, change their color to dark green, and send them backwards (right click>Arrange>Send Backward).
Lets select lower green part of the shoe. Under Object>Path>Offset Path set the Offset to -5.
Using Direct Selection Tool (A) remove the lower Anchor points of the new object we’ve created…
…and using the Pen Tool (P) make the path we have now longer than we actually need. Remove the Fill color and leave just the stroke.
Set the stroke to 1 and check the box for Dashed Line and set the dash to 4 pt.
Expand the dashed line, apply the golden gradient we’ve used in previous steps. If there is anything overlapping the shoe just erase it with Eraser tool.
Step 5: Creating the pattern
For the upper part of the shoe we will create a pattern. From the Tool panel grab the Rectangle tool (M) and create two rectangles like it is shown on the picture below.
Select both rectangles and under the Object, Blend select Make.
In the Blend option box set the spacing to Specified Steps to 20. You should end up with something like this.
With the stripes still selected hit the Expand under the Object.
Grab the Rectangle Tool (M) from the Tool panel and create the rectangle in the same size as the surface with the green stripes.
Send it backward using right click>Arrange>Send Backward ( Ctrl+[ ). Apply the radial gradient to the rectangle.
Group the rectangle with the stripes (Ctrl+G). Under the Object select Transform>Rotate. Set the rotation Angle to 45 degrees.
Grab the new object we’ve just created, drag it and drop it in the Swatch panel. We are going to apply it to the upper red part of the shoe. Just select that part and select the pattern we’ve just made from the Swatch panel.
Let’s create the shadow from the shoe. Grab the Ellipse Tool (L) from the Tool panel and create a circle. Apply a radial gradient to the circle (white-gray gradient). Scale the circle down using non-uniform scale.
Place the shadow underneath the shoe. Adjust the position to look like the shoe is creating the shadow. And you are done!
I hope you liked the tutorial! Feel free to experiment with colors and gradients. Looking forward to seeing some of your results. If you have any questions or comments please post it below. Thanks for reading!
YAFS (Yet Another Flickr Showcase)!
We’re close to mid February and I’m ready to show you another amazing hand picked selection of amazing pieces from the Go Media Flickr Pool. Also, you should stay tuned for cool news related to showcasing your portfolio very soon. It has actually already been announced, but we’ll expand a bit, in this very blog.
A quick reminder: the pieces here are picked to try to represent the great variety of submissions in the pool to the best we can. Your work isn’t in this month’s showcase? Try with another piece next month!
And now, without any further ado, it’s showcase time!
Creating a Mix Cover
In case you didn’t know, whipping up mix covers is a great way to exercise some of your creative muscles. It’s an outlet I like to focus some of my more random ideas towards… whether it be subject matter, or a new technique I want to try out. Every once in a while I’ll make a new mix and create an accompanying cover for it to post to my site BLK Apple. Generally these mixes are based around a central theme, idea, or situation, making them perfect for some semi-structured visual experimentation.
With this mix I wanted to create a cover that touched on a Jonny Quest, meets Steve Zissou, meets Outer Space, meets National Geographic vibe. So what you’ll see in this tutorial is the process by which I came to the result you see above. I want to mention at the outset that this was a very loose process. Alot of the steps I took were completely random, but what you read below is a true un-altered account of the process. Let’s begin…
The image you see above is something I came across while digging through some old advertisement archives before I even had an idea to make the mix. Finding it quite fitting, featuring a strong gentlemanly character, I decided to use this as the basis for my cover.
First things first, I cranked up the saturation (ctrl+U, then adjust to eye), and start to cutout the character.
To cut out the character, enter quick mask mode by pressing Q, and start tracing his outline with the pen tool.
Once you complete your path, exit quick mask mode (by pressing Q ) and select ‘Load Path as Selection’ in the the Paths palette.
The chap will appear selected. From here I duplicate the layer by pressing ctrl+J.
Here he is, in all his cutout glory. Next up we’ll use the Clone Stamp Tool to fix up the background now that we have the character on his own layer.
When I do this, I generally have it set to around 30% opacity and the brush semi-softened (a nifty shortcut to quickly adjust the hardness of your brush is ‘shift+[‘ and ‘shift+]’)
Here is what I came up with. It’s not super seamless or perfect, but it’ll do the job… Just to make sure, see what our chap looks like on it…
Looks pretty good. The edges of our character don’t seem too bad, moving on…
From here I decided I wanted to frame the content, both to trim the excess imagery and to evoke a more record-sleeve feel. I simply used the Elliptical Marquee Tool to make a circle, then inverted the selection (ctrl+shit+i) and filled (shift+F5) the layer.
I then scaled and placed the character to my liking within the new frame.
From here I started to emphasize the composition by adding in some highlights and lighting effects. Specifically, I sampled a pink hue from the background and started painting where I wished to highlight, then set the layer to Overlay.
Continuing this thought process, I went ahead and added in more highlights and shadows in the following steps.
This, as I mentioned before, was a very fluid process. I would add a bit here, erase some there until I felt I had something I could work with.
At this point I wanted to add an inner shadow to the frame. I simply created a circle the exact size of the frame, set the Fill to 0% and added an Inner Shadow style (double click the layer to bring up the layer style window, select Inner Shadow).
At this point I’m feeling pretty good about where this is going. However I want to ramp up the ethereal/spacey vibe a bit more, so I decide to abstract the background image…
Basically what I decided to do was to duplicate the background, and start blurring and tweaking it… Experimented with combining different Layer Styles, such as Exclusion on top of an Overlay.
With the background now looking a bit more flat, I wanted to add little details to help it out just a little bit.
I started painting on some lines and then rubbing them around with the Smudge tool. I started to see a sort of ‘warping’ effect going on, so I ran with that by painting more lines in a circular motion around the character.
Here I decided that I liked how it was starting to turn out, but I wanted to unify all the different hues and textures. So what I did was track down a texture that was fairly uniform, and would help warm up the piece.
This paper image seemed appropriate, so I scaled it to where I liked it (basically so the grain of the paper didn’t look too big) and set the layer to multiply, thus resulting in a more cohesive version….
Looking at it, I still want to add some more detail to the background. So I decided to use some infographic vectors I contributed to Set 18 to aid me.
Now that I added alittle more intrigue to the background, I can start to see how I’m going to polish off the piece. Though everything is looking cohesive, I want to spike the contrast to add some contrast and drama. To do this, I select all the visible layers (ctrl+shift+A) and paste it on top of all the layers.
Desaturate (ctrl+U) it and adjust the levels (ctrl+L).
Then to soften it up, I add a Gaussian blur.
Set the layer to Multiply, and I now have the additional contrast I was looking for. Now to finish it off, I add in the copy.
I set the type in Avenir, which I am a huge fan of. The title line I chose to open up the tracking to let it breathe and to let the background image come through as much as possible. As well, I opened up the leading for the tagline for the same reason.
To finish it off, I add in my National Geographic-esque rules and add in the chapter one caption.
I hope you guys enjoyed the walk-through! And if you’re curious to hear the music and how it played in with the visual design, the mix will be up soon at BLK Apple.