1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

>>> WHAT Are You Marketers Doing To Get These "Hi Def" Looking Sites? <<<

Discussion in 'Graphic Design' started by BreaknBrix, Apr 29, 2014.

  1. BreaknBrix

    BreaknBrix Power Member

    Joined:
    Mar 25, 2014
    Messages:
    751
    Likes Received:
    4,189
    Location:
    NE US
    I've been building sites for almost 3 years now and this has been the most consistent, most difficult problem to overcome. It's like everyone knows this same little "trick" except me. And I can not explain in words how frustrating this has become. Because I see *newbies* making sites who know how to do this.... and after all this time I still have no clue what all you marketers are doing.

    The main problem: Every site I have ever made, once the sites are done and I compare them to other sites on the web, they always look a bit blurry and dull.

    This is not a contrast problem. It's not how I'm saving my files because I've read so many photoshop tutorials it's not even funny.

    And it doesn't really show in the pictures I use. I can get clear pictures just by starting with really clear pictures in photoshop.

    The problems start happening as soon as I start editing ANYTHING in photoshop. Like say I take 3 images and want to make a table, once I start adding boxes, shapes and text, then save the file it never comes out clear. The text is always straining on the eyes. Even if I change the fonts 50 times and save, it still looks dull. And this dull effect becomes that much more noticeable when looking at smaller fonts.

    EXAMPLE: This is a table someone else made (I grabbed it from a site someone posted in the SEO section) vs a table I made on my own.

    Here's the "HD" table first -

    [​IMG]

    As you can see, everything it very sharp and easy to read. Even the white on yellow text you can read very clearly.


    Here is a table I made -

    [​IMG]

    Some people will say "you can barely notice it". Others will immediately notice the difference. And the problem becomes VERY obvious once you compare my entire site to the entire site I grabbed that graphic from. I wish I could post both sites because you'd see how serious this problem really is.

    The text in my header, the text in my banner ad above my table, my sidebar, any graphics with text done in photoshop... the text is ALWAYS blurry.

    The text in the first image might be bigger, but even if I find smaller tables with smaller text the resolution is always sharp. The problem is NOT the bit of gray gradient I have behind the smaller text, even if I make the background completely white, the edges of the text is STILL blurry.

    It seems like 95% of web designers know how to avoid this, even newbies.... but I don't.

    What makes things worse is this demotivates me from making really fancy graphics like I use to. I use to spend a lot of time trying to make the best graphics I could, just to compensate for my blurry text problem, but then I just wind up with nice designs that are STILL BLURRY.

    This has been going on for ***3*** years now.

    My intuition tells me the problem is photoshop. Because if I copy sharp text from a website into photoshop, then save it has a jpeg it looks sharp. But if I create the text within photoshop itself, regardless of the font, size, contrast or how I save the file, the text ALWAYS comes out blurry. But then I read threads online and it seems like so many marketers use photoshop for their graphics... so it boggles my mind.

    WHAT ARE YOU MARKETERS DOING TO GET SHARP TEXT?
     
  2. royserpa

    royserpa Jr. VIP Jr. VIP Premium Member

    Joined:
    Sep 28, 2011
    Messages:
    4,640
    Likes Received:
    3,490
    Gender:
    Male
    Occupation:
    Negative Options aka Rebills!
    Location:
    Royserpa
    Home Page:
    I think "vectors" is the keyword here.

    I'm not a graphic designer, but I think vectors are really good for very sharp images.

    Wondering what other people may think. :)
     
    • Thanks Thanks x 1
  3. arstyles

    arstyles Junior Member

    Joined:
    May 11, 2012
    Messages:
    157
    Likes Received:
    109
    Occupation:
    Graphic/Website Design and Marketing Online/Offlin
    Location:
    CT, USA
    I checked both images. I think you are not saving it with proper resolution.
    After you create your image
    Save for Web
    JPEG (if saving as jpeg) .. Then play with the compression quality.

    If that won't solve the problem.
    Check if you are anti-aliasing text properly (it should be on right side of your font size)
    Play with Sharp, Smooth, Crisp etc setting.

    Hopefully it'll help.
     
    • Thanks Thanks x 1
  4. Nicheblogger

    Nicheblogger Regular Member

    Joined:
    Apr 29, 2014
    Messages:
    286
    Likes Received:
    186
    Try using adobe illustrator. You will always get crystal clear images no matter the zoom level. google [free adobe illustrator download] and it will be yours. There is a little bit of a learning curve if you aren't already familiar with it. As was previously mentioned, vectors are where its at!
     
    • Thanks Thanks x 1
  5. faithjhung

    faithjhung Jr. VIP Jr. VIP Premium Member

    Joined:
    Jun 5, 2009
    Messages:
    1,442
    Likes Received:
    911
    Location:
    New York
    Set text as sharp, not crisp.
    Its that simple.
    Start with the resolution you are looking for
     
  6. BreaknBrix

    BreaknBrix Power Member

    Joined:
    Mar 25, 2014
    Messages:
    751
    Likes Received:
    4,189
    Location:
    NE US
    Awesome folks, I appreciate it.

    I heard about that anti-aliasing option a long time ago but I could never find it in photoshop (and still can't). I even searched the help guide and it said to go to edit > preferences > general but I couldn't find anything that says "anti-aliasing". There's no option to the right of the text other than "none, bold, crisp, strong" and there's no option where the help guide says its suppose to be.

    What I wound up doing was I zoomed in to 600% and noticed the pixels around the letters were extremely blurry.

    So I started playing around with random options and nothing was working. But THEN I shut off the font style options to "none", and miraculously the fuzzy edges disappeared. The bad news is the text is way too thin now. Its clear which I like, but its too thin and frail. And everytime I turn bold back on the edges just get fuzzy again.

    I did more reading online and noticed a lot of people saying "photoshop is good for graphics, not text". So I'm gonna get either illustrator or indesign. If I can't do something as simple as bolding text, without the resolution going to crap (this is a normal arial font), then its time to ditch photoshop for the purposes of doing text.

    Thank you all for the feedback. :)
     
  7. cryptexicebone

    cryptexicebone Regular Member

    Joined:
    Sep 9, 2012
    Messages:
    409
    Likes Received:
    78
    Occupation:
    Baller
    Location:
    los angeles, ca
    just user super high res images?
     
  8. SEOnetic

    SEOnetic Senior Member

    Joined:
    May 21, 2012
    Messages:
    995
    Likes Received:
    120
    Do not BOLD the font, Use crispy font face,use Save for Web .