Paul Burgess

Firefox Add-on for weheartit.com

Wed, 04 Nov 2009 14:35:35 +0000

I have built a Firefox Add-on (sometimes known as an ‘extension’) for the popular website We Heart It.

We Heart It is a popular visual bookmarking site, a place where people can save images they find on the web for inspiration or simply to keep your favourite images.

Members add images to their account by using a ‘bookmarklet’ which is a button they drag to their bookmarks bar on their browser, which when clicked highlights all images on a webpage that you can submit.

Whilst this works, the conceopt of bookmarketlets is often tricky for users to grasp, and highlighting most images on a page can prove quite disruptive to your browsing.

I thought that this would be the perfect scenario for a Firefox add-on, that would let you right click an image and submit it to We Heart It. So I entered the mysterious world of building Firefox add-ons. A task which lacks any real documentation and, for me anyway, relies a lot on trial and error.

There are 3 conditions to submitting an image to We Heart It, the image has to be over a certain size, it has to be on a webpage and cannot already be on weheartit.com. After a lot of fiddling about, I managed to create an add-on which complies with these rules and seems to work just right.

The add-on is currently being downloaded and tested by We Heart It users, and was announced on Twitter yesterday. I hope that it will become a ‘official’ part of the site in the future.

You can download and install the addon on the Firefox Add-ons website and find out more about We Heart It on weheartit.com/about.

Website and social media hub for the 1indienation podcast

Wed, 04 Nov 2009 13:46:00 +0000

I was asked by LA podcaster and princess of social media, Rachael Depp, to design and build a website for her, after she saw one of my personal projects, delarge.co.uk

Initially she wanted a custom design for somewhere to host her podcast, 1indienation. We also used the site as a one-stop shop for all her social media accounts (such as 12seconds, Flickr, YouTube, Twitter and Facebook).

Taking this route meant the site acts as an overview of all of her online activity using RSS feeds. It brings all the seperate accounts into one place and updates automatically as she add photos, videos and tweets. It also serves as a place to download and listen to her music podcast.

I was given the logo as a starting point and designed the overall site to reflect her lively and colourful attitude.

Visit 1indienation.com »

Website for men's fashion label Denison Boston

Wed, 04 Nov 2009 13:31:00 +0000

I was asked to produce a small website for men’s fashion accessory label, Denison Boston.

This is a site to accompany their main online shop, designed to give an overview of the brand. I was given website design mockups and asked to produce the site based on those.

The site is built using a Wordpress framework, which means all content is all controlled by the Denison Boston staff. This allows them to publish press releases and edit their pages as they please.

Visit denisonboston.com »

Code to grab the first image in Wordpress and show thumbnail

Mon, 28 Sep 2009 10:28:35 +0100

I recently wrote a piece of code (called a function) which you can include in Wordpress that will allow you to show a frontpage of your posts, and include a featured image as a thumbnail.

This is a popular technique amongst many modern Wordpress themes. The result could look a lot like this:

More information and all of the details of how to do it are posted up on the Theme Forest forum. I hope you find it useful.

ColorSuckr featured on TV

Mon, 14 Sep 2009 20:39:00 +0100

My ColorSuckr website was featured a ‘Current Tech Web Tip’ on Current TV

I was most pleased to find Current TV’s Sarah Lane presenting a little feature about ColorSuckr, one of my projects that lets you create colour schemes from photos (more info). Take a peek at the piece below, it also serves as a nice intro and how-to for the site:

ColorSuckr: Create color schemes based on images

Thu, 20 Aug 2009 01:09:00 +0100

My latest personal project is called ColorSuckr. In a nutshell, it will look at an image on the web and tell you the 12 most common colours used in that image, useful for creating colour schemes for design projects and/or websites.

Aside from my main body of freelance work, I like to develop small personal projects from time to time. This allows me to try out new things, experiment a little and generally do whatever I want to. There are a few of these projects I have already that tick along quite nicely such as Bandnamr and Mockupr and now - ColorSuckr.

This project spawned from one of my current sites, Urban Dirty, where colour schemes are suggested based on the photo being shown. This process was previously handled by me having to add specific tags to each image which declared the first 2 or 3 colours that came into my head. It worked, but was laborious and clumsy, so I was keen to find a way to automate this process. Eventually I discovered how to extract the common colours from an image using ImageMagick, which made the colour automatic and the uploading process faster. See that process in action on this photo on Urban Dirty.

It worked so well, I thought why not make a stand-alone version of this, that will look at any photo on the web, not just the ones on Urban Dirty. And that is when ColorSuckr came about.

