Starting Your Own Shirt Line. PART II: The Creation of Your Art and Working with a Printer.

starting your own t-shirt line
Hey Guys,

Welcome to the second article in the series ‘Starting Your Own Shirt Line’. In the first article, Start – Up, we covered the topics:

  1. Originality
  2. Research
  3. Who will like it?

In Part II I’ll take you through my process of creating the Octolady and my experience working with a printer.

CREATING THE ART

Here is where I start: paper, pencil and a vision for the shirt.

Sketching/Brainstorming

The best part of the creation is stage 1: brainstorming and your first thoughts. This is as raw as it gets. Your first thoughts are often your best ones and it’s good to run with them. I knew I wanted a style for the overall shirtline. I thought of using my logo in all my designs but there was more creativity I wanted to pour out. (Johnny Cupcakes is a great exmple for branding your logo.)

sketching is as raw as it gets

For this shirt I wanted to draw a person of some sorts. So why not have this person be engulfed in an octopus? I figured I’d throw in some water, a koi fish, and my love for art nouveau. I loosley sketched out my thoughts, while keeping design principles and content in mind.

Tip #1: REFERENCE
I’ve been around various artists that look down on reference and I’ve been around artists that always use it (not for tracing but a visual!). If you want to be a carpenter what do you do? You take an apprenticeship, study the trade and other carpenters’ work. Same goes for art. I took pictures of the arms and looked at octopus pics. How else will you know how something looks? Use it, become better!

From here I need to enlarge my sketch to the size of the shirt. My method might be a bit tedious but this is what works for me. I scan in the drawing, configure the actual size in Photoshop, print out on multiple 8.5 x 11 paper and trace onto the final paper using my light box. *Make sure you know the largest screen size your shirt printer uses so you know how large to make your drawing.

Tip #2 DRAW FOR THE MEDIUM
It took me a few shirt illustrations to understand that when you draw for apparel you have to draw for the medium. My background is in print so whatever I would draw on paper is what I see in the final print for the most part.  I found out I needed to start drawing bolder lines and understand that what I see on paper doesn’t translate to clothing 100%. I don’t have to sacrifice anything, just make adjustments with my linework.

Inking

There are so many ways to ink and many tools to ink with. Work with what feels comfortable to you. There is no “by the book” way. I started out about 5 years ago using a calligraphy pen and would dip it in ink. My results were thin lines.  I would have to go over my lines multiple times to produce thick enough line weight. I currently use Micron pens.  These help me make consistent lines and I’m most comfortable with them. As far as paper choice goes I use Canson/Bristol Smooth/100lb.

Tip #3 INK METHODICALLY
Be methodical when you ink.  You need to think a few steps ahead of yourself before and during the inking stage. Think about your coloring stage. Will it be a 1-4 color job? Keep in mind the color shirt you will be using. Will the art be on a dark or light shirt? Your drawing may have to suit that color.

For this piece I wanted color toned paper because I planned on framing the piece. After going to multiple art stores I found a nice parchment toned paper at Utrecht.  The paper itself had alot of tooth to it like printmaking paper. It dried up my pens pretty fast fortunately the result turned out fine. Stick with paper that is smooth.

Inking is a fun process because your drawing comes to life and line work becomes crisp and bold. I always document my work for later use, like this article.

Tip #4 LINE WEIGHT
Look at how different artists use line weights. Thick line weight defines and makes parts pop out. Thin line weight pushes content back.

Understand where line weight should be thin and thick. A few of my favorite artists Alphonse Mucha, J.Scott Cambell and Frank Cho all demonstrate excellent pencil and ink stages as well as awesome line quality.

Tip #5 Art fundamentals ALWAYS apply
Design/composition, lightsource, perspective, color and being a good draftsman is essential.  It’s best to figure these parts out in your pencil stage.

I follow a lot of artists in tattoo, film, gaming and comic industries. In March 2009 I met Shawn Barber (www.sdbarber.com), an awesome painter and tattooist from San Francisco.  As an artist and teacher he stresses how vital it is to balance the fundamentals of art. Learn from many sources.

Alright, the ink is done!  I’m feeling good about it so let’s talk color.
WAIT!
How did I get this 30×26 piece on my computer so I can color? Forget the camera unless you have a studio. In my opinion the best solutions are either flat bed scanners or using a copier company. In my case I use Kinkos. Most flat bed scanners are great for 8.5×11 pieces but anything after that I recommend drum scanners because they scan evenly.

MAKE SURE THEY CLEAN THE ROLLERS! Many people use these scanners and I have had oily streaks bleed onto original art that will never come off (Please insert Incredible Hulk!). Scan at least 300 dpi in color even for black ink. Color scans can be changed to grayscale in Photoshop. If you scan your image in black and white the lines look pixelated.

Color

You know it, you love it, it’s your best friend, the color wheel. If you are not sure what colors to throw down, research. Research the master painters, fashion trends and other successful apparel companies. I’ve found awesome color combos in Japanese prints.

When I got to this stage I knew I wanted to up my coloring game and style. I wanted to do something different than what I been producing. I did probably 20 color samples in Photoshop trying to find the right combinations.

Eventually I opened up Illustrator and started using brushes. I understood where I wanted the light source to be, so that was my guide for the darks and lights. I also wanted colors that worked with the mood of the drawing.

Now here comes the tricky part. You need to understand a little bit about silk screen printing. There are advanced screen printing methods, but let’s keep this simple with spot colors. Spot colors are assigned their own screen. You have to color for the medium. Unless you want to pay $30 a t-shirt for a 12 color job, think about color application. Figure out ways to manipulate a 1 color job to look like a 2 or even 3 color job by using half tones and utilizing the shirt as a color. There are multiple forums that are answering these questions. Remember T-shirt forums.com, How to Start a Clothing Company.com, and Google your brains out.

I used multiple brushes, half tones and utilized the shirt color for shadows. I truly believe originality comes from experimentation. Remember in the first article, originality will set you apart from the competition.

Tip #6 LIVE TRACE
Live trace in Illustrator saves time and file size. When you apply the live trace option (and expand) to your art all your lines become vectorized. This means you can make your art any size and it retains its shape and quality. It also makes your lines super crisp and ideal for apparel printing because it will burn through a screen better.

WORKING WITH A PRINTER

I finished my piece. Now I need a printer. There are many awesome printers in the US I’ve found. Jakprints in Cleveland, Store Envy in Chicago, Groovy Graphics in St. Petersburg, Fl just to name a few. Ask them questions and learn a little bit about the process and what kind of ink applications are available.

I am fortunate to have Jakprints in Cleveland (www.jakprints.com) so  I can meet directly with the sales rep and explain my vision. Remember, this is your creation and your hard earned money; be involved as much as possible. I really didn’t know much about the process when starting out, but they were very patient and now I know what I am talking about.

Tip#7 FILE ORGANIZATION

One of the best things you can do is keep your files organized. SAVE  AND MAKE DUPLICATES OFTEN.  Always send at least a 300 dpi flattened image and a low res jpeg mocked up on the apparel to give the printer a visual of placement. Check out out Go Media’s shirt mock up website to do this. www.shirtmockup.com

become a feeler

I found out Jakprints offers many methods to print the Octolady. I could get straight plastisol ink, dye sublimation, a hybrid technique, softs inks, etc. If you can go to your print shop, ask for samples of these different techniques. Grab some of your own shirts. Become a feeler. Feel the print. Is it kinda crusty, smooth or soft? Find out what technique it is.

For the Octolady I used a hybrid technique. The print feels like part of the shirt. It feels soft and I didn’t want heavy ink on the shirt. I can run it through the washer and dryer multiple times and it holds up. It turned out amazing! I also added a custom tag where I placed my logo, website and contact information. I also included my signature to add originality to it so people can say “I own a Steve Knerem.” (pronounced ken-air-em) Remember marketing, promotions, and advertising during the final production process.

This wraps up Part II.  Remember: create something original and have fun with it. Be true to yourself.

I’ll end the article with a last thought. I read through the comments from Part I and some readers were hesitant to actually produce a line meaning cha-ching from your pockets. You can create the art for free. When you talk to the printer you are making a commitment. Sometimes it’s hard to pull the “financial trigger.”

I know it’s just clothing but here’s the cool part. There’s anticipation, there’s the financial turn of the stomach, but when you hold your product in hand it’s an awesome feeling of accomplishment. “This is awesome!” It’s an even better feeling of accomplishment when someone buys it and wears it because they appreciate your art and that you wanted to bring a quality product to them. This leads into the final article, Business. ARM YOURSELF!

View my work at www.steveknerem.com

View Tshirts at www.steveknerem.bigcartel.com

Follow me at  www.facebook.com/steve.knerem

GMZ Reader Special: The Making of Andrew Jackson

Hey Go Media Zinesters, Jeff Finley here. If you didn’t know, I actually spent all of August working on new Arsenal and Zine stuff exclusively. To be specific, I was working on some really rad tutorials. One of which you folks read last week about how I created the artwork for my band’s song “24th of January.”

Andrew Jackson album cover

Learn to Create This Exact Design

Well I’m writing to tell you about my latest tutorial which I think you will really like. This time it’s of the premium video variety, downloadable from the Arsenal for only $49.99. If you keep reading, you’ll see a $10 discount exclusively for GoMediaZine readers! It’s a 2.3-hour complete walkthrough of my entire design process from start to finish. If you liked the artwork I’ve been doing for Parachute Journalists lately, then you’re going to love this tutorial. It’s for our newest song called Andrew Jackson.

Video Tutorial Preview

The song itself was inspired by the education (or lack thereof) in schools about the dark side of former U.S. President Andrew Jackson. He’s well known for his Trail of Tears where he marched thousands of Native Americans out of their homeland which led to lots of disease and death. The song is a satire and is a little different than our other songs because it’s sung by our bass player Jeff Steinwachs. It’s catchy and and a little rough around the edges, which is just how we like it.

Listen to the song

<a href="http://parachutejournalists.bandcamp.com/track/andrew-jackson">Andrew Jackson by Parachute Journalists</a>

close up of the Andrew Jackson typography

The artwork I created for the song took inspiration from the Trail of Tears. That’s where the tear drop shape comes from and in the video I described my design and color choices in more detail. The typography was very 1800s inspired and you’ll see how easy it is to create the type treatment in Illustrator. I do some hacking with some of Illustrator’s built-in toolset to get my desired results. You’ll see!

Andrew Jackson tutorial features

close up of the Andrew Jackson illustration

Even if you’re an experienced designer curious about how a fellow designer works, there are things you can take away from this video.

Topics Covered in the Tutorial

  • Sketching and The Importance of Concept
  • Creating a Type Treatment From Scratch
  • Typography Tricks and Shortcuts
  • Using Photoshop and Illustrator Together
  • Authentic Vintage and Aging Tricks
  • Retro Lighting Techniques
  • Creative Usage of Arsenal Vectors & Textures
  • Wacom Tablet Illustration and Line Art
  • Combining Illustrations and Photos
  • Graphic Design Composition and Layout

GMZ Reader Discount

The tutorial normally costs $49.99 but Zine readers get it for $39.99 throughout the rest of September. Just enter the coupon code “ajtutgmz” at checkout.

Coupon Code: ajtutgmz

CHECK OUT THE NEW TUTORIAL!

I am excited to see what you guys come up with after watching some of the techniques I use. I think the stuff I teach you is versatile enough for many different applications. Let me know what you think!

Adobe Illustrator CS5 HTML5 Pack

Adobe recently announced the release of their HTML5 Pack for Adobe Illustrator CS5. It’s totally free for Illustrator CS5 users. Here’s a quick rundown from their site:

  • Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
  • Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
  • Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
  • Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.

It’s interesting that this was released around the same time that Apple relaxed their rules about how iPhone and iPad apps can be developed, specifically in allowing tools like Adobe’s Flash-to-iPhone compiler found in Flash CS5.

In effect, Apple now allows Adobe use their Flash-based tools to develop apps, and Adobe releases tools to allow Illustrator CS5 users to develop non-Flash interactive content for the web — which in particular means developing interactive content for the iPhone and iPad. And of course for Android, since most Android phones still do not have the capability to run Flash content.

Note that this has nothing to do with Flash content displaying on Apple’s iOS devices, but interestingly offers an alternative to Flash for developing interactive web content. The two are only loosely related, but I find the shift in attitude from both companies very surprising and welcome.

I’m glad to see Adobe offering these tools and stepping up to the plate. Sure, they have a lot riding on Flash and would prefer creators to use their proprietary formats. But designers need to have tools to develop in whatever environment is applicable to their project. If a client wants HTML5, Adobe needs to offer the tools to do so before someone else beats them to it.

Adobe Evangelist Greg Rewis has an extended video demonstrating the use of the HTML5 Pack for use on the web. Looks pretty slick:

Go Media’s Flickr Pool Showcase – September 2010

Hello there! My name is Simon. You’ve probably met me electronically through the links I post on the Go Media and Arsenal Facebook pages: I sign ^SBH. Anyway.

The good folks at Go Media and I were thinking that there’s a need to showcase all the goodness that the contributors of the Go Media Flickr Pool are creating. After a non satisfactory attempt using the RSS feed and some automatic posting on the Arsenal’s Facebook page, we decided to settle on a showcase/roundup that would be monthly published on the Zine (as it used to be done before). And they asked me to write it, which is pretty awesome. Anyway.

There are no real “rules” as how to be selected. Just post good work :-) When I select stuff, I try to be as diverse and eclectic as possible.

Baetulona | Carpe Noctem
Baetulona | Carpe Noctem by MikeFr

Knowledge
Knowledge by freshfauxx

MF Skull poster
MF Skull poster by MikeFr

Dont Sleep
Dont Sleep by Beadlerworks

Time for a change
Time for a change by Beadlerworks

Monster of The Month 10 Monster of The Month 10 by #rua309

Pool Balls
Pool Balls by Jordan Kauffman

OtherSpace
OtherSpace by hiDobrado

Hitler
Hitler by jeff_finley

tri-tri again baby
tri-tri-again baby by dillill

unclesam
unclesam by visual80

Echo Echo
Echo Echo by designbyrds

I really hope you liked that “Chapter #00” of the Go Media Flickr Pool showcase. See you in September for the Chapter #01!

Design a Sleek Website Interface in Photoshop

In this tutorial, we’re going to learn how to create a sleek & clean portfolio/blog Website interface design inside Adobe Photoshop. As we go through, we will deal with selections, layer styles, some basic typography, and so on…We’ll also use 960 Grid System to keep our layout nicely well-aligned. So come on in, let’s get started and have some fun!

Tutorial Details

  • Program Used: Adobe Photoshop CS3 or higher.
  • Difficulty: Intermediate
  • Estimated Completion Time: Around 2-3 hours

Final Outcome

Take a look at what we’ll be creating together. Click the image to enlarge.

Step 1

As I mentioned earlier, we’ll use 960 Grid System to keep everything aligned. Once it’s downloaded, open the document “960_grid_24_col.psd” up in Photoshop.

Since we’ll use guides a little bit too much, we need to get them—and the Rulers—viewed. In order to do that, go to View > Extras, Rulers, and Snap (to make our objects snap in alignment with the guides). By the way, the keyboard shortcuts of these three commands are definitely ones you wanna memorize.

Also, notice that the height of the final outcome is taller than the current one. So we need to adjust our Canvas Size, by going to Image > Canvas Size > Height: 1637px.

We need to fill our website background with a light gray color. To do that, create a new layer, create a selection over the whole canvas (1020x1637px) using the Rectangular Marquee Tool (M), set your foreground color to: #f5f3f4 then click Shift+Backspace in order to fill the selection with that foreground color.

Step 2

In this step we’ll create a thin bar at the top of the page, that would state your availability status. So go ahead and grab the Rectangular Marquee Tool (M), create a selection of 1020x40px, and fill it with this color value: #e5e6e8

Type some text, using the Horizontal Type Tool (T),  that represents your availability status (like: Available for hire), using the following character settings:
(Notice that I’ll only mention the settings that may be changed, the other settings can be seen in the image below. For example: the default Tracking value is set to zero, which is what we want, which means it doesn’t need to be changed, therefore, I won’t mention it below).

  • Font Family: Archer (learn more & buy at Typography.com)
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #9a1447
  • Kerning: Optical

And type your email, so that people can get in touch, using the following character settings:

  • Font Family: Georgia (available in all the operating systems)
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #9a1447
  • Kerning: Optical

Step 3

Let’s create a new bar that will contain the Website’s logo and navigation. We’ll start by creating a selection of 1020x100px using the Rectangular Marquee Tool (M). Then filling it with this color value: #9a1447

Using the Horizontal Type Tool (T), type your Website’s name, and apply the following character settings to it:

  • Font Family: Gotham Rounded (learn more & buy at Typography.com)
  • Font size: 45px
  • Font weight: Book
  • Anti-aliasing setting: Smooth
  • Color: any color for now, as we’ll apply a Gradient Overlay
  • Kerning: Optical

