How to Make a Logo for a Website: a Step by Step Tutorial

How to Make a Logo for a Website: a Step by Step Tutorial
It’s commonly known that a successful logo is what visitors remember and associate with a service or a website.

The significance of logos changes from website to website: logos may be less important for blogs, but they acquire great significance in websites that try to sell products or provide services.

A bad logo for a new serious business website drives away visitors and plays the role of a barrier for them – between being a visitor and being a customer – therefore, no matter how much visitors view the website, many of them will never be turned into customers due to the fact that a bad logo reflects an amateur service.

Making a good logo for a website is a very important step to succeed in any online business.

To make a professional logo, some people prefer to hire professional designers because it seems like it’s difficult to create something original in Photoshop.

While it is a good idea to hire professional designers to make a logo for your business website, the services they provide are usually expensive and not everybody can afford them.

The less expensive option — often considered an alternative to the first — is making the logo with a web application like Logo Garden which enables its users to customize a logo among a large number of ready-logos arranged in several categories.

In this article, I’m going to focus on the option of creating a logo for free using Photoshop.

The goal of this article is to show you how to create a professional, visually appealing logo which will contribute to the reinforcement of the memory which is created around your site.

As a web developer interested in web design, having created some logos for my websites with the help of professional designers’ pieces of advice that I read, as well as some of my personal observations, I think that my experiences will be valuable for you to know how I managed to make my own logos.

What you’re going to read in this tutorial is probably what some designers do not want you to know because designing for some designers today is more of knowing what to do than having the innate qualities of a designer.

Step 1: Get Ready


Before delving into the core of Logo-making in Photoshop, let’s prepare ourselves by gathering all the information needed for our design.

If we look at the biggest websites only, we can observe two categories of logos: those that are built on a special font only and those that are built on a special font and a shape next to them.

The shape can be used for many purposes and one of them is to make the name, the service or the website content more expressive.

The expressivity of logos can be related to website types: the more general the website is, the less expressive the logo will be and the more specific the website is, the more expressive the logo should be.

Let’s try to apply these ideas to a virtual e-commerce website called SmartHouseFuture: the goal of this website is to sell devices that turn an ordinary house into a smart house.

SmartHouseFuture is a niche website with a specific interest and a clear goal. For this reason, we’re going to make our logo a combination of a special font and a shape whose purpose is to express the website’s name: House/Home.

Until now, we have no clear idea of how the combination should be: should it be a house in front of the website’s name or on the top of it? What colors should be used?

It’s possible to search Google for similar logos to learn some good ideas.

And after that, it will be time to test and try different possibilities on photoshop — it's what some designers do.

While searching for similar logos, I found the following:

A simple logo of a house.

It’s not the best logo, but I learned from it the idea of making the roof on top of the website’s name.

In the next lines, I’ll  show you how to install the required tools for our tutorial.

Step 2: Download the Required Tools


To make a logo following this method, you need to install Adobe Photoshop.

Adobe Photoshop is the most popular graphics editor, suitable for professional designers.

In this tutorial, I’m using Adobe Photoshop Cs6.

To avoid creating shapes from scratch, we’ve downloaded and installed custom shapes.

Here’s how to install custom shapes in Photoshop:

1. Download custom shapes by Clicking Here, then Download.
2. Open Photoshop. On the left side, click with your right mouse on the square shape and select Custom Shape Tool.

Select Custom Shape Tool in Photoshop.

3. On the top, next to Shape, open the Custom Shape Picker.

Open Custom Shape Picker in Photoshop.

4. Click on the wheel, then Load Shapes.

Load shapes in Photoshop.

5. Search where you downloaded the file, select it and click Load.

Select the file with .csh extension and click Load.

Custom shapes have been successfully installed.

We need now to find some special fonts.

Here’s how to install a new font in Photoshop:

1. Close Photoshop.
2. Search google for free fonts and pick whichever font you like, then click Download. (Be careful, if you want to use the font for commercial purposes, you need to search very well to know whether it is really free, or else you may end up with a copyrighted font.)
3. Extract your downloaded zip files.
4. In Windows 10, use the search bar in front of the start button and type fonts. You will see a folder named Fonts (you can also find it in the control panel), Open it.

Search for Fonts using Windows 10 search bar.


5. Open your extracted files, select the file(s) of the type TrueType font, drag and drop it into Fonts folder.

Install a new font on Windows.

When you open Photoshop now, you will find your new Font installed.

The next step is to find the shape of a house/home to draw it and then customize it.

Step 3: Draw and Edit the Custom Shape


It’s time now to start drawing the logo in Photoshop.

The logo that I’m going to design will be similar to the reference logo I found earlier.

I’ll try to not copy the details but the general idea — which belongs to no one — of “the roof on the top of the website’s name” in order to get an original design at the end.

The following instructions will show you how to draw a house with the newly installed custom shapes and how to edit the house so that to keep the roof only.

1. Open Photoshop
2. On the top left, click File and then New.

Open a new document in Photoshop.

3. In the new window, set the width to 700 and the height to 350, then click OK.

Set width and height in Photoshop.

4. On the left side, click Custom Shape Tool, then on the top open the Custom Shape Picker, and find a shape that represents a house, and select it.

Search for a shape that represents a house in Custom Shape Picker.

5. In the top, next to Fill, choose any color other than white to be able to see the shape when you draw it.

Choose another color, for example red.

6. To draw the shape, just click on shift + left button of your mouse, the more you drag the mouse, the more the shape gets bigger. Here’s the result.

Draw the house in Photoshop.

7. Now it’s time to delete everything except the roof. To do this, be sure that the layer of the created shape is selected.

Select the layer in Photoshop.

8. On the left side, with the right button of your mouse, click on Lasso Tool and select Polygonal Lasso Tool.

Choose Polygonal Lasso Tool in Photoshop.

9. With Polygonal Lasso Tool select the house, except the roof just like in the picture:

Select everything except the roof, Photoshop.

10. On your keyboard, Click Del to delete the selected part.



We have successfully edited the custom shape, the next step is to write the name of the website and adjust it under the roof.

Step 4: Draw the Name of the Website


All is needed now is: selecting the newly installed font, setting its size and writing the name of the website.

1. On the left side, click on Horizontal Type Tool, then on the top, select the font and its size.

select a font in Photoshop.

2. Click on the white space under the roof and then type the name of the website.

The created logo in Photoshop.

3. You can also adjust the website name or the roof by clicking on them and displacing them with your mouse.

Great, next we will try to change the colors and then try to add some effects.

Step 5: Change the Color of the Logo


There’s no doubt that colors play a very big role in marketing. There’s even a whole branch of psychology interested in colors through which marketers learn lessons. Therefore, picking the right color for the logo is a very important step.

This step is difficult in that there’s no objectivity in picking colors: what I may like as a color could be what someone else’s dislike.

However, I think that there are some colors that are commonly admired such as the colors of nature like green, blue, etc.

By using Photoshop, I learned that to make colors look great, one should try to make the color that he picks heterogeneous just like the colors of nature.

For instance, if you examine a green leaf more closely, you will notice that the green is not homogenous, but it slightly changes from a place to another.

It becomes clearer when you take a picture of it and view it in a photo editor by zooming the different parts of it.

In the next few lines, I’m going to show you how to pick a color and how to make the same color heterogeneous.

1. On the right side, double-click on the layer of the roof.

Double click the layer to see the options.

2. A new window will appear, activate Gradient Overlay, and click on the color next to Gradient. A new window will appear, select the third Preset and pick two varieties of the same color by clicking on the icon of a pen under the black and white color. The varieties should be very close to each other. See the following picture.

Set Gradient Overlay to get a more than one variety of the same color.

As you can see, I’ve chosen the Blue Ocean; on the left side, the color looks a little bit darker than the right side.

In this tutorial, I decided to use only one color for both the shape and the font.

Here’s the final result:

Here's how the logo looks now.

Step 6: Add Shadow Effect to the Logo


If you want to make the logo appears as if it is in front of a white wall or a white table by adding the shadow effect to it, you just need to:

1. Double click on the layer of the object (shape or text)
2. Activate Drop Shadow and adjust the options until you get a nice shadow effect.

add shadow to the logo by activating Drop Shadow option in Photoshop.

Here’s the final result after applying Shadow:

Here's the final result of how our logo looks like with Shadow effect.

The next step is very easy but very important. It will show you how to save your logo and what you should do to make it fit any background of any website!

Step 7: Save the Logo


One of the characteristics of a professional logo is that it can fit any website’s background, i.e. if the website’s background is gray, the logo’s background will be gray, if it is black, the logo’s background will be black, etc.

To do this, you should delete your logo’s background and save the file as a .png extension:

1. On the right side, with the right mouse button, click on the layer of the background, then with the left button, click on Delete Layer.

important step: delete the background of the logo.

2. Click on File then Save.
3. Next to File Name type the name of your logo, in the drop-down next to Format, select PNG and click Save.

save the file as .png in Photoshop.

The logo is now ready to be used!

You can now save many copies for many purposes with different sizes: for your website, Facebook profile, Twitter profile, etc.

To change the size of the image: click on Image, then Image Size…, and set the new width and height.

Conclusion


As a web developer interested in web design, I shared with you my method of how I create my own logos in Photoshop for Free.

It all starts with planning and gathering information about the website, downloading the necessary tools and files before working on the logo.

This article is an extension to another article on How to create a website quickly and easily using an application called WordPress.

I wrote it to help people create websites without any coding knowledge.

I hope this was interesting and helpful.

If you have any question or suggestion, you can use the comment section below.

Comments