How to Make TV Glitch Textures in Adobe Photoshop

Tutorial: Making Totally Tubular Glitch Effects in PS (plus 4 Free TV Glitch Textures just for YOU)

Working with Photoshop's Quick Mask Mode

Introducing our newest Video Tutorial: Working with Photoshop’s Quick Mask Mode

Working with Photoshop’s Quick Mask Mode

Go Media’s Arsenal proudly announces the release of a brand new video tutorial, “Digitizing Your Illustrations with the Quick Mask Mode in Photoshop.”

In this video tutorial, Go Media’s Lindsey Meisterheim will be using a kind line illustration to show you how to work with the quick mask mode in Photoshop.

This tutorial will show you how this versatile tool was a key element in ensuring her one of a kind illustration maintained a realistic, hand-drawn look (as if it was drawn right in Photoshop).

Lindsey will take you step-by-step through her process. This includes how she:

  • got the inspiration for her unique, almost child-like drawing
  • used the quick mask mode to achieve the look you see above (shapes built upon shapes without losing their integrity/color)
  • added the watercolor/wash effect
  • chose the color for her piece
  • and more!

Lindsey will show how she uses this versatile tool to refine her selection and maintain the integrity of the illustration she has created so that it appears as if it was drawn right in Photoshop.

Follow along with Lindsey as she moves through the tutorial. The 10 Indian Ink Washes we included will aid you in your journey.

Tutorial length: 35 minutes

Purchase the Tutorial

Using Crumpled Paper Textures to Pimp out your Hang in There Cat Poster (Freebie Included!)

Text Portrait Poster

PS Tutorial: Create a text portrait poster based on your favorite book (Free mockup included)

Download of the Day: Polaroid Photo Effect Template & How-To

Polaroid Photoshop Tutorial: Simplified!

Join us every Thursday, when your friends here at the Arsenal take over the Go Media blog to share insights, tips, freebies or other fun to brighten your work day.

Today we’re talking about how to get an authentic photoshop effect for your photos. To get this effect, you’ll need a photo, the Photoshop template we’ve created just for you, and a few moments to follow the steps you’ve provided for you. We promise it will be worth it!

Love our products? Access our huge product library ($11k in resources) and exclusive content for only $15/mth. Yes, seriously. Learn more now.

To get started, please download the Polaroid Effect Template. This template was created with resources we found on line including this awesome photo from akinna-stock on Deviant Art. Thanks Akinna!

The Download: Polaroid Photo Effect Template by Go Media

Polaroid-Photoshop-Document

STEP ONE: Open your template in PS. Make sure the “Place your Art Here” layer is selected. File > Place your photo into this layer. It will place your art into the mask like so.

step-one

———————

STEP TWO: If you’d like to add some vintage effects to your photo, let’s proceed. Right click on your photo > Rasterize Lazer.

Here are some tools you can use to age your photo. Feel free to play around with these in order to get the look you’re after >

The first: Head to Image > Adjustments > Hue and Saturation (Shortcut Ctrl + U) – now, under present, try selecting Sepia or Old Style

My photo using the "Old Style" preset

My photo using the “Old Style” preset

———————

STEP TWO: 

Try Filter > Texture > Grain – Experiment with adding grain here!

Here, I used an intensity of 7 and a contrast of 53
Here, I used an intensity of 7 and a contrast of 53

———————

STEP THREE:
Try to play with your curves. I suggest working with Red, Green, Blue, as well as your RGB setting separately. This will adjust your colors in order to give it the vintage effect you’re after.curves

———————

STEP FOUR: 

Try to play with your curves. I suggest working with Red, Green, Blue, as well as your RGB setting separately. This will adjust your colors in order to give it the vintage effect you’re after.brightness

———————

STEP FIVE: 

You can further mute the colors in your image by going to Image > Adjustments > Brightness. I chose a contrast of -20 to achieve this affect.final

———————

STEP SIX: 

Want to make some last minute color changes, head to Layer > New Adjustment Layer > Color Balance. Clip your Color Balance layer to your photo by selecting both layers then putting your cursor between the layers and right clicking to “Create Clipping Mask.” Use the RGB selections to achieve our final vintage look.

You’re done!

