Poster Design Ideas: How to easily create a record release promo poster with the Arsenal's Crest of Arms vector pack

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

How to easily create a record release promo poster with the Arsenal's Fistful vector pack - poster design ideas

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack - poster design ideas

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Lastly, the amazing library of album art through the ages hosted at Fonts In Use proved good jump-starting material.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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:

  1. 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.
  2. 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.
  3. 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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Main elements: the portrait

If you haven’t yet, grab Alex’ portrait over at Unsplash.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Next, we need to change the color of the background to #231f20 (a rough equivalent to CMYK rich black).

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Next up: to copy and paste these four assets to the empty Illustrator document.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

At that point, we’re left with this neat, thick, white shield.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Once in place, this is what our layer stack looks like: the background, the smart object photo, and the smart object shield.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Et voilà, we have a mask in place. It isn’t showing/hiding the right thing yet, but we’ll get there shortly.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Better, but we also need to mask the photo past the edges of the mask.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

If you use the paint bucket to quickly fill the area, remember to use a solid paintbrush to clean the seams.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

And with that work done, the photo is properly masked!

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Next, a strong drop shadow, for the illusion of depth. Note the darker color used (#202020).

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

The result is a satisfactory illusion of depth and layers.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

The circular, “toothy” frame

This little one needs to be adapted a bit.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

First, its color needs to be changed to all white.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

After changing its blending mode to overlay, we get a neat secondary frame effect in place around the portrait, highlighting the face even more.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

By clicking+ALT/OPTION on the layer mask thumbnail, we have access to that pristine layer mask’s content.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

By pressing CTRL/CMD+V, we can paste the texture at the center of the layer.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

In order to cover the whole piece, we’ll rotate the texture clockwise 90°, and size it up to 220%.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

From there, in order to soften the intensity of the texture, we’ll use levels (CTRL/CMD+L) to fade the texture some.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

The result is this beautifully, organically worn text.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Let’s place it dead center right above the background layer, sized at 105% so it covers the whole background.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Remember the technical notes from earlier? Don’t forget to sharpen the texture smart object (Filter > Sharpen > Sharpen).

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

After using a clipped hue/saturation to desaturate the texture layer, we’ll be using a clipped levels adjustment layer to enhance its contrast.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Lastly for the background, we just need to change the blending mode to soft light @ 35% opacity for our effect.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

We’ll place that texture centered in the frame, and rotate it counterclockwise 90°.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

It’s sized up to cover the whole piece, at 55%.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

This one is rotated 90° clockwise, and also sized up at 55% to cover the whole piece.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

After sharpening, we can change its blending mode to soft light @ 25% opacity.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

To add a hair of film noise, we’ll use GoMediaArsenal_FilmNoise_05.jpg from the film texture pack.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

This texture needs to be rotated clockwise 90°, and sized up 2100% to fill the whole piece.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

With that done, we just need to change the texture’s blending mode to screen @ 35% opacity.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

With that, we’re almost done. Here are what our layers should look like at this stage:

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack - poster design ideas

Let’s rename it to Halftones.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

After that, we have to turn it into a smart object. With the layer highlighted, head to Filter > Convert for smart filters.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

We then get access to this drop down menu to choose the blending mode.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

From there, we can change the blending mode of the layer itself to lighter color @ 35% opacity.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

If everything went according to plan, this is what the layer stack should look like.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

Additionally, here are a couple of detail shots @ 100% zoom.

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

And here are some close-ups:

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

And finally a full view of the final piece:

How to easily create a record release promo poster with the Arsenal's Fistful vector pack

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!

digital product development process

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.

The high-level workflow for a digital product production process

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.

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack by The Shop / Simon Birky Hartmann

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 metal dumpster texture pack by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack by The Shop / Simon Birky Hartmann

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 metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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 metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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 metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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:

  1. Make sure all of your elements are grouped togetherThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  2. Duplicate the designThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  3. Merge the bottom copy in one shape using the pathfinder’s Unite functionThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  4. 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.)
    The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  5. 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.The metal dumpster texture pack demo - by The Shop / Simon Birky HartmannThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  6. 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.
    The metal dumpster texture pack demo - by The Shop / Simon Birky HartmannThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

Now that we’ve got ourselves a recolored and outlined design, it’s time to move things to Photoshop.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

On top of that layer, create a new one, filled with our dark brown this time (#584c4e).

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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:

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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:

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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 metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

It’s not yet very exciting, I’ll give you that. Next, we’ll invert the texture (CTRL/CMD+I).

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

Finally, I’ve leveraged a layer mask to allow the texture to show only on the design and not on the background.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

My levels values were a bit different:

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

Playing with levels

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

The result

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

Impacted areas details

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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 metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

After desaturating it and playing with levels, here’s what the texture looks like:

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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 metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

Next, make two copies of that layer. Name the bottom one Aged 2, and turn the top one off for now.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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:

The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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.

BUY THE METAL DUMPSTER TEXTURE PACK

BUY THE ROAD HOG TEE DESIGN PACK

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>

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

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

What are we going to do?

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

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

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

Research, research, research

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

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

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

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

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

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

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

A look up-close

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

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

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

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

A look at the 1950s posters

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

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

1960s posters

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

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

Let’s recap

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

First: the type elements

Here are the type pieces from Steve’s design:

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

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

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

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

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

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

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

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

The Lost Type Co-op

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

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

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

Dafont

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

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

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

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

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

There, it starts

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

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

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

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

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

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

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

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

The rockabilly throwdown

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

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

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

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

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

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

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

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

The results

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Let’s start by doing the black shadow.

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

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

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

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

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

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

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

I followed the same process to get my white outline.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The date, time and place

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

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

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

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

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

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

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

Featuring…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Where are we at?

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

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

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

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

Tickets and other miscellaneous information

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Background cleanup and simplification

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

Create an Iconic Rockabilly Poster With Vector Set 22 – Background

Removal of the background burst

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

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

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

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

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

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

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

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

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

Last overall touch ups

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

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

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

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

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

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

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

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

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

And here are our white halftones.

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

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

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

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

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

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

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

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

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

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

What’s next?

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

Until it’s written, cheers!