My Own Website - Logo

How to create an Icon / Logo for Your Website

Today we are going to create a Logo with a mask that simulates a bevelled edge.

This is really quite a simple and straight-forward process, and only requires free Software.

You don’t need expensive Software to create a Logo. For Window’s users, Paint is fine, and for Mac, Paint Pad Lite is free and easily up to the task.

The Idea

First of all, you need to come up with an idea or concept for your Logo. Something that represents You or Your Website.

It could be a stylized, graphical representation of Your Website's Initials. That is fairly common.

The choice is yours, just make it memorable.

Step One: Theme

I used a jigsaw theme for my Logo. A common item in most households (or maybe just at Grandma's).

Nice and simple, but easily recognizable.

Here is my starting image.

As you may see, I am using Paint Pad Lite.

Step Two: Colors

The next step is to choose your colors.

They may be prevalent within your Site, or completely different. It's up to you.

I chose four colors that I used to style my Website.

Step Three: Sizing

In Step three, you need to choose a size for your Logo.

I used a commom Icon size for mine, 48 * 48 pixels.

The original image size was 202 * 202 pixels. Not for any particular reason, it just ended up that size after creating the four pieces and joining them together.

You will see below, the Logo after being reduced from 202 to 48 pixels.

I also added some rounding on the corners by deleting one pixel, and adding a dark corner in the bottom-right.

You will see why in Step Six.

Step Four: Create a 3D Mask

Now we are going to create a mask with a bevelled edge.

I am attempting to give the Logo a 3-dimension look by using shading.

As our Logo is now 48 * 48 pixels, our bevelled mask will be the same.

I have used light colors, white and light yellow, for the top and left edges. And dark colors, medium and dark gray, for the right and bottom

This suggests a light source shining down from the left.

Step Five: Mask Transparency

Step five is all about preparing our mask for the final step.

We need to make it slightly transparent as it will be placed over the Logo.

Your Image Software may call it transparency or opacity. Whatever it is, the affect is the same.

I am going to use an Opacity of 50%, but I suggest you experiment and find the best value for your situation.

You won't really know what affect it will have on your Logo until the Final Step.

So, you may have to cycle between Steps Five and Six until you are happy.

Step Six: Complete Your Logo with the Mask

We will complete Your Logo in this, the sixth and final Step.

All we have to do is simply copy our mask and place it over the Logo.

If all has gone to plan, your Logo should pop out and look fabulous.

As I mentioned previously, you may have to play with the Opacity until you are happy with the affect.

So there we are, done!

I hope you are happy with the result.

The final word

I have included a similar Logo below, except this adds lettering to the jigsaw theme.

Hopefully, it may give a little insight, into what may suit You.

If you are ready to Create Your Own Website, see our Series on that topic: My Own Website - Chapter One

Tim StiX - Dec 2020

Tim StiX is a Software Engineer with over 20 years’ experience designing, developing and maintaining Web Technologies and is the Developer and Site Administrator of www.101world.net and bok.101world.net.

Tim StiX is The Sober Bard on Vocal.