To illustrate the word “Historiaster” with the meaning of the word reflected in the design. The meaning of the word Historiater is a petty or contemptible historian, and my idea is to create a petty (yet respectable) attempt to recreate the vintage type treatments.

Research

As the idea is to make a petty remake of a classic styling of a historic lettering, it’s paramount to remain faithful to the styling of the period. The International Association of Mater Penmen, Engrosser and Teachers of Handwriting (or IAMPETH for short) has a collection of scanned rare books on penmanship and engrossing in their online collection that is free to the public.

One book in particular called The New Zanerian Alphabet has fantastic type specimens within it and we shall use a couple specimens from the book as the starting points for this piece.

Sketch

From those two specimen you can create a rough composition in Photoshop by cutting and pasting each letter together to see whether the combination would work.

I sketched out a rough of the composition to resolve the details and tighten everything. There is some legibility issues with the capital H and the lower case t.

A quick preview to the client and she recommended adopting some of the stylistic approach of the Sanborn Insurance Maps for the background. I quite like the look of this particular design for St. Joseph Missouri.

Ok, with references collected, we’re ready to jump on the computer.

Step 1

Open up a New document (⌘+N) on Illustrator and Place (File>Place) the reference image and change that layer setting using the option menu from the layer panel into template. Create another layer and call it “Type Build”, this is where we’ll construct the letters and general storing area for elements that we want to keep but remain hidden.

Open up the ruler bars (⌘+R) and place some guides over the top and bottom of the letters to help us trace the letters.

Step 2

Start with a red rectangle and set the transparency to multiply to trace the letter O and give it a round corners effect through the menu Effect>Stylize>Round Corners and give it a value of 2mm in this case.

*quick tip: You can give similar commands through the Appearance panel Fx option, and you can turn effects on and off here*

Draw a couple of small circles with the Ellipse tool (L) and with the line tool (\) draw a line between the centre of the two circles and set it 1.5 pt, now we roughly have the letter O. Make a copy of this letter by dragging and holding the option+shift key. Expand the line and the rectangle on one of the O’s you’ve just created using the menu Object>Expand and place it over the letter S here and draw a diagonal line using the line tool again to create the letter S and expand these line as well.

*quick tip: set up your keyboard shortcuts so menu commands are just a multi button press away to increase productivity. Expand is a command that I often use so this is assigned a keyboard shortcut*

Step 3

Erase part of the middle line by selecting it and using the Erase tool (shit+E). Tidy up the anchor points between the corresponding diagonal and vertical lines using the direct selection key(A), once you’ve done that select all the white elements and click Unite in the Pathfinder panel then create compound path out of them (⌘+8)

Select both the white and red elements and click minus front on the pathfinder menu to create the basic shape of the S. Copy this across by dragging and holding the option and shift key.

Step 4

Select one of the S’s and give it a rounded corner effect Effect>Stylize>Round corners (or through the Appearance panel) and give it a radius value of 1 mm and click ok. Expand this appearance Object>Expand Appearance.

Select the other S that hasn’t had the effect applied to it and with Erase tool (shift+E) erase its middle section by selecting it, holding option and dragging the selection you want to erase. Once you’re done select both S’s and with the Align menu click Horizontal Align Center to put one shape on top of the other. Select them both and click Unite on the Pathfinder panel.

Step 5

With the Pen tool draw up some accents on the tips of the letter S, the best thing about this is that if you add a rectangle on one side and delete the the accent I’ve just made and unite them using the Pathfinder menu I would get a letter a and e by simply reflecting them using the reflect tool (O).

Step 6

Copy another one of those rectangles with the Rounded Corners effect applied to them and place it over the i and expand it’s appearance Object>Expand Appearance in the menu. Using the direct selection tool (A) select all the points on the right hand side and drag it over to the left. Draw a circle right on top of it and you’ve got the letter i.

Note: I have to say at this point that it’s within the designer’s personal preference to add character to each of their letters. Each letter that we’ve drawn here are starting points, if you wish to alter any elements and can justify it then feel free.

Step 7

My solution to solve the problem of making the letter t legible is to work within the reference and add elements together. In my research folder I also came across another reference that has a solution that I’m quite happy with.

Draw a rectangle that corresponds with the letter i’s stem and copy that over to the letter t. Trace the ascender and descender of the letter using the Pen tool and combine them with the rectangle that we drew just before.

Grab one of the rounded rectangles and copy it across, make sure that they are touching and combine them using the Pathfinder menu. Draw another rectangle above them and click Minus front on the Pathfinder Menu.

Now rotate that shape and combine all of the elements together. I added some extra points to give it a bit of character, once you’re happy combine everything using the Pathfinder Menu.

Step 8

Copy the stem of the letter i over to trace the letter r, with the Pen tool trace the letter.

Copy the resulting shape (⌘+C) and delete a part of it using the Eraser tool (Shift+E), Offset the remainder shape with 0.5mm value.

Select the result and the stem and subtract the shape using the Minus Front button on the Pathfinder menu, Paste in front (⌘+F) the original shape. Use the eraser tool (shift+E) and delete a point, and combine everything using the Pathfinder Unite option.

Step 9

Combine all the letters to create istoriaster in the Artboard in your desired size, set the kerning here and give them a white fill and a black stroke colour (D). Set the align stroke setting on the outside, the corner settings on round, and the stroke 3pt.

Group everything and give it a flag effect Effects>Warp>Flag with the value on -16. Save your file if you haven’t.

Step 10

I wanted to create a more detailed filigree ornament so I printed the reference of the capital H and traced it on an A4 tracing paper with pencil and pens making sure that all the lines joined together. I scanned the sketch at 300 dpi and seeing the result in context I wasn’t too happy with the H because it looked like a lower case h.

Open the drawing in Photoshop and select the white area using the magic wand tool (W) you should be able to select the entire white area all at once. Create a mask layer from the selection, and paint using the the brush tool all the parts that you want to mask with black and in white to reveal.

Click and hold option on the layer mask and create a new colour fill with a grey colour, move the masked sketch layer to the top and set it to multiply. Create another layer and call it shading, option click the fill layer mask and with a soft brush draw the shading using shades of grey and black at 50% opacity.

You should end up with something like this, save the file as a tiff and place it on to your Illustrator file on a new layer called H ornament.

Step 11

Create a new Layer called main H, I used a typeface by Arthur Vanson through Letterhead Fonts called Hindlewood as reference. Create a new calligraphic brush through the Brush the window with the below settings.

Start with loose brush strokes to get the feel of the shape making sure that it fits with Filagree ornament, once you feel confident tidy up the lines or retrace it with a Pen tool as I’ve done here.

Step 12

Select certain points and Copy it (⌘+C) and Paste it in front (⌘+F) and delete the unnecessary points but keep the ones that would flow into the next shape. Reduce the stroke weight on the bottom curls to 0.25 pt to suggest some foreshortening and expand everything Object>Paths>Expand.

