(Making of TutorialsHot - First part) Logo making

Introduction for the series

Usually, when I’m making a website- everyone ask me how did I do it? What is your secret?

So this time, I decided that I’ll share my working methods with you.

The series will include 3 parts. first is the logo making. the next 2 parts will be posted here in the next month and their subject was not decided yet.

Step one, creating the general logo idea

First thing you need to do is to think about a pretty simple symbol. it can be an icon that will show the subject of your website or a combination of first letters in the 2 words in your website name. For example, TutorialsHot >> TH.

*I recommend you to sketch your idea on a piece of sheet so it will help you focus on the small details in your symbol

(in this tutorial I’ll use example number two)

Once you have an idea in your mind the way will be much easier.

Step two, making the general shape in Photoshop from the sketch and general document settings

Here’re some general document settings I used in the project that was part of the plan about the website:

Background color: #D64F09 , document size - 350px on 350px (I use this for all of my logo works..)

You can scan your sketch and import it to photoshop but if it’s a simple icon- it’s not necessary.

I’ll start by making the square frame: choose the rectangle tool and make a white vector(#FFFFFF) perfect square by holding on shift and dragging the mouse till you’ll get the size you want.

The way to do the rectangle to a vector object is simple- before making the shape- choose ’shape layers’ option like described in the image below:

Now, choose the path selection tool and select the path of the square you have just made.

Copy it by ‘ctrl+C’ and then paste it by ‘ctrl+V’. now, go to ‘edit-transform path-scale’, click on the lock at the top bar, change the value to about 70% and click \ok.

Next step is to make a “hole” in the big square by the small square. the way to do it is to click on ’subtract from shape area’ like the image below:

The result will be a vector “frame” that is a main part of the final logo.

Next thing is to do the custom shape of the “TH”. I’ll do it by typing TH (Futura font) and then create the outline of this.

Creating the outlined vector shape is done by this way: left click on the text layer > convert to shape.

Now, choose the ‘convert point tool’ ,select the top left 2 points of the H letter and take them down to the middle like of the H letter like shown below:

Do the same action to the top right 2 points of the T and drag them to the right. the result at this step should be like this:

Last thing to do in this step is the rotate the square “frame” layer. this will be done this way: select the square “frame” layer, go to edit-rotate and change the value in the angle to 45 like the image below:

Step three, styling and last touches

Step three will be pretty short compared to the last 2 steps. all you need to do is to play with the TH layer size so it will fit into your main idea. one important thing you should remember when doing this- always keep on the proportions by holding on shift when you play around with the object size.

Part two of this step is the layer styling: I did a really simple gradient (#C7C7C7 to #FFFFFF) and changed some things in the options. that’s it. I leave it for you to play around with the effects because I didn’t made anything special.

The end result can be viewed at the top of the site.