WHAT WE’RE CREATING:

Hello Design Cutters! Simon here. I’m excited to share another tutorial with you guys.

Today you’ll learn how versatile vectors can be, as we create a beautiful gothic poster. You’ll see how vectors can be used for illustrative purposes, texturing purposes and as supporting elements.

Let’s get started!

The Ultimate Creative Vector Elements Collection demo tutorial

A BIT OF CONTEXT

What happened when the Design Cuts team knocked on my door with the awesome Ultimate Creative Vector Elements Collection is simple, really. I spend quite a lot of my time hunting for solid imagery resources around the web. These extensive search turn up quite a few gems, which I often document over on Tumblr. One of my favorite of these gems is Unsplash. If you’ve followed along my gig poster tutorial, or the grungy retro poster one, you’ve already seen some of its little nuggets of awesome.

So, when Tom and the crew shared the assets of the Ultimate Creative Vector Element Collection with me, I was browsing Unsplash, and I found these three amazing images centered around the theme of fog.

A foggy forest by Jonas Nilsson Lee

The Ultimate Creative Vector Elements Collection demo tutorial

A foggy train station at night by Robin Racker

The Ultimate Creative Vector Elements Collection demo tutorial

A foggy and rainy water landscape by Yuriy Khimanin

The Ultimate Creative Vector Elements Collection demo tutorial

Fog is an amazing meteorological phenomenon. It creates that dreamy, moody, sometimes scary atmosphere. From there on, I knew I wanted to build a scene around such an image. I looked around for some more, and through Flickr, came across this one, by Tim Green. It’s a beautiful “cemetery in fog” photo.

The Ultimate Creative Vector Elements Collection demo tutorial

This image was even better than the Unsplashed ones, because:

  • It’s matching the three characteristics quoted above (dreamy, moody, and scary)
  • It’s shared under a CC license
  • It’s monochrome, meaning we can easily assign it our own color palette
  • It’s available in high resolution
  • The background fades to a solid color at the top (perfect to integrate it into a bigger piece)

After carefully browsing the collection’s content, it was clear that I had everything in my hands needed to make a slightly mysterious poster, which that softly unsettling feel to it. Let me walk you through the process I followed.

STEP 1: SKETCHING

Sketches? Aren’t we working in Photoshop? I’ll never repeat it enough, but idea generation through sketching is of the utmost importance. As a designer, I’m someone that communicates visually. It’s also how I think. So that first step of just playing with shapes, size relationships, and element placements is crucial for me to come up with layouts. Note that my frames are proportional to the size our piece will have (18″x24″). One idea often leads to another, and helps to generate a wide variety of potential routes to follow. Below is ae quick iPhone photo of my sketches.

The Ultimate Creative Vector Elements Collection demo tutorial

And don’t worry about how good you are at drawing. These sketches are just guides, seeds, for the final piece. There’s no need to be perfectly accurate. They’re here to freeze a decent enough preview of what the final piece will look like.

As you can see on the photo, we chose to go with my first concept (top left). It features Offset’s anatomy collection, one of Ghostly Pixels’ polygon outlines, and a bunch of other little elements here and there (mostly some of the vector textures).

Should we get started?

STEP 2: DOCUMENT SETUP

As I said above, we’ll be working in an 18″x24″ RGB canvas @ 300 dpi. This tutorial will primarily be done in Photoshop, with the occasional switch to Illustrator to copy and paste vector resources in our piece.

The Ultimate Creative Vector Elements Collection demo tutorial

In terms of guides, I placed some to mark the center of the canvas, and a 1″ border around its edges.

The Ultimate Creative Vector Elements Collection demo tutorial

With that out of the way, let’s get started for good.

STEP 3: BUILDING THE BACKGROUND

Placing the photograph

First things first, we need to place our cemetery image in our document. Use File > Place to do so, as it leaves the image as a smart object. Note how that gravestone at the left touches the edge of the canvas.

