TV Glitch Effects: Makin’ Em in PS (& Free TV Glitch Textures, Too!)
So guys, we’re kind of obsessed with these tv glitch textures we’ve been seeing around town lately.
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!
The logo is the visual face of the company. It doesn’t just tell you the company’s name; it helps to give you an idea of the style, tone and personality of the brand behind it. The way in which a logo is designed can affect how the company is perceived – even on a very subtle level – and great designers can make use of that brilliantly.
I’ve always been impressed by logos that manage to create an elegant, stylish and retro look. A vintage style logo can be such a difficult style to pull off, and usually involves a tremendous amount of work around getting the typography just right. This is where hand-drawn scripts come in really well, as retro logos often make use of custom, hand-written lettering – or heavily adapted typefaces. Other elements that are common to retro logo designs include the use of textures to add a level of grain or noise to the artwork. Often, shapes such as ribbons and circles to create a badge effect can help to add a nostalgic air to a design.
I’ve collected some of my favourite examples of logo designs that all make use of a vintage or retro effect, and have a touch of elegance to them as a result. If you’re about to start working on a retro design, I hope this collection helps to give you some creative ideas. And of course, if you know of any logo designs that should have been included in this post, I’d love to hear about them in the comments.
Which of these designs do you like best? Do you know of any other examples that you’d like to add? I’d love to hear about them in the comments!
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:
Hi, Philip Hepler here from 316 Graphics. A few weeks prior to writing this, Jeff Finley and I discussed possibilities for the next Arsenal vector pack. We decided to concept some hot rod elements which later turned into a vector set inspired by the art style of Ed “Big Daddy” Roth. Here’s the design process for this fun vector pack.
For the record, here’s my list of tools I’m working with:
- Plain copy paper
- “col-erase” blue pencils
- Mechanical pencil (.9)
- Light table
- Intuos Wacom tablet
- Adobe Illustrator CS5
- Inexpensive scanner/copier/printer
- 27” iMac
FIRST THINGS FIRST
Since we wanted to be inspired the art style of Ed Roth I did a Google image search for inspiration. I also checked out the official Ed Roth web site ratfink.com. Rat Fink was an anti-Mickey mascot that represented Roth’s attitude and style in the 50’s and 60’s. I always get sucked in to learning more about the artist, and in this case, ended up spending some time checking out his crazy car creations and wild monster hot rod themed illustrations. I ended up with four or five key examples of his work which I printed out and pasted above my drawing table for inspiration. Next I did a little brainstorming and made a list of possible elements for this theme. Some of the elements on my list were chrome pipes, flames, smoking tires, gear shifters, flying eyeballs, and Hot Rod Monsters of course!
PUTTING PENCIL TO PAPER
Next I took the strongest elements on my list and did a rough sketch of each, constantly referencing my inspiration images and imagining how those elements should look in this art style. I’m in the habit of using col-erase pencils to rough sketch my ideas on plain copy paper. The light blue lead of these pencils help me stay loose and general with my sketch so I can get the basic look right and leave the details for the next step. Then I draw over the blue sketch with a mechanical pencil to refine it more and add more detail.
I also use a light box and a fresh sheet of paper to refine and clean up my sketch even further if necessary. With my rough sketch ideas on paper I scanned and saved them as a pdf file and sent them off to Jeff to see what he thought of the elements so far. He replied back quickly that he was digg’n the elements, but also had a great suggestion to make multiple monster heads and facial features as separate elements. This would allow users to make their own Hot Rod Monster “Mr. Potato Head” style with mix and match parts. What a great idea! Now I was really getting excited.
WHAT’S YOUR VECTOR VICTOR?
With Jeff’s feedback and suggestions I did a few more rough element sketches and decided it was time to color them up in Illustrator. I scanned my revised sketches and placed each scan into my Illustrator file on a background template layer. For the more organic shapes of the monster features I used the brush tool with a 3 pt. round calligraphy brush and set the diameter setting to Pressure with a Variation of 3 pt. For the longer smooth strokes and more mechanical elements I used a custom art brush with rounded ends. Using my trusty Wacom tablet, I traced my sketches, trying to emulate the hand inked look of Roth’s illustrations.
Tip: instead of making multiple brushes of different widths for your graphic, you can adjust the thickness of individual brush stroke paths by increasing the stroke weight in the stroke palette. This is a quick way to get variable stroke weights in your graphic without having to duplicate and modify multiple brushes in your brush palette. See the video link below if I’ve lost you.
I also used the Blob Brush tool to fill in larger areas like the monster’s mouths and some quick irregular shapes and details. Feeling good about how the elements looked, I saved another pdf of the vector elements, sent it to Jeff for review, and hoped for the best.
WRAPPING IT UP
Thankfully Jeff loved the elements and how the vector pack turned out! But before I could send him the files I needed to clean up the elements and make everything nice and neat. First I saved a new copy of the file and then selected each element and expanded the appearance of the brush stokes to create objects (Object-Expand Appearance). With all the brush strokes now converted to black filled objects, I used the Unite function to make the objects one shape (Pathfinder window-Unite). For vector pack art like this, uniting the artwork as one shape makes cleaner, neater elements to work with. Just in case I need to go back and adjust or modify something later, I can always go back to my previous file where my brush strokes are still “live” and editable.
Live brush strokes
Brush strokes expanded to objects
Expanded objects united as one composite path.
GOT ALL THAT?
Here’s a video of how one of the elements was drawn in Illustrator, the brush settings I used, and the method to my madness!
I would like to thank Jeff Finley and Go Media for the opportunity to work on this latest vector pack release. It was a lot of fun to draw and I hope it will come in handy for one of your future projects!
This post was written by:
I’m the man behind the curtain at 316 Graphics, a full time freelance graphic art studio specializing in apparel graphics. The emphasis of my work is on hand drawn illustrations and the ability to adapt to a multitude of art styles and looks. Check out 316Graphics.com to view my portfolio, inspiration section, and freebie downloads. I live and work in Thomasville, NC (home of the big chair), love classic cars, and drink a gallon of southern sweet tea every day.
It’s me, Jeff Finley, with a quick video message for everyone thinking about grabbing The Making of Andrew Jackson video tutorial.
You know I still get emails asking about the process & techniques I use to achieve that authentic worn vintage vibe seen on most of the Parachute Journalists posters. I always respond that you can literally watch the techniques develop in real time on the Andrew Jackson video tutorial, which is much better than any description I could write.
Well enough typing, here’s my video message wrapping up The Making of Andrew Jackson Video Tutorial.
Again, thanks to everyone who has purchased the tutorial. If you have lingering questions about the techniques I used in the video tutorial, ask me in the comments! If you still haven’t picked up this tutorial, I promise that it will beef up your creative toolbox, so check it out.
Hey Go Media Zinesters, Jeff Finley here. If you didn’t know, I actually spent all of August working on new Arsenal and Zine stuff exclusively. To be specific, I was working on some really rad tutorials. One of which you folks read last week about how I created the artwork for my band’s song “24th of January.”
Learn to Create This Exact Design
Well I’m writing to tell you about my latest tutorial which I think you will really like. This time it’s of the premium video variety, downloadable from the Arsenal for only $49.99. If you keep reading, you’ll see a $10 discount exclusively for GoMediaZine readers! It’s a 2.3-hour complete walkthrough of my entire design process from start to finish. If you liked the artwork I’ve been doing for Parachute Journalists lately, then you’re going to love this tutorial. It’s for our newest song called Andrew Jackson.
Video Tutorial Preview
The song itself was inspired by the education (or lack thereof) in schools about the dark side of former U.S. President Andrew Jackson. He’s well known for his Trail of Tears where he marched thousands of Native Americans out of their homeland which led to lots of disease and death. The song is a satire and is a little different than our other songs because it’s sung by our bass player Jeff Steinwachs. It’s catchy and and a little rough around the edges, which is just how we like it.
Listen to the song
The artwork I created for the song took inspiration from the Trail of Tears. That’s where the tear drop shape comes from and in the video I described my design and color choices in more detail. The typography was very 1800s inspired and you’ll see how easy it is to create the type treatment in Illustrator. I do some hacking with some of Illustrator’s built-in toolset to get my desired results. You’ll see!
Even if you’re an experienced designer curious about how a fellow designer works, there are things you can take away from this video.
Topics Covered in the Tutorial
- Sketching and The Importance of Concept
- Creating a Type Treatment From Scratch
- Typography Tricks and Shortcuts
- Using Photoshop and Illustrator Together
- Authentic Vintage and Aging Tricks
- Retro Lighting Techniques
- Creative Usage of Arsenal Vectors & Textures
- Wacom Tablet Illustration and Line Art
- Combining Illustrations and Photos
- Graphic Design Composition and Layout
GMZ Reader Discount
The tutorial normally costs $49.99 but Zine readers get it for $39.99 throughout the rest of September. Just enter the coupon code “ajtutgmz” at checkout.
Coupon Code: ajtutgmz
I am excited to see what you guys come up with after watching some of the techniques I use. I think the stuff I teach you is versatile enough for many different applications. Let me know what you think!
Hey I’m Jeff Finley and I’m going to show you how to make an iconic poster using the new Vector Set 18 from Go Media’s Arsenal. I sent out an email to all our Arsenal customers and the two things they wanted most were more tutorials and to show real-world usage of our products. What you are about to read and watch is exactly that!
Note: If you want to follow along with this tutorial, you will need to purchase the new set. However, if you don’t, you can still get something out of watching me work in Illustrator and Photoshop as the concepts I show you are broad and you can still learn from them.
What you will learn:
Below is the 30 minute video tutorial of the creation of this poster. I walk you through everything from setting up your Illustrator document, creating pattern swatches from our Propaganda Patterns pack, using vectors as background elements, choosing an iconic centerpiece, simple and classy typography, and retro/vintage effects. This tutorial is for beginners and experts alike.
Video Tutorial: Create an iconic poster in less than 30 minutes
For those of you that prefer to take your time and go step by step, I have created a simple 10 step tutorial for you. Let’s get started.
Step 1: Set up your Illustrator document
Open Adobe Illustrator (I’m using version CS5, but pretty much any version of CS or greater will suffice. Go to File>New and setup you new document. For this tutorial I created a standard 11×17 poster size. You can use CMYK or RGB color mode, it doesn’t really matter. If you’re printing it at Kinkos, use CMYK. If you want to get it screen printed, you probably want to use unique pantone colors.
Step 2: Purchase and Download Vector Set 18
If you haven’t already, take a minute and purchase and download Vector Set 18 from Go Media’s Arsenal. You can skip this step if you already have some vector images you want to use or will create your own from scratch. Remember, this tutorial is meant to show how the Arsenal vectors can be used in a professional poster design and get results rather quickly.
The benefit of using our premade vector elements from the Arsenal is that it saves you time and can help you achieve pro results. You can create an entire design with them or use them as accents or embellishments to your own design. For me, as someone who takes pride in creating my own illustrations, I use Arsenal stuff if it helps me get my point across or solves a design problem.
Step 3: Create the Background Pattern
Open up the Propaganda Patterns vector pack that you downloaded from Set 18. After you’re done oohing and ahhing at the really cool patterns, choose the one in the upper left hand corner and press Ctrl+C to copy it to your clipboard.
Next go back to your original poster document and press Ctrl+V to paste it. You might have to enlarge it just a tad. Next, drag the pattern into your swatch panel to create a new pattern fill.
Create a new box that’s exactly the same size as your artboard. Should be 11×17. Give it a cream color like #EFEACE. Then copy and paste in front (Ctrl+F). Now with that still selected, click on your new pattern fill swatch. This will apply the repeating pattern to your entire shape! If for some reason it doesn’t work, you might have applied it to the stroke instead of the fill color.
Step 4: Find an Iconic Centerpiece
Open up the Mythology Vector Pack from Set 18 and choose one that you think looks like an iconic centerpiece. I chose the seahorse because I think it’s got a moody look that’s perfect for a vintage poster design. Pick one, then copy and paste it into your poster document.
Place the seahorse (or whatever image you chose) into the upper part of the poster and resize it to fit. With the object still selected, use your align toolbar to center it horizontally (make sure align to artboard is checked). Give it a nice dark brown color like #2B1F10. I wouldn’t suggest using 100% black here because the idea is to keep the colors in good harmony with each other and the dark brown adds a little richness and cohesiveness with the background.
Step 5: Create the Type Lockup
This part can best be described by using some typographic principles that I’ve learned over the years. First of all, choose a typeface for your headline. In this tutorial I chose Knockout FullFlyweight by HF&J. I could have chose ANY typeface, but I was going for iconic, clean, simple, minimalist, bold, and classy. Give all your text the same brown color as your iconic centerpiece.
One cool trick to make your headline standout (and help with creating type lockups) is to “bar off” your type. This simply means adding horizontal bars on the top and bottom of your type. The thickness should be somewhat similar to the thickness of your type.
And lastly, choose a third typeface – one that’s a good contrast from your headline. If your headline is thin, try going for a normal or extended typeface. Gotham Bold is always a safe choice.
If you’d like, here are some helpful links on pairing typefaces.
Step 6: Accent your Centerpiece
The poster is looking good already. Good typography goes a long way. You don’t always have to add more to make it look cool, remember that. However, I want to make the poster a little more visually interesting as well as get an additional color in there. Remember the message and meaning of your design before you go adding in vector elements willy nilly. If you don’t have a good reason for adding it, you probably shouldn’t. Less is usually better. However, in this poster, it’s job is to show off some of the versatility of the new Vector Set and it wouldn’t be doing its job by only showing off two of the seven packs.
So my challenge is to feature more of our packs in this poster without cluttering things up. For this purpose I went to the trusty “Infographix” vector pack. The charts, bars, graphs, lines and circles are GREAT for abstract backgrounds or accent pieces. Open it up and choose one that you feel fits best. In my case, I chose the one on the lower left. It would look fantastic behind my seahorse.
After you choose, center it in your poster right behind the seahorse. Give it a dark orange color like #876527. Looking good.
Step 7: Add a Pop of Color
I want to add a “pop” of color to complete my visual centerpiece. In this case I wanted to create some very simple wings behind the seahorse. I colored them a muted pink that I would tell a screen printer to print with a metallic ink. Or it would be cool to get a deep impression from a letterpress on that infographic element in the background. But that’s a different discussion.
I used the pen tool to create my own custom wings. These are easy to create, so if you’re a beginner it might be fun to try your hand at this. Watch the video above to see how I did it.
Step 8: Create a unique edge and a border
To make this poster more unique, I created a unique edge at the bottom. Honestly I can’t think of a reason why I did this other than it just makes the poster a little different. Using the pen tool, create an organic and smooth shape and color it white.
And finally, let’s add a border to the poster to complete the look. Just create a box exactly the same size as your background (11×17). Give it a 20pt stroke aligned to the inside and NO fill.
Once you’ve done that, save out your image! File>Export – export as a JPG at 300 DPI. RGB color is fine for this. You can call yourself done at this point, but I want to show you a few more tricks.
Step 9: Add vintage/retro effects in Photoshop
Open up your newly saved image in Photoshop. First we’re going to add an overall grain to the image using some photographic textures. I’m using a scan of an old magazine ad, but there are plenty of good ones online.
Put this on top of your image and set the blending mode to “screen” so you make the dark parts transparent. See my video tutorial at the top of this post to see this effect in more detail.
And finally, add some dust and dirt. You can set the blending modes of these to “multiply” to make the light parts transparent.
Here’s your final image!
Step 10: Mock it Up!
To help really put this poster into context, why not mock it up like a real poster? We sell some really cool Poster Mockup Templates made for showing a “real-world” context of your images. Of course, nothing beats an actual photograph of your printed design, but this is the next best thing!
Go ahead and copy and paste your image into the “your art” layer of this template and the white color layer is the only color visible. And since the poster has a white border, you might want to unlock the background group and fill the background layer with a grey color.
You’ll have to scale, distort, and possibly warp your image using the Free Transform controls (Ctrl+T) to help position your poster correctly for best results. The end result here is that it looks as realistic as possible. Is this a photograph of the printed poster? Who knows!?
You now should have a firm grasp on how to create a professional and iconic poster design using mostly elements from Vector Set 18. And hopefully you were inspired to create your own posters using other vectors or your own original illustrations. In fact, I’d love to see them!
In case you missed it, or want to review, consider watching the video:
Show off your results
We recently launched the Arsenal Facebook Page where we want you to post your images you’ve created using Arsenal vectors, textures, fonts, etc. I want to see how YOU’VE used our products in the real world. It’s not often I see the work our customers create, so take this as a call to action to share it with us on our Facebook page.
For more exposure, you can post your image in the User Showcase and comment on this tutorial below and link us to it!
When you think about the design process, what comes to mind?
I believe it is the combination of thoughts, mixed with emotions and pure forms that capture a person’s attention. We are all part of this thing called “madness. ”
The definition of Madness:
- 1. The state of being mad; insanity.
- 2. Senseless folly: It is sheer madness to speak as you do.
- 3. Frenzy; rage.
- 4. Intense excitement or enthusiasm.
In this tutorial, we’ll be modifying vector elements from Vector Set 16 to create a retro-vintage poster. Along the way we’ll uncover tips in Illustrator and Photoshop that can lend your designs a little extra TLC. I tend to work in both Illustrator and Photoshop. Both programs have their strengths and weaknesses, but together they’re unstoppable.
Collection of assets and file setup in Illustrator
Before we start we need to gather our assets. We will be using a few pieces from the fresh release of Vector Set 16.
I’ve looked through the Set and selected the images that I think are best suited to create a vintage, retro looking poster. The use of vintage pieces mixed in with some color radials will really bring the madness together!
I choose these vectors to show how flexible they can be. Please, go ahead & have fun! Experiment, tear them apart, change their color and size to make them yours.
Picking the right background for your vintage poster is vital. Paper, cardboard, and grunge textures can really bring your poster to life. This is a good time to look for some inspiration, so take a look at a few Bauhaus poster designs.
If you’d rather just use the background that I did, you can download it and get started.
In Illustrator create a new document. Set the color mode to RGB and set the size to 15×20 inches. Next, import the background texture file.
Author’s Note: If you use another background image make sure to re-size it to 15×20.
Copy the retro loop image from Vintage Elements and paste it into your document. You will notice these are very flexible, you can change colors and re-size different individual sections of the shape.
Using the Direct Selection Tool (white arrow), select the top end of the four lines and drag upwards to lengthen the loop. Repeat this on the left side.
If you’re having trouble editing this shape, take a look at this video overview.
The color palette plays an important role in setting the mood for a retro poster. If you’d like to use the same colors that I’m using, download these color swatches for free.
Now lets change the color of the segments in the loop image. With the Direct Select Tool, select a line that you’d like to change.
Hold down SHIFT and select all the segments of the line. Now select a color swatch to change the color of the line segments.
These are the ones used above: Blue-green #66A9A6 Tan #D9D5A9 Red B93826 Black 000000
Author’s Note: Experiment with colors, you’ll surprise yourself sometimes. For added inspiration in the color selection process, visit Colourlovers.com – a great community site with all sorts of color schemes and patterns.
Let’s add a drop shadow, this will help create some separation from the background.
Now it is time to bring in other vector elements to round out the poster. I added one mean-looking Ape from Primates and the state of Alaska from Maps of the USA to the eye of the loop.
Make sure these new shapes are arranged underneath the loop that we just altered in steps 1-4.
Author’s Note: I added some quick homemade ink drops for fun right under the chin.
Lets use this color wheel from Color Radials to give the background some color. Set the blending mode to overlay and opacity to 22%. Now select and drag from the corner to make it larger.
Oooo, that looks good. In fact, lets add another Color Radial and place it just above the primate below the vintage element as shown above. Make sure the blending mode is set to multiply and opacity is 49%.
Author’s Note: Use your best judgment for size and placement of vectors.
Now select ctrl+c and ctrl+f to place in front, select and expand it till the center is filled with the smaller circle. Make sure the transparency is set to multiply and opacity is 49.
We’re using the same color radial so re-size and place below the chin of the ape.
Add a compass rose from the Maps Vector Pack, and lets set the transparency to multiply and place it over the color radial as pictured above. Now we’re done with adding the vectors and creating the poster’s composition.
Used the font Blockhead and played with the color and transparency to give it a washed out feel. Simple but effective.
- 1. Font size 120 set the AV to 50
- 2. Change color to 66A9A6
- 3. Now go to effect and choose style inner glow. Set mode to screen, opacity to 84 with a blur of 15.2
- 4. Go to filter, click on style and add a drop shadow. Set mode to multiply, opacity to 75
- 5. Make sure the font transparency is set to multiply.
Creating a vintage pattern background
Alright. We’ve finished the foreground elements, but I think the poster is still missing something. Let’s add in a retro background pattern and see where that takes us. To make the background, we’ll grab a simple shape from the Vintage Elements Vector Pack.
Select the shape and change it’s color to FCBA63. Next, change it’s blending mode to Multiply, and lower opacity to 38%. Now we’re ready to stretch Adobe Illustrator’s legs a bit. Drag the shape to the right, holding Shift (constrain movement) and Alt (drag duplicate). Now, without clicking anything else in between, hit Ctrl+D to duplicate this move eight times. Ta-da! A row of eight vintage shapes.
Watch the video below to get caught up and see Ctrl+D used to finish out the background.
The end of Part I
Congrats! You’re done with your layout and work in Adobe Illustrator. From this point on we’ll be working in Photoshop to add fairy dust & final touches. Get a load of the image below for a sneak peek at the final piece. We’ll be covering these techniques this Friday, so stay tuned for part II.
Share your thoughts, questions, and comments with us below. If you take the challenge to follow this tutorial yourself, post the results in our User Showcase and link to it in the comments.
What you will learn
In this tutorial, you’re going to learn how to create a vintage, retro-modernist poster in Photoshop. You’ll also learn some vintage coloring techniques, retro photo effects, and some cool 3d typographic effects. You’ll also need Adobe Illustrator to create vector paths that will then be imported into 3ds max. This won’t be a typical step by step tutorial, but more of a walkthrough of how I created this poster for a real client.
The design brief
The poster is for North Coast 99, an annual recognition program that honors 99 great workplaces for top talent in Northeast Ohio. Every year they have a unique design that is used as a poster and magazine cover for Inside Business magazine.
The concept behind this year’s design was to honor businesses in Northeast Ohio who were able to grow even during the recession. Themes that the client provided were the words “Pioneer & Persevere”, a plummeting line graph to symbolize the recession, and green/nature elements to symbolize the environmentally conscious.
I am a firm believer in sketching out some ideas on paper before you start. This helps get your mind going and the pressure is off. Here’s a list of things to make sure you think about when sketching your ideas.
- Does your sketch include the themes or subject matter provided by the client?
- Is your sketch the right proportions of the final design?
- Does your sketch properly convey the meaning behind the design?
Create your type in Illustrator
The first step is to use Adobe Illustrator to create your type. Choose your fonts wisely. How do you know what font to use? In this particular case, I used Fritz Quadrata because it is classy and has a slight flare-serif characteristic of many retro typefaces made popular in 80’s movie posters.
But you can use your favorite font, as long as it helps you achieve the vibe you’re going for. Other fonts great for vintage and retro design are Serif Gothic, Kaptiva, Garamond Ultra, Windsor, Korinna, Liberty, Tango, Flange, Springfield, Seagull, Legothic, or Scentogram to name a few. Lay out your type and go to Type > Create Outlines. Save your document in AI 8.0 format. This is key! You must save as AI 8.0 in order to import your paths into 3ds Max, otherwise, you’ll get an error.
Set up your scene in 3ds Max
Open up 3ds Max (if you don’t have this, Cinema 4d will do the trick as well). I use 3ds Max simply because I learned it in college and am more comfortable with it. I can get results I want quickly.
What is the final output size of the poster? In this case it’s 11” wide by 14” tall. Or 3300×4200 pixels at 300 dpi. Eventually you’ll need to set your render settings to this, but for now, let’s just lock that aspect ratio and make it 500×636. This is good for speedy renders while working.
Then create a camera and set it up at the proper angle. One shortcut I like to do is manipulate my perspective view to get my desired angle and then create a camera in top view. Then select my perspective viewport and press Ctrl+C to automatically position my camera to the same view. Cool huh! Now I can switch to camera view and keep the angle I originally had in the perspective viewport.
Then right click on “Camera1” in the upper left of the viewport and select “Show Safe Frame” and this will give you the correct proportions for your poster.
Import your paths into 3ds Max
Go to File > Import > Paths and select your .ai file that you just saved. You’ll be presented with a dialogue box that asks if you want replace the scene or merge with current. Just click OK to merge objects within the current scene. It will ask if you want to import your paths as single or multiple objects. In this case, just select single object because you’re not going to need to edit these letters individually.
Once they’re imported, you’ll see they came into your document very small. I usually like to scale my letters up some with the scale tool. After you’ve done that, proceed to the next step.
Extrude and Bevel your type
Apply a Bevel Modifier to your type and use my settings as reference. You can tweak them to your liking to get a deeper bevel or a more rounded bevel.
I prefer the subtle bevel that’s barely noticeable but it helps add realism. Why? Because a standard extrude with no beveled edges has a hard time looking realistic. In reality, every single object has some sort of corner to it, not matter how subtle. With a simple extrude, you don’t get any corner. It’s an exact 90 degree angle from one side to the other. You need that subtle beveled edge to catch light that gives your letters that sexy specular highlight along the edges for added realism.
Once your bevel is set up to your liking, rotate your text 90 degrees so it’s on its side reading from bottom to top.
Create the line graph
Go back into Illustrator and create a line graph similar to the one I have shown here. In this case, you see the graph goes down and then steadily rises to the right. This is supposed to symbolize the businesses that overcame the recession.
Once you are happy with your line graph, expand your strokes and save your file in AI 8.0 format and import into 3ds Max. Just like we did before.
This is where it can get tricky. I wanted my line graph to come in from the left side of my type, wrap around the letters, then exit on the right side. It’s more of an abstract representation of the line graph rather than making it so literal. It makes the image interesting.
You’ll need to rotate around your scene to make sure you don’t accidentally intersect the line with your letters. It’s not hard, but it just takes some time.
Add an extrude modifier on this line and check the settings below.
Once you’re satisfied with the result, we’ll create the ground that the type is sitting on.
Create the ground / hill
Create a new geosphere and positioned it under your letters. Adjust the size to your liking. Crank up the number of polygons to make sure you get a pretty round edge. You don’t want to be seeing any blocky edges that scream “hey, I’m CG!”
Apply Textures / Materials
With your hill still selected, you can go ahead and apply a new material to it. Instead of “standard”, select Matte Shadow. This will essentially make the hill render ONLY the shadows cast by the light and NOT the hill itself. This is going to be useful later when compositing the scene together in Photoshop.
For the type, apply just a standard blinn material to it. Adjust the diffuse color to white and you’re set. You could play around with the specular highlights and glossiness if you want as well.
For the line graph, just apply another standard blinn material but make it red. Check the box that says “2 sided texture” because otherwise, the backside of your “ribbon” will be invisible. Again, you could adjust specular and glossiness to your liking. Remember, specular is how much light is reflected on the surface and glossiness is the size of the highlight. The higher the number, the smaller and more precise the highlights.
Set up your lights
First create a skylight in the top viewport. Adjust the intensity to something like 0.8. You don’t want it too bright, because we’re going to be adding more lights next.
Add a targeted direct light next. AIM it from behind the letters as if it’s about 3pm in the afternoon. In my initial concept, I wanted to have the sun behind the letters so I could give it a glowy feel. Later, we’ll be compositing a real sun photo to get a more realistic look. Turn on cast shadows.
And lastly, clone your direct light and turn off the cast shadows. Position this light more in front and lower the intensity to something like 0.4 for a subtle effect. This light will act as a fill light so it’s not so dark in the front. Typically if you take a photo of a subject with the primary light source behind them, they come out silhouetted. We don’t really want that so much in this case. This fill light helps. Feel free to adjust the settings to your liking.
Environment and Render Settings
Go to Rendering > Environment and give your scene a light blue background color. This is only for the render, not the final scene. In Photoshop, you’ll be adding a new background later.
Turn on Advanced Lighting – Rendering > Advanced Lighting and select Light Tracer from the drop down menu. If you’ve got a fast computer and some extra time, feel free to turn up the bounces to 1 or 2. I usually stick with 0 or 1 bounce because I cannot wait for the extra render time. This gives me results that I like just fine.
If you’ve been rendering as you go at the smaller size we mentioned in step 3 and you’re ready to do the final render, then follow these steps. If you’re still not happy with your result, keep tweaking and making changes as you see fit. Once your happy, set your render output size to be 3300×4200. This is 11×14 at 300 dpi.
Render and Save as a .tga file with Alpha Channel
Render your image. This may take a while so grab a cup of coffee or take a break. Once it’s finished rendering, save the file as a TGA w/ Alpha Channel. These are typically your default settings for TGA files so I just let them be. TGA files are uncompressed and we can use the Alpha Channel to remove the background seamlessly. It’s brilliant!!
Setup a new document in Photoshop
Create an new document in Photoshop. 11” wide by 14” tall, 300 DPI, and RGB color. Even though this will be a printed piece, I like to work in RGB sometimes and then convert my colors later. Sometimes the effects I apply might look funny or not at all in CMYK mode. So start in RGB in this case.
Open your rendered .tga file
Open your .tga file that you just rendered. Check out the channels tab and Ctrl+click on the Alpha Channel to make a selection around it. Go back to your layer, copy and paste the art into your new document that you created in step 12. Now you’re officially ready to start the post-production editing in Photoshop. This part gets fun.
Create a retro stylized grassy hill
To design the retro looking hill, first just create a single ellipse as your ground plane. Remember how your original geosphere looked in 3ds Max? Try to make it exactly the same. Line it up with your letters and shadows so it looks real.
Then apply a gradient overlay from green to red to purple. Tweak to your liking.
Then duplicate the layer and scale it vertically from the top down ever so slightly. Duplicate it again and do the same. Each time scaling it down from the top. Once you do it 3 or 4 times, you’ll see it gives the ground a more rounded, three dimensional look that also has this retro faded gradient effect.
Add Clouds and a Glowing Sun
Go outside and snap a photo of the sky, with a good bright sun. If you’re not inclined to do this yourself, you can find plenty of good sky photos on stock photo sites. I chose one that has some clouds, but it’s most got a bright sun with nice rays shooting off.
Once I had my sky photo in there, the sun was not as big as I had envisioned. So I made a selection around it and copied and pasted it on top and made it bigger. Much bigger. I faded the edges with a soft eraser brush to get rid of the hard edge.
Add birds in the sky
You can surf some stock photo sites for a nice flock of birds photo or grab one quickly from the Flock of Birds Vector Pack in the Arsenal. If you’re using a photo, make sure the sky behind the birds is white so you can set it to multiply to get rid of that background easily. The birds are there to show scale of the letters. It helps give the type that “monumental” look.
Now duplicate the bigger sun from earlier and put it on top of your text and birds. Set the blending mode to “screen” to give it a nice glowing effect. You might want to adjust the levels or softly erase the edges of the layer to suit your fancy.
Add some cloudy smoke textures
Any nice photo of smoke or clouds could do the trick, but we’ve prepared a special set of ready-to-use Smoke and Cloud textures. You can buy them here. I set the layer to “screen” to give my clouds a little extra oomph behind the text.
Add some Dust Textures
We recently released an awesome new Dust and Particles Texture Pack that are perfect for this job. I pasted in one of the dust textures and set the layer to screen and it’s literally like a magic bullet for adding some subtle aged effects without looking grungy or too dirty.
Boost Contrast and add a vignette and border
Increase the contrast by creating a new Levels adjustment layer on top and tweak the settings to get a little more contrast. Then Copy > Merged and paste a new layer on top. Duplicate that layer and apply a Filter > High Pass on it. Then set the opacity to something like 40%. This will give your image more contrast.
Next, create a nice subtle vignette on your image. But first, merge the high pass layer with the original. Then go to Filter > Distort > Lens Correction. Change the Vignette amount to -100 and press ok.
Achieve that vintage, worn, and analog look.
One major characteristic of retro and vintage photos is the grain. The easiest way to add some of that grain is to add noise, blur it, then sharpen it.
To be more specific, Copy > Merged and then paste your image on top of all layers. Add some noise, roughly 25-30%. I find that this number can vary a lot depending on the size of your document. Select “Gaussian” and “monochromatic” and press ok.
Then you want to run a Gaussian Blur on it to tone down that fake looking noise. Simply adding noise is never enough, it always looks fake and too sharp. Blurring it with a radius of 1-3 pixels is key.
The last part is using the Smart Sharpen filter. Set the amount to somewhere between 100-140% and a radius somewhere between 10-35 pixels. This is really up to you. This will boost the contrast and give everything a slight glowing edge or halo between the lights and darks. I have found this is a tiny detail that you’ll see on truly aged and worn posters. If you look closely, especially at some letters on old movie posters, you’ll see there is some grainy noise in there, but also a slight halo around the edges. The higher your amounts here, the more contrast and more halo you’ll get. You don’t want to overdo it here, but do just enough to get the look you want.
Add your copy and logos
The client wanted to make sure their logo and sponsor list were present on the poster. As well as a few other required lines of copy. I originally made these smaller, in the corners to further emphasize the massiveness of the type monument.
Use your judgment and eye for typography to place the copy in an aesthetically pleasing way. I avoided using drop shadows on my type, even if that sacrificed some of the readability somewhat. Sometimes drop shadows look tacky and fake.
Quick and Easy Retro Color Treatment
It gets even more fun. To truly achieve a retro, vintage look in Photoshop, we’ll need to treat the colors. We’ll make them look washed out, faded, and bleached by the sun. There are many ways to achieve this look digitally, but I’m going to show you one of the easiest and fastest tricks to get that retro, 70’s or 80’s look.
One characteristic of those photos is that the darks tend to be bluish and the lights tend to be yellow.
First thing is we’ll make a new layer on top of everything you’ve already done. Fill this layer with a pale yellow color and set to “multiply” and 50% opacity.
Make another layer on top of that and fill it with a deep purple. You can try leaning more on the red side or more on the blue side. Either one will work well. Set this layer to “lighten” and you could tweak the opacity to somewhere around 50-100%.
Here is the final poster. If you want, do a copy > merged and paste the new layer on top of everything. Then duplicate it, run a high pass filter, and set it to hard light. Adjust the opacity to your liking to achieve a cohesive fake HDR sharpening look.