Typography – Go Media™ · Creativity at work! http://gomedia.com Cleveland Graphic Design, Website Design & Development, Thought Leadership & Inspiration Thu, 25 May 2017 13:43:48 +0000 en-US hourly 1 PS Tutorial: Create a text portrait poster based on your favorite book (Free mockup included) http://gomedia.com/zine/tutorials/ps-tutorial-create-a-text-portrait-poster-based-on-your-favorite-book-free-mockup-included/ http://gomedia.com/zine/tutorials/ps-tutorial-create-a-text-portrait-poster-based-on-your-favorite-book-free-mockup-included/#comments Tue, 29 Nov 2016 14:15:14 +0000 http://gomedia.com/?p=63327 Let’s Create a Text Portrait Poster! In today’s tutorial, we are going to be creating a text photo poster created by combining the image of our choice with related text. I’ll create mine based on my favorite book of all time, The… Continue Reading »

The post PS Tutorial: Create a text portrait poster based on your favorite book (Free mockup included) appeared first on Go Media™ · Creativity at work!.

]]>
Let’s Create a Text Portrait Poster!

In today’s tutorial, we are going to be creating a text photo poster created by combining the image of our choice with related text. I’ll create mine based on my favorite book of all time, The Catcher in the Rye. Which book will you choose?

You will need:

STEP ONE: Open your image in Photoshop. Duplicate your photo layer so that you have two identical layers.

1

STEP TWO: Using the top layer, make a selection in order to cut the photo out from its background. I used the pen tool, but you can choose the implement of your choice. Once you have finished cutting your subject from the background like you see below, choose your PATH tab, right click on “Work Path,” then choose “Make a Selection.” You’ll see your subject selected.

step-one

Next, you’ll want to apply a layer mask to your photo.

That's me!

That’s me!

If you don’t know how to do that, find this little icon below the two layers you have created. Make sure your top layer is selected, then click on it. You know you’ve done it when you see a black and while silhouette of your image to the right of it. This is your layer mask.

Now, select your layer mask, then click CTRL + I. You’ll see your background disappear. Well done! Let’s label this layer Image 2.

2

STEP THREE: I decided to enlarge my photo, so that I’d have more surface area for my text to cover later on. If you’d like to do this, make sure both layers are selected, CTRL + T and increase the size to your liking.

3

STEP FOUR: It’s time to add our text! Add a new layer above your existing two layers. Next, add a rectangular selection like you see below. This is where your text will end up, so feel free to choose how large or small an area you’d like the text to end up in.

4

Go ahead and layout your text in white, so that you can clearly see it in all its glory. When you’re finished, you can change it over to black.

5

STEP FIVE: Next, select your text and place a guideline to distinguish the text area versus the plain image space.

6

Oh, while you’re at it, slide your text layer beneath your image 2 layer. Now, select your image layer. Use the rectangular marquee tool to select the plain image space, ie. that which isn’t covered in text.7

STEP SIX: Copy, paste this space into its own layer. (CTRL + C, CTRL + V) You’ll see it show up as below.

8

STEP SEVEN: Staying on this same layer, let’s use the rectangular marquee to select the opposite side. Choose your paint bucket tool and making sure your foreground color is #000000, fill this side with black.

9

STEP EIGHT: Let’s highlight our Image 2 and text layers. Press SHIFT and ALT at the same time, until you get an arrow and symbol indicating it’s time to clip the layers together. Right click to accept.

12

STEP NINE: Play around with your final product so that it’s to your liking!

13

I headed down to my layer 1 and took the opacity down to 77%, but you do you.

15

STEP TEN: Save it out and File > Place it into the free mockup we’ve provided you with today. Then, tweet it out or Instagram. We wanna see! 

final-with-poster

The post PS Tutorial: Create a text portrait poster based on your favorite book (Free mockup included) appeared first on Go Media™ · Creativity at work!.

]]>
http://gomedia.com/zine/tutorials/ps-tutorial-create-a-text-portrait-poster-based-on-your-favorite-book-free-mockup-included/feed/ 1
How to Create Your Own Handwritten Font (in 30 minutes or less) http://gomedia.com/zine/tutorials/how-to-create-a-handwritten-font/ Thu, 20 Oct 2016 15:01:15 +0000 http://gomedia.com/?p=63000 How to Create a Handwritten Font: If you’ve ever been too intimidated to make a font, please stand up! Well today, we’re going to show you a super quick and easy way to create your own handwritten version. (Sounds too… Continue Reading »

The post How to Create Your Own Handwritten Font (in 30 minutes or less) appeared first on Go Media™ · Creativity at work!.

]]>
How to Create a Handwritten Font:

If you’ve ever been too intimidated to make a font, please stand up!

Well today, we’re going to show you a super quick and easy way to create your own handwritten version. (Sounds too good to be true, right?)

Supplies/Needs:

  • Trusty iPad
  • iFontMaker App ($7.99 on iTunes)
  • About 30 minutes
  • Stylus

Step One: Download the iFontMaker App and instantly start creating your own font, based off of a host of popular pre-existing fonts. Don’t worry about perfection – the app smooths out bumpy lines for you. Use the editing function to adjust your strokes with the bezier handles. Create the Latin Alphabet, as well as numbers, symbols and a host of other scripts.

Untitled-2

Step Two: When finished, upload to “Configure and Build Font.” You’re done! iFontMaker will send you a link to follow. Here, you’ll name your font, download it and choose whether or not to make it available to their audience.

Here’s how mine turned out:

How to Make Your Own Handwritten Font

Want to download my font? Please do so here or here >> SakaiHandwritten

Have fun!

How to Create a Handwritten Font How to Create a Handwritten Font

The post How to Create Your Own Handwritten Font (in 30 minutes or less) appeared first on Go Media™ · Creativity at work!.

]]>
Presidential Logo Design 2016: A Breakdown, Part 2 http://gomedia.com/zine/tutorials/typography-tutorials/logo-design-2016/ Tue, 01 Mar 2016 15:56:38 +0000 http://gomedia.com/?p=59722 Presidential Logo Design 2016 Logo design must be simple, distinct and memorable.That’s as true for presidential candidates as it is your company. We asked three top logo designers ahead of Super Tuesday: Which candidates came out ahead in the branding race? In… Continue Reading »

The post Presidential Logo Design 2016: A Breakdown, Part 2 appeared first on Go Media™ · Creativity at work!.

]]>
Presidential Logo Design 2016

Logo design must be simple, distinct and memorable.That’s as true for presidential candidates as it is your company.

We asked three top logo designers ahead of Super Tuesday: Which candidates came out ahead in the branding race?

In Part 1 of our, “Presidential Logo Design 2016” series, we touched on typography and the overall good and bad elements of each candidates’ logo design. Here in Part 2, experienced designers examine aspects of color, symbolism and originality.

Weighing in:

  • Antonio Garcia, Co-Founder and Creative Director at Good Night TV, amgarcia.com
  • Christina Sharp, Designer and Co-Founder of Cinder Design Co., cinderdesign.co
  • Wilson Revehl, Co-Founder, Vice President and CTO, Go Media, gomedia.com

How much can a presidential candidate realistically communicate in a logo design? As a designer, what kind of elements do you think are important to make those points?

  • Garcia: A presidential candidate’s logo is no different than any other brand logo. The logo is not the entire identity all by itself. It’s simply an iconic representation of a much broader, holistic communication system. It’s shorthand. It’s the brand at a glance. The essence of the candidate. Most of these examples are logotypes not really logo marks. But all the same attributes of a good mark should apply here: Does it scale well? Can it be applied across print, digital, environmental? Is it just as strong in black & white as it is in color? Is it memorable? Does it stand alone without context? Would you be proud to wear it, put it on your bumper, make it your avatar?
  • Sharp:  A presidential candidate needs to have a mark that is easy to understand while being memorable and leaving a lasting impression. It should stand out and have a clear message. It’s important for there to be an identity system, not just a logo, that carries that the memorable element throughout all platforms it will be seen on.
  • Revehl: If a picture says a thousand words, we should not underestimate the word count of well-done logo design. I suppose some ground-rules might be, a presidential candidate needs a high-impact typeface to convey leadership, strength and progress. If “TRUMP” was written in Comic Sans, would he still be king of the ring? I feel strongly about the influence of branding. These individuals have an opportunity to say a lot with their choice of typeface, color, demarcation and symbolism. They could also undermine their goals with the wrong design choices.
Super Tuesday, Super Logo Design Breakdown, Part 2

On the issue of color, which candidates do you feel used it effectively, and why? 

  • Sharp: Jeb stands out to me because the red is bright and makes it distinct that he’s conservative. A lot of identities use very dark blue or the colors are too muted or neutral, so they lose confidence and don’t stand out. Bernie’s colors are friendly and his identity is mostly blue, which supports that he’s a Democrat. Clinton – I’m not a fan of the blue and red in Hillary’s logo, but I’ve seen it used with a light blue-and-white on campaign banners. When it’s used that way, it’s more successful than her standard colors. The arrow being red seems like the wrong choice being that she’s a Democratic candidate; blue would have made more sense.
Super Tuesday, Super Logo Design Breakdown, Part 2
  • Garcia: I’d love to see someone take risk with color, but everyone seems to default to red, white and blue. Thankfully,  Wikipedia offers 58 varieties of red and 65 varieties of blue, so there are plenty of shades to explore. To that point, Ben Carson’s choice of two blues is a step in the right direction.
