The role is primarily aimed at designing for the Web. You must be proficient in Photoshop, Illustrator and Dreamweaver and must have a good understanding of HTML and CSS. Some PHP skills would be a bonus, but is not a necessity.

Please send a full CV and samples of work to: jobs@dubbedcreative.com or Dubbed Creative, 32 Woodstock Drive, Bolton, BL1 6BB

The upgrade process was pretty much straightforward and we’re looking forward to using the new features - this is the first post using the new admin area - we like it!

When we are designing the interface for a Web Store, we like to draw a path around the products, removing the background, so they sit nicely on clean white. This ensures the products are displayed cleanly, without any interfering colours or designs. Recently a couple of our clients asked us about the best way to edit their photos, so we thought this would be a good opportunity to write a post describing our process.

We understand that the majority of our clients don’t have that much image editing experience, or the same software that we use for that matter (Photoshop), so we recommend that you download the free image editor GIMP (don’t worry, it’s nothing to do with Pulp Fiction! It’s short for Graphical Image Manipulation Program).

Now, we use Macs for all our design work and will be describing the process using the Mac version of GIMP. The PC version is pretty much the same, so the instructions should follow smoothly.

Lets Begin!

For this tutorial, we’ll be using this simple pet bowl photo to describe our process.

Initial Preparation

Your photo will probably be quite large, so first things first, let’s resize it to a more manageable size:

Image > Scale Image

In the dialog box enter a width of 1000px (or height if it’s a portrait photo). You don’t need to change it’s opposite dimension as this will be done automatically. Click the ‘Scale‘ button to confirm the changes.

Let’s Get Drawing

You should now have a nicely sized photograph. Zoom in at 100% so you can see the full size - this makes it easier to draw a path around the product. Using the ‘Pen‘ tool from the toolbox start creating points around the product, dragging each points handles to fit the path around any curves as you go. 

Feel free to use as many points as necessary. We have years of practice doing this, so we tend to draw paths with very little points!

Closing The Path

When you get to the end of your path add a final point near to your start position. In the toolbox click the ‘Edit‘ option (or hold the Ctrl key).

Now we need to close the path, so click on the final point in the path which will be the one next to the point currently selected. The cursor will change to show two links.

You should now have a complete path around your product.

Add The White Fill

For your product to site on a white background, you first need to add a white layer. From the ‘Layers‘ panel, create a new layer. Select ‘White‘ as the Layer Fill Type and click ‘OK‘. You don’t need to change anything else.

Your new layer will appear in the Layers panel, drag it below your photograph and then select the photograph layer again.

Walking Ants 

Next, in the toolbox (you should still have the pen tool selected) click the ‘Selection from path‘ button. You will see the path turn into a moving dotted line.

Let The Magic Begin

Nearly there. We are now going to hide the unwanted background so the white is revealed in it’s place. From the ‘Layer‘ menu, select Mask > Add Layer Mask.

Click ‘Selection‘, and then ‘Add‘.

Voila! The background should have now disappeared showing white in its place.

Wrap It Up

Now the final step. From the ‘Image‘ menu, click ‘Flatten Image‘.

This will combine both the photo layer and white background layer into one. You can now take the opportunity to remove the excess white space surrounding your product:

Image > Crop to selection

And there we have it…the perfect photo ready to be uploaded to your store!

Save your finished photo as a jpg at 100% quality.

Today, Dubbed Creative are proud to announce that the Rajani Web Store officially went live with it’s first batch of products with many more to be added soon. We decided that we would go that little bit extra when designing this store to enhance our already impressive ecommerce portfolio. In addition to our usual clean layout, we have displayed particular areas in different ways that you wouldn’t normally see on online stores - it’s our way of keeping things de-cluttered!

Visit the live Rajani Superstore.