Here is my before and after.

before-and-after

Tutorial: Rockin’ Some Radical Glitch Effects in PS (plus 4 Free TV Glitch Textures just for YOU)

TV Glitch Effects: Makin’ Em in PS (& Free TV Glitch Textures, Too!)

So guys, we’re kind of obsessed with these tv glitch textures we’ve been seeing around town lately. So, we created some for you to use and apply to your work right now.

Download: 4 Free TV Glitch Textures by Go Media’s Arsenal 

We also thought you might like to learn how to apply your own glitch effect on photos in Photoshop. So stick around and we’ll create some magic together.

Ready, set…

Step 1

Choose your photo and open it up in PS.

Something about this photo really called to me. Can’t put my finger on it.

5282951160_8a261e63a4_o

Step 2

Press play.

Step 3

Open up your channels panel, then highlight your red panel.

2

Step 4

From your menu options, select Filter > Distort > Shear

3

Step 5

Using the points given, create a soft wave.

In the “Undefined Areas,” section, select “Repeat Edge Pixels,” then select “Ok” to Save.

4

Step 6

Look back at your channels panel. Make sure all of your colors are selected now. What do you think? Love what you see? Want more cowbell?

5

If you’re craving more glitch, select your green panel and repeat the process we completed in Step 5.

6

Step 7

And, you guessed it! Feel free to repeat with the blue color channel as well.

Play with it until you’re satisfied.

7

Step 8

Last, let’s go Filter > Noise > Add Noise. Crank that up as high as you’d like (Gaussian) and Ok to Save.

8

Step 8

Boom! You’re done! Mock that beautiful art up on a MockupEverything.com or Arsenal template and call it a day. I salute you!

final-final

Hope you guys had fun. What freebie textures, what tutorials do you want us to create next? Please let us know in the comments section below!

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

Texture Tutorial: using metal and rust textures to destroy a design

Texture Tutorial: using metal and rust textures to destroy a design

Hello all! Simon from Studio Ace of Spade here again, ready to show you how to use my latest textures, the metal dumpster texture pack, to destroy and weather out the crap of your designs.

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

What’s in the pack?

A little while ago, there was one of these huge metal dumpsters sitting in a parking lot. Since no texture library is complete without rust and metal textures, I got my camera out and shot as many images I could of the banged-up monster. The textures range from subtle speckles in the paint to massive rust damage. This makes this pack highly versatile, and will help you bring either subtle touches or nuclear damage to your pieces.

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

The textures can be used as overlays, or pasted in layer masks. There are 45 textures in the pack, sized at 3264 x 2448 pixels.

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

How can I use these textures?

Well, I’m glad you’re asking, because just like with my photocopy noise textures pack, I’ve taken the time to write a little tutorial. We’ll be using OKPants’ sweet Road Hog tee design pack as the base artwork for our experimentation. What’s the Road Hog tee design pack, you ask? The Go Media team wrote a very convenient blog post to answer the questions you could have.

This tutorial is rather short, and takes advantage of layer masks and blending modes. Count around an hour of playtime in both Illustrator (Ai) and Photoshop (Ps). Plug your headphones, press play on some nice music, and let’s go.

The starting point: preparing the Road Hog design to our liking

The Road Hog tee design pack includes a biker/Americana inspired design, that you could take apart and re-arrange to your liking. Or, like me, you could just leave it in one piece. Here’s a shot of the design in Ai. This is the “sea foam” color palette.

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

The design also comes in a black and white color palette, an “heritage” color palette (rust tones), and an “Americana” color palette. Feel free to choose the one you prefer for this tutorial.

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

The original sea foam palette is nice, but the tones are a tad too strong and saturated for my taste. After a bit of research on Colourlovers, I managed to find a more subdued version of the color palette. After using the magic wand (Y) and the Select > Same > Fill color menu a few times, our base art was recolored.

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

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

