Photoshop Abstract Texture Tutorial

Getting our 1980s and VHS tape on with Dustin Schmieding’s cosmic fractal storm texture pack!

Introducing the cosmic fractal storm texture pack

Hello everyone! It’s Simon again on this end of the keyboard. I’m returning for another tutorial, and boy, do we have a treat this week. Dustin Schmieding gifted us with yet another fantastic texture pack, the cosmic fractal storm texture collection.

1

The set is composed of three-dimensional scenes, resembling cloud formations, or landscapes. Each texture is 4,000×2,700 pixels @ 150 ppi. This gives us plenty of pixels to work with, even for big size print applications (posters, flyers, and more).

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

DOWNLOAD THE COSMIC FRACTAL STORM TEXTURE COLLECTION

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

Using the pack: let’s play!

These assets are at home in a variety of contexts. They can be used as stand-alone assets, as background elements, as textures… We will explore some of these uses while we embark on the creation of a poster for a (fake) EDM event called Magnetic Fields.

Cosmic Fractal Storm Textures Exploration Tutorial

The tutorial will have us explore tips and tricks to recreate a “VHS-like” effect, for all that analog glitch goodness.

Cosmic Fractal Storm Textures Exploration Tutorial

We’ll use primarily Photoshop for this tutorial, as manipulating textures is easier with it, and because we won’t engage in complex type manipulation.

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.

With this in place, it’s time to get started!

The concept

As hinted at during our walk-through of the product, these textures feature digital “landscapes” that make no mysteries about how they have been generated. In order to stick to the theme, we are going to give this poster a “Lo-Fi,” CRT-like screen effect. Think of VHS artifacts: scan lines, slight warps, etc.

The concert is being branded as Magnetic Fields, and will take place at the Tate Modern gallery in London, and more specifically in the Turbine Hall. It’s a beautiful industrial space, and hosted a Kraftwerk performance in the past. It’s perfectly fitting.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

(Images via Tate.org/Marcus Leith/Tate Photography – © all rights reserved)

We’ll split our document in two columns to fit all the text (one side main event announcements, one side for the band names). The copy will read “Magnetic Field – 02.06.16 – Tate Modern – Turbine Hall – London, UK,” “Performances by chp_tnes – nu_drds – cbalt – qwerty – & lw_ram,” and “Tickets & information at www.magneticfields.com.”

The two typefaces we’ll use for the poster are League Gothic, and Droid Serif. They are both free for commercial use, so grabbing them is a no-brainer. They even feature an extended set of weights, for even more flexibility.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

All of our band names are inspired by electronics/robotics/computer science jargon:

  • chp_tnes (chiptunes)
  • nu_drds (new droids)
  • cbalt (cobalt)
  • qwerty (look at your keyboard)
  • lw_ram (low RAM)

The event is to take place on February 06th, 2016.

Photoshop Abstract Texture Tutorial

Document setup

Even though our event will take place in the United Kingdom, we will use an 18″x24″ canvas. Designers in the UK would typically use ISO paper sizes, like pretty much the rest of the world. Let’s just say that the performing acts all come from the USA, and that the poster is put together by an American concert promoter.

Cosmic Fractal Storm Textures Exploration Tutorial

As mentioned before, we’ll split our canvas in columns, three to be exact. We’ll also mark a one inch security margin around the edges of our poster. Photoshop CC’s New Guide Layout feature is priceless to generate these rapidly (View > New guide layout).

Cosmic Fractal Storm Textures Exploration Tutorial

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.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

With the preparation work done, we can finally start to tackle the real thing.

The background

The background will be the base for our VHS effect. The first asset we need is GoMediaArsenal-CosmicFractalStorm-03.jpg, from Dustin’s texture pack.

Cosmic Fractal Storm Textures Exploration Tutorial

It needs to be placed as a smart object at X: 0.5″, and Y:12″, scaled up to 135%, and sharpened (Filters > Sharpen > Sharpen).

Cosmic Fractal Storm Textures Exploration Tutorial

Once in place, it looks like this.

Cosmic Fractal Storm Textures Exploration Tutorial

Starting the magic

The VHS-like effect that we will create in a few steps rests on the power of levels, and of blending modes. First, we need three copies of our texture smart object.

Cosmic Fractal Storm Textures Exploration Tutorial

