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!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will’s hand drawn Sci-Fi vectors!

Introducing Justin Will’s Sci-Fi vector pack!

Hello, dear Zine reader! It’s Simon on this end of the keyboard for a new tutorial. This time, we’ll have a close look at how to use Justin Will’s hand drawn Sci-Fi vector pack.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The pack features a lot of the typical elements of a good Sci-Fi story: robots, crazy laboratory contraptions, a ray gun, a spaceman, and more! Each of the vectors has been given extra care in its execution to be unique, yet quickly recognizable.The assets all feature this clean, detailed, yet almost child-like treatment to them.

Untitled-1

DOWNLOAD JUSTIN’S SCI-FI VECTOR PACK NOW!

Arsenal Members, you get this pack at no extra charge! (Feels like your birthday, doesn’t it?)

Technical notes

We’ll be using mostly Photoshop CC for the tutorial, but any version of Photoshop past CS3 should be fine. Note also that I’m working on a Windows-based system, but other than visual appearance and slightly different keyboard shortcuts, that will not have any impact on the process we’ll go through. We’ll use Illustrator only to open the vector asset, and to paste it in our Photoshop document.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

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

So, what are we going to build?

Given the comic book/children’s book illustration style of the assets, we wanted the final output to fit these realms. After some experimentation, and a dozen thumbnail sketches, here are the two main ideas that came to life: a NASA recruitment poster, and a book cover for a (fake) children’s book called “The gentle robot.” I worked with color pencils to establish a color palette right away.

The slightly colder blue and green hues of the robot’s body contrast nicely with the warmer orange background.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

In this concept, the orange space suit of the astronaut contrasts with the colder dark blue and magenta of the deep space behind him.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

After discussion, we decided to focus on the children’s book cover: it felt truer to the asset, and to the desired target audience.

We’ll need to grab a few things before we start

Good news! Aside from the vector asset, all the things you’ll need for the tutorial are free resources. We also decided to make two textures from the Arsenal available as freebies, so you wouldn’t be hindered in the completion of the piece. The assets you’ll need to get are textures, available from the Lost and Taken archives, as well as from the Lost and Taken Flickr stream.

The first texture is Grey_Grunge4.jpg, from Lost and Taken’s five grey texture pack. Pro tip: grab the whole set, all of these are great.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The next texture is LT_Microscopic35mmFilm_02.JPG, from the seven microscopic film textures pack.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Next, is Vintage_Paper_7.jpg, from the early 20th century paper textures set.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The following asset is DigitalNoise_05.jpg, from the digital noise textures pack.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Next, brown16, from Lost and Taken’s Flickr stream. Pro tip: remember to always download the highest possible size, or better yet, the original size, when grabbing textures from Flickr.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Next, free_high_res_texture_455, also from Lost and Taken’s Flickr stream.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The last two textures that interest us have generously been made available as freebies by Go Media’s Arsenal. Pro tip: become a member today, for access to thousands of design assets, for only $15 a month.

The first texture is vintage-paper-textures-volume-01-sbh-005.jpg, from the Vintage Paper Textures, Volume 1 set.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The second freebie is metal-dumpster-textures-021-sbh.jpg, from the metal dumpster texture pack.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

DOWNLOAD THE FREEBIE ARCHIVE

Document setup

Since we are working on a book cover, we are going to work within a document with different measurements from our typical 18″x24″. One of the most popular book cover sizes is 6″x9″, which is an aspect ratio of 2:3.

Our document will have a one inch bleed/safe zone around it, to account for trimming and other production constraints. This means that instead of being 6″x9″ on the nose, it’ll be 8″x11″.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The next step is to add a few guides. We’ll use them to mark the actual cover’s size, as well as the center of our canvas. I’m using Photoshop CC’s New Guide Layout feature to generate these rapidly.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Note: if you don’t have the CC version of Photoshop, you can leverage the power of GuideGuide to accomplish the grid-related tasks quickly. The current version isn’t free, but older versions are.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Additionally, we can also add guides to mark a half inch zone within the safe zone. These will help us not to stick our content too close to the edges of the cover.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

With that done, we can get started with the real thing.

Building up the background

The first step is to fill the background layer with a pale orange, #fde2c6.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The first texture we’ll use is brown16 (5025205871_cab14db56b_o.jpg).

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

It needs to be placed as a smart object, centered in the canvas, and scaled down to 52%. That way, it will fit well within the final format of the cover (6″x9″).

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

After sharpening the texture (Filter > Sharpen > Sharpen), we need to desaturate the texture using a clipped hue/saturation adjustment layer.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Next, we need to use a clipped levels adjustment layer to adjust the texture’s details.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Finally, we need to change the blending mode of the texture to soft light @ 85% opacity.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The next texture is LT_Microscopic35mmFilm_02.JPG.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

It needs to be centered in the canvas, rotated 90° clockwise, and scaled down to 17%.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

After sharpening, and desaturating, we need to use a clipped curves adjustment layer to invert the texture.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The trick to invert the texture is to use the negative preset in the drop down menu.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Then, a clipped levels adjustment layer to tweak the texture.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Finally, we need to change the blending mode to soft light @ 85% opacity.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Our background is set. Now, we need to organize our layers better.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The robot

As we want to build the book cover for a story about a robot, we need to bring the said robot in our piece. Let’s open the vector set in Illustrator.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Our robot is second from the left in the first row.

the-shop-go-media-sci-fi-vectors-tutorial-001-300x300