Super Tuesday, Super Logo Design Breakdown, Part 2
  • Revehl: I mentioned earlier, Bernie Sanders choice of a more subtle blue and red says a lot. You may perceive it as lighthearted, easygoing and optimistic. Contrast that with Donald Trump’s very rich blue and red lockup around the heavy white name, it evokes the opposite emotions. If you’re going for a panicked call-to-arms, you’re headed in his direction. I have to give them both credit, I think they played to their bases perfectly.

What are your thoughts on some of the symbols used – the star in Sanders’ ‘I,’ the arrow in Hillary’s ‘H,’ Cruz’s flame, etc.?

Super Tuesday, Super Logo Design Breakdown, Part 2

  • Revehl: Naturally, being one of the founders of Go Media, and having put a forward-pointing arrow across our mark, I like Hillary’s because I recognize that approach. Being the most viable female presidential candidate in history, she had to go with high-impact typeface to convey strength and progress. Sanders’ star is such a generic symbol it’s pretty easy to glaze over. My eyes are drawn toward his wave. I like that it’s maybe a throw-back to his hippy days. Rubio’s use of the country as an ‘I’ is borderline offensive. Kasich’s K-wave is meh – It evokes no emotion.
4
  • Sharp: Hillary – I’m personally a fan of the arrow in Hillary’s ‘H.” I get the imagery of breaking through barriers and moving forward. That, along with the confident bold H works really well. Sanders – the star in Sanders’ ‘I’ is a lot more successful than the ‘i’ treatment in Rubio, but Sanders’ has much more character in the typography, so the star over the ‘i’ is unnecessary and the weight seems off. Cruz’s flame is conflicting. I understand the idea of “igniting” something, but it’s a shape we see so much that it feels very unoriginal and not very memorable. Kasich – The “K” flag for Kasich I’ve seen equated to bacon, but looking at the logo doesn’t make me hungry. The weight seems off between the K and the lines, but it’s simple, memorable and it’s politics, so it’s obviously a flag.

Do any of these logos win points for originality?

  • Garcia: Sadly, no.
  • Sharp: Not really, most of the logos are similar to things that already exist.
  • Revehl: No.

Many have remarked the Obama campaign logo upped the game as far as branding and the role it played in a presidential race. What do you think was effective about his approach, and do any of the current candidates come close? 

1024px-Obama_logomark.svg
  • Sharp: The Obama logo was so successful because it was strong, different and captivating. It symbolized so much through such a small mark. It was simple, recognizable, and memorable. Hillary’s “H” comes close to the same theme, communicating the campaign theme through very little imagery.
  • Garcia: Scott Thomas’ Designing Obama tells the whole story so well and explores fully what made Obama’s logo so powerful. It was distinctly American without being star-spangled and cliché. The circular design was so easily adapted to special causes and moments in his candidacy and presidency. And there was a dynamic and thoughtful design system that stood behind the logo and powered more than 8 years of design and messaging. None of these marks come close.
  • Revehl: The Obama branding was extremely well-done. It stayed cohesive and it never deviated. It always honored the brand style guide. It was an excellent example of modern typeface that was matched with a mark that could stand on its own. No one this time around really came close to that.

If you had to make a choice based solely on logo design, who would get your vote, and why?

  • Garcia: For the record, I’m a Democrat, but if I voted solely on the logos alone, I’d have to go with Kasich for all the reasons above.
  • Revehl: Bernie would get my nod, with Jeb! taking second. I think it’s because I’m an optimist and always seeking positivity and humor in the world around me. Theirs feel happier.

Who has YOUR logo vote? Offer your feedback in the comments below!  

Contact the Cleveland logo design experts at Go Media by calling 216.939.0000 or contact us online. 

The post Presidential Logo Design 2016: A Breakdown, Part 2 appeared first on Go Media™ · Creativity at work!.

]]>
Presidential Logo Design 2016: A Breakdown http://gomedia.com/zine/tutorials/typography-tutorials/presidential-logo-design-2016/ Mon, 29 Feb 2016 14:44:16 +0000 http://gomedia.com/?p=59717 Presidential Logo Design 2016 The White House won’t be won on logo design alone. But if it were, would the current line-up look any different? Logo design might not be foremost on voters’ minds as they head to voting booths… Continue Reading »

The post Presidential Logo Design 2016: A Breakdown appeared first on Go Media™ · Creativity at work!.

]]>
Presidential Logo Design 2016

The White House won’t be won on logo design alone. But if it were, would the current line-up look any different?

Logo design might not be foremost on voters’ minds as they head to voting booths these next 9 months, but design industry insiders know these ever-present marks at stump speeches, rallies and fundraisers are intended to inspire election day results.

In the first of this two-part blog series, Go Media asked three top graphic designers to cast their ballots for the best – and worst – in presidential logo design.

Weighing in:

  • Antonio Garcia, Co-Founder and Creative Director at Good Night TV, amgarcia.com
  • Christina Sharp, Designer and Co-Founder of Cinder Design Co., cinderdesign.co
  • Wilson Revehl, Co-Founder, Vice President and CTO, Go Media, gomedia.com

Which logos stand out in a good way, and why?

Presidential Logo Design 2016

Sharp: Clinton. It’s completely different from the other logos. When it’s seen as a system, it’s smart and memorable. It stands out on Twitter, which is very important and it’s extremely versatile. It can work with images and colors and still retain its shape and identity.

Presidential Logo Design 2016

Garcia: Kasich. Square. All-caps. Swiss. Sans-serif typeface with a modified “K.” A nice surprise from a Midwestern Republican and former investment banker?

Jeb

Revehl: The very minimal Jeb! is succinct. The typeface modern and approachable, the exclamation fun. Using just Jeb! was a clever logo design strategy. It served to distance his name from baggage associated with his family, while also suggesting the name, “Jeb” was unique enough to elicit recognition on its own.

Which do you think do a disservice to the candidate, and why? 

EP-150629545 Marco_Rubio_2016_Campaign_logo chris-christie-2016-campaign-logo

Garcia: More than the logo designs themselves, I think the greatest disservice comes form the ones with slogans. Jinogoist fails like Trump‘s and Rubio‘s. The meaningless pronoun in Christie‘s. Carson’s awkward string of verbs. A good candidate slogan should be chant-able in one’s audience, like, “YES WE CAN!” or, “SI SE PUEDE!”Carson_America_logo_wtag-e1439842799859-1024x310TedCruz2016

Revehl: The Ben Carson/Carson America mix feels disjointed and bland. Not a lot of personality emerging from those. It may be due to my background in printing, but the Ted Cruz logo design mark looks to me almost identical to Soy Inks used by printers everywhere. It’s a cross between that and Tinder, a popular singles hook-up app.

Sharp: Trump – His identity is aggressive and intimidating. There’s nothing memorable about it. Christie – It’s too simple. Nothing about the typography stands out. Carson – The first version didn’t do anything for the candidate, and although the second version was better, it still doesn’t stand out against the other candidates. The dark black background does a disservice, and the colors seem scattered and schizophrenic. Rubio – America is a big country! The idea to shrink it down doesn’t seem very thought-out. Cruz – The logo is confusing and I don’t fully understand what it represents. Is it a tear drop? A burning flag? I get the “igniting” emotion the logo is trying to evoke, but there had to have been a better way to show it. Also, the cropping of the star is awkward.

What are your brief thoughts on the typography of each design? 

Clinton. 

  • Sharp: Bold, simple, memorable, versatile, functional. A custom typeface that is friendly and approachable.
  • Garcia: Not much typography here. The square “H” with red arrow says so little about her and looks more like a hospital way-finding than anything else.
  • Revehl: I like the H alone, but the full treatment feels off-balance. The H became monolithic once they squeezed Hillary for America through the center of it.
Bernie_Sanders_2016_logo

Sanders.

  • Sharp: Friendly and has character. The slab serif is modern, but still winks toward tradition. My favorite part is the treatment of the ‘r.” I almost wish Sanders went with just a wordmark without the star and the “toothpaste” swashes.
  • Garcia: A friendly slab serif with the expected star dotting the ‘i.’ It says, “I don’t care too much about appearances or making a grand statement. I appreciate the non-traditional blue.
  • Revehl: Pleasant. The lighter blue and red give it an airy, almost whimsical tone.
Marco_Rubio_2016_Campaign_logo

Rubio. 

  • Sharp: Too sterile. The USA/dot on the “i” is forced and looks like a whale when it’s small. He’s the only candidate to go all lowercase, perhaps to bring attention to the younger generation.
  • Garcia: Lowercase Avant Garde looks like a kids’ clothing line. It also reduces the entire country (completely ignoring Hawaii and Alaska) to a mere dot on the ‘i.’
  • Revehl: By shrinking down a map of the contiguous United States to dot his “i,” Rubio’s logo design sends the message he’s more important the whole country. The lowercase is youthful. Don’t get me started on his slogan.
TedCruz2016

Cruz. 

  • Sharp: Traditional and conservative. The typography is clean and is definitely geared toward his supporters.
  • Garcia: The internet abounds with plenty of criticism for Cruz’s star-spangled liberty flame, but it’s also a direct rip-off the American Soybean Association’s official Soy Ink Seal.
  • Revehl: Typeface alone, it’s fairly fashion-forward. 2016 above Cruz and down to the right of the flaming water feels asymmetrical, almost a superscript/subscript depending on which piece you’re observing.
EP-150629545

