RetouchPRO

Go Back   RetouchPRO > Technique > Image Help
Register Blogs FAQ Site Nav Search Today's Posts Mark Forums Read


Image Help Got a problem image? Don't know where to begin? Upload images and ask our users what they think or if they can help

Making/Sizing graphics for web

Reply
 
Thread Tools
  #1  
Old 01-17-2005, 04:35 PM
cedwar's Avatar
cedwar cedwar is offline
Member
 
Join Date: Mar 2004
Location: Liverpool, NY
Posts: 65
Making/Sizing graphics for web

Hi all!

Im trying to create in PS CS a graphic that is basically made up of text, and insert it into a website. For some reason, when I try to save it for the web, and then insert it into a web page using Adobe golive, the "logo" looks blurry. Can anyone tell me how to resize for the web, so it looks clear but works for the website (meaning, its small enough to load up quickly)

Thanks...

Cedwar
Reply With Quote top
  #2  
Old 01-17-2005, 05:38 PM
DannyRaphael's Avatar
DannyRaphael DannyRaphael is offline
Moderator
 
Join Date: Mar 2002
Location: Near Seattle, Washington, USA
Posts: 6,300
Quote:
Originally Posted by cedwar
Hi all!

Im trying to create in PS CS a graphic that is basically made up of text, and insert it into a website. For some reason, when I try to save it for the web, and then insert it into a web page using Adobe golive, the "logo" looks blurry. Can anyone tell me how to resize for the web, so it looks clear but works for the website (meaning, its small enough to load up quickly)

Thanks...

Cedwar
Qualifier: I don't do web work, so take this with a grain of salt.

FYI: File > Save for Web outputs files in 72 ppi format, regardless of the ppi of the original image. It also strips off EXIF info to make the resulting file even smaller.

You could try using File > Save as... (.jpg) and specify a low value in the .jpg options dialog. (EXIF is retained.) See if this improves the quality of the logo. It might be a tradeoff between a small file size and display quality.

If nothing else, perhaps this will get some other replies from folks more qualified than me.
Reply With Quote top
  #3  
Old 01-17-2005, 05:49 PM
T Paul's Avatar
T Paul T Paul is offline
Moderator
 
Join Date: Aug 2001
Location: USA
Posts: 2,987
I really need to see the image to get a good idea.

First off Danny was spot on about using the Save For Web option when saving a JPEG.

Basically:

If the image is text or made up primarily of solid colors, saving it as a GIF usually produces the smallest and sharpest file.

If the image is a photo or made up of gradients of color, saving as a JPEG is usually the best route. Although text will not be as sharp in this format.

Next choice concerning text is to Antialias or not
Antialiasing makes type look smoother when it's onscreen. But should you always use it? No.

Antialiasing works real well on large type, and will make your letters look nice and smooth. However, the opposite is true for tiny type. If you antialias small type, it'll look fuzzy onscreen. There just isn't enough room around the small letters to smooth out the jagged edges so instead of merely smoothing the characters, you end up with blurry looking letters. No good.

So when do you anti-alias? Basically it's a matter of trial and error. However, the general rule of thumb is use antialias for text greater than 12 points. But for font 12 points and smaller, it may be better to switch the antialias off and go for aliasing - at that size the jaggies are not so evident and actually help to define the small type.
Reply With Quote top
  #4  
Old 01-17-2005, 06:00 PM
T Paul's Avatar
T Paul T Paul is offline
Moderator
 
Join Date: Aug 2001
Location: USA
Posts: 2,987
Also check that your image size is the final size that it will be on the actual web page.

For example, say you made a logo that is 100 pixels wide. You use Adobe GoAlive to place it on your web site, but change the size to 200 pixels wide. As a result, your image will be blurred and a lower quality because you are stretching information that wasn't there to begin with.

On the other hand, if your image is 200 pixels wide and you shrink it on your web site to 100 pixels wide, then you are wasting bandwidth as the image might display at 100 pixels wide, but the file size is still the same for the 200 pixel image.
Reply With Quote top
  #5  
Old 01-17-2005, 06:06 PM
cedwar's Avatar
cedwar cedwar is offline
Member
 
Join Date: Mar 2004
Location: Liverpool, NY
Posts: 65
Ok, so far Ive taken in what you've both said. Now, Im wondering if part of the problem is how Im starting off. If I was to start from scratch to make a logo that basically has text in it, but with some color and shadowing, etc., what size should I make the file be when creating a new file? I understand it should be 72 pixels, as far as the size of the file, should it be, for example, 200 pixels by 200 pixels if Im trying to make a logo to fit into the top of a page. Or do I make a larger file and then shrink it down? Im asking because I seem to have had problems getting text to look allright when starting off with such a small file.

I hope this is making some kind of sense.

...Cedwar
Reply With Quote top
  #6  
Old 01-17-2005, 06:16 PM
cedwar's Avatar
cedwar cedwar is offline
Member
 
