The simple logo- small, pretty and simple. But nestled somewhere in those few pixels lies the power to make or break a business. That’s some heavy weight for such a little guy.

Having just finished working on an identity for a project my agency is involved with, I thought documenting the evolution of the logo from conception to completion along with how I personally go about designing logos would make a pretty sweet blog post. So without further ado, Designing a Logo- the Creative Process.

———

If you’ve ever seen Men In Black, there is a scene where Will Smith’s character, Agent J is finally deemed worthy enough to be given a gun to defend himself by his mentor Agent K. They head into an armory packed with huge guns, of which Agent K awards J with the tiniest one of all, ‘The Noisy Cricket’. A disgruntled J accepts the tiny weapon, not in the least bit impressed at it’s small, elegant stature.
When the opportunity finally arrives for Agent J to use The Cricket, the little gun turns out to be so powerful it obliterates everything in its path, and blows him a great distance off his feet.

When designing a logo, it has to be a Noisy Cricket. Simple, sleek, and pack a lot of power.

Getting Started

As with anything in the creative industry, before the fun begins there needs to be a proper period of planning and research into your project or client, but this is particularly vital in the case of logo design- like the Noisy Cricket, a lot of power has to be packed into a tiny object.
My method of getting started on a project like this begins with talking to a client. A proper discourse with a client is integral to a successful project. I  tend to ask about their target audience, business values and presence, and whether they have existing colour schemes they may use in other aspects of the company image that they want to factor into their logo.

I then sit down at my computer with a pen and paper and just mess around for a few hours, not specifically drawing logos (though many do get doodled during this stage) but just noting down keywords, associations, anything that might prompt a thought.

The logo i will be discussing in this blog post was for ‘Bath Digital’, a project intended to educate Bath-based businesses about the powers of web and Ecommerce.

In getting started with the Bath Digital logo, I decided on creating two separate streams of thought- one for ‘Bath’, and one for ‘Digital’. I find these sorts of techniques are particularly useful in logo design, as they enable you to visualise many factors of a word or idea that you may not ordinary see.

For example, in the image on the left, you see my doodle of an ‘On’ button, the connotations between an ‘On’ button and the word ‘digital’ are fairly obvious, but only through dismantling the word ‘digital’ and writing down everything that came to mind, I got close to a possible idea. If you look at an ‘On’ symbol, you can sort of see a lowercase d, back to back with a lowercase b, almost the initials of the business! Obviously in this case it didn’t work, but it’s an example of how ideas begin to materialise if you properly analyse the stuff you get from good research before a project.

Ideas into Imagery

After this stage, the real design begins. I begin transferring all my sketched ideas to screen, and play with various colour schemes and fonts. Below you can see the first set of four logo ideas I created. 

I like to present a client with 4 options- I feel any more than this complicates things and dilutes your hard work. I like to make these 4 options fairly diverse, I attempt to cover a broad area, from simple, corporate-style stuff to more abstract or trendy design. I have them pick their favourite, then move on to step 2, refinement, which i will cover in the next section of this post.

In terms of the Bath Digital logo, the team decided that out of these 4, we should narrow it down to two for further development, rather than one, as they were both very much liked.

Refinement & the Finished Product.

After some feedback on one of the Bath Digital logo choices below (feedback is a key role in refining a logo) there was some worry that the ‘b’ & ‘d’ weren’t working well enough to convey that they were letters, and that the mouse lead wasn’t sufficiently mouse lead-like (it looked more like a devil’s tail somebody said) so during refinement I decided to add indents and curves to the ‘b’ and ‘d’ in the logo so as to better identify them as letters, and after a lot of work managed to convey the idea of the mouse to a fairly okay standard, I think.

from this:

to this:

Even though I was really pleased with this design, what you as the designer think is best can sometimes not be what’s best for the business you’re designing for, and in this case we decided that it didn’t fit the image of what Bath Digital was setting out to achieve, and who it wanted to attract to use its services- and that a simpler, more accessible logo would be needed to appeal to the wide range of businesses it wanted to communicate with.

I rarely am able to nail a logo first time, only after numerous tinkering and adjusting, and a prime example of how much a particular idea can change is the design we chose to finally go with for Bath Digital. With the other logo option the team chose for developing, everybody loved the mouse within a speech bubble design you can see on the second of the four logo ideas sheets posted above- it seemed to simply and properly communicate the idea of what Bath Digital was about. I decided to start from scratch with the idea, re-doing the font and adding some layer styles to produce something completely different to what was originally a fairly lifeless logo.

After a lot of umming and ahhing about the colours within the team, an agreement was reached and we had our logo. Simple, accessible, and it conveys a message.

A Noisy Cricket? I’ll let you decide.

Related posts:

1. Photo Touchup in Photoshop CS3
2. Photoshop Tutorials
3. Mosaic Transition Tutorial in Photoshop

The photo that I will be using for this tutorial is available at Stock Xchange. So if you want to download a copy and see the heal brush in action for yourself – please do!

As mentioned in the intro, this airbrushing and healing technique works on all damaged surfaces. It  can be use to remove scratches from tables or walls right down to removing a spot or blemish from a holiday snap. Heres the image that I will be working with..

Select a clean area of the photo

The first step is to identify an area of the photo that is unblemished. Concentrate on picking an area with the correct texture rather than one that has a colour match. Photoshop will modify and blend colours for you.

As you can see below, I have selected the heal tool from the left hand menu. Holding ALT brings up the sample selection cross hairs – click the clean area to sample and this will be stored.

Brush away the blemishes

Next, go to the area of your photo that requires healing. You can either click or brush the texture from your selected ‘clean’ area over the top of the blemish.

You will notice that the brush area contains a preview of the texture you will be clicking or brushing into place. Don’t worry about the colour mismatch at the moment!

Note that if brushing, to keep the texture fresh Photoshop will sample texture using your selected clean area as a start point – this means you could pick up another blemish if you pick a ‘clean’ area which has blemishes surrounding it.

Notice that under my brush stroke looks discolored – not at all a fit with the surroundings. Well don’t worry! As soon as you release that brush click Photoshop will look at surrounding pixel colours and light levels and auto-magically recolour it. It does this so well that you cant even see where the brush was!

As you can see the colours have matched, and the deep scar has been removed.

Keep on brushing

Now carry on brushing away those blemishes. Keep adjusting your brush size to match the area you want to heal, and try picking different ‘clean’ areas for different textured finnishes.

The below image took around 2 minutes from start to finish! That’s how powerful the heal tool is.

So why not have a go!

If you’ve found this tutorial helpful why not consider leaving a comment, or even sharing it with your friends via Digg, Twitter etc! Happy Airbrushing!

Related posts:

1. Celeb Airbrush in Photoshop
2. Photo Touchup in Photoshop CS3
3. Photoshop Tutorials

To start playing you’ll need 4 things;

1. A camera which allows slow shutter speed, giving a very long exposure (all DSLR cameras will allow this). I will be using my old Nikon D40, which is a basic ’start of the line’ DSLR.
2. A small maglite (or equivalent). We’ll need to use either the AAA or AA battery powered maglite as they have a suitability small bulb for our purpose.
3. An object to be photographed. I’ll be using my beloved Ibanez SA Guitar in this tutorial!
4. A dark backdrop. A dark curtain or sheet would be perfect.

Preparation

Next you’ll need to prepare yourself for the shot. Unless  you have a room / studio that you can totally black out, I recommend waiting until night time to take your shots – to achieve best effect.

First, place your object (e.g. guitar) against a dark / black background. I propped my guitar against a black amplifier so that it was stood up, with a black sheet behind it and running along the floor.

Next, mount your camera on a tripod if you have one, with the object in shot. If you don’t have a tripod, find a stable surface for your camera.

It’s a good idea to put on a dark top at this point – and if you have any dark gloves they will help keep you ‘out of shot’. Now your ready to shoot!

Camera and Torch Settings

To achieve the lighting effect we need to set the camera to take a very long photograph. To do this you need to set your camera to have a very slow shutter speed / set a long exposure time. If your unsure of how to do this, consult your camera manual. I set mine to 30 seconds, but you may want to try 45 – 60 seconds if you don’t achieve the effect you desire, or simply don’t have time to complete the shot in 30 seconds.

Finally, before taking the photo, remove the front part of your maglite by unscrewing it (as shown below) this will expose the bright white bulb.

Click!

We’re ready to go!

With the torch on and bulb exposed, switch off all other lights, hit shoot button on the camera. You should hear the shutter click open.

Now you can play! Draw sweeping arcs or trace detail of your object. Try going over areas of an object more than once to light it differently. The closer to the object you are, the more you will pick up the reflections.

Below are a few examples of my photos… Happy snapping!

We’d love to see some of your attempts so please feel free to link to them below in the comments area. If you’ve enjoyed this blog please consider sharing it with your friends through Twitter, Digg, Delicious or any other method you feel fitting!

Related posts:

1. Mosaic Transition Tutorial in Photoshop
2. How to make an iPhone application icon in Photoshop
3. Photo Touchup in Photoshop CS3

For this tutorial I have set up a 550px x 550px canvas with a light gray background. The first stage is to select the rounded rectangle tool (shown below). Set the radius to 15px and draw yourself a square inside the canvas. You can make sure you draw only square shapes by holding the shift key.

STEP 2

In this step we will create the interior colour for our icon. Start by command clicking (control + click on PC) on the layer mask from your square layer created a moment ago to load the outline as a selection.

Now create a new layer by hitting cmd+shift+n (crtl+shift+n on PC). Now on this new layer – and with the selection still loaded go to Selection > Modify > Contract. I used the setting 12px.

You should now have a new selection which fits perfectly inside the square from step 1, but has been shrunk by 12px. Fill this layer with your background colour of choice!

Finally add a small shadow to the bottom of this new later by adding a new layer style gradient as shown below

After this you should be left with something looking like this!

STEP 3

Next we need to duplicate the blue layer we have just created. To do this, right click on the layer and select duplicate.

To this layer copy, apply a new ‘normal linear’ gradient as an effect later as shown below. In essence, I am gradating from the original blue, to a lighter blue at the bottom.

To create a light-bevel effect on the icon, we are now going to delete the bottom half of the ‘duplicate blue’ layer, to reveal the original blue layer underneath.

To do this use the elliptical marquee tool to draw on the area you wish to keep. Invert the selection using cmd+shift+I (crtl+shift+I on the PC). Once the bottom part of the layer has been selected, hit backspace to delete it.

STEP 4

Now we have the background of our icon, we want to add a logo or some text onto it.

Simply drag your preferred logo onto the canvas or create your text and place it to preference. I’ve used the Storm feather for my icon.

To make the logo or text look as if it is set into the icon we are going to apply a new layer effect. This time an outer bevel. The settings that I have used are below:

STEP 5

You should now have your finished icon!

You can present your icon in a number of ways. Below I have is a very simple description of how I have presented mine with simple reflection.

STEP 6