Trump.

  • Sharp: Aggressive and unoriginal.
  • Garcia: Heavy-extended Gothic does not say, “America” or, “Great” to me. It says obtuse and boorish. The blood red on dark navy is nearly impossible to see.
  • Revehl: Very heavy, high-impact typeface, I think it is the same one used by HUMMER. The letter-spacing further exaggerates the size. It feels militaristic, reminiscent of World War propaganda. Almost authoritarian.
Jeb

Jeb! Bush. 

  • Sharp: It was a smart choice for Jeb Bush not to use his last name in the logo design, but the exclamation point seems forced and unnecessary.
  • Garcia: Jeb’s exclamation point makes no sense and its scale is ridiculous.
  • Revehl: I have to give props for a playful and inviting mark. I can tell they were trying to balance the “J”, but need to knock points off for the exclamation point. It feels disproportionate.
Carson_America_logo_wtag-e1439842799859-1024x310

Carson. 

  • Sharp: The phrase itself, “Carson America,” doesn’t make sense, and I don’t understand the decision to alter the “A.” His second identity was a huge improvement, much cleaner and more modern.
  • Garcia: There was way too much going on in the original logo: gradient metallic, the “A” with the stars and strips and mini eagle in the counter… The alternate/ newer version is much better (and maybe the best typography of the lot) but the slogan is a total distraction. Moving from thin to medium to bold,  the verbs sounds themselves like a health food promise.
  • Revehl: I’ll focus solely on the big bumper sticker-looking logo design. Although they used the same font throughout, the weight and letter-spacing shifts feel unintentionally esoteric. The color sequence contributes almost nothing to message delivery.
chris-christie-2016-campaign-logo

Christie.

  • Sharp: Clean and simple, but so simple that it’s boring.
  • Garcia: Twentieth-Century Extra Bold. Just like him.
  • Revehl: Unremarkable.
kasich

Kasich. 

  • Sharp: The typography feels dated and generic.
  • Garcia: Tightly-kerned, all-caps, Swiss sans serif. Clean and balanced.
  • Revehl: It’s a boring business use of something like Helvetica and the mark of his logo design adds nothing. It might as well say, “Kasich Transportation” or “Kasich Paper.”

To read the rest of these top designers’ insightful take on the presidential logo design, check out Part 2 of this blog series.

Contact the Cleveland logo design experts at Go Media by calling 216.939.0000 or contact us online. 

The post Presidential Logo Design 2016: A Breakdown appeared first on Go Media™ · Creativity at work!.

]]>
Hanging Punctuation in InDesign and Illustrator | Design Tip of the Week http://gomedia.com/zine/tutorials/hanging-punctuation-in-indesign-and-illustrator-design-tip-of-the-week/ Mon, 13 Jul 2015 13:00:09 +0000 http://gomedia.com/?p=56551 Hanging Punctuation in InDesign and Illustrator This week, we’re getting into a nitty gritty aspect of type: hanging punctuation. For those who do not know, hanging punctuation is a method of typesetting punctuation marks (and bullet points) to preserve the ‘flow’ of a body… Continue Reading »

The post Hanging Punctuation in InDesign and Illustrator | Design Tip of the Week appeared first on Go Media™ · Creativity at work!.

]]>
Hanging Punctuation in InDesign and Illustrator

This week, we’re getting into a nitty gritty aspect of type: hanging punctuation. For those who do not know, hanging punctuation is a method of typesetting punctuation marks (and bullet points) to preserve the ‘flow’ of a body of text and avoid breaking the margin of alignment. Let me show you what I’m talking about. While there are options that include hanging punctuation in InDesign AND Illustrator, I’ll show an example in InDesign. (Don’t worry, I’ll touch upon Illustrator towards the end.)

DTOTW_7-13-15_Article_Image_1

As you can see, the quotation marks are tucked inside next to the “M”, throwing off alignment.

(Side Note: I decided to use pirate ipsum for my copy. I mean, why the hell would you use boring lorem ipsum when things like pirate ipsum exist?)

DTOTW_7-13-15_Article_Image_2

You’re going to want to go to Type>Story.

DTOTW_7-13-15_Article_Image_3

Check the box next to “Optical Margin Alignment” and change the value below until you’re happy with the alignment.

DTOTW_7-13-15_Article_Image_4

There we are. Donezos.

For Illustrator, it’s actually one option, which is Optical Margin Alignment – right under “Type” in the top menu. When I tried this out in Illustrator CC, the results were pretty good. However, I wasn’t satisfied with how Illustrator CS5 handled the alignment. If you think it needs some tweaking, I suggest making those adjustments using Tabs (Window>Type>Tabs.)

Thanks for stopping by! Hope this was helpful!

7 - 13 - 15

The post Hanging Punctuation in InDesign and Illustrator | Design Tip of the Week appeared first on Go Media™ · Creativity at work!.

]]>
Typography Tutorial: The Soul in the Machine – Adding Glitch Techniques to Your Work http://gomedia.com/zine/tutorials/soul-machine-adding-glitch-techniques-work/ Fri, 05 Sep 2014 13:08:32 +0000 http://gomedia.com/?p=49056 What is Glitch Art? In this tutorial, my aim is to introduce some techniques that you might not be familiar with that can achieve a unique glitch aesthetic in your designs. I like the idea of using some aspects of… Continue Reading »

The post Typography Tutorial: The Soul in the Machine – Adding Glitch Techniques to Your Work appeared first on Go Media™ · Creativity at work!.

]]>
What is Glitch Art?

In this tutorial, my aim is to introduce some techniques that you might not be familiar with that can achieve a unique glitch aesthetic in your designs. I like the idea of using some aspects of glitch art to incorporate into graphic design and give it a digital feel whilst still keeping the main focus intact. If you are unfamiliar with glitch art, then I recommend watching this short video by PBS called The Art of Glitch.

This tutorial will be broken up into three sections. In the first section I will explain how I have created a glitch font using the free online font-building tool Fontstruct. The second section will explore some experimental approaches that can be used to create glitches within your imagery. The third section will be focusing on the happy accidents that were generated through the glitches and how to bring everything together in Photoshop.

1: Creating the Font

I decided that I wanted to create a custom font for this project because I wanted to experiment with a series of posters, each of these with different phrases on them. If you don’t have the time to create a new font from scratch then manipulating an existing font in Photoshop can be just as effective. Alternatively you can download my font for free.

I created my font using the free font-building tool Fonstruct. Creating a similar font doesn’t require expert knowledge in typography, you will just need a bit of patience and an eye for what looks good and what doesn’t.

Firstly, I recommend finding an existing font that you want your font to look similar to and keep it in front of you for reference at all times. Any legible sans serif font would work great.

Inside the Fontstruct editor, you will be given many different shapes to work with which can be used to give your font a digital/pixelated feel. Experiment with the different shapes in your letters. You don’t need to be overly careful, but make sure that the letters still remain legible at smaller pt sizes. Try to keep some consistency throughout. If you find a cool pattern with the shapes on one letter, see what other letters you can replicate the same pattern in.

screenshot1
Continue to play around with the different shapes. Although it is supposed to look rough, try to keep the cap heights, median, descenders etc. similar to the font you have chosen to use as a guide. When you are happy with your font, click save and download your font.

font

2: Break the JPEG

In this section of the tutorial I will go through 2 simple methods on how I go about glitching my imagery. I will be using one of my own photographs which I took in my home town of Birmingham, England during the Christmas period.

Screen Shot 2014-08-30 at 14.03.22

Firstly, set up a new document in Photoshop at the size you want your artwork to appear. Insert the image that you want to use, and then save it out in JPEG format in a different name. This will be the image you will manipulate to produce a glitched effect.

Locate that file and change the extension from .jpg to .txt. Then, open it up in a basic text editor like TextEdit. Begin to cut chunks of text out and paste it into different parts of the document. If you are working with a large image, you might need to use very large chunks of text. Keep within the middle and three quarters of the way down the document to avoid breaking any of the necessary the code.

Screen Shot 2014-08-30 at 14.11.22

Every image will react differently, so keep experimenting with cutting different parts out and moving sections around until you get something that looks cool. Create a few different ones and open them up in Photoshop. Sometimes Photoshop will throw up an error because it thinks the image has corrupted. If this happens, all you need to do is save it again from a photo viewer like Preview on Mac. You should then be able to open it up in Photoshop.

Screen Shot 2014-08-30 at 14.22.11

The second method is even simpler. There is an online glitch generator created by multimedia designer Georg Fischer where you can create multiple glitch images just with a few clicks. Go to http://snorpey.github.io/jpg-glitch/ and upload your image. Play around with the settings until you have something you like and then download your image. This is obviously a much quicker way of doing it, but I recommend using both methods so that you have a more diverse range of imagery to work with.

glitch_me-glitched-a16-s41-i49-q97

3: Bring It Together In Photoshop

Go back to the document that you set up in Photoshop with the original image inside as a background. You can now start cutting sections out from your glitched images. This will take a lot of trial and error. Try to use the more interesting glitches with the colours that stand out. Place them on top of your original background image roughly in the same place. Cut around the main focus of your design so that the glitched elements aren’t getting in the way too much.

Screen Shot 2014-08-30 at 14.33.30

Play around with layer styles. I found that using Screen worked particularly well in some places. Since some of the glitched images can look low quality, your design can end up looking a bit too blurry, so it is always good to use the Unsharp Mask filter to sharpen things up a bit.

