As someone who has worked in the design industry for many years it’s horrible to come across site after site with awful logos and headers.
Of course as a blogger I also understand why this has happened. The budget often isn’t there to pay a professional and with all the tools available why not give it a shot yourself?
The truth is anyone can create a nice simple logo for their website. In this post I want to go through some of the thoughts, considerations and tips that I think will help people with no background in design to produce clean and professional looking logos.
Pretty much any graphics package can be used for the job including MS Paint. Layout and clarity are far more important than flashy effects.
I am a big advocate for basic text logos to start a site off with. Graphics and symbols can be added afterwards and you may gain the knowledge to do this yourself through playing around or decide to hire someone to create a complete branding when the budget has become available.
I am sure you have seen many websites proudly displaying a logo something like this:
The color is garish, the font is awful and the drop shadow is over the top. A few adjustments would seriously improve this logo.
Note: Many companies have extremely well recognized logos that are almost all text. Just think of Sony, Groupon, Google, YouTube and a never ending list of others. Studying the logos of others is a great way to learn what looks good to you and will help you understand elements that you may be able to integrate into your design.
Font And Text Layout
The first thing you want to establish is the basic font or fonts. You want something clean and readable and that works at various sizes. A great place to start is on Google Web Fonts. You can type your word in the preview and and then using the various options scroll through multiple fonts to see how your text will look.
In the below example I have selected a straight font just above medium thickness (using the options on the left) and it has shown me a preview of my text in 51 font families.
I tend to try and keep the text straight and slightly thicker for simple website logos. The great thing about Google Web Fonts is that all fonts here are available free for download and it will help you get out of the realm of your default system fonts.
From this example above I am going to start with the font ‘Nobile Bold 700’, I suggest you download multiple fonts. It is simple yet has a slight bit of character.
I would ignore your thoughts to use fonts like the wild west styles or ones that are overly cartoony even if you think they look cool. Never use fonts with snow-caps or dripping blood and such things unless it’s for a very specific use.
Installing fonts on your system: From Google Web Fonts you can click the ‘Add to collection’ button next to any font. Once you have all your font’s in your collection then you can hit the ‘Download your collection’ button on the top right and download all the font files as a zip file.
These fonts, once unzipped, are TTF fonts. Installation instructions for TTF fonts for Windows and Mac can be found here.
Once you have a few nice fonts to start with the real fun can begin. Sorting the layout of your text should be done in a program you are comfortable with (yes even Word can be used) but using a graphics editor is probably ideal.
Adobe Photoshop is the most well known graphics package and probably the best tool for the job. Of course being the great tool it is, it comes with a hefty price tag, however it does have a free 30-day trial which should be plenty of time to get a logo sorted.
For those who are looking long term it may be worth learning Gimp. Gimp is 100% free, open-source and has many powerful features. I don’t find it quite as intuitive as Photoshop but it can achieve most of the same things.
So let’s take a look at how you may start in Gimp.
Playing with the fonts and the layout of your text in Gimp is fairly straight forward and after a few minutes you should get the hang of it.
Starting with a large canvas (File>New) of around 2000×2000 pixels will give you a good space to work with various ideas. Y
You can start to create text using the Text Tool , using the settings palette to change fonts, sizing and coloring. Also you can duplicate and rearrange layers in the layers palette and move items with the move tool . The Gimp documentation is pretty decent and for any time you get stuck a Google search can also solve most issues.
This image below shows a full Gimp screen and how a typical page of messing around with the text and layout could end up looking. I have not played with any color yet, choosing to get the layout right first.
The final layout you choose will of course depend on where the logo needs to be used (header space, other uses), what background it will be going on and what looks most pleasing to your eye. Don’t be afraid to drag the family into the room either and ask their honest opinions. Tell them to be harsh.
Subtle Effects To Add A Professional Sheen
Once you have a nice layout you are happy with it’s could be beneficial to add a few subtle effects. The biggest problem with effects used on logos and images is that because they are easily available they are massively overused. The professionals know that using effects subtly is what adds the touch of class.
Groupon’s logo is a perfect example of this. It has a light gradient and a slight drop shadow on the basic text.
Here is a video looking at how you can add some subtle effects in Gimp and Photoshop. The free 30-day trial of Photoshop is available from Adobe.com.
And here we are, I doubt Steve will be replacing his header with this but it shows that a few very subtle effects can add just a nice touch to a basic text layout.
Hopefully by this stage you are reasonably happy with the logo you have produced. It may not be a masterpiece but it should be a million miles from an unguided attempt.
Hopefully by considering opening your world to other fonts and learning the art of subtlety you can see how small changes make a huge difference.
Of course it would be nice for the logo to grow and become more personal. You may want to enhance by adding small symbols like a star at the end of the text or a little icon before the logo.
This could be something you commission or learn to do yourself. There are a huge amount of tutorials available online. It may be you just add a small image like a coin or a little drawing that you do yourself and scan into the computer to make the image personal to you.
Integrating the logo into a header could be just a case of you adding the logo to a white background. You may want to go more complex and add or integrate with photos or other images.
Just bear in mind the lessons of this post and keep things subtle. Avoid the logo clashing and keep it in areas where it can be well read, ideally on areas of flat color.
You won’t always get it right the first time, I sure don’t! Logos and branding are often a work in progress that take time, testing and adjustments.
It took me years to pick up skills that allow me to do these kinds of things fairly quickly but I am confident that most website owners can produce something that will work great.
I want every site on the web to display a good basic logo, at very least, and this can be achieved. So, go create and have fun and don’t hesitate to ask questions, show me your logo and ask for feedback or anything else in the comments below.
This post was written by Forest Parks. If you are interested in having a design professional improve or produce your logo or if you need work on any area of your site, then Forest is available and can be contacted via email at firstname.lastname@example.org. Examples of his work can also be seen here.
- The Top 10 Mistakes of Online Store Website Design
- A Behind The Scenes Look At The Redesign Of MyWifeQuitHerJob.com
- 4 Skills Every Well Rounded Internet Entrepreneur Should Have
- Prevent Your Online Store From Becoming a Money Pit By Learning Some Basic Skills
- With Just These 3 Skills, I’ve Created 3 Six Figure Online Businesses