Now, we’ll go ahead and apply a Gradient Overlay to our text, according to the following image:

Select the Horizontal Type Tool (T), and type your navigation text using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 25px
  • Font weight: Light
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

We’ll separate these words using  by putting small circles between them. So using the Ellipse Tool (U) create a perfect circle (hold down the Shift key while drawing) of 5x5px, and fill it with: #ffffff.

In order to align the vertical centers of the logo/navigation with its background (the dark India pink bar), we’ll select the layers of the both of them, then click on “Align vertical centers” in the control bar while having both layers selected.

As you work with Photoshop, I really encourage you to get into the habit of giving your layers reasonable names, and even grouping them. — I personally rename every single layer in my document! Take a look:

Step 4

It’s time to create an area where we can write some welcoming text to our site visitors, and put some images of our featured work. We’ll start by creating a selection using the Rectangular Marquee Tool (M) of 1020x300px.

Let’s give this selected area a gradient color overlay, why don’t we? So select the Gradient Tool (G), open up the Gradient Editor dialogue box, set your color values from: #ececee to: #f5f3f4, and while selecting Radial Gradient as your dragging option, drag from the top-right of your selection to the bottom left of it—you may also hold down the shift key to constrain your angle.

Grab the Single Row Marquee Tool, and create two selections each one of them is: 1020x1px—don’t worry about the dimensions of your selection, since the tool itself will do that automatically—place them like in the image below, and finally fill them with white (#ffffff).

Step 5

Drag two new horizontal guides according to the following image. These two guides will indicate the top and bottom borders of our image slider—that we’ll start creating in just a moment.

Let’s start creating our image slider! First, we’ll create a holder for our images, we’ll do so by creating a rounded rectangle, using the Rounded Rectangle Tool (U) of: 390x145px, radius of: 3px—don’t worry about its fill color, an image will be placed there, anyways.
Call this layer: “image_holder.”

Now let’s apply some Layer Style to our image holder to stop it from looking plain. Will leave you with the image below…

In order to place an image of a featured piece of work, go to File > Place > locate to where your image is > Place. Make sure that the layer of your placed image is right on top of “image_holder” layer. Then right-click on your image’s layer and choose: “Create Clipping Mask.”

What we’ll create now is an arrow to slide between images. So we’ll draw a circle using the Ellipse Tool (U) of 40x40px, fill it with Black (#000000) and take its opacity down to: 30%.

Using the Custom Shape Tool (U) create a 20x20px arrow and fill it with any color just for now.

Apply some Layer Style to it according to the following image:

Drag a new horizontal guide according to the following image. This will indicate the top border of the text that will come below the image.

Using the Horizontal Type Tool (T) type the name of your featured project/design using the following character settings:

  • Font Family: Archer
  • Font size: 20px
  • Font weight: Medium
  • Anti-aliasing setting: Sharp
  • Color: #ab114a
  • Kerning: Optical

Beneath your title, type a very brief description about your project; using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical

Step 6

Drag a new horizontal guide according to the following image:

It’s time to write our Website’s first read—well, probably—the welcoming title, using the Horizontal Type Tool (U), and the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 41px
  • Font weight: Light
  • Anti-aliasing setting: Smooth
  • Color: #ac114a
  • Kerning: Optical
  • Tracking: 5

Notice: I wanted my title to fit in 10 columns of my gird, but it was a little bit short, so I had to increase my tracking value. However, if you’ll write another title—you’ll probably do that—then you should adjust your tracking value depending on how long your title is. For example: if it was too long, then you may have to decrease your tracking value.

Then type a subtitle using the following character settings:

  • Font Family: Archer
  • Font size: 25px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #9a1447
  • Kerning: Optical

I know it’s a little bit weird, but I’ll start with creating the buttons first, then, typing the welcoming text (the text between the title and the two buttons). So using the Rounded Rectangle Tool (U), create a 150x40px rounded rectangle, with 3px radius, and fill it with any color for now—obviously, as we’ll apply a Gradient Overlay.

Now let’s apply some Layer Style to our plain old button/rectangle so that it looks more interesting. Will leave you with the image below:

Now using the Horizontal Type Tool (T) type some text inside the button (“hire us,” for example), and apply the following character settings to it:

  • Font Family: Gotham Rounded
  • Font size: 24px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Tracking: -25

Apply a Drop Shadow to your text. Use the image below for reference.

Duplicate the button you just created, move to the right, and change the text on it (maybe something like: “see more.”)

Back to the welcoming/about text we’ve not written yet. Using the Horizontal Type Tool (T), create a text block and type around four lines inside of it; using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #9a1447
  • Kerning: Optical
  • Leading: 25px

Our text now is probably not centrally aligned between the title and the two buttons. Maybe you can align it visually. But *personally* I use a little trick—that you may be familiar with—to do that. Using the Rectangle Tool (U), create a rectangle that fills the area where you want to align your text (the area between the title and the two buttons, in our case), select the layer of the rectangle that you’ve just drawn, and shift click to select the text’s layer, then click on “Align vertical centers” in the control panel—while having both layers selected.

Don’t forget to keep your layers panel organized. Here’s how mine looks:

Step 7

Drag a new horizontal guide according to the following image.

Using the Rectangular Marquee Tool (M) create a selection of 1020x50px and fill it with this color value: #630d28

Grab the Rounded Rectangle Tool (U) and create a 190x30px rounded rectangle, with 3px radius and again fill it with any color just for now.

We’ll apply some Layer Style to it to stop from looking flat. Follow up with the image below:

Using the Horizontal Type Tool (T) type some words inside the rounded rectangle that shows that this is a search box, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #636363
  • Kerning: Optical

Next to this field, type the word “search,” using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Now let’s create the “GO” button. Create a rounded rectangle of 25x25px, with 5px radius, and fill it with this color value: #a41240.

Inside that rounded rectangle and using the Horizontal Type Tool (T), type the word “GO” and apply the following character settings to it:

  • Font Family: Gotham Rounded
  • Font size: 12px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Then, apply a Drop Shadow to it; according to the following image:

We’ll finish off this step by creating a simple breadcrumb. So grab the Horizontal Type Tool, and type this sentence “You are here: Home > Latest Stuff”—or whatever that tells that this is a breadcrumb. And apply the following character settings to your text:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Now tell her where she is, again, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Step 8

It’s time to start working on the content area. We’ll start by dragging a new horizontal guide according to the following image:

Oh, before we go any further, would like to ask you a question, mind you! Have you organized your layers panel?

Okay, back to our content area, let’s start working on the sidebar. So using the Line Tool (U) create a 1x43px line, fill it with this color value: #630d28, and place it like in the image below:

Using the Horizontal Type Tool (T), type a title (for example: “Advertisement.”) using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 30px
  • Font weight: Light
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical

Beneath your title, type a sub-title to support it. Using the following character settings:

  • Font Family: Archer
  • Font size: 20px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #ac114a
  • Kerning: Optical

Drag a couple of new horizontal guides according to the following image:

Using the Rectangle Tool (U), we’ll create a 110x110px rectangle, which will work as an ad block. Also, fill it with any color cause an image will be there, anyway. After you do that, apply a Stroke to it, use the image below for reference.

Make two copies of your ad block, then align them like in the image below:

Step 9

Drag a new horizontal guide according to the following image:

Create a new title using the same techniques we’ve gone through in the previous step.

Assuming your second title was “Categories,” let’s type some popular categories in our Website, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical
  • Leading: 30px

Using the Ellipse Tool (U), create a 6x6px circle next to each category, and fill it with this color value: #acaead.

Step 10

Create yet another title—something that has to do with Twitter this time—using the same techniques we’ve used above.

Now type some text as an example of a tweet, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical
  • Leading: 20px

After that, let’s type some information about the tweet, using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Semi-bold
  • Anti-aliasing setting: Smooth
  • Color: #636363
  • Kerning: Optical

Make another copy of your tweet and its info, and make sure to align it according to the following image:

We’ll end this step the same way we started it. By dragging a new horizontal guide according to the following image, that will indicate the bottom border of our content area.

Step 11

It’s time to design the featured blog posts area. Again, create a title for it like in the sidebar and make sure to align it  according to the following image:

Using the Rectangular Marquee Tool (M) create a selection of around: 253x115px, fill it with any color, and apply a Stroke to it. Use the image below for reference.

Place an image, and create a clipping mask for it—we already have seen how to do that.

We’ll now create a small bar that will contain some information about the blog post. So using the Rectangular Marquee Tool—or the Rectangle Tool (U) or whatever tool you prefer to use—create a 253x20px rectangle, fill it with: #9a1447, and leave 10px between it and the image above it.

Inside that rectangle, write some information about your blog post—I’ve written its categories and number of comments—using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #f5f3f4
  • Kerning: Optical

Drag a new horizontal guide according to the following image:

Using the Horizontal Type Tool (T), type the title of your blog post, using the following character settings:

  • Font Family: Archer
  • Font size: 25px
  • Font weight: Medium
  • Anti-aliasing setting: Smooth
  • Color: #636363
  • Kerning: Optical

Now, and again, using the Horizontal Type Tool (T), write a few lines of your post, using the following character and paragraph settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #630d28
  • Kerning: Optical
  • Leading: 26px
  • Paragraph: Justify all

Also, make sure to leave 20px between your body text and your title.

Let’s create the “Read More >>” button, why don’t we? Create a 110x20px rectangle and fill it with this color value: #9a1447. Also, make sure to align it according to the following image:

Type the word “Read More >>” inside of it, using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical

Then, apply a Drop Shadow to it. Settings can be seen in the image below:

Make a copy of this blog post and align it to the right. Use the image below for reference.

Step 12

In this step we’ll create an area for our featured work. So, again, create another title, like the others we created before, and make sure to align it according to the following image:

Place an image of a featured work with the same specifications of the blog post’s image.

Type a title and a short description using the same character settings we applied for the blog post’s text.

Create a “Case Study >>” button, that looks like the “Read More >>” one. Also align it according to the following image:

Step 13

Drag a new horizontal guide according to the following image, that will indicate the top border of our footer area—that we’re just about to start creating.

Using the Rectangular Marquee Tool (M), create a selection of 1020x300px.

Fill your selection with this color value: #9a1447.

Create another selection, this time of: 1020x290px (which means to leave 5px in the top and the bottom).

Grab the Gradient Tool (G), open your Gradient Editor up, adjust your colors/settings according to the following image. With your selection still selected, and with Radial Gradient as your dragging option, drag according to the following image. Make sure to hold down the Shift key to constrain your angle—if necessary.

Step 14

Drag two new horizontal guides according to the following image:

Type the first footer title (“Who’s behind this,” in our case) using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 30px
  • Font weight: Light
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical

Use the Line Tool (U) to create a 270x1px, fill it with White (#ffffff), and make sure to align it according to the following image:

Create a 270x70px rectangle—using whatever tool you prefer,—place an image inside of it, using the “Create Clipping Mask” command, and give it a Stroke of 4px and a color value of: #e5e6e8. Finally, don’t forget to align it like in the image below:

Type some text about you, using the following character settings:

  • Font Family: Georgia
  • Font size: 14px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Leading: 27px

Step 15

In this step, we’ll create an area that contains recent comments. So, create another title that says “Latest Comments,” that looks like the title on the left.

Then, type an example of a comment, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Leading: 20px

And type some information about the comment, using these character settings:

  • Font Family: Archer / Gotham Rounded
  • Font size: 15px
  • Font weight: Bold Italic / Medium
  • Anti-aliasing setting: Smooth
  • Color: #acaead
  • Kerning: Optical

Make a duplicate of your comment and its information, and make sure to place them like the image below:

Step 16

The right part of our footer will contain some contact information. So, again, create a new title that looks like the others on the left, also it should say something that has to do with getting in touch. Then, place an image like the one on the left, but this time, it should be an image of map.

Now we’ll create a button that says “Locate Us.” So, using the Rounded Rectangle Tool (U), create a 100x30px rectangle, with 5px radius, fill it with: #f5f3f4, and take its Opacity down to: 50%.

Type the word “Locate Us” inside the rounded rectangle, using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical

Then, apply a Drop Shadow to it, so that it looks more interesting. Follow up with the image below:

It’s time to add some contact information. Grab the Horizontal Type Tool (T), and type some information. We’ll start by typing “Address,” using the following character settings:

  • Font Family: Gotham Rounded
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Caps: All Caps

Then, type the address itself, using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold Italic
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Optical
  • Leading: 20px

Keep adding more information…

So far, probably, the centers of the three parts of our footers are not horizontally aligned. So, we’ll put each one of them inside an individual Layers Group, select the three of the groups, and click on “Distribute horizontal centers.”

Step 17

Using the Rectangular Marquee Tool (M), create a selection of: 1020x40px and fill it with this color value: #e5e6e8. Call this layer: “footer_small_bg”

Use the Single Row Marquee Tool, to create a selection like the one in the image below and fill it with White (#ffffff).

Type your footer navigation text, using the following character settings:

  • Font Family: Archer
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #9a1447 – #636363
  • Kerning: Optical

Then write your copyright text, using the same character settings shown above.

Put the text of the footer in an individual group, Shift click and select the layer “footer_small_bg” then click on “Align vertical centers” in the control panel, to make sure they’re vertically well-aligned.

That’s it, my friends!

It took a little bit of time, but there we have it. We’ve created a sleek Website layout/interface inside Adobe Photoshop. Really hope you’ve found this tutorial useful, and—more importantly—enjoyed it! If you have any comments, criticism, need help, or whatever, just drop a comment! :)

New Release: Grid Kit

design grids download vector

Grid Kit Released

We cooked up the grid kit to be a go-to ingredient in your page layout process. We revisited the classic tomes of page construction and put together a smashing sampling of grids that will inspire & guide your eye through the design process.

All of the grids are vector so you can use them right in Adobe Illustrator, or overlay them onto your pages in InDesign, Photoshop or other design application.

Download the grid kit for $9.99

What’s included?

We’ve included every kind of base grid we could dream up: various columns, margins, gutters, and rows. We’ve got isometric grids, golden concentric circles, graduated golden sections, gradient cells, and more. Several page construction methods resulted in a few of our favorite grids in this kit.

grid kit page design construction grid system

Most of the grids are for a single 8.5×11 page, but a handful use Van de Graaf’s page construction methods to build a page area for facing pages. If you want to see each & every grid included in the kit, check out the Grid Kit Facebook album.
van de graaf page construction grid system
grid system page design grids go media arsenal
Remember to check out the Grid Kit Facebook album to see a preview of all the grids in the kit.

Design Process: Creating the Cover Art for Parachute Journalists

I’m going to show you all how I went about designing the cover art for my band’s new single “24th of January.” Listen/Download for free here. If you aren’t aware, 2/3 of Parachute Journalists are members of Go Media: Jeff Finley (me on drums), and Adam Wagner who’s voice you hear on most of our songs.

parachute journalists - 24th of january - cover

We’ve chosen to release one song at a time and make them available for free download. Why? Because we’re producing each song ourselves and admittedly we’d never get our record out if we didn’t. One of the best parts is being able to focus on one song at a time to get something closer to our original vision. And I get to create new and interesting album artwork for every song!

Listen to the song

<a href="http://parachutejournalists.bandcamp.com/track/24th-of-january-2">24th of January by Parachute Journalists</a>

——-

What you will learn in this tutorial

  • Advanced texturing, noise, and grunge effects in Photoshop.
  • Classy typography solutions
  • Insight into the design process, hacks, cracks, and cheats. :-)

Now, admittedly, I am looking back at my artwork and reverse engineering my design process. I’m going to give you a glimpse of what I did and how I made my decisions. This isn’t exactly a step by step tutorial, but more of a “behind the scenes” look. Enjoy!

Getting Started

The deadline to create the art for this new single was fast approaching and I was still answering boatloads of emails from earlier in the week after I asked my entire customer base their opinion on how I could promote our new Vector Set 18. So I found a free moment late Friday night and cracked open Photoshop and started a new document at 10″ x 10″ at 300 dpi. I make all these covers at least that size in case I want to make prints out of them or create a cool fauxtograph effect which requires a higher res image.

My first idea was to run with a winter theme, being that our title was the “24th of January.” I thought I’d dive in head first in Photoshop and start splashing around until something cool happened. I gave myself an hour before bed feeling cocky like I knew that something awesome would just make itself while I clicked around. I hunted around Deviant Art’s stock photo area hoping something would stand out. At the moment, I was caffeinated and freshly inspired by Janee Meadows after she left me a nice comment on Facebook. I thought for sure greatness was just at my fingertips.

Creative Block

But that wasn’t the case. I couldn’t design anything. I pieced together stock photos and moved around blocks of my favorite typefaces. I even tried saving myself with the cheap retro/grunge tricks that I use to make everything look cool (you’ll have to buy this tutorial to find out), but nothing was working. I had the worst case of designer’s block ever. See below for what I ended up with. Sure it’s not bad, but there’s no meaning behind it and I felt like I was reusing the same fonts and textures and wasn’t what I envisioned.

failed attempt

Perhaps because I didn’t start with a sketch? Perhaps I didn’t even consult with Adam, the one who penned some of our best lyrics? I saved out whatever I had and closed Photoshop. I failed and was super tired (although still buzzing from the coffee I drank earlier). The last drop of energy I had was used on a Facebook post and tweet about how I couldn’t design anything and fortunately a handful of compassionate folks backed me up and said “we’ve all been there.” With that, I went to bed after emailing Adam asking him for some fresh ideas and inspiration.

Starting Fresh

So I spent all day Saturday with my wife on her birthday. It was a much needed break to clear my head. I picked things back up Sunday afternoon. Waiting for me in my inbox was an email from Adam with some meaningful themes and inspiration. Here is what it said:

Recent events have caused me to question my identity again. How do I know that I’m the same soul that fell asleep when I wake up? Maybe my soul was switched, and all memories replaced with those of another person. I’d have no way of knowing. But I’ve certainly felt aware of some strangeness lately. And this isn’t the first time I’ve felt this way. I’m starting to feel like a veteran of this mental world. So, I just kinda roll with it. Paint a few of pictures of the (un)reality I’ve been living in.

Ok. What about a beautiful woman (like a goddess, or angel) performing brain surgery on a dude just sleeping in a dorm room environment? What about a side view of a face, but you can see inside the head like a cross-section, and there’s something frightening in there. Perhaps two howitzer barrels positioned behind the eyes operated by Bill Nye the Science Guy. Or a raccoon on a treadmill. Or a series of pipes & funnels that collect pictures through the eyes, which funnel into a grinder/transformer and make their way into a barrel that’s sticking out the mouth? The devil is operating the machine.

Immediately a light bulb turned on after reading that. It caused me to immediately think of the Rosemary’s Baby poster designed by Phil Gips and Steven Frankfurt that I love so much. I knew I wanted to do a head in a profile with something going on inside it. I also imagined a dark and creepy mood like something out of David Lynch’s Eraserhead. So I went back into Photoshop with a new attitude and direction.

Designing the Head

HeadshotI was going to start with the head and go from there. I hunted around Deviant Art’s stock area, iStockphoto, and various others but couldn’t find a profile headshot that I really liked. I knew there was one resource I hadn’t looked at in years, 3d.sk. I used to go there for reference images for modeling characters in college. I knew they’d have a profile shot!

I found one I liked in their free sample area, high res too. I downloaded it and pasted it into Photoshop.

I rotated the head into position, and needed to cut out the head from the background. Fortunately the background just needed a quick level boost to make it entirely white. From there I tried a technique I learned awhile ago about masking out hair in Photoshop. The only thing I remember was using a brush set to “overlay” to create a nice mask. I did that, but discovered I kinda liked the way it looked just after doing that.

Overlay

Now, I got that result above by accident. In fact I don’t even remember how to recreate that effect. If anyone else knows a better way to achieve that two-color grainy look, please let me know!

Screen out those darks

I put the head in it’s own group and set the layer to screen, so all the black parts would become transparent. I needed a dark background in there so I chose a darkish blue-green color. I also did a little cleaning up around the edges and made his ear less distracting.

Screen out those darks

Grain out the background

By default, I like to add a little subtle texture to my background layer. I’ll find some nice stock textures of film grain (thanks Simon!) or scans of dark colors in magazines and all the natural unevenness helps create a more cohesive look in the end.

You want to put this grainy layer right above your background color and set it to multiply or screen (or your choice of blending mode).

Put the gun to his head

This was looking pretty cool already, I almost wanted to just add the type and call it a day. But I was missing some of Adam’s core ideas. “What’s going on in his head?” This is where things got fun. I really liked the idea of putting the Howitzer barrels coming out of his eye sockets. That was my first choice, so I hunted around stock sites for images. I found a few that I thought were the appropriate angle and pasted them in and started cutting them out.

putting in the barrels

barrels again

The 2nd option was getting there, but I wasn’t really feeling how it was laid out. And I also wasn’t sure of the usage rights on that image because I found it on Google Images which is usually a BAD place to go photo hunting. I just wanted to put life to an idea.

But no matter what I did, I just wasn’t feeling it. The barrels were too long or too off-balance. It wasn’t filling the negative space in his head in a way that felt right to me. So I tried to move on to another one of Adam’s ideas.

The raccoon on a treadmill! Perfect!

Raccoon on a treadmill = Design WIN

Anytime you can put a raccoon on a treadmill, your design is instantly awesome. So that’s what I thought! I found a great photo of a Racoon walking on Deviant Art and tried using that. I cut it out using my Wacom tablet and an eraser. This is a decent technique when accuracy or precision is not needed when masking out an object. Since the little guy was furry, I just used a soft brush with pressure sensitivity on to mask him out.

raccoon!

Once I got him masked out and into the design, I tried adjusting his levels and colors to match the overall piece. Now I needed to find a treadmill. But all I could find were modern looking treadmills that were too “fitness-ey” if you know what I mean. I wasn’t liking where it was headed and knew it was going to be a pain. So at this point I just scrapped the poor raccoon idea and moved on.

Finding the right solution

I tried the Bill Nye idea, but that was just awful. I chuckled as I gave it a try, but knew right away we couldn’t put his face in the art and expect our message to come across. I also tried a campfire and a few other things, but nothing was really standing out as a winner. What was going wrong here?

I took a step back, reread Adam’s email, and listened to the song again. I took note of “the devil is operating the machine” – reminded me of that scene in Eraserhead where there’s a disfigured man pulling levers by the window. The opening lines to the song read “Who says the words with my mouth? Who looks out with my eyes? Who hears the morning dove first? And only then the silence of the night?” It sounds to me like some sort of God or puppet master controlling your senses. The question is raised, “are we really in control?”

Casting SpellsI found the right solution.

I wanted to illustrate the idea of some mythical figure pulling the strings on our senses and memories without using the tired “puppet master” cliche.

Completing the Idea

I knew I wanted to make this “mythical figure” a silhouette a la the Rosemary’s Baby poster. With the head in the background and the silhouetted mountain and carriage. I found some various photos of models in “puppet master” or “spell casting” positions and thought this photo would do the trick:

I traced around the figure using the pen tool in Photoshop and created my silhouette. I freehand drew the mountain scape and placed everything together the way I wanted them. I made the silhouette darker than the background and also added a slight gradient behind it, so it sort of faded into each other near the bottom and wasn’t such a harsh line.

TIP: I also added some noise, Gaussian blur, and smart sharpen to keep it from looking so crisp.

added magician

Experimenting with Vectors

I was excited because we just released Vector Set 18 over at the Arsenal and wanted to see if could include some of our new “Infographix” vector pack. So I played with adding some in but I wasn’t quiet sure it achieved the effect I wanted. They sure did look cool though! But I wanted to make it a little more obvious that there was some crazy magic person controlling the senses.

adding infographics

I scrapped those vector elements and decided just to create a simple graphic myself. I would circle the eyes, lips, and ears and connect them to the wizard’s hands. It sort of had that “infographic” look that I liked, but made it apparent that the wizard was interacting with the floating head.

TIP: I pulled a random grunge texture from the Arsenal and used that as a mask on my “circles and lines” layer. Just so I could beat it up a little bit and match the rest of the piece.

ÜBER NERD TIP: You can use ANY image as a mask! Open your texture, press Ctrl+A to select all and then Copy. Then go back to the layer you want to mask or distress. Add a new layer mask and then Alt+Click on the actual layer mask in the layers palette. You should now be editing your mask. Press Ctrl+V to paste and then click back on your layer thumbnail to exit mask editing mode. Voila, you should now see that your images black/white values are now acting as a mask!

he's now in control

Adding the Aura

While poking around my texture collections, I found a sweet texture from Resurgere and thought it might give this monochromatic design a splash of color.

cool stock from resurgere

Add the aura

Adding type

Now it came time to add the type. Well, in reality, I already had started experimenting with textures and color, but I’ll save all that for the end of this tutorial as the finishing touches. Truth is, I love playing with texture and color, and oftentimes I might do that in the early stages of a design to give all my elements a cohesive look as I’m working on it. But for now, let’s just focus on the type.

I had been using Knockout in a lot of my Parachute Journalists designs but admittedly was getting bored with it. It’s an amazing typeface, but I always feel the urge to try something new. This time I satisfied my craving for a tall, thin, condensed typeface by using Triple Condensed Gothic from Red Rooster.

type lockup

That would be my title face and under that I’d pair it with an uppercase Helvetica Neue 65 Medium for Parachute Journalists. I wanted to include the band members so I completed the lockup with Mercury Small Caps with thin borders on the top and bottom to square things off. All of this was going to be really small anyway, so it’s really just for “texture” and not readability. The most important thing is the title and the band.

Also, I wanted to include more “type as texture” goodness. I wanted to add the lyrics somewhere in the design but didn’t care if they were readable or not. The goal was to give the entire piece an illusion of feeling bigger than it actually was. One way to do that is with really small type. I included the full song lyrics across the bottom in 4 equal columns. If you want, you can read the lyrics better here.

type added

Adding one more piece

I really wanted to use one of the new vector images from our Infographix set, so I went back to it and found one. I was just looking for something subtle to add interest and centralize the whole piece. So I used another grunge texture to distress it and tastefully put it in the background after using a “color overlay” to give it an appropriate color to match the piece.

Vector infographic for the background

Texture Magic

Now it’s time to add some textures and bring the piece home. As I said before, I often experiment with adding textures throughout the entire design process, but for the sake of this tutorial I’m adding them all in at the end so you can see what they do.

Vignette

I create a new layer and fill it completely with white. Then I go to filter > Lens Correction and find the vignette option. I usually set the value to -100 and then tweak the opacity in my layer afterward. Once I’ve applied the vignette to my white layer, I set the layer to multiply and turned the opacity down to 50%.

Vignette

Dust

There are lots of nice dusty textures out there, you just gotta find them. Eric Carl always knows a good texture when he sees it and has scanned in a bunch of vintage advertisements on his Flickr account. I used some of those to create my own textures and applied them like so.

dust

Exposure

The image was pretty dark overall so I wanted to give it a boost. I opted for using the “exposure” controls instead of brightness and contrast. Why? Just for different results that’s all.

exposure boost

Colorization

I used a combination of hue/saturation, color balance, and color layers set to multiply and lighten. I was going for something cold and otherworldly here so I wanted to stay in the blue/green realm.

colorize

color balance

hue shift

Final Image

I added one more layer of some whispy, blurred clouds, added grain, and put it on top. I set it to soft light and lowered the opacity to 50% and decided I was done with my image. Here’s the final piece:

parachute journalists - 24th of january - cover

Process Animation:

Just for fun I thought it’d be cool to animate the different layers building on top of one another in an animated gif. See below for a different look on how it all came together. It wasn’t as straightforward and easy as this final image makes it look!

Parachute Journalists

What is a “Brand”?