After that Simplify the paths to make it manageable through Object>Path>Simplify and tidy up the shapes. Copy the entire Shape (⌘+C), Paste it to Front (⌘+F), Expand Appearance, and Combine it all using the Pathfinder Unite option and give it a black fill. Send it to the back (Shift+⌘+[ ) once you're done.

Once you're happy with everything give it the default appearance (D) and change the stroke to .2 pt, give it a custom grey gradient and position it accordingly to suggest the light and shade.

Step 13

With the rectangle tool (M) option click the art board and create a 5x5mm square. Rotate it 90 degrees and copy the shapes using the squares and the line tool create these two patterns. Group them separately to have a long one and a short one. Make copies of these patterns and create an Envelope Mesh (option+⌘+M) with these settings.

Manipulate the Mesh by skewing it using the Free Transform Tool (E), click the middle right handle of the bounding box and then hold both ⌘ and option together. Then use the Direct Selection Tool (A) and the Convert Anchor Point Tool to wrap the patterns around the corresponding individual shapes that make up the capital H.

You can modify the shapes within the Mesh by double clicking it and coming back to the Mesh by clicking the Envelope Mesh Dialog. I made one of the vertical lines thicker in this case to further suggest foreshortening. You can also expand the Mesh altogether (Object>Envelope Distort>Expand) you can then manually adjust the shapes therein.

Once you're happy with how everything looks, Copy (⌘+C) individual shape that Meshes are wrapped around and Paste it in front (⌘+F) and send it to the front (Shift+⌘+] ). Select the shape above and the Mesh and make a Clipping Mask (⌘+7). Repeat the process to mask all the Meshes and group everything together.

Step 14

Hide the H layer and open up the H ornament layer, Copy (⌘+C) that placed document and Paste it in front (⌘F). Click Live Trace and set it with the following settings, click Expand, convert it to compound path (⌘+8), send the result to the back (Shift+⌘+[ ) and fill it with red. You should be able to see a hint of red as shown below.

Step 15

Open up the H main layer again and extract the black filled H that we sent to the back a couple of steps back and copy it (⌘+C). Lock the H main layer and select the placed tiff file and create a mask layer through the Transparency panel. Double click the blank area on the right of the preview area and your selection should disappear which is what is supposed to happen.

Draw a white rectangle that should cover the image and your image would reappear. Paste to the front (⌘+F) the black filled H that we copied earlier and create a compound path out of it (⌘+8).

Go back to the H ornament layer by clicking on the left preview window on the Transparency panel, select the vector tracing of the filigree and Copy it (⌘+C) to take to the Clipping Mask.

Head back to the clipping mask and Paste to the front (⌘+F) the filigree vector tracing, send the black filled H to the front (Shift+⌘+] ).

Select both the H and the Filigree shape and click Divide on the Pathfinder Panel which will cut the shapes into sections. Ungroup the result and select the sections you wish to reveal by deleting them. After you’re happy with everything change the results the fill to black. You should have the following result where the vine seems like it’s curling through the H, once you’re happy hide the ornament layer.

Step 16

Create another layer called “Drop Shadow” Copy the silhouette of the H and the istoriaster text into this layer using the (⌘+C and ⌘+F) commands so it is placed directly where it is on the other layers and re lock their respective layers. Expand the appearance of the istoriaster and combine everything using the Pathfinder panel’s unite button .

Select the the entire Historiaster text and duplicate it using the Transform dialog (Shift+⌘+M), enter the following values and click copy.

Select both shapes and create a blend (⌘+option+B), with the blend tool (W) hold option and click the blend image to bring up the blend dialog or go through Object>Blend>Blend Options and enter the following. Go to the menu command Object>Blend>Expand then use the Unite command through the Pathfinder panel.

Step 17

Let’s clean up this vector shape as there should be ragged edges. With the Lasso tool (Q) select the unnecessary points and then remove the points with the menu command Object>Path>Remove Anchor Points.

*quick tip: set a keyboard shortcut for the Remove Anchor Points command. I’ve got (⌘+Shift+option+0) on my computer, you can set it to your own preference*

These are the areas that you want to concentrate on, once you’re happy with the result turn on H main layer and the istoriaster layer to see whether you’re happy with the result.

Step 18

Draw two horizontal lines on top of the shape we’ve just created and create a blend (⌘+option+B). Use the blend tool (W) to prompt the Blend dialog box again to select specified amount and enter 250.

Prompt the Move dialog box (⌘+shift+M) and enter the following and click copy. Hover the Blend tool over the result to prompt the Blend Setting Dialog and reduce the amount to 200. Repeat the steps and set the blend amount to 150.

Step 19

Turn on the H main layer again and select the H silhouette shape in the back and give it a white stroke, a 3 pt stroke width, and Align Stroke to the outside.

Turn on the H ornament again to grab the filigree silhouette shape. Keep it selected and drag it to the Drop Shadow Layer on the Layer Panel. Fill it white and add a white stroke with a 2 pt Stroke Width and set the Align Stroke to Outside.

Step 20

Create a new Layer called “Flourish” and draw a rectangle behind the H. Fill the Rectangle in red and give it a Round Corners Effect (Effect>Stylize>Round Corners) give it a 50 mm radius. Keep the rounded rectangle selected, right click>Transform>Scale enter the following values and click copy.

Open up the Brushes Library menu on the Brush Panel by clicking the lower left hand corner and select Borders>Decorative and select the Rectangles 2 brush.

Select the outer rounded rectangle and Expand its appearance, delete right horizontal path and create the following using the Pen tool and draw a circle to create this shape.

Step 21

Select the inner rounded rectangle and prompt the scale dialog box (right click>Transform>scale) to create another rounded rectangle at 94% and click copy. Select both rectangles and create a blend (⌘+option+B) between the two, I’ve put 5 steps on the Blend option dialog. At this point you can manipulate shapes to get the right spacing between them, once you’re happy Expand the appearance so you have the rounded rectangles permanently applied to the shapes. Expand the blend (Object>Blend>Expand) once you’re satisfied with everything.

Expand the outer most rounded rectangle and Expand its appearance. Give it a black stoke and your desired stroke width. Combine the ends using the Pen tool and create the following.

Delete the right horizontal path of the the inner rectangles and create these shapes. Try to correspond with the top shape as uniformly as possible. With the Pen tool and Ellipse tool create these shapes that were referenced from the Sanborn Insurance maps.

Step 22

Create a vertical line using the Linte tool (\) and in the Stroke panel select a width profile 1. Give the line a Zig Zag Effect Effect>Distort & Transform>Zig Zag with the following settings. Draw up this shape using the Spiral tool, Ellipse tool, and the Pen tool. Expand both results and group them together.

Draw a circle below the group and use it as a reference point to rotate 90 degree and copy the drawn objects. Rotate the result another 45 degrees. Create a tear shape by manipulating a circle and rotate it the same way and group everything together and give it a white stroke with the Corner setting set to Round and the Align Stroke setting set to Outside. Place this object on top of the red spiral we just made.

Create accents on the other end of the rounded rectangle shapes as well using the Pen tool, Spiral tool, and the Ellipse tool.

Still in the Flourish layer create a series of objects using the Line tool (\) and the rectangle tool (M), give it a white stroke and group it all together. Place it between the and the Drop shadow layer.

Step 23

Turn on the istoriaster layer and select the text. Open up the Offset Path dialog box Object>Path>Offset Path and enter the following settings. Cut (⌘+X) and Paste in front (⌘+F) the result and create a Compound Path (⌘+8).

Give it a linear Gradient Fill and adjust it accordingly using the Gradient Tool (G). Once you’re happy with the result give it a Grain effect (Effect>Texture>Grain) with the following settings and set the Transparency setting to Multiply.

Give the same effect to the gradient fills on the H main Layer.

Step 24

Go to the Flourish layer and draw a horizontal line and use the rotate tool by holding option clicking the lowest anchor point. Give it a 6 degree value and click copy, repeat this until you get the following and group it together (⌘+G).

Use the rotate tool (R) again and give it a 3 degree rotation and click copy. Use the Scale tool (S) and give it the following value. Select the lowest line using the Direct selection tool and delete it. Group (G) everything together. Compose this flare around the composition.

Step 25

Create a new layer called Background or Bg in my case, draw a couple of vertical lines at 1 pt weight and create a blend between them. Prompt the Blend dialog box using the Blend tool (W) I’ve got 400 at this moment, but I later changed it to 600.

Keep the resulting Blend selected and bring up the Transparency panel to create the Clipping Mask by clicking that empty area again.

Step 26

Access your Brush Library Menu and open up Elegant Curls and Floral Brushes Panel. Drag that flare shaped Scatter brush icon on to the working area, delete the bounding box around it and give it a white fill. It should also have lines within it, select it using your Direct Selection Tool (A) and give it a white stroke.

Select the unnecessary Elements of this shape and place the remainder behind the flares we’ve made earlier.

With the Brushes available from the Brush Libraries we’ve just opened draw around the letters, flourishes, and drop shadows.

Step 27

I use a font called Penman Birds and Ornament by Intellecta Design. I grabbed a couple of selected glyphs Expanded it, Ungroup (⌘+shift+G) and give it a white fill and a black stroke at 4 pt width and Align Stroke Outside.

Compose it around the layer and ended up with something like the following.

Step 28

Grab a copy of one of the flares and rotate it. Create the following shape using the Pen tool to mask the flare. Before Masking it use the Direct Selection Tool (A) to select and copy it (⌘+C).

Select the flare and masking shape to create a mask (⌘+7) paste the path (⌘+V) and give it a width profile 1. Add some more lines for character with the same width profile to get the following result.

Step 29

Create a new layer and call it texture to place a paper image. You can download it here. Set the transparency of the image to Multiply. Create a rectangle on top of the Placed image and give it a circular Gradient fill and set it to multiply to create a soft Vignette.

Step 30

I gave the filigree ornament the same grain effect as the H and the istoriaster offset path. On top of that I added a drop shadow on the filigree, this left to the last minute to keep from having illustrator to render it every time you switch between layers.

I also made a little mark for this fine fine zine. Good luck with it.

The post Vintage Typography Tutorial appeared first on GoMediaZine.

FOUNDFONT™ tutorial

Andy Hayes here from Hucklebuck Design Studio. The subject for this tutorial will revolve around a pet project of mine called FOUNDFONT™. Foundfont™ is dedicated to typographic archaeology as well as the use of found typography within design. It’s about extracting unique type for specific design needs or creating complete type sets based on found examples. FOUNDFONT™ offers typefaces but also hopes to inspire designers to do their own digging.

In this tutorial we’ll talk about what makes a good FOUNDFONT™ source and the steps to creating your own usable vector characters from found samples.

Type is where you find it

Useful typography is not only found within the bounds of one of today’s successful foundries. It’s all around us. In the bad signs you may see while walking down the street, on old packaging you might have picked up from a thrift store, even in random images you might stumble upon while trolling google image. These artifacts are often one-off, hand lettered little pieces of magic just waiting to be pulled into the 21st century. In many things that I create, whether it be a tee graphic or a poster design, I often look for opportunities to use these found examples in my layout instead of going back to my favorite type families. I find it can often yield interesting and ultimately unique results.

Here are a few great samples that are ripe for repurposing.

What makes a good FOUNDFONT™ source?

There are a few questions to ask when scouting good FOUNDFONT™ resources that will help you get the best result. Here they are:

1. Are you starting with a quality image?
   The source image that you start with should be high res if pulled from online, or in good condition if found more traditionally. If the detail in the characters you have to start with is poor, it’s hard to overcome. It will leave you guessing at details.
2. Is the type sample in a photo skewed?
   If it is a photograph be sure that it is shot without a skewed perspective. If you start with something that is distorted you’ll find yourself putting a lot of work in to fix it.
3. Am I just recreating a font that exists and is possibly copywritten?
   When I do the FOUNDFONT™ thing I am always looking for type that was either hand done or old and out of distribution. Why recreate a font if you can just buy it online? Keep an eye out for interesting and unique sources to make sure you’re not just duping.
4. Does the sample I found contain the key character DNA that you need?
   When retroactively building type from a found sample there is a set of characters that you should try to aim for. These characters will contain the DNA for all 26 letters in the alphabet enabling you to create letters that you don’t have.

The set of key characters for capitals is: A, B, D, E, J, M, O, S.

A: From A you can create V, W, Y
B: From B you can create a P, R
E: From E you can create F, H, I, L, T, X,Z
J: From J you can create U
M: From M you can create N
O: From O you can create C, G, Q

D and S are unique. Especially the S. If you have nothing to go on for the letter S you’re playing that familiar guessing game we’ve mentioned a few times already. D could be created using the O, but it does often have slight quirks.

The set of key characters for lowercase is: a, b, f, g, k, m, o, s, v

b: From b you can get d, h, l, p, q
f: From f you can get t,
m: From m you can get n, u
o: From o you can get c, e
v: From v you can get w

g, k and s are unique. s, again, will be the toughest recreation if you have little to go by. Look at the curves of your c and a for cues. Letters like x and z should be fairly easy to recreate with little information. Remember to pay attention to stroke weight and other foundational elements of your character’s structure.

Cleaning up and extracting your type

Once you have a good source it’s time to start cleaning it up and start the process that will eventually lead to a set of vector characters for use in layout. I’ve pulled a good source and and will go through the process step by step in a series of screencasts.

Step 1. Identifying your type source

To reiterate, be sure your found sample is of decent resolution, not skewed, fairly original, and contains the key letters for your character DNA. My sample is from a motorcycle jacket that I ran across online. I’d guess the typography was hand embroidered or chenille embroidery. Not a proper font but a great piece of typography worth extracting.

2. Killing the color

Open your image in Photoshop and take its image mode to grayscale as the first step in amplifying its contrast.

3. Amplifying contrast

Once you’ve gone grayscale, you’ll need to increase the contrast of your image. Levels are an easy way to build this contrast. The goal is to eliminate all gray leaving you with only black and white in your image.

4. Delete anything that isn’t the type you’re after

Now that your contrast is amplified select the rest of the image and delete it. It may prove easier to select your type and invert the selection. All we need is the type.

5. Adding pixels to smooth out the edges

After eliminating everything else but your type you might notice that the edges are a bit rough. The easiest cure for this is you just bump the resolution up to add pixels. This will take a bit of the roughness away.

6. Finalizing your smoothed type

Now that your resolution has been increased you can completely smooth the edges by simply using the gaussian blur filter and your levels to harden the edges. When you are done with that, save the type as a grayscale tiff and close the file.

7. Going vector

Create a new document in Adobe Illustrator and place your final tiff into the new document. Go into your tracing options (object/live trace/tracing options), turn on the ignore white option and turn on the preview. This should give you a good idea of how good your trace will be. Apply the trace and click expand to make the trace editable.

8. Editing your type

After you click to expand the live trace you’ll need to ungroup the type and begin the process of lining the type up on a baseline, tweaking the trace results and creating the letters you need out of the letters you have.

Once you identify the characters that you need to modify to create the characters you are missing, use your knife tool to cut letters apart. The knife tool allows you to cut through the vector shape without losing any of it like you would with the eraser tool. Once you break up the core strokes of the characters you can easily begin to rearrange and create your missing characters. For example a trimmed down, and rearranged letter “A” easily becomes a “V” and a “W” as seen in the short video accompanying this section.

You’ll find that as you cut your letters apart and so on that there will inevitably be a few edges that need smoothing or refinement. Instead of somehow using the pen tool to pull the points of your type, use the pencil tool. The pencil tool allows you to modify the contours of your character in a more natural way. If you have a wacom tablet or any other brand that allows you to draw with a stylus you will find this technique very natural. Zoom in as much as you can to see the details of your characters as you modify them.

Final Result

Whether you’re trying to create an entire alphabet or just the letters you need for a logo your final result could look something like this.

The big takeaway is that you should explore typography that is outside of where you might typically look. Creating unique typographic solutions using found typography will always be interesting and one of a kind. Good luck on your hunt.

Enjoy this free download of MC GOTHIC and go to http://foundfont.tumblr.com/ to purchase more FOUNDFONT™ sets. We’re adding new type all the time!

Note from the editor: if you have some issues with the videos, you can find them all on Andy’s Screenr profile.

The post FOUNDFONT™ and the Art of Typographic Archaeology appeared first on GoMediaZine.

Before We Get Started

Hello dear readers!

Simon and Jon from Studio Ace of Spade here. Today, we have the chance to write a tutorial about one of the Studio’s recent projects, the poster we did for Lost and Taken. What’s great about this particular project is that it gives us the occasion to do a tutorial we’ve wanted to write for a long time: texture, texture and more texture.

We already had a writeup including some tips and tricks about textures published recently, but it was web oriented. Web is a world were subtlety is a key word, so we had to restrain ourselves quite a bit. This time, we can use the full extent of our texture repertoire on a print project.

Throughout this tutorial, we’d like you to keep in mind that we don’t want to give you a “recipe” that you’ll follow exactly and religiously, but rather a open-ended answer to a creative problem. It will give you room to adapt and improvise in your own ways. We want to nurture your creative process by sharing ours, not to kill it or to “dry it out.”

It’s hard to reconstruct the design process sometimes as for most designers it’s really organic and trial-and-error based. But, we’ll do our best. We’ll try to link to the resources we used as much as we can, and to reference other articles that might have been helpful in our process or that could expand your reflection.

If you have questions, want to share what you came up with while following this case study and tutorial, want to suggest different techniques, want to suggest ideas on how to make this better, please do so in the comments! Also, we’d like to precise there is a complimentary article to this tutorial posted on the Studio Ace of Spade blog that details much more the case study part. We decided to split the original post in half (-ish), as we thought 6000+ words would be a bit intense for people to go through.

Here’s a preview of what we’re going to be doing, beautifully mocked up:

With all of this said, let’s get started, shall we?

The Design Specifications

At the start of this project, here’s what we knew:

• The poster will be 18″ x 24″
• The focus should be on a strong type element
• There’s plenty of creative freedom

As this poster was being designed for Caleb of Lost and Taken fame, we were certain to keep him as involved in the project as possible. Through further discussion, we further defined our constraints:

• Utilize “nature,” green and forest scenes, or something similar
• Cut-out shapes are something he’s interested in
• Geometrical shapes should be inlcuded in the design.

The Resources

As this poster was to promote Lost and Taken, we decided to use only L&T made textures. Here’s a list of the packs you’ll need for this tutorial:

• Vintage paper textures vol. 1 (published at Design Kindle)
• 42 vintage paper textures
• 15 vintage stained paper textures
• 19 block print textures
• Old film textures: color edition
• Black and white grunge vol. 2 (published at StockVault)
• Apple Rainbow inspired textures
• 10 experimental noise textures
• White grunge + snow textures

Download and install Massive Dynamite.

We’re also users of two Photoshop actions created by the good folks of Go Media. The actions age your artwork in two different manners.

• Aged Effect One
• Aged Effect Two

The first action (“Aged 1“) has been created by Jeff to specifically distress and age type. You can grab it in the post he introduced it in.

The 2nd action (“Aged 2“) is from a two parts vintage poster tutorial written by Tim Boesel. The tutorial is awesome, you should read it too. But if you just want the action, its in part 2.

To install Ps actions, read this quick tutorial written by Addicted to Design.

Lastly, download the color palette used for this project.

Note: this resource is provided “as-is.” It’s been made by us, for our own use. Learn how to install the color swatch via this About.com post.

Selecting a Font

Here’s where the tutorial part of this begins.

Start by selecting a typeface. To narrow down our font choices, we opened Illustrator and went through our font library to select the some which fit the ‘vibe’ of the project. This is something that we strongly encourage all of you to try as it’s a wonderful way to ‘feel’ your font choices.

We’d like to point out The Lost Type Co-op, Hydro74′s Legacy of Defeat, Dafont, Font Squirrel and Abduzeedo’s Friday Fresh Free Fonts as great starting spots to find interesting typefaces. Most of the time they are free and/or donationware, which means that if you like the font a lot you can show some financial support to its creator.

After we received feedback from Caleb on his font preferences, we narrowed our search down to slab-serif fonts, as well as vintage sans-serif fonts.

We finally settled on a font named Massive Dynamite, created by imagex.

You may notice that Massive Dynamite is pre-grunged – something that we don’t necessarily like. Let’s clean that up a bit.

Cleaning up Massive Dynamite
The next steps were clear:

1. Write “LOST AND TAKEN” in Massive Dynamite
2. Create outlines (right click on the type object > Create outlines) of the type, to convert it to fully editable vector objects
3. Switch the font from solid black to a transparent object with a black stroke
4. Then comes the tedious part. By using the direct selection tool (the white arrow, A on your keyboard), I selected the paths corresponding to the grunge elements and deleted them, thus creating a “clean” font

We made a quick video summarizing this process. You’ll see it’s really simple.

Creating the Type

Well, now that the font is cleaned up, let’s complete the typelock.

Step One: Create a new 18″x24″ document in Ai.

Step Two: Put some turn on the rules (CTRL/CMD + R) and put some guides in place to determine how big that typelock is going to be.

When we design in 18″x24″, we like to have guides at 1, 2, 9, 16 and 17 inches vertically and 1, 2, 12, 22 and 23 inches horizontally. Turn on “Snap to grid” (View > Snap to grid or CTRL/CMD + SHIFT + “) when placing the guides. Then, you’re sure they’ll be placed accurately.

Instead of locking the guides, lock the layer they’re on and rename it “guide“. As you’re designing, place the guides in the bottom layer. It’s a habit we developed after consistently moving guides by accident while designing.

Once the guides are placed, go back to our previous document with the type elements. They should still be one object. Copy and paste it (CTRL/CMD + C and CTRL/CMD + V) in the main document.

Step Three: Set line height and complete the type with geometrical shapes.

Select the type. Ungroup the object (right click on the selected type > ungroup), and then regroup the words separately. You just have to select the letters; use the CTRL/CMD + G keyboard shortcut to do so (or go to object > group). Once that’s done, move the three words closer together as shown.

On this image, you can see the type with its default settings, centered in document in black, and the typelock I used in the poster in gray.

At this point, what we’d suggest is for you to come up with your own typelock organization. Show your creative side! Our goal when creating this type object was to have something compact, bold, and impacting. We sized the type following that logic.

The rectangles have roughly the same height as the type they’re facing. To ensure this, we copied and pasted the values in the object size box.

The Final Step: Develop a ‘worn’ look for the geometric shapes we added to the type. In order to achieve the desired effect, use the roughen filter, in Effect > Distort and Transform > Roughen. Mad props to Simon Walker (he did a great post over at Method and Craft about that) and Dan Cassaro aka Young Jerks for tips and tricks when using this technique!

A point of advice: start by applying the effect to one shape, check if it matches the type you’re using, and then apply it to the remaining shapes. The appearance panel in Ai CS5 makes this a no-brainer. You can also use the Effect > Apply roughen menu (SHIFT + CTRL/CMD + E) to apply the effect with the same values to the remaining shapes.

Once that’s done, the type manipulations are done! Make sure the typelock is at least roughly placed as you will place it in the final poster, and preciously save that Ai file, just in case.

Choose a main image

We still hadn’t settled on the “base” image of the poster. We went to the Flickr Commons collection, and dug some images out. We were specifically targeting large files — big enough to be used at a print resolution (300 dpi).

The neat thing about the Flickr Commons is that a big part of the collection comes from the Library of Congress (LoC) and the U.S. National Archives (USNA).

These organizations have a policy to provide a relatively high resolution documents on Flickr. For instance, a train picture we used in a recent gig poster is available at a whopping 3000×2019 pixels. And sometimes, when following the permalink to the web collections of the LoC or the USNA, you can find ultra-high resolution .tiff scans of the originals (an example: 8000×7000 pixels @ 1800 dpi).

We chose a photo from the LoC collection over the other forest scenes because it was the biggest (6041×7839 pixels). The only downside was that we had to download a 135+ MB .tiff. But with an image chosen, it was finally time to switch to Photoshop for real!

Starting to manipulate the textures

This is where the fun begins! This is where we’ll work our texture magic on both the type and the background photo, blending them together in the best possible way. We’ll cover our main texturing technique, some tips and tricks, and additional goodness below.

Step One

The first step is easy. Let’s fire up Ps and create a new 18″x24″ document at 300 dpi.

“Print, you said? Then why the RGB colors? Isn’t print always in CMYK?” We’ll be using some effects and filters available only in RGB, so we’ll have to use RGB. The thing to know is that the CMYK spectrum is not as extended as the RGB one. It basically excludes some of the brighter and louder colors. As long as you keep this in mind while designing and you work with printers who know what they’re doing, you should be good.

You could also save your flattened PSD/PDF at the end in CMYK to be sure. But we would leave that to the professionals as they know what they’re doing with color. Once the document is created, you should also place the basic guides in it (we used the same measurements than when working on the typelock).

Open the forest picture along with your new document. You’ll notice that ours is a .jpg copy of the .tiff file as it’s a smaller file.

Step Two

Place the source image. It features the frame of the slide it’s been scanned from, which we decided not to keep in our poster. First, slide the photo in your document. Then, once it’s in there, close the original.

Back to the poster. Before resizing the image, right click and convert it to a Smart Object. This allows to keep “access” to the original file, even though you’re going to resize it and/or apply filters to it. Beware, this state still has some limitations. Once it’s a smart object, place and resize it as you see fit.

Step Three

After placing the image, sharpen it by using the high pass filter (Filter > Other > High Pass). Oliver Barrett explains the process for the unfamiliar. Use a value of 50 as it’s a big image, and put the high-passed layer’s blending mode on soft light.

Apply a black and white adjustment layer on the high-passed layer to increase contrast and depth.

Set the adjustment layer to Red filter. Group the black and white effect to the high passed layer by using CTRL/CMD + ALT + G.

Once this is in place, make sure your layers are properly named and group the original image, the high pass layer, and the black and white adjustment together in a group called “forest.”

Step Four
We decided that just adding textures on top of the photo would be a bit bland. So, what could we do to spice it up? We remembered a book cover we designed which had a similar starting point: a forest view. We also remembered a photo manipulation from Luke Beard. We decided to try something in a similar spirit.

Step 4.1: Create a merged layer of our current poster (CTRL/CMD + SHIFT + ALT + E). Desaturate it (SHIFT + CTRL/CMD + U),and press CTRL/CMD + T to transform and rotate it 180°.

Step 4.2: Open Ai and created an 18″x24″ document. You can also use the one from the typelock as long as you hide or lock the type piece to be sure not to damage/lose it. In our new document we created the following pattern:

We’re displaying it in Ps, but you can see the little smart object icon on it showing it has been imported from Ai. To create the pattern, do something along these lines:

1. Turn the grid on (CTRL/CMD + ‘)
2. Draw a 1.25″ diameter circle
3. Copy it 8 to 10 times to create a line of evenly spaced black circles (the align and distribute tools can be of great help here), that go across the width of the poster
4. Group the line you just drew together  (CTRL/CMD + G)
5. Copy it and paste it in front (CTRL/CMD + F). Repeat until you form a grid covering the surface of the poster
6. In order to bring some variety in, just offset each other line (cf. the pattern we drew)

Once the pattern is done, group it together and copy it. Paste it in front in Ps (SHIFT + CTRL/CMD + V) as a smart object. Pasting it in front (or “in place“, as they call it) ensures that it will be sensibly in the same place as in Ai. Pasting it as a smart object will enable you to resize the pattern at will without losing its vector state. You can still edit it in Ai by using right click on the pattern layer > Edit contents. The changes will transfer to Ps.

Once you’re happy with the pattern you created, use it as the content of the layer mask for the black and white forest image.

1. In Ps, you should have the smart object of the pattern looking similar to what we show above. Turn off all the layers you have in the document except for the pattern layer
2. Drag it at the bottom of your layer list
3. CTRL/CMD + click the pattern layer. Doing this will select the content of the layer. Once it’s selected, copy it
4. Let’s add a layer mask to the black and white forest layer
5. Let’s ALT + click the layer mask we just created. This will switch you to view and edit the content of the layer mask, and not of the layer anymore (just click back on the layer to exit the mode)
6. Just paste (or paste in front) the pattern in there! You can slightly adjust its placement if you feel like it. Note that the content of the layer isn’t a vector smart object anymore, so be careful about resizing it, you might loose sharpness and/or details

That’s the concept. You’ll notice the layer mask getting that ‘cross-hair’ focus icon when you’re in layer mask editing mode. We weren’t sold on the result shown above.

Go into the layer mask editing mode, and simply invert its content (CTRL/CMD + I).

Further tweak the content of that layer mask, notably by adding a worn aspect to it. In order to do so, here’s the first time where we’ll use these Aged actions. Go back to that layer mask content, and zoom in a little bit.

Open your action palette (ALT + F9), and play the Aged 1 action.

Aged 2 works along the same lines, but with different values which produces a different output. Our rule of thumb is to use Aged 1 on white and light objects, Aged 2 on dark and black ones. But we’ve also proved that rule wrong countless times.

This is what your layer mask will look like after the action has been played. Because we’re working on the content of a layer mask, you’ll also have to validate the levels panels. You could tweak the values, but I wouldn’t worry too much about that.

Now it’s a tad less sharp, less clean – much more organic. Let’s move onto a second pattern.

This one is built in Ai as well. Start with one black circle, and then start copying and pasting in front and increasing the size of each copy.

We applied the aged effect on it to make it look less perfect and digital.

And here’s the result! Time to texture that thing.

Background textures and coloring

Go back to that background: we’ll use the files paper41.jpg from the 42 vintage paper textures pack, vintage_stained_texture_5.jpg from the 15 vintage stained paper textures pack, and scan32.jpg from the Vintage Paper Vol. 1 pack.

The first one is used because of its beautiful paper grain. The second features some interesting dirt spots, speckles and intensity variations. The third has some folds and worn marks on it that will help to give the aged feel we’re looking for.

This is the current state of the poster, without the textures and the color overlay.

And here it is with them. So how do we do this? Rather simple actually.

1. Open the texture file you’re interested in
2. Drag it onto the poster
3. Size and place it according to what you want to achieve
4. Desaturate it (SHIFT + CTRL/CMD + U)
5. Use the levels (CTRL/CMD + L or use a levels adjustment layer for non destructive editing, just think about using CTRL/CMD + ALT + G to make the adjustment layer apply only to the texture layer) to increase the contrasts and really bring the details you want to use out
6. Sharpen the result a few times (x2 or x3), according to taste (Filter > Sharpen > Sharpen)
7. Change blending mode according to taste

So where can you make the most impact in this process? The texture you’re choosing is important for sure, but also at steps 5 and 7.

The levels

Here’s a quick demonstration of how we use levels to bring out the texture goodness. We’re using scan32.jpg as the support for this example.

The values you see in the Levels dialogue box can be explained as such: the 100 on the left is the value of the dark tones, the 0.50 on the middle concerns the mid-tones (one of the most interesting ones to play with) and the 200 on the right impacts the light tones. You can also adjust visually with the little arrows under the diagram (black for dark tones, gray for mid-tones and white for light tones).

The Output levels section can also be useful. It defines the darkness of the darkest pixel and the lightness of the lightest pixel. It’s a good alternate for overall contrast control.

The blending modes

For a detailed blending mode explanation, we’ll invite you to go through this Visual guide to layer blending modes, done by Franz of FudgeGraphics’ fame.

These are the blending modes we settled on:

Let’s say it now: we are big fans of overlay and soft light. These 2 modes allow the details of the texture to translate on the design, without being overbearing (at least most of the time) or dampening color too greatly. When placing a texture in a design, we tend to go quickly through the full list of blending modes and choose the best.

Black and white textures
Using black and white textures utilizes the textures for the grain and detail they’ll bring without color correcting the piece all the time along the way. Sometimes, we won’t desaturate a texture, but it’s really rare and accomplishes a really specific purpose (the texture’s colors match or complement the color scheme of the project you’re currently working on).

This is actually why we have that color layer on top of our textures. Even if we felt the design was good with the contrast of the black forest, we wanted to bring at least a hint of color into these black spots.

The color overlay

Load the color swatch you installed earlier. Locate the Laurel green (#a7a761) on the swatch. Add a layer on the top of the textures, and fill it with color. Choose a blending mode for that layer to still be able to see the design underneath. We played with just the opacity of the color layer, Multiply, Overlay and Soft light.

It looks neat, but we lose a lot of contrast, and we want the background to be much more discernible.

This is what happens typically while using multiply: everything becomes darker. Not a fit for our goal either.

Here’s where the awesome happened. We were ready to switch to overlay, when we made a wrong click and the blending mode that got selected was darken. Admire the result:

Because of darken‘s properties, the color was applied to the black and white elements from our upside-down forest image, and the rest of the background stayed mostly untouched. Mistakes can show you the way. Also, if you haven’t grouped your layers into a bg group, now might be a good time to do so.

Texturing the type

Step One
Now that the background is done, add the type. You just have to copy your type in Ai, and paste it in place in Ps. Let’s look at the structure of the type layers:

You can see that there’s a bunch of typelock smart objects stacked together, with a Hue/Saturation adjustment layer and a layer mask. Let’s deconstruct how the effect works:

This is the type on overlay, with just one of the layers turned on. The nice thing about overlay is that it lets a lot of what’s behind show. But with just one layer, the type isn’t really readable. Let’s start by stacking copies, still on overlay…

As you can see, the type is getting sharper. There’s still too much background showing up. Let’s add some more.

Step Two
After five copies on top of the original smart object, the type is legible enough. Now, as you can see, it’s overly saturated. Hence the Hue/Saturation adjustment layer:

Now, the type blends in way more, with a more natural “fall” color. Oh, before we forget: the original color we applied to the type in Ai was #faf9a6. The color is called “Crocus yellow” in that Chevy color swatch.

You’ll notice also that the adjustment layer is applied only to the type. To do that, we just CTRL/CMD + clicked one of the type layers to select its content before creating the adjustment layer, which creates the appropriate layer mask revealing only the selection you just made and hides the rest.
Step Three
There’s also a layer mask with some grunge effect on the typelock’s group. Here’s a before/after shot:

Let’s look at the content of the layer mask:

Guess what will help you to accomplish this? The Aged actions, of course!

1. Create a new layer mask for the typelock group
2. Go into the layer mask content edition mode (ALT + click), and CTRL/CMD + click one of the type layers to get the outline of your type selected
3. With the selection active, select the layer mask again
4. Fill the selection with black (SHIFT + F5 > Black)
5. Let’s play the Aged 1 action
6. Now, you need to invert the result (CTRL/CMD + I). Make sure the selection is still active! The layer mask now simulate the edge of the type having received a lot of ink, while the center of the shape not so much (think ink trap)
7. Let’s run Aged 2
8. Deselect

Some screenshots of the process:

Experiment with levels and other contrast adjustments to make yours unique.

Global Texturing

What, more textures?
Yup. This next step, while really fun, is also critical. The background texture manipulations set the “support” you want to emulate. The global texturing adds more grunge, but also the speckle, dust and other dirty effects. Lastly, it will help to give visual coherence and unity to it.

Let’s look at my global texturing group:

So, there are (from bottom to top): some block print textures, a film texture (it features a bunch of scratches and a frame), one of the black and white grunge vol. 2 texture, one of the rainbow grunge, some noise textures (think dust and speckles) and another white grunge + snow texture.

We followed the same process as when we textured the background. It’s a combination of carefully selected textures, desaturated, leveled, sharpened, patiently experimented blending modes that does the trick here. Let’s look at the details for the later:

As you can see, these are mostly on soft light. I played with the opacity as some of these textures were way too strong. Some notes per layer:

• The 2 block print textures are different ones, amongst the last ones in the texture pack
• Rainbow3 and Rainbow3 copy are the same texture. The one above has been rotated of 180°
• The first Experimental noise 6 has been inverted on top of being sharpened, the 2 following ones are just sharpened and the above one of the pair rotated of 180°
• Same scenario for the 2 top ones (same texture rotated)

Feel free to add more textures! Feel free to change the blending modes! Feel free to change the opacity! We decided to stop here, because we reached that “I think it’s complete” point. Also, as said in the beginning, this project was to showcase what’s possible to do uniquely with Lost and Taken’s textures. We have some sweets ones of old, dusty film, scratched metal and more we would have added (cf. this image).

Finishing touches

Cropping the excess out
This is not mandatory, but will save you both time for the following steps and hard drive space. During the design process, you’re likely to have sized some elements beyond the limits of your canvas. You don’t see them, but each time you save the file, Ps remembers they’re here and includes them. Pretty useless. Also, when applying an effect, they’re taken into account too, which can make the effect take longer to be calculated.

What you have to do is simple: select your whole canvas (CTRL/CMD + A), and go to Image > Crop. Then, while it’s calculating, you might want to refill that coffee cup of yours for the last stretch of manipulations.
Creating a Comp and Aging It
If you’d look at our top layer group, called comp, here’s what you’d find:

We started to create comps because we were occasionally experiencing color shifts when saving without them. This seems to either solve it, or to show the shift on the comp layer, which you can then correct with adjustment layers. There’s a shortcut for it, it’s SHIFT + CTRL/CMD + ALT + E. This is an operation that will take a bit of time.

Once it’s done, place it in its group and create two copies of that comp layer. The bottom copy should get the action Aged 1 applied to it. The top copy should get Aged 2 applied to it. Switch the blending mode of both layers to soft light and their opacity to 25%.

The Halftone Effect
We perfected our halftone effect over time, after reading a couple tutorials that were including it (the main one being this one, written by Adam Levermore).

Create another comp. Right-click the new comp layer and convert it to a smart object. This is also going to take some time.

Once the layer is a smart object, let’s halftone it!

Press D to reset your color palette to black as foreground color and white as background color. We do this because your active foreground color will be used as the color of the dots of the halftone effect. Go to Filter > Sketch > Halftone pattern (make sure your layer is selected). This is what you’ll see:

A couple things about this screen:

1. First thing first, look at the bottom left of the screen and switch the zoom level to “Fit in view.” Now you can see what you’re doing
2. On the right side, “Pattern type” should be set to dots, as we’re trying to emulate that offset print effect
3. “Size” and “Contrast” are to be played with to your liking. We used a minimum dot size quite big (8), since the poster is of decent size. We usually keep the contrast low enough to still have some dots in the whitest areas of the image

You should now see something close to this:

Let’s double click on the one that’s highlighted:

This opens a dialogue box that helps you to choose a blending mode for the halftone effect itself.

You should switch the blending mode to soft light via the drop-down menu, and hit OK.

Almost there…: Switch the blending mode of the layer. Change it to lighter. Lower the opacity some. We settled on 50%.

LAST STEP: SAVE YOUR HARD WORK. Tadaa, you’re done! You deserve a beer while the file saves. We suggest you save the poster as a PSB file (Photoshop Big), as it’s likely to be bigger than the 2 GB file size cap of the PSD format.

Conclusion

After seeing this, Caleb approved it. If you go back to the email conversations, you’ll realize that we’re fitting the scope we established at the beginning. We’re giving Caleb something that’s nature-themed, while still having our own stamp on it.

Well, it’s truly been a blast! We hope you enjoyed the post and that we could shine a little bit of light on how we do stuff.

Let us know if you have any suggestions, comments, or ideas on how to improve; or, you can send us love mail, hate mail, or ask us to design posters for you by letting us know in the comments below or just get in touch!

Sincerely yours,
Simon H. and Jon Savage, Studio Ace of Spade and Editors of the Zine

The post The Lost and Taken Poster: A case study and texturing tutorial appeared first on GoMediaZine.

Creating a Monogram

Monograms are an interesting way to go about making an identity. By nature they can be straight forward or extremely ornamental and illustrative. In this tutorial I’m going to walk you through the steps I (Chris Comella, designer at Go Media, hi!) took to making Go Media’s own Heather Mariano (formerly Heather Tropp) a monogram for her business card.

What follows is a series of animated GIFs. Each show the steps I took toward executing my concept. They all loop, so if you miss something the first time, don’t sweat it. It’ll be back in a few seconds. Also, below each animation you’ll see the corresponding notes.

Step 1: Creating the H

I start off making the general form of the H with basic shapes. Then I add in the negative I’ll be using as guides to ‘carve’ away any excess form. After I draw out the shape, using the pathfinder I unite all the white shapes together to create one solid piece I can use to subtract from the black base. To polish off the H I add a swirl at the stem and carve out a point on the leg.

Step 2: Creating the T

We start off again by creating a basic shape from which to work with. I basically create two circles with a square joining the middle to create an elongated circle. Merge the three pieces and start on the negatives. The two white circles again act as my guide for carving out an unwanted form. Once I’m done drawing out the shape on one side, I duplicate and rotate the piece to fit the other side to keep it symmetrical. Lastly, combine all the white shapes and subtract it from the black base.

Once I have that initial piece (the Arm) done, I end up squashing it a bit as you can see. I finish off the T by using two circles to create a a curved stem and adjust the angle a bit with a third shape. I merge those together along with the arm, and the T is set.

Step 3: Rendering the type

So now that we have the foundation of the monogram set, we can start thinking about how to render it. I wanted it to feel a bit more tactile, so what I did was create some contours that help define the shape spatially. I set the standard in my mind with the first line you see made above…following that precedent I just go ahead do the same around the letters. Next, I decided to take another look at the letters themselves. I end up adding in some open lines to two of the primary curves in the pair, giving it a more decorative, floral vibe. Also, you can see I added a horizontal line connecting the two letters.. here was something I kind of stumbled upon and decided to elaborate. What came to mind at this point was adding another aspect to the piece, I wanted it to appear ‘juicy.’

So in that vain, I decided to add in some water droplets. I liked this because it was in line with the piece’s theme and created some more visual appeal. Following the contour lines I layed down previously, I used those as a jumping off point for the droplets. Drawing them with those curves in mind, I rendered an initial droplet and then elaborated further by adding a couple more throughout the type.

Next up is the color. This step turned out to be very important, because not only is it making the leap from black & white, but it also defined the unique shapes of the letters themselves. What I did here, similarly to the contour lines, was set a precedent with the first piece and moved forward from there…essentially, winging it, but with a sort of mental guideline.

Step 4: Complimentary imagery

To emphasize the monogram’s theme, and to help round out the composition, I decided to make a flower to pair with the type. I started with the petal and finished by drawing the body out. This needed to be simple as it’s purpose is to fit in with the type.

Step 5: Putting it together

I pasted in the flower behind both the letters and trimmed it down to size (erasing any unwanted parts). Next I drew in a highlight and filled the flower with the same gradient from the type highlights. Taking it one step further, I decided to add in some (what I believe are called) Pistils… aka, antennae things. Finally I duplicate the flower and add it in at the bottom of the T to balance it out. From here I simply tightened the piece up, making any minor revisions or tweaks that were left. I decided to add a stroke on the T, a simple gradient to the water droplets, and create a small lightning bug riffing on Heather’s passion of photography (I always thought of lightning bugs as nature’s paparazzi). And there you have it!

The post Creating an Illustrative Monogram appeared first on GoMediaZine.

Ever been asked to come up with a type driven design but still wanted to use imagery? Creating text through collage can be an awesome solution. Here’s what you’re going to need to create a successful piece:

1. An open mind. I always find that being noncommittal toward the placement of objects allows you to easily rearrange the elements into a better composition.

2. A solid sense of composition. When you’re looking at the elements you’re going to use, it helps to have a rough idea of where that element will go and how it relates to the elements around it.

3. Lots and lots of royalty free stock photos. You don’t want to just pull images off of Google. That’s always a bad idea. The original photographer may somehow see that you’re using his/her work without permission and seek legal action against you. I find that using sites like istockphoto or sxc.hu are good places to start. Also, flickr can be a great resource if you ask the photographer’s permission.

4. Patience. It can take a long time for the forms to take shape in the way that you want them to. The important thing is to not get frustrated and to keep working until something strikes you.

5. Basic understanding of Photoshop. This tutorial uses the pen tool, blending modes, transformation tools, and other filters and effects.

Before we get started, you need to think through the project and determine whether or not that collage typography is appropriate for your project. It should only be used in a situation where you can use full color or four color process printing. There may be situations where a good color separator can get it down to 10 colors or so if you’re printing silkscreen, but that could be quite expensive.

Preproduction: Type Layout & Editing photos

Okay, let’s get started. First thing we’re going to do is rough out the composition, which basically is just laying out the type that the image is going to be based on. In this case, I’m going to be using Sign Painter, a typeface by House Industries. Let’s go with something short. Fly is an easy three letters. Bird imagery makes sense here, so let’s stick with that.

The next thing you’re going to do is find imagery and remove the background. I’m only going to show one here, but I’m probably using around 30-40 images total for the whole collage. For this pelican image, I’m going to use the pen tool to outline the shape of the bird.

Now I’ve got the outline finished, and I’ve used the right click (ctrl click on mac) -> Make selection to get our pelican selected.

Next, I’m going to go up to the top menu and go Select -> Refine Edge. I want to make sure that the edges of the bird are clean and crisp and don’t get weird edges.

These are the settings that I used for this photo, but it’s going to be different for each photo, so you’ll have to try out each setting on your own to see what photo will work for you.

So now that I’ve refined the selection, I want to make the pelican its own layer, separated from the background. Ctrl/cmd+J will create a new layer for your selection. Now, we’ve got the pelican on it’s own layer, lets see how clean the edges are. Make a layer under the pelican and fill it with a bright color. This helps to see how your edges turned out. I’m not looking for them to be absolutely perfect here because the layering of images will help hide any imperfections in the edges, however you don’t want them to look too weird.

Building the letterforms

I’ve gone ahead and cut out a bunch of bird shapes from various images and dragged them onto the collage canvas. I like to have them all visible, away from the text so that I can see what I have to work with. It’s similar to having a palette of paint. Also, I prefer to make all of my images smart objects so that I can scale them as I please. It increases file size, but keeps your options open in terms of composing the images.

Now I can start to create the letterforms using the images. Analyze your photos, see if there’s a shape that will fit perfectly as part of a letter. For example, using a wing as an arm on the F. Again, don’t marry yourself to a particular image in a particular spot. You may end up finding a better image to use down the line. Also, don’t be afraid to edit the images. You can use just a part of a bird if it fits better. Also, for this image, I’m not worrying about color. I think the random splashes of color from the various birds will result in a colorful image. We’ll talk more about that later in the tutorial.

As I said in the previous step, don’t be afraid to edit the images. The warp tool is a great way to manipulate an image into fitting into part of a letter. Here, I’m using the warp tool (Edit -> Transform -> Warp) to bend a feather into the L shape.

Keep forming the letters using the images, paying attention to how the images are layered on top of each other. You don’t want too many images just floating without something on top of them. Also, I prefer to use larger images to create the letters, but there are always going to be gaps. I like to feel those gaps with colorful pieces layered behind the larger shapes.

You should always be looking for images that will fit a specific space in the letter. For example, the head and beak of this toucan forms the counter of the lowercase Y.

From here, I’m filling in the spaces with images. I’m paying attention to the layering of images, the shapes of the images, and the relation of images to each other.

I’m also keeping an open mind the entire time and thinking if each element is in the best place. I’ve moved a few of them into new places, deleted a few, made a few bigger, etc.

Post Production: Additional Elements & Vintage Effects

So I’ve finished the collage. At this point, I want to clean up and organize the file. I’ll delete layers I’m not using and put the layers of each letter into a group so that I can adjust the placement of each. So now that I’ve got my file cleaned up and saved, it’s time to move onto some post production. I’m going to put some clouds in the background of the image. First, make a layer behind the word and fill it with a light blue. Next, find an image of clouds.

Now we’re going to separate the clouds from the background. It would be insane to try to do this with the pen tool, so we’re going to use the channels instead. First, desaturate the image – ctrl/cmd+shirt+U. Then bring up the levels – Image -> Adjustments -> Levels, or ctrl/cmd+L and make sure that there is very high contrast between the clouds and the sky. It should look like this:

Next, go to the channels palette, it’s next to the layers palette. Ctrl/Cmd click on the thumbnail to the left of the RGB/CMYK channel. This will select the lighter parts of the image, so in this case it will select the clouds.

Next, we need to see how the selection worked. Make a new layer and fill it with a lighter color. Then make another layer, fill that with black and put it behind your new cloud layer.

Now we can drag the clouds over to the collage and color them white. Mess around with the placement, find something that works for you.

To help unify the colors, we’re going to use a color balance adjustment layer. You can access this at the bottom of the layers palette. Because the background is blue, I’m going to slightly shift the colors of the collage towards blue. I’m not saying to make the whole collage blue, just to give it a hint of blue to help bring those colors closer together.

Let’s add in some noise and stuff to give it a slight vintage/aged feel. Yes, it’s super trendy at the moment, but we’re not gonna go crazy with it. It’s just an added flavor. First, you’re going to need to copy all of the layers and merge them together. This is going to be your filter layer. Next, lets add noise. Filter -> Noise -> Add Noise. These are the numbers I used, feel free to mess around with it.

Next, use gaussian Blur. Filter -> Blur -> Gaussian Blur.

Onto smart sharpen. Filter -> Sharpen -> Smart Sharpen. Again, these are the numbers I used. Feel free to experiment. Make sure the Remove: is on Gaussian Blur.

This is the result.

It’s a bit too much for what I’m looking for, so I’m going to knock down the opacity to around 40 or so.

I’m going to make another layer, fill it with a pale yellow, set the blending mode to multiply, and move the opacity down to 60 or so:

And that should do it. Here’s some other examples of collage type:

View the full size image.

The post Learn to Create Collage Typography appeared first on GoMediaZine.

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

—

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!

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!

The post GMZ Reader Special: The Making of Andrew Jackson appeared first on GoMediaZine.

I have been creating extreme metal logos for over 4 years now for many bands all over the world. Being an extreme metal fan and a logo designer, it was only natural for me to start creating logos for the metal scene. The demand for these logos were more popular than I expected and I managed to get quite a lot of work from it alongside my studies.

Now that I am focusing on different area’s of work I have decided to write a tutorial to explain in detail how I went about creating the most popular of all my logos; the death metal logo. This will be a symmetrical, hand rendered, vector logo.

Step 1

First of all, it is important to know a lot about the band the logo is for. What sub genre do they fit in? (technical death metal/progressive death metal/old school death metal) What are the lyrics about? (politics/urban life/religion) What type of audience are they trying to attract? (mainstream/underground).

Once you have collected enough information about the band, you can then start researching the relevant visuals. If you are not so familiar to death metal then its a good idea to find as many logos you can to use for inspiration. To make the logo more unique its a good idea to find inspiration elsewhere including religious/medieval/occult symbols, typography, non-metal logos etc.

The logo I am using for this tutorial was for an old school death metal band. They had influences from hardcore punk and the lyrics were about politics and society. I took inspiration from death metal logos, punk logos, gothic architecture, the Book of Kells, Blackletter fonts and ambigrams.

Step 2

You should now start drawing the logo straight onto paper. Start drawing the letters from your influences, if you lack experience in working with typography pay careful attention to the fonts. They dont need to be perfectly drawn or measured, we will use Illustrator to do all of that. Spend a lot of time on the sketches, creating at least 3 or 4 that you are happy with as these sketches will determine how good the logo is.

Some letters are more difficult to make symmetrical than others, use backwards letters if necessary or make 2 thin letters symmetrical to one wider letter. You might want to just keep the first and last letter symmetrical if you want it very legible. Try to keep the widths of the letters as consistent as possible. It helps to understand the basics of typography.

Some letters a more tricky than others to make symmetrical. It is sometimes a good idea to start with the most complex letter, then draw a flipped version of the to use as a template. You can then try to fit the other letter inside the template as best as possible. Sometimes the first letter will still need to modified to get a balance between the 2.

Here are some examples of sketches where I have had to make 2 letters symmetrical with each other. The green area’s are where the template was drawn from the other letter. Once you have drawn around that it should then be erased.

Once you have some sketches you are happy with, scan it in, get the band to pick their favorite.

Step 3

Open up a new Illustrator document at any size/mode. Import > Place the sketches in. Go to View > Rulers. Then drag down rulers wherever things need to be on the same level and wherever you want straight lines.

Step 4

Lock the layer with the sketch on and open up a new layer. Make the fill color transparent and the stroke color a bright red. Select the Ellipse tool and draw circles wherever there are curves in the logo. The more thorough you are, the smoother your logo will look.

Step 5

Open up a new layer, drag this layer under the layer with the circles on and lock the layer with the circles on. Select the pen tool, change the fill color to black and make the stroke transparent. Now start to draw in the shapes, using the guides and circles to help you. Just do it shape by shape, don’t worry about making everything join.

Zoom in and use the anchor points to get it as smooth as possible. If you have trouble seeing the sketch underneath, go to Window > Transparency and select 50%.

Step 6

Use this opportunity to change any parts of the letters to make them look better. Make sure any symmetrical letters are perfectly symmetrical by drawing one side, duplicating it (alt+mouse) and using the selection tool to flip it over.

Step 7

Now you have half of the logo complete, create another new layer. Copy and paste all the letters onto the new layer, make the Fill transparent and the Stroke blue. Flip them so they are completely symmetrical to the other half of the logo. Place each letter over the closest matching part of the other side. Lock that layer, go back to the main penning layer. Now draw in all of the other letters using the blue outlines as a guide. Compromise between the 2, this can be tricky, just find a balance of keeping it symmetrical and legible. Keep working at this until you get all the letters the way you want them.

Step 8

Go to View > Grid and use the rulers to give the logo consistent spacing and alignment. If everything looks exactly how you want save the file and go to Export and save as JPG just to show the band and so you can view it outside of Illustrator. Make any changes before continuing.

Step 9

Although the logo is now finished in black and white vector form, bands usually want the logo in different colors and textures. This could be achieved in Illustrator but I find Photoshop is easier to use, although it will no longer be scalable.

Select all the letter Shift+Drag the logo out until the width is at least over 1000 pixels (about three times the width of an A4 page). Select Edit > Copy, open up Photoshop. Open up a new document and paste as a Vector Smart Object. I find that the best ways of creating textures is using textures from photos (www.imageafter.com) to fit inside the letters. Grunge brushes are also useful. Then play around with the layer styles until you have something you and the band are pleased with.

You should now have a professional looking symmetrical death metal logo. If it did not turn out as well as you had hoped, don’t worry, just keep practicing. Learning about typography and really paying attention to detail will help a lot.

The post Tutorial: Death Metal Logo appeared first on GoMediaZine.

Introduction

Hello again! I was recently asked to do a flyer for a promotions company by the name of  inFamous Productions; a very popular promotion movement in Western NY mainly stationed in Buffalo.

My main objective was to create something unique that would serve as a creative campaign for a nightclub. Long story short, one thing led to another, and I came up with a poster which led to the flyer design. For this tutorial I will be teaching you guys and letting you all get ahold of the process in which I used to create this Galactic Title in Photoshop.

The tutorial will be 80% Photoshop intensive and 20% 3DS Max. Somethings to keep in mind are: 3D letters can be made in any program, be it Adobe Illustrator, 3DS Max, Cinema 4D, Xara 3D, Photoshop, etc. The great thing about this technique is that it can be translated into any 3D generating software.

I will shed light on the basics of lighting, mapping and Render Setup in the robust package that Autodesk has to offer. I don’t want this to predominantly be a 3D tutorial, thus I will not go into extensive detail on everything I do. Feel free to shoot me an email at fmartin9@naz.edu if you have any questions and or concerns. I can also point you into the right direction if you are interested in pursuing a design career in 3D.

Lets Have At It!

Begin by finding a great font. I like to browse around this site for inspiration and possible font purchases. I find that rounded san-serif texts tend to work well with this technique.

Step 1 – Setup

We can begin by launching 3DS Max and create our preferred slogan. For this, I chose “Stand Up”, since it was the name of the event. Go the Create Tab, marked by red, chose splines, then hit text. Type in what you like and line up the text as shown in the front viewport.

Step 2 – Extrusion

Perfect. Now with the text spline selected we will go ahead and hover over to the modifier stack and apply a bevel modifier. Follow the settings displayed below.

NOTE The bevel settings will vary between text sizes so don’t depend on solely on mine. Mine are generally smaller because I exported my splines from illustrator. Just scroll down the arrows until you get something that looks like the preview below.

Step 3 – Mapping

Lets add some materials to this text by hitting the M key on the keyboard to bring out the material editor in Max. I am using VRAY, which is a physical based rendering engine and I HIGHLY ENCOURAGE all to purchase it or at least try it out.

This is definitely one of the best rendering solutions for any platform. Although 3DS Max and many other 3D software come with their own G.I. Solution, in my opinion, VRAY surpasses them all. For this reason, I chose to use this engine for the tutorial. You can get a hold of a demo from here.

Without further ado, lets continue on. Let’s give the text a semi-glossy white material. I absolutely enjoy white text but you can change the color to match your creative ambition.

Step 4 – Lighting

Lighting. I promise, this will be easy. Vray is the way my friends. We will simulate a rig for a studio lit scene without using a 3 pt. Lighting system. Find the Vray Lights and click and drag on the viewport to create the rectangular Vray lights. Feel free to experiment with different lights and shadow parameters. Remember, experimentation is key to success when using software.**

Step 5 – Position Text for Renderer and Create Camera

Follow the picture below. After you are done creating the camera, press F10 to bring out the render settings window:

Step 6 – Render Setup | Low-res and Hi-res

Rendering—one of the essential parts of finishing a project in any 3D platform. These settings are very critical, as they determine how long a render task will take and how good a quality the engine will put out. It’s always essential to set up test presets so that you can get relatively quick renders without losing too much quality.

After you are done plugging in these settings, save them as a preset. Name the preset ‘Test High’. This will now help you save time when testing out scenes.

Low-Res Setup

This actually looks OK to go ahead and use for a small production. However, I assume you would like to make this project in large prints. Therefore, I will also show you how to set up a great quality render that will probably take up about 1 hr to 45 minutes to render depending upon what hardware you are working with. Sorry—for great quality you always have to pay the price of render times.

If you really hate render times and want to get a great quality realistic looking render with max’s built in scanline render, I suggest you Google “dome light rigs for Max”. This is basically an array of lights in a scene with multiple settings that are used to fake G.I. With an ambient occlusion pass……whoa, I hope I did not lose you there. Nevertheless, the technique is out there—it’s just up to you to fish it out. Now follow the settings:

**NOTE** if you are a 3DS and Vray Junkie like myself, I would actually ignore the “X” I put on the Mode settings for each GI engine. If you are a beginner, please follow the pictures exactly. I just don’t want to cause confusion and more complexity; therefore, I chose to ignore those options. However, if you are interested in finding out what they do, Google ‘Vray Mode Settings’ and follow the online instructions. Basically what they do is help avoid flickering and lessen calculation times during animation renders by referring to the same map in every frame.

Step 7 – Saving Files for PSD

No that we have that out of the way, we are going to save out PNG’s—not jpgs, not exr’s, not tiffs, but PNG’s. We will also need to mask out the Face of the type because we are going to add a texture later on. I’m very lazy, and rather than wasting 30 minutes of my time tracing a mask of the text face in Photoshop, why not generate one from 3DS Max? Here’s how:

Step 8 – Finding the Resources

OK—now that we are done with 3DS Max, shut the program off and launch your preferred browser. Let’s look for some stock images. The picture above shows a lot of galactic activity, therefore we want to look for nebula stocks, cosmos brushes and the whole nine yards.

Here is a list of places where you can go to find amazing resources for this tutorial.

Blue Vertigo

Bittbox

iStock

Nebula Stock

SXC

Topaz Adjust

…and the list goes on. However, Google ‘nebula’, or space brushes and try to find high res brushes. I got lucky a while back and got a hold of some amazing, free royalty space brushes. I would love to share with you guys however, I don’t remember where I got them. Also, you will need to watch a brief tutorial in order to create cloud brushes:

We will use them as erasers to get nice dynamic “cosmic” clouds.

Step 9 – Setup

We have everything we need. If you downloaded brushes make sure to install them before you launch Photoshop. Lets setup our document size. I encourage you all to make this a large file because when printed large on a poster, this design really turns heads.

Step 10 – Mapping and Coloring

Lets begin by adding a semi dark background. Go to blending options and create a radial gradient:

Now snag this stock image and place it behind the text like so, and set the blending mode to screen. Feel free to use the cloud brush (from the tutorial above) and erase off anything you don’t want to keep from the stock. Like I did below:

So far so good. Now let’s go further. Lets begin to add our texture and color map to the extruded text. First add the Color Map:

Now we are going to do the same but with a texture map. Snag this texture from bittbox’s Flickr Pool. Lets make all the white ares pop out my bringing up the curve editor and raising the curve. Now set the blend mode to soft light and opacity of 75%. Now give it a clipping mask on top of the gradient map:

With the same texture and following these same steps, lets now do this to the mask layer we generated from 3DS Max:

Step 11 – Lighting

As you may see, with this mask layer, we have a lot more control of what we can do to the face of the text. 3DS Max is absolutely the best. Now lets create more cosmic distortion by duplicating the first stock image we used, which is the swirl fractal. Hit Ctrl + U to bring out the Hue/Saturation settings. Now go to Filter > Blur > Motion Blur. We will use this technique to create light streaks. Duplicate this layer and set blend mode to soft light to both:

Step 12 – Using Brushes

Now with the space brushes loaded, create an array of new layers. In each layer you will place a different space brush. Trust me, you do not want to go ahead and paint all the different brushes in one individual layer. We want to create a dynamic collage, therefore, we need every element in their own individual layer.

Experiment with different shades of green and yellow to create more harmony. You’ll want to switch from brush to cloud eraser in order to get rid of hard edges  in a non-destructive way. Watch as I do it:

Step 14 – Adding Lights

Now lets create an array of circles with different hues. Blur them using Gaussian blur with a setting of 97.4:

Continue adding lights to the comp. Try differentiating the blur densities.

Step 15 – Brushing Continued…

Lets keep on brushing more cosmic relief. Now lets add depth by brushing in front of the letters since we have spatial design behind the words. This will create a sense of interaction among the elements and will make the text seem as if it is part of the composition rather than look like it was pasted on. Use your creativity and imagination to determine size and colors of the brushes. Continue brushing:

Step 16 – Fades

Next I will show you how to create fading designs:

52 from That Dude on Vimeo.

OK now that I have shown you how to do this. Repeat this step until you are happy with your light streaks.

Step 17 – Line Design…

Now we are going to create the intricate line pattern behind the letters. As complicated as it may seem, in reality it is fairly easy. Choose the Line shape tool, with an empty path selection as shown in the video below. While holding shift, create continuous lines from left to right. Go to Brushes and create a simple scatter brush by following along with the video below:

Step 18 – Background

Now lets add a final texture to the background layer. Google watercolor textures. When you find one that you like, import it into your comp. and set the blending mode to soft light and the opacity to 75%. We are all set!

Step 19 – Topaz Filter

Ha….I lied, we are not all set yet. We have one final step. You can skip this if you like, however this will give your final piece more continuity. After you have downloaded the lovely trial version I posted above, go to Filter > Topaz Adjust and scroll down to the presets and click on Portrait drama. Apply the preset and you are finished.

Voila—now instead of doing the various techniques I showed in my previous tutorial, you can now perform them with the click of a button, but at a monetary trade off.

I hope you all enjoyed the tutorial, and hope it wasn’t too complicated. Comment please and let me know what you think before I move on to the next tutorial.

I am once again providing all of the files used in this tutorial: Stand Up tutorial source files [Go Media]

I hope this tutorial was helpful. Lets see some submissions of this technique in the Go Media User Showcase. Thank you for your support and happy designing.

Also, be sure to check out my portfolio and my previous tutorial.

The post Tutorial: Killer 3D Poster Design with 3DS Max & Photoshop appeared first on GoMediaZine.

Introduction

In this tutorial we are going to go over various techniques you may have seen before, as well as a bulk of techniques that may be new to you. After you have completed this intense walk though, I assure you will be able to explore even more new ways of creating typefaces as well as other types of ideas. Inspired by the work of Nelson Balaban as well as my own, I decided to re-create an old piece of mine using the techniques I am about to show. The completion of this effect will probably take around 8 hours collectively; however, once learned, the process shall be pretty easy and fast to replicate. Even though it is extensive, nevertheless it will be very fun and insightful. The final effect is shown below. Alright, lets do this fellas!

Lets Get Started

We shall start out by choosing a typeface that appeals to us the most. Personally, I love the new blocky typefaces we are seeing more and more nowadays. You can purchase many of them at myfonts, or look at the free ones at fontstruct (pretty amazing free fonts).

The typeface I have chosen for the image above (MOD) can be found here.This font is created by a great typographer named Svetoslav Simov. You may have noticed my font is very distinct from the actual MOD font created by Simov, due to modifications I made to the lettering in illustrator. We can now open up illustrator and load in any document size. The size of the document does not matter at this moment because we will be importing the finished illustration into Photoshop as a Smart Object.

Step 1 – Setup

Alrighty then. After we have chosen our preferred typeface, we shall proceed by expanding the text. This will make it an editable path. We will also load in the swatch file provided or choose to create our own unique color scheme. If you don’t know how to expand the typeface or load swatches, take look below.

Step 2 – Extrusion

After we have expanded out paths and loaded our swatches, we shall proceed with the handy extrusion tool located in the Effect Menu>3D>Extrude & Bevel. Normally we would want to extrude the whole entire phrase or word in one instance; however, we want to give life to the text by not making it seem so generic. For that we must extrude every single letter by itself, giving each different vanishing points. This will in end, make the letters seem like they are playing off each other and give life to the finished product.

This process involves working with multiple paths; therefore, we want to keep our work flow very smooth by creating a very organized Layer structure in Illustrator. Take a look (below) at how I go about organizing my layers and sublayers. Having all of these vector objects scattered all over the place can become cumbersome. I immediately moved each letter into its own layer and also added sublayers for extra effects that I knew I was going to add along the way.

What we want to do for each letter is to make an instance/copy of it by selecting a letter individually and hitting Crtl+C to copy , then Ctrl+ F to paste in front. For now we will hide the copies of the letters. Using the original letter, we shall now apply the Extrude & Bevel effect.

Ok, so this is where the whole technique becomes a bit more involved. Take the instanced letter you have hidden, and we will perform Alt+SHIFT+Ctrl+E. This command will load any last filter/Effect we have applied to the previous object. This saves us the hassle of going through the Effect menu and manually clicking on Extrude & Bevel again and again.

NOTE: This handy command will preserve ALL the attributes entered for the last object this effect has been added to. THIS IS WHAT WE WANT because we will do the same to the instanced letter but we’ll now add a closed cap extrusion rather than an opened one. Look Below.

Repeat this process we have described so far to the remaining letters. Remember to keep everything as organized as possible—after we have completed these steps repeatedly, everything could become confusing. This is were organization plays a big role. Take the time now to organize everything now if you have not done so.

Step 3 – Expansion

Hanging in there? Good! because now it gets super tricky. You’ll have to work hard to get this cool effect. Ready?

So, you might ask, why did we make two copies of each letter and why did we extrude them differently? Guess what, your questions are answered in this step. I’m going to explain this very thoroughly to the best of my ability so try to follow along.

We are going to now hide all the letters besides the N (If you chose to create a different word, you will now proceed to hide all the letters except the beginning one). Next, hide the EMPTY CAP extrusion of the N. This will leave us with the OPEN CAP N which was originally the first copy we placed in front and made the second extrusion to.

Now we will expand this version of the N and delete the extrusion part of it and leave the “CAP”. Note, since we have already expanded the typeface and added an effect to it, in order to make it a workable path, we must expand it once more. We will notice that now the expand option is grayed out. This is fine. We shall use the expand appearance option right below it – Object>Expand Appearance.

When expanded, we shall see that illustrator will created a group of different things that make up the Effect. To ungroup the expanded objects and to make it easier to located the shapes we want to keep or get rid of, we are going to: Expand the layer with the newly expanded extrusion! This is why turning the blend steps is key. The more blend steps we have, the more shapes we will have to work with. This will create a hassle undoubtedly.

• Ungroup all of the new objects by selecting the extruded shape and hitting Shift+Ctrl+G three times
• Find the shape that pertains to the cap (should be all the way at the top, inside the layer)
• Delete everything below the cap
• Add any of the green and blue gradients to the cap
• Turn down the opacity of the N cap to about 50-56%

Once these sub steps are completed, you should have an image like the one shown below.

Now when we delete all the unnecessary objects pertaining to the capped extrusion, we can see right through the inside of the letter when the opacity is turned down.

Step 4 – Expanding Empty Extrusion

First, we expand the empty N so that it will give us more flexibility and creativity when adjusting the colors and transparencies of the sides.

Now that we have completed the expansion process of the N, we are about to do the same to the empty capped N. Hide the Cap layer and select the empty N. Again, go to the Object menu and select Expand Appearance: Object>Expand Appearance. Now it gets tricky. It is best to follow the pictures so that you can get a better sense of what I am talking about. Now that we have expanded the N, and ungrouped all of the objects, we want to start joining our corresponding paths together.

I will explain the basic theory around this. Lets start with the far right side of the N. Essentially what we want to create is a continuous shape that resembles a particular side. If we were to apply a color the sides of the N, it would look weird and incoherent. This is because of the blend steps. You see, the extrusion tool uses an algorithm that applies gradients to the extruded edges to create depth, so when expanded (remember, the expansion tool makes everything that is being expanded COMPLETELY EDITABLE), the blend steps themselves become individual objects. So now, if we where to select the right or any side of the N, we would only select 1 of the shapes that create the whole entire side. For clearer understanding, follow the pictures.

Now watch what I do exactly below when I join the paths.

So basically, what I am doing is using the selection tool, choosing the side as well as the curve, navigating to the pathfinder tool located, Window>Pathfinder or Shift+Ctrl+F9, then using the Add to shape Area command within the pathfinder tool to join the end. Notice How I immediately click the expand button after I join the paths in the pathfinder floating menu. This allows me to make the new shape directly editable. Now I can add a continuous gradient throughout the sides. Essentially, this is what we want to do to every single side of the N.

Continue with step 4 and do what I have shown, to all of the sides. Just watch below as I go through and do it myself.

NOTE: When viewing the mini gifs shown above, don’t be alarmed by the color applied. The gradients look like they are separated into three parts. This looks that way because of the compression rate I used on the Gif files.

You might notice that sometimes when I joined the paths together they suddenly disappeared. This is because when we un-grouped everything, certain elements were scattered unevenly throughout the layers. This is no problem. After joining them, and they disappear, all we have to do is locate the layer/group they are in; expand that corresponding layer and locate the clipping mask. Delete this clipping mask and watch at amazement as your object re-appears. Now we can choose what ever color we desire. Don’t be confined to what I do. This is the part where everything gets fun for you. This is were you start being creative and adding colors AND transparencies you think will look nice.

Step 5 – Modifying the other Letters

You will have two choices now. You can either go ahead and repeat steps 2, 3 and 4 to each letter, or you can start adding your effects to your newly created letter. If you decide to apply this effect to all the letters now, your letters should resemble something like the image below. When you are done with this, lets meet at step 6.

Step 6 – Get Creative

Ok, so now that we have that hard work out of the way, we are finally going to have some  fun with this process. This is the part of the tutorial were your creativity is welcomed most. You can say this is the post work in Illustrator. I can’t really teach creativity or give you a specific guide on how to think artistically for yourself; however, I can show you some of the techniques I used and teach you how to utilize resources to the best of your ability.

Now we are going to want to hide all the letters and work on just one at a time. With the caps selected, lets play around with the opacities, blend modes and strokes. One thing I particularly like to do is mess around with dashed lines. To achieve this effect we create a stroke, expand the stroke options and check dashed line. We can now set the length of the dashed line. I tend to keep the settings low and thin to get a notebook effect.

Next, duplicate the cap N, keeping it in front, lets choose a stroke and expand it. Delete the N and keep the stroke. Enlarge the newly expanded stroke and add a gradient you like. Do this as many times you want to create variety.

The expanded selection should look like this and now we can apply a gradient.

Continue experimenting with this until you are pleased.

Lets create circles, add any gradients we like and set blend modes to multiply. Create these separate elements in different sub-layers in order to keep them organized.

Now watch carefully as I create opacity masks to achieve nice fading effects. I’m basically making a shape, choosing a color I like, then creating another shape on top of it with a black and white gradient that serves as the opacity mask

Continue this process over and over again to create unique designs. Don’t just use circles, also experiment with other geometry. Also try variations of radial and linear gradients for the opacity masks to create distinct fading effects.

Now we will create variations of white spheres and give them a Gaussian Blur Effect to give the N some depth.

Apply the Blur and experiment with the Transparency settings as well as Opacity to blend it in better.

Now when you are satisfied with what you have, lets get a little bit more creative. Lets add some patterns behind the letter. You can come up with your own pattern, search the freebie section of Go Media’s Vector Packs and use those available patterns, check out Vecteezy for more elements or you can browse the awesome Arsenal collection Go Media offers. Once you have decided what you want, place a sublayer at the end of the N Main layer and place the pattern inside it.

Lets add some more spizzaz to our design by taking advantage of Go Media’s free brush pack. We can now use strokes with the shapes provided in the free brush pack to create intricate background designs. Mess ground with expansion and gradient to get the desired effect.

Now that we are done with the N letter, we can repeat all of the steps above to all of the corresponding Letters. After we are done, our eye candy should look like this.

We are now ready for some handy dandy post work in Photoshop. Save your work and proceed to the next step.

Step 7 – Post Work

Lets use a drag selection to copy all of our elements in Illustrator. We need to make sure none of our layers/sublayers are locked, or the finished product will look weird and incomplete inside of photoshop. Press Ctrl + V or Edit>Paste. An import dialog box should pop out in photoshop. We shall choose Smart object, that way all vectors are preserved.

NOTE: Transparencies are not transferable from Illustrator to Photoshop due to the difference in Blend Modes. In order to preserve the transparencies, you will have to import the text effect with a background from Illustrator. However, If you know how to import the imagery from Illustrator to Photoshop with corresponding transparencies, do share with us your method. I have often tried to export my image from Illustrator as a PNG then import it back into Photoshop, but that doesn’t seem to preserve anything either. I think adobe should keep the algorithm for transparency modes in all of their products the same for better compatibility between software packages….

Now that we have our work imported, we shall look for Nebula stock imagery to give our ‘Fruity’ text a futuristic feel. I used these stocks: Nebula 1, Nebula 2, and D.A. Moonchilde. With Moonchilde stock, make sure you credit her properly as she gives specific instructions on how her stock may or may not be used. I will not be covering too much texturing in this tutorial b/c I find that this text effect stands out better on a calm ‘n subtle background. Of course you can go crazy and add as many textures and images as you want, but that’s your forte.

Now that we have our text properly imported and our stock images chosen, we will begin by creating a vignette around the text. To do so, lets create a huge eclipse selection but lets keep it within the canvas. Inverse our selection, use the paint bucket tool and fill with black or w/e color is desired, Lets apply a Gaussian Blur to it with Maximum settings, and lets turn down the opacity to about 35% and now we have a nice looking vignette.

Now we want to add a shadow underneath the Letters to give the image more depth.

Lets give the shadow layer a Gaussian Blur effect of about 25.2 pixels and then lets decrease its opacity to about 57% so that it doesn’t look over saturated in black. Essentially we want a soft area shadow.

Lets some Diamond shapes. We will use the rectangle Marquee tool to create a square selection by holding shift and dragging along the canvas. Lets right click selection and choose Transform Selection, hold shift to snap rotation to 45 degrees, then rotate once. Use the paint bucket to fill the selection with white or whatever color you prefer.

Give the rotated square a gradient overlay of your liking.

With the ‘marching ants’/selection still active around the square, choose the marquee tool again and move the active selection about 35 pixels above the square. Right click, Transform Selection and stretch the selection out.

With selection in place, we will apply a Ctrl+Alt+D command or simply Select>Modify>Feather, and choose a radius of about 50 pixels. Hit apply then press delete. This create a smooth fading effect inside of the square/diamond.

Repeat this effect to your liking with same or different shapes. It’s always good to take risks and try new ideas.

Now lets add some nice glows to the background by creating 3 circles with different colors.

To make them glow, we will now add a Gaussian Blur Effect and play with opacities.

Finally, we will finish the piece by adding a subtitle below the word. I chose typeface, you can go with w/e you desire. We will give it a nice gradient that plays off the main title.

Now we duplicate the ‘Typeface’ layer by applying a Ctrl+D command. We will hide the Glow option but keep the gradient. Right click the layer and convert to Smart Object in order to retain the gradient information on to the type and get rid of the glow. This allows us to re-scale the position of the ‘Typeface’ object anywhere without the gradient changing. Now we will apply a Gaussian Blur and set blending mode to Soft Light 100%. This will now act as our glow pass for the ‘Typeface’ element.

Lets add some motion blur to the typeface. Duplicate the ‘Typeface’ layer once more. Again, disable the glow option but keep the gradient overlay. Convert to Smart Object and apply a Motion Blur.

Step 8: HDR Effect

Technically, the design is complete. Personally, I like to give an HDR effect to all of my flyers and typographical based works. I don’t use any expensive HDR image plugins out there, however when I get the money I will definitely get my hands on Topaz Adjust. It mimics what I basically do at the click of a button. This would definitely come in handy when tweaking something last minute. Oh well, I don’t have it, but if you do, use it to your advantage. I figured out a technique that would mimic the final output of this awesome filter.

So we will start out by exporting our file as a JPG image then re-importing it back into Photoshop. I like to do this rather than merging layers and or flattening my image, because I tend to save a lot. If I save while I have flattened the image I will lose everything I have worked on, layer wise. This is why I choose the Export JPEG option since it will flatten the image for me and preserve the 300 dpi or whatever setting I have it set to. You can also export to PDF, TIFF or whatever floats your boat. Just make sure the image is flattened.

Now we will duplicate the layer 4 times. Name one layer shadow, the other highlights, the other sharpen and the last isolation. Leave the BG layer locked as we will merge everything back to one layer when everything is done.

Hide all the layers but the shadow one. The go to Image>Adjustment>Shadow/Highlight… We want to bring out the shadows and dark areas.

We can now hide the shadow layer and un hide the Highlight Layer. We will now bring out the highlights.

Lets hide the highlight layer. Now we want to isolate the shadows from the highlights and vice versa. To do this, we will use the isolation layer. We will give it a brightness and contrast adjustment found Image>Adjustments>Brightness and Contrast.

Using the isolation layer, we will extract the highlights from the highlight layer and the shadows from the shadow layer. To do this use a Color range selection found Select>Color Range. Select the black area and then click ok. Now inverse your selection and apply a feather range of about 25. Delete your selection twice and now you have a layer with only shadows.

We will do the same concept with the highlight layer. Use the isolation layer as a map, use a select range option then click on the black area, instead of inversing the selection , leave it as is but feather it to about 20 and hit delete once. Your image should look like this.

Now we un hide both shadow and highlight layers and hide the isolation map layer. We shall now tweak the blend modes of these layers to create contrast. Make sure the highlight layer is above the shadow layer and the shadow layer is above the BG layer. The shadow layer should be set to Multiply with an opacity of 30%. The highlight layer should have full opacity of 100% with a blend mode of soft light.

NOTE: This technique tends to make the vignette very dark and saturated. To rid ourselves of this we will manually go in and choose a soft Eraser brush with an opacity of 40 and erase away until satisfied.

Last but certainly not least, we will add a High pass filter to our sharpen layer to create the HDR look. We will end by setting this layer to Linear light with an opacity of 46%.

These post-processing techniques will vary between the size, colors/brightness and contrast of your works. With that said we conclude this overwhelming tutorial.

Download all of the files used in this tutorial here: Nasty Typeface PSD (3564)

For the PSD, I can’t provide the stocks I used as I am not the rightful owner who can re-distribute the stocks. However, I have provided the links above so that you can find them yourselves. I hope this tutorial was helpful and I hope to see this technique replicated and tweaked artistically. I encourage you all to use this tutorial in your own work and I would like to see some nice emulations of this typeface in Go Media’s User Showcase on Flickr.

Hope you found this tutorial useful; happy designing!

The post 3D Typography in Photoshop appeared first on GoMediaZine.

Ok Folks, This is it; part seven of seven. I’ve hopefully convinced you to limit your use of colors and fonts, taught you to provide sufficient contrast, suggested that you properly space your elements and let you in on the secrets of adding depth and motion to your design. Now, the last principle in this rapid-fire guide to becoming a master designer is composition.

In truth, the order I’ve given you these seven principles is probably ass-backwards. The composition is the first and most important part of your design. So, let’s just pretend that you are starting your design right now – from scratch. This is the point at which you want to be thinking about your composition.

Each of the previous six principles dealt with very specific rules and techniques. Composition is the broadest and most difficult principle to explain because it encompasses EVERYTHING.

So, what exactly is a design’s composition? Let’s go the cheesy route of providing a textbook definition.

First let’s review the definition of the word ‘composition.’ Dictionary.com defines composition as

1. the act of combining parts or elements to form a whole.

2. the resulting state or product.

Ok, that’s simple enough. The composition is simply what you get when you put your pieces together. It says nothing of function or quality. It just is what it is.

Now, design as defined by dictionary.com: Design is:

1. to prepare the preliminary sketch or the plans for (a work to be executed), esp. to plan the form and structure of: to design a new bridge.

2. to plan and fashion artistically or skillfully.

Ok. Great, so, if we combine those two definitions to form a definition for design composition, it would sound something like this:

Design Composition: To skillfully and artistically combine parts or elements to form a whole.

Wow. That sounds GREAT. So, what have we learned? Um… not much. I think we already KNEW that we were here to put all our design elements together into an artistic design (whole.) What we’re after is how to make a successful design composition. So I guess we’ll have to define what a successful design is.

Fortunately for us, design is not simply “art;” a highly charged and subjective subject. Designs serve a very specific function. The function of a car’s design is to safely transport humans from one location to another. What if we designed a car with square wheels and a huge metal spike extruding from the steering wheel pointed directly at the heart of the driver? Would that be a good car design? No, probably not.

So, how do we define a successful design composition? Well, if we have successfully achieved the FUNCTION of the design, then our design is good. And who defines the function? Typically this is the client. The client tells you (the designer) the function (purpose) of the design. Then it’s your job to design (whatever you’re designing) accordingly.

Now – how do I give you a lesson on composition if the function is not set? Well, I will have to speak in generalities. Then you will have to apply these general concepts to your specific project. And since the composition is dependent on the function, well, we should probably start there.

Make sure you have a solid understanding of the design’s goal: Read your project scope carefully. Make sure you fully understand what your client is trying to do. Ask plenty of questions if you have to. This part includes the boring stuff like dimensions, resolution and printing (or manufacturing) processes. All of these affect how and what you design.

Understand who the target market is: If you’re trying to communicate a subversive counter-culture message to a young male demographic, your composition may include a strange layout with hard-to-read fonts and bright colors. Or if you’re trying to communicate where the cafeteria is to old people, your composition should probably utilize a large easy-to-read font printed in black, centered with an arrow on a white background. What’s my point? Your composition will also depend on your target market.

Know your history: Once I have these two items taken care of, I like to do some research on the design history of the company and industry I’m doing work for. As much as possible I LOVE to feed visually and compositionally off of the past. My thought process is this: “understand how they’ve gotten to where they are today, then help them transition into a better designed future.”

Make some quick sketches: Hopefully at this point I’m starting to get some rough ideas floating through my head of what needs to be in the design and, at least a rough concept of how I might want to put it all together. Before I give myself an opportunity to over-think anything, now is the perfect time to do some quick sketches. These are very fast and very rough. They’re just enough to communicate where all the elements go, how they work together. This gives me an opportunity to quickly ideate and maybe deal with some contrast issues. Let’s look at a few composition sketches for a poster and a flyer I did.

The Golden Ratio: As I’m going over all of these systematic approaches to the relative question of good design composition, you surely must be thinking: “Bill, c’mon isn’t there some grand universal rules to help guide my layout? Isn’t there a FORCE which surrounds us, binds us and will help guide me to properly arrange my design elements?” Well, I want to say no. There is no design ‘force’ that you can tap into if your design midi-chlorian levels are high enough. However, there is an ancient design standard that has been used throughout the ages – going all the way back to the birth of civilization. It’s known as the Golden Ratio.

I can’t possibly get into a full explanation of the Golden Ratio here, but to summarize: people noticed certain patterns that repeated in nature. They tried to quantify this repetitious behavior in nature and came up with phi, or more precisely: 1.6180339887. If you’d like to know a little bit more about the Golden Ratio I suggest you hit up the oracle: http://en.wikipedia.org/wiki/Golden_ratio

So, how does the golden ratio apply to your design composition? Well, basically – you want to use this measurement to help space your various design elements. Once again, I can’t go into great detail in THIS tutorial, but here is a downright amazing example of the Golden Ratio being used by the Greeks to build the parthenon:

The rule of thirds: In my opinion the “rule of thirds” is simply a bastardized (simplified) version of the Golden Ratio. Basically, you want to divide your composition into thirds vertically and horizontally. Where the lines meet should be your focal points. By avoiding a centered design you add some motion and interest.

Balance without symmetry: “Great! The Golden Ratio,” you’re thinking “ Now, are there any other universal ‘truths’ about design composition?” Well – not so powerful as the Golden Ratio is the concept of balance. Without getting trapped in a symmetrical composition many artists and designers try to achieve balance in their designs. Basically, if you have a large dark object on one side of your composition, then you should have a large dark object on the opposite side of your composition. Once again, try to do this without making it symmetrical. You want to achieve balanced asymmetry.

Test it! Yes, that’s what I said, TEST IT! As we’ve already established that design is a discipline of accomplishing a specific goal (the design’s function) – we can certainly test whether or not the design works! This can be done as simply as walking around with a print of your design and asking people’s opinions. Or it can be done very scientifically with case studies and double-blind testing. How much time and energy you have available to test a composition may depend on your budget. But you may be surprised at how much information you can get by just watching a few individuals interacting with your design. This is particularly true when dealing with design ergonomics. What are the results? Does your ad get people to the mall? Can people easily navigate through your website design? Can people figure out how to work your stereo design? Put some real warm blooded people in front of your design and ask them to interact with it.

“Gosh Bill, this is fairly extensive.” You may be thinking to yourself: “Seriously? Studying the target market? Studying the history? Double-blind testing?” Your project may not have that type of budget. Or perhaps you simply don’t have the time. Well, I understand your problem. And what I’ve described here is the most ideal of design scenarios. In truth, most of this stuff I just do in my head. If the budget is extremely tight (which it often is) and I have limited time, the design process looks something like this:

Me “carefully reading the project brief” is actually me just having a short conversation with the client. “Understanding who the target market is” is just me having a basic understanding of my client and the rest is a bunch of stereotypical assumptions about his/her demographic. “Studying the history of my client’s design” is usually me just looking at their current website or marketing materials. My “sketches”, well, those rarely make it onto paper. I do them in my head. Then I jump right into slapping all my design elements together. And I don’t often get the chance to measure out the Golden Ratio. I know not to center my focal point, and I just move pieces around until they look good. Once again, I’m making some assumptions and using my design intuition. Testing – well, that’s usually me just showing the client proofs. If I like it and they like it – we assume its close enough for rock ‘n’ roll.

So, I hate to demystify the design process by simply saying “I do it in my head.” But it just depends on the situation you’re dealing with. Most clients have tight deadlines and limited budgets. If they see “3 hours for research” on their bill, you’ll probably get yelled at. It’s a constant challenge to teach our clients about good design practices and why they should spend a few extra bucks to let us do our job properly. But we try.

Well, that’s it folks. I hope this last lesson has been helpful and not too ambiguous. And generally, I hope you have enjoyed this 7 post series. There is obviously no substitute for PRACTICE PRACTICE PRACTICE.

If you missed the rest of the series, here they are:
Become a Master Designer: Part 1: Limit your Fonts
Become a Master Designer: Part 2: Limit your Colors
Become a Master Designer: Part 3: Contrast, Contrast, Contrast
Become a Master Designer: Part 4: Spacing is your Friend
Become a Master Designer: Part 5: Depth
Become A master Designer: Part 6: Motion

The post Rule Seven: Composition: putting it all together. appeared first on GoMediaZine.