| |
|
|
| |
|
|
|
|
Question:
|
What
is a Graphic Template, and how can I create one?
|
| |
|
A
graphic template is an image. In order to create a graphic
template,
we use some image software, (for example, Photoshop or Firework).
|
 |
 |
 |
|
Graphic
template is a draft. It has to be created before HTML
template. If we want to post graphic template on Web,
we must save it in JPG or GIF format, & convert to
.html file. |
| |
 |
|
 |
|
Graphic
templates make life easy! We use them as blueprints for
Web Pages. With templates we can create as many different
pages as we want, and they will look like members of the
same family. |
|
|
The
key to a great looking website is sharp, clean, eye-catching
graphics.
You want your visitors to remember your page!
We
can make design, or (easy way) copy desire image
from Web using the screen capture. (For
MAC users:Take a screen snapshot by pressing
the Command + Shift +3 key. For PC users:
Hit the Print Screen button on your keyboard).
This creates a picture of the screen that is sto-
red on your desktop (clipboard).
|
Open Photoshop & open the
printed screen from your desktop
(for MAC)or New Document > OK to default sizes,
Paste (for PC).
|
 |
|
1. Now you have your image. Create an empty folder on
your
desktop and name it.
2. Use Photoshop features to make this image in right
size (most common format for Web Page is 640 pixels
wide. Max for today is 760x500). Use the Photoshop rulers
to divide it according to your table plan. Your goal
is to establish a consistent, logical screen layout,
one that allows you
to "plug
in" text & graphics without having
to stop &
rethink your basic design approach on each new page.
|
|
3.
Jump over to Imageready & go to the Slice menu.
Create Slices from guides.
4.
Once you have the slices looking the way you want to,
proceed to make the rollover effects
in the rollover menu.
5. Select all your slices and look for your Optimize
menu. Choose 2UP from the document
tabs so you can see what you are doing. At this point
we get to set what quality and type of images
are going to get cut.(.jpg format use for photos
and continuous tone images, and .gif format
use for logo.cartune and flatted images) Select
all .gif and use settings that you believe would
accommodated your desired goal in the rest
of the option boxes.Selects all .jpg and do the same.
You can do this by selecting those slices
separately with your slice tool.
|
 |
|
6.
When you are done choosing your image compression settings,
choose the File>Save Optimized As option. Make sure
that you do export html and images. And that the images
get put into their own images folder. Save your Imageready
Document. Close Imageready and Photoshop.
7. Open Dreamweaver and find the HTML page you just
created in Imageready, open it.
|
 |
|
8. Add the background color to the page, the Copyright
notice, and delete the content of the cells that will
contain the HTML text in them.
9. Type the HTML text in the cells; format it to look
like the one in the original page.
10. Save your document and test it in a browser.
|
 |
|
You
did it! Congratulations!
|
 |
|
|
| |
|
|
|
|
|
|