There are similar services currently on the web which will do similar things, but as a wise man once said, if no-one else is doing what your doing, it’s usually because no-one wants it. So I wanted to add my own tweaks and features to ColorSuckr which would make it a little different to other colour scheme services. Here is a list of the main features of ColorSuckr:

Hex code references, web safe references and RGB values provided.
Flickr integration. You can search for photos and input full Flickr photo page urls (instead of just the image url). If a photo from Flickr is submitted, ColorSuckr will find extra info about the image such as who took it, its title and license.
Drag and drop colour results. You can grab the colour strips and drag the colours anywhere on the page. Handy for sliding the colour up over the photo or simply rearranging the results. You can also show and hide the colour info text in case you want to focus on just colours and no textual info.
Getting images from a webpage. The idea is to enter the direct url of an image (e.g. http://l.yimg.com/g/images/home_photo_orangeacid.jpg, but should you put in an actual website page (e.g. http://abduzeedo.com) then ColorSuckr will scan the page for images and list them out, prompting you to choose one.
Swatch file download. If you like the colours that are given to you, you can download an ASE (Abode Swatch Exchange) file and load up the colours straight into Photoshop or Illustrator.
Colour scheme suggestions. Colour suggestions are taken one step further by tapping into the services offered by Colourlovers. If you like a particular colour that is offered, click on the ‘Show color chemes’ link and you’ll get back 6 pallettes based on that colour.
Simple API. The image colour results are listed out ion teh main section of teh page, but in addition, you can get the results in 3 data formats, RSS, JSON and XML. This allows you to use the ColorSuckr service on your own site or for your own projects.
URL shortener. ColorSuckr offers permalinks to images, but they can be long - for example http://colorsuckr.com/?img=http://farm4.static.flickr.com/3138/3083683359_3b5d124274.jpg. So you’ll find included an option to get a short url for your image, so that long url would become http://bit.ly/uIsrf
Firefox Add-on. Pasting image urls can be fiddly, so to make the whole process easier, ColorSuckr has an add-on for Firefox which allows you to right click any image ion the web, go straight to ColorSuckr and see the extracted colours straight away. This has proved to be quite a popular addition with nearly 4000 downloads in just under 2 weeks (as I write this).

One thing that I was bowled over by when launching this, was all the coverage ColorSuckr got. There was (and still is) lots of tweets about the site, plus mentions from some of the pied pipers of Twitter such as Designer Depot and Smashing Magazine to name a few. Plus links and features on sites like Boing Boing, Download Squad and Sitepoint. I was bowled over by the reception.

So there you have it - the concept is simple, the project was great fun to build and develop, the end results is something I am very pleased with, and also find useful. Please go and try it out and have fun with it.

A guide to posting images in Wordpress

Thu, 13 Aug 2009 01:33:00 +0100

This is a how-to for inserting images into posts in Wordpress, to act as guide for clients and users tackling this seemingly easy but often tricky aspect of blog posting.

This guide will run through some details about uploading and inserting images and the options available, if you’d rather, you can skip straight to the quick tips for a summary.

All of the image uploading is handled in your site’s admin area, so sign in and go to Posts > Add New or Edit to get started.

A quick note about image width

The first thing to bear mind is the width of your image. It’s possible that the image you are trying to add might be straight from a digital camera, and it may quite large. The image has to be reduced in its dimensions in order to fit into your site. See this example below:

The good news is that this has probably been handled by your web designer in the set up, plus Wordpress can handle the resizing for you. You still need to select the right size when inserting an image, which we will cover a bit later. I just want to get across the importance of image dimensions and how image width is crucial to an image displaying properly on your site, if it’s too wide - it either get cropped or cover up other parts of your site - either way, you don’t want that to happen.

Uploading the image

Let’s move on to uploading the image to the site, ready to be inserted into the post. When creating or editing a post place your cursor where you’d like the image to go in the text area. You will see a range of small icons above the text area, click the first one to fire up the image upload process:

Clicking on that icon will fire up the image upload panel that should look like this:

For this guide, I am presuming the images you want to add are stored on your computer. Click on ‘Select Files’ and browse to the image you want to upload. Select it and it should start to upload. The upload panel will display a progress bar, then present you with options that look like this:

Options for inserting the image

We are now at the stage where we are ready to insert the image into the post. There are a few options to note and set here before we do. You can set them all bu these are the essentials.

Title
Change this to a descriptive title of your image.

Link URL
If you want people to go somewhere when they click the image, you have 4 options. You can write your own link (e.g. http://yourwebsite.com/), or click the ‘File URL’ button for the image to link to a copy of the original. Click the ‘Post URL’ button for the image to link to the post you are writing ( a strange option, but there if you want it). You can also just leave it blank, or click the ‘None’ button for no link on the image.

Alignment
Choose how you want your image to sit in amongst the text. It’s worth noting here that in order for text to wrap around your image, it needs to be roughly half the width of the column you are inserting into, or at least allow room for text to come up around it. That is where this next setting comes in…

Size
This is the most important option when inserting images. The size option determines how big the inserted image will be, or more importantly, how wide. Going back to the notes about image width at the beginning, the image should not be wider than the column that your news/blog is in so choose either ‘Medium’ or ‘Thumbnail’. Again, these settings should have been defined by your web designer.

In most cases, you will want to choose Medium size, this should insert your image at the same width as your website’s column and give a nice sized image that fits well in your site design. Any larger and you will end up with the image overlapping other parts of the site. You could also choose the thumbnail option, and make it look great by aligning it left or right and linking it to the original using the alignment and link options.

Insert the image into the post

Then when you are ready, click the ‘Insert into post’ button (ignore the ‘Save all changes’ button for now) and you will return to editing you text, but you will now see your image in the post. Repeat this process for each image you want to insert and you’re done.

These instructions cover the basics for inserting images into posts, the same principles apply for creating and editing ‘Pages’ too. There are some more advanced options such as inserting image galleries but that is for another time.

Quick tips

Here is a summary of how to upload and insert images:

Click the first icon above the text area
Choose your image file
Add a title
Choose a link option (where the user will go if they click the image)
Choose a size (go for ‘Medium’, or ‘Thumbnail’)
Click ‘Insert into post’

References to image alignment and sizes in this article are based on the assumption that you or the person setting up your site has set the options under Settings > Media correctly. If not, you may get some unexpected results.

If you are a web designer or someone who works with Wordpress, feel free to refer your users and clients to this document as a guide.

Moby MP3 promo download with Play.com

Fri, 26 Jun 2009 11:31:00 +0100

I was asked to design and build a system that would allow Play.com customers who bought the new Moby album, to have access to an exclusive MP3.

Here is an outline of what I constructed:
When you buy the Moby album ‘Wait for Me’ from Play.com, you also get a unique 10 digit code emailed to you. If you enter that code on to a page on Moby’s website you are emailed a link which lets you download an exclusive mp3.

Your download link expires after either 3 days or 3 clicks, whichever comes first.

I built a custom system using PHP and MySQL that handled this process and also produced the pages for the Moby website.

» You can see the offer on play.com and the promo page on moby.com

Toy Life - Designer and vinyl toy website

Thu, 25 Jun 2009 17:20:15 +0100

I was asked to redesign the website for the designer and vinyl toy shop, Toy Life. I had alsobuilt the previous version of their site - and to help matters, the site is run by the talented Mr & Mrs Muju who provided me with the initial bare bones layout, which I turned into a Wordpress theme and site template.

The site’s main news/blog area is powered by Wordpress. In addition I built a custom shop with a Paypal payent facility, along with an admin area to add and edit shop items.

I also created a photo gallery which links into Toy Life’s Flickr account and creates a gallery from that, so they have full control over the site’s content.

I’m very pleased with how the site came out. It feels simple to use and it looks great, mostly down to the great logo and colour scheme supplied and it is also helped by the fantastic photography that has been added.

» Visit toylife.co.uk

Kleerup - official website

Tue, 28 Apr 2009 17:29:00 +0100

I was asked to design and build the official website for DJ record producer and drummer, Kleerup. Here in the UK, he is probably best known for his number 1 in 2007 called ‘With Every Heartbeat’ featuring Robyn.

The site features a journal for Kleerup and a news area, videos, discography, photo gallery, streaming music, event listings and an exclusive members area.

When building sites for musicians I ask myself ‘As a music fan, what would I want from this website?’, and I believe the answer is, obviously, music. That would be followed closely by videos and event details - so these elements are prominent with the music player and featured video in the sidebar throughout the site, and the events featured ‘Live events’ featuring high up in the navigation.

The site is built using a mixture of custom made code and admin areas, Flickr - which was used to produce the photo gallery and Wordpress for the blogs and site framework - it is fully updateable by Kleerup and his management company which gives them a lot of control and flexibilty.

» Visit kleerup.net

(It was a client request that this site be built on the same foundation as my previous work for Royksopp, hence any similarity.)

Urban Dirty laptop, iPod and iPhone skins

Thu, 19 Mar 2009 23:05:00 +0000

The wonderful people at Infectious have launched a range of skins for your laptop, iPod or iPhone using images from my texture photo website Urban Dirty.

There are currently 4 designs to choose from, Crusts n’ rust, Grimey grill, Got it on lock & Greenery - plus an interview with yours truly about how it all began, influences and vices.

I am so chuffed that these texture photos are getting used this way and it’s great to see them online alongside the likes of Jon Burgerman, Buff Monster and Stuntkid to name a few. I’m extremely grateful to Infectious for showing such an interest. Hope you like the skins, they look pretty fresh huh?

Delarge and Urban Dirty in Dutch Web Designer mag

Thu, 19 Feb 2009 13:15:07 +0000

Issue 13 of Web Designer magazine in Holland features Delarge as a ‘Hot site’ for 2009, standing alongside the likes of Smashing Magazine which is a great compliment.

in addition, their free CD has a nice selection of texture photos from Urban Dirty:

Official website for Röyksopp

Fri, 13 Feb 2009 01:18:50 +0000

A few months ago I was approached about producing a new website for the popular dance act, Röyksopp, and I am pleased and proud to announce that the site is now live and in full effect at royksopp.com

It was my intention to create a website that is a step forward from most band/musician websites you usually see which fall foul to the full screen pop up window/flash intros/music blasting scenario or look like a deformed MySpace page. I wanted to build a site that was easy to use, based on xhtml and good css and made use of other websites and services. I also wanted it to be a site that Röyksopp fans would a) find useful and b) be able to get involved in - thankfully my contact at their management company felt the same way.

A streaming music player and a featured video appear in the sidebar throughout the site, so you can get straight to some Röyksopp audio/visual action with no messing. There is a full discography of all their releases complete with artwork and music clips as well as an events calendar with embedded Google map of the location and the ability to add your own photos for the event to the site via Flickr tags.

Flickr is also used in the gallery where the official Flickr photostream is seamlessly integrated into the site, along with the Röyksopp Live Flickr group - again, allowing users to add their own photos to the gallery.

Fans can sign up as members which allows them access to discounted tickets and the ability to post comments in the news and on the journal, titled the Idle Hour Club, where the band post more personal blog style entries about their travels and thoughts.

There is also a comprehensive video collection which uses videos embedded from Vimeo as well as links sprinkled throughout the site to Röyksopp on other social networks such as Facebook and Last FM.

But enough talk, the best way to see how it turned out is to visit royksopp.com..

Web Designer Magazine feature

Thu, 12 Feb 2009 23:55:14 +0000

Issue 154 of Web Designer Magazine has a double page spread featuring me and some of my web work. I made it into the ‘portfolio’ area of the magazine’s ‘Creative Careers’ section, which features some screenshots and a has a few words about my path into web design and my approach to website construction.

Huge thanks to the Web Designer Magazine team and if you’re in your local newsagents, be sure to bag a copy.

