It’s a fact: people buy more music from cool-looking pages. And by “fact,” we mean “strongly supported theory.” First, check out some of the sites in our Gallery:
Inspired? Here’s how to spruce up your Bandcamp page in four easy steps (and one bonus step):
First things first. Without album art your music won’t appear in search listings, tag listings or Discover, so it’s important. And of course it will be embedded in your downloads and look great in people’s music collections. Look for the upload link on the album edit page.
Your album art should be square (so you might need to trim those jewel case booklet designs) and at least 1400×1400px (bigger is better).
You can change the color of all the text and links, the page itself and the background behind the page. Open the design panel by clicking the page design link located in the user menu dropdown:
The colors of your page update in real time, so play around until you find a good combination. Try matching one or two of the colors from your album art as a starting point.
Words of wisdom: Don’t obscure your link colors. If you want your fans to actually click your links, don’t set them to be the same color as your text (or worse, your background). Instead, pick a high-contrast color. For similar reasons, let your music tell your fans just how black black-metal you are — dark gray text against a black background only tells them how little you want them to buy your music.
Instead of a plain colored background behind your page, you can upload an image using the design panel. Click the upload link to get started:
Once you’ve uploaded your image you can choose whether it repeats across or down the page and adjust the horizontal alignment. You can also decide whether or not the background should stay fixed while the other page assets move.
Upload a custom header featuring your band name or logo by clicking the link in the header:
Bonus step: image maps
You can also add links to your header using an HTML image map to create custom navigation and integrate your Bandcamp page fully with your website, like this:
Just paste the image map code into the Custom header section of your Profile page:
If you have no idea how to make an image map, don’t fret! It’s just a list of
<area>tags that explain where the links are placed in the header image and what they link to. Here’s how to create and export the code you need using Photoshop, Illustrator, Fireworks, Dreamweaver, GIMP or your bare hands.
Making your design even awesomer
Now you know how to customize your page design. But how do you make it really pop? Here are a few tips.
Blend your custom header and the center column
By using the body color of the page in your header, you can blend the center column into one seamless swipe:
Combine the header and the background
Use the same color or pattern to make your header seem like part of the background:
Using center alignment for your background image opens up a whole new world of design possibilities. Try creating your header and background as one big image (with the 975px wide header centered) before cutting out the header and exporting it separately:
Break out of the box
Use your images to lose some of those straight lines: