70s Graphic Design: Ideas from our Pinterest Board
As you may have noticed, companies and designers have been drawing inspiration from of our favorite decades lately. Graphic design inspiration from the 1970’s is all the rage. There is something about the thick lines, bold color choices and simple layouts that really speaks to us still. So today, we are throwing down some vintage inspiration from this decade in hopes that it inspires your next project. Enjoy!
For more 70’s graphic design and 70’s inspired design, head to our Pinterest board.
For more 70’s graphic design and 70’s inspired design, head to our Pinterest board.
Graphic Design Bundle
It’s a great month to be a member of Go Media’s Arsenal subscription. Not only do you have access to our entire library for only $15/mth, but you are able to download this month’s special graphic design bundle of products at no extra charge.
Not an Arsenal Member yet? Join now and gain instant access to our entire library, including this bundle, for only $15.
Not interested in our membership? No worries. You can still purchase this bundle for 60% off the original price, now through 3/31/3018 – or the individual products inside of it, on their own.
What’s Included in this Graphic Design Bundle by Go Media’s Arsenal:
Free Vintage Starburst Vectors
We’ve really been in a retro kind of mood lately, as inspired by a trip to a local vintage shop. What really caught our eye were the starbursts that decorated so many of 1950’s fabrics and bakeware. So, we were inspired to create some free vintage starburst vectors for you. We hope the pack serves you well and gets your motivated to create something fun and dynamic.
To give your work some extra oomph, head over to our Arsenal, where you can have access to our entire library, including all of our vector files for only $15 per month.
The Arsenal subscription includes some of our other vintage packs (roughly $10 to $12 each), like:
- Our Vintage Elements Vector Pack
- Our Tattooesque Elements Pack
- Our Vintage Cars Vector Pack and our
- Our Vintage Vector Pack to name a few
Polaroid Photoshop Tutorial: Simplified!
Join us every Thursday, when your friends here at the Arsenal take over the Go Media blog to share insights, tips, freebies or other fun to brighten your work day.
Today we’re talking about how to get an authentic photoshop effect for your photos. To get this effect, you’ll need a photo, the Photoshop template we’ve created just for you, and a few moments to follow the steps you’ve provided for you. We promise it will be worth it!
Love our products? Access our huge product library ($11k in resources) and exclusive content for only $15/mth. Yes, seriously. Learn more now.
To get started, please download the Polaroid Effect Template. This template was created with resources we found on line including this awesome photo from akinna-stock on Deviant Art. Thanks Akinna!
The Download: Polaroid Photo Effect Template by Go Media
STEP ONE: Open your template in PS. Make sure the “Place your Art Here” layer is selected. File > Place your photo into this layer. It will place your art into the mask like so.
STEP TWO: If you’d like to add some vintage effects to your photo, let’s proceed. Right click on your photo > Rasterize Lazer.
Here are some tools you can use to age your photo. Feel free to play around with these in order to get the look you’re after >
The first: Head to Image > Adjustments > Hue and Saturation (Shortcut Ctrl + U) – now, under present, try selecting Sepia or Old Style
My photo using the “Old Style” preset
Try Filter > Texture > Grain – Experiment with adding grain here!
Try to play with your curves. I suggest working with Red, Green, Blue, as well as your RGB setting separately. This will adjust your colors in order to give it the vintage effect you’re after.
Try to play with your curves. I suggest working with Red, Green, Blue, as well as your RGB setting separately. This will adjust your colors in order to give it the vintage effect you’re after.
You can further mute the colors in your image by going to Image > Adjustments > Brightness. I chose a contrast of -20 to achieve this affect.
Want to make some last minute color changes, head to Layer > New Adjustment Layer > Color Balance. Clip your Color Balance layer to your photo by selecting both layers then putting your cursor between the layers and right clicking to “Create Clipping Mask.” Use the RGB selections to achieve our final vintage look.
Here is my before and after.
Download of the Day: Free Vintage Sunbeam Vectors
Join us every Thursday, when your friends here at the Arsenal take over the Go Media blog to share insights, tips, freebies or other fun to brighten your work day.
Today we’re sharing four vintage sunbeam vectors we created exclusively for you!
Download them now, enjoy them forever.
Here you go: Vintage Sunbeam Vectors
For the World’s Best Design Weaponry, head to Go Media’s Arsenal.
The Arsenal is a collection of design resources created and curated by the design team at Go Media. Go Media started releasing its collection of royalty free stock vectors in 2006 and has since expanded into providing a variety of different resources for the graphic designer, illustrator, and entrepreneur.
To put it simply, every designer has an Arsenal of goodies they stash on their hard drive. These goodies might include several gigabytes worth of textures, vector illustrations, mockup templates, fonts, ebooks, etc. A personal library of go-to resources to aid in a creative and efficient design process.
Customers who use our products enjoy saving time and money while still looking good. We are OBSESSED with helping out our fellow designers and will stop at nothing to provide you with the tools you need to make design fun.
Our Complete Halftone Collection
We’re not sure what’s dreamier than a halftone. The tiny dots that create a gradient-like effect can produce such remarkable results.
Here at the Arsenal, we have nine packs that will give you the effect you’re after without the effort. Download them all in this complete collection – originally $105 – now only $27!
Or, become a member of our graphic design subscription and get them all (plus the rest of our huge product library) for only $15 a month.
All of the packs you see here are also available for individual purchase.
Introducing the cosmic fractal storm texture pack
Hello everyone! It’s Simon again on this end of the keyboard. I’m returning for another tutorial, and boy, do we have a treat this week. Dustin Schmieding gifted us with yet another fantastic texture pack, the cosmic fractal storm texture collection.
The set is composed of three-dimensional scenes, resembling cloud formations, or landscapes. Each texture is 4,000×2,700 pixels @ 150 ppi. This gives us plenty of pixels to work with, even for big size print applications (posters, flyers, and more).
Arsenal Members, you get this pack at no extra charge! (Feels like your birthday, doesn’t it?)
Using the pack: let’s play!
These assets are at home in a variety of contexts. They can be used as stand-alone assets, as background elements, as textures… We will explore some of these uses while we embark on the creation of a poster for a (fake) EDM event called Magnetic Fields.
The tutorial will have us explore tips and tricks to recreate a “VHS-like” effect, for all that analog glitch goodness.
We’ll use primarily Photoshop for this tutorial, as manipulating textures is easier with it, and because we won’t engage in complex type manipulation.
We are going to work extensively with textures. It’s a good time to remind you guys of a few base rules, and processes:
- Don’t know what a clipped layer is? Glad you asked! This means that the layer is only visible/applies to the layer directly below it. You can very quickly do this by holding ALT down on your keyboard and clicking between the two layers. Here’s a quick demonstration.
- Every time we’ll work with textures, we’ll follow this simple process: place as smart object, sharpen1, desaturate, enhance contrast with levels, and modify the blending mode.
- Placing the textures as smart objects, and using adjustment layers to tweak them, allows us to stick to a non-destructive workflow. We’ve explored in depth the numerous pros and few cons of such a workflow in this past tutorial: “How to Use Textures The Right Way.”
Notes: 1 – accessed through the Filter > Sharpen > Sharpen menu.
With this in place, it’s time to get started!
As hinted at during our walk-through of the product, these textures feature digital “landscapes” that make no mysteries about how they have been generated. In order to stick to the theme, we are going to give this poster a “Lo-Fi,” CRT-like screen effect. Think of VHS artifacts: scan lines, slight warps, etc.
The concert is being branded as Magnetic Fields, and will take place at the Tate Modern gallery in London, and more specifically in the Turbine Hall. It’s a beautiful industrial space, and hosted a Kraftwerk performance in the past. It’s perfectly fitting.
(Images via Tate.org/Marcus Leith/Tate Photography – © all rights reserved)
We’ll split our document in two columns to fit all the text (one side main event announcements, one side for the band names). The copy will read “Magnetic Field – 02.06.16 – Tate Modern – Turbine Hall – London, UK,” “Performances by chp_tnes – nu_drds – cbalt – qwerty – & lw_ram,” and “Tickets & information at www.magneticfields.com.”
The two typefaces we’ll use for the poster are League Gothic, and Droid Serif. They are both free for commercial use, so grabbing them is a no-brainer. They even feature an extended set of weights, for even more flexibility.
All of our band names are inspired by electronics/robotics/computer science jargon:
- chp_tnes (chiptunes)
- nu_drds (new droids)
- cbalt (cobalt)
- qwerty (look at your keyboard)
- lw_ram (low RAM)
The event is to take place on February 06th, 2016.
Photoshop Abstract Texture Tutorial
Even though our event will take place in the United Kingdom, we will use an 18″x24″ canvas. Designers in the UK would typically use ISO paper sizes, like pretty much the rest of the world. Let’s just say that the performing acts all come from the USA, and that the poster is put together by an American concert promoter.
As mentioned before, we’ll split our canvas in columns, three to be exact. We’ll also mark a one inch security margin around the edges of our poster. Photoshop CC’s New Guide Layout feature is priceless to generate these rapidly (View > New guide layout).
With the preparation work done, we can finally start to tackle the real thing.
The background will be the base for our VHS effect. The first asset we need is GoMediaArsenal-CosmicFractalStorm-03.jpg, from Dustin’s texture pack.
It needs to be placed as a smart object at X: 0.5″, and Y:12″, scaled up to 135%, and sharpened (Filters > Sharpen > Sharpen).
Once in place, it looks like this.
Starting the magic
The VHS-like effect that we will create in a few steps rests on the power of levels, and of blending modes. First, we need three copies of our texture smart object.
Using clipped levels adjustment layers, we are going to “kill” the output of selective color ranges for each of the copies. Let’s start with GoMediaArsenal-CosmicFractalStorm-03 copy. Using the clipped levels adjustment layer, we are going to change the output of blue hues to zero. This will result in a layer turning to yellow hues. Pro tip: note that the additional copies have been hidden for clarity each time.
Using the same technique, the second copy GoMediaArsenal-CosmicFractalStorm-03 copy 2 will see its greens disappear, leaving us with a set of saturated purples.
Finally, we’ll get rid of the reds on GoMediaArsenal-CosmicFractalStorm-03 copy 3.
With that done, here’s our layer stack so far.
Next, we are going to create a few layer groups: one is for the copies and their adjustment layers, the other one for the background elements in general.
Now, we are going to change the blending mode of each copies to exclusion @ 100% opacity (the copies only – not their adjustment layers!).
The result is slightly underwhelming at the moment, but we are going to address that shortly.
Out-of-synchronization frames, part one
Next, we need to carefully offset each of the copies from the original smart object. For instance, instead of GoMediaArsenal-CosmicFractalStorm-03 copy being positioned at X: 0.5″, and Y:12″, it should be positioned at X: 0.55″, and Y:12.1″.
GoMediaArsenal-CosmicFractalStorm-03 copy 2 can go from its original spot to X: 0.495″, and Y:11.95″.
Finally, GoMediaArsenal-CosmicFractalStorm-03 copy 3 can migrate to X: 0.485″, and Y:11.97″.
The effect is taking shape: we just established the basis for out-of-synchronization frames, or tape damage. To make things more legible, we are going to lower the opacity of the copies to 50%.
Out-of-synchronization frames, part two
To make the effect more believable, we are going to alter a portion of it. Let’s start by creating a merged copy of everything so far (CTRL/CMD+ALT/OPTION+SHIFT+E), at the top of our layer stack. The generated layer should be called Shear.
We are now going to apply a shear filter to it (Filter > Distort > Shear). The effect is controlled through the small curve in the effect window. Clicking on the grid adds controls points (but no handles). Holding ALT/OPTIONS allows you to reset the manipulation. Wrap around loops disappearing image parts on the opposite side of the canvas. Repeat edge pixels stretches the pixels at the limit of the canvas to the image’s edges.
After creating a curve directed to the bottom right corner of the canvas, our result is pretty dramatic.
Using our guides, we are going to create selections that we’ll use to mask parts of the sheared layer.
With the selections active, we can head to Layer > Layer Mask > Reveal selection.
With that done, we can change the blending mode of the Shear layer to color dodge @ 35% opacity.
To complement the effect, we are going to add some thin horizontal lines at the edges of our selections. These lines will each be 1 point thick, run the full width of the poster, be colored in 50% gray (#808080), and perfectly aligned with the edges of the visible parts of the Shear layer. These lines should be created with either the pen tool (P), or with the line tool (U).
The settings options offered by Photoshop CC 2016 allows to customize the stroke. It should be noted that aligning the stroke to the outside produces the best result.
Once one of the lines is created, it can be duplicated and positioned to the appropriate locations.
Once in place, the lines’ blending mode can be changed to screen @ 25% opacity.
And after some layer organization, our background layers start resembling something.
Icing on the cake
Because our background needs to not compete with our type elements later, we are going to darken it. We’ll use a levels adjustment layer for that.
After one last look at the layer stack, we’re ready to move onto type!
Now that our background is in place, we can start shaping our text blocks. The first one is the main one: “MAGNETIC FIELDS / 02.06.16 / TATE MODERN / TURBINE HALL / LONDON, UK.”
The type is set in League Gothic Condensed, that is 300 points tall, with a line spacing of 272 points, colored in white, and with kerning set to optical. These settings make the copy fit the two left columns of the grid, leaving the right column for the additional information blocks.
The next block is “Performances by // chp_tnes / nu_drds / cbalt / qwerty / & lw_ram.” The type is set in Droid Serif Bold, that is 54 points tall, aligned to the right, colored in white, and with kerning set to metric. These settings make the text block fit snugly in the top right corner of the poster.
The third and last text block is for the miscellaneous information: “Tickets & information at www.magneticfields.com.” It is set in Droid Serif Bold, that is 30 points tall, aligned to the right, colored in white, and with kerning set to metric. These settings make the text block fit snugly in the bottom right corner of the poster.
The result is interesting, but it lacks depth.
In order to address that, we are going to replicate the VHS effect we gave the background to the main type block. Let’s start by creating three copies of the type element.
Instead of using levels adjustment layers, we are going to assign hues directly to each type elements. This works because the type is a solid color object, as opposed to the visually complex texture we applied the effect to earlier.
The bottom copy, MAGNETIC FIELDS 02.06.16 TATE MODERN TURBINE HALL LONDON, UK copy 3, should be assigned the base blue color #0000ff.
The middle copy, MAGNETIC FIELDS 02.06.16 TATE MODERN TURBINE HALL LONDON, UK copy 2, should be assigned the base red color #ff0000.
The top copy, MAGNETIC FIELDS 02.06.16 TATE MODERN TURBINE HALL LONDON, UK copy, should be assigned the base green color #00ff00.
The top text element (the original one) should stay white.
From there, we can change the blending mode of the three copies to exclusion @ 100% opacity, and of the original element to overlay @ 100% opacity.
Now, in order to complete the effect, we simply have to offset the three copies in separate directions, using the arrow keys on our keyboard.
And with that done, we can move on to the last step: textures. Below is a look at our layer stack so far.
Things to grab
Before we get moving, here are three assets to grab. They are all free. The first one is photocopy by clarisaponcedeleon, via DeviantArt.
The second is Film texture – grain explosion by JakezDaniel, on DeviantArt.
The last asset is this pattern tile, that we’ll use for scan lines. You should download it by right-clicking on it, and using the Save image at menu.
Putting things in place
The first texture we’ll use is the film noise texture, film_texture___grain_explosion_by_jakezdaniel-d37pwfa.jpg.
It needs to be placed centered in the canvas, rotated of 90° clockwise, and scaled down to 80% so it covers the whole piece.
From there, we can change its blending mode to color dodge @ 15% opacity.
The next texture is the scanline pattern. Let’s open the file.
With the file open, we need to head to Edit > Define pattern. This will ask us to name it, and to validate. Once that is done, our pattern will be ready to use in our piece. Let’s close the pattern, and head back to our main file.
Back in the main file, let’s create a new, empty layer at the top of our layer stack.
We are going to apply the pattern using a layer style. First, we need to fill our layer with a solid color. Which one won’t matter, it is just to make sure the effect shows up. 50% gray is a good default choice in these cases (#808080).
Next, we can open up our layer style palette by double-clicking on the layer thumbnail in the layer panel.
Let’s navigate to the pattern overlay section. It’s a simple interface. We can control the pattern tile roughly the same way we can control a layer: blending mode, opacity, scale, etc.
Let’s use the drop-down menu to select our scanline pattern.
Finally, we can dramatically scale the pattern up to make sure the lines are visible (900%).
Our pattern is applied, but we need to give it an additional touch for more veracity. Let’s convert the layer to a smart object (Filters > Convert to smart filters).
Next, let’s assign a 2 pixels gaussian blur to the pattern layer/smart object (Filter > Blur > Gaussian blur).
Finally, let’s change the blending mode to overlay @ 10% opacity.
With the scanlines in place, we can move to a slight color alteration. We are going to use a gradient overlay for it. Just like before, we’ll need a layer filled with 50% gray (#808080).
Next, we are going to change the layer’s fill to 0%. This allows to hide the layer’s pixels (the gray), but to let any effects applied through the layer style panel to shine through.
Let’s open the gradient overlay side of the panel.
In the gradient drop down menu, let’s select the spectrum gradient.
Let’s change the blending mode of the gradient to overlay @ 15% opacity, and change the angle to -50°.
This gives us a nice added depth to the colors of the piece.
The next to last texture is vintage-paper-textures-volume-01-sbh-005.jpg, from the cute robot tutorial freebie archive.
It needs to be placed centered in the canvas, rotated of 90°, and scaled up to 440%.
Blending mode: soft light @ 25% opacity.
The last texture is photocopy_by_clarisaponcedeleon.jpg.
This one needs to be centered in the canvas, and slightly distorted (width: 212%, and height: 208%).
Blending mode: soft light @ 75% opacity.
And with that, our piece is complete! After a last go at organizing our layers, here’s the full layer stack.
Wrapping things up!
Phew, that was a long one! I hope that you enjoyed following along with the tutorial as much as I enjoyed creating it, and that your outcome matches the goals you set for yourself before diving in.
Did I leave anything unclear? Any suggestions? Don’t hesitate to reach out in the comments below! I’ll be happy to help out.
And finally, I hope that this gave you a preview of the cool things you can achieve with the cosmic fractal storm texture pack, by Dustin Schmieding. The pack is available for download now!
On that note, that’s all for me today. Until next time, cheers!
Top Graphic Design Tutorials:
a Quick Guide by Your Friends at Go Media
Welcome to the Go Media’s Zine!
Are you a passionate creative, student, designer, entrepreneur?
You’re in the right place.
Inside you’ll find the tools you’ll need to successfully do what you love. We’ll share real-world practical advice, solid business techniques, step-by-step tutorials, as well as educational podcasts and webinars to take you to the next level.
Our Cleveland based graphic designers give all of our secrets away and cultivate an open environment for the sharing of insights and inspiration.
When you’re ready, we would also love for you to be a part of our community. Please comment on posts, become an active member of our social media community and/or email to find out ways you can contribute your own designs or tutorials to the GoMediaZine.
With hundreds of posts in our archives sometimes it’s hard to know where to begin. Our Start Here page is a great place to get started. This page holds 7 quick guides to becoming the creative you’ve always dreamed you’d be. You’ve landed on one of these lists so let’s get started, shall we? Read on to learn how you can:
Improve Your Skills
1. From Sketch to Vector Illustration
2. Aged Type Effect in Photoshop (w/Ps Action)
3. Intricate Patterns in Illustrator
4. Vintage Typography Tutorial
5. Create 3D objects in Cinema 4D from vector art
6. Tutorial: How to Design and Print Custom Silk Screen Die-Cut Stickers
7. Collaboration! Two samurai (artists) are more powerful than one.
8. Easy to accomplish VSCO Cam effect in Photoshop
9. Screen-Printed Movie Poster Tutorial by Pale Horse
10. Go Media’s Rapid Fire Illustration Technique
11. Thick Line Art: Creating Iconic Vector Art
12. The Lost and Taken Poster: A case study and texturing tutorial
13. Illustration Tutorial: “The Man Who Knew It All”Technical Process & Design Philosophy
14. Typography Tutorial: The Soul in the Machine – Adding Glitch Techniques to Your Work
15. Easy to Accomplish VSCO Effect in Photoshop
16. Distressing Techniques in Adobe Illustrator
17. How to Set Up Your Wacom for Awesome Results
18. Comic Book Style Graphic Design
19. Create a Dream Design with 3D Typography
20. Gigposter Design: The New Sex
21. Old School Type – Line Gradients
22. How to Create Explosive Typographic Effects in Cinema 4D
Texture tutorial: How to apply our rolled ink textures to your design for that old-time print shop vibe
Introducing The Shop’s rolled ink texture packs, volume 01 and 02
Ladies and gentlemen, drum roll please. I’m happy to announce that my rolled ink texture packs are finally available on the Arsenal! Simon from The Shop here, and I’ll be walking you through both texture packs, as well as through a few techniques to make good use of them. On to the texture tutorial!
So, what is it about these textures that makes them awesome?
Well, for a start, they have been created by hand. I used both a foam and a rubber roll to execute them, and lots of rich, deep, black ink.
The result is that series of 28 textures in total (14 in each pack). After experimenting with pressure, ink quantity, roller motion, and paper types, the textures were left to dry for a few days. After the drying was complete, they were scanned in at very high resolution (800 dpi and more). Following the scanning process, they were carefully, and minimally edited to produce a set of textures sized at 5000 x 7800 pixels on average.
Both sets are delivered in the form of flat RGB .jpg images in a ZIP archive.
Cool story, but how do I use these textures?
Oh boy, am I glad you asked. I precisely prepared a quick piece showcasing these textures, so we could experiment a little bit. We’ll use both Photoshop and Illustrator for this tutorial, but you should be all right with just Photoshop.
Step 0: Assets gathering
Before we get started, you’ll need to put your hands on a few assets.
The next asset is a blue soft grunge texture, also from Dustin (through his Valleys in the Vinyl blog)
Finally, I prepared a small freebie pack for you guys.
It includes the vector type element used in my piece. I crafted it using a typeface called Felt Noisy, made by the awesome folks at PintassilgoPrints. Consider buying that amazing, messy brush style font! You won’t regret it one bit. The file is available in Ai (CC), EPS (CS3), and PDF formats. It includes a black and white and pre-colored version of the artwork.
The freebies we’ve included in the pack are two of the textures from the Rolled ink textures, volume 02 pack. They are #4 and #12. They will be used in the tutorial.
Finally, the last asset you should have at hand is a useful set of Photoshop actions by Media Militia. They allow you to turn white pixels to transparent ones, with a single mouse click.
I’d like you to also quickly read the post – it includes some background on how the actions work, and instructions to install them.
Step 1: file setup
The first step is to create the canvas we’ll be working in. I’m using an 24″x18″ file @ 300 dpi.
I’ve also created a few guides to give a loose structure to work from. I’ve placed my vertical guides at 1″, 2″, 12″, 22″, and 23″. My horizontal guides are placed at 1″, 2″, 9″, 16″, and 17″. This “grid” gives me a quick indications of my piece’s center, as well as marks a nice border zone around it.
Step 2: the background
Start by filling your background layer with our bright yellow (#fbfbd9).
Feel free to double click on it so it becomes an unlocked layer.
Create a new layer above the yellow layer, and fill it with our dark green (#337061).
You know have two layers, one being completely invisible.
We’re going to leverage rolled-ink-texture-pack-volume-02-sbh-007.jpg from the second volume of the rolled ink textures. Pasted into a layer mask, this texture will allow us to reveal the hidden yellow layer. Visually, this will translate into a bright border around our dark piece.
Open the texture in Photoshop.
Select its content, and copy it (CTRL/CMD+C). Head back to our piece. Add a layer mask to our green layer.
Make sure the layer and the layer mask are “untied” to each other (no chain link). This will allow us to move/transform their content independently from each other.
Now, ALT/OPTION+CLICK on the layer mask to access its content. Simply paste the texture in there (CTRL/CMD+V).
In a layer mask, black pixels represent the parts of the image that will be hidden, and white pixels the ones that will be shown. The various gray levels represent the various degrees of transparency. With that in mind, we’re going to place our texture so it will allow a bit of the yellow layer to show at the edges of the piece. We’ll obviously have to invert the layer mask’s content to achieve our effect.
You can see that I’m slightly distorting the texture to fit the project/goal at hand.
Once the texture is in place, invert it (CTRL/CMD+I).
Click back on the layer’s thumbnail to admire our result. This is the perfect moment to further tweak the layer mask if the result isn’t quite where you’d like it to be.
I’m personally happy with the texture overall, but I think some of its artifacts (paper folds and creases) are showing too strongly. I’m going to use the levels panel (CTRL/CMD+I) to fix this. With the layer mask selected, bring up the levels. Tweak the various sliders until you reach a level you feel comfortable with. My values bring a stronger contrast to the texture, “washing off” some of its detailed creases, folds, etc.
And here’s our cleaner, and better defined result.
And we’re done with our background. Proceed to some house-cleaning (or else!), and let’s get ready to move on to adding the type element to our poster.
Step 3: bringing the type in
It’s time to move on to Illustrator, and to open one of the files containing the type element.
You have a couple options from here:
- Grab the pre-colored element, copy it, and paste it into your Photoshop document
- Use the monochrome element, tweak the colors to your liking, copy it, and paste it into your Photoshop document
- Get the Felt Noisy typeface, and use the many alternate characters available to tweak the type element to fit your tastes just right (and then paste it into your Photoshop document)
Because I’m already happy with my current color scheme, I’ll settle on the already colored type piece. Simply copy it, and paste it in your Photoshop document. I HIGHLY recommend keeping the type as a smart object, as this will retain its vector properties within your raster file. This could come in handy should you decide to tweak the type’s placement or size later.
Size the type to your liking.
Once you’re happy with the type, proceed to organize things a bit.
It’s now time to finally use our rolled ink textures.
Step 4: using the rolled ink textures to create ink noise
If you haven’t done so yet, it’s time to grab Media Militia’s actions, and to get them installed. Next, open rolled-ink-texture-pack-volume-02-sbh-012.jpg from your asset pack.
You can use levels to tweak the texture to your liking (lighter or darker).
Once you’re done with that, it’s time to run one of the actions to obtain a version of our texture with a transparent background. Make sure that your colors are reset to the default (you can press “D” for that), and run the “maximum opacity” action. This will ensure the best result for the following steps.
You’ll end up with a file looking like this
Simply drag it into our main file.
Turn it into a smart object (Filters > Convert for smart filters in Photoshop CC).
Once the layer is a smart object, resize it and position it so it covers as much of our piece as possible. It should also not have an overwhelming effect.
Once the texture is in place, proceed to give it a color overlay of our bright yellow (#fbfbd9).
Open rolled-ink-texture-pack-volume-02-sbh-004.jpg, and follow the same process. The only difference is that you’ll give it a green color overlay (#337061).
Once you’re happy with your ink effects, it’s time to organize things a little bit. I renamed my layers to reflect the textures that were used to generate them, and grouped them properly.
Step 5: textures!
It’s time to add a little bit of textures to our piece. This will tie things together, as well as add extra depth.
I’ll be using a texture workflow that’s as non-destructive as possible. I wrote extensively about following such a process for the good folks over at Design Cuts:
Adjustment layers, clipping masks, and clipped layers will become your new best friends. While it might seem cumbersome at first, such a workflow has many advantages. You could go back to your original piece of content in a heartbeat, by simply turning layers off. You could quickly change the intensity of an effect used during the making of the piece, to make it stronger or more subtle.
The gist of it is to use clipped adjustment layers to your textures, so you can revert your changes at all times. Makes sense? Alright, let’s get going.
The first texture is BB_AntiqueEnvelope_04.jpg.
Place it in your document so no seams are visible.
Desaturate it (the Saturation slider of the Hue/saturation adjustment layer is set at -100).
Next, use a Levels adjustment layer to bring the texture’s artifacts and grain out.
Finally, change the layer’s blending mode to Soft light @ 75% opacity.
The next texture is VV_ColoredGrunge_02.jpg. The interesting feature of this texture is that it features a soft vignette. We’ll make advantage of that to focus the viewers’ attention to the center of the piece, where the type is.
We’ll repeat the same process: place the texture as a smart object, desaturate it, use levels to enhance it, and switch its blending mode.
Blending mode: Soft light @ 35% opacity.
This concludes the texture part. Here’s what my layer stack is looking like.
Step 6: finishing touch
In our case, the finishing touch will be a subtle halftone effect. This will allow us to give the piece a tactile feel, as if it were printed.
Start by creating a merged copy of all your visible layers (CTRL/CMD+SHIFT+ALT/OPTION+E). I’ve renamed my copy Halftones.
Convert the layer to a smart object.
Proceed to add a Color halftone effect to your layer (Filter > Pixelate > Color halftone).
The result is obviously not adequate.
Start by changing the effect’s blending mode. You can do so by clicking on this little button, on the right of the effect name in the layer palette.
Change the blending mode to Soft light @ 100% opacity.
From there, change the actual layer’s blending mode to Lighter Color @ 75% opacity.
Because of the effect’s nature, the colors in the piece have slightly shifted. You can fix this if you don’t like the result by adding a hue/saturation adjustment layer, clipped to the halftone layer.
And we’re done! Isn’t it looking nice?
Well, we’re done. I hope you had as much fun following along as I had writing this tutorial. I also hope that this short write-up helped you to see the potential these ink textures have to quickly bring some ink elements in your designs, to be used as masks, or as textural elements.
Don’t hesitate to reach out if you have any questions! I’ll be watching the comments below, but you can also tweet at me @simonhartmann.
Finally, don’t forget to get your hands on both volumes of The Shop’s Rolled ink textures!
BUY THE SHOP’S ROLLED INK TEXTURES, VOLUME 01
Illustrator Poster Design Tutorial
With the re-release of our latest, horror-themed, vector set, we felt it was fitting to have an Halloween tutorial. So today, we’re going to work on re-creating this poster for Dracula’s daughter, a fictitious movie from five or six decades ago. We will be using vectors from Go Media’s Arsenal to help us out with this poster (you can purchase below!).
The design above was a team effort between Steve Knerem, Jeff Finley, and myself. As you can see, not all the details are historically accurate (actor names, type choices), there are some alignment issues, and a typo, but it’s a good base to start from.
We’ll be using Illustrator as our main tool throughout this tutorial. This will allow us to easily limit the number of colors of our final piece. This is for two reasons: we want to potentially screen print the piece, and it forces us to design more efficiently.
We’ll see how to recolor the vector elements from set 23 to match our color palette, how to place them around, how to manipulate the type to create the title elements, and more! Let’s get started, shall we?
Step zero: the layout
The first step would be to take a piece of paper and a pen, and to comp some layout options. This is also where we looked at the content of set 23, and decided which pieces to use. Steve is the one who came up with the concepts for the poster’s layout. He also fixed the poster size at 18″ by 24″. Here are a couple of the sketches he made:
As you can see, the diamond element, along with the witch’s head have been there from the start. The earlier versions of the composition were a bit busier, with a lot of elements in the bottom half of the frame. We decided to simplify things.
Since the process between Steve, Jeff, and myself was very organic, I’ll spare you the headaches of the back and forth between us. From now on, this will be written as if we started from scratch. Also, since there were so many people involved and that some of the steps haven’t been documented, we might end up with an end result slightly different from the mockup at the top.
Step one: document setup
The first step is straight forward: we need to create a new document in Illustrator. I created an 18″x24″ document, at 300 dpi and in CMYK.
Useful goodie: here are the main colors we’ll be using.
Step two: background elements
Main background color
After placing a series of guides (to find the middle, and get a sense of the bleed I’d like to keep), I’ve created a new layer that I’ve named “bg elements.” I then used my rectangle tool (M) to create a centered 18″x24″ rectangle filled with a very dark gray (#121213).
The texture part is pretty easy: Steve created a vector texture pack as part of set 23.
I just grabbed the grunge texture in the pack, placed it in above the dark gray rectangle, sized it to fill the whole artboard, and colored it in RGB black (#000000). This way, it contrasts softly against the dark gray of our background rectangle.
The finishing touch for the texture is to hide the parts of it that extend beyond our artboard (when sized at 18″ wide, the texture is almost 26.2″ tall). We’re going to use a clipping mask for this. Just create another 18″x24″ rectangle above the texture group, center it, and remove any fill or stroke color. I’ve also renamed it to texture clipping mask. Then, select both the texture and the rectangle, right click, and select the Make clipping mask option. And you’ll have a clean looking background!
The purple burst is the focal element of the background. You’ll notice in our mockup above that the burst is grunged out by the texture. This means that we’ll have to place it between the bg and the Texture clipping group sub-layers.
In order to get a burst, we need to first create a circle. Mine is 16″ in diameter. It’s centered in the artboard, and filled in purple (#614a72).
Next, we’ll be using the Zig Zag filter to create the burst out of that circle. It’s in Effects > Distort and transform > Zig Zag. Make sure the Preview box is checked, and start tinkering with values until you get a satisfying burst. I’ve used an absolute value of 2.5″ for the size, and 50 ridges per segment. I also chose smooth points versus corners, as it gives me a softer, more worn look.
As you can see, the burst is way too wide right now. A little bit of resizing from the center, and we’re good to go (hold SHIFT + ALT while dragging one of the corners of the bounding box inwards). You could also make your burst around 12″ wide right away.
And our background is ready!
Step three: assembling our main elements
Copying from the vector packs
Now that we have our background, it’s time to grab the elements we’ll be needing for the rest of the poster. I have the following:
- The evil witch (Witches and wolves pack)
- The “sexy” witch (Witches and wolves pack)
- The wolf ornament (Witches and wolves pack)
- Three of our zombies (Zombies and mummies pack)
- Bats and birds (Animals, reptiles, and skeletons pack)
- The snake skin texture (Texture pack, not shown here)
You should note that you don’t have to use these elements for your poster design. It would be absolutely acceptable to grab some other vector elements, or to make your own, to follow along with this tutorial.
As you can see, there are some things we won’t need (the hands of the zombies, the scrolls and supporting elements of the “sexy” witch, etc). Let’s go ahead and delete these. Ungroup, use the direct selection tool if needed (A), select the parts we don’t need, and here’s the result:
Preparing the portraits and the wolf ornament
I’m going to walk you through preparing the first portrait. The process will be the same for the three other ones. Let’s prepare the top left one.
You could ask, why are we modifying these? The purpose behind this modification is to have the four surrounding portraits toned down in terms of colors. This will let the center piece have much more visual impact.
First, we need a black circle we can put in the background. The head of the zombie is 2″ tall, so I made my circle 2.5″ in diameter.
If we look at the finished product, the circle has a lighter (#232323) stroke. It also crops the portrait closer. The first thing I’ve done is to align the stroke of the circle to the inside, and to thicken it to 10 points. I’ve then resized the circle closer to the top of the head. So close in fact, that some of the hair goes over the edge of the circle.
Next, and in order to simplify the recoloring process, I’ve actually used the Pathfinder to merge the head together. We could keep it un-merged, but it would make the process even longer, to figure out all the paths and to select the right ones.
After merging, ungroup the head, and start selecting the shapes to switch them either to black for the dark parts of the face (#000000), or to dark gray (#222222). It will take a few minutes, but it’s going to be worth it! As part of the recoloring process, I’ve also recreated the pupils in the eyes with two circles. This is because the original ones are half-circles, that get deformed during the merging process anyways. Once the coloring is done, it’s time to group the head back together.
Time to clip the head within the frame we created. Unlock the background stroked circle, and make a copy of it. Then proceed to paste it in front (CTRL/CMD + F) of the original circle. Then go to Object > Expand appearance. Ungroup the result. This will allow us to select and use the inner circle as a clipping mask for the portrait. Once you’ve applied the clipping mask, the portrait is almost done!
We now need to use elements from the wolf ornament to pimp the portrait frame a little. Following a similar process to the zombie head itself, we’ll be ungrouping the ornament, eliminating the parts we don’t want, recolorizing it, and applying it to the top and side edges. After that, we’ll be applying a stroke to all of that, to help it standing from the grunge texture of the background. See the process in pictures in pictures below:
There’s one thing that didn’t work according to plan, and it was in the next to last step. When offsetting the path of the copy (Object > Path > Offset path), the black stroke around the ornate elements was just too much. So I used my direct selection tool to delete the extra elements around them, to make it visually lighter.
Following a similar process, you can prepare the three other portraits. Or, you could dig into your layers, figure out where the zombie head clipping group is, and just swap the head out for the other portraits, so you don’t have to recreate the circle and the other elements each time. This is done by simply dragging the layers in the appropriate order and within the right groups via the layer palette.
In order to avoid having to recreate the frame around the head, I simply flipped it using the Transform menu available when right-clicking (Transform > Reflect). Below are a few shots of going through the remaining two portraits, as well as the wolf ornament.
Phew, that took its sweet time. Time to get the center diamond shape prepared.
To create the “petals”, we’ll be using two overlapping circles and a bit of Pathfinder magic. We’ll then proceed to trace the diamond shape, using our smart guides (View > Smart guides) to align its top and bottom edges with the top and bottom of the top and bottom “petal”, and its side extremities to the center of the horizontal petal line, and to the edge of the diagonal petal. I promise this makes sense in the images below (you’ll be able to see my values for size, stroke thickness, etc., in them too).
After some trickery with strokes and expanded appearances, we can recreate the same type of effect as in the original piece. It has a green outer stroke (#60806b), which also seems to merge with the petals, an inner black stroke, and an orange center (#cb7856).
Adding texture to the diamond
The orange part of the diamond features the hand-drawn snake skin texture that’s available in the vector texture pack. We’ll simply add this texture at the top of the diamond itself, and use a copy of the diamond path as a clipping mask. In terms of scaling the texture, it’s your call. Remember that the diamond shape will be our big, central element in the poster. So if we just size the texture to cover the diamond, it’ll be very big once blown up to its appropriate final size. I’d suggest making a collage of a couple of duplicates of the texture for a better effect. You should also consider making a couple of duplicates, then reverse the source texture to finish the texturing. This will make it look less uniform.
Because the diamond has a stroke aligned on the inside, we’ll need to expand the copy, merge it to subtract the black outline from the orange diamond, ungroup the result, and delete the black outline before being able to use it as a clipping mask. Look at the image sequence below for the step by step actions I’ve taken.
Colorizing and including the witch in the diamond
The process to colorize the witch is very similar to the one used for the portraits: merging, ungrouping, selecting the shapes, changing the colors, etc. My goal is to keep the color palette to a minimum overall, so I’ve only introduced one more color, a dark green for the skin’s shadows (#44594a). I’m reusing the snake skin’s bright orange for her pupils and teeth. The lighter parts of her collar are that dark gray used for the portraits. I’ve also left the crystal ball as is, as I want to keep its transparency effects intact.
After making sure that my witch is placed above the diamond’s layer, I just placed it on top, and decided to size it to obtain a similar crop to our original piece. The hands will be cropped by the lower edges of the diamond, and the head of the witch will come pretty close to the top edges. The cool thing is that you can move the hands apart if needed to fill the frame better, which I’ve done. After placing the witch, I just made a quick copy of the snake skin texture clipping mask to clip the witch, and it’s good for the final touches: the bats and birds. These were simply placed, duplicated and mirrored, and centered. I then colored them black for a higher contrast against that orange background.
After that assembling, I just created a copy of the diamond, witch, birds, and bats, and placed it in its own layer atop of everything else in the poster frame.
Phew, we’re done with the bulk of this tutorial here. Now, onto the type!
Step four: type elements
There’s not too much type on this poster. Each actor portrait features the name and role. There’s a two part sub-header above the diamond. Finally, the main title is at the bottom of the diamond. The typefaces that have been used are Hitchcock, Cooper Black Std, and Coop from House Industries.
The actor name and role are very straight forward. Two different sizes of text in a lighter gray (18 and 24 points, in #323232), and done.
The sub-headers (“What is she hiding?” and “What is her secret?”) are also quite easy. They’re written using the Hitchcock typeface. The trick with these is to use the Flag mode in the Warp filter (Effect > Warp > Flag). We’re also going to use filler characters (I’m using the underscore, but whatever works, as they’re going to be deleted) to fine tune the curve we’re giving the text.
There’s also a “shadow” effect with it. I’ve obtained it by simply duplicating my text group, and offsetting the lower group by eight arrow taps down, and eight arrow taps to the right.
The process is identical for the second sub-header, except that it’s aligned to the right, and that the text offsetting is also reversed to the left. See the image sequence below for the various values I’ve used.
The big piece is the main title. It features complex layering, and a full shape outline.
There are three layers: orange, black, and green. The key to the effect is to offset the black layer less than the green one to get the uniform look. In order to obtain the full shape outline, we’re going to merge a copy of all the layers, place it in the back, and either add a stroke to it or use the offset path function. I personally prefer offset path, so that’s what I’ll show you. It’s all written in Coop Bold, and we’re using the Flag filter again (but at 15% this time). The top line is sized at 200 points, the bottom at 250 points. The line height is at 225 points.
Along the way, I also realized that beefing up some of the shapes by adding a stroke to give them more weight and smooth the overall visual balance helped. The black layer of text, the green layer of text, as well as the full shape outline all went through that treatment. In some cases, some of the letter shapes needed to be fixed once they were expanded.
And now that that’s done, we can say it’s over!
Bonus! Step five: fake folds
To finish things off, we can add a fake folds vector element on top of everything. A long time ago, I scanned in that folded/scratched paper texture. After placing it in Ai, I live-traced it and got the following vector element:
You just have to place that element in a new layer above your poster, drop its opacity to 50%, and you’ve got yourself fake folds!
And because we’re in a good mood, you can even download these fake folds for your own use, in both personal and commercial projects. And while you’re at it, you should sign up on our email list to hear about all the rest of the good stuff we release on the Arsenal.
Well, that’s it for this tutorial. Don’t forget to check out vector set 23 on the Arsenal, and until next time, cheers!
Vintage Freebies for Designers
You all know, I’m a sucker for freebies. Add “vintage” to the mix and well, I’m totally geeked out. I hope you enjoy these vintage finds – not only fonts, but also badges, frames, PSD retro layer styles and icons!
As always, please pay attention to the license on each freebie!
Badges and Frames
Photoshop Retro Layer Styles
Icons & Extras
I Want More!
Craving more vintage action in your life? You’re in luck! We’ve got some more tools in our Arsenal to satisfy your every need.
Oh, here it is. The pot of vintage gold, aged to perfection, dusted with rainbow bits. 37 knotted puzzles of retro vector flexibility. Click on the image and view the image gallery for close-ups!
Works great on any single color logo, emblem, mark, seal, crest. Because of the great response to Jeff Finley’s Aged Type action, he took it a bit further and made a similar effect that could be applied not just to text, but to your logo to give it an authentic stamp or print effect.
The very talented Steve Knerem is the guest artist behind a majority of the content of our vector set 22. In this tutorial, he shows us how to assemble a rad rockabilly poster using various elements of the set, a bit like what Jeff did for us when we released Set 18.
In the first part of the tutorial, Steve will be walking you through his process to design the poster, from concept to final piece. In a couple of weeks, we’ll publish the 2nd part, which will infuse the composition with an even stronger rockabilly/1950s feel, by doing some additional research in terms of typefaces by digging at the source: 1950’s/1960’s era gig posters (as well as more contemporary material too). Finally, a few weeks after that, we’ll publish a wrap-up piece that will provide additional tips and tricks to give a vintage finish to the poster, like if you had found it in your parent’s/grandparent’s attic after all these years.
But no more rambling, let’s let Steve have the microphone!
— Simon, Go Media’s Arsenal Manager
Thanks for reading my article on how I built this Rockabilly poster using the Arsenal’s Vector Set 22.
In this set you are going to notice that it’s all revolved around icons from vintage 1950’s U.S.A: hot rods, babes, tattoos and everything in between. As you search through the set notice I threw in a mix of styles from my hand drawn look to straight vector art (done in Illustrator). Have fun with the pack and add it to your own arsenal of goodies!
Let’s have a quick look at the set’s content
So let’s get started!
My thoughts to create this poster are keep it simple within the realms of design and content, yet pack a punch with enthusiasm and detail. When I think of design, I definitely try not to throw in the kitchen sink, but be selective and make sure I have for this project a title focus and an image focus. In addition to that, make sure your eye flows either top to bottom, in the “Z” pattern or in what I think is helpful is a circle pattern. These are the elements the the brain locks into and make the poster reads well, creates good flow and is a successful piece.
Choosing the Color Palette
I need to think about colors. When I thought about my color palette typical Rockabilly/50’s colors seem to be red, black, white, tan and a cool color. This isn’t etched in stone but what seems to be the norm. I know I want to go with a vintage look as it were designed back in this era.
Thinking through the composition
Ok I have my color palette, now for design. I am setting up this design for a 16×20 4-5 color screen printed poster for a fictitious event in my home town Cleveland, Ohio, U.S.A. I worked- up a few quick ideas and am going to call this “The Rockabilly Throwdown Fest.” Imagine a huge fest with all your favorite bands, hairdos, pinups and vintage styles for one day, sounds awesome!
I’ll first set up a ½” bleed area around the poster. This guarantees me that anything within these borders will be printed, and I don’t have to worry about it getting cut off. You could probably set up a ¼” in bleed as well.
Looking at Typefaces
I’m going to then move on to the title “The Rockabilly Throwdown Fest” and search for a font. There is an endless supply of possibilities but let’s go with something that feels like it belongs.
Quick note: if I were to choose a font that seemed like it could go with a black death metal fest, it wouldn’t have the right feel. Do your research.
Down to the Nitty-Gritty
Next let’s piece this together.
Choosing the Centerpiece
My initial thought is to utilize one of the pin ups as the main character… Maybe the devil girl.
A Layout Change
Ok, so an interesting turn of design events is taking place. I was originally thinking of placing an image in the center, but because of the title design I am thinking of something else…Let’s see where it goes.
Let’s Change the Centerpiece, and Let’s Add Some Supporting Design Elements
I like this pose better, and I think she goes better with the design. I know I want some sort of starburst in the background to create a sense of depth so I grab the star tool and set it to 75 points.
I want to trim the bottom and left side so I take the pen tool and make three points in at “L” shape. Make sure the color is selected in the stroke color box. Note the purple color “L” at the bottom left of the artboard.
While the “L” shape is selected, I also select the starburst then I go to the pathfinder panel and select the divide button all with my black arrow tool. Both images will look united, but then click on the part that looks cut away with your white arrow tool and delete it. The starburst might spill over the document parameters, so you will have to select those parts and delete. From here select the starburst with your black arrow tool and choose a fill color in the color box. Most likely you will see areas fill in the where your dividing “L” line was.
These are a few extra steps, but this makes the object complete. Click off on a blank area and select the parts that are spilling over and the parts that filled in with your white arrow tool and delete them. Click off on a blank area, then click on the starburst one more time and select unite in the pathfinder panel. I like to do this just to give it a final merge of the object. Now you are all set. Now we can play with different colors of the starburst and create some background texture/depth.
Remember the arrow patterns I drew once I noticed the design took a different direction? Well, I want to keep this design going and incorporate all things related to the fest. So let’s grab a guitar, a microphone, and an old car. I also swapped out the pinstripes at the bottom for some military looking wings. Also, don’t forget to switch the starburst’s color to a red slightly brighter than the background. The yellow was too strong, and overpowered the character.
Adding More Supporting Elements
I have in mind flames also, pretty iconic piece for this scene. But something a little different… like this, from the pinstripes pack.
I know I don’t want to use the whole image, only half. So, I have to cut it in half.
Here’s how I did it:
Select your lasso tool, and draw around the part you DO want to keep.
Cut it and paste it back (CTRL/CMD + X, then CMD/CTRL + V or F). Select the image and select unite from the pathfinder panel. This is so there are no open points and you can select it and change the color any time. Let’s place it on the poster in a few open spots:
Quick note: the one placed left of the pinup had its color changed to the same red as the background. Since it’s overlayed on the starburst that’s lighter, it gives it that sweet punch through effect. One more thing to play with!
Time to Add More Copy!
Quick note: work around the canvas and DO NOT focus in one area for a long period of time. You have to work around the canvas/design and give most areas enough attention. Say I completed this bottom left part completely and came back to it in two days. Well some of those fresh thoughts will be gone and you need to think through the design once again. If you work around the canvas little by little you can give most of it attention and develop those first thoughts.
Alright, back to the game. Keep developing the text, make parts pop, and make the fonts of the bands specific. If you look at any poster the bands will have their own text font.
Time to Make Sense Out of the Mess of Items at the Bottom Left
When coloring for a spot color project such as this poster or a tee shirt, you’re limited to one color choice usually. This is where you need to be selective/creative and think this through.
All I did here is create color shapes and place them behind the character and objects.
Here is another technique that is good to use especially with my hand drawn pieces. If you know my style or if this is the first time seeing it..it’s pretty detailed… Yes? So here is a time saver. Make a copy of the outlined image and place it behind the original piece. Lock the top original piece. Select the car with your white arrow tool. Select merge from the pathfinder panel then add a fill color to the color box then unite it using the pathfinder.
Change color and we just saved 10 minutes of using the pen tool.
Do the same with the microphone and the guitar and now we can take this to the next step.
Adding a Tad More Depth, and Other Refinements
I also wanted more dimension that just the starburst in the background. So I took the flames from the pinstripe pack pack and made this into a solid image by repeating the steps we just did for the car. You just got a free vector! Take a look under the pinup at the light red flames, cool feature and more interesting things going on.
Time to add some finesse to the border. You can taper the edges by expanding the stroke of the frame, then deleting the top point of the square edge.
I also added a stroke to each image. You have to add the stroke to a solid image that is underneath all of your layers. For the car we have two layers. One is the black outlines and one is the green color. Add the stroke to the green color. Make sense? Notice I changed the black lines to red… Looking cool!
Well I’m liking what I see, title reads well, colors look cool, feels like a Rockabilly poster.
Last thing I like to do is add a touch of my own flair. In this case I’ll grab some dot patterns from the symbol box.
I’ll just throw a few down and figure out what I like.
Next I’ll expand it because I don’t want to use the whole pattern just parts. So click on Object > Expand.
I’ll then take the lasso tool and cut out random parts that I want to use.
Cut then paste it then unite with the pathfinder using your black arrow tool.
I like to place these splatters behind the white stroke and make it the color of the stroke, in this case it’s white. So now we have a cool 16″x20″ – 5 color promo poster!
Let me know if you have any questions, go crazy with these vectors and send me your designs: put them in the Go Media Flickr Pool, and/or in the comments! One thing to add is that I illustrated a mix of hand drawn and vector/Illustrator images. This adds a really nice feel of that hand drawn look yet utilizing the strengths of Illustrator.
— Steve Knerem
Note: find Steve online at:
Who doesn’t love vintage? Not us! There has been a growing trend of vintage inspired designs. From packaging to typography, from posters to web designs, the vintage look is pervasive in the graphic design field right now. This is a showcase of the best vintage illustrations we could find on the web! Some are from yesteryear and others are inspired by those retro designs. You will see everything from packaging, to posters, to book covers, so checkout the showcase below for inspiration for your next design project.
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.
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.
From those two specimen you can create a rough composition in Photoshop by cutting and pasting each letter together to see whether the combination would work.
I sketched out a rough of the composition to resolve the details and tighten everything. There is some legibility issues with the capital H and the lower case t.
A quick preview to the client and she recommended adopting some of the stylistic approach of the Sanborn Insurance Maps for the background. I quite like the look of this particular design for St. Joseph Missouri.
Ok, with references collected, we’re ready to jump on the computer.
Open up a New document (⌘+N) on Illustrator and Place (File>Place) the reference image and change that layer setting using the option menu from the layer panel into template. Create another layer and call it “Type Build”, this is where we’ll construct the letters and general storing area for elements that we want to keep but remain hidden.
Open up the ruler bars (⌘+R) and place some guides over the top and bottom of the letters to help us trace the letters.
Start with a red rectangle and set the transparency to multiply to trace the letter O and give it a round corners effect through the menu Effect>Stylize>Round Corners and give it a value of 2mm in this case.
*quick tip: You can give similar commands through the Appearance panel Fx option, and you can turn effects on and off here*
Draw a couple of small circles with the Ellipse tool (L) and with the line tool (\) draw a line between the centre of the two circles and set it 1.5 pt, now we roughly have the letter O. Make a copy of this letter by dragging and holding the option+shift key. Expand the line and the rectangle on one of the O’s you’ve just created using the menu Object>Expand and place it over the letter S here and draw a diagonal line using the line tool again to create the letter S and expand these line as well.
*quick tip: set up your keyboard shortcuts so menu commands are just a multi button press away to increase productivity. Expand is a command that I often use so this is assigned a keyboard shortcut*
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.
Select one of the S’s and give it a rounded corner effect Effect>Stylize>Round corners (or through the Appearance panel) and give it a radius value of 1 mm and click ok. Expand this appearance Object>Expand Appearance.
Select the other S that hasn’t had the effect applied to it and with Erase tool (shift+E) erase its middle section by selecting it, holding option and dragging the selection you want to erase. Once you’re done select both S’s and with the Align menu click Horizontal Align Center to put one shape on top of the other. Select them both and click Unite on the Pathfinder panel.
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).
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.
My solution to solve the problem of making the letter t legible is to work within the reference and add elements together. In my research folder I also came across another reference that has a solution that I’m quite happy with.
Draw a rectangle that corresponds with the letter i’s stem and copy that over to the letter t. Trace the ascender and descender of the letter using the Pen tool and combine them with the rectangle that we drew just before.
Grab one of the rounded rectangles and copy it across, make sure that they are touching and combine them using the Pathfinder menu. Draw another rectangle above them and click Minus front on the Pathfinder Menu.
Now rotate that shape and combine all of the elements together. I added some extra points to give it a bit of character, once you’re happy combine everything using the Pathfinder Menu.
Copy the stem of the letter i over to trace the letter r, with the Pen tool trace the letter.
Copy the resulting shape (⌘+C) and delete a part of it using the Eraser tool (Shift+E), Offset the remainder shape with 0.5mm value.
Select the result and the stem and subtract the shape using the Minus Front button on the Pathfinder menu, Paste in front (⌘+F) the original shape. Use the eraser tool (shift+E) and delete a point, and combine everything using the Pathfinder Unite option.
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.
I wanted to create a more detailed filigree ornament so I printed the reference of the capital H and traced it on an A4 tracing paper with pencil and pens making sure that all the lines joined together. I scanned the sketch at 300 dpi and seeing the result in context I wasn’t too happy with the H because it looked like a lower case h.
Open the drawing in Photoshop and select the white area using the magic wand tool (W) you should be able to select the entire white area all at once. Create a mask layer from the selection, and paint using the the brush tool all the parts that you want to mask with black and in white to reveal.
Click and hold option on the layer mask and create a new colour fill with a grey colour, move the masked sketch layer to the top and set it to multiply. Create another layer and call it shading, option click the fill layer mask and with a soft brush draw the shading using shades of grey and black at 50% opacity.
You should end up with something like this, save the file as a tiff and place it on to your Illustrator file on a new layer called H ornament.
Create a new Layer called main H, I used a typeface by Arthur Vanson through Letterhead Fonts called Hindlewood as reference. Create a new calligraphic brush through the Brush the window with the below settings.
Start with loose brush strokes to get the feel of the shape making sure that it fits with Filagree ornament, once you feel confident tidy up the lines or retrace it with a Pen tool as I’ve done here.
Select certain points and Copy it (⌘+C) and Paste it in front (⌘+F) and delete the unnecessary points but keep the ones that would flow into the next shape. Reduce the stroke weight on the bottom curls to 0.25 pt to suggest some foreshortening and expand everything Object>Paths>Expand.
After that Simplify the paths to make it manageable through Object>Path>Simplify and tidy up the shapes. Copy the entire Shape (⌘+C), Paste it to Front (⌘+F), Expand Appearance, and Combine it all using the Pathfinder Unite option and give it a black fill. Send it to the back (Shift+⌘+[ ) once you’re done.
Once you’re happy with everything give it the default appearance (D) and change the stroke to .2 pt, give it a custom grey gradient and position it accordingly to suggest the light and shade.
With the rectangle tool (M) option click the art board and create a 5x5mm square. Rotate it 90 degrees and copy the shapes using the squares and the line tool create these two patterns. Group them separately to have a long one and a short one. Make copies of these patterns and create an Envelope Mesh (option+⌘+M) with these settings.
Manipulate the Mesh by skewing it using the Free Transform Tool (E), click the middle right handle of the bounding box and then hold both ⌘ and option together. Then use the Direct Selection Tool (A) and the Convert Anchor Point Tool to wrap the patterns around the corresponding individual shapes that make up the capital H.
You can modify the shapes within the Mesh by double clicking it and coming back to the Mesh by clicking the Envelope Mesh Dialog. I made one of the vertical lines thicker in this case to further suggest foreshortening. You can also expand the Mesh altogether (Object>Envelope Distort>Expand) you can then manually adjust the shapes therein.
Once you’re happy with how everything looks, Copy (⌘+C) individual shape that Meshes are wrapped around and Paste it in front (⌘+F) and send it to the front (Shift+⌘+] ). Select the shape above and the Mesh and make a Clipping Mask (⌘+7). Repeat the process to mask all the Meshes and group everything together.
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.
Open up the H main layer again and extract the black filled H that we sent to the back a couple of steps back and copy it (⌘+C). Lock the H main layer and select the placed tiff file and create a mask layer through the Transparency panel. Double click the blank area on the right of the preview area and your selection should disappear which is what is supposed to happen.
Draw a white rectangle that should cover the image and your image would reappear. Paste to the front (⌘+F) the black filled H that we copied earlier and create a compound path out of it (⌘+8).
Go back to the H ornament layer by clicking on the left preview window on the Transparency panel, select the vector tracing of the filigree and Copy it (⌘+C) to take to the Clipping Mask.
Head back to the clipping mask and Paste to the front (⌘+F) the filigree vector tracing, send the black filled H to the front (Shift+⌘+] ).
Select both the H and the Filigree shape and click Divide on the Pathfinder Panel which will cut the shapes into sections. Ungroup the result and select the sections you wish to reveal by deleting them. After you’re happy with everything change the results the fill to black. You should have the following result where the vine seems like it’s curling through the H, once you’re happy hide the ornament layer.
Create another layer called “Drop Shadow” Copy the silhouette of the H and the istoriaster text into this layer using the (⌘+C and ⌘+F) commands so it is placed directly where it is on the other layers and re lock their respective layers. Expand the appearance of the istoriaster and combine everything using the Pathfinder panel’s unite button .
Select the the entire Historiaster text and duplicate it using the Transform dialog (Shift+⌘+M), enter the following values and click copy.
Select both shapes and create a blend (⌘+option+B), with the blend tool (W) hold option and click the blend image to bring up the blend dialog or go through Object>Blend>Blend Options and enter the following. Go to the menu command Object>Blend>Expand then use the Unite command through the Pathfinder panel.
Let’s clean up this vector shape as there should be ragged edges. With the Lasso tool (Q) select the unnecessary points and then remove the points with the menu command Object>Path>Remove Anchor Points.
*quick tip: set a keyboard shortcut for the Remove Anchor Points command. I’ve got (⌘+Shift+option+0) on my computer, you can set it to your own preference*
These are the areas that you want to concentrate on, once you’re happy with the result turn on H main layer and the istoriaster layer to see whether you’re happy with the result.
Draw two horizontal lines on top of the shape we’ve just created and create a blend (⌘+option+B). Use the blend tool (W) to prompt the Blend dialog box again to select specified amount and enter 250.
Prompt the Move dialog box (⌘+shift+M) and enter the following and click copy. Hover the Blend tool over the result to prompt the Blend Setting Dialog and reduce the amount to 200. Repeat the steps and set the blend amount to 150.
Turn on the H main layer again and select the H silhouette shape in the back and give it a white stroke, a 3 pt stroke width, and Align Stroke to the outside.
Turn on the H ornament again to grab the filigree silhouette shape. Keep it selected and drag it to the Drop Shadow Layer on the Layer Panel. Fill it white and add a white stroke with a 2 pt Stroke Width and set the Align Stroke to Outside.
Create a new Layer called “Flourish” and draw a rectangle behind the H. Fill the Rectangle in red and give it a Round Corners Effect (Effect>Stylize>Round Corners) give it a 50 mm radius. Keep the rounded rectangle selected, right click>Transform>Scale enter the following values and click copy.
Open up the Brushes Library menu on the Brush Panel by clicking the lower left hand corner and select Borders>Decorative and select the Rectangles 2 brush.
Select the outer rounded rectangle and Expand its appearance, delete right horizontal path and create the following using the Pen tool and draw a circle to create this shape.
Select the inner rounded rectangle and prompt the scale dialog box (right click>Transform>scale) to create another rounded rectangle at 94% and click copy. Select both rectangles and create a blend (⌘+option+B) between the two, I’ve put 5 steps on the Blend option dialog. At this point you can manipulate shapes to get the right spacing between them, once you’re happy Expand the appearance so you have the rounded rectangles permanently applied to the shapes. Expand the blend (Object>Blend>Expand) once you’re satisfied with everything.
Expand the outer most rounded rectangle and Expand its appearance. Give it a black stoke and your desired stroke width. Combine the ends using the Pen tool and create the following.
Delete the right horizontal path of the the inner rectangles and create these shapes. Try to correspond with the top shape as uniformly as possible. With the Pen tool and Ellipse tool create these shapes that were referenced from the Sanborn Insurance maps.
Create a vertical line using the Linte tool (\) and in the Stroke panel select a width profile 1. Give the line a Zig Zag Effect Effect>Distort & Transform>Zig Zag with the following settings. Draw up this shape using the Spiral tool, Ellipse tool, and the Pen tool. Expand both results and group them together.
Draw a circle below the group and use it as a reference point to rotate 90 degree and copy the drawn objects. Rotate the result another 45 degrees. Create a tear shape by manipulating a circle and rotate it the same way and group everything together and give it a white stroke with the Corner setting set to Round and the Align Stroke setting set to Outside. Place this object on top of the red spiral we just made.
Create accents on the other end of the rounded rectangle shapes as well using the Pen tool, Spiral tool, and the Ellipse tool.
Still in the Flourish layer create a series of objects using the Line tool (\) and the rectangle tool (M), give it a white stroke and group it all together. Place it between the and the Drop shadow layer.
Turn on the istoriaster layer and select the text. Open up the Offset Path dialog box Object>Path>Offset Path and enter the following settings. Cut (⌘+X) and Paste in front (⌘+F) the result and create a Compound Path (⌘+8).
Give it a linear Gradient Fill and adjust it accordingly using the Gradient Tool (G). Once you’re happy with the result give it a Grain effect (Effect>Texture>Grain) with the following settings and set the Transparency setting to Multiply.
Give the same effect to the gradient fills on the H main Layer.
Go to the Flourish layer and draw a horizontal line and use the rotate tool by holding option clicking the lowest anchor point. Give it a 6 degree value and click copy, repeat this until you get the following and group it together (⌘+G).
Use the rotate tool (R) again and give it a 3 degree rotation and click copy. Use the Scale tool (S) and give it the following value. Select the lowest line using the Direct selection tool and delete it. Group (G) everything together. Compose this flare around the composition.
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.
Access your Brush Library Menu and open up Elegant Curls and Floral Brushes Panel. Drag that flare shaped Scatter brush icon on to the working area, delete the bounding box around it and give it a white fill. It should also have lines within it, select it using your Direct Selection Tool (A) and give it a white stroke.
Select the unnecessary Elements of this shape and place the remainder behind the flares we’ve made earlier.
With the Brushes available from the Brush Libraries we’ve just opened draw around the letters, flourishes, and drop shadows.
I use a font called Penman Birds and Ornament by Intellecta Design. I grabbed a couple of selected glyphs Expanded it, Ungroup (⌘+shift+G) and give it a white fill and a black stroke at 4 pt width and Align Stroke Outside.
Compose it around the layer and ended up with something like the following.
Grab a copy of one of the flares and rotate it. Create the following shape using the Pen tool to mask the flare. Before Masking it use the Direct Selection Tool (A) to select and copy it (⌘+C).
Select the flare and masking shape to create a mask (⌘+7) paste the path (⌘+V) and give it a width profile 1. Add some more lines for character with the same width profile to get the following result.
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.
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.
There has been a growing trend of vintage inspired designs. From packaging to typography, from posters to web designs, the vintage look is pervasive in the graphic design field right now. This is a showcase of the best vintage designs we could find on the web! Some are from yesteryear and others are inspired by those retro designs. You will see everything from packaging, to posters, to book covers, so checkout the showcase below for inspiration for your next design project.