The Ultimate Creative Vector Elements Collection demo tutorial

Integrating it into the piece

Once we’ve placed the image, we’re going to fade it into the background, to artificially make it look taller than it is. It’s the same technique we leveraged in the fake gig poster tutorial. The transition will be smooth thanks to the power of layer masks.

Start by sampling a gray as close to the edge of the photo as possible. I got a light gray, #e0e0e0.

The Ultimate Creative Vector Elements Collection demo tutorial

Create a new layer below the photo layer (or use the background layer), and fill it with that gray.

The Ultimate Creative Vector Elements Collection demo tutorial

Next, add a layer mask to the original photo layer (Layer > Layer mask > Reveal all with the proper layer selected).

The Ultimate Creative Vector Elements Collection demo tutorial

With that done, use the gradient tool to create a smooth transition between the image and the gray layer. Make sure to start your gradient below the line you”re looking to fade.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

I’ve used a very straight-forward black to white gradient.

The Ultimate Creative Vector Elements Collection demo tutorial

The transition still isn’t so smooth, so let’s add a bit of blur on that layer mask. ALT/OPTION+CLICK the layer mask so you can access its content, and use the Gaussian blur filter to soften things further. I’m using a 50 pixels radius, but feel free to adjust to your taste.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The transition is much smoother now.

The Ultimate Creative Vector Elements Collection demo tutorial

Further refinements with textures

But while the transition is much smoother, the solid color we added to our background layer doesn’t recreate the grainy effect the fog gives to our image. So we’re simply going to add a grain texture to that background layer, to match that effect as well as possible.

One of my favorite grain textures is this super high resolution beauty, by DeviantArt user JakezDaniel.

The Ultimate Creative Vector Elements Collection demo tutorial

Download his file, and place it in your canvas. I’ve placed it in a vertical orientation.

The Ultimate Creative Vector Elements Collection demo tutorial

Then, slide it under the photo layer and above the background layer.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Proceed to rasterize the texture (if you placed it as a smart object like me), and sharpen it to make the grain a bit rougher (Filter > Sharpen > Sharpen). Once that’s done, simply change the layer’s blending mode to Soft light, and lower its opacity until the effect matches the background’s grain with the photo’s grain. My final opacity for the grain texture is 35%.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Now that that’s done, it’s time to further unite the two layers by adding another texture on top of them. We’ll use a paper grain, specifically this old envelope. Place it in your document so the center seam isn’t visible, and so most of the creases and folds in the paper are close to one of the edges of your canvas.

The Ultimate Creative Vector Elements Collection demo tutorial

