Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    How to make professional, crisp fonts in image format??

    I use Photoshop CS 2.

    I have noticed that a lot of professionally designed websites use image files for menus. Their saved image fonts display in my browsers (FF and IE) as exceptionally crisp and clear.

    When I try to create my own menus using fonts saved as .gif or .jpg they do not appear as professional. I have tried the "smooth" and "crisp" features in Photoshop and still no luck.

    How do I create navigation images using the fonts that come with Photoshop CS2 so that they are professional looking when making my menus? What tips/tricks am I missing?

  • #2
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Did you try 'none' ?
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    yes I have tried "none" as well

    I have tried a number of fonts that come with CS2.

    Arial is the one I tried the most since it is used so frequently.

    I will reproduce what I am doing:

    I simply type my text, save it as .jpg or .gif.
    After saving it I upload it.
    That's it.

    It just doesn't look as good as professional websites.

    What am I doing wrong?

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Try 'Verdana' with 12pt, 'none'. Also can you post a link to your image?
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • Users who have thanked tagnu for this post:

    Bobafart (10-26-2008)

  • #5
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    I think the .png files are usually sharper. Have you considered using PNG format?
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    832
    Thanks
    10
    Thanked 79 Times in 77 Posts
    GIFs are limited to 256 colors while PNGs provide full color. Problem with PNGs is that they are poorly supported by IE and similarly engine driven browsers without extra attention.
    ☠ ☠RON☠ ☠

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Quote Originally Posted by Major Payne View Post
    Problem with PNGs is that they are poorly supported by IE and similarly engine driven browsers without extra attention.
    I think, this notion only applies for transparent PNGs.
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • #8
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Quote Originally Posted by tagnu View Post
    I think, this notion only applies for transparent PNGs.
    Correct.

    And even then, there are some tricks around it.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by jeremywilken View Post
    Correct.

    And even then, there are some tricks around it.
    Indeed, it only applies to the alpha opacity ability of PNGs (although, apparently, IE does render PNGs just that little bit darker than the other browsers, but not enough for anyone to really care. Don't you miss Arbitrator?).

    I'm rather curious to see what he's outputted and why he considers it not "professional".

  • #10
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    832
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Just for the inquiring mind:

    * No support on old browsers (such as Internet Explorer below version 4).
    * No animation, still images only (unlike GIF). PNG compatible browsers include: Apple Safari, Mozilla Firefox, Opera, Camino, Internet Explorer 7, and many others. For the complete comparison, see Comparison of web browsers (Image format support).

    However, Internet Explorer (Windows), before version 7, has a fair share of issues, which prevent it from using PNG to its full potential.

    # 4.0 crashes on large PNG chunks.[16]
    # 4.0 does not include the functionality to view .png files[17], but there is a registry fix[18].
    # 5.0 and 5.01 has broken OBJECT support.[19]
    # 5.01 prints palette images with black (or dark gray) backgrounds under Windows 98, sometimes with radically altered colors.[20]
    # 6.0 fails to display PNG images of 4097 or 4098 bytes in size.[21][22]
    # 6.0 cannot open a PNG file that contains one or more zero-length IDAT chunks.[23]
    # 6.0 sometimes completely loses ability to display PNGs[24], there are various fixes[25]
    # 6.0 and below fails to display alpha-channel of PNG images used as CSS background.[26]
    # 6.0 and below has inconsistent/broken gamma support.[27]
    # 6.0 and below has no ICC-profile (iCCP) support.[28]
    # 6.0 and below has no color-correction support.[29]
    # 6.0 and below has progressive display of interlaced images (replicating method).[citation needed]
    # 6.0 and below has broken alpha-channel transparency support (will display the default background color instead)
    ☠ ☠RON☠ ☠

  • #11
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    If we still developed for IE 4-5.01, maybe it would be a problem. It is well known that the main problem with PNG support in IE 6 is with alpha transparency. That said, this person did not mention the need for transparent images, and they also tried a JPG which does not support transparency (ergo, that part is void).

    Still it is best when text can be left out of images, but when it must be included, then I believe that PNG is the way to go unless transparency is of concern.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #12
    New to the CF scene
    Join Date
    Nov 2008
    Location
    Chicago
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you using a proper font if it's for a smaller image? Try using sans-serif fonts and see if that's any better.

  • #13
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    If your feeling real sassy you could embed the font using sIFR or if your feeling extra extra sassy embed it with the new typeface.js

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • Users who have thanked FWDrew for this post:

    oesxyl (11-14-2008)

  • #14
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.


  •  

    Posting Permissions

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