For the text boxes, I decided to create a diagonal line pattern to really enforce the digital aesthetic of the design. To do this, I have created a new document that is 3 x 3 pixels and have chosen a white background colour. Zoom as far into your document as you can, then create 3 pixels forming a diagonal line. Click Edit > Define Pattern and name it.

Screen Shot 2014-08-30 at 15.39.16

Now with the Type tool, type in whatever text you want to appear in your design and position it wherever looks best. Draw out some basic rectangles behind it so that the text is legible but not covering up too much of the imagery.

On the layer that includes your text box, click on the Layer Styles icon and select Pattern Overlay. There you can locate your custom diagonal pattern. Make sure it is scaled so that you can see it clearly enough. I set the transparency to around 20%, but do whatever works best for you.

Screen Shot 2014-08-30 at 15.47.44

Duplicate all of your imagery layers just in case you want to keep the original layers. Then, merge the duplicated layers so that they become one layer. Use Hue and Saturation to make the colours more vivid so that the imagery stands out more.

Duplicate the merged layer again and apply your diagonal line pattern in the Patterns Overlay. Again you want the transparency to be around 20%. Once that is applied, use the Eraser tool to erase the middle so that you have the nice diagonal line pattern subtly appearing in from the edges.

Screen Shot 2014-08-30 at 15.55.48

Merging letters from your font into the background can also be very effective. Maybe you can type in some hidden messages that the viewer won’t notice right away. Just type out your text, transform it to wherever looks best and add some layer styles, but make sure it doesn’t distract from the main text.

Screen Shot 2014-08-30 at 16.18.34

Wrapping Things Up

I hope you have enjoyed exploring glitch aesthetics through typography and imagery and that you have discovered something new. Don’t worry if something hasn’t worked out the way you had hoped. The purpose of this tutorial is to encourage experimentation in your work. If you have come across something particularly cool with these techniques, then focus on that and bring the most out of it.

mock-up

The post Typography Tutorial: The Soul in the Machine – Adding Glitch Techniques to Your Work appeared first on Go Media™ · Creativity at work!.

]]>
Tutorial: Exploring the World’s Original Take on the Art of Printing http://gomedia.com/zine/tutorials/tutorial-exploring-the-worlds-original-take-on-the-art-of-printing-2/ http://gomedia.com/zine/tutorials/tutorial-exploring-the-worlds-original-take-on-the-art-of-printing-2/#comments Thu, 22 Aug 2013 13:00:54 +0000 http://gomedia.com/?p=31528 With a foundation laid by VCU’s School of the Arts and with the experience I’ve gained from Go Media, I am excited to present a tutorial on one of the oldest art forms in history: block printing.  The procedure for… Continue Reading »

The post Tutorial: Exploring the World’s Original Take on the Art of Printing appeared first on Go Media™ · Creativity at work!.

]]>
With a foundation laid by VCU’s School of the Arts and with the experience I’ve gained from Go Media, I am excited to present a tutorial on one of the oldest art forms in history: block printing.  The procedure for creating printed art has been streamlined and reinvented for over a thousand years. Technological advancements of the 20th century especially have revolutionized the process to the point where few people are willing to engage with their work in such an involved way as with block printing. With this tutorial, I’d like to help people reacquaint themselves with the organic pleasures of custom, handmade artwork.

This traditional printing technique is extremely versatile. It can be used for anything from business cards, to posters, to T-shirts, to swing tags. Whether you work for a small clothing company or whether you’re a freelance designer, being familiar with block printing is a great way to refine your style.

Inspired by Go Media’s roots in illustration and design I wanted to develop a tutorial that highlighted small businesses, specifically in the clothing industry. The goal was to give my work a vintage flair using distinctive elements of illustration and typography. So, without further adieu lets get started:

Step 1: Concept

It should go without saying that you must have an idea before beginning any work. Because I am focusing on swing tags, which are used primarily for labeling clothing, I’ve come up with a fictional company that specializes in hand-stretched, quality leather shoes for both men and women. This company is called Sole Mate Co.

Step 2: Sketches

I have created two illustrations for the purposes of this project. I wanted the front of the swing tag to feature the name of the company with the back containing a custom image of a shoe, one that could potentially be used in other promotional materials.  The size of the design is critical – since mine will be fairly intricate, it needs to be on the larger side.

Thumbnails_zine_tutorial_ks_0018_Tutorial_03-03

Step 3: Materials

Once you’ve finalized your sketches, you will need to gather the necessary materials. Most of these items can be found at any craft store or hardware store.

–          Linoleum block (I’m using a 2 ¾ by 4 inch block)

–          Chisel (tip sizes: 1, 2, 5 or equivalent)

–          Brayer/roller

–          Plastic pan or flat plastic surface (styrofoam also works)

–          Water-soluble ink

–          Cardstock paper (which will become the swing tag)

–          Hole puncher/X-Acto knife

–          Tracing paper

–          Bone folder or scissors

–          Yarn/string

Thumbnails_zine_tutorial_ks_0020_Tutorial_01-01Thumbnails_zine_tutorial_ks_0019_Tutorial_02-02

Speedball makes a wonderful kit for block printing that includes all the essentials listed above.  Unit price – $20.00

Step 4: Transferring the Design

Using tracing paper, draw over your final design, making sure to correct any lines that may have been skewed during your sketching process. Once you’ve finished tracing, take the paper and place it IN REVERSE on the linoleum block. Transfer the drawing by firmly holding the design in place and rubbing the back of the paper with either a bone folder or the scissors handle. (You can also use your hand). The transfer may not come out perfectly, so be sure to draw over any lines that don’t come out clearly.

Thumbnails_zine_tutorial_ks_0017_Tutorial_04-04Thumbnails_zine_tutorial_ks_0016_Tutorial_05-05

Step 5: Carving

Use the chisel to carve all the negative space away—basically everything you don’t want to be printed. This should be a methodical process. An easy way to make sure you don’t carve away the wrong section is to use a marker to indicate which areas should be cut off.  TAKE YOUR TIME – taking your time during this stage is essential. Put on your headphones and just focus on what exactly you are cutting away.

Also, be careful! Always carve away from your hand. Remember that larger chisel tips should be used for larger areas and smaller tips should be used for detailing. The amount of pressure you should apply depends on what blocks you use. Some are very stiff, which requires more pressure. I’m using 4 soft linoleum blocks. They’re easy to cut and put less strain on the hand.

Thumbnails_zine_tutorial_ks_0015_Tutorial_06-06Thumbnails_zine_tutorial_ks_0014_Tutorial_07-07

Step 6: Prepare Your Surface

I’m printing on cardstock which has been cut, dyed (with black tea), bent, and stressed. In order to get a more vintage feel, you can sand down the edges with either an automatic sander or just a regular piece of sandpaper.

Thumbnails_zine_tutorial_ks_0013_Tutorial_08-08Thumbnails_zine_tutorial_ks_0012_Tutorial_09-09Thumbnails_zine_tutorial_ks_0028_paper

Step 7: Ink

Prepare your surface for inking. Block printing at this size does not require a ton of ink, I’m applying just enough ink to coat the brayer.  Next, take your brayer/roller and roll the ink using a horizontal and vertical motion. Get a thick amount of ink on the entire surface of the roller. Finally, roll the block. Because this is a relief print, only the protruding surfaces will have ink on them.

Thumbnails_zine_tutorial_ks_0011_Tutorial_10-10Thumbnails_zine_tutorial_ks_0010_Tutorial_11-11Thumbnails_zine_tutorial_ks_0009_Tutorial_12-12

Step 8: Print!

Apply the block to the surface of the paper. The first print will have an excess amount of ink on it; don’t worry, every time you print, the ink will show up less and less. Some prints will be more even than others. Re-ink your brayer as desired.

Thumbnails_zine_tutorial_ks_0008_Tutorial_13-13Thumbnails_zine_tutorial_ks_0001_Tutorial13Thumbnails_zine_tutorial_ks_0006_Tutorial_15-15

Conclusion:

Congratulations! You have just made a custom block print. Punch small holes and attach string for final presentation. This design can be used as many times as necessary for a wide variety of things. I hope this tutorial was informative and enjoyable. Now go attach the finished tag to a lovely pair of shoes or a shirt or whatever it is you want to show off.

To see more of Kyle Saxton’s work check out his online portfolio.

Article by Alex Rendon and Kyle Saxton.

Thumbnails_zine_tutorial_ks_0004_Tutorial_17-17Thumbnails_zine_tutorial_ks_0003_Tutorial_18-18Thumbnails_zine_tutorial_ks_0002_Tutorial_19-19Thumbnails_zine_tutorial_ks_0007_Tutorial_14-14

What you can do with your design:

1) Patterns

Thumbnails_zine_tutorial_ks_0005_Tutorial_16-16Thumbnails_zine_tutorial_ks_0000_Tutorial14

2) Branding

Thumbnails_zine_tutorial_ks_0021_stage2Thumbnails_zine_tutorial_ks_0023_stage 4Thumbnails_zine_tutorial_ks_0024_stage 3

3) Vintage Effects

What you can do 01

4) Identity

ipad FNL sole mate What you can do 02

Thank you!

Subscribe to the GoMediaZine newsletter