Advanced Photoshop Magazine - France

Fri, 23 Jan 2009 01:08:00 +0000

Issue 9 (February 2009) of Advanced Photoshop Magazine in France is packing 50 texture from my Urban Dirty website on their free CD, alongside 25 free stock photos from Photogen. This fact even gets bigged up in a blue bubble on the cover.

Dutch Advanced Photoshop Magazine - Urban Dirty textures on CD - January 2009

Wed, 07 Jan 2009 01:48:00 +0000

Following on from their appearance last month, 25 texture photos from Urban Dirty were included on the CD in issue 13 of Advanced Photoshop Magazine in Holland. International grimy love.

Urban Dirty in French and Dutch Advanced Photoshop Magazine

Wed, 07 Jan 2009 01:38:00 +0000

50 texture photos from my Urban Dirty website were included on the CDs in the Dutch and French versions of Advanced Photoshop Magazine in December 2008. Big thanks to the crew at Imagine Publishing for including my stuff once again!

Custom blog design for DeadDeadDead

Fri, 12 Dec 2008 00:55:00 +0000

DeadDeadDead is a new ultra-creative wing of Garage Studios. They asked me make them a super simple customised blog, and that’s what they got. I created a custom ‘skin’ for Wordpress and kept the design minimal, this one is just a means for the crew to publish what they are up to and let their amazing photos take centre stage.

» Visit DeadDeadDead

Urban Dirty on Web Designer Magazine CD

Fri, 21 Nov 2008 00:32:18 +0000

My free texture download site, Urban Dirty, made another appearance on Web Designer Magazine’s free CD. Last month, 25 photos came free with the magazine to help photoshoppers and website be-boppers get some gritty grime in their style.

My portfolio featured on Design Meltdown

Thu, 20 Nov 2008 23:40:06 +0000

Design Meltdown is a popular site run by Patrick McNeil for observing techniques, trends and examples of modern web design. This week, a feature on personal portfolios was published which included my own.

I’m honored to see my work up there, thank you so much Patrick for including me.