May 14 2012

The Lowdown On The Artwork…

Hey guys

Well, you asked for it so here it is. This post does once again come with an Amber Geek-Alert. You have been warned…

Since I released my latest album [un]plugged a few weeks ago I’ve been getting a lot of questions about the artwork. This is the third release for which I’ve put together my own cover art. So for those of you that wondered; here’s the process I used this time.

Those of you that know me well or follow me on Instagram (@simonlittlebass) will be very much aware of my little obsession with iPhoneography; that is, the art and technology of iPhone-based photography and photo-editing. So it will not surprise you that the [un]plugged cover was almost entirely put together on my iPhone. Only the text was added separately using Gimp for Mac (a free and rather excellent image editing program), and that’s only because I haven’t found the right iPhone app(lication) yet…

1. I started out with an image of what is left of Gotham City Hall in Six Flags New Orleans. Hit by Hurricane Katrina in 2005, the site is set for demolition. I edited this image with the fantastic iPhone app(lication) Snapseed to give it a more gothic feel and darken the sky. I always start with the crop and auto-correct functions, then play about with the Tune Image settings and Drama filters. I think I may have also used the Tilt-Shift to add focus to the centre of the image. The first stage looked like this…

2. I then put this image through Tiny Planets. This is a fun little app(lication) that twists an image one of two ways into a circular pattern. I mess about with this a lot. The results are pretty haphazard at best and you have no real control over the final image but occasionally it comes up trumps. The resulting image looks like this:

3. It was at this stage that I transfered to my laptop and added the text to the bottom right corner. Gimp also allows use to match the colour of text with a colour from the image itself. I went with one of the grungy grays from the building.

4. I then immediately went back to the iPhone (!) and put this image through ScratchCam. This is an excellent app(lication) if you have time to fiddle with it and download all the extra filters (which are all free but not included in the initial download). I tend to use the random button to generate a few different options as a starting point and then edit in more detail from there. This is how I got the folded and torn look…

5. Now, as you can see here, the image became rather washed out in ScratchCam so I went back to Snapseed and essentially repeated the steps in mentioned earlier; mainly using the Tune Image and Drama functions to bring the colours out once more. The resulting image is the final cover art which we all know and love.

Hope this answers some of your questions regarding the artwork. I love the fact that you can manipulate images to this degree and sophistication on a mobile phone. I’ve been playing around with the applications a great deal over the last year and am only just starting to scratch the surface. As for the musical applications, well that is another post entirely…

Hope you’re all enjoying the album and don’t forget to tell your friends and help spread the word.

Just out of interest, here’s a couple of other images I put through Tiny Planets so you can get some idea of the possibilities. Out of the applications I use regularly, this one is the least consistent but often comes up with the most surprising results (Both these images were heavily edited in either Snapseed or Iris before being run trough Tiny Planets)…

Until next time…


Jan 31 2012

Bandcamp Tips: Embedding Bandcamp Players On Your Site

Hello folks,

I had a rather fraught evening last night when I discovered that my lovingly-crafted website front page, with all it’s cunningly placed Bandcamp players, did not display properly on certain mobile devices. Now I am a bit of an Apple fan and thus only tested the page on my iPhone and iPad 2. I have no way of testing it on an Android phone or Opera etc, but seeing as though a huge proportion of us use various “iDevices” to browse the internet I thought this was issue enough to take immediate action.

Yes, I am a big geek and this post might not be of interest to many of you; but if like me you use Bandcamp as the major distributor for your music then this issue may well affect you too. The embeddable players are one of the best features offered by Bandcamp and one of the many reasons I chose to go down that route to distribute my music.

After a bit of digging around and a call for help to the lovely people of Twitter (@basdriver, @solobasssteve and @alunvaughan were all very helpful) I think I discovered the root of the problem. I was using the original Bandcamp embed code, which looks like this:

<object width=”400″ height=”100″ classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param name=”quality” value=”high” /><param name=”allowScriptAccess” value=”always” /><param name=”allowNetworking” value=”always” /><param name=”wmode” value=”transparent” /><param name=”src” value=”http://bandcamp.com/EmbeddedPlayer.swf/album=&lt;iframe width=” /><param name=”allownetworking” value=”always” /><param name=”allowscriptaccess” value=”always” /><embed width=”400″ height=”100″ type=”application/x-shockwave-flash” src=”http://bandcamp.com/EmbeddedPlayer.swf/album=&lt;iframe width=” quality=”high” allowScriptAccess=”always” allowNetworking=”always” wmode=”transparent” allownetworking=”always” allowscriptaccess=”always” /></object>

Now it looks to me like this contains a Flash player link, which iDevices do not support. Plenty of people have Flash-based websites which simply do not display on iPhones, iPads etc. That would drive me round the bend by the way…

The newer embed codes (and the default code when you click the “Share” button on Bandcamp these days) does not contain a Flash link. They look like this:

<iframe width=”400″ height=”100″ style=”position: relative; display: block; width: 400px; height: 100px;” src=”http://bandcamp.com/EmbeddedPlayer/v=2/album=2386594114/size=venti/bgcol=FFFFFF/linkcol=4a4a4a/” allowtransparency=”true” frameborder=”0″><a href=”http://music.simonlittlebass.com/album/the-knowledge-of-things-to-come”>The Knowledge of Things To Come by Simon Little</a></iframe>

So all you need to do is go through your site and replace any old embed codes with the new version. Simple as that really.

Also, in case you wanted to center the player on your page like I did, you’ll need to wrap the embed code with <p align=”center”>code</p>. In case you were wondering…

Sorry for the geekfest, but my previous post on Bandcamp image maps proved rather popular and if I can save you the hour or two of frantic Googling that I experienced last night, my job is done.

Good luck ;)

ps. If you haven’t heard my latest solo album The Knowledge of Things To Come (shame on you), then here is said Bandcamp player in all it’s glory (cunningly centered too by the way!). Feel free to embed it somewhere for your friends and help spread the word. You have instructions now so no excuses…


Apr 1 2011

Bandcamp Tips: Custom Header & Image Maps

Thought I’d write a quick post after spending a couple of hours this afternoon faffing about trying to customise the custom header on my Bandcamp page with the addition of an image map.

It’s actually much easier than at first it may seem and with just a few simple steps you can have your Bandcamp page integrating with your main website in a far more effective form. The addition of a custom url for your Bandcamp page means you can use the site as a shop-window for your music which forms part of your main website as a sub-domain. This is what many artists are doing now to promote their music, using their own site as a hub and using external sites such as Bandcamp for additional functionality.

This is how I created the image map…

First you need the actual image for the custom header. I did a screen grab (command-shift-4) from the home page on my main website. Here is the crucial piece of information (which cost me two failed attempts): Bandcamp custom headers are required to be between 975 pixels wide and 40-180 pixels tall. What I should have done was check the dimensions when I did the screen grab. Third time lucky…

Here is what my custom header looks like. I included the menu at the top so I could superimpose the image map later…

I then went to the excellent Image Maps site and uploaded the image. I shan’t bother to fully explain how to use the site as it is incredibly easy to figure out and simple to use. Basically once the image is uploaded you can create boxes around whichever blocks you want to add links to and away you go. Starts looking a little like this:

Once you’ve finished marking up the image, just click the Get Your Code button and copy the generated HTML code to your clipboard.

Then you hop over to Bandcamp and upload your custom header image on the main page. The final step is to go to your Profile page and paste the HTML into the Use an image map box in the Custom Header section.

Then you’re laughing.

Hope that was useful to somebody. This post could’ve saved me a good hour this lunchtime :)