To achieve the below effect I have created a blue gradient background, and added a ‘floor’ in exactly the same way we added the light bevel to the icon (draw a new layer on top, use the elliptical marquee tool to remove the section that was not required.

I have then brushed in black corners at the bottom using a large black brush with 0% hardness. I have also added a large white brush of white behind the logo to provide it with an outer glow. Ive blended these into the composite by playing with the opacity settings on the layers panel.

Finally, the reflection has been added by selecting all of the layers that make up the logo, right clicking and selecting merge. This flattens the layers into 1.

This layer is then duplicated, and flipped vertically edit > transform > vertical and dragged into position.

To achieve the faded effect, apply a new gradient layer style from blue (use the eye dropper tool to select the blue you want) to clear. Finally set the opacity to around 45%.

Extra: Using your icon

Once you have created your iPhone icon, you will be able to use it in your application by doing the following:

- Exporting it as a PNG and name it Icon.png (note the capital I of Icon).
- Place the  into the root directory of the project to use it as the applications default icon!

Related posts:

1. Mac Style Background in Photoshop
2. Planet Exploding – Fireball in Photoshop CS4
3. Mosaic Transition Tutorial in Photoshop

Your first step will be to find a free stock image of some dry and broken ground. I found a perfect picture over at stock.xchng. This is the image I’ve selected – Its been opened in Photoshop CS4 and resized for this tutorial to 550px x 368px.

STEP 2 – Invert

Invert the image colours by pressing CRTL+I or going to Image > Adjustments > Invert. The resulting image is shown below.

STEP 3 – Make A Planet

We’re now going to make a planet! Start by adding a background layer of black to your image (replacing the default white one if you have it)

Next – grab the elliptical marquee tool and drawing a circle over your image. Holding the shift key while dragging will keep the circle in proportion.

Once you have your circle, click the refine edge button from the toolbar at the top of the page. I’ve set the radius to 2.0 and the contract/expand to -1. Hit ok!

Next we need to remove the unwanted area of the image. To do this we need to select everything except the circle we have made. This can be achieved by inverting the current selection: Select > Invert or Command+ Shift+I (CRTL+Shift+I on the PC).

Once you have the inverted selection, hit the backspace key to remove the rest of the image, leaving you only the circle in the middle. The black background created at the beginning of step 3 should now be showing.

STEP 4 – Spherize

Now we have a planet, but its not particularly spherical. Luckily Photoshop CS4 has a tool to solve this problem.

First we need to re-select our planet in the middle by inverting the selection again. Select > Invert or Command+ Shift+I (CRTL+Shift+I on the PC).

Next select: Filter > Distort > Spherize. I used settings: Amount 100%, Mode Normal. Personally with this image I feel that the step needs to be repeated to produce a better sphere – So i repeat using Amount: 35%.

STEP 5 – Polar Distortion

Next is the really clever Photoshop CS4 Magic.

Deselect your planet by hitting Command+D (CRTL+D on the PC) and then go to: Filter > Distort > Polar Co-ordinates. Set the mode to Polar to Rectangular and hit OK. For the next step we need to turn the image on its side, so select: Image > Image Rotation >90 CW.

The next step adds the explosion detail. Select: Filter > Stylize > Wind. Using settings: Wind, and From the Right. Now return your image to the correct orrientation by selecting: Image > Image Rotation >90 CCW.

STEP 6 – Reform the Planet and Colour!

We’re almost there now – we just need to reform the planet into a sphere and colour it. To reform the planet go to: Filter > Distort > Polar Co-ordinates but this time use the Rectangular to Polar setting.

We should be left with our plannet, with the wind streaks acting as explosion blasts.

From here, its up to you to colour and edit the picture to look how you like it. For the below effect; I’ve added the following layer filters and effects:

Hue/Saturation: Hue -180, Sat +37
Vibrance: Vibrance +60, Saturation +10
Colour Balance: Cyan/Red +17, Yellow/Blue -9
Levels: Output Levels 0 – 227

I’ve also added a background of stars and some text to finish the image.

So I hope that helps you Matt! Every image will turn out slightly differently depending on which broken ground image you use to begin with. Good luck!

Related posts:

1. How to make an iPhone application icon in Photoshop
2. Mac Style Background in Photoshop
3. Celeb Airbrush in Photoshop

Select a photo that you want to touch up. I have picked an image i took on Brownsea Island in. It isn’t a bad photo but the colours aren’t as vivid as i remember them in real life.

STEP 2 – Dodge

The dodge tool is the first of a pallet of three that we will be exploring in this tutorial. It is located here..

The dodge tool works by lightening darkened areas under the brush. Its primary function is to bring back detail that you may have otherwise thought lost to the black.

I am using Brush Size 70 with 0 Hardness, and will be lightening the Midtones with an Exposure of 18.

In my experience, you wont often need to change from Midtones, but for extra tweaking feel free to change the mode and experiment.

In my image i want to being some of the detail lost in the sand back to life.

After a light brushing in the areas I want to save i have achieved the effect i want. Be careful you don’t overdo the dodging. It can lead to creation of noise.

STEP 3 – Burn

The Burn Tool as you may expect does the reverse of the dodge tool. It darkens objects. You may wonder about its uses, but it is fantastic at adding definition into photos. My favorite use is to revive distant, Grey horizon hills or mountains.

In my image, I want to restore that horizon and make some of the clouds look a little more ominous.

Ive got my Burn Tool set to a very soft brush (0 Hardness), varying the size as i need with the burn settings on Midtones and a very low exposure of 10.

STEP 4 – Sponge

Now for a little touch of Photoshop CS3 magic. The sponge tool has the ability to saturate or desaturate an area in order to restore or take away vivid colour.

The beauty of using the sponge tool over a hue/saturate adjustment is that i can can apply different levels of saturation with my brush depending on the areas i want to effect. So in this case i want to bring out the colours in the amazing sky, and more so in the sunset oranges.

To do this I will be using a soft brush (0 Hardness), of varying size. Mode set to Saturate and Flow set to 20.

So simply brush more over the areas you want to effect the most. To give you an idea of how I’ve applied the sponge,I saturated the blues slightly less than the reds and oranges. The water had the least amount of saturation.

And the results are fairly fantastic..

STEP 5 – Crop, Frame and Sign

A few final touches. I have cropped the image and added a black border to focus the viewer. I have also added a Palce/Date to the finished artical.

I hope you have enjoyed seeing these simple yet effective tools in action. Please feel free to post your own revitalized images and comment below.

Related posts:

1. Photoshop Tutorials
2. Celeb Airbrush in Photoshop
3. Airbrush, Touch Up & Heal Face / Photo in Photoshop

We start with a nice simple gradient. You can pick the colours – personally i used Hex #2fb8f3 to #355aae.

You can apply the gradient using the Gradient Tool (G) and dragging from top to bottom – or any which way you like to get your own effect.

STEP 2

Next we add a new layer by hitting Apple+Shift+N (CTRL+Shift+N on Windows) and fill it totally in the colour we want our final image to be based on. I chose a blue; #237dc3. Set its blend mode (found just above the layers pallet) to Colour. We do this so that all the effects we are about to make all retain the correct blue throughout the tutorial.

STEP 3

One of the many ‘Holy Grail’s’ of Photoshop is its ability to use vectors and create perfect curves. You can achieve these with the Pen Tool (P).

Practice by clicking a start point, then click somewhere else but hold the click down and drag away in a direction to create the curve. Once you are happy with drawing curves and random shapes with the pen tool try and copy what I’ve done below.

STEP 4

Now right click inside your path and hit create selection. This will bring up the familiar marching ants.

To create a glow effect first create a new layer then take a white brush (B) of a good size and set the hardness to 0px. This will make the brush very soft.

Carefully give your a selection a border in areas you want to achieve this effect.

This is what i created using the selection we drew earlier.

STEP 5

The next effect is going to be a faded corner. Repeating the shape drawing process from earlier I drew a curve and then created its selection.

Again create a New Layer and use the Gradient Tool (G) to fill from white to nothing.

Next set the Blend Mode to Overlay and reduce the opacity to around 30%.

I then repeated the effect in the other top corner using a slightly darker fill on a new layer.

STEP 6

Here again i draw a corner shape in the bottom left corner using the Pen Tool (P).

And create similar effect to step 5 using white to nothing gradient and an Overlay Blend Mode with an Opacity of 40%. Remember to use a new layer!

STEP 7

This step repeats Steps 3 and 4 to add a glowing border effect to a new shape in the bottom right.

STEP 8

To add the finishing touches to the image I have added a large white brush between the borders I created in step 7 and faded it to approx 35%. I have also added a tiny border to the curve in the top left and another smaller corner item.

Related posts:

1. How to make an iPhone application icon in Photoshop
2. Mosaic Transition Tutorial in Photoshop
3. Celeb Airbrush in Photoshop

It took me a while to work out how to kill/disable it so for anyone else out there who wants to know:

1. Click Start > Control Panel
2. Go to Click System and Maintenance
3. In Control Panel Home view, click Administrative Tools
4. Double-click Service (If asked for permission just continue)
5. Find “Windows Search” in the list
6. Right click and hit Properties
7. Click Stop
8. Select Disable from the drop-down next to Startup Type
9. Click Apply and OK

Enjoy your RAM and CPU! (Or whats left after Vista is done with it!)

Related posts:

1. Mosaic Transition Tutorial in Photoshop
2. 13 Reasons To Buy A Mac
3. Planet Exploding – Fireball in Photoshop CS4

Start by finding yourself a photo that you wish to use. I am using an image that i took at the Eden Project in Cornwall during Bulb Mania 2007 using a Nikon D40. Ive uploaded the original image for you to use for the purposes of the tutorial. If you wish to use the image on your website or in any other form please request permission before you do so.

Download original here.

Notice i have selected a portion of the image that i want for the tutorial using the Marquee Tool (M).

By holding shift you can create a square as i have below. Then using apple-c followed by apple-n, enter, apple-v I enter my selection into a new doc. (ctrl-c, crtl-n, enter, ctrl-n on Windows)

So here is my starting image:

STEP 2

Now we are going to duplicate the image by right clicking on the layer in the layers pallet and selecting duplicate.

STEP 3

Next we apply the mosaic effect to the duplicate image layer:

Filer > Pixelate > Mosaic | Size of mosaic cells should be set to your preference. Personally i used 15px.

STEP 4

Now to create the transition we must first set our foreground colours to black and white. You can do this by pressing D.

Next click on the Add Vector Mask button under the layers pallet. It looks like this:

Now select a Fill Gradient Tool from the toolbox. You may have to click and hold on the fill bucket to see the option.

Finally set the gradient to go from black to transparent using the dialog at the top of the screen. It is normally the second option on the list you can access by clicking the gradient image.

STEP 5

To achieve the effect simply drag across the image. I dragged from right to just passed the middle. You can play around until you are happy.

STEP 6

I finished off the image by adding some text. The font used is called Chalet – often some well placed text can make and image so choose carefully!

To create a blur behind the text i again used the Mosaic technique.

First copy the text layer(s), then move them behind the original text. Next use the Filer > Pixelate > Mosaic tool to create a size you like.

Final Image

Extras

It is worth noting that you can have more than one gradiated transition per image by holding the shift button while dragging.

You may also wish to use non linear gradients which you can select from the dialog in the top right.

Related posts:

1. Mac Style Background in Photoshop
2. How to make an iPhone application icon in Photoshop
3. Photoshop Tutorials

During the series the Photoshop Tutorials will cover; Touching up photos, Use of light and shadows, The wonders of the Burn, Dodge and Saturate Tools, Warping, Blending and Liquefying. Along the way i hope you will pick up some useful ideas to help inspire your own Photoshop creations!

If you have a tutorial that you would like to share, or that you wish to feature on our blog, please get in touch.

Tutorial 1: Celeb Airbrush in Photoshop
This tutorial shows you how to take a photo of your choice and helps you to create that airbrushed skin effect.

Tutorial 2: Photoshop Flowing Water
In this tutorial you will learn how to create realistic looking flowing water in Photoshop using the warp tool and some blend modes.

Tutorial 3: Mozaic Transition Effect for Photo
Here we learn a simple technique to create mosaic/photo composite images using some simple masks.

Tutorial 4: Create a Mac OS X Style Background
A must for any Mac enthusiasts out there, this tutorial will show you how to create Mac-esque desktop backgrounds using vectors, blend modes and some clever airbrushing.

Tutorial 5: Landscape Photo Touch-up
Learn to use the Burn, Dodge and Sponge tools to touch up a photo and bring it to life. A must for any budding photographer..

Related posts:

1. Photo Touchup in Photoshop CS3
2. Flowing Water
3. Mosaic Transition Tutorial in Photoshop