Search code examples
responsive-designwebimage-resizinggraphical-logo

How to make logo Vectorized for my site?

I have created my own logo with Photoshop... But, If I make smaller zoom in or zoom out the logo screen gives scattered effect & also, It's give stretch effect. . . How, can i maintain HD with all size or How to make vectored logo for my site . . .

My website is : iHart Developers Group

enter image description here

Solution

  • You have three options:

    1. Create a vector image, for example, in Adobe Illustrator. You'll need an Illustrator tutorial, which is beyond the scope of SO.

    2. Create a set of images for different screen resolutions in Photoshop, e.g. logo_mdpi.png, logo_hdpi.png. etc. Display different images for different screen sizes/resolutions by using media queries, or JS, or deferred binding, or some other technique.

    3. Create a large sharp image and scale it down when necessary.

    The choice depends on your specific use cases: there are simply too many variables to definitively recommend one solution over the other.