 |
|
 |
 |
 |
 |
 |
 |
 |
|
|
The BoxedArt Guide to Using Website Templates
Optimizing Website Template File Size when Saving for Web
When saving graphics to be placed in your web pages, it is recommended that you use Photoshop's Save for Web option. This will ensure the best quality and smallest download time for each of your images.
Save individual graphics from your Photoshop document
(.psd) as either .jpg or .gif. These are the two web-friendly image
formats that browsers will display. (The .png image format is not
recommended as the kilobyte size for .png images is inordinately large
compared to jpg and gif and can slow the download speed of your pages once
they are online.)
When replacing images in your template's web page
that you have modified it is recommended that you use the same filename
and file format as the original image that came with your template.
If your modified image is saved with exactly the same filename/file format
(and in the same folder) you will not have to make any changes to the html
source code - your new image will automatically replace the original in
the web page.
As a general rule, .jpgs are best for photos or any graphics that have soft gradients or drop-shadows. The .gif format is best for images that have text or solid colors or that require transparent backgrounds.
You access Save for Web from Photoshop's (top menu) File dropdown list:
Click Save for Web and in the window that opens,
click the Optimized tab at the upper left:
In the right column you will see the file format
choices.
Press the arrow next to Quality and move the
slider to adjust the quality of your image - the higher the number,
the better the quality (but the larger the file size).
|
Fig. 2 below shows options for saving as a .gif Adjusting the number in the Colors field (32 colors pictured here) to heighten or diminish the quality of your .gif image. As you adjust the number of colors to decide
what is the best choice, the lower left will display the kilobyte
size:
|
Fig.1 
You may save individual slices from your .psd here as
well. Choose the slice select tool 
from the toolbar at the left of the Save For Web window and
click on a slice. Hold down the Shift key and click on other slices in the
document to save multiple slices at once. Choose a file format and a
quality/colors setting for each one.
Fig. 3
Then, click Save at the upper right. The
"Save Optimized As" window will open. In its upper portion, choose the
folder in which to place your graphic(s).
In the lower portion
(Fig. 4 below), specify Images Only (no html code written), Custom
settings, and Selected Slices.
Fig. 4
Click the Save button and your image(s) are saved and ready to go into your web pages.
See also:
Using
Guidelines as an Alternative to Slice Lines
Using
Slice Lines or Producing New Slice Lines
Appropriate
Naming Conventions for Saving Your Sliced Template
|
BoxedArt Offers: Web Templates | Website Templates | Flash Templates | Web Site Templates | Templates |
Copyright ©
2007 Big Resources, Inc. All Rights
Reserved