Using clipped levels adjustment layers, we are going to “kill” the output of selective color ranges for each of the copies. Let’s start with GoMediaArsenal-CosmicFractalStorm-03 copy. Using the clipped levels adjustment layer, we are going to change the output of blue hues to zero. This will result in a layer turning to yellow hues. Pro tip: note that the additional copies have been hidden for clarity each time.

Cosmic Fractal Storm Textures Exploration Tutorial

Using the same technique, the second copy GoMediaArsenal-CosmicFractalStorm-03 copy 2 will see its greens disappear, leaving us with a set of saturated purples.

Cosmic Fractal Storm Textures Exploration Tutorial

Finally, we’ll get rid of the reds on GoMediaArsenal-CosmicFractalStorm-03 copy 3.

Cosmic Fractal Storm Textures Exploration Tutorial

With that done, here’s our layer stack so far.

Cosmic Fractal Storm Textures Exploration Tutorial

Next, we are going to create a few layer groups: one is for the copies and their adjustment layers, the other one for the background elements in general.

Cosmic Fractal Storm Textures Exploration Tutorial

Now, we are going to change the blending mode of each copies to exclusion @ 100% opacity (the copies only – not their adjustment layers!).

Cosmic Fractal Storm Textures Exploration Tutorial

The result is slightly underwhelming at the moment, but we are going to address that shortly.

Cosmic Fractal Storm Textures Exploration Tutorial

Out-of-synchronization frames, part one

Next, we need to carefully offset each of the copies from the original smart object. For instance, instead of GoMediaArsenal-CosmicFractalStorm-03 copy being positioned at X: 0.5″, and Y:12″, it should be positioned at X: 0.55″, and Y:12.1″.

Cosmic Fractal Storm Textures Exploration Tutorial

GoMediaArsenal-CosmicFractalStorm-03 copy 2 can go from its original spot to X: 0.495″, and Y:11.95″.

Cosmic Fractal Storm Textures Exploration Tutorial

Finally, GoMediaArsenal-CosmicFractalStorm-03 copy 3 can migrate to X: 0.485″, and Y:11.97″.

Cosmic Fractal Storm Textures Exploration Tutorial

The effect is taking shape: we just established the basis for out-of-synchronization frames, or tape damage. To make things more legible, we are going to lower the opacity of the copies to 50%.

Cosmic Fractal Storm Textures Exploration Tutorial

Out-of-synchronization frames, part two

To make the effect more believable, we are going to alter a portion of it. Let’s start by creating a merged copy of everything so far (CTRL/CMD+ALT/OPTION+SHIFT+E), at the top of our layer stack. The generated layer should be called Shear.

Cosmic Fractal Storm Textures Exploration Tutorial

We are now going to apply a shear filter to it (Filter > Distort > Shear). The effect is controlled through the small curve in the effect window. Clicking on the grid adds controls points (but no handles). Holding ALT/OPTIONS allows you to reset the manipulation. Wrap around loops disappearing image parts on the opposite side of the canvas. Repeat edge pixels stretches the pixels at the limit of the canvas to the image’s edges.

Cosmic Fractal Storm Textures Exploration Tutorial

After creating a curve directed to the bottom right corner of the canvas, our result is pretty dramatic.

Cosmic Fractal Storm Textures Exploration Tutorial

Using our guides, we are going to create selections that we’ll use to mask parts of the sheared layer.

Cosmic Fractal Storm Textures Exploration Tutorial

With the selections active, we can head to Layer > Layer Mask > Reveal selection.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

With that done, we can change the blending mode of the Shear layer to color dodge @ 35% opacity.

Cosmic Fractal Storm Textures Exploration Tutorial

Additional touches

