Hot Topic T-Shirt Wall Game: Name That Designer!

I thought this would be a fun game. I’m sure you’ve been into Hot Topic and looked up at the t-shirt wall for inspiration on designing tees. You might even have the pleasure of seeing one of your OWN designs up on the wall. Or you might recognize the work of fellow designers. I went in there recently and discovered that I could only identify a couple of designs that I recognized and there were a lot that I didn’t know. I admit, I haven’t been keeping tabs on this in quite some time.

So I snapped a photo of the Hot Topic t-shirt wall and posted it on Flickr so we can all “tag” the photo with the designer who did that particular shirt. I want to see how many designers we could identify on this wall to test our awareness of who is doing what in the band merch scene. It’s pretty tough!

Use Flickr’s tag/note feature:

I’m asking all GoMediaZine readers to click on the photo to go to the Flickr page and add a use the “actions” button to add a “note” with the name of the designer over his/her tee design. If you know the designer has his/her own Flickr account, you can add a “person” so they are notified that they’ve been spotted in the wild.

Name That Designer!

Go to Photo 1 on Flickr

Name That Designer 2

Go to Photo 2 on Flickr

Inspiration: Designers Who Started Their Own Clothing Line

As I’m writing the “Designers Guide to the Apparel Industry” eBook that I plan to release soon, I started to take notice of WHO are the role models that inspired this book. Essentially, who are the designers who started freelancing and eventually started and now run a successful clothing line? As Steve Knerem’s “start a clothing line” series sheds light on HIS experience doing what so many of us designers want to do: Branch out and release something of our own.

These designers got started working for clients. As you know, you’re mostly working on THEIR ideas and helping them solve problems. I’m sure a lot of designers reading this have felt the urge to work on their own ideas but probably never had the time. Heck, you may have even “started a line” yourself but there’s a good chance your tees are gathering dust in your basement because you were never able to take the line beyond a casual hobby.

The folks I’m featuring here have taken it past the hobby phase and created their own unique brand. Everyone talks about starting their own line, which as we’ve seen the past few years, lots have done just that – started. While I give people praise for starting something on their own terms, let these folks be role models and inspiration to take it to that next level.

Some of these I have interviewed for my eBook and you can read case studies about HOW they did it. You can get notified by email when the book comes out.

Mark Capicotti

Mark Capicotto created Glamour Kills

Glamour Kills - Bonjour Monday

Glamour Kills - Summer of Love

Rob Dobi

Rob’s portfolio is at RobDobi.com
He created Full Bleed.

Rob Dobi - Client work - This is it (Michael Jackson) and Green Day

Rob Dobi - Fullbleed

Dan Mumford

Dan’s portfolio is at Dan-Mumford.com
His apparel is available at MumfordClothing.com

Dan Mumford - Client work - Awakening

Dan Mumford - Mumford Clothing - The Death of Summer

Sam Kaufman

Sam runs East Fork Studio
Lead & Light

Sam Kaufman - East Fork Studio - Client work - Weezer

Sam Kaufman - Lead & Light - Telemanipulation

Brandon Herbel

Brandon blogs under the alias All Work No Sleep and runs Make Believe Studio.
Make Believe Clothing Co.

Brandon Herbel - Make Believe Studio - Client work - Lady Gaga

Brandon Herbel - Make Believe Clothing Co.

Kyle Crawford

Kyle’s portfolio is at Kyleisez.com
Electric Zombie is the clothing line, with a bunch of satellite websites that are all amazing.

Kyle Crawford - Client work - Alkaline Trio - Little death movie poster

Kyle Crawford - Electric Zombie - Transsmission Black

Johnny Cupcakes

Johnny Cupcakes does… Johnny Cupcakes. You should check the story out.

Johnny Cupcakes - Voodoo cook

Michael Leon

Michael Leon is the man behind Commonwealth Stacks

Michael Leon - Michael Leon Studio - Client work - Rasa AdvertisingMichael Leon - Commonwealth Stacks - CWS shirt and Beetle shirt