The re-coloration process is really easy since the design is simple and the vectors well constructed. Just make sure that all of your shapes are ungrouped and unlocked, and it should go smoothly. I switched the bright yellow to the faded yellow at the left of the color palette image (#f0eec1), the main blue hue to the palette’s faded blue (#b2dabf), and the black to the dark brown/purple (#5c4a4e) at the right of the palette. I created the darker blue by lowering the brightness value of the light blue, which gave me #727d71.

After recoloring the artwork, I added an outline to it. There are multiple ways to do so, but here’s how I do it:

  1. Make sure all of your elements are grouped togetherThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  2. Duplicate the designThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  3. Merge the bottom copy in one shape using the pathfinder’s Unite functionThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  4. Change the color of the merged shape to #f0eec1. I chose the light color because I thought at that stage that the background of my final piece would be dark (the design has been hidden in this shot.)
    The metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  5. Finally, turn the design back on, and use the Offset path function (Object > Path > Offset path) to create the outline. I use Offset path as opposed to a stroke, because the result looks more polished. The downside to that is that unlike a stroke, you can’t easily edit the width of the outline once it’s been created. A few things about the values I’ve used: the thickness of the offset is set at 1/8th of an inch, and the joins to round for a softer feel.The metal dumpster texture pack demo - by The Shop / Simon Birky HartmannThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann
  6. We’ve got ourselves an outline. To make things a bit cleaner, you can run the pathfinder’s unite function on that outline group one more time. This will fuse the multiple shapes that compose it together, living us with one big, clean entity. I’ve highlighted in red the area where the most simplification will happen.
    The metal dumpster texture pack demo - by The Shop / Simon Birky HartmannThe metal dumpster texture pack demo - by The Shop / Simon Birky Hartmann

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

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

Setting up the stage in Ps

Much like when we were playing with the Awaken design, our Ps document will be an 18″x24″ @ 300 dpi canvas. This time, it’ll be setup in a portrait orientation.

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

I’ve completed the setup of my document with guides. I might have created a few too many, but oh well. I have guides at the 1, 2, 8, 9, 10, 16, and 17 inches marks vertically, and 1, 2, 11, 12, 13, 22, and 23 inches marks horizontally.

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

Background preparation

As I’ve said when we were preparing our vectors and adding an outline to them, my original intentions were to have a dark background on our piece. After progressing in my design, I realized that it wouldn’t work very well, so I went back and made sure that my background would be light instead of dark. For the sake of brevity, I’ll spare you that back and forth in this tutorial. So let’s skip directly to the correct layer order for a light background with a dark border.

Let’s fill the background layer with that faded yellow (#f0eec1) from our color palette.

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

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

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

We’re going to take advantage of the Arsenal’s vintage poster borders texture pack to reveal the underlying yellow layer to make it look like there’s a dark border around our design. The process is very simple, and consists of pasting one of these textures (I used the first one in the pack) in a layer mask. Jeff made a video with step by step instructions, and it’s visible here:

Vintage Border effects in Photoshop using Layer Masks from Go Media on Vimeo.

The result of that manipulation is the following:

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

Note that if you don’t own the poster border textures, you could paste any other grunge texture in the layer mask. This series of free vintage film plates textures from Lost and Taken would be an interesting alternate, although a tad too intense in this example:

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

Anyways. Once you’ve prepared your background, it’s time to move along and import our vector design in our Ps document.

Pasting the design from Ai

That’s probably the easiest step: simply copy your design in Ai, and paste in as a smart object in Ps. I sized mine to be around 16 inches wide.

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

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

Texturing the design itself

It’s finally time to use the metal dumpster textures. Place metal-dumpster-textures-018-sbh.jpg above the design.

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

The elements of the texture we’re interested in are these dark scratch marks. In order to extract them, we’ll need to desaturate the texture (CTRL/CMD+SHIFT+U), and to change its blending mode to Screen.

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

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

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

We’re already starting to see these scratches impact the design as if it was painted on metal and exposed to things scraping it off its support. To further the effect, we’ll play with the level palette (CTRL/CMD + L), in order to increase the contrast of the texture.

A few notes about my Levels values: the 100 on the left is the value for the dark tones. It means that I’ve made the dark pixels of the texture darker than what they originally were. The 0.75 is the value for the mid-tones. That slider is normally set at 1. Bringing it to 0.75 means that the mid-tones are also going to be darker. Finally, the 175 on the right is the value for the light pixels of the texture. It’s set to 255 by default. Bringing it down to 175 means that the light pixels are actually going to be lighter. Darker blacks and grays + lighter whites = high contrast texture.

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

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

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

To create such a layer mask is easy. CTRL/CMD+CLICK the thumbnail of your design layer to create a precise selection of its content, then click the new layer mask button at the bottom of your layer palette.

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

Following a similar process, I also added metal-dumpster-textures-022-sbh.jpg to the design. Its effects are much more subtle, but you can see them in the gear behind the skull/wings/bones element.

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

My levels values were a bit different:

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

It’s also to be noted that the texture was not inverted, and put on the Soft light blending mode at 25% opacity. I chose to do so because the results were less aggressive than when using Screen. I’ve also confined its effect to the design only by using the same layer mask  process than before.

The next step was to impact the design layer even more than with its two textures. In order to do so, I gave it its own layer mask, and pasted metal-dumpster-textures-001-sbh.jpg into it. After sizing it to cover most of the design, and playing with levels to bring its contrast to new heights, this is the result:

The original texture

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

Playing with levels

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

The result

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

Impacted areas details

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

To increase the worn feel even further, I created a layer group containing the design’s layer and my texture. I then duplicated the background dark brown layer’s layer mask (CLICK & DRAG + ALT/OPTION+SHIFT) to it. The result isn’t very visible, but some of the mask’s grain lets the dark brown show through.

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

Global textures

If the textures at the previous step are important because they give their character to the design elements themselves, the ones we’ll apply now are just as important. They participate to tie the piece together, by giving their artifacts to the various design elements and the background in a continuous manner. You can choose to apply a lot of them, or just a few. I have three in my case.

The first one is metal-dumpster-textures-012-sbh.jpg. As you can see, it’s a fairly clean texture. The main elements I’m interested to see passed on to the design are those black, dirty marks. They look like smeared paint.

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

After placing the texture in the design (rotated 90° counter-clockwise), desaturating it, I’ve leveraged the levels to get the dark and mid-tones much stronger.

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

Once the blending mode switched to Soft light, and the opacity lowered to 50%, the result brings some subtle darker areas in the top left of the piece. It’s like some liquid slightly stained the art.

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

The next to last texture we’ll use is metal-dumpster-textures-037-sbh.jpg. It’s a texture that I use as a grain texture. There are only a few speckles of rust here and there, and the rest are a few light dots.

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

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

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

And below is the result on the piece after switching it to Soft light @ 50% opacity. It’s very subtle, but still adds a little something.

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

Finally, the last texture I’ve used to add more of the same dirty stain type of finish to the poster is metal-dumpster-textures-030-sbh.jpg.

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

Nothing special to add to the process used before, other than because this one was a bit intense, I’ve put on Soft light @ 35% opacity only.

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

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

The last touches

We could add more textures to the piece, but it wouldn’t add much to the design. It’s better to stop there. Now, you could either leave the piece here, or add just a tiny bit more of contrast and grain. Either way is fine by me, and will equally look nice. You could also add fake folds too, but we’ll get to that in an upcoming tutorial.

The first of the finishing touches is to create a layer that contains a merged copy of all the layers of our piece. There’s a keyboard shortcut for that: CTRL/CMD+SHIFT+ALT/OPTION+E. Simply select your top layer, and press the keyboard shortcut. It will generate a new layer containing that merged copy of your piece. I renamed mine to “Comp” and placed it in its own layer group.

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

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

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

Download this Aged 2 action created by the good peeps at Go Media for an old tutorial, and run it on the Aged 2 layer. Put the layer on Soft light @ 25% opacity. The action created a photocopy type of effect, with something looking like old ink and grain. Below is a close up shot before and after switching the blending mode.

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

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

Finally, we’ll use the stamp effect action Jeff released a little while back. Run the action on that last copy of the Comp layer we have remaining. The action will create two layers, one with just the black pixels of the stamp effect, and another one (usually turned off) with some more details. Turn both of the layers on, merge them together, and call the result Stamp. Place that last layer on Soft light @ 25% opacity and you’re done!

If you want more info about the action before buying it, you can read this quick blog post written for its release.

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

Done!

And the piece is done! Using the metal dumpster texture pack, we were successfully able to age and destroy the design. You should totally mock-up your piece to impress your clients:

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

That’s it for me today. If you have any questions or suggestion about the tutorial or the textures, don’t hesitate to use the comments, or to tweet at me.

BUY THE METAL DUMPSTER TEXTURE PACK

BUY THE ROAD HOG TEE DESIGN PACK

The photocopy noise texture pack by The Shop / Simon Birky Hartmann

Texture Tutorial: Aged poster design with the Photocopy Noise Texture Pack

Texture Tutorial!

Hello there! Simon from Studio Ace of Spade here. Long time no see. I’m here to introduce you today to a texture pack I’ve created, called the photocopy noise texture pack. I’m delighted to announce that it’s finally on sale at the Arsenal!

The photocopy noise texture pack by The Shop / Simon Birky Hartmann

What is the pack about?

What’s so special about this texture pack? First of all, these are hand-made textures. They were made using an old photocopier that had a toner on its last leg. The result is a pack of six fantastic noise textures. The process was simple: I created a black document in Ai, and printed it as many times as I could before the toner gave up. Because it was almost ready to throw away, it wouldn’t print a perfectly black sheet. I got these black rectangles, speckled with white spots and stripes. Once scanned in, cleaned up, and inverted, these make up for perfect noise textures.

A closer look at the content

Some technical data: you get six textures, that are around 4760×6400 @ 600 dpi. Here are what they look like:

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Previews

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Previews

How can I use these?

I thought you’d never ask! In order to demonstrate the possibilities of the textures, I’ve put a quick little tutorial/demo together, using Jeff’s Awakened t-shirt design pack as the base. We’ll use both Ai and Ps for this. Here’s a preview of what we’ll be doing:

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo result

Basically, we’ll use these to age Jeff’s design, along with a few other tricks here and there. Here’s a 100% crop, to get a better sense of what these textures are able to do:

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo result, 100% crop

Note that if you haven’t purchased the Awakened t-shirt pack, or have no idea of what I’m talking about, you should go read and watch more info: over here.

Let’s get started

 Step 1: document setup

Jeff’s illustration is quite neat, and would look quite awesome on a print. So, let’s go ahead and create a new 24 inches wide by 18 inches tall Ps document @ 300 dpi.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Once you have that new document setup, fill its background with dark gray (#231f20), and setup guides for the center and margins. I might have gone a tad overboard with mine. My vertical guides are at the one, two, 11, 12, 13, 22, and 23 inch marks. My horizontal guides are at the one, two, eight, nine, 10, 16, and 17 inch marks.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Oh, and if you’ve read some of my other tutorials before, you’ll probably remember that I’m a stickler for proper layer naming and other Ps etiquette stuff. My background layer is named bg – #231f20, which gives me both its functionality and its color.

Step 2: importing the design

Let’s have a look at Jeff’s design:

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

As you can see, there are quite a few elements that compose it (feathers, purple circular element, red circles, white circle, blue geometrical element, silhouette, and off white stars). I could simply select everything, and copy and paste it in Ps. The only issue with doing that is that it won’t allow us to individually texture the elements. Since I want to do something refined and individualized, I won’t go that route. We’re going to copy and paste each element one by one. It’ll be a bit long, but worth it in the end.

Use the main image as a reference point to position your elements, and make sure that they’re always sized at 100%. Also, don’t forget to paste the elements as smart objects, so they retain their vector characteristics. It’ll be crucial for later.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Note: you may have to center or nudge elements manually.

The purple circular pattern.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The red circles.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The blue geometrical element.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The white circles.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The black silhouette.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The stars.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Aligning the stars back in place (the top star is at the intersection of the top red circles).

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Nudging the wings back in place.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Here’s a view of how the design elements are placed compared to my initial guides. If you want your design or some of its elements to be bigger or smaller within the finished print, now is the time to adjust the sizes. For instance, I’ve decided to size my design so it reaches the smaller rectangles inside of my guides.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

And here’s a view of my layer stack so far.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Step 3: let’s roughen these vectors up

The next step will involve the use of Illustrator’s roughen filter (Effect > Distort and transform > Roughen). I learned about the effect through that 2011 Method and Craft article by Simon Walker. Basically, the effect distorts your paths and adds more or less subtle variations to them.

We’ll be applying the effect on all of the elements of the design, minus the wings. This is where retaining the smart object quality of the elements pasted in Ps comes handy. You simply have to double click on the layer thumbnails of the smart object in order to be brought back to Ai, and to be able to edit the vector element.

Let’s start with the purple circular pattern element. I’ve turned off the other elements of the design for better legibility, but you don’t have to.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Once you’ll double click on the layer thumbnail, Ai will open and you’ll be able to edit just that element.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Let’s select our element, and bring up the roughen filter (Effect > Distort and transform > Roughen). I suggest zooming in a little bit, in order to fully appreciate what the effect does to your paths. Oh, and tick that “Preview” box to see what’s happening.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Obviously, the default values are a bit extreme in terms of result. After a little bit of tinkering, the values I’ve settled on are the following:

  • Size: 0.1%, relative
  • Detail: 50/inch
  • Points: smooth

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Note that you can come up with your own values. These should be considered as a starting point for your own exploration. Also, you could decide to expand the various elements from strokes to paths, or to leave them as is. Once you’re happy with the filter’s values, validate them. The next step: save your work (CTRL/CMD+S), close the file in Ai, and head back to Ps for a little surprise…

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The effect is applied! Isn’t that neat? Now, you’ll simply have to go through the same process for the other design elements (minus the wings, once again: the halftone effect they have is enough). I personally used the same values for the roughen filter for all the elements, as it gives consistency to the final piece, but you could spend the time to find the perfect values that works the best for each specific part of the design. Below, a few shots of the process, up close:

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Note the special values I’ve ended up using for the white circles: the effect wasn’t visible enough with the other ones I settled on earlier, so I upped the ante a bit. I did return to my previous values for the other elements though.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

And done with that part.

Step 4: textures!

Finally, we can play with textures here. The photocopy noise texture pack is made of black and white textures, which will somewhat dictate the workflow we’ll have with them. First, we need a bit of a refresher about blending modes. This wonderful article by PhotoBlogStop will give you every detail you ever wanted to know about them, including math (!), but we’ll focus on Screen:

Screen: Similar to the Lighten blend mode, but brighter and removes more of the dark pixels, and results in smoother transitions. Works somewhat like the Multiply blend mode, in that it multiplies the light pixels (instead of the dark pixels like the Multiply blend mode does). As an analogy, imagine the selected layer and each of the underlying layers as being 35mm slides, and each slide being placed in a separate projector (one slide for each projector), then all of the projectors are turned on and pointed at the same projector screen…this is the effect of the Screen blend mode. This is a great mode for making blacks disappear while keeping the whites, and for making glow effects.

The most interesting part of this quote is the emphasized sentence: “this is a great mode for making blacks disappear while keeping the whites, and for making glow effects.” It just happens that the noise effects in the textures from our pack ARE white speckles and stripes. So we simply have to put the textures on screen to retain just their noisy part, and the rest shows up as transparent. After that, if the effect is too strong, you simply play with the opacity slider of the texture layer. Let’s put this into practice by adding some noise to our background layer.

Go ahead and place photocopy-noise-textures-sbh-001.jpg in your design. It should be just above the background layer, and sized to cover the whole background.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Give it a quick sharpening (Filter > Sharpen > Sharpen), and simply change the layer’s blending mode to Screen. As you can see, the effect is quite strong.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

We’re simply going to lower the opacity of the layer to 25% for something a bit more subtle.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Also, I’ve given the background elements their own layer group.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

It’s time to start adding our subtle noise to the rest of the design. We could simply use the texture clipped over each element, and tinker with the opacity sliders to create some subtle overlays. But this would show the noise as white or light gray speckles over each design elements. Most of these being line art, we wouldn’t see much of an effect.

We’re going to use another trick from our bag, and paste the textures in layer masks. Remember that whatever part of a layer mask that’s white shows the art, and whatever part of it that’s black hides it. Armed with knowledge, we can deduce that pasting the textures as is will simply obliterate the designs. Nothing subtle here. What we can do however is to invert the textures once they’ve been pasted in the layer masks. From there, playing with levels to increase or decrease the intensity of the effect is child’s play.

The process to paste a texture in a layer mask is easy:

  1. Add a layer mask to the design element you’re interested in impacting (with the layer highlighted, go to Layer > Layer mask > Reveal all). Make sure to click the little chain link between the layer and the layer mask to make it disappear. This will allow you to move or resize the content of the layer mask without changing the design element itself
  2. Open your texture file, copy its content (CTRL/CMD+C)
  3. Go back to your design, and ALT/OPTION + CLICK your layer mask. This will allow you to get access to and edit the content of the layer mask itself, rather than your design
  4. Paste your texture (CTRL/CMD+V)
  5. Resize and edit the content of the layer mask at will
  6. Click back on the design element and admire the result of your work

Here are some images of the process with the wings. I’ve used photocopy-noise-textures-sbh-001.jpg again.

Layer mask added and unlinked.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Pasting the texture in the layer mask.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Resizing the texture to cover the whole canvas. You have access to the same transform controls that outside of the layer mask (CTRL/CMD+T or CTRL/CMD+SHIFT+T for proportional transformations).

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Inverting the texture (CTRL/CMD+I).

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Using the levels palette (CTRL/CMD+L) to increase the contrast.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Admiring the result.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Comparison with the layer mask turned off.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Some of impacted areas highlighted.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

As you can see, it’s quite a simple process, and the result with the photocopy noise texture pack are just the right amount of subtle.

Following a similar workflow, I worked my way through the other elements of the design, using textures #1 to #5 of the pack (#6 will used for the final finishing touch).

Below, some before and after pictures for each element:

Purple circular pattern, before

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Purple circular pattern, after (background turned off for better effect appreciation)

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Layer mask details

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Red circles, before

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Red circles, after

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Layer mask details

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

It can seem that the effect is too subtle. Here’s a 100% crop to convince you otherwise:

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Blue geometrical element, before

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Blue geometrical element, after

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Layer mask detail

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

White circles, before

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

White circles, after

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Layer mask detail

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Silhouette, before

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Silhouette, after

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Layer mask detail

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Stars, before

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Stars, after

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Layer mask detail. Note that I’ve used the same textures than for the silhouette. I’ve simply moved it to the top right a little bit.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

And here’s the full design after all that process:

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

We’re almost done. It’s time for the finishing touches.

Step 5: let’s wrap this up

Now that all of our design elements got their individual weathering treatment, it’s time to tie everything up together. In order to do so, we’ll first add a layer mask to the whole design layer group, and paste one of our textures in there. This will unite the elements together visually, by giving them a consistent weathering. I used photocopy-noise-textures-sbh-004.jpg for that (the one with the heavy striping).

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Once that’s done, we’ll add two more textures at the top of our layer stack. The aim is the same: to tie all the elements visually together, by impacting them all with the same element. First, let’s add photocopy-noise-textures-sbh-005.jpg to our design. Make sure it fills the whole canvas.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Let’s make it significantly darker, so its effect will be much more intense.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

After that, change its blending mode to Screen.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Since the effect was a tad overbearing, I lowered the opacity to 25%.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

We could stay there, but I’d like a effect similar to a vignette, that would detach the center piece from the background a bit. I’ll be using photocopy-noise-textures-sbh-006.jpg to accomplish this. Let’s place it into our document, in a way similar to the image below (it’s been rotated upside down, and scaled up so it covers the whole design). I’ve also given the two top textures their own Global textures layer group.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Once it’s in place, simply change the blending mode to Soft light, and lover the layer opacity to 25%. This gives a much softer result than Screen, and still let’s the background’s subtle noise show through.

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

And we’re done! You could take the time to mock this up on a poster mockup template if you wanted to:

The photocopy noise texture pack by The Shop / Simon Birky Hartmann - Product demo

Last words

I hope you liked going through this tutorial as much as I liked writing it. I also hope it convinced you to get the photocopy noise texture pack, as well as Jeff’s Awakened tee design pack if it isn’t already done. If you have any questions, feel free to tweet at me (@simonhartmann)! I’ll also be watching the comments in the next few days. Thanks again for reading, and until next time, cheers!

BUY THE PHOTOCOPY NOISE TEXTURE PACK

BUY THE AWAKENED TEE DESIGN PACK