Designing a text based logo that can resize nicely to different resolutions?

Content
1

I am having trouble trying to decide how to put a text based logo together.

Basically, i have a bit of knowledge regarding graphics and graphic formats when relating to design. Like what gif and png files are best for.

I have photoshop, which i have a basic knowledge of and use for simple graphic creation. I also have illustrator which i have a very minimal knowledge of.

I have read a good few tutorials on text based logo’s using photoshop.

So far, i have been able to throw together some simple logo designs using photoshop before.

I am not an arty person, although i am creative.

What i am having trouble with at the moment, is making a scaleable text based logo.

What i basically mean by this, is the format of the website i am working on is scaled in percentages. This includes the logo which is 20% of the page width. The page is 90% of the screen size.

Now using photoshop i have made a simple logo, its dimensions are 1000x200px. So basically, it looks decent at a resolution of 1024x768+.

But the smaller the viewport, the uglier the logo becomes. So basically, if i look at the logo at a screen width of 1980px, it looks pretty good, as nice nice and smooth, but at a screen width of 800px is well… Just doesnt look right. Then on a netbook or mobile screen it just looks terrible.

What would the best solution be for this type of graphic?

Should i be reading up on vector graphics, because from my limited understanding this is what i am looking for pretty much.

Or should i rather be creating seperate images for different resolutions?

Would someone be able to share some understanding in this regard?

I would greatly appreciate it,

Thank you!

2

Remember that, even if you create a vector logo in Illustrator, you have to save it as a pixel-based image to use it on the web, which means it’s not a vector any more. There are some fancy web technologies being developed that will change this (SVG or whatever it’s called) but I consider that kind of cutting edge and out of my league.

The logo image you are describing sounds rather large. I would suggest making it much smaller to start with so that it doesn’t have to scale on different devices. For example, if it’s a decorative logo on a black background, consider making that that background black via CSS and just make the decorative bit the image. It’s hard to give more accurate advice unless we see what you are working on, though. If you look at most sites, they have one logo that isn’t affected by screen size.

3

Designing for the web has less to do with ‘art’ and is more akin to printing
as one is working with little more than coloured dots whose spacing is fixed.

Gradients are the typical kiss of death, the longer they are the worse they look when
images are reduced in size. For wide artwork run gradients top to bottom to minimise
the distortion when scaled down and vice versa. Keep them as short as you can and
avoid using at all especially for a logo.

Design your entire page layout for a 1024px screen and create a logo to fit, this will cover most PC users & scale reasonably well inside tablets/ipads.

4

I would like to point out that this will soon not necesarily be true, due to the developments in HTML5. You will be able to use a <canvas> element to draw vector images on the fly using javascript, so that the image will look good whatever the resolution. As usual with everything intresting in web design, Internet Explorer has decided not to bother with it, rendering it near enough useless for now, but its definately something to look out for when the new HTML5 standard is released. And lets keep our fingers crossed that IE will stick to the standards this time and get rid of the god awful filters they use at the moment! I’m tired of writing fixes for my beautiful designs!

5

Logos are not easily resized because when you increase size they lose their image quality so you need to create a logo in vector format because vectors are easily modify and you can large their size to any shape without loosing the image quality.