Jacob Bannon

Jacob Bannon is the creative mastermind behind Deathwish

Jacob Bannon - Client work - Killing the Dream

Jacob Bannon - Deathwish

Glenn Jones

Glenn’s portfolio can be found on Behance or on his website.
Glennz is the place to find his world famous shirts.

Glenn Jones - Client work - Despair - Unsolved crime

Glenn Jones - Glennz - Office chat

David Murray

David Murray is the guy designing SEIBEI.

David Murray - SEIBEI - I'm fat let's party - Zombie hunter shirt

Jeff Sheldon

Jeff Sheldon is the man behind Ugmonk.

Jeff Sheldon - Ugmonk - Path to nowhere

Eric Terry

Eric Terry is the designer of the amazing stuff at LintyFresh.

Eric Terry - Lintyfresh - Keith the quiet

Shepard Fairey

As we all know, Shepard Fairey is Obey Giant. They also do Obey Clothing.

Shepard Fairey - Obey Giant - Rock the vote poster - Inauguration poster - Bauhaus band

Shepard Fairey - Obey Clothing - Obey your computerShepard Fairey - Obey Clothing - Obey trademark

Design Show: Go Media’s Dirty Laundry

dirty laundry

Go Media is airing our laundry for all to see!

All GoMediaZine readers are cordially invited to our first annual Design Show “Dirty Laundry.” Please come and partake in our celebration of the past year, and allow us the opportunity to share with you our design process.

Tasty hors d’oeuvres and drinks will be provided.

November 12th 2010
6pm – 9pm

The opening reception will be held at the Go Media building. We are located at the intersection of Lorain and West 45th Street in Cleveland, Ohio. Just look for our laundry line!

Go Media HQ
4507 Lorain Avenue
Cleveland, Ohio 44102
Get Directions


View Larger Map

RSVP on Facebook!

Advanced Digital Painting in Photoshop

Hello!
My name is Hatice Bayramoglu and I am a 3D artist and illustrator from Turkey. In this tutorial I demonstrate how to draw and color a character design and illustration for a children’s book. I’m going to explain my choices and thought process throughout the tutorial. My tutorial shows how I build my illustration from an early rough to the final illustration. I suggest that after following this tutorial, you find out what works best for you. I will be using Adobe Photoshop and a Wacom Tablet to create the finished result.

This painting is going to be done totally in Photoshop CS2.

STEP 1: Sketching

Start by creating a new document in Photoshop. It should be about 800x778pixels. I started with some quick sketches about the main idea. And here is the sketch about my main environment for the character.

character sketch

Well as you see in this sketch there is a little girl character standing near an apple tree with an apple in her hand. She is smiling because she is happy and a perhaps also a little sad.

STEP 2: Setting Brushes in Photoshop

Here is the only brush that I’m using for my character coloring. For my painting I am going to use only standard brushes.

Before you begin painting, you’ll need to set your brush settings. Start by selecting the Brush tool then using a standard brush such as the one shown below.

STEP 3: Color Palette

You must decide on the colors you’ll use before you start on the painting. Here are my colors used for this artwork:

STEP 4: Layers

Create a new layer called “sketch”. You can create this sketch in Photoshop or on paper. After you created the sketch layer, change the blending mode to Multiply and always keep it as the top layer so that you can see it as you’re painting.
Now, look at how my layers are set up. I have layers for all the objects in the sketch. Painting on new layers allows you to easily make corrections later in the painting. It is much easier to fix errors if the main elements of your painting are separate entities. This step is really really very important!

STEP 6: Working On The Background Color

Here, let me show you how I colored the background. Choose the Paint Bucket Tool (G). After you filled the background, it must be like this. Make sure that your layer setup is the same as shown in the images below.

STEP 7: Coloring the Main Shapes

