Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Design and Graphics

Reply
 
Thread Tools Search this Thread Display Modes
Old Apr 1, 2013, 12:18 PM   #1
HarryPot
macrumors 6502a
 
Join Date: Sep 2009
How to achieve crisp text for web use?

I'm having trouble getting images with text designed in Photoshop to look crisp in a website. Text always come out looking blurry.

In searching Google it seems Photoshop is the worst software for designing for the web. Yet some software must be good.

When visiting www.apple.com I see text in the form of a photo and the text looks very crisp and clear.

I would appreciate any help.
HarryPot is offline   0 Reply With Quote
Old Apr 1, 2013, 01:05 PM   #2
Renzatic
macrumors 604
 
Renzatic's Avatar
 
Join Date: Aug 2011
Location: The Amazing Maze of Maize (Corn Labyrinth)
Most text is rendered by your browser. You shouldn't have any trouble at all getting crisp text, unless saving your pages out as collection of bitmaps with the links buried behind them.

Edit: Though clicking on the link to Apple above, I see that the iPhone 5 header is a bitmap. So I guess the question is, how are you producing your text? Are you using the text tool, or are you cutting and pasting letters off a bitmap template?

It also depends on the size of the image your using. If it's a large image and you're scaling it down, or vice versa, that could cause some blurriness.

Last edited by Renzatic; Apr 1, 2013 at 01:15 PM.
Renzatic is offline   0 Reply With Quote
Old Apr 1, 2013, 01:23 PM   #3
HarryPot
Thread Starter
macrumors 6502a
 
Join Date: Sep 2009
Quote:
Originally Posted by Renzatic View Post
Edit: Though clicking on the link to Apple above, I see that the iPhone 5 header is a bitmap. So I guess the question is, how are you producing your text? Are you using the text tool, or are you cutting and pasting letters off a bitmap template?

It also depends on the size of the image your using. If it's a large image and you're scaling it down, or vice versa, that could cause some blurriness.
Thanks for the answer.

What exactly is a bitmap?

I'm using Photoshop. Basically I need to create a banner to use in a website. It is a 980x300px in size, with one image at the side and some text at the right. I could do this with CSS and achieve much crisper text, but since I'm using a JavaScript for an animation, it would require much more time to do it than just using Photoshop to create the whole image with text.

I have been able to get better results by starting with a much bigger document size (2940x900px) and then flattening the image and reducing it's size to 980x300px. Still, I haven't been able to achieve something like the one of Apple.
HarryPot is offline   0 Reply With Quote
Old Apr 1, 2013, 01:43 PM   #4
blanka
macrumors 65816
 
