General Question

Link's avatar

How Can I Create a Decent Website Logo?

Asked by Link (327points) October 14th, 2010

I’ve been taking a look at a lot of eye pleasing website logos for the past few weeks. I’m trying to create a website logo using (not gonna buy Photoshop), but the lines of my logo keep coming out jagged/pixelated. I’m using a 96 pixels/inch resolution, but things are not looking good. Is there a special way to create logos? A certain format to save them under (png, jpeg, gif, etc)?

I guess what I’m really asking is how the heck do Web designers get there logos to look so darn pretty?

Observing members: 0 Composing members: 0

15 Answers

mrlaconic's avatar

If you feel comfortable drawing it yourself you can use… it’s basically a web version of photoshop thats free and has lots of great brushes and filters etc.

jballou's avatar

The tool you use to create the logo isn’t nearly as important as the idea and vision behind it. Your question is akin to asking a furniture designer what brand of hammer they used to build all their beautiful chairs. :-)

That being said, I typically design my logos with a pencil and paper, then finalize the artwork in Illustrator, which is a vector-based program. What this means is that it creates lines and shapes using coordinates and angles, etc. rather than by recording the colors of different pixels, like a photoshop. That’s called raster.

Using vector-based graphics will usually result in work that can be scaled up or down and it will retain crispness and clarity, etc (depending on the design itself, of course).

Google “inkscape” I’ve never used it, but it’s a free vector based program, and I hear it’s pretty decent. I’d start there, but worry first about the logo you want to create and the tool you use to create it won’t be nearly as important.

YARNLADY's avatar

Personally, I would hire a graphic artist.

Link's avatar

Thanks for all your help people. I know about sumopaint, and I agree that it’s pretty awesome. However, I still feel that what’s holding me back is some piece of information I don’t know, or I’m not thinking of.

@jballou: Can you use a vector file as a logo? I never heard of anyone doing that. Would you mind explaining a bit further? For example what format do you export to?

Carly's avatar

I would think a vector image would be most appropriate for a logo. If you’re not interested in getting photoshop, why not Illustrator?

camertron's avatar

@Carly and @jballou are correct: a vector illustration is better in this case. Vector based programs allow you to resize the art you make to any size – really infinitesimally small or larger than the state of Texas. It’s really handy to be able to do that in case you want to put your logo on the web or have it be visible from space. The point I’m getting at is that vector art is just more flexible, and all professional graphic designers use it.

When it comes to putting your vector art on the web or using it in print, vector designs can be easily rasterized (turned into one-size-only pixel data) and exported in any of the popular formats, including .jpg, .gif, .png, and .tif.

You mentioned that you felt as though you didn’t have a key piece of information and I think you’re right. Firstly, you mentioned your resolution was 96 pixels per inch. The standard resolution for the web is 72 pixels per inch, and the standard for print media is 300 or higher. When working in a vector-based program, you don’t have to worry about resolution at all. In your case, working with a raster program, you’ll probably want to set your resolution to at least 300 pixels per inch (assuming you’ll want to print it sometime).

The second key piece of information you might need to know is related to an effect called anti-aliasing, which smooths out curves and gets rid of those jaggies you mentioned. I’m not sure about Paint.NET, but most raster and vector programs have anti-aliasing built in and should do it for you automatically.

Finally, there are a few basic things I’ve identified that make web designer logos look so good. 1) They (tastefully) use gradients. 2) They keep it simple. 3) They choose appropriate colors, three at the most. 4) They usually use rounded corners 5) They leverage their site’s shtick (if it’s a site about peanut butter, the logo will have a peanut in it)

anartist's avatar

At least try gimp—it is free too and a lot of designers use it.
You need a vector image, not a raster image, for your master logo.

choppersangel's avatar

This is a good question and some great answers above, my technical skills are not as great as @jballou nor @camertron but I support @anartist‘s comment about Gimp. It is an Open Source programme and free to use indefinitely, virtually a replacement for Photoshop. It is available to download here . I am learning to use Inkscape, which is also free to download here. As mentioned above, it is a very good idea to design or sketch out the basics of your logo on paper. However, you can’t beat experimenting to find out how things work, so if you have the time, enjoy playing with this information!

anartist's avatar

Vector images can be used in flash animated logos, as well as the resizing feature. What you will finally have on your website will be rasterized one way or another, but the vector image allows you to keep a master copy to return to develop variations with no loss of quality.

Response moderated (Spam)
Link's avatar

Inkscape! Inkscape! Inkscape!

Thanks a lot dudes. These are the best answers I’ve received on Fluther. @camertron: you were a big help, man. It’s amazing how a few paragraphs can enhance a person’s understanding and perspective in a big way.

I don’t like Gimp at all; it’s not intuitive, and crashed on me one too many times. A lot of people compare it to Photoshop but I just don’t see the comparison at all. Inkscape, a vector based application, is free, awesome (although you have to play with it for a bit to get used to it), and does exactly what you guys said vector applications do.

I can’t say enough about how helpful this post was. Thanks again, dudes.

camertron's avatar

No problem @Link! When you’ve finished your logo would you mind posting a link to it in this thread? I’m sure we’d all like to see the fruits of your labor.

Link's avatar

Haha! Damn, way to put the pressure on me, man. Okay, here is a link to my site: I’m more happy with the logo than the look or function of the site, but feel free to critique both. You’d be actually doing me a great favor. Again.

camertron's avatar

Wow @Link! You’ve designed quite a nice logo. I like the colors and the simplicity of it – quite web 2.0. I would change your logotype (the “learnwriter” next to the logo) because it’s a little bland. I might suggest putting both words on the same line and maybe using an underline or something more spicy. The layout is ok, but the font size for your titles is a little large – maybe shrink it a little? The tabs at the top of the page flicker like crazy when I hover over them with my mouse in Firefox 3.6.12. Other than that, you’ve designed quite an attractive page. Keep up the good work!

Link's avatar

Hey, thanks a lot for all the helpful feedback, man. I will take your advice and shrink the title sizes a bit. For the most part I want to keep things very simple and very obvious. I don’t want any of my users to ever feel confused or frustrated by some ambiguous design element. I really need to redesign/fix the main navigation. I have no clue why it flickered the way you said. Not good at all. Thanks again for all your help.

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther