2

I'm launching a company and my logo looks really pixelated and low-quality compared to some others. For example, http://talentegg.ca/ has a really crisp logo, how can I get mine like this?

Mine, which is better? Both of which can be improved though

  1. 1

  2. 2

  3. Illustrator version - scaled

  4. saved for web version - web

Please help!! I have Adobe Photoshop CS6

Improve this question
11
  • sometimes i combine the logo with the text - by mask -
    – user51211
    Commented Sep 20, 2015 at 11:50
  • Cheers, @GM3 - What do you mean by that?
    – Apane101
    Commented Sep 20, 2015 at 11:51
  • 1
    That's what I would do, yes. The little vortex icon should be relatively easy to draw as a vector shape in Illustrator, and the text is of course just text.
    – Janus Bahs Jacquet
    Commented Sep 20, 2015 at 12:04
  • 1
    Just use Illustrator’s Save for web feature, which is fairly similar to Photoshop’s—no reason to use Photoshop at all here. And to get the logo in a flexible format that you can use in Word documents and such things, just Save as a PDF file. (Use the Artboard tool to crop the document to just the logo before doing both, of course.)
    – Janus Bahs Jacquet
    Commented Sep 20, 2015 at 16:46
  • 1
    It is often better to leave the resizing to the browser—they do a better job of matching subpixel hinting geared at the actual OS and rendering on the viewer’s machine than a one-time rendering based solely on your machine. In other words, do like TalentEgg have done and export a much larger version of your logo, and then specify in the CSS of your page what size it should be. TalentEgg’s logo is actually 500 px wide, even though on the page it’s scaled to 128 px in width.
    – Janus Bahs Jacquet
    Commented Sep 20, 2015 at 17:27

3 Answers 3

Reset to default
1

http://talentegg.ca/images/logo.png -> ( Logo image for the example link have 500*133 px size in actual but in header it is of only 128px width. )

As you can see in this example they have used big size image and give custom width using CSS. You can use you Illustrator file.. make it of approx 600px width while saving as png file. Then there is no need to use Photoshop. Finally when you add to website make it of width 200px or 100px as your need. Hope you got my point and is helpful to you.

Improve this answer
0

Did you have your original logo in multiple formats including .eps or .ai? For maximum crispiness on the web, you could export from those formats to an .svg format which is a vector format for the web medium.

The anti-aliasing shows more on your logo than on Talentegg.ca, probably simply because it uses black which contrasts more on white.

On another note, if I had designed your logo, I would be pleased to supply you with an appropriate format so I would just contact the original graphic designer if I were you. Retracing the logo yourself is just not a good idea result-wise and ethics-wise.

Improve this answer
2
  • Thanks @Emilie, I made the original but in photoshop and lost the file :(. SVG looks much better, however the font changes. Is it possible to keep the same font and save as .svg?
    – Apane101
    Commented Sep 20, 2015 at 17:08
  • 1
    Select your font and "Create Outlines" to turn it into shapes, you should be good after that!
    – curious ♦
    Commented Sep 20, 2015 at 17:19
0

Notice that the image is larger http://talentegg.ca/images/logo.png than it appears on screen. That's the trick. Add a large image and then scale it down in css. Also once you export your large png for web you can compress it even further using https://tinypng.com/.

I used that on the logos on my site http://galnova.com

I hope this helps.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.