Join Date: Jul 2012
The secret to get vector graphics (logo's) and text perfect is to render them first at say 4x the amount of pixels. Then downscale in 2 steps with BILINEAR downsampling. DONT USE the default bicubic, it is horrible for vector/text.
Save as PNG or GIF, never JPEG (unless you have the text on top of photo's).
blanka is offline   1 Reply With Quote
Old Apr 1, 2013, 01:46 PM   #5
HarryPot
Thread Starter
macrumors 6502a
 
Join Date: Sep 2009
Quote:
Originally Posted by blanka View Post
The secret to get vector graphics (logo's) and text perfect is to render them first at say 4x the amount of pixels. Then downscale in 2 steps with BILINEAR downsampling. DONT USE the default bicubic, it is horrible for vector/text.
Save as PNG or GIF, never JPEG (unless you have the text on top of photo's).
When you say downscale you mean just changing the Image Size?
HarryPot is offline   0 Reply With Quote
Old Apr 1, 2013, 02:11 PM   #6
Renzatic
macrumors 604
 
Renzatic's Avatar
 
Join Date: Aug 2011
Location: The Amazing Maze of Maize (Corn Labyrinth)
Quote:
Originally Posted by HarryPot View Post
What exactly is a bitmap?

I'm using Photoshop. Basically I need to create a banner to use in a website. It is a 980x300px in size, with one image at the side and some text at the right. I could do this with CSS and achieve much crisper text, but since I'm using a JavaScript for an animation, it would require much more time to do it than just using Photoshop to create the whole image with text.

I have been able to get better results by starting with a much bigger document size (2940x900px) and then flattening the image and reducing it's size to 980x300px. Still, I haven't been able to achieve something like the one of Apple.
Basically a fancy word for an image. They're resolution dependent. You can't scale them up or down without losing some definition and/or detail in the process.

This is opposed to a vector, which is what the text tool produces. They're resolution independent, since they're not based around individual pixels, but rather coordinates that are being drawn by your CPU. You can take an itty bitty 2px "A" from the text tool and use the transform tool to scale it up to 300px, and still have a perfectly crisp "A".

That's why I asked if you're using a template for your letters. If your taking a bunch of bitmap letters, and scaling them around at random, you're losing definition along the edges, which could make them look blurry on the webpage. This is especially true if you're scaling up.

As for your banner, it never hurts to design it a little larger than what you need. Yeah, this sounds like it flies in the face of what I just said above, but browsers can scale images down nice and smoothly. Like look at the MacRumors logo above.

...well hell. It's April Fools, and they've messed it up. Figures. But the text still looks alright, so I can still use it as an example.

If you drag the image off onto your desktop, you'll see that the image is actually a fair bit larger than what it is on the webpage. Probably about 50% larger at a guess. That's because bitmaps scale down smoothly so long as they're aspect correct.

So what I'd suggest you do is create your image at 1960x600 (pretty much like what you did, but smaller), but don't reduce the size of your image when you're done. Set the scale on your webpage instead. That should keep your text looking nice and crisp (this will also make it look nice on retina displays).

....and of course experiment. Like the Apple guys used a 1:1 image for their website. That could be due to the type of text antialiasing they're using. Since I'm on a Windows PC, I couldn't do a perfect match with the font (Helvetica vs. SegoeUI semilight), but this shot should give you an idea of what I mean...

Thumb resize.

You can control text antialiasing from the little bar at the top, next to the little aa icon. I'd suggest playing around with that, too.
Renzatic is offline   0 Reply With Quote
Old Apr 1, 2013, 05:09 PM   #7
HarryPot
Thread Starter
macrumors 6502a
 
Join Date: Sep 2009
Quote:
Originally Posted by Renzatic View Post

SNIP

As for your banner, it never hurts to design it a little larger than what you need. Yeah, this sounds like it flies in the face of what I just said above, but browsers can scale images down nice and smoothly. Like look at the MacRumors logo above.
Thanks a lot! I'm going to try the recommendations you gave.


Quote:
...well hell. It's April Fools, and they've messed it up. Figures. But the text still looks alright, so I can still use it as an example.
HarryPot is offline   0 Reply With Quote
Old Apr 3, 2013, 02:10 PM   #8
blanka
macrumors 65816
 
Join Date: Jul 2012
Quote:
Originally Posted by Renzatic View Post
Set the scale on your webpage instead. That should keep your text looking nice and crisp (this will also make it look nice on retina displays).
But that scales bicubic as well, so not the best possible sharpness. Making a perfect 1:1 image with bilinear downsample is still the best for those splitting hairs. And of course, a double size one that is loaded with CSS media queries if the pixel-density is more than 1.25 or so.

----------

Quote:
Originally Posted by Renzatic View Post
You can control text antialiasing from the little bar at the top, next to the little aa icon. I'd suggest playing around with that, too.
Still downsample manual 2 fold at least after converting to pixels. None of the options is perfect.
blanka is offline   0 Reply With Quote
Old Apr 4, 2013, 10:18 PM   #9
smithydan
macrumors member
 
Join Date: Mar 2013
Are you exporting the jpegs at maximum quality?

This increases quality but also load time for an image, depending on what it is exactly.

Do you have a before and after, whether screen shot or image.
smithydan is offline   0 Reply With Quote
Old Apr 5, 2013, 04:35 PM   #10
aarond12
macrumors 6502a
 
aarond12's Avatar
 
Join Date: May 2002
Location: Dallas, TX USA
If you want sharp text, NEVER use JPEG. Use PNG or, if coding for older versions of IE, GIF appropriately color-reduced.

Save some graphics from Apple's site and compare them against yours. Zoom in. See if you can tell the differences. If you're using JPEG (even at the highest compression setting), you WILL have artifacts around text and high-contrast parts of the image.
__________________
Voted "Most likely to start his own cult" by my high school class.
aarond12 is offline   3 Reply With Quote
Old Apr 8, 2013, 03:02 PM   #11
smithydan
macrumors member
 
Join Date: Mar 2013
SVG is another alternative. Not very popular but always gives clean graphics zoomed in and out and its size it constant.

Will need illustrator to create text and export.
smithydan is offline   0 Reply With Quote
Old Apr 8, 2013, 06:18 PM   #12
jtara
macrumors 65816
 
Join Date: Mar 2009
Putting text in a bitmap banner is a terrible idea. It will bloat the size of the bitmap and give you nasty artifacts on JPEG unless you use a very high quality setting. And the text in the bitmap has reduced serchability. (Though Google and others may now be able to read text embedded in graphics in some cases.)

Why not serve text as text?
jtara is offline   0 Reply With Quote
Old Apr 9, 2013, 10:17 AM   #13
chirpie
macrumors 6502a
 
Join Date: Jul 2010
Quote:
Originally Posted by jtara View Post
Putting text in a bitmap banner is a terrible idea. It will bloat the size of the bitmap and give you nasty artifacts on JPEG unless you use a very high quality setting. And the text in the bitmap has reduced serchability. (Though Google and others may now be able to read text embedded in graphics in some cases.)

Why not serve text as text?
Sometimes you want a special font and you want it to work on older browsers. (I personally have given them up in favor of all things Google fonts. It's just too freeing not to. ^_^)

Besides, so long as it's just text, you can save it as a .png file and it'll look great AND the file size will almost always be smaller than a jpg. This is a circumstance where you shouldn't use anything but a .png

I agree though, the searchability goes down, but so long as you fill out the alt tag properly, you won't be too bad off.

PS - OP - Someone else mentioned it, but don't forget to check your anti-aliasing methods for live type in Photoshop as well. Unless your fonts are REALLY small, you should always have it turned on. See attachment for the location if you aren't familiar with it.
Attached Thumbnails
Click image for larger version

Name:	Screen Shot 2013-04-09 at 10.15.42 AM.png
Views:	48
Size:	31.0 KB
ID:	407056  

Last edited by chirpie; Apr 9, 2013 at 10:23 AM.
chirpie is offline   1 Reply With Quote
Old Apr 9, 2013, 01:39 PM   #14
smithydan
macrumors member
 
Join Date: Mar 2013
Totally agreeing with chirpie and in addition text are very fast loading and crisp.

If we keep accommodating them(old browsers), users never will come forward. If saves you time not worrying about backwards compatibility.

Last edited by smithydan; Apr 10, 2013 at 09:03 AM.
smithydan is offline   0 Reply With Quote
Old Apr 9, 2013, 02:09 PM   #15
HarryPot
Thread Starter
macrumors 6502a
 
Join Date: Sep 2009
Wow, thanks a lot for all the replies.

I've been able to improve the sharpness of the text quite a lot by using PNG and making a slightly larger image, then flattening the image and then downsampling it with Photoshop to the desired size.

As for why use text in a banner and not do it with HTML and CSS. It is because I am using a javascript slider (NivoSlider), and I haven't been able to achieve a correctly organised banner with just using CSS.
HarryPot is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Design and Graphics

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 07:32 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC