Design an Album Cover Using Spectrograms

Jul 24th in Designing by Alex Beltechi

How would you illustrate sounds? Would you make them as musical notes, key signatures, elegant swirls, or wild swooshes? Well let's put away all those for now and look at spectrograms - audio recordings in visual format. We'll be using these in designing a cover for a solo piano album entitled The Storm. And to top things off, we'll also display the cover in a Photoshop enhanced environment.

Author: Alex Beltechi

Hello, my name is Alex Beltechi. I am a designer from Romania and work mainly with print media. Starting around the age of 15, I worked on design projects for my church. It was, and still is a great opportunity for me to grow. While designing publications, banners, posters, labels, fliers and all that other paper related mumbo-jumbo, I enjoy composing solo piano music.

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the layered Photoshop file is available via our PSDTUTS Plus membership.

Introduction

The Storm is is my solo piano album in the making, all based on one track, that bares the same name. Though the album is not out yet, and it may be a while until it is, you can get the track itself from lulu. The music is obviously the main source of inspiration for the design we're about to make, so listening to it will give you a better understanding of the tutorial.

In order to come up with a design, we'll analyze the track. The first notable feature is the mood. The increasingly tense atmosphere is something to take under consideration. We'll apply this by using a dark background. We'll also be using high contrasts and avoid warm colors such as yellow, oranges, or red. Those create a jovial feel, which is something we want to avoid.

In the song, there are predominant base notes that support more and more sounds and after reaching the climax they decline to a full stop. In other words, the musical structure is geometric and precisely planned. And so we'll use straight, sharp lines and stay away from curved and spherical elements.

Final decisions: dark background, blue geometric elements, white typography, and an overall high contrast. The basic layout will be based on a simple square, but kept dynamic by using slight angles on design elements.

Step 1

First of all, we need to create the spectrogram for this track. So what is a spectrograms? Think of it as a music box. A typical music box creates sounds by plucking metal teeth of various sizes that create musical notes. In the same way, sound editing software will embed digital teeth in a bitmap image. Simply put, it's an accurate visual form of an audio recording.

To be able to create one ourselves, we'll use a simple and free program called Bitmaps and Waves. You can go to their site and download it.

Step 2

After you download the software, open the file, and run the program. No installation is necessary; just extract the zipped file and open the program. Now click on the Fourie tab and use the settings shown below.

For the size of the document used here, we need a bitmap with a size of 4096. You may want it smaller or larger, which depends on the size and resolution of your document. If you want to create the same project as me, then use the settings shown below. Then click Load and open the file you want converted.

Note: This program only works with WAV format files. A WAV file is a raw recording that can be compressed into other formats like MP3, similar to how Photoshop PSD files are compressed into JPG formats. So your track will have to be a lossless or raw WAV file. If you don't have a WAV file, or software capable of conversion, then find a simple converter online.

Ok, so input the specifications and and click on Load. Then open your WAV file.

Step 3

Now you have to convert the file. So simply press the Convert button. Then bite your nails for a few minutes while it loads.

Step 4

Voila! Your new spectrogram is finished. Now all you have to do is click on the Save button and put it in a safe spot.

Step 5

In case you're having trouble with the software, use this spectrogram (from Claude Debussy's Claire de Lune), shown below. It's taller, but you can skew it to look like the one we're creating.

Step 6

Open the newly created spectrogram with Photoshop. We'll touch it up a bit before we insert it in the actual album cover file. The first thing that we'll do is boost up the contrast. Go to Image > Adjustments > Curves. Then use the settings shown below:

Step 7

Now change the hue of the image. Go to Image > Adjustments > Hue/Saturation. Insert the following values.

Step 8

There are areas of the spectrogram that we don't need for the design. To get rid of them, just use a soft brush and paint over the areas with black, as indicated by the yellow areas arrows below.

Step 9

Alright, now let's create our new project. Use the settings shown below and name the file "The Storm."

Step 10