The post Tutorial: Exploring the World’s Original Take on the Art of Printing appeared first on Go Media™ · Creativity at work!.

]]>
http://gomedia.com/zine/tutorials/tutorial-exploring-the-worlds-original-take-on-the-art-of-printing-2/feed/ 6
Create a Rockabilly Poster With Vector Set 22 – Part II http://gomedia.com/zine/tutorials/create-a-rockabilly-poster-with-vector-set-22-part-ii/ http://gomedia.com/zine/tutorials/create-a-rockabilly-poster-with-vector-set-22-part-ii/#comments Mon, 05 Aug 2013 13:00:52 +0000 http://gomedia.com/?p=27651 A bit of background information Hello all! Simon, the Arsenal manager here. Today, I finally have time to release the 2nd part of the vector set 22 inspired poster tutorial Steve Knerem poster a while back. <Fair warning> the post… Continue Reading »

The post Create a Rockabilly Poster With Vector Set 22 – Part II appeared first on Go Media™ · Creativity at work!.

]]>
A bit of background information

Hello all! Simon, the Arsenal manager here. Today, I finally have time to release the 2nd part of the vector set 22 inspired poster tutorial Steve Knerem poster a while back.

<Fair warning> the post is fairly long (6000+ words), but I deemed it necessary to take the time to meticulously explain the process I went through to re-design this poster. For instance, I took the time to detail my research and mood-board steps, which are often overlooked in tutorials. I also detailed as much as possible my “trial and error” style approach to choosing typefaces, and to constructing typeface arrangements. If you are a seasoned veteran, these extra steps will definitely seem boring, if not frustrating. Just skip them!</fair warning>

Create an Iconic Rockabilly Poster With Vector Set 22 – Poster preview

For those of you that haven’t been following, we released our 22nd vector set a few weeks ago. Steve Knerem, the artist behind the set’s content, decided to create a rockabilly themed poster to demonstrate the set’s potential. He then proceeded to write a tutorial about it. We said that we would expand a bit on Steve’s tutorial to bring his design to the next level, and to make it a tad more truthful to the rockabilly vibe.

What are we going to do?

First, we’ll be doing some research. There’s plenty to be learned from gig posters of the 1950s and 1960s, in terms of typefaces, composition, color palettes, etc. Our goal will be to identify some design elements and patterns from that era, and to improve Steve’s design based on them with the tools we have available now in the second decade of the XXIst century.

Second, we’ll see how we will recreate the patterns we’re seeing in our research to improve Steve’s original composition, while respecting his original concept. I’m anticipating mostly type work at this stage.

Finally, Steve’s original goal was to work towards a screen printed poster, hence his limited color palette and work primarily in Illustrator. I’m going to show you some of the techniques I use to texture and weather artwork, to make our clean and digital vector art look a tad more analog, and just like if you had pulled the poster out of your parents or grand parents’ attic after all these years. Sounds fun? Then let’s do this!

Research, research, research

Well, the easiest way to search for something these days is to google it. So I went ahead and researched using the following keywords:

Follow the links to see the results I encountered. I was hunting in the first couple links of the web search, as well as in the image search results.

Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research

There are already a few things that jump right to my face just by looking at these:

  • The vibe difference between the 3 styles (rockabilly, 50s, and 60s) is pretty strong
  • The rockabilly posters draw a lot on the Kustom culture
  • The crazy gig posters with a bunch of colors and eerie designs started more in the 60s. This probably comes from psychedelic rock starting to be mainstream,  printing techniques improving, and full color printing becoming cheaper
  • Condensed, bold or extra bold sans-serif are among the most readable typefaces
  • And Steve’s poster is even showing up in the search!

A look up-close

Let’s start with the rockabilly search. I ended up also exploring some of the links the web search turned up. There’s a pinterest board in particular called Rockabilly, Greaser, Pin Up, Posters & Art that was pretty rad. Just look at these:

Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - Rockabilly  Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - Rockabilly

While the Go Johnny go poster is cool, I prefer the Gene Vincent/Eddie Cochran one. This was a rather cheap poster to design and print: I count only 2 colors (black and red), and there’s no custom illustration. The eye gets attracted by the typeface relationships and color variations. One of the ways to add a few graphical elements is to use that star symbol. I see you coming already by saying that there are some other, way cooler looking other pieces on that page. There’s that Coney Island rockabilly festival poster, that Viva Las Vegas poster, and these 2 Social Distortion pieces. Well that’s the whole problem: a lot of the Rockabilly art that we see nowadays is contemporary art with a flair that’s inspired by the culture behind that music, the Kustom culture, etc. And the faithfulness of their emulation of the original design codes of the gig poster artists of the 1950s and 1960s varies greatly. That being said, looking at the typefaces they use, we can still see the affinity for either the hand painted sign type vibe, or the whole Sailor Jerry/tattoo vibe, or the condensed, cheaply printed, sans-serifs I was talking about earlier. Steve’s art matches the Sailor Jerry tattoo vibe pretty well, so that’s definitely a direction we can explore.

Go Media's Arsenal vector set 22 sample - Pinups Go Media's Arsenal vector set 22 sample - Tattoo Go Media's Arsenal vector set 22 sample - Tattoo

A look at the 1950s posters

Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1950s Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1950s Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1950s Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1950s Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1950s Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1950s Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1950s Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1950s

These have a bit more color, and feature performers portrait. The “vintage diner” style of type seems to come from there. Looks at the BB King or T-Bone Walker type treatments. There are frames and not-quite-accurately-square color rectangles used as supports for content blocks, among other little design elements that immediately make us associate these posters with that era (stars, horizontal dividers, etc.). More to keep in mind.

1960s posters

Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1960s  Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1960s  Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1960s  Create a Rockabilly Poster With Vector Set 22 – Part II - Reference research - 1960s  Jimi-hendrix-Miles-Davis-1971-Isle-of-Wight-LP-Promo-Poster-Type-Ad  beatles_tickets_poster

And here are the 60s! Enter the psychedelic scene… There’s also that cut paper look. These are getting away from the style we’re trying to emulate for sure.

Let’s recap

So, it looks like we’re trying to find a happy medium between the boxing style posters of the 1950s and the modern interpretation of the Rockabilly/Kustom/Sailor Jerry approach. We’ll pay a special attention to type, and might modify or add to the borders already put in place by Steve in his original art. Finally, we might give some hierarchy to thew type with some box elements or dividers. And let’s go!

First: the type elements

Here are the type pieces from Steve’s design:

Create an Iconic Rockabilly Poster With Vector Set 22 – Original art detail

The title features a type midway between western and country. That’s the good part. The main issue I have with it are these pre-made grunge scratches on it.

Create an Iconic Rockabilly Poster With Vector Set 22 – Original art detail

The band names features some solid options (The Blue Storm, Hail Hail Hellstorm, maybe Jack is coughing), and some less solid ones (Home Grown Heroes, The Billies, Sound of Thunder, Young Turtles, 1950s Alive).

Create an Iconic Rockabilly Poster With Vector Set 22 – Original art detail

The gig information space is written in that condensed slab serif. I like it, but maybe we can find a more fitting one. And here are type pieces from our references:

Create an Iconic Rockabilly Poster With Vector Set 22 – References details

I think it’s time to start looking at our typeface collection, at the Lost Type Co-op, and at Dafont.com. Working at Go Media as its perks, as they’ve accumulated a solid type library over the years. But since it’s not the case for everybody, let’s see what we can find before digging into the secret vault here.

The Lost Type Co-op

Lost Type has quite a few candidates: Mission Gothic, Dude, Mission Script, Sullivan, Bemio, Arvil Sans, Oil Can, Outage, Aldine Expanded, Duke, Onramp, and Tightrope. The cool thing is that you can get a personal license (and sometimes even a commercial one!) for these typefaces for free. But you should totally give a few $$$, as these are so amazing.

Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options

(Images via Lost Type Co-op and its various contributors – © all rights reserved)

Dafont

Let’s be honest, Dafont is a place listing cool typefaces but also some very lame ones. That’s why I’m very wary of using that site anymore. But maybe just for today we can find some good surprises. Remember, not all of these are free! Most of these, in fact, are free for personal use only. You’ll need to get in touch with the font creator if you want to use them on a commercial basis. The two categories I focused my searches on are western and retro fonts. And I have quite a list there too. Anderson Four Feather Falls, Anti Hero, Laredo Trail, Pointedly Mad, Regulators, Alpenkreuzer, ARB-218 Big & BluntARB-66 Neon JUN-37, Franklin M54HFF Sultan of Swat, NPS Signage 1945, Phat Phreddy, Super Retro M54, and Tattoo Ink.

Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options  Create an Iconic Rockabilly Poster With Vector Set 22 – Typefaces options

(Images via Dafont.com – © all rights reserved)

But aren’t we supposed to design something at some point?

Agreed! But at the same time, all that research process is necessary to make sure that you’re producing relevant concepts. A rockabilly poster wouldn’t look rockabilly with the Matrix typeface on it.

There, it starts

So, now that you have downloaded and installed all the typefaces, that you tracked down the file you created when following the first part of the tutorial, and created a mood board with all your references, let’s do this. I wrote earlier that I only wanted to improve on what Steve did. So the pinup, the car, the guitar, and the microphone are going to stay. They form the core of Steve’s composition, and while they’re not really looking like a vintage multi-act gig poster, I think their impact is undeniable. First step: track down your Ai file from the first tutorial, and save a copy with a name clearly labeling the fact that you’re going to alter your design. For example: if my first file was named gma-vector-set-22-rockabilly-poster-tutorial-c1r1.ai (Go Media’s Arsenal – Vector set 22 rockabilly poster tutorial – Concept 01, revision 01), my new file will be named something like: gma-vector-set-22-rockabilly-poster-tutorial-c1r2.ai. You get the idea.