To complement the effect, we are going to add some thin horizontal lines at the edges of our selections. These lines will each be 1 point thick, run the full width of the poster, be colored in 50% gray (#808080), and perfectly aligned with the edges of the visible parts of the Shear layer. These lines should be created with either the pen tool (P), or with the line tool (U).

Cosmic Fractal Storm Textures Exploration Tutorial

The settings options offered by Photoshop CC 2016 allows to customize the stroke. It should be noted that aligning the stroke to the outside produces the best result.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Once one of the lines is created, it can be duplicated and positioned to the appropriate locations.

Cosmic Fractal Storm Textures Exploration Tutorial

Once in place, the lines’ blending mode can be changed to screen @ 25% opacity.

Cosmic Fractal Storm Textures Exploration Tutorial

And after some layer organization, our background layers start resembling something.

Cosmic Fractal Storm Textures Exploration Tutorial

Icing on the cake

Because our background needs to not compete with our type elements later, we are going to darken it. We’ll use a levels adjustment layer for that.

Cosmic Fractal Storm Textures Exploration Tutorial

After one last look at the layer stack, we’re ready to move onto type!

Cosmic Fractal Storm Textures Exploration Tutorial

Type

The foundations

Now that our background is in place, we can start shaping our text blocks. The first one is the main one: “MAGNETIC FIELDS / 02.06.16 / TATE MODERN / TURBINE HALL / LONDON, UK.”

The type is set in League Gothic Condensed, that is 300 points tall, with a line spacing of 272 points, colored in white, and with kerning set to optical. These settings make the copy fit the two left columns of the grid, leaving the right column for the additional information blocks.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

The next block is “Performances by // chp_tnes / nu_drds / cbalt / qwerty / & lw_ram.” The type is set in Droid Serif Bold, that is 54 points tall, aligned to the right, colored in white, and with kerning set to metric. These settings make the text block fit snugly in the top right corner of the poster.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

The third and last text block is for the miscellaneous information: “Tickets & information at www.magneticfields.com.” It is set in Droid Serif Bold, that is 30 points tall, aligned to the right, colored in white, and with kerning set to metric. These settings make the text block fit snugly in the bottom right corner of the poster.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

The result is interesting, but it lacks depth.

Cosmic Fractal Storm Textures Exploration Tutorial

In order to address that, we are going to replicate the VHS effect we gave the background to the main type block. Let’s start by creating three copies of the type element.

Cosmic Fractal Storm Textures Exploration Tutorial

Instead of using levels adjustment layers, we are going to assign hues directly to each type elements. This works because the type is a solid color object, as opposed to the visually complex texture we applied the effect to earlier.

The bottom copy, MAGNETIC FIELDS 02.06.16 TATE MODERN TURBINE HALL LONDON, UK copy 3, should be assigned the base blue color #0000ff.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

The middle copy, MAGNETIC FIELDS 02.06.16 TATE MODERN TURBINE HALL LONDON, UK copy 2, should be assigned the base red color #ff0000.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

The top copy, MAGNETIC FIELDS 02.06.16 TATE MODERN TURBINE HALL LONDON, UK copy, should be assigned the base green color #00ff00.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

The top text element (the original one) should stay white.

Cosmic Fractal Storm Textures Exploration Tutorial

From there, we can change the blending mode of the three copies to exclusion @ 100% opacity, and of the original element to overlay @ 100% opacity.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Now, in order to complete the effect, we simply have to offset the three copies in separate directions, using the arrow keys on our keyboard.Cosmic Fractal Storm Textures Exploration Tutorial

And with that done, we can move on to the last step: textures. Below is a look at our layer stack so far.

Cosmic Fractal Storm Textures Exploration Tutorial

Textures!

Things to grab

Before we get moving, here are three assets to grab. They are all free. The first one is photocopy by clarisaponcedeleon, via DeviantArt.

Cosmic Fractal Storm Textures Exploration Tutorial

The second is Film texture – grain explosion by JakezDaniel, on DeviantArt.

Cosmic Fractal Storm Textures Exploration Tutorial

The third texture is vintage-paper-textures-volume-01-sbh-005, from the Vintage Paper Textures, Volume 1 set. It was made available through the “cute robot” book cover tutorial freebies.

Cosmic Fractal Storm Textures Exploration Tutorial

DOWNLOAD THE CUTE ROBOT TUTORIAL FREEBIE ARCHIVE

The last asset is this pattern tile, that we’ll use for scan lines. You should download it by right-clicking on it, and using the Save image at menu.

Cosmic Fractal Storm Textures Exploration Tutorial

Putting things in place

The first texture we’ll use is the film noise texture, film_texture___grain_explosion_by_jakezdaniel-d37pwfa.jpg.

Cosmic Fractal Storm Textures Exploration Tutorial

It needs to be placed centered in the canvas, rotated of 90° clockwise, and scaled down to 80% so it covers the whole piece.

Cosmic Fractal Storm Textures Exploration Tutorial

From there, we can change its blending mode to color dodge @ 15% opacity.

Cosmic Fractal Storm Textures Exploration Tutorial

The next texture is the scanline pattern. Let’s open the file.

Cosmic Fractal Storm Textures Exploration Tutorial

With the file open, we need to head to Edit > Define pattern. This will ask us to name it, and to validate. Once that is done, our pattern will be ready to use in our piece. Let’s close the pattern, and head back to our main file.

Cosmic Fractal Storm Textures Exploration Tutorial

Back in the main file, let’s create a new, empty layer at the top of our layer stack.

Cosmic Fractal Storm Textures Exploration Tutorial

We are going to apply the pattern using a layer style. First, we need to fill our layer with a solid color. Which one won’t matter, it is just to make sure the effect shows up. 50% gray is a good default choice in these cases (#808080).

Cosmic Fractal Storm Textures Exploration Tutorial

Next, we can open up our layer style palette by double-clicking on the layer thumbnail in the layer panel.

Cosmic Fractal Storm Textures Exploration Tutorial

Let’s navigate to the pattern overlay section. It’s a simple interface. We can control the pattern tile roughly the same way we can control a layer: blending mode, opacity, scale, etc.

Cosmic Fractal Storm Textures Exploration Tutorial

Let’s use the drop-down menu to select our scanline pattern.

Cosmic Fractal Storm Textures Exploration Tutorial

Finally, we can dramatically scale the pattern up to make sure the lines are visible (900%).

Cosmic Fractal Storm Textures Exploration Tutorial

Our pattern is applied, but we need to give it an additional touch for more veracity. Let’s convert the layer to a smart object (Filters > Convert to smart filters).

Cosmic Fractal Storm Textures Exploration Tutorial

Next, let’s assign a 2 pixels gaussian blur to the pattern layer/smart object (Filter > Blur > Gaussian blur).

Cosmic Fractal Storm Textures Exploration Tutorial

Finally, let’s change the blending mode to overlay @ 10% opacity.

Cosmic Fractal Storm Textures Exploration Tutorial

With the scanlines in place, we can move to a slight color alteration. We are going to use a gradient overlay for it. Just like before, we’ll need a layer filled with 50% gray (#808080).

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Next, we are going to change the layer’s fill to 0%. This allows to hide the layer’s pixels (the gray), but to let any effects applied through the layer style panel to shine through.

Cosmic Fractal Storm Textures Exploration Tutorial

Let’s open the gradient overlay side of the panel.

Cosmic Fractal Storm Textures Exploration Tutorial

In the gradient drop down menu, let’s select the spectrum gradient.

Cosmic Fractal Storm Textures Exploration Tutorial

Let’s change the blending mode of the gradient to overlay @ 15% opacity, and change the angle to -50°.

Cosmic Fractal Storm Textures Exploration Tutorial

This gives us a nice added depth to the colors of the piece.

Cosmic Fractal Storm Textures Exploration Tutorial

The next to last texture is vintage-paper-textures-volume-01-sbh-005.jpg, from the cute robot tutorial freebie archive.

Cosmic Fractal Storm Textures Exploration Tutorial

It needs to be placed centered in the canvas, rotated of 90°, and scaled up to 440%.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

Blending mode: soft light @ 25% opacity.

Cosmic Fractal Storm Textures Exploration Tutorial

The last texture is photocopy_by_clarisaponcedeleon.jpg.

Cosmic Fractal Storm Textures Exploration Tutorial

This one needs to be centered in the canvas, and slightly distorted (width: 212%, and height: 208%).

Cosmic Fractal Storm Textures Exploration Tutorial

Levels adjustments.

Cosmic Fractal Storm Textures Exploration Tutorial

Blending mode: soft light @ 75% opacity.

Cosmic Fractal Storm Textures Exploration Tutorial

And with that, our piece is complete! After a last go at organizing our layers, here’s the full layer stack.

Cosmic Fractal Storm Textures Exploration Tutorial

Wrapping things up!

Phew, that was a long one! I hope that you enjoyed following along with the tutorial as much as I enjoyed creating it, and that your outcome matches the goals you set for yourself before diving in.

Cosmic Fractal Storm Textures Exploration Tutorial

Did I leave anything unclear? Any suggestions? Don’t hesitate to reach out in the comments below! I’ll be happy to help out.

Cosmic Fractal Storm Textures Exploration Tutorial

We’d love to see your tutorial outcomes! Please share them with us on the Go Media Facebook page, or on Twitter at @go_media.

Cosmic Fractal Storm Textures Exploration Tutorial

Cosmic Fractal Storm Textures Exploration Tutorial

And finally, I hope that this gave you a preview of the cool things you can achieve with the cosmic fractal storm texture pack, by Dustin Schmieding. The pack is available for download now!

Cosmic Fractal Storm Textures Exploration Tutorial

On that note, that’s all for me today. Until next time, cheers!

Photoshop Drawing Tutorial: Digital Illustration & Drawing Techniques Video Tutorial

Photoshop Drawing Tutorial

New year’s resolutions are always thrilling for me. They breathe a sense of new life into both my personal and professional life. In 2015, I have one main goal – to throw every ounce of my soul into design. To dive into it, roll around, fill my brain with the endless information available and explode with happiness because of it.

Join me?

Digital Illustration & Drawing Techniques Video Tutorial

I’m super stoked about Cleveland Graphic Designers, Go Media’s first Arsenal launch of 2015: a Photoshop Drawing Tutorial by Jeff Finley. This 6 hour video tutorial is for intermediate PS users looking to create some awesome digital artwork. We’ll learn Photoshop shortcuts for killer results while simultaneously enhancing our drawing skills. Who’s with me?

– Heather, ‘ Zine editor

Learn More Now

Buy the Tutorial, only $34.99

How to Create Custom Stickers: Keys to Success

Creating Custom Stickers with StandOut Stickers

Today, Even Leake, Art Director at StandOut Stickers here in Cleveland, Ohio (home to yours truly, Graphic Design firm, Go Media), is here to share some of his wisdom with us. After all, ya’ll have been asking for some tips about creating your own custom stickers. Since Evan and crew pump ’em out perfectly on the daily, they know their stuff. 

Take it away, Evan!

– Heather, ‘Zine editor

Keys to Custom Sticker Greatness

When creating art for custom stickers, it is best to create artwork at a minimum 300dpi. You may use photoshop or illustrator, or a free alternative like Gimp. What’s most important is that your artwork is submitted as a high resolution file and converted to CMYK. A good understanding of the limitations of cmyk printing is helpful but the most important step is to create high resolution artwork. Resolution is not usually a concern when using Adobe Illustrator to create vector artwork.

When you create a sticker design, you can fill our standard templates with any design you want. Things get a little trickier though when you decide to purchase custom die cut stickers. We can help you create a custom cut line, but if you’d like to do it yourself, there are a few things you should consider.

1) Clean cuts, simpler cuts are better. They cut out smoothly and faster. A lot of overly complicated edges will not only take longer to produce, but they may cause issues with storing your stickers. Fine points and thin parts of a die cut can complicate application and storage. Thin pieces of sticker don’t stick as well as large pieces, and thin pieces often get bent when handling your stickers. If you can keep your design’s custom die cut shape simple, you’ll enjoy the results more. If you require a very complicated cut with interior cuts or thin pieces, I’d recommend using a kiss cut on a standard shape like a square or rectangle. This lets you have a sticker that looks great when applied, but has more durability against bends in storage. A kiss cut is a light cut on the surface of the sticker that lets you peel off a section of the sticker, like on a sticker sheet. We can create very complicated kiss cuts.

2) Your bleed should extend 1/8″ beyond your cut line. A lot of custom cut designs have a white outline. Some people wish to have a colored background to the edge of their custom cut line. This requires bleed color to extend past your cut line. We can help you set this up, and bleed is a standard that you should be familiar with when setting up cut lines for any custom job. Bleed is part of all of our standard templates.

3) Make sure your black values are rich. We recommend rich black cmyk values of 60/40/40/100. Or you can use photoshop’s standard black settings. One thing to be cautious of though, is when selecting the black swatch in illustrator you are often given 0/0/0/100 which sometimes prints lighter than expected. This layering of ink helps give you black values a ‘rich’ dark appearance.