Now we'll make use of our spectrogram. We'll be using it as an illustration for clouds. I wanted to keep the cover simple, crisp, strong, and clear enough as to avoid any information overload on the viewers behalf. Fortunately, from a close-up look, the spectrogram also bears an intricate detail that will give the design the right level of sophistication.

So insert the edited spectrogram into the new project and position it on the top of the page, flipped upside down. Then just rotate it about five degrees backwards so that it has a subtle tilt.

Step 11

We want the color to be more vivid and have more depth. So duplicate the spectrogram in the exact position, set its layer blending mode to Color Dodge, and set its Layer Opacity to 70%. Merge these two layers together and name the new layer "Cloud."

Step 12

Duplicate the "Cloud" layer and position it more to the left and lower than it's current position.

Step 13

Make another duplicate and position it on the other side, even lower this time.

Step 14

Now get this really awesome abstract photo from sxc.hu. We'll use this to add a subtle depth to the clouds. Insert it in the project, desaturate it by pressing Ctrl+Shift+U . Then align it with one of the "Clouds." Mine is at 70% Opacity so that you can notice the alignment, but keep this layer on 100% Opacity when you align it yourself.

Step 15

Now change it's layer style to Soft Light. The result should look similar to the following image.

Step 16

Then repeat the same process for the other two "Clouds."

Step 17

It's time to add the text. I used a font called Placard Condensed for most of the type. In the image below you also have a simple layout displayed. Careful planning of the grid will keep the canvas organized and eliminate confusion, rather than just slapping on some text here and there.

In this case, the title is the largest text and acts as an anchor for the layout. The smaller box follows the title and keeps the genre subtitle (solo piano) aligned. But to avoid making everything monotonous, I broke the grid by having two opposite lines of text coming out of the initial alignment, hence the second and larger box of alignment.

Also, consider hierarchy. You want to guide the viewers eye from the most relevant occurrence of information to the least important. This is my order: the title should be the first thing to be noticed. It is also large enough to be read from a distance and in small size thumbnail images. Next, comes the author's name and finally the genre.

Most CD covers don't even include a genre subtitle, however I though it appropriate to make it easy for the viewer to identify the style of music. Since the cover's design can be applied to other styles of music, the subtitle will make it easy for a potential customer to know what they are buying.

Create the text using the following image as a reference.

Step 18

Next we'll showcase the cover artwork on a CD case and incorporate it into a Photoshop enhanced environment. So download these two images from sxc.hu: a wood texture and a CD case. We'll use some great techniques described in Fabio's tutorial to do this: Using the Vanishing Point Filter to Mock Up a Business Card.

So open a new project (without closing the previous one) in which we'll showcase the cover. Name this file "Storm_CD.psd" (this will be our final showcase file). Mine is a standard background size of 1600x1280 at 72 ppi. Insert the wood texture photo on the background and position it accordingly. You may also want to skew it so that it fits the perspective, which is narrow on the top and wide on the bottom.

Step 19

We'll cut back on the saturation of the photo by using an Adjustment Layer. So go to Layer > New Adjustment Layer > Hue/Saturation and reduce the saturation by 50.

Step 20

Next, insert and position the CD image onto the wood background.

Step 21

Now, using the Pen tool, cut out the CD case from the white background. Don't worry about its shadow, as we'll make one on our own, just cut the CD case out. Then name the resulting layer as "CD case."

Step 22

Set the "CD case" layer Opacity to 50%. Then duplicate it. Also, while having this new layer selected, set the layer's Blending Mode to Multiply and Opacity back to 100%. Then desaturate it by pressing Ctrl+U.

Step 23

Now it's time to add the artwork. Duplicate the last layer described in the previous step (the CD case set on multiply) and set it's Layer Style to Normal. This one will quite simply be a prop for applying the artwork soon, so name it "Artwork Prop."

Now go back to "The Storm" file (PSD file with the cover art) and merge all the layers together by pressing Ctrl+Shift+E. Then press Ctrl+A to select the entire canvas and Ctrl+C to copy the selection. We're doing this so that we can paste the image onto the CD case using the Vanishing Point Filter.

Note: You should resize the cover according to the CD showcase project so that it will fit in the canvas. It will be easier to insert in the Vanishing Point Filter.

Now return to the main "Storm_CD.psd" showcase file. Also, while having the "Artwork Prop" layer selected, go to Filter > Vanishing Point. Draw a plane using the Create Plane Tool. Use the CD case's bounds as a reference:

Step 24

Expand the box in every direction.

Step 25

Press Ctrl+V to paste the artwork. Then simply drag it onto the plane and resize it so that it fits.

Step 26

Press OK once you've positioned it correctly. Now we'll cut out the cover from the "Artwork Prop" layer. So select the four corners (of the label only, not the CD case) with the Polygonal Lasso tool (L). Then right-click inside the selected area, and go to Layer Via Cut. Delete the layer from which you extracted it.

The edges are now pretty harsh from the Vanishing Point Filter so select the Blur Tool (R) and slightly blur out the edges with a very small brush and 50% Strength. Then name this layer "Label."

Step 27

At this point, we'll create reflections. So Ctrl+click on the icon of the "Label" layer and press Ctrl+Shift+N to make a new layer. In this new layer, select the Gradient tool (G) and drag over two thirds of the surface from top to bottom. Use a gradient between that goes between white (Opacity 30%) and white (Opacity 0%).

Step 28

While still having the marquee selection active, make yet another layer. Use different sizes of a round soft brushes, while holding shift, to create 45 degree long angled strokes. Paint with different shades of gray until you get something similar to the image below.

Step 29

Set the layer's style on Soft Light. That's it for the reflections!

Step 30

Add a quick shadow on the CD. Double click the "CD case" layer that is currently set on Multiply and give it a Drop Shadow with the following settings as well.

Step 31

On a new layer, grab the Gradient tool, set in on Radial Mode, select a foreground color of white and a background color of a medium-gray, and then drag from the center-out. Then set the layer's blending mode to Color Burn.

Step 32

Now we'll add depth to the image. So merge all the layers together by pressing Ctrl+Shift+E. Make sure to keep your original files though as a back-up in case you want to make adjustments later.

Enter Quick Mask Mode (Q) and create a large linear gradient with black (Opacity 100%) as the foreground and white (Opacity 100%) as the background color. Drag from the middle to about two thirds of the canvas, do this in a downward direction.

Step 33

Now exit Quick Mask Mode by pressing Q again. Then go to Filter > Blur > Lens Blur. Just change the radius to 12 and set it on More Accurate. Apply the Lens Blur and deselect the marquee by pressing Ctr+D.

Final Image

And we're finished! We've created spectrograms, added them into the album artwork, and showcased the cover on a shiny CD case.

Keep reading with more great tutorials and articles!

Enjoy this Post?

We'd love your vote!

Join Now

User Comments

( ADD YOURS )

riq pepino July 24th

el brillianto!
Nindia July 24th

nice tutorial!

thanks!
socoduce July 24th

Right click> Save Picture As… and then start at step six. Really, the beginning wasn’t necessary as the image could have been created with PS. Much like the ink drips, that should be an aptional “tips & tricks” link to another page. After step six, I liked it very much. I can totaly see how I will be using this in the future. Thanks.
drumu July 24th

yes, thanks for this. I like how you get that two images have the same light. it is interesting
Zenor July 24th

This is amazing.Thanks!
twisty July 24th

If you want to see some really cool spectrogram art check this out
http://en.wikipedia.org/wiki/Windowlicker
Fans of AFX will already know all about this one
Nate July 24th

AWESOME!
w1sh July 24th

@twisty weird…..

I wonder if there is a better way to get high quality spectrograms.
Philo July 24th

Great Tutorial! Very Nice Result! Keep it up!
Braden Keith July 24th

Thank you a lot, I was about to get started on the album cover for a local band. Thx.
WAR July 24th

Great concept, I love the use of the visual representation of the music.
Mark Abucayon July 24th

