process
How to easily create a record release promo poster with the Arsenal’s Crest of Arms vector pack
Hello GoMediaZine/Arsenal blog readers! Simon here with a new step-by-step tutorial. We will be leveraging the contents of our brand new Crest of Arms vector pack to create a poster for the release of PWR.CLRS’ first, self-titled, album. We’ll talk about inspiration, layout exploration, and execution.
Buy the Crest of Arms Vector Pack
The brief
Our framework for the tutorial is that we’ve been contracted to create a poster for up and coming musical act PWR.CLRS. The experimental musician is based in Cleveland, and produces a mix of hard-hitting electronic beats, distorted guitars, and spoken word surrealistic poetry. He’s releasing his first record, and needs to let the masses know about the fun night ahead. As we’re pressed for time, we’ll be leveraging the library of visual assets provided by the vector set to speed up our design process.
Gathering some inspiration, and putting a concept together
Buy the Crest of Arms Vector Pack
The inspiration from this piece came from three different sources: the vector pack itself, a superb portrait bathed in neon, and wide array of album art examples.
The vector pack features a lot of clean cut, precisely drawn shapes, with careful highlights, shadows, and ornaments. The elements that immediately jumped at me were the shield shapes (actual shield, circular patterned version), the stalks, and some of the oval frames. Although all the elements are exquisitely drawn, their complex highlight and shading made them hard to mix with other elements. We’ll look at techniques to remove some of the fluff.
The next bits of inspiration came from two photos available from the wonderful collections over at Unsplash. The first photo is this striking night portrait, taken by Alex Iby. I knew rapidly this would become my centerpiece element.
The second photo that helped to shape the piece was this other portrait, taken by Jay Clark. The slogan on this gentleman’s shirt was the key to the band name. I started with TRVE.COLORS, which morphed to PWR.CLRS (Power Colors).
Lastly, the amazing library of album art through the ages hosted at Fonts In Use proved good jump-starting material.
With the elements in hand, it became clear that the shield shapes would support, and frame, our neon portrait. A dark background featuring white text would make for increased contrast. Some additional visual elements (stalks), sprinkled with some textures would tie the whole piece together.
Additionally, we’re locating this era-defining performance at the Phantasy Nightclub in Cleveland (Lakewood), OH. The Phantasy is a special place:
“Nine Inch Nails debuted at the Phantasy. The Ramones, Iggy Pop, the Pogues, the Damned, the Psychedelic Furs, the Cramps, Motorhead and the B-52s all played there. The Phantasy was also fertile soil for Cleveland’s ascending 1970s and 1980s music scenes (…)”
(via this old news article)
Let’s set a date of February 28th for the performance, and indicate that tickets are available everywhere.
The execution
A few technical notes and reminders
We are going to use both Photoshop and Illustrator for this piece. Photoshop is were 99.9% of the work will happen, but Illustrator will be necessary for opening the pack’s files, and to customize the vector elements themselves.
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!
Document setup
We’re working with an 18″x24″ canvas. I made mine 18.5″x24.5″, in order to work in some bleed area. I’m at 300 ppi, and using RGB, as some of the texture magic happening in the finishing touches rests on it.
Next, we’ll use the automatic guide tool (View > New guide layout) to create a grid to align our elements on. We’ll be using four columns, and eight rows. The margins are set at .25″, so the inside of our outer guides will be our 18″x24″ canvas.
Main elements: the portrait
If you haven’t yet, grab Alex’ portrait over at Unsplash.
Let’s place it as a smart object in our document. It’s sized at 22.5% of its original height and width, and its center is located at X: 9.25″, and Y: 13″.
Next, we need to change the color of the background to #231f20 (a rough equivalent to CMYK rich black).
Main elements: the vectors
It’s time to grab the assets we’ll need from the vector pack. Let’s start by opening it in Illustrator. All of the ones we’re interested in are on that first artboard. I’ve highlighted them in red:
- The shield
- The “circular patterned” shield
- The wheat stalks
- The oval “toothed” frame
Let’s start by copying all of these in a new, empty Illustrator document to remove some of the clutter out of the way. I suggest a sheet that is at least 8.5″x11″, and in RGB color mode (to match the PSD document). A dark background (#231f20 for instance) will also help us to see our modifications to the assets more clearly.
Next up: to copy and paste these four assets to the empty Illustrator document.
Prepping the shield
The main change we need to make is to remove all the fluff from that main shield shape. All the shading do-dads have to go. The fastest solution is to ungroup the asset (Right click > Ungroup), to manually select all of the extra elements by hand, and to erase them.
At that point, we’re left with this neat, thick, white shield.
Next, we simply have to paste it in our Photoshop document, as a smart object. It’ll be sized 425% of its original size, and its center placed at X: 9.25″, and Y: 12.25″.
Once in place, this is what our layer stack looks like: the background, the smart object photo, and the smart object shield.
Masking the image using the shield
One of Photoshop many useful features is the ability to click on a layer thumbnail, and to load its content as a selection. Let’s click on the shield layer thumbnail while pressing the CTRL (PC) or CMD (Mac) keys to load it as our selection.
From there, with the photo smart object highlighted in the layer palette, we can simply click on the Add layer mask shortcut at the bottom of the palette to start the masking.
Et voilà, we have a mask in place. It isn’t showing/hiding the right thing yet, but we’ll get there shortly.
If we click on the layer mask thumbnail and press ALT/OPTION at the same time, we can have access to, and edit, its content. We’ll start by inverting the image, so it shows the proper thing.
Better, but we also need to mask the photo past the edges of the mask.
Let’s go back to our mask view (click + ALT/OPTION), and paint the outer side of the shield edge in black as well to hide the rest of our portrait.
If you use the paint bucket to quickly fill the area, remember to use a solid paintbrush to clean the seams.
And with that work done, the photo is properly masked!
A bit of extra depth
In order to give the shield around the photo a bit more visual presence, we are going to give some extra layer styles to simulate a real thickness. First, a thick stroke. It’ll be 35 pixels thick, and has the same color as the background (#231f20).
Next, a strong drop shadow, for the illusion of depth. Note the darker color used (#202020).
The result is a satisfactory illusion of depth and layers.
The circular shield
Time to add the “oval patterned” shield in the mix. After heading back to Illustrator, let’s change its color to pure white (#ffffff), then paste it as a smart object into our Photoshop document behind the photo layer.
It’ll be sized at 550% of its original size, and positioned with its center at X: 9.25″, and Y: 12.25″. Additionally, we’ll change its blending mode to screen, to interact more with texture elements later.
The circular, “toothy” frame
This little one needs to be adapted a bit.
First, its color needs to be changed to all white.
Next, it needs to be pasted as a smart object between the photo, and the main shield shape. It’ll be sized at 950% of its original size, and positioned at X: 9.25″, and Y: 12.03″.
After changing its blending mode to overlay, we get a neat secondary frame effect in place around the portrait, highlighting the face even more.
Last vector element: the wheat stalks
This last one is the finishing touch of the vector assets. It frames the overall piece, and also gives it a visual anchor within the canvas. We first need to head back to Illustrator to change their color to pure white.
Next, we’ll paste it as a smart object right above our background layer. We’ll size it at 1000% of its original size. Its blending mode will be overlay @ 50% opacity, and its center is at X: 9.25″, and Y: 12.3″.
And all of our elements are in place! Next, we need to talk text.
Copy copy copy
The copy for the poster will be straight to the point: the name of the act, the occasion we’re summoning people to show up for, the location/date line, and the ticketing information. All spelled out, we have:
- PWR.CLRS
- RECORD RELEASE PARTY
- PHANTASY NIGHTCLUB • CLEVELAND • FEB. 28TH
- TICKETS AVAILABLE WHERE TICKETS ARE SOLD
The typeface we’ll use for our poster is a free one, and comes from the League of Moveable Type. It’s called Orbitron, and has been designed by Matt McInerney. It’ll be the one used for all of our text elements.
PWR.CLRS is typed at 150 points tall, centered. Its center is located at X: 9.33″, and Y: 2.40″. Note that the kerning is set to optical.
RECORD RELEASE PARTY is typed at 60 points tall, centered. Its center is located at X: 9.22″, and Y: 21.94″. The kerning is set to optical as well.
Next, PHANTASY NIGHTCLUB • CLEVELAND • FEB. 28TH / TICKETS AVAILABLE WHERE TICKETS ARE SOLD are all part of the same text object. The “/” indicates a line break. It’s written 30 points tall, and placed at X: 9.25″, and Y: 23.21″. The kerning is set to optical as well.
And with that, all of our text elements are in place. Here’s a look at how our layers are organized up to now. Note the new Background layer group, to separate its elements from the rest.
Time for textures!
Now that everything is all well organized, it’s time to add textures. If you looked at some of my past tutorials, you already know that I LOVE textures. They help us to give substance, depth, and, well, texture, to very clean digital shapes. Luckily for us, the Arsenal has quite the library.
First up, the text
In order for the text to be more worn out, we’ll be using a texture from the Vintage Organic Noise Texture Pack. The texture in question is gma_tex_herbal-organic_09.jpg.
Remember how we used click+ALT/OPTION to edit the content of the shield’s layer mask earlier? Well it turns out that we can do much more than using brushes and the paint bucket when doing that. We can also paste the content of a texture file in that layer mask. Depending on the texture, it can make for a very rapid, and efficient way to give things a worn out aspect.
Let’s start by opening the texture in Photoshop, and copying the content of the file (CTRL/CMD+A to select everything, CTRL/CMD+C to copy).
Then, let’s add a layer mask to the Text layer group.
By clicking+ALT/OPTION on the layer mask thumbnail, we have access to that pristine layer mask’s content.
By pressing CTRL/CMD+V, we can paste the texture at the center of the layer.
In order to cover the whole piece, we’ll rotate the texture clockwise 90°, and size it up to 220%.
From there, in order to soften the intensity of the texture, we’ll use levels (CTRL/CMD+L) to fade the texture some.
The result is this beautifully, organically worn text.
Next, the background. We’ll be using a painterly texture from the Brush Stroke Textures, Volume 02 pack. It’s brush-strokes-textures-volume-02-004-sbh.jpg.
Let’s place it dead center right above the background layer, sized at 105% so it covers the whole background.
Remember the technical notes from earlier? Don’t forget to sharpen the texture smart object (Filter > Sharpen > Sharpen).
After using a clipped hue/saturation to desaturate the texture layer, we’ll be using a clipped levels adjustment layer to enhance its contrast.
Lastly for the background, we just need to change the blending mode to soft light @ 35% opacity for our effect.
With that our background is fully textured. Time to move on to texturing the piece as a whole, to tie everything together.
Texturing the full piece
The first texture we’ll use for the piece as a whole is from the Vintage Organic Noise Texture Pack again. It’s gma_tex_herbal-organic_07.jpg.
We’ll place that texture centered in the frame, and rotate it counterclockwise 90°.
It’s sized up to cover the whole piece, at 55%.
After sharpening the texture, we can simply change its blending mode to color burn @ 35% opacity. There’s no need to desaturate it, as it’s already a black and white texture.
In order to add some highlight at the top of the poster, we’ll then add gma_tex_herbal-organic_03.jpg in the piece.
This one is rotated 90° clockwise, and also sized up at 55% to cover the whole piece.
After sharpening, we can change its blending mode to soft light @ 25% opacity.
To add a hair of film noise, we’ll use GoMediaArsenal_FilmNoise_05.jpg from the film texture pack.
This texture needs to be rotated clockwise 90°, and sized up 2100% to fill the whole piece.
Once we have used a clipped hue/saturation layer to desaturate the texture, we need a clipped levels adjustment layer to enhance the texture’s details.
With that done, we just need to change the texture’s blending mode to screen @ 35% opacity.
With that, we’re almost done. Here are what our layers should look like at this stage:
Finishing touches
The last bit of stuff we need to do to this poster to wrap things up is to add a little bit of a halftone effect. Let’s start by making a merged copy of all the layers so far, by using the keyboard shortcut CTRL/CMD+SHIFT+ALT/OPTION+E. This will create a new layer at the top of our stack.
Let’s rename it to Halftones.
After that, we have to turn it into a smart object. With the layer highlighted, head to Filter > Convert for smart filters.
With that done, we can head to Filter > Pixelate > Color halftone. Note the value of the Max. Radius, up to 10, from the default value of 8.
The cool thing with smart filters is that the layer has a blending mode, and the filter itself has one as well. What that means is that we can make the effect even more subtle and believable. Let’s start by assigning the halftone filter a blending mode of overlay @ 100% opacity. To do this, let’s double click on the double arrow icon on the right-hand side of the layer thumbnail.
We then get access to this drop down menu to choose the blending mode.
From there, we can change the blending mode of the layer itself to lighter color @ 35% opacity.
If everything went according to plan, this is what the layer stack should look like.
Additionally, here are a couple of detail shots @ 100% zoom.
And here are some close-ups:
And finally a full view of the final piece:
Wrapping things up
Phew, that was a long one! I hope that you enjoyed following along 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.
The Crest of Arm vector pack is now available! Go grab it! If you already have, I hope you enjoy it, and that this tutorial gave you a sense of what you’ll be able to accomplish with it.
Buy the Crest of Arms Vector Pack
And on that note, I’ll see you next time. Cheers!
- Categorized: Go Media's Arsenal, Graphic Design, Illustrator, Photoshop, Tutorials
- Tagged: arsenal, crest of arms, how to, Illustrator, Photoshop, poster, poster design, poster design ideas, poster inspiration, process, SBH, The Arsenal, The Shop, tutorial, vector pack, vectors
The 6 Steps to Creating a Successful Digital Product
Digital Product Development Process
When creating a digital product, whether its an app or simple website, it is important to follow a consistent process in order to produce a consistently successful product. This is going to be a high-level overview of a process that can be adjusted to scale successfully to any project size and complexity.
Step One: Discovering the Problem
Firstly, it is the UX team’s job to understand the problem that is going to be solved. This part of the project involves meetings with the client or product owners, researching the competitive landscape, performing business analysis and analyzing any data that can be provided by previous iterations analytics. When it comes down to a digital product, like a website, it is also important to understand the people using the product, why they are using it and the type of technology they are comfortable with, as this will help the UX team define the best answer to the problem’s question.
Step Two: Defining the Best Answer
Next, the UX team is responsible for using the information discovered in step one to come up with the best solution to the problem discovered. Generally speaking, this second phase is marked with lots of sketches and initial concepts that can be quickly tested and iterated upon to drive towards the best answer to the problem. Wireframing, storyboarding, site-mapping (and information architecture), sketching and whiteboarding are routine elements that make up this phase of the project.
Step Three: Designing the Solution
Typically the design phase is what most non-industry folks picture when they think of when they hear digital product design. This is when the solution that was defined in Step two is crafted into a form that resembles a completed digital product. This means applying branding elements and styles to the structures defined in the wireframes, crafting a seamless digital experience that feels very much a part of the brand. This third phase is also when interaction design is created and generally involves working closely with the development team to ensure a seamless handoff into the next phase, development.
Step Four: Developing The Product
The fourth step in this digital product creation process is the actual building of the application using code, also known as development. Here the final designs that were crafted in step three are turned into front-end code (HTML, CSS & JavaScript) and hooked into back-end databases, CMS’s or APIs. Development is also when the actual interaction design is implemented, as well as any transition or loading animations, giving the digital product some life and allowing it to be tested in terms of user delight.
Step Five: Deploying the Final Product
The fifth and final production step of the process is deployment. Here, the final developed product is transitioned from its development environment to the live internet, where it can be accessed by the masses. Generally, this migration is taken care of via the modification of the Domain Name System (DNS), pointing URLs to their correct indexes. This phase can be completed with relative ease, however, a number of situations can arise when moving digital hosting and each deployment should factor in time to allow for bug fixes and code adjustments.
Step Six: Optimization (Constantly Improving the Product and Process)
The final step, optimization, isn’t a typical phase of the digital product production process. This is because Optimization should take place throughout the project and takes a number of different forms. In the initial discovery phase, optimization takes the form of user surveys and interviews to test the assumptions the team is making while performing research. In the second and third steps, it takes the form of prototype user testing, allowing users to interact with wireframes and mockups to test concepts and workflow ideas. In development and deployment, optimization takes the form of quality assurance (QA) testing, making sure to note and quash bugs as they are discovered. Finally, optimization even takes the form of a project post-mortem, analyzing the overall project to see how elements of the process can be improved to provide solid digital solutions in the future.
- Categorized: Graphic Design
- Tagged: development, process, product development, products, ui, ux, website
From Sketch to Vector Illustration Video Tutorial
The Tutorial you’ve been waiting for is finally upon us.
//
Introducing…
Long awaited, highly anticipated.
Our newest tutorial on the Go Media Arsenal release is based on Go Media President William Beachy’s wildly popular blog post on our ‘Zine, From Sketch to Vector Illustration.
This is Dirty: From Sketch to Vector Illustration Video Tutorial is an intimate look into Bill’s design process.
Included in this 1 hour, 11 minute intimate instructional tutorial:
* All the resources you’ll need to follow along including: the extended tutorial (mp4 video), textures, pencil art, jpeg illustrations and AI illustration file
* Bill’s tips and tricks on >
– Supplies (the Staedler Mars mechanical pencil and sharpener, eraser of choice, the pros and cons of hard vs. soft lead, preferred paper type)
– Drawing (Pencil Sketch) (Getting into the right head-space, getting your arm loose, why starting with rough sketches is so important, getting started, having proper expectations of yourself, being flexible while drawing, drawing using basic geometrical shapes, drawing the human face, developing a series of cheats to draw, shading – how much black vs. white, using reference materials)
– Scanning (equipment specifications, scanning specifications)
– (Vector) Inking (Equipment and software specifications, Dell(PC) vs. Apple, Mouse vs. Wacom, nodes and bezier lines, setting up your layers, setting up gradients and picking colors, inking options, creating shapes in Illustrator, cross hatching)
– Coloring (Photoshop vs. Illustrator, setting up your layers, process strategy, highlights and secondary light source, adding shadows, adding a texture)
Stay tuned to this spot, as well as to our Arsenal to find out when and how you can buy this product.
- Categorized: Go Media, Go Media's Arsenal, Illustrator, News, Tutorials
- Tagged: Adobe, Adobe Illustrator, color, coloring, design, draw, ink, process, scan, sketch to vector, this is dirty, tutorial, vector, video tutorial, William Beachy
Texture Tutorial: using metal and rust textures to destroy a design
Texture Tutorial: using metal and rust textures to destroy a design
Hello all! Simon from Studio Ace of Spade here again, ready to show you how to use my latest textures, the metal dumpster texture pack, to destroy and weather out the crap of your designs.
What’s in the pack?
A little while ago, there was one of these huge metal dumpsters sitting in a parking lot. Since no texture library is complete without rust and metal textures, I got my camera out and shot as many images I could of the banged-up monster. The textures range from subtle speckles in the paint to massive rust damage. This makes this pack highly versatile, and will help you bring either subtle touches or nuclear damage to your pieces.
The textures can be used as overlays, or pasted in layer masks. There are 45 textures in the pack, sized at 3264 x 2448 pixels.
How can I use these textures?
Well, I’m glad you’re asking, because just like with my photocopy noise textures pack, I’ve taken the time to write a little tutorial. We’ll be using OKPants’ sweet Road Hog tee design pack as the base artwork for our experimentation. What’s the Road Hog tee design pack, you ask? The Go Media team wrote a very convenient blog post to answer the questions you could have.
This tutorial is rather short, and takes advantage of layer masks and blending modes. Count around an hour of playtime in both Illustrator (Ai) and Photoshop (Ps). Plug your headphones, press play on some nice music, and let’s go.
The starting point: preparing the Road Hog design to our liking
The Road Hog tee design pack includes a biker/Americana inspired design, that you could take apart and re-arrange to your liking. Or, like me, you could just leave it in one piece. Here’s a shot of the design in Ai. This is the “sea foam” color palette.
The design also comes in a black and white color palette, an “heritage” color palette (rust tones), and an “Americana” color palette. Feel free to choose the one you prefer for this tutorial.
The original sea foam palette is nice, but the tones are a tad too strong and saturated for my taste. After a bit of research on Colourlovers, I managed to find a more subdued version of the color palette. After using the magic wand (Y) and the Select > Same > Fill color menu a few times, our base art was recolored.
The re-coloration process is really easy since the design is simple and the vectors well constructed. Just make sure that all of your shapes are ungrouped and unlocked, and it should go smoothly. I switched the bright yellow to the faded yellow at the left of the color palette image (#f0eec1), the main blue hue to the palette’s faded blue (#b2dabf), and the black to the dark brown/purple (#5c4a4e) at the right of the palette. I created the darker blue by lowering the brightness value of the light blue, which gave me #727d71.
After recoloring the artwork, I added an outline to it. There are multiple ways to do so, but here’s how I do it:
- Make sure all of your elements are grouped together
- Duplicate the design
- Merge the bottom copy in one shape using the pathfinder’s Unite function
- Change the color of the merged shape to #f0eec1. I chose the light color because I thought at that stage that the background of my final piece would be dark (the design has been hidden in this shot.)
- Finally, turn the design back on, and use the Offset path function (Object > Path > Offset path) to create the outline. I use Offset path as opposed to a stroke, because the result looks more polished. The downside to that is that unlike a stroke, you can’t easily edit the width of the outline once it’s been created. A few things about the values I’ve used: the thickness of the offset is set at 1/8th of an inch, and the joins to round for a softer feel.
- We’ve got ourselves an outline. To make things a bit cleaner, you can run the pathfinder’s unite function on that outline group one more time. This will fuse the multiple shapes that compose it together, living us with one big, clean entity. I’ve highlighted in red the area where the most simplification will happen.
Now that we’ve got ourselves a recolored and outlined design, it’s time to move things to Photoshop.
Setting up the stage in Ps
Much like when we were playing with the Awaken design, our Ps document will be an 18″x24″ @ 300 dpi canvas. This time, it’ll be setup in a portrait orientation.
I’ve completed the setup of my document with guides. I might have created a few too many, but oh well. I have guides at the 1, 2, 8, 9, 10, 16, and 17 inches marks vertically, and 1, 2, 11, 12, 13, 22, and 23 inches marks horizontally.
Background preparation
As I’ve said when we were preparing our vectors and adding an outline to them, my original intentions were to have a dark background on our piece. After progressing in my design, I realized that it wouldn’t work very well, so I went back and made sure that my background would be light instead of dark. For the sake of brevity, I’ll spare you that back and forth in this tutorial. So let’s skip directly to the correct layer order for a light background with a dark border.
Let’s fill the background layer with that faded yellow (#f0eec1) from our color palette.
On top of that layer, create a new one, filled with our dark brown this time (#584c4e).
We’re going to take advantage of the Arsenal’s vintage poster borders texture pack to reveal the underlying yellow layer to make it look like there’s a dark border around our design. The process is very simple, and consists of pasting one of these textures (I used the first one in the pack) in a layer mask. Jeff made a video with step by step instructions, and it’s visible here:
Vintage Border effects in Photoshop using Layer Masks from Go Media on Vimeo.
The result of that manipulation is the following:
Note that if you don’t own the poster border textures, you could paste any other grunge texture in the layer mask. This series of free vintage film plates textures from Lost and Taken would be an interesting alternate, although a tad too intense in this example:
Anyways. Once you’ve prepared your background, it’s time to move along and import our vector design in our Ps document.
Pasting the design from Ai
That’s probably the easiest step: simply copy your design in Ai, and paste in as a smart object in Ps. I sized mine to be around 16 inches wide.
Texturing the design itself
It’s finally time to use the metal dumpster textures. Place metal-dumpster-textures-018-sbh.jpg above the design.
The elements of the texture we’re interested in are these dark scratch marks. In order to extract them, we’ll need to desaturate the texture (CTRL/CMD+SHIFT+U), and to change its blending mode to Screen.
It’s not yet very exciting, I’ll give you that. Next, we’ll invert the texture (CTRL/CMD+I).
We’re already starting to see these scratches impact the design as if it was painted on metal and exposed to things scraping it off its support. To further the effect, we’ll play with the level palette (CTRL/CMD + L), in order to increase the contrast of the texture.
A few notes about my Levels values: the 100 on the left is the value for the dark tones. It means that I’ve made the dark pixels of the texture darker than what they originally were. The 0.75 is the value for the mid-tones. That slider is normally set at 1. Bringing it to 0.75 means that the mid-tones are also going to be darker. Finally, the 175 on the right is the value for the light pixels of the texture. It’s set to 255 by default. Bringing it down to 175 means that the light pixels are actually going to be lighter. Darker blacks and grays + lighter whites = high contrast texture.
Finally, I’ve leveraged a layer mask to allow the texture to show only on the design and not on the background.
To create such a layer mask is easy. CTRL/CMD+CLICK the thumbnail of your design layer to create a precise selection of its content, then click the new layer mask button at the bottom of your layer palette.
Following a similar process, I also added metal-dumpster-textures-022-sbh.jpg to the design. Its effects are much more subtle, but you can see them in the gear behind the skull/wings/bones element.
My levels values were a bit different:
It’s also to be noted that the texture was not inverted, and put on the Soft light blending mode at 25% opacity. I chose to do so because the results were less aggressive than when using Screen. I’ve also confined its effect to the design only by using the same layer mask process than before.
The next step was to impact the design layer even more than with its two textures. In order to do so, I gave it its own layer mask, and pasted metal-dumpster-textures-001-sbh.jpg into it. After sizing it to cover most of the design, and playing with levels to bring its contrast to new heights, this is the result:
The original texture
Playing with levels
The result
Impacted areas details
To increase the worn feel even further, I created a layer group containing the design’s layer and my texture. I then duplicated the background dark brown layer’s layer mask (CLICK & DRAG + ALT/OPTION+SHIFT) to it. The result isn’t very visible, but some of the mask’s grain lets the dark brown show through.
Global textures
If the textures at the previous step are important because they give their character to the design elements themselves, the ones we’ll apply now are just as important. They participate to tie the piece together, by giving their artifacts to the various design elements and the background in a continuous manner. You can choose to apply a lot of them, or just a few. I have three in my case.
The first one is metal-dumpster-textures-012-sbh.jpg. As you can see, it’s a fairly clean texture. The main elements I’m interested to see passed on to the design are those black, dirty marks. They look like smeared paint.
After placing the texture in the design (rotated 90° counter-clockwise), desaturating it, I’ve leveraged the levels to get the dark and mid-tones much stronger.
Once the blending mode switched to Soft light, and the opacity lowered to 50%, the result brings some subtle darker areas in the top left of the piece. It’s like some liquid slightly stained the art.
The next to last texture we’ll use is metal-dumpster-textures-037-sbh.jpg. It’s a texture that I use as a grain texture. There are only a few speckles of rust here and there, and the rest are a few light dots.
After desaturating it and playing with levels, here’s what the texture looks like:
And below is the result on the piece after switching it to Soft light @ 50% opacity. It’s very subtle, but still adds a little something.
Finally, the last texture I’ve used to add more of the same dirty stain type of finish to the poster is metal-dumpster-textures-030-sbh.jpg.
Nothing special to add to the process used before, other than because this one was a bit intense, I’ve put on Soft light @ 35% opacity only.
The last touches
We could add more textures to the piece, but it wouldn’t add much to the design. It’s better to stop there. Now, you could either leave the piece here, or add just a tiny bit more of contrast and grain. Either way is fine by me, and will equally look nice. You could also add fake folds too, but we’ll get to that in an upcoming tutorial.
The first of the finishing touches is to create a layer that contains a merged copy of all the layers of our piece. There’s a keyboard shortcut for that: CTRL/CMD+SHIFT+ALT/OPTION+E. Simply select your top layer, and press the keyboard shortcut. It will generate a new layer containing that merged copy of your piece. I renamed mine to “Comp” and placed it in its own layer group.
Next, make two copies of that layer. Name the bottom one Aged 2, and turn the top one off for now.
Download this Aged 2 action created by the good peeps at Go Media for an old tutorial, and run it on the Aged 2 layer. Put the layer on Soft light @ 25% opacity. The action created a photocopy type of effect, with something looking like old ink and grain. Below is a close up shot before and after switching the blending mode.
Finally, we’ll use the stamp effect action Jeff released a little while back. Run the action on that last copy of the Comp layer we have remaining. The action will create two layers, one with just the black pixels of the stamp effect, and another one (usually turned off) with some more details. Turn both of the layers on, merge them together, and call the result Stamp. Place that last layer on Soft light @ 25% opacity and you’re done!
If you want more info about the action before buying it, you can read this quick blog post written for its release.
Done!
And the piece is done! Using the metal dumpster texture pack, we were successfully able to age and destroy the design. You should totally mock-up your piece to impress your clients:
That’s it for me today. If you have any questions or suggestion about the tutorial or the textures, don’t hesitate to use the comments, or to tweet at me.
- Categorized: Go Media's Arsenal, Illustrator, News, Photoshop, Tutorials
- Tagged: Ai, arsenal, blending modes, Illustrator, Photoshop, process, Ps, Simon Birky Hartmann, textures, The Shop, tips, tutorial
Create a Rockabilly Poster With Vector Set 22 – Part II
A bit of background information
Hello all! Simon, the Arsenal manager here. Today, I finally have time to release the 2nd part of the vector set 22 inspired poster tutorial Steve Knerem poster a while back.
<Fair warning> the post is fairly long (6000+ words), but I deemed it necessary to take the time to meticulously explain the process I went through to re-design this poster. For instance, I took the time to detail my research and mood-board steps, which are often overlooked in tutorials. I also detailed as much as possible my “trial and error” style approach to choosing typefaces, and to constructing typeface arrangements. If you are a seasoned veteran, these extra steps will definitely seem boring, if not frustrating. Just skip them!</fair warning>
For those of you that haven’t been following, we released our 22nd vector set a few weeks ago. Steve Knerem, the artist behind the set’s content, decided to create a rockabilly themed poster to demonstrate the set’s potential. He then proceeded to write a tutorial about it. We said that we would expand a bit on Steve’s tutorial to bring his design to the next level, and to make it a tad more truthful to the rockabilly vibe.
What are we going to do?
First, we’ll be doing some research. There’s plenty to be learned from gig posters of the 1950s and 1960s, in terms of typefaces, composition, color palettes, etc. Our goal will be to identify some design elements and patterns from that era, and to improve Steve’s design based on them with the tools we have available now in the second decade of the XXIst century.
Second, we’ll see how we will recreate the patterns we’re seeing in our research to improve Steve’s original composition, while respecting his original concept. I’m anticipating mostly type work at this stage.
Finally, Steve’s original goal was to work towards a screen printed poster, hence his limited color palette and work primarily in Illustrator. I’m going to show you some of the techniques I use to texture and weather artwork, to make our clean and digital vector art look a tad more analog, and just like if you had pulled the poster out of your parents or grand parents’ attic after all these years. Sounds fun? Then let’s do this!
Research, research, research
Well, the easiest way to search for something these days is to google it. So I went ahead and researched using the following keywords:
Follow the links to see the results I encountered. I was hunting in the first couple links of the web search, as well as in the image search results.
There are already a few things that jump right to my face just by looking at these:
- The vibe difference between the 3 styles (rockabilly, 50s, and 60s) is pretty strong
- The rockabilly posters draw a lot on the Kustom culture
- The crazy gig posters with a bunch of colors and eerie designs started more in the 60s. This probably comes from psychedelic rock starting to be mainstream, printing techniques improving, and full color printing becoming cheaper
- Condensed, bold or extra bold sans-serif are among the most readable typefaces
- And Steve’s poster is even showing up in the search!
A look up-close
Let’s start with the rockabilly search. I ended up also exploring some of the links the web search turned up. There’s a pinterest board in particular called Rockabilly, Greaser, Pin Up, Posters & Art that was pretty rad. Just look at these:
While the Go Johnny go poster is cool, I prefer the Gene Vincent/Eddie Cochran one. This was a rather cheap poster to design and print: I count only 2 colors (black and red), and there’s no custom illustration. The eye gets attracted by the typeface relationships and color variations. One of the ways to add a few graphical elements is to use that star symbol. I see you coming already by saying that there are some other, way cooler looking other pieces on that page. There’s that Coney Island rockabilly festival poster, that Viva Las Vegas poster, and these 2 Social Distortion pieces. Well that’s the whole problem: a lot of the Rockabilly art that we see nowadays is contemporary art with a flair that’s inspired by the culture behind that music, the Kustom culture, etc. And the faithfulness of their emulation of the original design codes of the gig poster artists of the 1950s and 1960s varies greatly. That being said, looking at the typefaces they use, we can still see the affinity for either the hand painted sign type vibe, or the whole Sailor Jerry/tattoo vibe, or the condensed, cheaply printed, sans-serifs I was talking about earlier. Steve’s art matches the Sailor Jerry tattoo vibe pretty well, so that’s definitely a direction we can explore.
A look at the 1950s posters
These have a bit more color, and feature performers portrait. The “vintage diner” style of type seems to come from there. Looks at the BB King or T-Bone Walker type treatments. There are frames and not-quite-accurately-square color rectangles used as supports for content blocks, among other little design elements that immediately make us associate these posters with that era (stars, horizontal dividers, etc.). More to keep in mind.
1960s posters
And here are the 60s! Enter the psychedelic scene… There’s also that cut paper look. These are getting away from the style we’re trying to emulate for sure.
Let’s recap
So, it looks like we’re trying to find a happy medium between the boxing style posters of the 1950s and the modern interpretation of the Rockabilly/Kustom/Sailor Jerry approach. We’ll pay a special attention to type, and might modify or add to the borders already put in place by Steve in his original art. Finally, we might give some hierarchy to thew type with some box elements or dividers. And let’s go!
First: the type elements
Here are the type pieces from Steve’s design:
The title features a type midway between western and country. That’s the good part. The main issue I have with it are these pre-made grunge scratches on it.
The band names features some solid options (The Blue Storm, Hail Hail Hellstorm, maybe Jack is coughing), and some less solid ones (Home Grown Heroes, The Billies, Sound of Thunder, Young Turtles, 1950s Alive).
The gig information space is written in that condensed slab serif. I like it, but maybe we can find a more fitting one. And here are type pieces from our references:
I think it’s time to start looking at our typeface collection, at the Lost Type Co-op, and at Dafont.com. Working at Go Media as its perks, as they’ve accumulated a solid type library over the years. But since it’s not the case for everybody, let’s see what we can find before digging into the secret vault here.
The Lost Type Co-op
Lost Type has quite a few candidates: Mission Gothic, Dude, Mission Script, Sullivan, Bemio, Arvil Sans, Oil Can, Outage, Aldine Expanded, Duke, Onramp, and Tightrope. The cool thing is that you can get a personal license (and sometimes even a commercial one!) for these typefaces for free. But you should totally give a few $$$, as these are so amazing.
(Images via Lost Type Co-op and its various contributors – © all rights reserved)
Dafont
Let’s be honest, Dafont is a place listing cool typefaces but also some very lame ones. That’s why I’m very wary of using that site anymore. But maybe just for today we can find some good surprises. Remember, not all of these are free! Most of these, in fact, are free for personal use only. You’ll need to get in touch with the font creator if you want to use them on a commercial basis. The two categories I focused my searches on are western and retro fonts. And I have quite a list there too. Anderson Four Feather Falls, Anti Hero, Laredo Trail, Pointedly Mad, Regulators, Alpenkreuzer, ARB-218 Big & Blunt, ARB-66 Neon JUN-37, Franklin M54, HFF Sultan of Swat, NPS Signage 1945, Phat Phreddy, Super Retro M54, and Tattoo Ink.
(Images via Dafont.com – © all rights reserved)
But aren’t we supposed to design something at some point?
Agreed! But at the same time, all that research process is necessary to make sure that you’re producing relevant concepts. A rockabilly poster wouldn’t look rockabilly with the Matrix typeface on it.
There, it starts
So, now that you have downloaded and installed all the typefaces, that you tracked down the file you created when following the first part of the tutorial, and created a mood board with all your references, let’s do this. I wrote earlier that I only wanted to improve on what Steve did. So the pinup, the car, the guitar, and the microphone are going to stay. They form the core of Steve’s composition, and while they’re not really looking like a vintage multi-act gig poster, I think their impact is undeniable. First step: track down your Ai file from the first tutorial, and save a copy with a name clearly labeling the fact that you’re going to alter your design. For example: if my first file was named gma-vector-set-22-rockabilly-poster-tutorial-c1r1.ai (Go Media’s Arsenal – Vector set 22 rockabilly poster tutorial – Concept 01, revision 01), my new file will be named something like: gma-vector-set-22-rockabilly-poster-tutorial-c1r2.ai. You get the idea.
Now might also be a good time to clean out and to organize these layers, groups, etc. This will make your life so much easier in the long run, I promise.
I mean, check this out: isn’t the sight on the right a bit more pleasant?
Also, since we’re going to move elements around, I can tell that having them properly labelled is super helpful to keep track of them. Also, I’d like to point our something in my newly organized file: I have created 3 layers: art, color palette, and type experimentation. Art could end up getting some sub-layers (which allows to add hierarchy without having to group elements together). Color palette is a layer that just features 5 squares, one of each of the colors we’re using. It’s super useful to quickly switch an element or series of elements to the same color, since even when the layer is locked you can still use the eye dropper on its elements.
Type experimentation is obviously where the fun is going to happen. Let’s tackle the title first, shall we?
The rockabilly throwdown
Let’s start by pointing out the typefaces we’re going to try from that bigger list of contenders we’ve assembled. I typically start by typing the text I’m trying to format in uppercase, lowercase, and in a mix of both to see what character combinations look like. I’ll also add the typeface name in there for you to follow. And make sure you’re on the right layer and that it’s unlocked.
Once that’s done, we can start eliminating a bunch of these. It’s pretty clear to me that we should keep that western vibe in the title. Think about the Coney Island Rockabilly Festival poster vs. the Destination Unknown poster. The tattoo type looks great, but the sailor/pirate vibe is too strong and gets us away from the rockabilly feel in my opinion. Let’s weed out whatever doesn’t fit this declaration of intent.
We still have too long of a list, but it’s better. Other than the obvious western typefaces, I’ve also kept Bemio (both regular and italic), because it has the retro vibe we’re after, and a very dynamic quality. Combining these two (italic for “the” and “throwdown,” regular for “rockabilly”) would be swell. Phat Phreddy has also that distinct retro feel, but it doesn’t seem to sit well with that restrained list. Phat Phreddy is then out. Anti Hero is sweet, but it has a “raw” hand drawn vibe that doesn’t match Steve’s clean and detailed hand drawn vector pinup. Out. Tightrope looks sweet, but feels like too much. Out. Regulators seems a bit plain. Out. Aldine is a tad too expanded, but I’ll leave it in to try. Pointedly Mad seems perfect (think of the Coney Island poster again). Dude is simply too much. Laredo Train seems a tad bland, like Regulators. Out. Anderson Four Feather Falls seems like a solid candidate too. This leaves us to the final four (well, five, but I’ll combine both Bemio styles together).
It’s now time to create title treatments based on these typefaces. I used Steve’s as a base, as his was solid. I just didn’t like the typeface he chose. The other thing I’ve kept in mind is the treatment of “rockabilly” on the Coney Island poster. All of the work happens on the type exploration layer, and outside of the main canvas. I’ve also locked my art layer, just in case. I typed each word individually, and moved them around as needed. I’ve also used the effects arc lower and/or arc upper quite a few times (Effects > Warp > Arc upper/Arc lower – use a negative value for arc lower). The stars are just simple 5 point stars, straight out of the shape tool (radius 1: 25px, radius 2: 50px).
Don’t hesitate to heavily rely on your alignment palette to go faster, and to fine tune the overall feel by nudging the words and elements little bit by little bit. Finally, to make sure that my star groups would be well spaced all the time, I made a proficient use of blends (Object > Blend > Make and Object > Blend > Options). You can read more about the blend tool on Vector Tuts+ and on Bittbox.
The results
Letting a little bit of time pass between these iteration and the moment of having to choose which one I will go ahead with is helpful. I realized along the design process that the Pointedly mad typeface is the one used on the Coney island festival poster. While I don’t want to recreate what the designer of that poster did, I’m currently more attracted by the iterations made with that typeface. There’s also one made with Anderson Four Feather Falls that could be a contender.
I’m going to tinker a tad more these 3:
- For the Pointedly mad option (left), I’ll make sure to visually center the stars, and that the spacing is consistent all around
- For the Anderson Four Feather Fall options (top and bottom right), I’ll make sure to
- Mimic the layout of the Pointedly mad option (add a divider, change were the stars are, etc.)
- Add a divider to the current layouts
Bemio alone wasn’t rockabilly enough. Mix it in with either Pointedly or Anderson, and you have a way stronger result. Aldine looks super rad, but it doesn’t nail the vibe right on the head. It’s somewhat there, but there’s a better option available.
Ah also, I’m going to quickly create a new layer and archive the unused type experiments there. I’m just selecting the type combos I don’t want, and cutting them (CTRL/CMD + X) and pasting them in front on the newly created layer (CTRL/CMD + F). Like that, they’ll stay at the same visual spot, but not on the same layer. Once that’s done, just lock and hide the layer.
After playing a bit, I’m once again in front of quite a few variations on the same theme. My goal is to choose the final one out of the group (minus the final alignment adjustments and other touch ups). If I were to be designing this poster for a client, I’d have to be much more careful about how much I’m spending on just that text piece, in order not to blow the budget. Let’s have a look at the options I came up with.
While the choice is difficult, a winner seems to emerge. First, it looks like option based on a type combo have more impact. Exit for options 2, 4, and 5. The lines are way too thick in option 3. This leaves us with options 1 and 6. I wrote earlier that I didn’t want to recreate my Coney island poster reference, but it looks like my preference goes to the Pointedly mad/Bemio based option. Four feather just looks too complex with all the carved out shapes, and more “western” than rockabilly to me.
After a little bit of clean up (alignments, centering, expanding the typefaces to object, etc.), I have my final title element!
And here’s a comparison with the concept I quickly jotted down:
The concept is on top, the final at the bottom. You see that the spacing isn’t the same, the dividers are thicker and extend further, etc.
Time to remove the old title, and to put the new one in place:
Steve’s title (visible above my art board) used 2 colors (our green and our yellow), as well as outlines and shadows to stand out. Time to get some of that magic working.
Steve used a black shadow behind “rockabilly”, and multiple outlines on “throwdown.” Let’s see what a similar treatment would give. But before that, the first thing you want to do is to create a sub-layer on your Art layer, and to call it title. Then cut and paste your title object in front in that “title” sub-layer. It’ll make the editing much easier, as it will separate the title from the rest of the art. To create the sub-layer, just select your art layer, and click on the new sub-layer button. Label it properly, and place that title in there. We’ll that process of separating elements as we go through the edits, and we’ll have a wonderful layer structure at the end.
Let’s start by doing the black shadow.
Let’s have a look at the layer palette to understand how I created the effect (once again, please label your layers and groups!). I have 2 instances of “rockabilly” there, a yellow one and a black one. I simply copied (CTRL/CMD+C) and pasted in front (CTRL/CMD+F) to get my copy of it. I renamed the bottom one, switch its color to our black, and manually offset it with my arrow keys (6 taps down and 6 taps to the right to be exact). I’m pretty happy with how it makes rockabilly stand out. Next up, the treatment of “throwdown.”
First, we want to switch the word to green. Then, if we look at Steve’s original treatment, there’s a red outline, then a white outline to be able to overlay “throwdown” over “rockabilly” and neutralize what would be a clashing color combo (the green of “throwdown,” the red outline, and the yellow and black of “rockabilly”). I’m not overlaying the words on each other, but for the sake of sticking to Steve’s layout, I’ll redo both outlines.
Let’s paste a copy of “throwdown” in front of itself. Switch the bottom copy to the red of the background, and relabel the layer properly. Then, let’s offset the path to accomplish the outline (Object > Path > Offset path). I used 0.1 inch as the value, and left my joins on “miter” to keep their sharp edges.
Then, by using the pathfinder (the unite function, first option of the top row), I made sure to just keep the outlines of the letters. This simplifies a bit the paths the computer has to calculate.
I followed the same process to get my white outline.
And here’s our result, compared to Steve’s treatment:
Let’s be honest, it’s not great. We loose a lot of the dynamism of Steve’s angled words. And his multiple outlines were motivated by overlapping words, which we don’t have here. So I decided to experiment in a different direction. I selected my top, yellow copy of “rockabilly,” and applied a 4 point black stroke, aligned to the outside of the shape. This gives a lot more punch to the word.
Since I liked the effect a lot, I went ahead and removed the outlines and switched back “throwdown” to yellow. I then gave it the same treatment.
The result is nice, but slightly overpowering the rest of the title’s elements. Time to unify everything.
Four points of stroke on the stars and on “the” was too much. Same of a 6 by 6 arrow taps offset. And the offset on my horizontal dividers was too much too.
After tinkering, my final values are as follows: the offset on “the” and the star group is of 4 by 4 arrow taps. I have them configured to be of 0.1″ in Ai’s preferences. The stroke thickness I used on both is of 3 points. I nudged the stars a bit for a better visual alignment, and grouped my elements together for a cleaner layer hierarchy.
And finally, I’ve decided to switch “throwdown” back to green instead of yellow. It’s closer to Steve’s original title treatment, and puts “rockabilly” forward.
Taa-daa, we have our title in place. The reason why I’ve spent so much time detailing the process for the title is that it’ll be the foundation for the treatment of the rest of the text elements. We’re going to use similar values for offseting what will be offset, similar stroke values, and so on.
The date, time and place
These elements are secondary to the title in the original design.
I’m going to make my version close to the original design, I’ll just be using Pointedly mad for the typeface instead. I might also change the layout of the words a tad.
The layout and typefaces are very similar. I chose to make the date more preeminent than the town. I’ve also used resized stars taken from the title to space “USA”, it’s a cool little detail. In terms of sizes, I started with “August” written at 72 points, and “28” written at 144 points. The other sizes come from there. As you can see, I also gave the date and place their dedicated sub-layer. Time to place the date block in the poster.
And here it is. This updated version takes a bit less room, which I don’t mind. Note the object organized in their sub layer, which you can lock (at least for now).
Featuring…
Time to tackle one of the most important piece of the puzzle, the band list.
I’m going to tap in the typeface list we got on Dafont and Lost Type, as most of these have the vintage qualities we’re looking for, and will probably fit better than the ones Steve used.
Here’s a side by side view of the current version of the list, and of my work-in-progress list. I just copied, pasted in front, and slide on the side the original one. I’ve also created the band list specific sub-layer.
Step one, the “Featuring” title. Like I wrote above, I’m going to take my cues from the main title type element. I used Pointedly mad, and went through the same duplication, outline adding, and offseting processes to get the type element. I then quickly unlocked my title sub-layer to steal one of the dividers over, and just switched its color to green rather than yellow. I resized it using my direct selection tool (A) to fit the width of our band list, and taa-daaa.
Time to tackle the band names themselves. I first started by switching the old list to gray, like that I can write the new version above and use the former as a guide.
Here’s my first complete draft. I’ve used Pointedly mad for Home Grown Heroes, Mission Script (Lost Type) for The Billies, Anti Hero for Jack is coughing, ARB-66 Neon JUN-37 for the Blue Storm, Bemio Italic (with a custom line height value) for Hail Hail Hellstorm, Alpenkreuzer (center aligned, with a custom line height value, as well as a slightly bigger second line) for Sounds of Thunder, Aldine Expanded (with a custom line height value) for Young Turtles, and Sullivan Fill for 1950s Alive. Now, it’s time to remove the old list for good, and to clean up the alignments.
I know for a fact that this list is going to be aligned on the right edge of my poster. So I’m going to cleanly align to the right all of the band names that are on the right side of the list, make sure that the vertical distribution is a bit better, and manually place the names on the left of the list to make a visually compelling band name group. Finally, I’ll make sure that the divider under “Featuring” extends a bit more than all the way to the left of the list (cf. how the dividers of the title block extend).
Here’s my almost complete take on the band list. I’ve moved the name around a bit more, but as you can see, there’s still a weird gap at the bottom right. It looks like I’m going to have to add a band name to visually balance stuff out.
Let’s call them the Hot Rods. I’ll use that Oil Can typeface (Lost Type). I sized “Rods” bigger, centered the text, and used a custom line height value to make sure it looks not too spaced out.
Once you’re happy with the placement, it’s time to switch the text to outlines (make sure there are no spelling mistakes!), and to switch our brand new lineup for the evening with the old one.
And it’s pretty clear that we’re having a problem here. Not only is the list too close to the border on the right, but it’s also obliterating the guitar and the microphone on the left. One remedy: let’s take the size of the band names down a notch. I still want to keep the “Featuring” title and divider to the size they’re at right now, to match the main title better.
And voilà, we have a better fitting band list! There’s a little bit of room won at the bottom of the list, which is where I’ll be sticking the “Gates open at 9pm” information. To stay consistent with the original design, I wrote it in Pointedly mad. My type is sized at 42 points, with the kerning set on “optical” (like most of the text blocks throughout this poster). I also switched the “AM” mention to superscript on the character panel’s options. Time to also remove the old “gates open at (…),” and to move forward.
A check-in point
Where are we at?
With this super long tutorial, it seemed a good idea to take a quick step back, and to see what else we are going to finalize. We’re so close to the end I can feel it, but there are still a few details here and there.
- Finalize and touch up the look and feel of the “tickets” text block
- Check if downsizing the pinup just a bit to give more breathing room to the title is a good idea
- Maybe move the “Gates open at 9AM” mention back where it originally was?
- Potential background simplification
- Potential borders touch-ups
Now that the road map is set, let’s go for the final stretch.
Tickets and other miscellaneous information
The main change I want to make happen here is the typeface. I haven’t used a slab serif at all in the design so far, and I think it feels a bit out of place. I might use Sullivan or Bemio from Lost Type to have a certain sense of unity. Sullivan appeals more to me at this stage, but we’ll see as I go.
Here’s my first draft. The type is Sullivan Fill, set in 24 points. The line height is set at 24 points as well. “Tickets” is set at 60 points.
Just to make sure, I made an alternate version in Bemio. You can see the Sullivan version in light gray underneath. Given the somewhat condensed nature of Sullivan, I think it’s a better fit given the space I have available. Bemio looks clean and good, but it would take so much more room.
So Sullivan it is. It’s also time to align my copy to the right, since these text blocks will be aligned in the same fashion than the bands list. I also did some minor adjustments to the pricing block. Let’s put this in place in the poster, and remember to switch the “Tickets” title to our yellow.
Well, just placing the new type above the old one made me realize than my potential layout correction for the pricing section will look too weird. Time to revert that.
Much better, isn’t it? Let’s align everything the way it’s supposed to be (location information on the bands list, the ticketing information on the “Ticket” word), and delete the old type.
I also made a minor alignment alteration for the ticketing information, as it seems to fit the contour of the car better than way.
I decided to also move the gate information back down. The colors are switched over. The ticket and miscellaneous information block is done!
The pinup’s size
Next on our list is the pinup’s size issue. In its current state, I believe her head is a tad close to the title. That’s the only thing I want to act on: the width of the stroke around it, the colors, the placement of the halftones, all of these are good.
First, we need to select all of the pinups layers: the line art, the colors, and the outline. Thankfully for ourselves, we already grouped all of the elements together at the beginning. We can see that we included one of the halftone elements (bottom left, under the shoe) with the group.
I’m going to move the pinup on her own sub-layer, and un-group everything there, for better control. It’s just a game of cutting and pasting in front.
Once the pinup is in its own layer and the elements are un-grouped, we can have a better understanding of what needs to move and what can stay as is. I also managed to track down the halftone element as hidden in the outline group. I just slid it, out of there, on the main art layer for the time being.
What we want to do now is to select all of the pinup’s element, and to slowly size her down to leave something like half an inch of extra space. And sizing the pinup down by holding the SHIFT key and from the center top handle allows us to size the element down proportionally, while keeping it in a very similar spot. This avoids me to have to replace the pinup manually afterwards.
When checking in closely, it also looks like the outline is sensibly similar to the other outlines in place (see around the car, the guitar, and the microphone). So we don’t even need to worry about adjusting it.
Last little thing about the pinup: I used the same pathfinder technique than when creating the first version of the title’s outlines to clean up the shapes composing the pinup. The white shapes, once united, becomes a clean silhouette shape, rather than a shape made of multiple shapes. Grouping the inner shapes of the same color also helps to clean things up.
If you feel like it, and while you’re at it, why not applying the same cleanup process to the car, guitar, and microphone?
Background cleanup and simplification
Steve’s background (shown here without any of the type or main illustrative elements) features a star burst, flames, and the borders. First, I’d like to clean up and organize my layers further. Then, it looks like we have to simplify this background, as we’ve added a color (the burst’s light red) to our original color palette, and this will explode the budget of the hypothetical project. Finally, I think we can touch up the borders to make them visually centered.
Removal of the background burst
Select the burst shape, and hit delete on your keyboard. Done. Time to bust out the “That was easy” button.
We have a problem, and it’s the flames. They are also in the light red, and don’t fit there anyways since we removed the burst. Let’s remove them as well.
More cleanup and organization
Now that the extra elements have been removed, we can organize our leftover visual ornaments into a sub-layer as well. I choose to create one for the borders, one for the halftones, and one for the pinstripes.
Border fixes
The borders aren’t fuller centered, and it seems that some of the spacing could be enhanced as well (see my highlights below). I’m going to use my direct selection tool (A) and the alignment palette to make sure the yellow and white borders are horizontally centered, and to make the bottom gap between the white and yellow borders identical to the one side gap between.
While I was at it, I’ve also made sure to center and align the top yellow pinstripe and the wings.
Taa-daa, we have a fixed background!
Last overall touch ups
I’m pretty happy with the changes so far. Last but not least, the background still seems empty, or missing something. This is because we removed the burst and the flames. Elements like the halftones were arranged around these, and they left gaps.
Instead of putting the burst back in place, I’m going to use the halftones already in the design, as well as some new ones, to “fill” the gaps. The trick for the new arrangement to fit is to keep a maximum dote size consistent with the dot sizes already in the design. Unless you start the halftones placement from scratch. Finally, some halftones elements can be found through your symbol panel.
The button I’ve highlighted in red will give you access to an option menu. From there, navigate to Open symbol library > Dot pattern vector pack.
I created a new sub-layer named “New halftones,” colored the old ones in gray (to keep them visible as a non-intrusive reference), and started placing my new ones.
Symbols are super easy to place: just drag and drop them from the palette into your design. Here’s my first draft after tinkering a bit with placement and sizes. You can see which ones of the pack elements I’ve used in the layer palette. It’s time to turn the old ones off, and to switch the new ones to white.
Since these are symbols, we’ll have to expand them before we can change their color to white. Let’s do so by selecting them all, and going to Object > Expand.
And here are our white halftones.
I don’t think I’ve accomplished the consistency I’m looking for. The one I’m happy (in terms of scale particularly) with is the little one in the back of the pinup. Let’s see if we can reuse it to fill the other gaps.
I’m happier with this second attempt. I basically used Dot Pattern Vector Pack 12 multiple times, after grouping it. In order to not break the scale consistency, I only sized it up very cautiously (check the bottom left corner, under the left shoe). It’s time to shuffle our layers a wee bit to make sure that the halftone at the bottom left covers the void left were we hid the back of the car. I just created a “Halftones #2” sub-layer, and placed it above the car layer. I then proceeded to cut and paste in front the halftone that’s behind the shoe in that sub-layer.
Once that’s done, I moved my “borders” layer up, in order to have the border above the halftone. Time to delete the halftone that’s outside the limits of the borders. Just use your direct selection tool to select the part you don’t want, and hit delete on your keyboard to remove them.
It seemed clear that the gap between the yellow and white borders needed to be cleaned up as well, both from the halftone and from the outline of the pinup. To do so, I created two red rectangles that I placed high enough in my layer structure to be above the girl and the halftone, but not over the borders. I also made sure to size them properly to not go over the edge of the artboard, and gave them their own sub layer.
A bit more layer clean up, and we’re done! Delete the unused halftones, delete Steve’s old halftones, get the type explorations and color palette layers hidden and tucked underneath everything, and taa-daa, you’ve got yourselves a cleaner Rockabilly Throwdown poster.
What’s next?
The next step will be to take this design in Ps to add texture to it. Imagine yourself in your parents’ or grandparents’ attic, and finding it after all these years. We’ll manipulate paper textures, aging Ps actions, noise, stains, fake folds, etc.
Until it’s written, cheers!
- Categorized: Go Media's Arsenal, Illustrator, Tutorials, Typography
- Tagged: Adobe Illustrator, Ai, poster, poster design, process, rockabilly, tutorial, type, typography, vector set 22