SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot blackberryfan's Avatar
    Join Date
    Nov 2010
    Location
    middleOnowhere, South Africa.
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Designing a text based logo that can resize nicely to different resolutions?

    I am having trouble trying to decide how to put a text based logo together.

    Basically, i have a bit of knowledge regarding graphics and graphic formats when relating to design. Like what gif and png files are best for.

    I have photoshop, which i have a basic knowledge of and use for simple graphic creation. I also have illustrator which i have a very minimal knowledge of.

    I have read a good few tutorials on text based logo's using photoshop.

    So far, i have been able to throw together some simple logo designs using photoshop before.

    I am not an arty person, although i am creative.

    What i am having trouble with at the moment, is making a scaleable text based logo.

    What i basically mean by this, is the format of the website i am working on is scaled in percentages. This includes the logo which is 20% of the page width. The page is 90% of the screen size.

    Now using photoshop i have made a simple logo, its dimensions are 1000x200px. So basically, it looks decent at a resolution of 1024x768+.

    But the smaller the viewport, the uglier the logo becomes. So basically, if i look at the logo at a screen width of 1980px, it looks pretty good, as nice nice and smooth, but at a screen width of 800px is well... Just doesnt look right. Then on a netbook or mobile screen it just looks terrible.

    What would the best solution be for this type of graphic?

    Should i be reading up on vector graphics, because from my limited understanding this is what i am looking for pretty much.

    Or should i rather be creating seperate images for different resolutions?

    Would someone be able to share some understanding in this regard?

    I would greatly appreciate it,

    Thank you!
    This is what we're waiting for...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by blackberryfan View Post
    Should i be reading up on vector graphics, because from my limited understanding this is what i am looking for pretty much.
    Remember that, even if you create a vector logo in Illustrator, you have to save it as a pixel-based image to use it on the web, which means it's not a vector any more. There are some fancy web technologies being developed that will change this (SVG or whatever it's called) but I consider that kind of cutting edge and out of my league.

    The logo image you are describing sounds rather large. I would suggest making it much smaller to start with so that it doesn't have to scale on different devices. For example, if it's a decorative logo on a black background, consider making that that background black via CSS and just make the decorative bit the image. It's hard to give more accurate advice unless we see what you are working on, though. If you look at most sites, they have one logo that isn't affected by screen size.

  3. #3
    SitePoint Zealot Sogo7's Avatar
    Join Date
    May 2011
    Posts
    129
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Designing for the web has less to do with 'art' and is more akin to printing
    as one is working with little more than coloured dots whose spacing is fixed.

    Gradients are the typical kiss of death, the longer they are the worse they look when
    images are reduced in size. For wide artwork run gradients top to bottom to minimise
    the distortion when scaled down and vice versa. Keep them as short as you can and
    avoid using at all especially for a logo.

    Design your entire page layout for a 1024px screen and create a logo to fit, this will cover most PC users & scale reasonably well inside tablets/ipads.
    Lovelogic.net Personal Projects Pit - Spammers welcome

  4. #4
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Remember that, even if you create a vector logo in Illustrator, you have to save it as a pixel-based image to use it on the web, which means it's not a vector any more.
    I would like to point out that this will soon not necesarily be true, due to the developments in HTML5. You will be able to use a <canvas> element to draw vector images on the fly using javascript, so that the image will look good whatever the resolution. As usual with everything intresting in web design, Internet Explorer has decided not to bother with it, rendering it near enough useless for now, but its definately something to look out for when the new HTML5 standard is released. And lets keep our fingers crossed that IE will stick to the standards this time and get rid of the god awful filters they use at the moment! I'm tired of writing fixes for my beautiful designs!

  5. #5
    SitePoint Member kingston123's Avatar
    Join Date
    Mar 2013
    Location
    New York, USA
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Logos are not easily resized because when you increase size they lose their image quality so you need to create a logo in vector format because vectors are easily modify and you can large their size to any shape without loosing the image quality.
    Last edited by EastCoast; Mar 15, 2013 at 06:16.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •