How to create an Icon / Logo for Your Website
Create a Logo with a bevelled edge 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 Websites 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 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 final Logo size 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: Chapter One | |||||||||||||||||||||||
Originally Published on Vocal Media This Article was originally published by Tim Stix on vocal.media. | |||||||||||||||||||||||
| |||||||||||||||||||||||
The BoK ... brought to you by 1.01 World Net
The BoK is a Book, a Body of Knowledge,
a collection of Articles, a Knowledge Base
of interesting and useful Information.
Processing - please wait...
Select Theme | |
Blackout | |
Blueprint | |
Negative |
Information: | |
App Id: | bok.101World.Net |
Desc: | World Net BoK |
Version: | 1.4.1 |
Theme: | Blueprint |
Window: | |
Aspect: |
Home |
Articles |
About Us |
Privacy |