Before continue the painting process let me show you my layer order again. I just changed the order of the layers because sketch layer must be on the top of all layers and its setting must be set to Multiply. At this point, we can start coloring the sketchwork and you can define the main shapes. Using the Brush tool (B), begin painting the character and the tree on their own separate layers. Make sure that your brush has a hardness of 100%. A brush with a soft edge can produce blurry results.

And at this step I would like to change the size of my file because I want to add finer details. So I open Image>Image Size, and increase the file dimensions to 1500×1459.

STEP 8: Adding Details

Now I can start to add the details. In this step, I started by coloring the face of the character. Make sure you have the proper layer selected before painting.

And here I have made a new copy of the tree layer and then I have made some details on the tree. I also closed the first tree color layer.

Now here is a screenshot for the details. I began to add some more details on my painting, like grass and some little flowers. At this step I have created a new layer named “flowers”.

I’m adding some more colours and thin lines of detail on the tree.

Now take a look at all details which I just made. I continue to add more details and opening some new layers when I need.

STEP 9: Special Attention to the Character

Now that I’m satisfied with detailing the scenery and the tree I add some details for her clothing. At this point I realized that my character is looking very simple and not so good, so I thought it was time to make some changes. I tried some out some different looks for the character, and continued to add more details. Again, pay attention to my layer order here. At this step I have some more new layers as you see. All layers have a name.

I’ll now begin to add small details on the character, adding more yellow and green colours. By the way don’t forget at this step you don’t have to over detail everything. At this point I kept working on main details and lights, until I got a nice contrast. Sometimes I have to change some colors. At this point I am pretty much finished painting her clothing and body. I also pulled the sketch layer a little to one side for you to see how the character is looking without the sketch base.

STEP 10: Adding Polish & contrast

I used Color Dodge for the bright areas. This is how it looks once all the adjustments are done with the Color Dodge and Burn tool. I continue to add more details to the tree using various brush sizes and color. Once there are enough details, I begin to smooth it using a brush with a soft edge. I also use the Dodge and Burn tools to shade the branch.

And also I do want to show you how I added those darker areas on my tree layer. I used Burn Tool for this effect. I always use this when I want to add some dark areas on my illustrations.

And I do add some strokes with the Smudge tool too. I use this because I want to add soft blurry areas to the cloud and the background. At this point I saw my cloud is not so detailed. So, I have created a new layer to paint some cloud details using both the Smudge tool and the brush.

STEP 11: Adding More Details

At this point I realized that my painting needs more flowers . So I make a new layer and paint some little nice simple flowers as you see. I continue adding more details. I add some strokes with the Dodge tool, I use this because I want to add some slight light areas on the grass.

Now after finishing work on the grass and the background, I can start to add more details on her hair and face. I choose the Color Dodge and add some brush strokes her face.

Now pay attention at the details which I made using only the color dodge tool.

STEP 12: Color Correction

The painting is all but finished with the exception of color correction. First, merge all layers. Now, from Image>Adjustment>Brightness>Contrast you will change the colors a little. I do want the illustration to have a little more sunny effect.

And from Image/Adjustment/Brightness/Contrast make the settings as I did. Here is how the illustration is looking more sunny and more gleeful and joyful.

Final Illustration

And here’s the final image, I hope you found this tutorial interesting. Thank you for reading.

Top 20 T-Shirt Design Tutorials and Articles

I’m going to let you in on a little secret. I’ve been working on an eBook titled Thread’s Not Dead: The Designer’s Guide to the Apparel Industry. (EDIT: it’s out! buy it here in ebook and hardcover) During my research, I’ve realized that we’ve actually written a LOT about the subject in the past 3-4 years. Articles that I have completely forgotten about myself! So I’ve gone back through the archives of the GoMediaZine to dust off some of our best articles we’ve ever written about the apparel industry. Some of these aren’t directly related, but answer common questions apparel industry designers have (like pricing for instance). If you’ve been following Steve Knerem’s “How to Start a Clothing Line” series on the zine, then you surely find something useful in these links.

Oh and at the end of this post is a sign up form if you want to get notified when the eBook comes out! I can’t wait!

Tutorials:

Articles:

Have fun taking a look back at some of our best articles. Thread’s Not Dead has contributions and case studies from from Angryblue, Matt Wigham, Jeffrey Kalmikoff, Marc Hemeon, Monk One, Horsebites, Glamour Kills, Cure Apparel, Paint the Stars Clothing, Fright Rags, Jon Kruse, Brandon Rike, Go Media, Rikki B, I Am the Trend, Jakprints, Jamie Tallerico, and Maxx242.

Creating a Cloudy Dream Scene in Photoshop

Sometimes real life can be boring so artists extend their imaginations and designs to extreme limits through dream scenes, fictional world, or surrealistic images. Today we’ll be creating a cloudy dream scene using Photoshop’s different tools and techniques.

Tutorial Details:

Program: Adobe Photoshop CS5

Difficulty: Intermediate

Estimated Completion Time: 2 hours

Resources

Before we start, here are the stock images I used in creating the artwork. You can download the images for free. Just sign up to start downloading.

From CGtextures

Clouds

Rocky Mountain

Tower

Rock Arch

Final Image

Procedure

Step 1

To start our project, first create a file with a size of 1080×810 pixels. If you want to have a higher quality image, I recommend to increase the resolution up to 300ppi.

Step 2

Next, open the cloud.jpg and place it right in the centre of our workplace. The cloud.jpg image is a huge file so you should resize it just enough to occupy the same area of our image. You can do it by pressing Ctrl+T to activate the resizing handles. You can hold down the Shift key to resize the image without loosing its original proportions.

Step 3

Next, add a new layer just below the “cloud.jpg” layer and name it as “blue sky.” Now, by using the brush tool (B), set to a size of 175px and a hardness of 0%, brush the upper portions of our image with color #275488 going to a gradient, as shown below, of color #628eae.

Step 4

Next, go back to the “cloud.jpg” layer and erase the indicated areas shown in red below.

We did the previous processes to clear up the upper portions of our sky. The final effect should look like the one below.

Step 5

Next is to open the Tower.jpg. Then, by using the the Magic Wand tool (W), select the areas indicated in a . Next, click the Refine Edge button, b and follow the settings indicated in c then trace the outline of the tower.

Step 6

After refining the edges of the tower, place it somewhere in the center of the image. I erased some parts of the tower that I think are not important for the final effect.

Step 7