A good sticker design is a subjective thing, but but most are bold and relatively easy to see or read from a distance. Our custom stickers have been used in every scenario, from machinery labeling, on beauty products, insecticide, bumper stickers, and clothing hang tags. Everyone loves stickers and more companies have been including them with orders since they are an affordable way to promote your brand. Even Apple does it!

Ready to design your own sticker?

Follow Jeff Finley’s “Tutorial: How to Design and Print Custom Silk Screen Die-Cut Stickers
wmcsticker_feature2

Tutorial: Creating an abstract vinyl sleeve with graphic textures

Excluded Rough Grunge and Etched Into Dark Texture Pack Tutorial with Maarten Kleyne

Maarten Kleyne, a freelance graphic designer from the Netherlands, feels music. Kleyne believes wholeheartedly that music is a key element in the creation of his final product. Inspired by the works of Steven Wilson and Lasse Hoile, his portfolio is filled with images including cd packaging, posters and collaboration artwork. Recently, WMC Fest alum Maarten cranked up his stereo, picked up his camera and created some texture packs for Go Media’s Arsenal. We are so proud to add his texture packs into our resource library.

We’ve asked Maarten to create a tutorial based on these textures, in order to demonstrate how you might like to apply them.

— Heather, GMZ Editor


Thanks for the introduction Heather and hey everyone! A while back I was wearing my crazy ear-to-ear grin the entire day, because the lovely people from Go Media asked me if I was interested in doing “some stuff” for them again. It’s no secret that I’m a huge fan of everything Go Media so I obviously said yes.

