Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
CSS
Web Design
Graphic Design
Color Theory
Promotional
Make More Money
Timesavers
Business Ethics
Glossary of Terms
Reviews
Marketing
Business Resources




Name
Email

Link to Us!

Graphic Design
Email this article  :  Printer friendly page


Adding Text to an Image: The Right Way

Mistake #1: Applying text to a .gif that is not anti-aliased and/or not increasing the color depth of a .gif file.

Incorrect - text is jagged

Correct
Correct Process: Whenever you are working with a .gif file remember that this file format's colors have been reduced considerably. To add text you must increase the data type (color depth) to "True Color" or "24-bit" (depending on how your graphics software references it). If you do not know what this option is referred to in your graphics software, search for "increase color depth" or "true color" in the Help section of your program. Also, and just as important, you must be sure that the text is set to "anti-aliased" before you apply it to the image. Anti-aliasing actually shades the pixels around the hard edges, causing the edges to look smoother. The "anti-alias" option should also be easy to find by doing a search on "anti-aliased" in the Help section of your graphics software. You do not have to increase the color depth of .jpg file formats. Note that on very small text, it is often best to uncheck anti-aliased or your text will appear fuzzy. Increasing the spacing between characters with small text sizes, also decreases the potential for fuzziness.

Mistake #2: Incorrect optimization of file format.

Incorrect - file should have been optimized as a .jpg

Correct

Incorrect - file should have been optimized as a .jpg

Correct
Correct Process: It is a good rule of thumb to know that whenever you are working with a photograph or anything that has a gradient effect (gradual shading of color bands), the final web image will likely be a .jpg unless of course you want a banding effect. This is not 100% true, but should be the first file type you try as it could save you some time. Always try to optimize your graphics to the smallest file size (weight) for fast page loading without sacrificing necessary cosmetic appeal. The incorrect example above shows an image that contained a gradient color effect and was optimized as a .gif. Notice the fuzziness and speckling? The same but opposite effect can occur with certain colors (such as deep red colors) that are optimized as .jpg instead of .gif. So be careful and by all means experiment.

Mistake #3: Incorrect image dimensions within the HTML source code.

Incorrect - image dimensions are incorrect in the HTML source code

Correct

Correct Process: The incorrect example appears distorted, why? The image size is actually 200x130; however, in the incorrect example the image dimensions within the HTML source code states 300x100 pixel. So yes, it is being stretched widthwise and compressed lengthwise. Correcting the image dimensions to exactly what it should be in the HTML source code will correct the problem.

IMPORTANT NOTE: There are situations where you DO want to stretch the image! When, why and how? Read our related article, "Stretching Images". :)

Graphic software programs we recommend are Adobe PhotoShop, Jasc Paint Shop Pro and Ulead PhotoImpact. All of these companies offer trial versions, so if you cannot get comfortable with one user interface, try another before you buy. One of the most critical factors in web design and graphic design is to "know your software". It does not matter what you use really as long as you know the program inside-out. It is as equally important to be comfortable using it. If it doesn't "feel" right, move onto something that does.


Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.com, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Newest Articles in
Graphic Design
Using Swap-Out Graphics from a PSD File
How to Design Web Pages for the Way a Website is Really Used, Part 2
Emphasing a Product with Monochrome Graphics
How to Create a Favicon
Adding Text to an Image

 

Page copy protected against web site content infringement by Copyscape
All articles are originally authored by BasicTemplates.com. Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006 BasicTips.com, a division of BasicTemplates.com, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates