|
|
|
Thursday, February 18th, 2010
How to make a simple website logoBy Tyler King
One thing that I'd like to point out is that logos only have the meaning you give them. No matter what kind of logo you design, it's going to look kind of silly by itself, but no matter how good or bad it is, people who visit your site and see the logo will generally just accept it as a part of your brand. It can be serif, sans-serif, green, blue or yellow. Whatever you make will seem natural to the user.
There will be four steps:
Disclaimer: Similar to my post about using gradients, I'm just highlighting some tricks you can use. I'm not suggesting you follow these directions exactly.
Ok, let's get started...
Step 1: Pick your font
Your logo needs a font that is distinctive, but very readable. Try to pick something that looks fairly standard but has a few unique characteristics that make it stand out a little. Two sites that I use to find free fonts (because they're the first two Google results) are http://www.1001freefonts.com/ and http://www.urbanfonts.com/.
For this example, I'll pick the first font that's currently featured on urbanfonts.com which is called "Mank Sans". To use a font, you'll need to install it on your computer (in windows, download the file, drag it from the zip file to your desktop, and then drag it into the C:\WINDOWS\Fonts folder). After installing it, the font should show up with all your other fonts in programs like Word and Fireworks (after restarting the program).
Ok, so here's what the font looks like plain:
Notice that it's very simple and plain, but it's clearly not one of the fonts you see every day (Arial, Times New Roman, etc).
Step 2: Pick your color
I'm a big fan of blueish green, so I'll go with that. You can pick whatever color you want. I'm also going to have the text fade from light green to dark green like I discussed in my post about gradients.
So here's what I have now:
Step 3: Draw a random shape
If you are an experienced designer, there are a lot of cool things you can do with your logo. If you're new to this, you can draw just about any random shape you want and put it next to the text. Like I said, people accept whatever you show them, so just because you know it's bs, that doesn't mean anyone else will.
I decided to draw a random shape with two different sections and I used the same gradient that I used with the text. Here's what it looks like:
See? That shape is meaningless. It's stupid. But if someone that didn't know any better went to my website, they wouldn't think about it like that. They aren't trying to challenge the site's design, so they don't think about the fact that I used a stupid meaningless shape.
Step 4: Add a reflection
This is a completely overused trick, but it's an effective way to make something look a little bit more flashy. So how do you add a reflection to the logo? It's simple. First, copy the entire image, paste it right below the current one, and flip the lower one upside down.
As you can see, I removed the "y" and the "g" from the lower half because those letters mess things up by going lower than the rest of the letters. There's not a great way to deal with this, so I just skip those letters entirely.
Now you just need to make the lower half of the text look like it's fading out. Put a gradient over the flipped version of the logo. Both sides of the gradient should be white, but you can change the transparency so that the top of the gradient is lighter than the bottom. Also, make sure the top part of the logo is on a layer above the lower one so that it isn't covered by this gradient. Here's what it looks like:
Now I'm just going to add some flair to bring things together. I'll scale the reflection vertically so it's not quite as tall as the main text, and I'll add a subtle grey fade (made with an elliptical gradient) behind the main text. This highlights the reflecting line making it look more believable.
That's all there is to it. It isn't the greatest logo ever, but it gets the job done and it only took me about 10 minutes to make. If you're designing a site, give these tricks a try, and let me know how it turns out.
Special Bonus Section
We're in the process of redesigning LessAnnoyingSoftware.com (and this blog). We haven't settled on anything final, but here's the logo we're thinking about using. I'd love to hear what you think.
blog comments powered by Disqus |
Are you new here?
You might be interested in reading these posts:
Or you can browse by topic:
About this blog
This blog helps small businesses find and use easy, effective software. Most technology is meant
either for individual consumers, or huge corporations. We'll help you find the tools that are
powerful enough to help run your business, but simple enough that you can start using them by
yourself.
This blog is written by the co-founders of Less Annoying Software. We build an easy customer management tool that helps small businesses organize customer information and track leads. If you have any feedback about this blog, please feel free to contact us.
Search the blog
Archives
|
