Design Logix Web Studios, Hosting, Web Design and Development and Search Engine Optimisation

Return to the Blog Homepage

• Using Photoshop to create an Online Brand Image for your Clients Business

  • Date: 21/11/08

  • Category: Brand Awarenes, Photoshop, Web Design

  

  One of the things that set big businesses apart from the smaller businesses is brand image. If you were to see the Apple logo on a computer or the AT&T logo on a phone you would know without a doubt who made it. This tutorial will go over how to make a custom logo allowing you the primary basis to build a brand image for any business.

  1. First lets look at a couple of well known logos to analyze the things they have in common. Look at the logos below from some internationally recognized companies, notice that they are very simple, often with only a few colors. One of the important things for a logo is that it is still recognizable in black and white or grayscale. Often they are simply a custom font without an image at all.

  

  2. So let’s start with a couple of different fonts for our business name. We want to focus on clarity and size. However don’t underestimate the effect of tilting one letter or replacing it with a small relevant image. If one word is more important in the business name (for example global in global shipping) think about making it slightly larger or an emphasized font instead of plain.

  

  3. After you have a couple of different base options you can decide on colors. Try colors in the same family such as light and dark blue or complimentary colors (dig out that color wheel) such as purple and green to help emphasize words and make it clear they are separate.

  

  4. Now we can look into adding an image. This should be done as a vector using the pen tool or multiple shapes (which are vectors as well). We will use a vector in case we need to change the size so that we don’t lose clarity and have to redraw it. Try the image in a couple places, for example to the left or right of the words, in between two words, in the place of a letter to imitate the word (for instance a tree instead of the letter “t”).

  

  5. After we have selected the logo we are most happy with we will stylize it to make it more Web 2.0. Start by double clicking the text layer in the layer palette and apply the following blending options which should result in the image below.

  

  

  

  6. Create a new layer above your text layer. With the new layer selected press Ctrl and click on the text layer which will select the layer’s transparency as shown in the image below.

  

  7. Select white as the background color and press Ctrl + backspace to fill the new layer with white. Then use the rectangular marquee tool to select the lower half and hit delete.

  

  8. Then adjust the opacity of the new layer to 20-30% You will have the following end result.

  

  9. You can make the effect a bit more subtle by applying a gradient instead of just plain white so long as the transition is rather quick.

  

  10. Don’t be afraid to try new things and being creative so long as it’s still obvious what the business is. Having a couple of different logos to present unless the business has provided you with a specific sketch is a good idea.