Create an Iconic Rockabilly Poster With Vector Set 22 – File naming

Now might also be a good time to clean out and to organize these layers, groups, etc. This will make your life so much easier in the long run, I promise.

Create an Iconic Rockabilly Poster With Vector Set 22 – Layer clean up

I mean, check this out: isn’t the sight on the right a bit more pleasant?

Create an Iconic Rockabilly Poster With Vector Set 22 – Layer clean up

Also, since we’re going to move elements around, I can tell that having them properly labelled is super helpful to keep track of them. Also, I’d like to point our something in my newly organized file: I have created 3 layers: art, color palette, and type experimentation. Art could end up getting some sub-layers (which allows to add hierarchy without having to group elements together). Color palette is a layer that just features 5 squares, one of each of the colors we’re using. It’s super useful to quickly switch an element or series of elements to the same color, since even when the layer is locked you can still use the eye dropper on its elements.

Create an Iconic Rockabilly Poster With Vector Set 22 – Color palette layer Type experimentation is obviously where the fun is going to happen. Let’s tackle the title first, shall we?

The rockabilly throwdown

Let’s start by pointing out the typefaces we’re going to try from that bigger list of contenders we’ve assembled. I typically start by typing the text I’m trying to format in uppercase, lowercase, and in a mix of both to see what character combinations look like. I’ll also add the typeface name in there for you to follow. And make sure you’re on the right layer and that it’s unlocked.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title type options

Once that’s done, we can start eliminating a bunch of these. It’s pretty clear to me that we should keep that western vibe in the title. Think about the Coney Island Rockabilly Festival poster vs. the Destination Unknown poster. The tattoo type looks great, but the sailor/pirate vibe is too strong and gets us away from the rockabilly feel in my opinion. Let’s weed out whatever doesn’t fit this declaration of intent.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title type options refined

We still have too long of a list, but it’s better. Other than the obvious western typefaces, I’ve also kept Bemio (both regular and italic), because it has the retro vibe we’re after, and a very dynamic quality. Combining these two (italic for “the” and “throwdown,” regular for “rockabilly”) would be swell. Phat Phreddy has also that distinct retro feel, but it doesn’t seem to sit well with that restrained list. Phat Phreddy is then out. Anti Hero is sweet, but it has a “raw” hand drawn vibe that doesn’t match Steve’s clean and detailed hand drawn vector pinup. Out. Tightrope looks sweet, but feels like too much. Out. Regulators seems a bit plain. Out. Aldine is a tad too expanded, but I’ll leave it in to try. Pointedly Mad seems perfect (think of the Coney Island poster again). Dude is simply too much. Laredo Train seems a tad bland, like Regulators. Out. Anderson Four Feather Falls seems like a solid candidate too. This leaves us to the final four (well, five, but I’ll combine both Bemio styles together).

Create an Iconic Rockabilly Poster With Vector Set 22 – Title type options, final four

It’s now time to create title treatments based on these typefaces. I used Steve’s as a base, as his was solid. I just didn’t like the typeface he chose. The other thing I’ve kept in mind is the treatment of “rockabilly” on the Coney Island poster. All of the work happens on the type exploration layer, and outside of the main canvas. I’ve also locked my art layer, just in case. I typed each word individually, and moved them around as needed. I’ve also used the effects arc lower and/or arc upper quite a few times (Effects > Warp > Arc upper/Arc lower – use a negative value for arc lower). The stars are just simple 5 point stars, straight out of the shape tool (radius 1: 25px, radius 2: 50px).

Don’t hesitate to heavily rely on your alignment palette to go faster, and to fine tune the overall feel by nudging the words and elements little bit by little bit. Finally, to make sure that my star groups would be well spaced all the time, I made a proficient use of blends (Object > Blend > Make and Object > Blend > Options). You can read more about the blend tool on Vector Tuts+ and on Bittbox.

The results

Create an Iconic Rockabilly Poster With Vector Set 22 – Title type options, Bemio Create an Iconic Rockabilly Poster With Vector Set 22 – Title type options, Anderson four feather falls Create an Iconic Rockabilly Poster With Vector Set 22 – Title type options, Aldine expanded Create an Iconic Rockabilly Poster With Vector Set 22 – Title type options, Pointedly mad

Letting a little bit of time pass between these iteration and the moment of having to choose which one I will go ahead with is helpful. I realized along the design process that the Pointedly mad typeface is the one used on the Coney island festival poster. While I don’t want to recreate what the designer of that poster did, I’m currently more attracted by the iterations made with that typeface. There’s also one made with Anderson Four Feather Falls that could be a contender.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title type options, final three

I’m going to tinker a tad more these 3:

  1. For the Pointedly mad option (left), I’ll make sure to visually center the stars, and that the spacing is consistent all around
  2. For the Anderson Four Feather Fall options (top and bottom right), I’ll make sure to
    • Mimic the layout of the Pointedly mad option (add a divider, change were the stars are, etc.)
    • Add a divider to the current layouts

Bemio alone wasn’t rockabilly enough. Mix it in with either Pointedly or Anderson, and you have a way stronger result. Aldine looks super rad, but it doesn’t nail the vibe right on the head. It’s somewhat there, but there’s a better option available.

Ah also, I’m going to quickly create a new layer and archive the unused type experiments there. I’m just selecting the type combos I don’t want, and cutting them (CTRL/CMD + X) and pasting them in front on the newly created layer (CTRL/CMD + F). Like that, they’ll stay at the same visual spot, but not on the same layer. Once that’s done, just lock and hide the layer.

Create an Iconic Rockabilly Poster With Vector Set 22 – Unused type options Create an Iconic Rockabilly Poster With Vector Set 22 – Unused type options

After playing a bit, I’m once again in front of quite a few variations on the same theme. My goal is to choose the final one out of the group (minus the final alignment adjustments and other touch ups). If I were to be designing this poster for a client, I’d have to be much more careful about how much I’m spending on just that text piece, in order not to blow the budget. Let’s have a look at the options I came up with.

Create an Iconic Rockabilly Poster With Vector Set 22 – Final title option 01 Create an Iconic Rockabilly Poster With Vector Set 22 – Final title option 02 Create an Iconic Rockabilly Poster With Vector Set 22 – Final title option 03 Create an Iconic Rockabilly Poster With Vector Set 22 – Final title option 04 Create an Iconic Rockabilly Poster With Vector Set 22 – Final title option 05 Create an Iconic Rockabilly Poster With Vector Set 22 – Final title option 06

While the choice is difficult, a winner seems to emerge. First, it looks like option based on a type combo have more impact. Exit for options 2, 4, and 5. The lines are way too thick in option 3. This leaves us with options 1 and 6. I wrote earlier that I didn’t want to recreate my Coney island poster reference, but it looks like my preference goes to the Pointedly mad/Bemio based option. Four feather just looks too complex with all the carved out shapes, and more “western” than rockabilly to me.

After a little bit of clean up (alignments, centering, expanding the typefaces to object, etc.), I have my final title element!

Create an Iconic Rockabilly Poster With Vector Set 22 – Final title

And here’s a comparison with the concept I quickly jotted down:

Create an Iconic Rockabilly Poster With Vector Set 22 – Final title - Comparison with concept

The concept is on top, the final at the bottom. You see that the spacing isn’t the same, the dividers are thicker and extend further, etc.

Time to remove the old title, and to put the new one in place:

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

Steve’s title (visible above my art board) used 2 colors (our green and our yellow), as well as outlines and shadows to stand out. Time to get some of that magic working.

Steve used a black shadow behind “rockabilly”, and multiple outlines on “throwdown.” Let’s see what a similar treatment would give. But before that, the first thing you want to do is to create a sub-layer on your Art layer, and to call it title. Then cut and paste your title object in front in that “title” sub-layer. It’ll make the editing much easier, as it will separate the title from the rest of the art. To create the sub-layer, just select your art layer, and click on the new sub-layer button. Label it properly, and place that title in there. We’ll that process of separating elements as we go through the edits, and we’ll have a wonderful layer structure at the end.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

Let’s start by doing the black shadow.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

Let’s have a look at the layer palette to understand how I created the effect (once again, please label your layers and groups!). I have 2 instances of “rockabilly” there, a yellow one and a black one. I simply copied (CTRL/CMD+C) and pasted in front (CTRL/CMD+F) to get my copy of it. I renamed the bottom one, switch its color to our black, and manually offset it with my arrow keys (6 taps down and 6 taps to the right to be exact).  I’m pretty happy with how it makes rockabilly stand out. Next up, the treatment of “throwdown.”

First, we want to switch the word to green. Then, if we look at Steve’s original treatment, there’s a red outline, then a white outline to be able to overlay “throwdown” over “rockabilly” and neutralize what would be a clashing color combo (the green of “throwdown,” the red outline, and the yellow and black of “rockabilly”). I’m not overlaying the words on each other, but for the sake of sticking to Steve’s layout, I’ll redo both outlines.

Let’s paste a copy of “throwdown” in front of itself. Switch the bottom copy to the red of the background, and relabel the layer properly. Then, let’s offset the path to accomplish the outline (Object > Path > Offset path). I used 0.1 inch as the value, and left my joins on “miter” to keep their sharp edges.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

Then, by using the pathfinder (the unite function, first option of the top row), I made sure to just keep the outlines of the letters. This simplifies a bit the paths the computer has to calculate.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