Next, a new layer. In this layer, using the Brush tool (B) set to a size of 45px and hardness of 0%, paint some grey (#262626) areas on the clouds just below the tower indicated by the arrows below. Make sure to activate the Tablet Pressure button and decrease the brush opacity to 64% prior to doing the shading.

Step 8

Next step is to add further shadings and highlights to the tower to enhance its depth. First use the Burn tool (O) with a soft brush to darken the areas indicated by the arrows in a. Then use the Dodge tool (O) with the same soft brush to lighten up the other side of the tower indicated by the arrows in b.

Step 9

Next step is to open the Rocky Mountain.jpg. Like what we did in Step 5, select the areas we don’t need by using the Magic Wand tool (W), a. Make sure to press the Shift key to add selections. Next press the Refine Edge button, b then, using the settings in c, trace the outline of the mountain. Finally, when your content with your selection, hit delete.

Step 10

Next is to add the waterfalls coming out of the rocky mountain. To do this, select the Brush tool (B) set to a size of 3px, hardness of 100% and opacity level of 100%, a. Make sure to activate the Tablet Pressure button prior to painting the falls. In painting the waterfalls, start with short lines rushing out of its source, b-1. Then, continue the process by painting longer lines that fades away at the buttom, b-2. Add more lines spiking out of the falls, b-3. Then finally, put some small amount of dots at the buttom of the falls to make an illusion of mist.

Step 11

Next, using the brush tool (B) set to a size of 20px and hardness of 7%, paint some shadings (Color #000000) on the areas indicated in red below.

Step 12

To add a misty and foggy effect at the buttom of the falls, use a soft brush, first in color #ffffff, set to an opacity of 46%, followed by color #000000 with an opacity of 15%.

Step 13

Next we’ll add the river flowing from the waterfalls down to “Earth.” Using a small brush, size 3-4px and hardness of 100%, follow the flow of the arrows indicated below. For the portion where the water is falling down to earth, use the same techniques we did in making the falls.

Step 14

Next we’ll add the “Energy Absorbing Cable” from the tower to the poor rocky mountain. To do this, use the Brush tool (B) set to a size of 3px and hardness of 100% and draw a thin simple line just like in a. Then add some highlights in the upper portions of the cable (Color #ffffff), b. Then add the primary vine creeping around the cable, c, followed by further detailing shown in d.

Step 15

Because we want to complete the “Old Natural” effect, we also added vines on some areas indicated below.

Step 16

Next open the RockArch.jpg. Press Ctrl+T to activate the resizing handles, a, then press right-click and select Flip Horizontal from the dropdown menu, b. Next, using the Magic Wand tool (W) select the areas shown in c. Next, use the Refine Edge button, just like what we did from the previous steps to further “refine” the selction then hit delete. Finally, adjust the color balance (Ctrl+B) to match the color tones of the final effect we want, d.

Step 17

Next, add a new layer and fill it with color #000000 using the Paint Bucket tool (G). Next, go to Filter > Render > Clouds. Finally change its Blend mode to overlay and decrease its opacity to 16%.

Step 18

As you can see we have to put something more in the tower to draw more attention to it. For this step, add a new layer and fill it with color #000000 using the Paint Bucket tool (G), a. Then go to Filter > Render > Lens Flare and follow the settings in b. After that change its Blend mode to Screen. The final effect is shown below, d.

Step 19

Next is to add more details to our image. First add a new layer and name it as “Bridge.” Now, using the Paint Brush tool (B), we’ll add a bridge connecting the tower and the rock arch. To do this, use a small brush with a size of 3-4px and hardness of 100% and make a Primary line for our bridge, a. Then add some shadings, making sure to follow the source of light, and add some more details. I added the railings for the bridge to add a realistic effect, b. Complete the effect with an “Old Nature” theme with the use of vines, c. I added further more details shown in d like the vines creeping across the rock and a small opening on the tower for the bridge.

Step 20

Next add a new layer and name it as Greenish tint and fill the entire selection with color #2d4a3f then change its Layer settings indicated in a. Next, add a new layer and name it as Sepia Tint and fill the entire selection with color #ad7a02 then change its Layer setting indicated in b. Finally, add another new layer and fill the entire selection with color #000000. Next go to Filter > Noise > Add Noise and set it to 16%. Finally, change its Layer settings indicated in c.

Step 21

Next is to add the border shadings. To do this, add a new layer and name it as “Border” then using the paint Bucket tool (G) fill the entire layer with color #000000. Next, using the Eraser tool (E), erase the the areas indicated in red below. Finally, decrease its Opacity level to 20%.

Step 22

The next step is to add a blur effect to complete the “dream scene.” To do this, select all the layers in the Layers tab by Shift+clicking the first and last layers then press right-click and choose Merge Layers from the dropdown menu, a. After merging the layers, go to Filter > Blur > Gaussian Blur and change its settings indicated in b.

Step 23

The last step is to erase the area indicated in red below using the Eraser tool (E) set to a size of 1000px and hardness of 0%.

Conclusion

That’s it, we’re done. The final product is shown below. Hope you had fun working on this project! Thanks for reading.

Go Media’s Flickr Pool Showcase – October 2010

Adobe Illustrator: Opening Tricky Files

Sometimes files just don’t want to play nice. And usually when that happens, there’s a deadline looming.

Knowing ahead of time how to get out of a tricky situation can make the difference between having time to do the job at an easy pace, or pulling your hair out.

I’ve come across two handy Illustrator utilities — one software, one a tip — that might just save your neck if you ever get yourself into the situations addressed by each of these.

Opening new Illustrator files in an older version

It’s happened to all of us: we’re not running the latest version of Illustrator, and a client or fellow designer sends over the CS18 version, which of course we have no way of opening. Sure, one can ask the sender to do a “Save As…”, but usually our priorities are not those of others. What to do?

A tip over at MacOSXHints.com has one possible workaround: place the EPS document into your current version of inDesign and then create a PDF from it. The resulting PDF you should be able to open in Illustrator, and from there get access to vector logos or any other elements you need access to.

Opening Illustrator files in a different format

Poster by Matteo Discardi is an OS X donation-ware utility that does one thing: drag some Illustrator files on the app (.ai, .eps or .pdf) and a small prompt window pops up that allows you to change the file to any of those three formats. Why not just open the file and do a “Save as…”?

Simple: files that crash Illustrator when attempting to open them. We’ve all been there. Having the file in a different format might make the difference between being able to open the file and access the vector goods you need, or spending hours on emails and phone calls trying to get the original designer to send the file in a different format.

Discardi also offers another vector file conversion tool, Pongo, which will take any Illustrator CSx file and convert it to your choice of .jpg, .png or .svg — not so much a neck saver but a handy way to quickly get a raster version of a vector art file. Worth having in the toolbox.

WebP: Google’s New Web Image Format

So here’s one I didn’t see coming: Google has announced a new image format for use on the web. Named “WebP“, Google claims

To improve on the compression that JPEG provides, we used an image compressor based on the VP8 codec that Google open-sourced in May 2010. We applied the techniques from VP8 video intra frame coding to push the envelope in still image coding. We also adapted a very lightweight container based on RIFF. While this container format contributes a minimal overhead of only 20 bytes per image, it is extensible to allow authors to save meta-data they would like to store.

While the benefits of a VP8 based image format were clear in theory, we needed to test them in the real world. In order to gauge the effectiveness of our efforts, we randomly picked about 1,000,000 images from the web (mostly JPEGs and some PNGs and GIFs) and re-encoded them to WebP without perceptibly compromising visual quality. This resulted in an average 39% reduction in file size. We expect that developers will achieve in practice even better file size reduction with WebP when starting from an uncompressed image.

There is a conversion tool, and Google says that an alpha transparency layer is coming soon to the format, which will give it PNG-style transparency. Oddly, the conversion tool is only currently available for Linux users!

Google’s WebP info pages contain a Gallery showing comparisons between JPG and WebP images. Since browsers can’t yet support WebP images, they are inside some sort of “PNG container” as they mention on the site.

The surface claim here is that Google wants to modernize compressed image formats for use on the web, to make downloading webpages and images faster. Obviously, as an advertising company the faster a page loads, the quicker you see their ads.

Seeing as how the format is Open Source, I can’t really see any downside to Google being the originator of the format. The GIF format ran into issues since it was patented, which led to the development of the PNG format. The patent on the GIF format has since expired, according to Wikipedia.

The real question is this: will it be adopted, and how widespread will the adoption be? The first step is for browsers to support the format, then those who create images. Will the major graphics software developers support WebP, such as Adobe? I think that will be a deciding factor. Using a command-line prompt to convert images is not going to help the adoption rate.

Some independent graphics software developers have already jumped on the WebP bandwagon. Pixelmator has already started adding WebP support to their software. But I think it’ll take seeing WebP support in software that is more widespread across the graphics and web industry before we will see any widespread support. Yes, I am talking about Photoshop and Illustrator.

So as creative types, I’m curious what our readers think of the new format, and how likely you think you’ll be to use the new format if/when Adobe and the like start supporting it. Will the file size savings be worth moving over to a new format, one that may present compatibility issues at the outset when sharing files with others without support for the format in their software?

Is the file size saving something that concerns you as a graphic designer or a web developer? How big of a role does it play in your creative process?

Go!