Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Other › Why is my website logo blurry?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 25, 2015 at 11:16 am #194191
    RawadM
    Participant

    I have the Macbook Pro Retina Display,I export the file as a png in illustrator and save it as a png with 72ppi , don’t understand why my logo is so blurry. It doesn’t look clear to me, what am I doing wrong? Is it something to do with how I’m saving It?

    Visit my site and you will see on the top left that the logo is blurry and not a high quality resolution. Is this because I have the Macbook Pro Retina Display?

    http://rawadmerhi.com/

    January 25, 2015 at 11:27 am #194193
    Senff
    Participant

    It’s because it’s a pretty small image (169×39) and on your retina screen it’s actually using twice the (physical) pixels to display it (338×78), so it will just be resized — scaled UP, in this case.

    You should use a much larger image in the first place, use that as a background image for the navbar-header, and set it to size 100% 100% so that it will scale DOWN, which will give you much better quality.

    January 25, 2015 at 11:28 am #194195
    Alen
    Participant

    This might help

    Designer’s guide to DPI

    Try using SVG.
    http://vimeo.com/99828116

    January 25, 2015 at 12:20 pm #194199
    RawadM
    Participant

    Thank you guys. Both your advice were great. Everything is working fine now :)

    January 26, 2015 at 11:22 am #194263
    RawadM
    Participant

    Alen would Icons be the same solution? Because my tab icon is blurry. I’m trying to create a favicon.

    January 26, 2015 at 12:31 pm #194264
    Senff
    Participant

    Your icon is only 16×16. You should use a larger one. Try 64×64.

    January 26, 2015 at 1:02 pm #194267
    RawadM
    Participant

    Senff that’s what I did man, same result.

    January 26, 2015 at 1:20 pm #194271
    Senff
    Participant

    @RawadM that’s not what I’m seeing, “man”: http://rawadmerhi.com/assets/images/favicon.ico

    January 26, 2015 at 1:26 pm #194274
    RawadM
    Participant

    @senff The reason your not seeing it is because I haven’t updated It on the server, just locally.

    January 26, 2015 at 1:43 pm #194275
    Senff
    Participant

    Well, my apologies, but it’s a little difficult for us to diagnose problems (and help solving them) when you don’t update the code on the server (and only locally). That way we can’t really see what the issue could be.

    January 26, 2015 at 5:57 pm #194292
    RawadM
    Participant

    I came up with a solution that I should of figured out awhile ago.I exported the image as a png, then went to favicon to convert it to a ico file which caused the quality to be blurry. All I had to do is just export the image as a png file and link it.

    January 26, 2015 at 6:26 pm #194293
    Shikkediel
    Participant

    Logo looks good to me but then again I am using a regular desktop.
    Isn’t 6MB for the header image a bit over the top though?

    January 26, 2015 at 6:31 pm #194294
    RawadM
    Participant

    Yeah, I will fix that soon.

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘Other’ is closed to new topics and replies.