It needs to be placed in our document as a smart object, scaled up to 225%, and located precisely at X: 4″, and Y: 7″.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The next step is to give the robot a bright blue color overlay (#78c8d8).

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Now, we need to give some additional colors to the robot. Let’s start by giving it its main color fill. The robot will be a light blue color, #d6f6f1. We need to create a new layer below the robot’s smart object, and to paint the color in carefully, without going over the lines. Given the scale we are working at, a hard, round 100 pixels brush will do just fine. Pro tip: you can use your magic wand (W) to create a selection if you don’t trust the precision of your brush strokes.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The next step is to add a secondary color to the robot. We’ll fill its “hands” and “sleeves” with a pink hue, #dd86a5. Note that we’re filling the area inside the sleeves.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Now, we need to give the robot some depth. We’ll do this by painting a green hue (#bad9ab) in select places, where there would be shadows. The exact positions of the shadows don’t matter, as long as they are consistent.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Also, a small hard brush (between 12 and 18 pixels), and zooming in at 100%, will both be paramount to paint precisely the small details.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The last thing we need to give the robot is a grounding shadow, otherwise it will look like it’s floating in space. We are going to use the ellipse tool (U) for that. The ellipse is 3.75″x0.5″, and located at X: 4″, and Y: 4.35″. Its color is #dd86a5, the same pink hue used for the sleeve and pincers.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

With that done, we can organize our layers some more.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Type

A book cover without a title and author name appearing is not often heard of. Our story is called “The gentle robot,” and was written by Cassia Ovami (internet high five if you find the real author name hidden behind this anagram).

The two typefaces we’ll use for the cover are part of free font families from the Google Fonts project: Open Sans, and Droid Serif. Pro tip: download the whole Open Sans family (Open Sans, Open Sans Condensed), as well as the whole Droid family (Droid Sans, Droid Sans Mono, and Droid Serif).

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Once the fonts have been downloaded, we need to  generate three separate text blocks:

  1. “THE” – set in Droid Serif Bold Italic, that is 24 points tall, with kerning set to metrics, and colored in blue #78c8d8
  2. “GENTLE ROBOT” – set in Open Sans Extrabold, that is 48 points tall, with kerning set to optical, and also colored in blue #78c8d8
  3. “CASSIA OVAMI” – set in Droid Serif Bold Italic, that is 24 points tall, with kerning set to metrics, and colored in #dd86a5

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Here are the position coordinates for each block:

  • THE – X: 4″, and Y: 1.65″
  • GENTLE ROBOT – X: 4″, and Y: 2.30″
  • CASSIA OVAMI – X: 4″, and Y: 3.125″

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

There is an obvious gap between the title, and the author name. We’ll use this space to add a blue rectangular divider. We’ll create it using the rectangle tool (U). The shape is colored in our blue (#78c8d8), and measures 5″x0.1″. It’s placed at X: 4“, and Y: 2.7″.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

With that, our text block is complete.  A bit of layer organization, and we can move on to the finishing touches!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Textures! Textures everywhere!

We’ll approach adding textures to the piece in two phases: first, we need to add some textures to the robot, so it doesn’t clash too much with the background. Then, we’ll add texture that will impact the piece as a whole, visually linking everything together. The process we’ll follow is the same as before (place as smart object, sharpen, desaturate, enhance contrast with levels, and modify the blending mode).

The robot

The first texture we’ll add to the robot is the first of the Arsenal freebie set: vintage-paper-textures-volume-01-sbh-005.jpg.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

It needs to be placed centered in the frame, rotated 90° clockwise, and scaled up 160%. The layer should be located right above the robot smart object in the layer stack, which is why the title block is still visible. Pro tip: the title block layer group can be turned off for a better view of the texture work.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Clipped levels adjustment layer.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Blending mode: soft light @ 100% opacity.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The next texture is the second Arsenal freebie, metal-dumpster-textures-021-sbh.jpg.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

It’s placed at X: 3″, and Y: 7.15″, scaled down to 16%. We also need to rotate it from 180°.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Blending mode: soft light @ 85% opacity.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The last of the three robot texture is Vintage_Paper_7.jpg.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

It’s placed at X: 4″, and Y: 6″, scale untouched.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Blending mode: color burn @ 10% opacity.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Now, we need to limit the impact of these three textures to the robot and its supporting shadow. First, let’s give the textures and their adjustment layers their own layer sub-group.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Next, using the magic wand (W), and with the robot smart object highlighted in the layer palette, we are going to select the empty space around the robot.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Next, we are going to invert the selection (CTRL/CMD+SHIFT+I or Select > Inverse), to select only the robot.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Now, to add the pink supporting shape to our selection, we need to CTRL/CMD+SHIFT+CLICK its thumbnail in the layer palette. CTRL/CMD+CLICK loads a layer’s content as a selection. Using SHIFT as the shortcut modifier tells Photoshop to add that to the currently active selection, rather than create a new one instead.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Finally, we can highlight the robot textures layer sub-group at the bottom of the layer palette, and click on the add layer mask button of the layer palette for a layer mask that limits the textures’ visibility to the robot. Alternatively, we can use the Layer > Layer Mask > Reveal selection menu.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

And with that done, we can move on to the global textures.

Texturing the whole piece

There are three textures in our list that we haven’t used yet, and these are the last three we need to add to the piece.

The first of these textures is free_high_res_texture_455.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

We’ll use it placed centered in the canvas, rotated of 90° clockwise, and scaled down to 52%.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Blending mode: soft light @ 100% opacity.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The next texture is Grey_Grunge4.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

It’s placed centered in the canvas, and scaled down to 27%.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Blending mode: soft light @ 35% opacity.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Finally, the last texture! It’s DigitalNoise_05.jpg.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

It’s centered in the canvas, rotated of 90° clockwise, and scaled down to 18%.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The only adjustment needed here is a clipped curves adjustment layer, set to negative.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Blending mode: soft light @ 65% opacity.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

The piece is now complete. We can organize the layer stack better.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

With that done, it’s time to save a copy of our document, cropped to the final dimensions of the cover (6″x9″).

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

After that, we can mock it up, to get a sense of what it would look like once printed.

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Wrapping things up

Phew, we’re done! I hope that you enjoyed the ride, and that you have learned a few tips here and there to reuse in your own work. If you’ve already grabbed Justin’s Sci-Fi vector pack, I hope that thus tutorial gave you a sense of what you can accomplish with it. If you haven’t, I wonder why you still haven’t!

DOWNLOAD JUSTIN WILL’S SCI-FI VECTOR PACK

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

Do you have questions? Suggestions? Ideas on how to improve the workflow presented here? Please do reach out in the comments below!

How to create a cute robot children book cover with Justin Will's hand drawn Sci-Fi vectors!

You should also share your outcome with us, either in the comments below, on our Facebook page, or by tweeting it to us at @go_media.

And on that note, that’s all for me today. Until next time!

how to use an opacity mask in illustrator

Try this Opacity Mask Tip with your New Vector Brushes for a Tattered, Torn Effect

How to Use an Opacity Mask in Illustrator (A Newbie’s Guide)

Hey Fans of Go Media’s Arsenal, the best resources for designers on the planet. We’re here for a quick guide to using your new Brink Design Co. Industrial Vector Brushes, just released a day ago! These 100 handmade vector brushes were created with an unparalleled level of detail, made using a variety of different mediums and techniques to give your work that dirty, grungy, industrial look so many of you, our loyal customers, have been requesting.

Hop on this train, as the pack is 21% off through Monday, December 21st. And these vector brushes are exclusive to the Arsenal, so you won’t find this detailed work elsewhere

Learn More Now!

Or, if you love the Arsenal products in general, you could join our Membership and gain access to our huge product library ($10,500+ in products) for only $15 per month. No strings attached, cancel at anytime. And yes, we’re totally serious.

Membership Me

———-

Now, let’s get to the tip!

Skill Level: Newbie
Tools Needed: Cool Illustration, Brink Design Co. Industrial Pack and Adobe Illustrator

1. Install your Brink Design Co. Industrial Pack Vector Brushes (or, as I like to call, 100 handmade brushes from the heavens)
Instructions are included with the pack.

what's-included

2. Open your illustration in Adobe Illustrator. We chose this cute little monster guy.

Untitled-1

3. Start going crazy with some brush strokes. This is the fun part. Soak it all in.

Untitled-2

4. Group your brush strokes all together. Ensure that your monster is left out of the mix.

Untitled-3

5. Object > Expand Appearance

Untitled-4

6. Using your Pathfinder Tool (Window > Pathfinder), select the first option – Merge

Untitled-5

7. “Control C” to copy this element. Next, go into your Transparency Window. From the drop-down, select “Make Opacity Mask”

Untitled-6

8. Click on the small black box within the window.

Untitled-7

9. Click “Invert Mask” and BOOM.

Untitled8

10. Click on the masked area if you’d like change where your mask is placed.

Untitled9

11. You’re done! We hope you’ve enjoyed this tip. Make sure to pick up the Brink Design Co. Industrial Pack and create something great everyday.

Shop Brink Design Co. Industrial Pack

Print Poster Tutorial – Bringing Doodles and Sketches into Your Illustrator Workflow

Time taken: 1 hour 10 mins

Difficulty: Beginner to mid-level

Resources used: Blobs font

Screen Shot_1_header

The assigned project was to create cool and fun gig poster prints for a student union nightclub event – a big campus shindig before the kids go back for the holidays. Out of ideas and inspiration, I thought I’d raid my sketchbook for inspiration – something that I often do when faced with designer’s block. I happened upon a couple of doodles and sketches that I figured would be ideal for a winter, holiday design with a bit of an edge to it.

Print Poster Tutorial

A few character sketches that I figured would make fine subject matter –

go_media_sketch_2

The doodle that gave me the main idea for the piece –

Screen Shot_2

After scanning the sketched page, I brought the first sketch into Photoshop .

Screen Shot_3

I cropped the scan, selecting the character I wanted to use.

Screen Shot_4

I painted out the unwanted areas, cleaning up any loose pixels. Using the (⌘M, Ctrl M) curve function, I created contrast and more consistent blacks, while whitening the negative space.

Screen Shot_5

I opened up the doodle sketch in Photoshop and repeated the curve clean up of the scanned image (⌘M, Ctrl M). I then created a new work path (path menu, new path) and pathed out with the pen tool (Option-click + P, Alt-click + P) the specific area I wanted to use.

Screen Shot_6

After selecting the chosen path layer (path menu, make selection, “0” feathering) I cut and pasted this path into my original scanned layer.

Screen Shot_7

After joining the two sketches into one file, I applied a darken mode (layers menu) on my overlapping layer. I then used the eraser tool to notch out some of the pixels to join the two sketches together.

Screen Shot_8

To prepare the sketch for Illustrator, it was important to close off any open pixels.

Screen Shot_9

Choosing the brush tool, I meticulously closed off any open areas. Once this was completed, I merged all layers (⌘E, Ctrl E)

Screen Shot_10

The next step was to bring the cleaned-up file into Illustrator. After creating a new file in Illustrator, I pasted the sketch image into my workspace and using the live trace function (choose “image trace” in head menu) I chose the “3 colors” setting. I chose this because although it picks up the odd gray areas in a black and white image, it recognizes details that default tracing often ignores. In this sketch that was highly–contrasted, it generated a pretty even and solid image result and it wasn’t difficult to tidy up the odd grey path at a later stage anyway.

(It should be noted, that the live trace feature doesn’t work with all sketches and it’s sometimes better to path out the sketch, this particular sketch happened to be pretty “loose” and “sketchy” in appearance anyway, so it lends itself to live tracing, plus I made sure that it was correctly prepped for live trace in Photoshop.)

Screen Shot_11

Once the sketch had finished tracing, I expanded the object and fill (object, expand, expand appearance).

Screen Shot_12

Once the file had been expanded, I went into the image with my Direct Selection Tool (A) and deleted the background white and inner-white areas (for the purposes of this tutorial, I have illustrated this using a grey background).

Screen Shot_13

After taking out all unwanted white areas, the sketch was ready for more detailed clean-up. The image actually required little clean-up. There were a couple of paths that needed closing and merging but no need for anything super-accurate due to the sketchy nature of the artwork. To clean up the missing line-work on this sketch, I used my favorite brush the “blob brush” to replace any incomplete and broken lines with clean black lines.

Screen Shot_14

With all paths closed, it was easy to select areas with the Direct Selection Tool (A) and fill with a specific Pantone color (swatches, open swatch library, color books, Pantone + CMYK Coated).

Screen Shot_15

Upon completion of the character coloring process, I created a new layer and drew a rectangle (M).

Screen Shot_17

Using the eraser tool (Shift+E) and choosing a rounded shape, I notched out the rectangle to give it a “snowy” look.

Screen Shot_18

This is a very easy trick to do and creates a nice illustrative effect.

Screen Shot_20_1

To add some snowdrops to the design, I selected my blob brush with a left- angled brush.

Screen Shot_20_2

After adding some snowflakes, I went into the blob brush again, and selected the opposite brush angle and added the rest of the snowflake effect.

Screen Shot_21

Getting to this stage of the design gave me a better idea of how I could integrate the copy. I think in design there’s often a “natural order” when it comes to composition and by trying things out, opportunities for copy placement often arise naturally and without meticulous planning.

go_media_sketch_3

Having seen the design evolve, I also saw an opportunity to add some dynamic copy without having to resort to simply picking a font from a hat! So, I went back to the drawing board and sketched out some copy elements to place into the design.

Screen Shot_22

After scanning the design into Photoshop, I repeated the curve adjustment process to prep them for bringing into Illustrator.

Screen Shot_23

I brought the copy sections into Illustrator and live-traced each one, expanding and removing the white areas.

Screen Shot_26

I added color to the copy-shape paths and roughly re-sized it to fit the space, then repeated this process with the other copy elements

Screen Shot_27

I planned this design to include copy in the central area of the composition. After discovering the perfect font online called “Blobs”, I drew a simple curve shape with my pen tool (P) to add copy along the path.

Screen Shot_28

Using the “type on a path” tool in the pen tool sub-menu, I added copy to the path.

Screen Shot_29

After laying the central copy down, I used the pen tool to draw simple triangle shapes as word-dividers.

Screen Shot_30

The copy was working out well, but I wanted the copy to fit the design shape better.

Screen Shot_32

Using the free distort tool in the head menu (effect, distort and transform, free distort) I added distortion to the copy segments – expanding the appearance after each distortion (object, expand, expand appearance).

Screen Shot_35

I repeated this process with other copy areas.

Screen Shot_36

Once the main copy areas were finished, one of the final design touches was to add footer copy with social media info.

Screen Shot_37

After creating the footer copy in white, using the Blob font, I copied and pasted the green rectangle shape I created earlier, transforming the scale and shape.

Screen Shot_38

With the design almost complete, I just needed to add the club’s logo to my design.

Screen Shot_38

The design was complete.

Screen Shot_40

A quick checklist I always make sure I do before taking the illustrator file to large format print:

  • Ensure that my artwork/artboard is cropped specifically sized for my poster requirements with plenty of bleed clearance around the edges between edge and artwork
  • Convert all font elements into shapes (object, expand, expand/fill)
  • Ensure all paths I want spot-colored are attributed a specific Pantone color (swatches, open swatch library, color books, choose swatch color specific to your printers requirements)

ben_poster

How the finished and printed poster design, printed for Roland DGA, looked.

Share your designs with us on our Flickr Pool Showcase and as always, feel free to leave any comments and questions below!

Tutorial: How to Create a Halloween Icon Pack Using Adobe Illustrator (Resources Included)

How to Create an Icon Pack using Adobe Illustrator

Since Halloween is just around the corner, we thought we should give you an early treat this year, in the form of a little icon tutorial. The idea was to show you guys how to create a cute set of three icons from scratch, using some of Illustrator’s basic tools such as the Shapes Tool, combined with the power of the Pen Tool and Pathfinder panel.

In terms of difficulty this course is aimed at those who have a basic knowledge of how Illustrator works, but that doesn’t mean beginners can’t give it a go, since every step is presented as explicitly as possible.

So, assuming you have Illustrator up and running, let’s jump in and start creating!

Download the: How to Create a Halloween Icon Pack Resources (AI + EPS Files)

1. Setting Up Our Document

The first thing you should always do, no matter the project, is make sure that you start off on the right foot by setting up a proper document.
So, go to File > New (or use the Control-N shortcut), and let’s go through some of the settings that need adjusting:

  • Number of Artboards: 1 – since we will be creating a small pack, one Artboard will suffice
  • Width: 800 px – which is the overall width of our Artboard
  • Height: 600 px – which is the overall height of our Artboard
  • Units: Pixels – this setting is really important since we will be creating for the digital medium, so screens and other display devices, which are pixel based.

And from the Advanced tab (which can be made visible by clicking on the little right facing arrow):

  • Color Mode: RGB – which is the color mode for the digital medium
  • Raster Effects: Screen (72 ppi) – this option controls the way drop shadows, textures and other effects are displayed on different media. If you’re creating for the screen 72 ppi will suffice, but if you’re designing with the intent of printing the final artwork on paper, then you should go with one of the higher values
  • Align New Objects to Pixel Grid: checked – as we want everything to correctly snap to the Pixel Grid

how to create an icon pack using adobe illustrator

2. Setting Up Our Layers

Once we’ve properly set up the document, we should take our time and think about the project itself in terms of layers.
Usually when I create detailed artwork, I find it useful to separate the different sections from one another using layers. This way I can easily work on a specific part of the design, without worrying that I’ll accidentally misarrange or affect my other shapes.
Since in our case the project is composed out of 3 assets (icons), it would be a good idea to create a layer for each one, so that we can better manage and edit them along the way.
So, assuming you know how the Layers panel works, let’s create 4 layers and name them so that they’ll be easier to identify:

1. grids – which will house the simple custom grids, that we will be using in order to create a cohesive pack
2. pumpkin
3. gravestone
4. eyeball

how to create an icon pack using adobe illustrator

3. Setting Up a Custom Grid

For those new to the Grid, well you shouldn’t worry since it’s not that hard to master. At its core, the Grid is a system of vertical and horizontal lines that allow you to compose and position you artwork with a high level of precision. It is usually used in UI design, where the process of creating a balanced composition requires the designer to put a lot of consideration into the relation established between the different visual components.

But as with most of Illustrator’s tools, this too gives you the ability to do so much more with, one particular one being that of creating pixel crisp artwork.

Since I’m a strong believer in creating with Pixel Perfection, I always set up my Grid to the lowest values since this will assure me that my shapes are as crisp as possible.
Illustrator itself comes preconfigured with a default set of values, which we will have to adjust in order to be on the same track, by going to Edit > Preferences > Guides & Grid.

Here, a new popup window should appear giving us the option to adjust the following settings to the values indicated below:

  • Gridline every: 1 px
  • Subdivisions: 1 px

Once you’ve entered the indicated values, you need to make sure that the Grid snapping is actually active by going to the View menu and clicking on the Snap to Grid option.
At this point, we’re pretty much done with the adjustment process, which means we can now move on to building the custom icon grids.

how to create an icon pack using adobe illustrator

4. Defining Our Icon Grid System

If you’ve ever created icons before, then you should know that the first step one needs to take when creating a new icon pack, is figuring out the size of the assets. There are a dozen of available options depending on where the icons themselves will be used, options that range from just 16 x 16 px all away to 256 x 256 px and even beyond that.
Now, for our current project, I’ve decided to go with something relatively large, more exactly 96 x 96 px, which means that our icons will be big enough so that we can put a considerable amount of details inside of them.

Once you’ve decided on your size, which we did, you will have to create a custom icon grid, which will allow you to build within that size boundary, which in the end will give you the ability to create an all-around cohesive icon set.
The grid itself is usually a square, since this shape allows you to push your pixels all the way to the limits of the confined space.
Yes you could add a bunch of horizontal, vertical and diagonal guides, for a deeper level of consistency, but in our case, a simple square will do the trick.

Step 1

So assuming you’re on the “grids” layer, lock all the other ones and create a 96 x 96 px square using the Rectangle Tool (M). Position the shape to the center of your Artboard by selecting it and then using the Horizontal and Vertical Align Center options found under the Align panel, making sure that the alignment is done to the Artboard and not to a Key Object or Selection.
Once you have the guide in place, change its color to a light grey (#e6e6e6) so that it will be easily visible without drawing too much attention.

Quick tip: in case your Align panel isn’t showing the Distribute Spacing and Align to options, that’s because you didn’t told Illustrator to do that. To change this, simply click on the right corner down facing arrow and then enable the Show options feature and you should be good to go.

graphic 4

Step 2

Now, since I usually like to give my icons some inner padding, I tend to add a relatively smaller square to the one I already have.

If you’re wondering why, well let’s just say I like to fool proof my designs so that when exported, I can be sure that none of the sides of the icons gets accidentally chopped off. This would result in a flawed file.

So, using the Rectangle Tool (M), let’s create a smaller 92 x 92 px one, which we will position over the one we already had, giving it a slightly lighter shade (#f2f2f2).

graphic 5

Step 3

Since we will need a pair of grids for each of our icons, we will have to group the first one that we’ve just created using the Control-G shortcut, and then create two copies which we will distance at 60 px from the original using the Horizontal Distribute Spacing option.

graphic 6

At this point we’re done setting up the icon grids which means we can move on to creating our first icon, the creepy little pumpkin head.

5. Creating the Pumpkin Head Icon

Assuming you’ve locked the “grids” layer, and moved up onto the “pumpkin” one, we can start working on our first icon from the set.
Since all of our icons will have a fill/inner section and an outline, we will follow a pretty straightforward process of creating the inner section first and then applying a 4 px outline to it using the Offset Path effect.

Step 1

That being said, let’s grab the Rounded Rectangle Tool and create an 84 x 70 px shape with a 35 px Corner Radius which we will color using a dark orange (#bf7355) and then position over the first set of grids, so that we have an even gap of 4 px between it’s left, right and bottom sides and the larger grid itself.

graphic 7

Quick tip: I recommend you turn on the Pixel Preview mode by going over to View > Pixel Preview, since most of the steps from this tutorial will rely on using this mode. I will also be giving you some pretty precise details when it comes to positioning the composing shapes.

graphic 8

Step 2
Once we have our inner section of the pumpkin, we can give it an outline by selecting it, and then going to Object > Path > Offset Path and giving it an Offset of 4 px.

graphic 9

This will create a larger shape just under the selected one, which we will have to color using a dark color (#392a16).

graphic 10

Step 3

As soon as we have our outline, we can add the all-around inner ring highlight by first creating a duplicate of the orange fill (Control-C > Control-F) and then adding a smaller 80 x 66 px rounded rectangle with a Corner Radius of 33 px to the center of the fill shape.

This smaller shape will help us create a cutout, which we will do by selecting both it and the shape underneath, and then using Pathfinder’s Minus Front option.

graphic 11

Step 4
Since the resulting shape isn’t quite there, we will have to change its color to white (#FFFFFF) and then set its Blending Mode to Overlay while lowering its Opacity level to 20%.

graphic 12

Step 5
Add a little texture to the surface of the pumpkin, by drawing a bunch of 4 x 4 px rectangles which we will color using a darker shade of orange (#9e5943). Then make sure to have them positioned underneath the highlight that we’ve just created, by sending the highlight to the front using the Arrange > Bring to Front option.

Don’t forget to select all the composing elements of the texture, and group them together using the Control-G shortcut, since you wouldn’t want the elements getting misplaced by accident.

graphic 13

Step 6
Next, we will start working on the vertical delimiting lines, which will give the pumpkin its nice curved look. To do this, we will first create a 44 x 70 px ellipse to which we will apply an Offset Path effect of 4 px.

Now, with both shapes selected, use Pathfinder’s Minus Front option to create a cutout from the larger ellipse, which will result in ring like shape that we will adjust by cutting it in half by removing its right section, and then changing its color to #392a16.

Position the resulting shape towards the left side of the pumpkin fill section, leaving a gap of 8 px between it and the larger outline.

graphic 14

Step 7
Create a copy of the curved line and position it towards the right side of the pumpkin, making sure to reflect it vertically (right click > Transform > Reflect > Vertical).

graphic 15

Step 8
Add a secondary pair of vertical rings by creating a slightly narrower 28 x 70 px ellipse, to which we will apply Offset of just 2 px. Repeat the same process of removing the inner shape from the created offset, and then cutting the resulting ring in half, making sure to position a copy on both sides of the pumpkin at about 10 px from the thicker rings.

graphic 16

Step 9
Next, let’s add a couple of highlights and shadows to the rings, in order to give it more depth.

First let’s add the highlights by creating a copy after the rings and moving them slightly towards the inside of the pumpkin. Make sure to change their color to white (#FFFFFF) and set their Blending Mode to Overlay lowering the Opacity to just 20%.

graphic 17

Step 10
Add the shadow by repeating the same process – only this time, position the shapes towards the outside of the pumpkin, setting their color to black (#000000) while changing their Blending Mode to Darken and lowering their Opacity to 30%.

graphic 18

Step 11
As you can see, the highlights and shadows go over the actual outlines and highlight of our pumpkin which is something that we don’t want them to do. To fix this, we will have to create and apply a clipping mask in order to hide the parts of the details that we don’t want overlapping.
First, we will have to create the mask itself by creating a copy of the ring outline, and then separating its inner path from the outer one by right clicking > Release Compound Path. Once the path is released, we will have to select and delete the larger shape since we will be using the smaller one.

graphic 19

Step 12
With the resulting shape from step 11 and both the highlights and shadows selected, right click > Make Clipping Mask.

graphic 20

Step 13
Since some parts of the details still go over the outlines, we will have to select all the vertical rings and bring them to the front (right click > Arrange > Bring to Front).

graphic 21

Step 14
Before we start adding the face features, let’s add one more vertical ring highlight towards the right side of the pumpkin, positioning it a little towards the middle.

Follow the same process as before, only make sure that you’re creating the shape inside the actual clipping mask by double clicking on one of the composing elements, or by right clicking > Isolate Selected Clipping Mask.

Once you’re done simply exit the Isolation mode by pressing Esc.

graphic 22

Step 15
Up until this point we’ve followed a pretty strict do-this-then-that workflow, so I thought it’s time I gave you a little creative freedom and let you “carve” your pumpkin by your own, so that in the end you will have something special to show off with.

The only thing that you will have to keep in mind is that no matter the expression, you will have to keep the detailing process consistent by adding a 4 px outline to each of the created shapes. Also, for the fill colors you could use lighter or darker shades of orange, I for example, have gone with something darker (#634133) but you don’t necessary have to use the same tint if you don’t feel like it.

That being said, take your time and once you’re done move on to the next step.

Quick tip: there might be situations where the Offset Path trick will produce irregular outlines, so for those cases try and use a 4 px stroke instead.

graphic 23

Step 16
Assuming you’re carved an awesome scary look, let’s start adding the finishing touches, by working on the pumpkin’s top side that houses the vine.

First, grab the Ellipse Tool (L) and create a 20 x 6 px shape, which we will color using a dirty light green (#87826f) and then position towards the top section of our pumpkin, making sure to position it underneath.

Oh, and as always don’t forget to give it that 4 px outline!

graphic 24

Step 17
Add a highlight to the vine’s base by creating a duplicate of the green shape, and then cutting out a smaller 18 x 4 px ellipse out of it. Color the resulting shape using white (#FFFFFF) and then change its Blending Mode to Overlay while lowering the Opacity level to 40%.

graphic 25

Step 18
Finish off the vine by adding a 4 x 4 px square towards its top, which will act as the tip. Then change its color to a darker green (#757061) and give it an outline, only this time make sure to set the Joins option to Round.

Finally add a couple of highlights to the top and right side and a vertical divider towards the center, making sure to send all the tip’s elements to the back (right click > Arrange > Send to Back). You should also group the elements together (Control-G) so that things won’t end up being misplaced.

graphic 26

Step 19
Add some “hair” to our little old pumpkin, by drawing a couple of curved paths using the Pen Tool (P), keeping the stroke Weight set to 1 px and the Cap to Round.

graphic 27

Step 20
Finish off the icon by adding three diamond like highlights towards its middle right section, which will have their Blending Modes set to Overlay and their Opacity levels to 60%.

graphic 28

6. Creating the Gravestone Icon

As soon as you’re done creating the pumpkin icon, you can lock its layer, and move on to the “gravestone” one and start working on it.

Step 1
Let’s start with the base of the grave by creating a 66 x 12 px rounded rectangle with a 4 px Corner Radius, which we will color using #a09793, and then position towards the middle of the smaller inner grid so that it touches its bottom side.

graphic 29

Step 2
Next, we have to make some adjustments to the shape by selecting its bottom-center anchor points using the Direct Selection Tool (A), and then deleting them by pressing Delete.

As soon as you get rid of the anchors, use the Control-J keyboard shortcut in order to close the path.

Once you’ve adjusted the shape, give it a 4 px outline using the Offset Path (right click > Object > Path > Object Path) which you will color using the same color that we’ve applied to all our outlines (#392a16).

graphic 30

Step 3
Since I feel that the bottom corners of the outline are a bit too hard, I thought we should adjust them by selecting their anchor points using the Direct Selection Tool (A) and giving them a 2 px Corner Radius.

graphic 31

Step 4
Using a similar process to the pumpkin icon, start adding a couple of highlights and a shadow to give the shape some depth.

graphic 32

Step 5
Once you’ve added the highlights and shadows, add a 66 x 1 px rectangle just above the shadow coloring it using the same color as the rest of the outlines (#392a16).

graphic 33

Step 6
Add a bunch of cracks to the piece using the Pen Tool (P) and give them some highlights where you feel it’s necessary. Then select all the shapes and group them together using the Control-J keyboard shortcut.

graphic 34

Step 7
Let’s move on to the upper section of the icon, and start working on the stone itself by creating a 52 x 98 px rounded rectangle with a Corner Radius of 26 px. Color the shape using #66605e, and then adjust it by removing its bottom center anchor points using the Direct Selection Tool (A) and finally positioning it above the bottom section making sure to vertical align the two.

graphic 35

Step 8
Give the stone an outline, and then add a highlight and a 4 px tall shadow where its bottom sections meets the base of the gravestone.

Quick tip: Where the workflow is similar to the previous steps I won’t be repeating the entire process since it will be weird, but I will give you indications where things need to be done a little bit different. In the present case since we already went over the process of creating the highlights and shadows, I trust that you should be able to apply what you’ve learned in the previous steps.

graphic 38

Step 9
Now, let’s give the stone a texture similar to the one used for the pumpkin by creating a couple of 4 x 4 px squares, which we will color using #514a48. It would be a good idea to group the texture’s elements since you’ll want to be able to keep them in place.

graphic 39

Step 10
Once we’ve added the texture, we can continue the detailing process by adding a couple of cracks and some highlights underneath each of them using the Pen Tool (M).

graphic 40

Step 11
Add two vertical highlights, by drawing a wider 2 x 72 px rectangle and a narrower 1 x 72 px one to its right side at a distance of 1 px. Color the shapes using white (#FFFFFF) and then set their Blending Modes to Overlay as we did with the previous ones, while lowering their Opacity levels to 20%.

Position the highlights to the right side of the gravestone so that their bottom sides touch the stone’s shadow.

graphic 41

Step 12
Now as you’ve probably already noticed, the top side of the highlights overlaps the highlight of the stone itself, which we will need to correct by adding a clipping mask.
To do that, simply create a copy of the stone’s highlight, and then using the Direct Selection Tool (A) remove its outer anchor points, and then close the resulting path by pressing Control-J.
Then simply select the new shape and the two vertical highlights and right click > Make Clipping Mask.

Quick tip: in case you’re wondering why I prefer using clipping masks instead of Pathfinder, well the answer is really simple, while Pathfinder could achieve the same result, it won’t allow me to adjust my shapes later on if I find that I need too, which for me is a deal breaker.

graphic 42

Step 13
We’re almost there, but something seems like missing? Oh, right, the cross.

Let’s grab the Rectangle Tool (M) and create a 16 x 6 px shape which will act as the horizontal line and another 6 x 22 px one, which will act as the vertical one.

Position the horizontal line towards the top section of the secondary line so that you have a gap of 6 px between the two. Then, color the shapes using #392a16, group them (Control-G) and then position them towards the top side of the stone, aligning the cross to the middle.

graphic 43

Step 14
Using the Rectangle Tool (M) create a 20 x 8 px shape, and then color it using a dark grey (# a09793). Since this will act as the name plate, we will have to stylize its corners by creating four 4 x 4 px circles which we will use in combination with Pathfinder’s Minus Front option to create those nice looking inner cutouts.

Now, since the Offset Path effect won’t be able to create an accurate outline, we will have to create it manually by drawing a 28 x 16 px rectangle which will follow the same stylizing process as before, only this time we will use four 8 x 8 px circles.

Once you have the outline shape, simply color it using #392a16, and then make sure to position it underneath the plate itself.

graphic 44

Step 15
Add some highlights to the plate and then using the Rectangle Tool (M) draw two horizontal lines, one thinner and one thicker which will represent the name.

Finally add two 2 x 2 px circles to each side of the plate, which will act as a pair of little screws holding the plate, and a shadow underneath its outline to give it more depth.

graphic 45

Step 16
Add the three little diamond shaped highlights towards the top right corner, by creating a copy (Control-C > Control-F) of the ones from the pumpkin icon.

graphic 46

Step 17
Since at this point we’re pretty much done with the gravestone itself, it’s time to start working on the little skull.

First, create a 14 x 14 px circle and color it using a light grey (#d3c6c1). Then, add a 10 x 6 px rounded rectangle with a 1 px Corner Radius just above it, coloring it using the same color.

Now, with both shapes selected, give them an Offset of 4 px making sure to group them together (Control-G) and then position them towards the lower left corner of the stone, so that the jaw’s outline touches the outline of the grave.

graphic 47

Step 18
Add a pair of eyes to our little skull, by creating two 4 x 4 px circles (#392a16) which we will distance at 2 px from one another, and then position towards the middle lower section of the skull.

Then add a little nose and two teeth insertions to make the object look like an actual skull.

graphic 48

Step 19
Finish off the skull by adding a nice all-around highlight, and two overlapping elliptical ones towards the top section of the skull.

graphic 50

Step 20
Lastly, let’s add the little blood drips from underneath the skull.

First, select the Rounded Rectangle Tool and create a 2 x 9 px shape, which we will color using a dark red (#c95b55), and then adjust by removing its top center anchor points in order to give it a flat edge. Then create a copy and adjust it by shortening its height to just 4 px, and position it on the original’s right side leaving a gap of 2 px between the two.

With both shapes selected, give them a 2 px outline using the Offset Path, and then position them towards the left side, underneath the skull, so that the red fills touch the top side of the grave’s grey fill.

graphic 51

Step 21
Since we want the two drip lines to be connected, we will add a 2 x 2 px square in between them, which we will adjust by cutting out a 2 x 2 px circle from its lower half.

graphic 52

Step 22
Finish off the gravestone icon by adding a couple of highlights to the blood drips, using the same Overlay Blending Mode but a slightly higher 50% Opacity level.

graphic 53

7. Creating the Eyeball Icon

We are now down to our final icon, the eyeball one. As usual this means we will be locking the “gravestone” layer and move on up to the next and final one.

Step 1
Using the Ellipse Tool (L) let’s create the base fill for our eye, by drawing a 64 x 64 px circle, which we will color using a dirty grey (#d3c6c1), and then position it towards the bottom side of the third grid set leaving a gap of 7 px between it and the smaller inner grid.

As always, don’t forget to give it that 4 px outline.

graphic 54

Step 2
Give the inner fill a ring highlight with the Blending Mode set to Overlay and the Opacity to 50%.

graphic 55

Step 3
Since the eyeball itself is slightly rotated so that its iris will be looking up, we will have to add a second circle over the inner fill that we already have, and position that towards the top, so that the current fill will act as a bottom shadow section.

First, select the fill, and create a copy after it (Control-C > Control-F), which we will position towards the top at a distance of 6 px from the original. Then change the shape’s color to something brighter (#e5ddda), making sure to mask it so that it will remain confined to the boundaries of the underlying circle.

Also, since the ring highlight needs to sit on top, we will have to select it and bring it to the front by right clicking > Arrange > Bring to Front.

graphic 56

Step 4
Now, let’s add that texture that we’ve used for all the previous icons, only this times mix it up a little by drawing both 2 x 2 px squares and a couple of 1 x 1 px ones, which we will color using a darker shade of grey (#bdb1ac).

Leave the center of the eye free of any details since they won’t be visible once we add the inner iris section.

graphic 57

Step 5
Start working on the iris, by drawing a 30 x 30 px circle, which we will color using a swamp green (#6a6e48), and then position towards the top section of the main eye fill, at about 13 px from its top side.

Give it a 4 px outline, and then add a smaller 14 x 14 px circle to its center which will represent the pupil.

graphic 58

Step 6
Give the iris a ring like highlight, making sure to set the Blending Mode to Overlay and the Opacity to 20%.

graphic 59

Step 7
Start adding a bunch of scattered 1 x 1 px squares (#392a16) which will give it a nice looking texture.

graphic 60

Step 8
Next, start adding a bunch of circle like reflections to the top right and bottom left corners of the iris, using the same Blending Mode and Opacity level as before.

graphic 61

Step 9
Give the eye a visual pop by adding a overlaying highlight over the top half of the iris, making sure to mask it using the green shape from underneath.

Use Overlay as the Blending Mode and crank up the Opacity to 30%.

graphic 62

Step 10
Add a subtle shadow underneath the iris’s outline, by creating a copy of the later, and moving it towards the bottom by 2 px.

Change its color to #d3c6c1, and make sure to position it underneath the outline and not the other way around.

graphic 63

Step 11
Grab a copy of the diamond shaped highlights from one of the previous icons, and position it towards the right side, and then add two more circular reflections to its left to really make it shine.

graphic 64

Step 12
As with the pumpkin icon, I’m going to give you the ability to get creative and draw your own version of this cute little eye stabbed icon.

As always, keep it consistent, use as much details as you can, and don’t forget to keep those outlines at 4 px.

graphic 65

Huurraay we’re finally done guys!

graphic 66

I really hope you’ve enjoyed the tutorial and most importantly learned something new during the process. That being said, I’m looking forwards to seeing your final designs, and if you have any questions just leave them in the comments section and I’ll get back to you in a jiffy.

And for more resources like these, join our Arsenal Mailing List!

Adjust Rounded Rectangle Corners in Illustrator | Design Tip of the Week

Adjust Rounded Rectangle Corners in Illustrator

I forgot who showed me this (I think it might have been Aaron), but man, it absolutely blew my mind. It’s so simple too. In fact, you probably already know this tip, but for those who don’t, I’ll let you in on a little secret. You can easily adjust rounded rectangle corners in Illustrator simply by using the UP arrow key or DOWN arrow key.  Simply equip the Rounded Rectangle Tool, drag out your rectangle – don’t let go of your mouse click – then use your arrow keys.

DTOTW_9-7-15_Article_Image_1

I’ve been using Illustrator for freakin’ over seven years, since I was in high school, and I had no idea about this little shortcut. GAH! Absolutely awesome. Again, for those who knew this tip already, I apologize. For those who didn’t, YOU’RE WELCOME! It goes to show you that there’s always something new to learn. It’s these little tips and shortcuts that can help streamline your process and just make things a whole lot easier.

Want to save even more time? Check out my article on designing faster with vectors on hand.  (There’s even a freebie included!

God speed!

9-7-15

Positive and Negative Space in Illustrator| Design Tip of the Week

Positive and Negative Space in Illustrator

We all know that Illustrator is great for creating dynamic linework and wonderful shapes, but what about creating lines WITH shapes? You know, positive and negative space? Get what I’m saying? Picking up what I’m putting down? Smelling what I’m stepping in? If you’re still unsure, no problem.  I’ll walk you through it, and by the end you will have another method to illustration in your repertoire.

DTOTW_8-24-15_Article_Image_1

Does this little guy look familiar?

DTOTW_8-24-15_Article_Image_2

Yep! He’s the mini version of the cosmic robot Buddha illustration I did for Weapons of Mass Creation Fest 6. This little dude also was featured on the WMC Fest 6 kid’s shirt.

Anyways, let’s get into it.

DTOTW_8-24-15_Article_Image_3

Pasted in the Illustrator artboard is the original sketch for my illustration. From this I outlined and created silhouetted shapes…

DTOTW_8-24-15_Article_Image_4

This layer is named “Positive 1” (as it says in the Layers Palette).

DTOTW_8-24-15_Article_Image_5

Next, a new layer was created (Negative 1). In this layer, I created the white (negative) shapes by using my original sketch as reference. It is at this point that the linework becomes defined.

DTOTW_8-24-15_Article_Image_6

My third layer (“Positive 2”) contains the last set of positive (black) shapes that sit on the white (in Negative 1 layer*).

*In my opinion, Negative 1 layer should actually only be named “Negative,” since there is not a “Negative 2” layer. 

DTOTW_8-24-15_Article_Image_7

First making sure that my layers are unlocked and visible, I then select all my shapes, then copy and paste it all into a new layer (“Grouped”).

DTOTW_8-24-15_Article_Image_8

With everything selected, I use Pathfinder > Divide. This breaks down everything into separate shapes according to the intersecting edges.

DTOTW_8-24-15_Article_Image_9

By first ungrouping my illustration, I can now use the magic wand to select all the positive (black) shapes. I copy that, delete my all of my previous work, then do a Paste in Place, leaving only the positive shapes.

DTOTW_8-24-15_Article_Image_10

Your Fill will indicate that this has been done correctly if everything that is selected has black fill. No white (negative) shapes remain.

DTOTW_8-24-15_Article_Image_11

So why bother with this approach?
Honestly, it’s just matter of preference. For some illustrations, I’d rather just do the linework, yet there are some instances where it is easier for me to break it down (and build it up) through positive and negative space. I have also found that this approach enables me to translate my original line weights. The point is there are many ways to skin a cat. (Man…that’s a horrible expression. Skin a cat? Who does that? I don’t even…) Anyways, this is just another method of creating linework in Illustrator. In fact, I used this method a lot in creating the Iconic Cleveland Vector Pack.

Well that is all for now. If you want more tips on Illustration, check out the Arsenal, which has TONS  of tutorials! (I would strongly recommend the Halftone Triple Technique Tutorial.)

Thanks for reading, everyone! Now go out and draw some cool shit.

Cheers!

8 -24 -15

Introducing the Halftone Triple Technique Tutorial!

Halftone Tutorial for Photoshop and Illustrator

Say it three times fast…

Halftones: those cool little dots that create lovely tonal values, yet still maintain that flat, graphic look. If you search “how to do halftones” on Google or YouTube, you’ll find that there are a number of ways to achieve this effect. Here at the Go Media’s Arsenal, the best site for design resources on the planet, we tasked our designer Jordan Wong to find the best methods to share with you!

The Halftone Triple Technique Tutorial (check out that alliteration) brings you not only step-by-step instructional videos on three different techniques in both Adobe (CS5) Illustrator and Photoshop, as well as working resources. By learning through example illustrations, custom-made by Jordan Wong, you will soon be creating masterpieces and getting asked left and right, “How did you make those sweet halftones?”

Learn More Now >>

Learn these three techniques

Halftone Triple Technique Tutorial   Go Media™ Arsenal

Dot & Line Pattern Swatches Technique

Create line and dot pattern swatches along with how to fully customize them for your aesthetic needs. This technique is great for a uniform look and creating solid shaded areas. (15 minutes)

Halftone Triple Technique Tutorial   Go Media™ Arsenal -2

Gradient to Halftone Technique

Using the Color Halftone Effect, turn gradient-filled shapes into beautiful tonal halftones. Give your vector illustration gradation and depth with those little fun dots. (1 hr, 28 minutes)

Halftone Triple Technique Tutorial   Go Media™ Arsenal - 3

Brush Tool Shading to Halftone Technique

Prefer to work on a drawing tablet or fancy Wacom Cintiq? Excellent. Use the brush tool to create controlled values of gray, which is then transformed into precise halftone shading. (1 hour, 40 minutes)

Halftone_Tutorial_Included Resources_Graphic-01

Resources Included

The Halftone Triple Technique Tutorial includes:

  • Introduction video
  • Step-by-step instructional videos (qty 4) outlining the three different halftone techniques – Brush Tool Shading to Halftone, Dot & Line Pattern, Gradient to Halftone Techniques  (3 hours, 23 minutes of content!)
  • Line & dots pattern swatches (an AI file of pre-made swatch patterns for your usage)
  • Quick reference guides on halftone settings and appearances
  • Full working files of the example illustrations!

Shop Now

Line Variation in Illustrator | Tutorial

Line Variation in Illustrator Tutorial

In a previous Design Tip of the Week, we mentioned the increasing trend of icons and simplistic, geometric illustration. While their minimal, clean aesthetic is perfect for some situations, there are other times when an illustration needs to have more personality and be more dynamic. Line variation can add that extra flavor.

Line Variation Example-01

In this tutorial, I’ll show you how I personally add line variation in Illustrator (there are, however, many different approaches and methods). Let’s begin!

Line_Variation_Tutorial_Article_Image_1

We’re going to use this guy for our first example. (He may look familiar, but he is in fact a different blob-person than the one I previously introduced in an other tutorial.)

Line_Variation_Tutorial_Article_Image_2

Take a look at the Stroke Panel, you’ll notice that the (line) profile is uniform – consistent all the way through. (Also the line weight is 3 pt. – this will come into play later.) We want to change that. After all, our friend here has some lovely curves that need to be accentuated. With a monotonous line weight, no wonder his expression is rather plain.

Line_Variation_Tutorial_Article_Image_3

Illustrator offers an array of line treatments.

Line Profiles-01

We’re going to select one that has more variety.

Alright! Now we have something going on. However, I am not so sure if I want the line to be as thin as it is where it tapers.

Line_Variation_Tutorial_Article_Image_5

This is a crucial part in fixing line weights that are too thin. You’ll want to…

1. Click on the original line
2. Copy it
3. Paste IN PLACE (Shift+Command+V or Shif+Ctrl+V).
4. Set the newly pasted line weight to a lower value (than your original, dynamic line). Our original line was at 3 pt., so I’ll make this one’s line weight set to 1.5 pt.
5. Change its Profile to Uniform

Line_Variation_Tutorial_Article_Image_6

Ta-da! Just by those simple changes, our blob friend now has more personality. He even now has a charming mustache!

Now let’s take a look at an example that is a more complex illustration. And what better imagery than a pig with a jet booster strapped to its back!

Jet_Booster_Pig_Comparison-03

Jet_Booster_Pig_Detail

As you can see, the illustration on the right has more complexity and character with its linework than the version on the left. The varying thick-to-thin lines play off the curves of the rounded forms and the angular lines of the more streamlined shapes.

Now give it a shot! Go transform those boring vectors into lively illustrations! In addition to this one, we have TONS of tutorials on illustration in the Arsenal. Check ’em out and start creating masterpieces!

Thanks for reading!

Hanging Punctuation in InDesign and Illustrator | Design Tip of the Week

Hanging Punctuation in InDesign and Illustrator

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

DTOTW_7-13-15_Article_Image_1

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

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

DTOTW_7-13-15_Article_Image_2

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

DTOTW_7-13-15_Article_Image_3

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

DTOTW_7-13-15_Article_Image_4

There we are. Donezos.

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

Thanks for stopping by! Hope this was helpful!

7 - 13 - 15

Making Perfect Curves in Illustrator | Design Tip of the Week

Making Perfect Curves in Illustrator

Hello, hello! Last week, I gave some tips on designing faster in Illustrator, but this week, we’re going to focus more so on quality. In Illustrator (as you all know,) you have super-tight control over line weights, shapes, etc. and can produce incredibly crisp visuals. The best creatives who make the most stunning vectors are those with a sharp eye for detail. Having a hawk’s eye (both the animal and the Marvel character) that can pick up on subtle changes in line work and curves of a shape is pretty crucial for creating awesome illustrations. For this Design Tip of the Week, we’re going to focus on curves.

Here is our example:

DTOTW_7-5-15_Article_Image_1

As you can see, this little blob dude is not happy. He feels insecure of his imperfectly smooth form*. Let’s help him out.

*Note: you do not need to have a perfectly smooth form to be a strong, independent, beautiful blob thing. 

If you can already see where some touch-ups need to be made, then you, my friend have a good eye! For those that haven’t picked up on the areas that need working, hey, no sweat! That’s why I’m here, to help and walk you through it.

DTOTW_7-5-15_Article_Image_2Okay, first problem. As you can see, there’s a bit of a point where the two curves are not aligned perfectly. This is very common and can easily be overlooked. Let’s smooth that out.

DTOTW_7-5-15_Article_Image_3

There we go. Take advantage of those curve handles, they will indicate the direction and sharpness of the curve. When the handles are aligned and create a perfectly straight line, you’re curve is good to go. Remember to always zoom in and out to see how your changes affect the overall shape.

DTOTW_7-5-15_Article_Image_4

Hmm…something is still off.

DTOTW_7-5-15_Article_Image_5

DTOTW_7-5-15_Article_Image_6

There it is. Cases of super, super subtle misalignment are what you really have to watch for. Be relentless in going through your illustration and checking for any places that need refined.

DTOTW_7-5-15_Article_Image_7

Awe, he looks so much happier. Getting into the habit of really examining your illustration, finding the places that need some polishing and making those improvements will only result in your work becoming better and better. So, roll up them sleeves, zoom in at 6400% and make that shit flawless.

Just to let you know, we actually have tons of tutorials on Illustration that you should definitely check out!

Until next time!

7 - 5 - 15

Design Faster with Vectors on Hand | Design Tip of the Week

Design Faster with Vectors on Hand

You’re a pro. We all know it. However, do you ever find yourself drawing the same shape over and over again? With the growing popularity of icons and simplistic, geometric illustration, it’s not uncommon for elements to be used time after time in your designs. This does not mean that we have to stay trapped in some sort of weird, repetitive dimensional hell of making that perfectly-narrow (or wide) triangle.

Let’s save some time and design a little faster! Have all those faithful shapes already made and saved in its own Illustrator file. When the time comes to make that “ice cream cone” icon or that minimalistic illustration of a bicycle, you’ll be like, “Oh, looks like I have to ma- WHOA! It’s halfway done!”

ice-cream-cone-icon-614x460 bicycle simple illustration

Before you leave, I want you to know that I care about you. That is why I made an Illustrator file that is full of shapes and elements that you are free to use! I hope that it saves you some time and gets you to happy hour a little earlier. Cheers!

Helpful_Shapes_Illustrator

6-29-15

Want more tips? Be sure to also check out Bill’s article on how to become a faster designer!

Also, you can save even more time with our vector illustrations! Check ’em out!

Tutorial – Lines & Dots: How to Make Quick and Easy Patterns in Illustrator

How to make patterns in Illustrator: Lines and Dots

Mouse-Pen-01
X-acto Ouch-01
Logo_vs_Branding_Artcle_Cube-01

Patterns can be a wonderful visual element. They can create form and show depth in an illustration, or add more visual interest to a large color field of a graphic. Below are step-by-step instructions on how to easily create two patterns in Adobe Illustrator: line and dot.

Line Pattern

Step 1: Create a rectangle and diagonal line going through the center. Begin and end the line from the top-left corner anchor to the bottom-right anchor, then select and scale it up proportionally.

Line_Pattern_Article_Image_1

Turn off the fill in the rectangle and set it and the line at 1 pt. stroke weight. The crucial part of this is that the line must be aligned perfectly in the center, shooting diagonally from the top-left corner to the bottom-right. Smart Guides (View > Smart Guides) is a huge help.

Step 2: Duplicate the objects (the rectangle and line), aligning the one copy at the top-right corner and the other at the bottom-left corner.

Line_Pattern_Article_Image_2

Line_Pattern_Article_Image_3

Again, Smart Guides will make life easier. Make sure things are perfectly aligned: the corners of the original rectangle are touching the centers of the duplicates.

Step 3: Delete the two duplicate rectangles and the line of the original rectangle. Turn off the stroke of the original rectangle.

Line_Pattern_Article_Image_4

Step 4: Select the two lines and in Blending Options (Object >Blend > Blending Options), set the Spacing to Specified Steps along with an desired increment, which MUST BE AN ODD NUMBER*.Then click Okay.

*This number will determine how many lines are repeated in your pattern.

Line_Pattern_Article_Image_5

Line_Pattern_Article_Image_6

Step 5: Go to the Blend option again and select Make.

Line_Pattern_Article_Image_7

Line_Pattern_Article_Image_8

Step 6: Select the two lines that are forming the pattern AND the rectangle in the center. Drag these to the Swatch Palette, resulting in a newly created swatch.

Line_Pattern_Article_Image_9

Step 7: Select the lines and rectangle and drag it outside the artboard.* Test the pattern by creating a new shape and setting its fill to the new swatch.

Line_Pattern_Article_Image_10

*Keep these original objects off to the side in case the pattern needs to be edited: the color of the lines, stroke weight, increasing or decreasing the repetition. If changes are made, a new swatch must be created ( objects again dragged to the Swatch Palette) in order to use the new pattern.

The reason behind testing the swatch pattern in a shape is to ensure the elements are lining up correctly. However, there are times when the pattern looks misaligned or distorted. Zoom in and out to double-check, it could just be the monitor depicting the pattern in a funky manner.

Dot Pattern

Step 1: Make a square (with a 1 pt. stroke) and dot. Align them at their centers.

Dot_Pattern_Article_Image_1

This is the spacing between each dot in the pattern.

Dot_Pattern_Article_Image_2

Step 2: Turn the stroke off on the square. With that and the circle selected, drag it to the Swatch Palette.

Dot_Pattern_Article_Image_3

Step 3: Create a shape and then select the newly created swatch pattern for the fill.

Dot_Pattern_Article_Image_4

The amount of dots is dependent on the size (and spacing) of the original dot. If the pattern needs to have more dots, simply shrink down the original dot (with its square) and create a new swatch pattern.

Things to consider

Because patterns add another level of visual interest, it is often easy to throw them on everything. Like any element, they don’t work ALL the time. Take the time to really consider if something needs a pattern or not. Also, in regards to Illustration, consider the form that is being depicted. A line pattern would make more sense on straight-edge surfaces, where a dot pattern may best fit with an organic, rounded form. Patterns are super cool, no doubt, but use them deliberately to elevate your illustrations and designs.

We love Patterns!

Check out these Arsenal Products that will add patterns to any project with ease!

Circle Pattern Vector Pack

gma_vector_set06_radial_prv_all-1256x770

Halftone Pattern Vector Pack

gma_vector_set12_tilinghalftones_prv_all

Op Art Vector Pack

gma_vector_set15_op-art_prv_all

Textile Patterns Vector Pack

gma_vector_set14_textile-patterns_prv_all

Propaganda Patterns Vector Pack

gma_vector_set18_propaganda_prv_all

Typography Shortcuts: ‘Custom’ Type Treatments for the Lazy Designer

‘Custom’ Type Treatments for the Lazy Designer

Custom hand-drawn type treatments are quite popular these days. Nothing says hipster-cool like hand lettering your client’s chalkboard coffee shop menu. But let’s face it – hand lettering requires a certain amount of artistic skill. And time. Lots and lots of time (and we all know not every client has a big budget).

So, what do you do? You want a custom type treatment for your client but you lack either the skills or time to do it right. You need a shortcut. You need a cheat. You need the gurus of Cleveland graphic design services Go Media’s (semi-) patented Custom Type Treatment for Lazy Designers technique!

Here’s how it’s done:

Greeves_Tatt_v2-01

Step 1. Select a font.

This is where all our time savings comes in. Your final product is going to be 85% font, 15% customization. While selecting the font will feel like the easiest step, it’s also the most important. Don’t rush through this step of the process! I will often times spend over two hours just trying to find the perfect font. Remember the font you select is 85% of the final product and picking a font will be SAVING you tons of time hand lettering – so go slow!

In this case, the project was for a close friend of mine who asked for a tattoo of the word “Unvanquished.” While I’m a great illustrator, I’m not great at hand drawing type, so I knew my best result would be to start with a font. I probably spent about three hours finding this one font (Anha Queen VMF Pro).

Greeves_Tatt_v2-02

Step 2. In Computer Modifications: Kerning

At this point I start by converting my type into ‘paths’ in Illustrator. I will be modifying my letters as vector shapes from here on out.

In my experience, no font’s kerning is perfect for every single word. So, once I’ve typed out the logotype I’m going to make, I fine-tune the letter spacing. When creating a word-mark I’ve found that you generally want the kerning tighter than what is comfortable for reading – this changes the word into a mark. You can see the adjustments I made with the kerning above.

Greeves_Tatt_v2-03

Step 3. In Computer Modifications: Eliminate Redundancies

Frequently fonts will include lots of repeating shapes. Sometimes these can be ugly and a dead giveaway that your type treatment is a font and not original. It’s ok if you keep one of these shapes, but remove any redundancy that stands out. I’ll also usually use this step in the process to clean out anything that I don’t like. This font has a lot of messy flourishes, so I’ll clean those up too.

Greeves_Tatt_v2-04

Step 4. In Computer Modifications: Play with Ascenders, Descenders and Letter Size

Fonts tend to have a certain-size perfection. All lowercase letters are pixel-perfect height, line thicknesses are exactly the same, etc. I like to play with all of this stuff to give the type treatment a bit more originality.

Greeves_Tatt_v2-05

Step 5. Hand Drawn Modifications

While hand-drawing this font from scratch was beyond my skill level, adding some hand-drawn modifications is a fun and easy way to further refine your type treatment. For this step, I simply print out my type onto an 11×17” sheet of paper, pull out a pencil and start playing! If you mess up, just throw it away (sorry, I mean recycle it) and start over. Once I’ve got something I’m happy with I will scan that back into the computer and ‘vectorize’ the elements that I drew.

SubstandardFullSizeRender

In this particular case, all my flourishes made the art a little too tall for my friend’s arm, so his tattoo artist modified my design a bit.

Step 6: Sit Back and Enjoy the View

After you’ve finished vectorizing the elements you’ve lazily hand-drawn, sit back and enjoy the view. Sarcasm aside, appreciate how, relatively quickly, you’ve been able to construct a pretty hip custom type treatment. Your client will be equally impressed and their pocket book will thank you, too.

Tutorial: How to Create a Decoder Design in Illustrator

Secret Decoder Illustrator Tutorial with real Cleveland Graphic Designers

I think one of my favorite things about being a theatre person is discovering ways I can incorporate some aspect of theatre into my projects. Recently, I created a self-promotional piece that incorporates my three favorite things – Theatre, Graphic Design and Typography. It’s a play off of the old super-awesome decoder glasses and hidden messages and all that awesome stuff I remember getting in cereal boxes. Using stage lighting gels and layering type, I managed to do something like this:

final1final2

This process is super easy so don’t worry! And I’ll be right here with you to guide you through this. *cue angelic music*

The difficulty is knowing what colors work well together and what light gel you need to reveal those colors. I know because I have done this already, that Red and Cyan will work and I will get a result that I am looking for…but let’s take this step by step instead of jumping ahead.

First: We’ll have to set up the new Illustrator (or Photoshop, it will work in either program) document. The cards that I was making were 3.5 in x 6 in, but for this guide we’ll make slightly larger cards – 5 x 8 – in CMYK mode at 300 ppi. Though we will be using additive color theory, the piece is still going to be printed (well, I printed these, so I’ll be in CMYK RGB will work but you won’t be seeing the same thing as I am.) Now we’ll have a little better idea about how the colors are going to look like printed.

1

Next, I’m going to create a text box that says what I want my viewer to read first. In lieu of coming up with something witty and interesting for the sake of being witty and interesting, I think I’m going to use a couple lines of lyrics. Let’s start with what’s playing in my headphones…or wait until something a little more interesting than the movie score of “Interstellar,” and has lyrics to type.

1-01-01

Sweet, some Maroon 5. I suggest using a bolder typeface. You’ll get some pretty rad shapes when we get through the next couple of steps. I am going to also have my text centered and aligned to the center of the card. I personally think centering it this way gives some nice shapes in the negative space. It’s also how I did my cards and I had a lot more content then some lyrics. Moving on….

After I set in the type, I went to get the highest value red that I could get, and since we are working in CMYK it was 100% Magenta and 100% Yellow. Boom. I’m ready to move on to the next lyric of whatever is playing in my headphones now. This text is going to be set to 100% Cyan.

cyantext-01

Prince. Also nice. A guilty pleasure I suppose, but it works! I should have mentioned I copied my original red block of text so I knew the leading, type size, and all that was similar. Then I changed the color. Then I moved my red layer back to ye-ol’center. Oh no! What’s this? I can’t see anything…AHHH!

cantsee-01

Is what one might say if they didn’t complete this tutorial.  Of course we can’t see what’s overlapping. The blending modes are normal and opacity is set to 100%. We need to fix that…Now I’m going to change the blending mode to multiply on the red layer. If you are in Illustrator and have a hard time finding the blending modes you have two (maybe three) options: 1) Click on Opacity in the top bar and click on the drop down. 2) Click on the Appearance panel (if you don’t see that, go to Window / Appearance). 3)There is no third option to my knowledge.  This will darken the overlapping areas and give the lighting gel information to complete the text..

no-opacity-01

So, this is a little hard to read the red text. My goal is to read the red text first, then apply the light gel to read the cyan text. I’m going to bring the opacity of the cyan down a bit until I get something that works.

opacity-01

I brought the opacity down to 45%, I think this works better. The red text can be read and the cyan cannot – for now. You might not want the text to be placed on top of each other. If you go back to my example, the text is offset a little from each other. That is more of a personal preference.

3-01-01

If you want to check out if the colors you selected have potential to work there are two options. 1. You can make a box and fill it with the color of the color you want to get rid of. In this example, we want to absorb the red and darken the cyan to make it legible. So I made a red box and set it to multiply (seen above). Option 2 is, if you’re like me and have a Roscolux Stage lighting gel swatch book, you can hold up different swatches to the screen and see what’s working. In this case it’s Rosco #26 Light Red.

Fun Facts with Phil: You can order the gels online, so I’m also sure you can get a swatch book online as well. So there’s that.

Here are a couple other color solutions:

phil-tut-5

phil-tut-6

Tutorial: Pro Tips On Preparing Artwork For T-Shirt Printing