Once the texture is placed in your canvas and at the top of your layer stack, proceed to rasterize it, desaturate it (CTRL/CMD+SHIFT+U, and sharpen it (Filter > Sharpen > Sharpen).

The Ultimate Creative Vector Elements Collection demo tutorial

Once you’re done with that, it’s time to call the Levels panel to the rescue. This little panel (CTRL/CMD+L) will help us to tweak the contrast of the texture, ultimately increasing or decreasing its “strength” and impact on the piece.

There are no set rules on what to do to your texture, but I usually try to get the blacks and the mid-tones darker, and the highlights brighter. See my values below and their effect on the texture.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

I tend to follow that tweaking process with all the textures I use. Desaturating them allows me to use the textures for whatever grain, scratches, bumps, etc., they bring to the piece, regardless of their color(s). This gives me a much finer control over the final palette of my piece. That being said, there are obviously cases where I’ll adapt this workflow, but it’s a good place to start.

Now that we have our texture tweaked the way we want, let’s change its blending mode to Soft light @ 100% opacity, and admire the result. The paper grain further unifies our background elements together.

The Ultimate Creative Vector Elements Collection demo tutorial

Time to add a splash of color

If you look closely at my sketches, you’ll see that I was also doing some title research at the bottom. The title I chose for that piece is Nevermore (channeling my inner Edgar Poe here). With that in mind, I hoped onto ColourLovers to see if I could find some inspiration. And I did. This beautiful nevermore… palette by SHUTUPBECK is perfect: subtle, dark, and with some nice highlights as well.

The Ultimate Creative Vector Elements Collection demo tutorial

Now that we have a color palette in mind, we’re going to apply it to our image. We’ll be using a gradient map adjustment layer to do so. Basically, these adjustment layers replace the gray values of the layer(s) they’re applied to to whatever corresponding values the gradient your feeding them with has.

Let’s start by adding such a layer at the top of our current layer stack. You’ll find the menu to do so at the bottom of your layer palette.

The Ultimate Creative Vector Elements Collection demo tutorial

The interface to edit them is super simple. Double-click on the gradient to find the same panel you’d get when editing a gradient through the gradient tool. You can see both the property panel and the gradient editor panel side by side below.

I’ve also indicated my color values (sampled from the color palette) below. The dark tones (at 0%) get the darkest blue (#121212), a first stop at 25% get the intermediary blue (#19262b), a second stop at 50% gets the lighter blue (#325461), and the 100% stop gets the “Dead firefly” color (#d6d2b6).

The Ultimate Creative Vector Elements Collection demo tutorial

Once these settings are applied, here’s the result!

The Ultimate Creative Vector Elements Collection demo tutorial

Note: we also took advantage of that technique in the Grindhouse poster tutorial. Don’t hesitate to check it out if you need additional details on the technique.

A grunge border

The last piece of the background’s puzzle is a worn border. We’re going to leverage one of Nicky Laatz’s amazing Illustrator brush for that.

The Ultimate Creative Vector Elements Collection demo tutorial

But before, a bit of prep work is in order. First, let’s clean our layers a bit. I strongly advise you to keep some well organized and named layers, for your own sake. That doesn’t mean you need to adopt my layer organization and naming system, but for the love of all that is beautiful in this world, please find one that suits you. So, here are my layers so far. They are in their own “Background” layer group.

The Ultimate Creative Vector Elements Collection demo tutorial

With that done, time to open Nicky’s Very vintage kit > file2.ai. I’m going to show you a method that makes it so you don’t have to install the brushes, thanks to how she created her file.

Simply create an 18″x24″ rectangle, straight in Nicky’s file. Make sure it only has a stroke, and no fill color.

The Ultimate Creative Vector Elements Collection demo tutorial

Because of how she constructed her file (including demo elements), the brushes are loaded by Illustrator and accessible through the brush panel (F5). Select the one that suits your fancy, and apply it to the rectangle you created earlier. The one I chose is called Pattern brush 3.

The Ultimate Creative Vector Elements Collection demo tutorial

Increase the stroke until the frame’s thickness is to your taste. This means 4 points for me.

The Ultimate Creative Vector Elements Collection demo tutorial

Simple so far, right? Well, now starts the complex part. Head back to Photoshop, and create a layer at the bottom of your layer stack, filled with the lightest color of our palette (“Dead firefly” – #d6d2b6).

The Ultimate Creative Vector Elements Collection demo tutorial

We’re going to use the vector frame we created as a piece to add to layer masks via selections, to show just enough of that light layer hidden at the bottom. This will add a nice rough edge to our poster.

Head back to Illustrator. Expand the frame we created (Object > Expand appearance). Below is a before/after view.

The Ultimate Creative Vector Elements Collection demo tutorial

Copy the frame, and paste it as a smart object into your Photoshop document, above everything else.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Place it the way you’d like the rough edge effect to be. Basically, wherever your frame is, the light layer will show through.

The Ultimate Creative Vector Elements Collection demo tutorial

Next, hide the layer. Then, CTRL/CMD+CLICK its thumbnail so as to load its content as a selection.

The Ultimate Creative Vector Elements Collection demo tutorial

This is where the layer mask craziness starts. First, with the selection active, add a layer mask to the background’s gray layer. Use the Add vector mask button at the bottom of the layer palette to speed up the process.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Here’s the layer mask’s content.

The Ultimate Creative Vector Elements Collection demo tutorial

What happened is that the active selection is shown, while whatever is out of that selection is hidden. The problem is that we want the opposite of what just happened (the gray layer to show everywhere, except on the rough edge). Select the layer mask’s thumbnail, and invert its content (CTRL/CMD+I).

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Next, we’re going to also apply the frame to the picture layer itself. Load the frame as a selection again, and head over to the image’s layer mask (the one with the gradient).

The Ultimate Creative Vector Elements Collection demo tutorial

You can now fill the selection with black (Edit > Fill > (Use) Black or SHIFT+F5 if your foreground color is black).

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

And here’s our frame! You can now delete the frame smart object, or slide it at the bottom of your layer palette.

The Ultimate Creative Vector Elements Collection demo tutorial

Some minor background adjustments

Something I’m noticing that’s bugging me: the background transition between the photo and its vertical extension isn’t that gradual. See the areas I’ve highlighted below.

The Ultimate Creative Vector Elements Collection demo tutorial

The solution? Well, the one I’m using involves a levels adjustment layer (you’ll access that one the same way you’ve accessed the gradient map adjustment layer). Add one of these at the top of your gray layer, and clip it to that layer as well (CTRL/CMD+G).

Your next step will be to play with the sliders until you reach a point were the transition is smoother to your eyes.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

That’s much better.

The Ultimate Creative Vector Elements Collection demo tutorial

Last adjustment: the frame color. Currently, the gradient map adjustment layer‘s layer mask is completely white, meaning that it applies to everything, including the portion of our very light layer that’s showing through the frame. Because of this, the top part of the frame fades in the piece a bit too much. I’d like the color to be closer to the original, so the frame “pops” a bit more.

In order to do that, we’ll simply add the frame selection to the gradient map’s layer mask. But instead of filling it with black, which would completely hide its effect on that area, we’ll fill it with 50% gray (#808080). This only partly blocks the effect of the adjustment layer.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The result makes for a much more visible frame.

The Ultimate Creative Vector Elements Collection demo tutorial

With that piece taken care of, the foundation for our poster is finally ready. Time to start adding the poster content in, don’t you think?

STEP 4: ADDING THE CONTENT

The bits and pieces you’ll need

The poster’s main content elements include stuff from Offset’s anatomy shots, one of Ghostly Pixels’ polygon outlines, and some of the dividers found in Tomodachi’s Rocking vectors around the title.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Let’s start with the stars of the show, the anatomy elements.

Human parts

The skull is obviously highly fitting as our background image depicts a cemetery. Let’s start with him. Simply copy the skull vector from Illustrator, and paste it in as a smart object. I’m placing the skull so it sits in the top half of the poster. Don’t worry too much about being accurate for now, as we’ll fine tune the sizes and exact locations as we go.

The Ultimate Creative Vector Elements Collection demo tutorial

Next, at the top of the poster, is the hand. Place it not too far above the skull, and size it so it’s roughly 34 of the width of the head.

The Ultimate Creative Vector Elements Collection demo tutorial

Finally, at the bottom of the poster is the foot. It’s placed sideways, and flipped on its vertical axe, so the big toe is at the bottom.

The Ultimate Creative Vector Elements Collection demo tutorial

A bit of color

Now that these elements are here, we should give them their colors. I’ll be using the same ones that I’ve used for my gradient map, except in a reverse ways of sort. The hand, which is placed in the lightest part of the poster, will get a color overlay of #121212, our darkest color. The skull, which is in the middle of the spectrum, will receive a color overlay of #19262b, the second darkest blue, and a quickly hand-painted background of #d6d2b6, our lightest color. Finally, the foot, which is in the darkest part of the poster, will receive a color overlay of #d6d2b6. Here are the color overlays:

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Next, let’s paint a background behind the skull. Create a new layer right behind it, take a small-ish brush (I’m using 250 pixels @ 100% hardness), and paint a clear background behind it. You could, if you wanted to, create a very precise selection around the skull using the pen tool. See the Grindhouse poster tutorial for more information on that technique.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Then, take a much smaller eraser (around 100 pixels) and clean up a bit.

The Ultimate Creative Vector Elements Collection demo tutorial

Once that’s done, link the skull layer and its background together, so you’ll transform and/or move both at the same time if needed.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Mysterious geometry

Let’s add the polygon outline in now. I’m going to place it behind the skull, so it seems that the skull is somehow fused in it. You can either use the high resolution PNG version, or the vector version. I’m using the vector one because of personal preference.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

With that done, give the polygon the same color (#19262b) than the skull. You can accomplish this either through a color overlay, or by directly editing the smart object in Illustrator.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

After that, let’s adjust the placement of the skull/polygon combo a bit. I’m anchoring the bottom angle of the polygon at the cross you can guess at the top of the church.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

While you’re at it, you can slightly adjust the size of the foot and hand.

The Ultimate Creative Vector Elements Collection demo tutorial

PART 5: TYPE

The main type block

In order to further refine the placement of our various bits and pieces, now is the perfect time to add our type element to the mix. The word to write is “Nevermore.” It’s set in Edmond Sans from Lost Type Co-op. I’m using some super wide tracking (350) to give that very solemn vibe to the text. The type is in our lightest color, so it’ll “pop” right out of the piece (#d6d2b6).

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Once you’re happy with the way your type block looks like, it’s time to add our dividers in.

The Ultimate Creative Vector Elements Collection demo tutorial

Head over to the Rockin’ vectors, and grab the top one.

The Ultimate Creative Vector Elements Collection demo tutorial

Bring it in as a smart object. Size it so it’s roughly the width of your type piece.

The Ultimate Creative Vector Elements Collection demo tutorial

Bring the bottom one, and size it the same.

The Ultimate Creative Vector Elements Collection demo tutorial

Once they’re sized the same length, select both of them and make them slightly wider than the type. This will give it an even stronger horizontal direction.

The Ultimate Creative Vector Elements Collection demo tutorial

Change their color to the same color than the text (#d6d2b6) (color overlay, or through Illustrator).

The Ultimate Creative Vector Elements Collection demo tutorial

Once the correct colors are in place, adjust the vertical spacing/grouping as needed.

The Ultimate Creative Vector Elements Collection demo tutorial

The shadow type block

While I’m happy with my type as it stands, I feel it could benefit from more depth.

The Ultimate Creative Vector Elements Collection demo tutorial

In order to get more depth, I’m going to duplicate my whole type block, merge the copy into a smart object, give a darker color, and offset it a bit. Here it goes.

One, organize your layers a bit.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Once that’s done, select the layers from the Shadow group, and convert them to a smart object. It’s the same as merging them, but reversible.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Reorganize things for clarity…

The Ultimate Creative Vector Elements Collection demo tutorial

Proceed to the color overlay (#19262b).

The Ultimate Creative Vector Elements Collection demo tutorial

Offset the shadow block using the arrow keys of your keyboard, and admire the result.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

STEP 6: FINAL PLACEMENT

Before we weather and texture things, we need to fine tune the placement (and size, if applicable) of our puzzle bits. The hand could stand to be a bit wider, and everything else to slide down a hair to varying degrees.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Another thing I’m also going to do is to erase some of the little annotations that are present on the anatomy pieces.

The Ultimate Creative Vector Elements Collection demo tutorial

Simply add layer masks to the elements, and paint them away. The result is a “cleaner” ensemble, with less visual clutter.

The Ultimate Creative Vector Elements Collection demo tutorial

From here, it’s time to weather things out!

STEP 7: WEATHERING

All of the type elements and anatomy drawings look great, but way too clean and digital. It’s time to bring some analog textures in layer masks to weather and fade them away.

I’ll be using a texture pack I created, called the Photocopy noise texture pack, and that’s currently available on Creative Market. These texture can be turned from subtle noise to nuclear obliteration material, and have been patiently scanned at ultra-high resolution. They were part of a past bundle here. If you don’t own them and can’t purchase them, don’t worry. Any subtle grunge textures will do the trick (some of my favorite stuff: #1, #2, and #3).

Our main tactic will consist in pasting our textures in layer masks that will be applied to all or part of the elements at hand. Let’s start!

The skull

Let’s start with the skull. I’ll be using photocopy-noise-textures-sbh-004.jpg. Start by opening the texture, and copy it.

The Ultimate Creative Vector Elements Collection demo tutorial

Head back to your poster document, and add a layer mask to the skull. Make sure it’s unlinked, as this will allow us to move the texture around independently from the layer itself (if you have linked layers in place, you will need to unlink these as well, even if temporarily).

The Ultimate Creative Vector Elements Collection demo tutorial

From there, CTRL/OPTION+CLICK the layer mask thumbnail to access its content, and paste the texture in there. Make sure it covers the whole canvas.

The Ultimate Creative Vector Elements Collection demo tutorial

Invert the texture (CTRL/CMD+I), sharpen it, and admire the result.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

It looks like the effect isn’t strong enough to be noticed quite yet.

The Ultimate Creative Vector Elements Collection demo tutorial

Just as when texturing the background, we’ll use the levels panel (CTRL/CMD+L) to fix this.

The Ultimate Creative Vector Elements Collection demo tutorial

Given how high-resolution these textures are, you might have to apply the levels a few times to reach your desired effect.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The result is much better after a few passes.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Apply the same layer mask to the skull’s background. You can copy/paste from one layer mask to another.

The Ultimate Creative Vector Elements Collection demo tutorial

The polygon

Let’s grab another texture from our pack, photocopy-noise-textures-sbh-003.jpg.

The Ultimate Creative Vector Elements Collection demo tutorial

Following the same process that for the skull, fade the polygon out.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

A fun phenomenon is happening: since we grunged out both the skull and its background, the polygin is showing through them.

The Ultimate Creative Vector Elements Collection demo tutorial

This is somewhat undesirable. To fix that, start by CTRL/CMD+CLICK the skull’s background layer to load it as a selection.

The Ultimate Creative Vector Elements Collection demo tutorial

Then, head over to the polygon’s layer mask, and fill the selection in black to hide the polygon when it’s “behind” the skull.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

“Global” weathering

Add a layer mask to the layer group that contains the anatomy pieces and the polygon.

The Ultimate Creative Vector Elements Collection demo tutorial

Switch to photocopy-noise-textures-sbh-005.jpg, which has a much harsher grain, and paste that one in this latest layer mask.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

We haven’t looked at layers in a long time. Here’s what my stack looks like for now:

The Ultimate Creative Vector Elements Collection demo tutorial

Type weathering

The type treatment is a “global” one as well. Add a layer mask to the global type layer group, and paste photocopy-noise-textures-sbh-006.jpg into it.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

There’s no need to invert that one, but it still could use a bit of softening.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

And done.

The Ultimate Creative Vector Elements Collection demo tutorial

STEP 8: TEXTURES

We’re getting close to the end. Given the rich array of vector textures available in this deal, I felt it would be too bad to not use any of them.

Vector texture elements

These are so straight forward to use, it should be illegal. Simply grab them in Illustrator, paste them as smart object in your piece, size them at will, give them a color overlay, adjust opacity if needed, and profit. Following that simple workflow, I used the following elements:

The first one we’ll use is from Nicky Laatz’s Very vintage kit. Open the file textures.ai.

The Ultimate Creative Vector Elements Collection demo tutorial

Place it into your Photoshop document, according to taste. Here it is, highlighted in red for a better sense of what’s going on.

The Ultimate Creative Vector Elements Collection demo tutorial

Switch its color to our darkest blue (#19262b), and you’re done with this one.

The Ultimate Creative Vector Elements Collection demo tutorial

Next, we’re going to leverage Ghostly Pixels’ Halftone Scuffs. The process to use these is the same than the previous one. First, let’s place Scuff20_byGhostlyPixels in our document (PNG or EPS, it doesn’t matter too much).

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Change its color to the same dark blue (#19262b), and move on.

The Ultimate Creative Vector Elements Collection demo tutorial

Next is Scuff19_byGhostlyPixels.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Change its color to the same dark blue (#19262b).

The Ultimate Creative Vector Elements Collection demo tutorial

The last but not the least of the vector textures, I’m using Offset’s T19 (from the Vector texture kit).

The Ultimate Creative Vector Elements Collection demo tutorial

Note how I slightly stretched it so it would fit to the edges of my canvas.

The Ultimate Creative Vector Elements Collection demo tutorial

Change its color (#19262b).

The Ultimate Creative Vector Elements Collection demo tutorial

Here’s what your layer stack should more or less look like:

The Ultimate Creative Vector Elements Collection demo tutorial

Raster textures

I’m going to add two raster textures as the “almost-icing-on-the-cake.” While the many vector textures that the deal includes are AMAZING, raster textures will often keep an edge on them in terms of subtlety and in how organic they feel.

The first texture we’ll be adding is #16 in this scratched texture pack from Lost and Taken. It’s easy, it’s the bright orange one.

The Ultimate Creative Vector Elements Collection demo tutorial

Place the texture, desaturate, and sharpen it.

The Ultimate Creative Vector Elements Collection demo tutorial

Adjust the levels.

The Ultimate Creative Vector Elements Collection demo tutorial

Change the blending mode to Soft light @ 35%.

The Ultimate Creative Vector Elements Collection demo tutorial

The last texture we’ll use is this brush stroke texture. It’s able to give a super painterly feel to a design, and I’d like to add just a hint of that.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Invert it.

The Ultimate Creative Vector Elements Collection demo tutorial

Change its blending mode to Soft light @ 20% opacity.

The Ultimate Creative Vector Elements Collection demo tutorial

Here are the layers:

The Ultimate Creative Vector Elements Collection demo tutorial

STEP 9: FINALIZATION

And we’re almost done! The last piece of the puzzle is a little halftone effect. Create a merged copy of your whole piece so far (CTRL/CMD+SHIFT+ALT/OPTION+E). Rename the layer that’s created into Halftones, and give it its own layer group. Convert that layer to a smart object.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Head over to Filters > Pixelate > Color halftones.

The Ultimate Creative Vector Elements Collection demo tutorial

Since our layer is a smart object, we’re going to be able to change the blending mode of its effect (Color halftones) and the layer itself. Switch the effect’s blending mode to Soft light.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

Change the blending mode of the layer itself to Lighter color @ 75% opacity.

The Ultimate Creative Vector Elements Collection demo tutorial

The last touch is to add a clipped Hue/Saturation adjustment layer to the halftones layer, and to lower the saturation to -75.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

And we’re done! Here’s the final view of the layer palette.

The Ultimate Creative Vector Elements Collection demo tutorial

Don’t hesitate to mock your result up for us to look at! You should share it on the Design Cuts Facebook page.

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

The Ultimate Creative Vector Elements Collection demo tutorial

I hope you had as much going through the tutorial as I had writing it. Don’t hesitate to ask questions in the comment, and you should follow me on twitter: @simonhartmann.

Remember, the vectors used in this tutorial are just a tiny selection from the Ultimate Vector Elements Collection that we’re currently running. You can grab thousands of best-selling, professional quality vector elements for 91% off. Hurry though, this deal is expiring soon:

The Ultimate Vector Elements Collection – 91% Off

Enjoy this tutorial? You’ll love this week’s deal: