Building a website the Big Brother way: The logo
Hello hope you are OK!! So let’s get straight to work. In my previous post I said that we were going to create a web layout with Photoshop. However my client said that he also needed a new logo (first change in requirements: get used to it 
). So in this post I will tell you how I am going to create a logo using Photoshop. I hope you have downloaded Photoshop and experimented a bit with it. If not download it from here (30 day trial version).
Now before we start the design of the logo we need to think of a colour scheme that we are going to apply to the website. Choosing a colour scheme is no easy task becuase it depends on the aim and scope of the website/logo. However in this case the client already has a colour scheme that he used in his old logo and that he wishes to retain. According to the client this is “black and gold”. Now he wants a new logo “something more modern”. Therefore I came up with the following colour scheme:
Color HEX: 1e2528
Color HEX: 6a7378
Color HEX: ffffff
Color HEX: cfb52b
So if you observed well our colour scheme (or palette) does not contain black but a dark colour very similar to black with a hex value of 1e2528 (we are using hex values because of photoshop). This gives a more modern look and feel. These will be the four colours that we will use in both the logo and the web layout. So let’s start straight away with the logo. Open up Adobe Photoshop CS4.
Now to help you with this tutorial the image below is the finished logo. The reason why I am going to show you the finished logo is because it will help you more understand what is going on in this tutorial. Here it is!
So let’s start step by step. Now that you have Photoshop open go to File menu and choose New (alternatively use the shortcut Ctrl+N). A window pops up. Name the project Logo and set the width to 250 pixels and the height to 120 pixels as shown below.
Now the first thing we are going to do is to fill the background for the logo. As the background I am going to use the darkest color (#1e2528). So first select this color. You do this by double clicking on the foreground color in the color section, which is this:
A new window will pop up. Set the hex value to 1e2528 as shown here:
Now to fill in the background all you need to do is press Alt+Backspace together. The following is the result:
The next thing is to create the diamond. First go to layer menu and choose New and then Layer. Name the layer diamond. Then press U and the tool to draw shapes is chosen. From the top choose the rectangle tool. Now change the foreground color to gold (#cfb52b). Always remember to save and till now save in PSD format. Now draw a rectangle in the upper left corner of the image. Do not draw it too big, something like this:
Now create another layer (Layer -> New -> Layer) and name it diamondfill. Then select the Eyedropper tool or press I as a shortcut and click on the dark colour. The foreground will automatically change to that colour. Then select the rectangle tool again or press U. We are going to draw a rectangle inside the gold rectangle like this one below. If you are not happy with the position choose the move tool (or press V) and move it until you are satisfied.
The next thing we need to do is to merge the diamond layer and the diamondfill layer into one layer. We do this by selecting the diamondfill layer (click on it in the layers view). Then go to Layer and choose Merge Down (or press Ctrl+E). You should now have two layers Background and diamond. Now we need to rotate the diamond to become like an actual diamond. To do this we choose the diamond layer and then press Ctrl+T. A number of small boxes have formed at the edges of our rectangle. Go on the one at the top right corner. The arrow will change and now you can rotate the rectangle to form a diamond like this one below. You can even resize it if you think it is big/small.
The next step is to write the name of the company. To do this we press the Horizontal Type Tool (or press T). Now choose Monotype Corsiva for the font family, 78pt for the size and make sure that the color is the gold color (#cfb52b). The Horizontal Type Tool toolbar should have the settings as this one.
We should now have the following in our Photoshop file.
Are you noticing something? Well the affect of the diamond is not the desired one. So what we are going to do is add some glow to the diamond. To do this select the diamond layer. Double click on the diamond layer and a window will pop up. Then choose Inner glow and outer glow options as shown here:
The effect produced is definitely better. However there is something else that we can do to make it even better. Select the text layer (Marfel). Double – click on it and another window will pop up as before. This time choose drop shadow and then press OK. You should now have something like this:
This is way much better. Now what’s next? Well we have the name of the company. However this does not say what it does exactly. So our next step is to show that on this website the company will sell watches. So select the Horizontal Type Tool (or press T). Click somewhere so that the cursor appears. Change the colour of the text to light gray (#6a7378). Change the font size to 21pt and the font to Neuva Std. Set the style to Bold Condensed. Write the word ‘watches’. Then select the Move Tool (V) and place the word watches under Marfel near the ‘f’ letter as shown below.
Mmm nice! However the word watches seems very dull. So let’s double click on the watches layer. Now we need to choose Inner Shadow. Now click on outer glow and change the opacity in the outer glow settings to 100% as shown below.
And you shall achieve the following result. Well the final product!!!
Now to save it as an image, save the PSD file. Then go to Layer and then choose Flatten Image. Then go to File, choose Save as and save it as a PNG. Voila you have an image.
So the logo is ready. What’s next? Keep tuned the web layout is coming next and believe that’s more challenging and interesting. CU soon!! One last thing! For those of you who are interested here are a couple of books that will surely interest you:
