Download Web Graphics in a nutshell

Web Graphics in a nutshell
A note about images: If you’re here, we assume that you
use Photoshop. If you do not use Photoshop, we
recommend that you work with a Web graphic designer to
assist you with image files.
The feature image.
What size do I need to make my image?
At editspot, we strive for consistency.
The Feature Image is a fixed size throughout your
Website.
Images found in content can vary in size.
Thumbnail images look best when all of them are the
same dimensions and they shouldn’t be too big.
The same goes for detail images, but of course these
are larger in size.
To maintain consistency, you should set up a template
for the following images:
The Feature Image
The Thumbnail image
The Display image
The Homepage images – varies depending on the design,
but generally there is a feature image or Flash movie
and several banner size images to add as content
teasers.
Using Firefox, you can easily view the dimensions of an
image that you wish to replace on your website. Then
you can make your new image the same size.
View Image Diminsions:
With your pointer over the image on the Website,
control-click on Mac or right-click on Windows and a
menu will display. Select “properties” at the bottom. A
pop-up window will display the Width and Height, as
well as other properties. You can opt to save the image
file to your computer if you want to open it in
Photoshop to set up an image template.
Size counts
If you post an image to the Website that is wider than
the site, it will push the layout apart. To prevent
this, only use images sized to fit the space
aesthetically.
You should always use the “save for Web” feature in
Photoshop when saving images for the Web. There you can
adjust things like image quality and file type. This
ensures that your graphic is optimally suited for your
Website.
Image format for the Web:
RGB (Red, Green, Blue)
JPG, GIF and PNG
The resolution is 72 dpi (Dots per inch)
Naming Conventions:
My_image_name.jpg
Don’t use spaces or funny charactors to the name.
Naming Photo Gallery images
My_photo_gallery.jpg
My_photo_galleryTH.jpg
When you are building a photo gallery, you need the
same image twice – one thumbnail and one display image.
We always add TH to the end of the file that is the
thumbnail so that we know which is which.
Firefox provides many tools for people who seek to know
a little more about what goes on under the hood of the
browser window.
What’s so great about Firefox? Firefox is
Optimizing the image for the Web
* Sizing the image for the space it is intended for
* Setting up relevant and proper naming conventions
for your images
All images that are Optimized for the Web are in JPG or
GIF format, RGB (Red, Green, Blue) and 72 dpi (dots per
inch). Images for the Web are low resolution. They are
fine for screen output but not good quality for print
output.
It is best to let professional graphic designers work
with images intended for the Web or Print for best
results. If you are inclined to manage your images you
will need graphic design software such as Adobe
Photoshop™ and thorough training to understand how to
use Photoshop.
There are four types of images that you can add to the
site.
1. The "Feature Image"
This is the main image at the top of an article. The
width of this image must be no wider than 630 pixels.
The height is variable.
2. The "Image List" image
You can add an image or a list of images to the right
side of your article within the Body text. These images
have a suggested width no larger than 300 pixels. The
height is variable.
3. The Thumbnail Image
Thumbnail images can be used on the site to display a
gallery of pictures. Thumbnails can link to a larger,
Display image if you add the Display image at the time
that you upload the thumbnail image. If you do not
upload the Display image with your thumbnail then no
link will be created.
Thumbnail images are no wider than 140 pixels. The
height is variable, but it is recommended to stay under
140 pixels.
When naming a thumbnail image, add this suffix _th to
the name of your image to identify it as a thumbnail
image i.e: gallery_my_Image_th.jpg, Name the full or
detail image like this: gallery_my_Image.jpg. You will
know that these images are twins except that one is the
thumbnail and one is the detail image.
4. The Detail/Display image
If you want to create a link to a Display image of your
thumbnail, you will need a larger image of your
thumbnail image. The size should be no larger than than
600Wx380H.
When you are adding a gallery of images, you will see
two upload tools. The first tools is for the thumbnail
image. The second tool is for the Display image. When
two images are uploaded, the CMS tool creates a link to
the Display image.
Re-using Images
Many articles within a section will use an identical
feature image. This re-inforces the Site Visitor's
bearings about where they are in the site. Identical
images may be used repeatedly as Visitor cues such as a
question mark icon.
Once you have uploaded an image to the site, you can
re-use the same image. Copy and paste the name of the
image into the image name field when you are
editing/adding an article to the site.
Naming the Image
It is best to devise a naming convention for your
images for clarity. The system will not overwrite
images. Rather, it detects the matching names and
appends the newer image with a unique identifier if it
has the same name as an existing image.
Do not use spaces in your name - use the underscore _
or dash - to indicate spaces. Only use letters and
numbers to name your image. Do not use any other
characters in the name, such as !?@#$""\>%<|/^&*()+.,
You can use caps to designate the beginning of another
word, and use relative naming to keep images
recognizable. Please note that the Web server is case
sensitive: an image named My_Image.jpg is not the same
as my_image.jpg