The first parts of my work have recently launched on Go Media’s Arsenal as the two texture packs: “Excluded Rough Grunge” and “Etched Into Dark”. Now – like the introduction said – I’d like to show you one way to apply these in a design through a quick and simple-to-follow tutorial. There are many other ways you can utilize the textures we’ll be using. This tutorial simply highlights one of those; a way I personally use textures quite often when creating a design.

Note: If you want to follow along with this tutorial, you will need to purchase the new packs. If you don’t you will probably still get something out of the tutorial, because I’ll try to keep it general. You will, however, get the best results from using textures from the set(s). Grab the “Excluded Rough Grunge” and “Etched Into Dark” texture packs while they’re still hot!

For this tutorial I chose to go for a 12 inch vinyl cover format. I’m truly stoked to see the vinyl record make something of a comeback, if only for the bigger canvas space we designers have! Now, back on-topic: In order to keep a focus on the texture usage, we’ll be creating an abstract – perhaps somewhat psychedelic – front cover. Here’s a preview of the final design we’ll be creating in this tutorial:

Final vinyl sleeve design by Maarten Kleyne

Good to know: Throughout this tutorial you can click on most of the images to enlarge them.

We’ll take our time and go through this step by step. Don’t worry, I’ve kept it a simple-to-follow tutorial. (I just use a lot of words, sorry. It really is simple though.) There’s a whooping total of 10 steps we’ll go through.

Some steps only cover the essential basics because I advocate experimentation, I want you to go beyond just following the steps if you don’t mind. Just try and experiment with the things that’ll pass along and I’m sure you’ll get a truly amazing and unique design because of it.

Feeling reluctant to experiment? You can still create the same thing by following the steps. I would, however, like to emphasize that you should try and experiment with things to create something different. It’s one of the best ways to learn, in my opinion.

Ok, so here it goes:

Step 1: Set up your Photoshop document

Open Adobe Photoshop. I’m using version CS6, but I’m sure any version will do for this tutorial. Now go to File > New and setup your new vinyl sleeve document with the following dimensions: 12½ x 12½ inch on a 300 DPI resolution. The ½ inch is just some safety bleed space I’m keeping. You can use CMYK or RGB color mode for now. I find RGB easier to work with at first, you can always convert it to CMYK at a later point. If you go to print that’s obviously something you shouldn’t forget.

Step 2: Purchase and download one or both new packs

If you haven’t already, take a minute to purchase and download the texture packs we’ll be using from Go Media’s Arsenal. Download the “Excluded Rough Grunge” and/or “Etched Into Dark” packs. We’ll use both, so in order to get the best results I’d advise you to get both too. You can skip this step if you already have some textures you want to use. However, this tutorial is meant to show you a way to apply those from the Arsenal.