awesome I will try this one later, I am impress with the work high quality and very professional.
NKHAT July 24th

NICE IDEA
MONSTER July 24th

Very cool and usable stuff in this one.

Cheers.
tayo July 24th

thanks!i will be using this style for my assignment.thanks for the idea and tutorial.
Jan July 24th

Nice
Khaled July 24th

nice and clean!
RUGRLN July 24th

Nice but very simple don’t you think…
Joefrey Mahusay July 24th

Nice one!
Andrei Constantin July 24th

Nice one, i really like it
Lasse July 24th

Love you guys for this one. This is exactly what I need right now!
Thanks so much you helped me alot so far, I think this is the best tut site I’ve been so far.
Awesome job you guys!
Jbcarey July 24th

This is a 10!
Andrew Pryde July 24th

Awesome! A great tutorial and a good insight into some other ways of creating effects for use in PS.

Andrew
Tony July 24th

Well done men, that’s why you’re the best !
Shaw July 24th

So basically you made a cd cover in photoshop….*YAWN*
Shane July 24th

Not bad. Not bad at all.

Cheers.
Lamin Barrow July 24th

Nice effect. am definitely going top try that out. Thanx.
Marian July 24th

like it pretty much

probably because it uses the smart object function which i havent used yet. This seems to be a good occasion getting started with it.

So thanks a lot!
RIjalul Fikri July 24th

wow, definitely awesome
RouteNote July 24th

This is a great tutorial. Now the only thing you need once you have made that album cover, is to find somewhere to sell it. Why not head to http://www.routenote.com. We are a digital distributor and we can get your music onto iTunes and emusic for FREE. Make sure you check us out!
Jimizm July 24th

Great one!
Qbrushes July 24th

I just got an idea from this tutorial, thanks for the inspiration
Ani July 25th

Nice tut…but spectrograms? They died years ago. You need a vectorgram

Cool finisf. Even if people find spectrograms dull, boring, and useless, the guide on how to present CD artwork is helpful.
Ani July 25th

Did I say finisf, I meant finish. Your spectrogram is causing errorgrams in my postrograms!
Alex Beltechi July 25th

@Ani: I’ll waitogram until someone invents a vectorgram
@RouteNote: Thank you for the tip. I just started selling on lulu (there’s a link at the top of the tut), but will deffinitely look into your services. Thanks.
@Everyone: Thanks for your support guys!
Jin July 25th

very nice.
Jeff July 25th

Sweet.
dlv July 26th

yes! great one! thanks for the job, really nice, good technics
keep going, the best PS tuts site!
I can’t believe how this site come more and more bigger, it’s amazing
congrats for all the stuff and tut men!
imsraaia July 26th

Very Nice..
Grafiko July 27th

Very cool…
Qproduct July 27th

I do album covers.. I use 3d based programs to make my images
MuKuL July 28th

Thanks for the tut! I just did it:
http://i34.tinypic.com/venoci.png
Humphrey Atlee July 28th

whoa, crazy! i don t think that i would do the album art, but the whole tutorial is amazing!
Edwin July 29th

I think this is the best tutorial I’ve seen here till now
Can Ata July 31st

great tut
Victor X August 4th

It’s interesting to know what use of my software you’ve found. Originally, it was used by musicians. Now - by graphical designers.

As for “the utter absence of design”, you’ve been searching on the wrong page.
You should have tried my galleries:
http://webcenter.ru/~vsoft/arts.html
http://webcenter.ru/~vsoft/arts2007.html

I’m certain you’ll find more for inspiration than dull spectrograms.
Mike August 4th

Thank you for this great tutorial…
Anon August 4th

Man, this is some really creative stuff!!
Alex Beltechi August 8th

@ Victor: You’re right, sorry it was just humor, though completely unnecessary. I apologize and thank you again for making the software available for download.
Joel Harrison October 24th

Wow! That’s great.

Check out my work at
http://www.albumartdesign.com

Thanks,
Joel;