Join Date: Mar 2004
Location: Liverpool, NY
Posts: 65
Woah! While I was typing my reply, you replied with just what I was asking!

thanks!

Cedwar
Reply With Quote top
  #7  
Old 01-18-2005, 07:18 AM
Hunter Hunter is offline
Member
 
Join Date: Jul 2002
Location: Denver, CO
Posts: 82
Cedwar, images online don't deal with DPI/PPI at all, so always work in the absolute values. I.e., it doesn't matter if it's a 100px by 100px image at 300ppi or at 100ppi, it is still a 100px by 100px image and that's how it will display in a browser.

Now, personally, if you're dealing with with with something that is "comptuer generated" such at text, I feel that JPG is the absolute worst way to go. GIF or PNG is a much better format. JPGs are good for photographs online, but since it's a lossy format and its algorithms seem to really hate solid colors (banding) and then give lots of artifacting when they hit another color (think of, say, a solid blue background and you've got then some solid white text).

Are you creating this first in a vector graphic application and then exporting to a bitmap application or are you creating it from scratch in a bitmap app?
Reply With Quote top
  #8  
Old 01-18-2005, 07:40 AM
winwintoo's Avatar
winwintoo winwintoo is offline
Senior Member
 
Join Date: Feb 2002
Location: Regina, Saskatchewan
Posts: 942
Quote:
Originally Posted by Hunter
Now, personally, if you're dealing with with with something that is "comptuer generated" such at text, I feel that JPG is the absolute worst way to go. GIF or PNG is a much better format. JPGs are good for photographs online, but since it's a lossy format and its algorithms seem to really hate solid colors (banding) and then give lots of artifacting when they hit another color (think of, say, a solid blue background and you've got then some solid white text).
Thank you Hunter - that makes perfect sense and clears up a problem I was having - now I can fix a logo I made that didn't really look how I wanted it to.

Take care, Margaret
Reply With Quote top
  #9  
Old 01-18-2005, 08:55 AM
Hunter Hunter is offline
Member
 
Join Date: Jul 2002
Location: Denver, CO
Posts: 82
Margaret, glad to have helped. My preferred way is to create the logo in a vector app to begin with since that will allow me to resize to my heart's content without any loss of quality. To get that vector item over to my bitmap app, well, I vary in my procedure. Depending on my mood I either a) just copy it to the clipboard and then when I paste it in my bitmap app I resize it to the dimensions I need at that point in time, b) export the logo/vector object out to the size I need as an object with no background in the native format of my bitmap app that supports layering (CPT for Corel, PSD for Photoshop, PSP for PaintShopPro, etc). There is one trick I also do, but it's Photopaint-specific; I'm not sure if there is a Photoshop equivalent....

In Draw I would copy my vector object to the clipboard and then in Photopaint I would select the Text tool and click in my file like I was going to type some text. Instead, I paste my vector object. Since Text in Photopaint remains a vector item and can be resized (and then re-rendered as a bitmap object), pretty much any vector object can be pasted "as text" and will retain its vector qualities. Granted, the vector item will be the same size when pasted as the point size of the text you had when you "started" this process, but you can just reselect the item with the Pick tool and grab a handle and resize it and then let it resample to the new size. That way you don't have to keep going back and forth creating a new vector export or importing a vector to a new resampled size if you're not happy with the previous size... (i hope that made sense)

A similar process *might* work with Illustrator and Photoshop, but I'm not sure as I don't have those products to test with.
Reply With Quote top
  #10  
Old 01-18-2005, 09:04 AM
winwintoo's Avatar
winwintoo winwintoo is offline
Senior Member
 
Join Date: Feb 2002
Location: Regina, Saskatchewan
Posts: 942
Thanks for the tips again - I've not given it much thought - just did it the quickest way possible and if the results weren't quite right, just lived with it, but I'm getting more picky in my old age and couldn't fugure out what I was doing wrong. Now I have somewhere to start.

I've usually just used the text tool in PhotoShop and re-sized the layer to whatever I needed and then saved as a jpeg but the results were fuzzy. I had better luck when I used MSWord's WordArt feature

Take care, Margaret
Reply With Quote top
Reply

  RetouchPRO > Technique > Image Help


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

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 Off
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Good Graphics Cards for DTP/Retouch/Design rnbluvva Hardware 2 11-09-2006 07:55 PM
Brand New Niche Web Site Header Graphics Plus Free Updates ebiz96 Classifieds 0 05-30-2005 01:58 PM
Plugin (link): Xero graphics - Caravaggio simulated oil painting Diane Photo-Art Resources 2 02-25-2005 02:49 PM
Plugin (link): Optipix Select Edges (free), Reindeer Graphics DannyRaphael Photo-Based Art 1 10-16-2004 06:39 PM
Graphics of the Americas 2003 d_kendal Events 0 12-17-2002 03:45 AM


All times are GMT -6. The time now is 01:33 AM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
Copyright © 2016 Doug Nelson. All Rights Reserved