Resizing logo in Photoshop changes resolution?

Question

I keep having this issue where i create a text logo in illustrator, exporting it in a big size looks good. Then i resize it on photoshop for upload to web, and when i save the newly resized logo, the resolution is very bad. I'm not sure if i keep saving it or exporting it wrong (i save as png). What is the best way to save a text logo in both illustrator and photoshop for upload to a wordpress site?

Thanks!

Answer 1

Create a logo in Illustrator and export it to Photoshop to resize it is a wrong process. Illustrator is the right program to create logos because you can resize them as you like without losing quality. There is no need to export them to Photoshop because you can save them for the Web without leaving Illustrator. Go to File > Save for Web and if you want to save your artwork as PNG choose in the Preset box the PNG-24 format which also supports transparency.



http://design.tutsplus.com/articles/understanding-the-different-file-types-in-adobe-illustrators-save-for-web--vector-16399

Answer 2

First of all, you can use custom fonts on websites. There's no need to upload a textual logo as image unless you're using special effects like gradients on the letters.



Now, as for your problem: just export the file from Illustrator as SVG. It's a vector file format supported by every browser.

You don't even have to worry about the size, just embed it like this:

The browser will resize it while keeping the aspect ratio, and since it's a vector image, you can set arbitrary sizes without blurring or lost details.



As for your current workflow, resizing a logo in Photoshop should not visibly damage a big file, as long as the target size is exactly the one you're going to use on your website.

If you resize the logo to a width of 100 pixels, then display it 300pixels wide on the website, of course it'll look like crap.

Answer 3

Any time you resize an image, the resolution changes. If you resize it smaller you lose resolution, if bigger, it get pixilated (resolution is not gained). Create it to the size you need first and don't resize it.