It’s very important to design a catchy and easy to remember logo for your website. Failing to do that may drive your visitors away and no matter how many visitors you may get, only a few of them will agree to be customers because a bad logo generally signifies for them that they are dealing with an amateur service.

A successful logo is what visitors remember and associate with a service or a website.

And, succeeding in any online business starts with a beautifully designed logo.

To make a professional logo, some people prefer to hire professional designers because they believe it is very difficult for them to make.

Although it is a good idea to hire professional designers to make it for you, it doesn’t hurt if you save your money and try your own.

Exclusive Offer: If you tried and couldn’t make your logo, and you can’t afford a professional design from a professional designer either, I suggest that you make your professional looking logo for cheap through the web application Logo Garden. The application enables you to customize a logo from a large selection of ready-logos arranged in different categories.

In this article, I’m going to show you how to make your logo for free using Photoshop.

The goal is to show you how to make a professional, visually appealing logo that will contribute to the reinforcement of the memory 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 observations, I think that my experiences will be valuable for you to know how I make my 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 photoshop and logo-design, let’s prepare ourselves by gathering all the information needed.

If we look at the well-known websites, we can observe two categories of logos: those that are made with a special font only and those that are made with a special font and a shape in front of 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:

Here are some examples:

– A play button for Youtube
– A window next to Microsoft
– An apple instead of the word Apple

The expressivity of shapes varies from website to website. 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.


  1. Find a beautiful font to write the website’s name.
  2. Draw a shape next to it to make it more expressive.

Until now, we have no clear idea of how the combination font/shape should be: should it be a house in front of the web site’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

First of all, you need to install Adobe Photoshop.

Adobe Photoshop is the most popular graphic editor that is suitable for professional designers as well as beginners.

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

To avoid creating shapes from scratch, let’s download and install 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 one.)
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 the Fonts folder.

Install a new font on Windows.

When you open Photoshop now, you will find your newly installed Font on the font list.

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” — 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 what to choose, where, and when.

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 some colors 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 picked color heterogeneous just like colors we see in 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 at maximum the different parts of the image.

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 whiteboard. Add the shadow effect to it as follow:

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.


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

It all starts with planning and gathering information about the website, downloading the necessary tools and files, then 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 questions or suggestions, you can use the comment section below.

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

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

Subscribe toour newsletter!

Sign up here with your email address to receive updates from this blog in your inbox.