The benefit of using the premade textures from the Arsenal is that it saves you time and can help you achieve professional results. I frequently use textures myself.  Basically, there’s not a single design that I make without the use of textures. Sometimes I’ll use textures in a very subtle way and sometimes quite heavily to form a complete design. That first case will be the thing I will highlight in this tutorial; the subtle addition of textures. What you’ll hopefully come to see is that the vinyl sleeve we’re making couldn’t go without those subtle additions. They’re essential.

Step 3: Create a ‘foundation’

Before we actually start using textures we’ll need to make a basic ‘foundation’, or ‘composition’ if you will. First, fill the background with a color of your liking. I chose to go for a darker greenish (#5f7463) color.

Next, place or paste a photo/texture of clouds on a new layer and have it fill the entire canvas. Then use the filter: Filter > Distort > Polar Coordinates > Polar to Rectangular (yes you can actually find a use for this).

Place or paste the same original photo/texture of clouds on another new layer. This time flip it a 180 degrees before applying “Polar Coordinates”.

Set the blending modes of these two cloud layers to: Overlay.

Step 4: Add the “Excluded Rough Grunge” textures

In this step I’ve used “Excluded Rough Grunge” textures 7 and 13. Place them into the document and have them fill the entire canvas. Add texture 7 first and set its blending mode to: Screen.

This is something I often do with greyscale/black and white images. It only pops the whites. This way we quickly start adding roughness to the artwork.

Add texture 13, canvas filling and blending mode set to Screen as well. Duplicate the texture 13 layer and rotate it 180 degrees. Perhaps move these 3 layers around a bit to find a suitable spot for the white rough spots. Add other/more textures if you feel like your design needs them.

Step 5: Bring in another color

Next, add a contrast color, something truly opposite from the green you have chosen. I used some orange colored clouds. Don’t worry, this color will not be seen later. The point of that will become obvious.

Add this color in whatever way you prefer, just make sure it’s not a solid color. It has to have a bit more variation to it. A good choices here could be to use water color, lens flare or colorized clouds textures. Or you can go mad with a brush yourself. Just make sure it has some dynamics to it. Don’t overthink it though, because like I said: it’ll be used in such a way that the colors itself will not be shown.

Place this new color layer on top of the others and set its blending mode to: Difference. (Doing this will directly show you why the color did not appear)

Step 6: Add the first “Etched Into Dark” textures

In this step I’ve used “Etched Into Dark” textures: 1 and 10. Place them into the document and have them fill the entire canvas. Add texture 1 first, invert its colors by pressing CTRL/CMD+I or by going to Image > Adjustments > Invert. After that set its blending mode to “Overlay” and its opacity to 30%.

Now add texture 10 and invert that as well (CTRL/CMD+I). Set its blending mode to “Divide” and its opacity to 35%.

Try experimenting with other/more textures and opacity levels to see which result you like best.

Now we’re going to add a ton of minor details by placing texture 1 all over the canvas, multiple times. See those little dotted spots on this texture? Add this texture with inverted colors to your document again. Set its blending mode to: Overlay.

Add a layer mask to it and brush away all the white parts until only those dotted spots show.  In order to make it blend into the background well, remove all the white stuff surrounding it. You can also try using different opacity levels.

Now scale it down a large bit to make those spots turn into little dots, or stars if you will. I call them “sparks,” and I’ve added them about 25 times all over the canvas.

Step 7: Transform the ‘foundation’ to several blocks

Ok, so now we have quite a nice ‘foundation’, right? Let’s copy it around and transform it into “something more”. Merge a copy of all visible layers into a new layer by pressing: Ctrl/CMD+Alt+Shift+E.

Now you have a new layer that’s an exact copy of what you’ve (visibly) made so far. Resize that layer to about 80% of the canvas size by pressing CTRL/CMD+T and changing the width to 80% at the top menu bar. Be sure to check the chain icon to have the transform maintain the aspect ratio. After that set the blending mode of this layer to: Exclusion. (Yes, this can also turn out pretty neat for a change. Right?)

Duplicate this newest layer (CTRL/CMD+J). Transform the duplicated layer to 80% of its original size as well. Re-select the original block layer, the one you made before this newest one. Now make a selection of the duplicated layer by holding CTRL and pressing on it in the layers panel. (Still following? I do hope so.)

Invert the selection (CTRL/CMD+I) and add a layer mask to the original block layer (that you should’ve selected). This should cutout the duplication layer from the original.

Now invert the colors of the duplicated layer by (selecting it and) pressing CTRL/CMD+I.

Go through this process a few times. Duplicate the duplication, cutout a part of it that’s smaller and invert it or not. Why “or not”? Well, sometimes the non-inverted results look better. I’ll leave that up to you to judge.

While going through this process be sure to rearrange the duplicated blocks here and there. Or not. Also, don’t cutout all the blocks. Keep some of them entirely visible. You can also try and delete the first duplication after you’ve cut it from the original. Then, you can duplicate the cutout version and re-size it as you see fit. Also, try different percentages to decrease the layers with.

There are plenty of ways to go here, all resulting in different compositions. Play with it, experiment!

Step 8: Add even more “Etched Into Dark” textures

Remember those spots/stars/sparks/whatever we added back in step 6? Well, if you like things “rich with details”; add a whole bunch more. Add them on top of all the rest though. So not inside the basic composition, but on top of the block copies. By doing so you’ll enhance the blocks themselves some more as well.

Here’s about 25 more of them added, however subtle they may be:

Step 9: Add some final touches

Most of the time I use adjustment layers to add a certain “final touch” to a design. In this case I added three to enhance the artwork an extra bit. The adjustment layers I added were: “Curves”, “Gradient Map” and “Vibrance”. See the image below for the settings I used.

Now, add some text to it in whatever way and font you see fit. It will be a vinyl cover after all! Of course you don’t have to do this. When you’ve done that (or not) and you deem the design ready, do one last thing. This is something I always do to bump up the sharpness of a sleeve and to make all the little details pop out just a wee bit more. In print that might be lost a bit, which is exactly the reason why I do the following:

Merge a copy of all visible layers into a new layer by pressing: Ctrl/CMD+Alt+Shift+E. Use the filter: Filter > Other > High Pass with a radius of 5,0 (or any other value). Set the blending mode of this layer to “Overlay” and change the opacity to something more of your liking. I changed it to 50%. Try experimenting with this little technique. Try different radius values and opacity levels.

Step 10: Present it

To help place this vinyl sleeve into context, try creating a mockup for it in order to make it look like a physical sleeve. You can easily do this via Go Media’s vinyl record mockup templates or their online mockup creation tool at MockupEverything.com!

Creating a mockup preview is an awesome way of presenting your design for a lot of reasons not stated here. It could even help you persuade clients about a design. It gives them an idea of how their product will look like as a real-world product, in this case the vinyl sleeve.

So what should you use, templates or the web tool? It’s a personal decision, yes. On one hand, the vinyl record mockup templates will give you a (near) print-ready image. You could print it out and show it to a client while meeting. If you’re sending the preview over via email or a website then http://mockupeverything.com/ is probably best for web-ready presentation. It also keeps the file size lower. Clients might like that. It saves them some space, and makes sure it won’t max out their inbox quotas (and yours!).

In case you don’t know how to use Mockup Everything or the templates, Go Media has put some neat demo material together on how to use Mockup Everything.

Mocking up the artwork we just made – in my case – results into this:

That’s it, you’re done!

You should now have applied some quick techniques while using the textures from the new “Excluded Rough Grunge” and “Etched Into Dark” texture packs to create an abstract 12 inch vinyl sleeve.

Hopefully this tutorial was simple to follow, helpful and even inspirational. Aside from that, I hope the textures will prove of great use to you in many designs. If you create(d) your own sleeves, or something else, using these textures, I’d love to see it. I’m very curious to find out and see how you apply them, so feel free to share those designs. There’s actually a special Go Media place for that!

Show off your results

On the Arsenal Facebook Page, you can post the images you created using Arsenal vectors, textures, fonts, etc.  Please show me how you’ve used these products in the real world. It’s not often that we – as in Go Media – see the work you create with Arsenal products, so take this as a call to action to share it with us on the Facebook page.

For even more exposure, you can post your image in the GoMedia User Showcase on Flickr and/or comment on this tutorial below and link us to it!

Thanks for your attention and time! It’s much appreciated.

— Maarten