I have created a logo in Illustrator that I have used for printing but now need it for a website. How do I convert it so I have a high resolution image for the web?
I am not web savvy, it's the first kick at the can for me.
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.Sign up to join this community
First of all, try to be as specific as possible when asking questions. It helps those who want to help you.
Now, to export a logo you can use
file > save for web.
Here are some things to consider:
It's important that you export the logo to the right pixel-size. If it's too large, the user will have to download an unnecessarily huge file, slowing down your website and resulting in a bad experience. If it's too small, it will appear pixelated and look bad. You can adjust the pixel-size when exporting by resizing to exact pixels or percentages.
When you don't need any transparancy, you can use the jpg format. This has a very small filesize. Downside is that it has lossy compression, resulting in artifacts and a pixelated appearance when compressed too hard. Play around with the 'quality' slider to see a preview of the rendered image. Usually, a little compression doesn't hurt, and can reduce your file by a large amount.
Can handle transparency, but usually results in higher file sizes. Features both lossless and lossy compression. Same remarks as with jpg.
As suggested, this does offer the best file size to quality-ratio. Since this is a vector format, it's best used for images created in vector format (but since you're exporting from AI, that won't be a problem). Upside is a perfect quality in every resolution, since it's resolution-independent. Downsides to consider are: you need to have some knowledge of html to properly use this format in your site, and support by older browsers is not that good (See: Can I use for more info).
Hope this helps, and good luck with the website.
Edit: a bit more about compression.
A bit more about compressing your images. Compression is a great way to reduce file size, and thus download times, for your images. This is especially important for users visiting your site from a mobile device.
There are two forms of compression:
You don't lose any data, the algorithm just finds a way to package it more efficiently. Can reduce file sizes by huge amounts, especially if you exported from a design program that doesn't do a very good job at compression (yes, I'm looking at you Fireworks).
You lose some data, which may result in artifacts, such as pixelation, blurry patches, wobbly or dark edges, etc. On the other hand, when used in moderation, it can reduce file sizes drastically, and won't be visible to the naked eye at all.
There are a lot of tools out there that offer to compress your images. Some are great, some are good, some should be avoided. When compressing images, always keep a back-up of the original, just in case something goes wrong (as it will do eventually).
A great list of available tools can be found here. My personal favorite is FileOptimizer. It's not the fastest, but it has offered the best lossless compression I have ever seen, sometimes reducing files to 4% of their original size without any data loss.