I followed the same process to get my white outline.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

And here’s our result, compared to Steve’s treatment:

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

Let’s be honest, it’s not great. We loose a lot of the dynamism of Steve’s angled words. And his multiple outlines were motivated by overlapping words, which we don’t have here. So I decided to experiment in a different direction. I selected my top, yellow copy of “rockabilly,” and applied a 4 point black stroke, aligned to the outside of the shape. This gives a lot more punch to the word.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

Since I liked the effect a lot, I went ahead and removed the outlines and switched back “throwdown” to yellow. I then gave it the same treatment.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

The result is nice, but slightly overpowering the rest of the title’s elements. Time to unify everything.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

Four points of stroke on the stars and on “the” was too much. Same of a 6 by 6 arrow taps offset. And the offset on my horizontal dividers was too much too.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integrationAfter tinkering, my final values are as follows: the offset on “the” and the star group is of 4 by 4 arrow taps. I have them configured to be of 0.1″ in Ai’s preferences. The stroke thickness I used on both is of 3 points. I nudged the stars a bit for a better visual alignment, and grouped my elements together for a cleaner layer hierarchy.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

And finally, I’ve decided to switch “throwdown” back to green instead of yellow. It’s closer to Steve’s original title treatment, and puts “rockabilly” forward.

Create an Iconic Rockabilly Poster With Vector Set 22 – Title integration

Taa-daa, we have our title in place. The reason why I’ve spent so much time detailing the process for the title is that it’ll be the foundation for the treatment of the rest of the text elements. We’re going to use similar values for offseting what will be offset, similar stroke values, and so on.

The date, time and place

These elements are secondary to the title in the original design.

Create an Iconic Rockabilly Poster With Vector Set 22 – Date and place

I’m going to make my version close to the original design, I’ll just be using Pointedly mad for the typeface instead. I might also change the layout of the words a tad.

Create an Iconic Rockabilly Poster With Vector Set 22 – Date and place

The layout and typefaces are very similar. I chose to make the date more preeminent than the town. I’ve also used resized stars taken from the title to space “USA”, it’s a cool little detail. In terms of sizes, I started with “August” written at 72 points, and “28” written at 144 points. The other sizes come from there. As you can see, I also gave the date and place their dedicated sub-layer. Time to place the date block in the poster.

Create an Iconic Rockabilly Poster With Vector Set 22 – Date and place

And here it is. This updated version takes a bit less room, which I don’t mind. Note the object organized in their sub layer, which you can lock (at least for now).

Featuring…

Time to tackle one of the most important piece of the puzzle, the band list.

I’m going to tap in the typeface list we got on Dafont and Lost Type, as most of these have the vintage qualities we’re looking for, and will probably fit better than the ones Steve used.

Here’s a side by side view of the current version of the list, and of my work-in-progress list. I just copied, pasted in front, and slide on the side the original one. I’ve also created the band list specific sub-layer.

Step one, the “Featuring” title. Like I wrote above, I’m going to take my cues from the main title type element. I used Pointedly mad, and went through the same duplication, outline adding, and offseting processes to get the type element. I then quickly unlocked my title sub-layer to steal one of the dividers over, and just switched its color to green rather than yellow. I resized it using my direct selection tool (A) to fit the width of our band list, and taa-daaa.

Create an Iconic Rockabilly Poster With Vector Set 22 – Band list

Time to tackle the band names themselves. I first started by switching the old list to gray, like that I can write the new version above and use the former as a guide.

Create an Iconic Rockabilly Poster With Vector Set 22 – Band list

Here’s my first complete draft. I’ve used Pointedly mad for Home Grown Heroes, Mission Script (Lost Type) for The Billies, Anti Hero for Jack is coughing, ARB-66 Neon JUN-37 for the Blue Storm, Bemio Italic (with a custom line height value)  for Hail Hail Hellstorm, Alpenkreuzer (center aligned, with a custom line height value, as well as a slightly bigger second line) for Sounds of Thunder, Aldine Expanded (with a custom line height value) for Young Turtles, and Sullivan Fill for 1950s Alive. Now, it’s time to remove the old list for good, and to clean up the alignments.

I know for a fact that this list is going to be aligned on the right edge of my poster. So I’m going to cleanly align to the right all of the band names that are on the right side of the list, make sure that the vertical distribution is a bit better, and manually place the names on the left of the list to make a visually compelling band name group. Finally, I’ll make sure that the divider under “Featuring” extends a bit more than all the way to the left of the list (cf. how the dividers of the title block extend).

Create an Iconic Rockabilly Poster With Vector Set 22 – Band list Create an Iconic Rockabilly Poster With Vector Set 22 – Band list

Here’s my almost complete take on the band list. I’ve moved the name around a bit more, but as you can see, there’s still a weird gap at the bottom right. It looks like I’m going to have to add a band name to visually balance stuff out.

Create an Iconic Rockabilly Poster With Vector Set 22 – Band list

Let’s call them the Hot Rods. I’ll use that Oil Can typeface (Lost Type). I sized “Rods” bigger, centered the text, and used a custom line height value to make sure it looks not too spaced out.

Create an Iconic Rockabilly Poster With Vector Set 22 – Band list

Once you’re happy with the placement, it’s time to switch the text to outlines (make sure there are no spelling mistakes!), and to switch our brand new lineup for the evening with the old one.

Create an Iconic Rockabilly Poster With Vector Set 22 – Band list

And it’s pretty clear that we’re having a problem here. Not only is the list too close to the border on the right, but it’s also obliterating the guitar and the microphone on the left. One remedy: let’s take the size of the band names down a notch. I still want to keep the “Featuring” title and divider to the size they’re at right now, to match the main title better.

Create an Iconic Rockabilly Poster With Vector Set 22 – Band list

And voilà, we have a better fitting band list! There’s a little bit of room won at the bottom of the list, which is where I’ll be sticking the “Gates open at 9pm” information. To stay consistent with the original design, I wrote it in Pointedly mad. My type is sized at 42 points, with the kerning set on “optical” (like most of the text blocks throughout this poster). I also switched the “AM” mention to superscript on the character panel’s options. Time to also remove the old “gates open at (…),” and to move forward.

Create an Iconic Rockabilly Poster With Vector Set 22 – Band listA check-in point

Where are we at?

With this super long tutorial, it seemed a good idea to take a quick step back, and to see what else we are going to finalize. We’re so close to the end I can feel it, but there are still a few details here and there.

Create an Iconic Rockabilly Poster With Vector Set 22 – Band list
  1. Finalize and touch up the look and feel of the “tickets” text block
  2. Check if downsizing the pinup just a bit to give more breathing room to the title is a good idea
  3. Maybe move the “Gates open at 9AM” mention back where it originally was?
  4. Potential background simplification
  5. Potential borders touch-ups

Now that the road map is set, let’s go for the final stretch.

Tickets and other miscellaneous information

The main change I want to make happen here is the typeface. I haven’t used a slab serif at all in the design so far, and I think it feels a bit out of place. I might use Sullivan or Bemio from Lost Type to have a certain sense of unity. Sullivan appeals more to me at this stage, but we’ll see as I go.

Here’s my first draft. The type is Sullivan Fill, set in 24 points. The line height is set at 24 points as well. “Tickets” is set at 60 points.

Create an Iconic Rockabilly Poster With Vector Set 22 – Tickets and misc.Just to make sure, I made an alternate version in Bemio. You can see the Sullivan version in light gray underneath. Given the somewhat condensed nature of Sullivan, I think it’s a better fit given the space I have available. Bemio looks clean and good, but it would take so much more room.

Create an Iconic Rockabilly Poster With Vector Set 22 – Tickets and misc.So Sullivan it is. It’s also time to align my copy to the right, since these text blocks will be aligned in the same fashion than the bands list. I also did some minor adjustments to the pricing block. Let’s put this in place in the poster, and remember to switch the “Tickets” title to our yellow.

Create an Iconic Rockabilly Poster With Vector Set 22 – Tickets and misc.Well, just placing the new type above the old one made me realize than my potential layout correction for the pricing section will look too weird. Time to revert that.

Create an Iconic Rockabilly Poster With Vector Set 22 – Tickets and misc.Much better, isn’t it? Let’s align everything the way it’s supposed to be (location information on the bands list, the ticketing information on the “Ticket” word), and delete the old type.

I also made a minor alignment alteration for the ticketing information, as it seems to fit the contour of the car better than way.

Create an Iconic Rockabilly Poster With Vector Set 22 – Tickets and misc.I decided to also move the gate information back down. The colors are switched over. The ticket and miscellaneous information block is done!

Create an Iconic Rockabilly Poster With Vector Set 22 – Tickets and misc.The pinup’s size

Next on our list is the pinup’s size issue. In its current state, I believe her head is a tad close to the title. That’s the only thing I want to act on: the width of the stroke around it, the colors, the placement of the halftones, all of these are good.

Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup size

First, we need to select all of the pinups layers: the line art, the colors, and the outline. Thankfully for ourselves, we already grouped all of the elements together at the beginning. We can see that we included one of the halftone elements (bottom left, under the shoe) with the group.

I’m going to move the pinup on her own sub-layer, and un-group everything there, for better control. It’s just a game of cutting and pasting in front.

Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup size

Once the pinup is in its own layer and the elements are un-grouped, we can have a better understanding of what needs to move and what can stay as is. I also managed to track down the halftone element as hidden in the outline group. I just slid it, out of there, on the main art layer for the time being.

Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup size

What we want to do now is to select all of the pinup’s element, and to slowly size her down to leave something like half an inch of extra space. And sizing the pinup down by holding the SHIFT key and from the center top handle allows us to size the element down proportionally, while keeping it in a very similar spot. This avoids me to have to replace the pinup manually afterwards.

Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup sizeWhen checking in closely, it also looks like the outline is sensibly similar to the other outlines in place (see around the car, the guitar, and the microphone). So we don’t even need to worry about adjusting it.

Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup sizeLast little thing about the pinup: I used the same pathfinder technique than when creating the first version of the title’s outlines to clean up the shapes composing the pinup. The white shapes, once united, becomes a clean silhouette shape, rather than a shape made of multiple shapes.  Grouping the inner shapes of the same color also helps to clean things up.

Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup size Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup size Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup size Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup size

If you feel like it, and while you’re at it, why not applying the same cleanup process to the car, guitar, and microphone?

Create an Iconic Rockabilly Poster With Vector Set 22 – Pinup size

Background cleanup and simplification

Steve’s background (shown here without any of the type or main illustrative elements) features a star burst, flames, and the borders. First, I’d like to clean up and organize my layers further. Then, it looks like we have to simplify this background, as we’ve added a color (the burst’s light red) to our original color palette, and this will explode the budget of the hypothetical project. Finally, I think we can touch up the borders to make them visually centered.

Create an Iconic Rockabilly Poster With Vector Set 22 – Background

Removal of the background burst

Select the burst shape, and hit delete on your keyboard. Done. Time to bust out the “That was easy” button.

Create an Iconic Rockabilly Poster With Vector Set 22 – BackgroundRemoving the flames

We have a problem, and it’s the flames. They are also in the light red, and don’t fit there anyways since we removed the burst. Let’s remove them as well.

Create an Iconic Rockabilly Poster With Vector Set 22 – BackgroundMore cleanup and organization

Now that the extra elements have been removed, we can organize our leftover visual ornaments into a sub-layer as well. I choose to create one for the borders, one for the halftones, and one for the pinstripes.

Create an Iconic Rockabilly Poster With Vector Set 22 – BackgroundBorder fixes

The borders aren’t fuller centered, and it seems that some of the spacing could be enhanced as well (see my highlights below). I’m going to use my direct selection tool (A) and the alignment palette to make sure the yellow and white borders are horizontally centered, and to make the bottom gap between the white and yellow borders identical to the one side gap between.

Create an Iconic Rockabilly Poster With Vector Set 22 – BackgroundWhile I was at it, I’ve also made sure to center and align the top yellow pinstripe and the wings.

Create an Iconic Rockabilly Poster With Vector Set 22 – BackgroundTaa-daa, we have a fixed background!

Last overall touch ups

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretchI’m pretty happy with the changes so far. Last but not least, the background still seems empty, or missing something. This is because we removed the burst and the flames. Elements like the halftones were arranged around these, and they left gaps.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretchInstead of putting the burst back in place, I’m going to use the halftones already in the design, as well as some new ones, to “fill” the gaps. The trick for the new arrangement to fit is to keep a maximum dote size consistent with the dot sizes already in the design. Unless you start the halftones placement from scratch. Finally, some halftones elements  can be found through your symbol panel.

The button I’ve highlighted in red will give you access to an option menu. From there, navigate to Open symbol library > Dot pattern vector pack.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch

I created a new sub-layer named “New halftones,” colored the old ones in gray (to keep them visible as a non-intrusive reference), and started placing my new ones.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretchSymbols are super easy to place: just drag and drop them from the palette into your design. Here’s my first draft after tinkering a bit with placement and sizes. You can see which ones of the pack elements I’ve used in the layer palette. It’s time to turn the old ones off, and to switch the new ones to white.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch

Since these are symbols, we’ll have to expand them before we can change their color to white. Let’s do so by selecting them all, and going to Object > Expand.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch

And here are our white halftones.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch

I don’t think I’ve accomplished the consistency I’m looking for. The one I’m happy (in terms of scale particularly) with is the little one in the back of the pinup. Let’s see if we can reuse it to fill the other gaps.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch

I’m happier with this second attempt. I basically used Dot Pattern Vector Pack 12 multiple times, after grouping it. In order to not break the scale consistency, I only sized it up very cautiously (check the bottom left corner, under the left shoe). It’s time to shuffle our layers a wee bit to make sure that the halftone at the bottom left covers the void left were we hid the back of the car. I just created a “Halftones #2” sub-layer, and placed it above the car layer. I then proceeded to cut and paste in front the halftone that’s behind the shoe in that sub-layer.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretchOnce that’s done, I moved my “borders” layer up, in order to have the border above the halftone. Time to delete the halftone that’s outside the limits of the borders. Just use your direct selection tool to select the part you don’t want, and hit delete on your keyboard to remove them.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch

It seemed clear that the gap between the yellow and white borders needed to be cleaned up as well, both from the halftone and from the outline of the pinup. To do so, I created two red rectangles that I placed high enough in my layer structure to be above the girl and the halftone, but not over the borders. I also made sure to size them properly to not go over the edge of the artboard, and gave them their own sub layer.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretchA bit more layer clean up, and we’re done! Delete the unused halftones, delete Steve’s old halftones, get the type explorations and color palette layers hidden and tucked underneath everything, and taa-daa, you’ve got yourselves a cleaner Rockabilly Throwdown poster.

Create an Iconic Rockabilly Poster With Vector Set 22 – Last stretch

What’s next?

The next step will be to take this design in Ps to add texture to it. Imagine yourself in your parents’ or grandparents’ attic, and finding it after all these years. We’ll manipulate paper textures, aging Ps actions, noise, stains, fake folds, etc.

Until it’s written, cheers!

The post Create a Rockabilly Poster With Vector Set 22 – Part II appeared first on Go Media™ · Creativity at work!.

]]>
http://gomedia.com/zine/tutorials/create-a-rockabilly-poster-with-vector-set-22-part-ii/feed/ 1
Vintage Typography Tutorial http://gomedia.com/zine/tutorials/vintage-typography-tutorial/ http://gomedia.com/zine/tutorials/vintage-typography-tutorial/#comments Mon, 14 Jan 2013 14:00:30 +0000 http://gomedia.com/?p=23309 "Historiaster"

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. Continue Reading »

The post Vintage Typography Tutorial appeared first on Go Media™ · Creativity at work!.

]]>
“Historiaster”

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.

Research - New Zanerian Alphabet

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.

Historiaster Sketch

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.

Place reference Set layer to template

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

Set Guides

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*

Step 2 part 1

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 2 part 2

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 3

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.

Step 4 part 1

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 4 part 2

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 5 part 1 Step 5 part 2

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 6

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.

Step 7 part 1

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.

Step 7 part 2

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.

Step 7 part 3

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 7 part 4

Step 8

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

Step 8 part 1

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 8 part 2

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 9

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.

Step 10 part 1

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.

Step 10 part 2

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 10 part 3

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.

Step 11 part 1

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 11 part 2

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.

Step 12 part 1

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.

Step 12 part 2

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 12 part 3

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.

Step 13 part 1

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.

Step 13 part 2

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.

Step 13 part 3

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 13 part 4Step 13 part 5

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 14 part 1 Step 14 part 2

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).

Step 15 part 1

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+⌘+] ).

Step 15 part 2

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 15 part 3

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 .

Step 16 part 1

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

Step 16 part 2

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 16 part 3 Step 16 part 4

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.

Step 17 part 1

*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*

Step 17 part 2

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 17 part 3

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.

Step 18 part 1

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 18 part 2Step 18 part 3

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.

Step 19 part 1

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 19 part 2

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.

Step 20 part 1 Step 20 part 2

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.

Step 20 part 3

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 20 part 4 Step 20 part 5

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.

Step 21 part 1

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 21 part 2

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.

Step 22 part 1

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.

Step 22 part 2

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

Step 22 part 3

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 22 part 4 Step 22 part 5

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).

Step 23 part 1

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.

Step 23 part 2

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

Step 23 part 3 Step 23 part 4

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).

Step 24 part 1

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 24 part 2 Step 24 part 3 Step 24 part 4 Step 24 part 5

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 25 part 1

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.

Step 26 part 1

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

Step 26 part 2

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

Step 26 part 3

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.

Step 27 part 1

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

Step 27 part 2

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).

Step 28 part 1

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 28 part 2

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 29 part 1 Step 29 part 2

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.

Step 30 part 1

I also made a little mark for this fine fine zine. Good luck with it.Step 30 part 2

The post Vintage Typography Tutorial appeared first on Go Media™ · Creativity at work!.

]]>
http://gomedia.com/zine/tutorials/vintage-typography-tutorial/feed/ 1
FOUNDFONT™ and the Art of Typographic Archaeology http://gomedia.com/zine/tutorials/foundfont-and-the-art-of-typographic-archaeology/ http://gomedia.com/zine/tutorials/foundfont-and-the-art-of-typographic-archaeology/#comments Thu, 02 Feb 2012 15:00:29 +0000 http://gomedia.com/?p=17247 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.… Continue Reading »

The post FOUNDFONT™ and the Art of Typographic Archaeology appeared first on Go Media™ · Creativity at work!.

]]>

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 Go Media™ · Creativity at work!.

]]>
http://gomedia.com/zine/tutorials/foundfont-and-the-art-of-typographic-archaeology/feed/ 14