Dirty Textures: Prepping Vinyl LP Dirty Cover Textures FTW

When I'm working on projects, and someone wants something to feel more organic, one of the ways to get that feel going is to key in on the visual queues that make people feel like something is real. Sometimes that's achieved by making something hyper-realistic, with great lens blur effects, but just as often, making something look funky is the way to go (or combining both techniques... hi-fi lo-fi.)

Dirty Dirty:

Using dirty textures in your visual art is a great way to give something an organic feel. Dirty textures give the eye more to chew on, and that extra detail can often be used without distracting from the main objects of interest in the design. One can use the dirty textures as discrete materials in the design (eg., attaching a dirty wall texture to a wall, some dingy wood texture to a chair), but they can often be successfully used as masks over your main design.

Popular apps like Instagram and Hipstamatic often take this approach, along with adding controls for color grading and other nice functions. If you want to roll your own, it's not that hard.

No Rules:

When I incorporate dirty textures as masks, it can wind up being a little different each time. I might wind up using some different compositing mode because it punches my button that time, or do my color processing differently another. I don't have a set methodology, but here's a rundown of something I was doing today, and the process it took to get a nice image mask of a "dirty vinyl lp texture".

One time I did this, and it was cool:

My goal was to get a nice dirty vinyl lp texture, with a worn circular look around where the lp would be.

After looking around google search for awhile, the obvious came to me. The laziest possible route would be to find a worn version of the White Album album cover (by the Beatles, for people who are reading this from a dungeon and have never seen daylight).

I found this (http://www.theanalogdept.com/swbo101.htm):

It didn't have some of the heavy outer groove wear I was hoping would be on the cover, but there was a lot of dirt, some good stains, and crappy edges. Pretty much what I wanted, or good enough to see how it would work.

Perspective Problem:

The perspective was "off"; the picture of the album wasn't taken square on. In order to reasonably use it as a texture, it really needs to be perspective corrected. If you find a texture that you wish to use that's taken square on, you can disregard this section.

Now, anyone who has an Apple computer has access to a Core Image filter called Perspective Transform. There are a number of free apps that will allow you to feed an image through this filter, twiddle with the corner positions, and stretch the image back into a square. If the original perspective wasn't that far off, the result will look pretty good. I'd imagine Adobe products must have something analogous.

I use Apple's QuartzComposer Developer Graphics Tool to do this kind of stuff, but the steps will be pretty similar in any variety of other systems.

Franz of 1024 (http://1024d.wordpress.com/) made a nice plugin for dealing with "unperspective" correction, and a sample qtz composition. The plugin and sample are available from his flash widget on the right side of the site. One simply grabs four squares, places them onto the corners of the area of interest in the source picture that one wishes to turn square, and press enter.

By default, Franz has adjusted the scale of the 3D transform to be .5 on the x/y/z axes; here I've adjusted it to be full scale when the source image is "unperspectived". Simply go to the 3D transform and enter in 1 values in those 3 inputs.

Here's the result after unperspective transform:

I kept some of the edge stuff outside of the album cover area, because I can crop it later. Since the edges are a little frayed, I'd rather have more to work with and chop away later, than not have enough to begin with. To get the images out of QC, just use the Snapshot icon on QC's Viewer toolbar. If you don't see it, add it by cntrl clicking the toolbar, or just do shift+command+c.

Now, I pretty much just need to get rid of "The Beatles" embossed logo, and the number stamp.

Here's where I probably make some of you roll your eyes.

So, I breakout GIMP. Yeah, I know the interface feels cheesy/ugly, but it's free, runs on Macs, and it gets the job done. (http://www.gimp.org/)

This is what it looked like after 30 seconds in Gimp - no Beatles Logo, no number stamp:

I used the Smudge tool to smudge out the Beatles embossment, and to smudge out the number stamping. It was probably perfectly fine after that, but the smudge with the number stamp was a little darker, so I used the Dodge/Burn tool at a around an exposure of 8, to lighten it up some. I switched back the the Smudge tool, smudged it up a little more, and it looked good.

After that, I flew the texture back into QuartzComposer. For the purposes of this rundown, I grabbed an image I had already made, to composite with the album cover, and "age-ify".

I fiddled with the image using some cropping and resizing, to get the aspect ratio square, like the source vinyl. I could have kept it non-square, and composited it as a strip somewhere on the cover just as well. I wound up using mostly the left side of the pic.

The QC Editor:

Here's what my Editor looked like. Keep in mind that I approach final compositing and and color tweaks at this stage a little bit like jazz; I don't have a 100% set in stone methodology, because the same things don't always work in every instance. Sometimes one may want to tweak the color of the sources, or maybe not. Maybe one just wants to tweak the color of the final output, maybe not. The composite mode I choose may be totally different from one time to the next, because of the color channels of the source image. I play with it, basically.

Also, these processes could be done in any number of image editing systems, like the Adobe's Creative Suite, or I could have even stayed in GIMP (X11) and done this part. QC is a go-to tool for me, that I'm particularly fast with, and I like that all of the system blend modes are instantly available as well as ability to drop color channels, rotate hue, add contrast, etc., so I did this step with it.


Here are some composites that I made from the two images:

It may not look like much, but with some use of some use of some real world dirty texture I was able to turn some computer generated art into something that had an extra layer of realism, and gives a little bit of a funky organic feel.