Graphics For Web Site Rachel S. Minor 05/2002

Graphic Files Found on this C.D:

I. The folder called Photoshopdocs contains all the Photoshop documents which created the graphics for your website. These are files contained in this folder:

· The “ccathomesliced.psd” file contains the home, or index page file.

· The “leveltwosliced.psd” file contains the file that created all the secondary pages.

· There is a file called “headers.psd” which is a file of the individual page titles graphics, such as “mission” and “frequently asked questions”.

· There is a file called “inkfigures.psd” which contains the colorful dancing figures on the index page.

· The “inkfiglevel2.psd” file contains the smaller figures used on the secondary pages.

· The “blackwhitemand.psd”, “bwminimandala.psd”, and “blackwhitemand.psd” files are all large photoshop documents of your mandala logo in different sizes and colorations.

· The “blankbutton.psd” file is a blank button for the second level pages which you can use to create a new button.

II. The folder called Fonts contains all of the fonts used on your website, in p.c. format. Maiandra is the font used for the CCAT title. Pristina is the font used for the headers, and Perpetua and Ottawa are the fonts used for the navigation buttons.

III. All the Instructions on this c.d. are recommended for experienced photoshop users. Instructions for creating and editing HTML documents are not included.

Creating Photo Effects

· Open up Photoshop 6.0. File-open and navigate into the folder on this disk called “Photoshopdocs”. In this folder, open the file called “bgcolor.gif”. Once you have it open, go up to the edit menu in Photoshop and select the option “define pattern”. It will bring up a dialog box which will allow you to name the pattern. Please name the file “cream texture” or something like that. You may now close the “bgcolor.gif” file, but leave Photoshop open.

· Next, Open the picture you want to edit for the website into Photoshop. Appropriate file types are Jpeg or Tiff. First, you will want to make sure the resolution of the photo is good for the web. With the photo open in Photoshop, click on the Image menu item at the top bar of the program, and go to Image size. A dialog box will come up with several choices. In the pixel dimension box, please make sure the drop-down box to the right is displaying “Pixels” and not “Percent”. Type in the number 200 pixels for the width. Don’t worry about the document size box. (*Note: the size recommended above is not set in stone, you can make the pictures larger or smaller than this, but this is the size that the web site developers used in the creation of the site.) In the resolution box, if it is not already at 72, please type in 72.

·

Next we will create a copy of the image in the layers palette. Open the layers palette by clicking on Window-Show Layers. In the layers palette, click on the layer called background and drag it on to the new layer symbol at the bottom of the palette (see photo below).

· Close the original background layer by clicking on the eye symbol next to it in the layers palette. Make sure you have the background copy layer active by clicking on the layer so it turns blue in the layers palette if it is not already. (see picture above).

· Next we will increase the size of the border slightly to accommodate the drop shadow. With the picture displaying at 100%, (double click the magnifying glass) go to the Image menu again and this time go to Canvas Size. You will see a little dialog box with a nine square grid. Click on the upper left hand square to scoot the image up to the upper left corner, and then make sure the right side drop-down boxes are again both displaying Pixels, not inches or percentages or anything else. In the width and height boxes, please add 5 pixels to whatever the current width and height are. For example, if the current document is 200 pixels wide by 150 pixels high, Please enter the dimensions 205 pixels for the width and 155 pixels for the height. Click “ok”. Now the image should have a grey and white checkerboard border around the right side and the bottom.

· Next we will fill in the background color. Please click on the background layer in the layers palette to make it active. Click on the Edit menu at the top of the program and then click on Fill. A dialog box will come up which says “Contents” and “Use”. On the drop down box next to “use:”, click on the item called custom pattern and select the pattern we created earlier with the “bgcolor.gif” file, and then “ok”. This will fill the background with the cream textured background color used in the website.

·

Next we will add the drop shadow. Please click on the “background copy” layer in the layers palette to make it active. In the layers palette, there is a small button at the left bottom with a black circle with a small “f”. Please click on this button, and select “drop shadow” from the list that drops down. A large dialog box will come up with many options to select from. Please change the settings in the

Dialog box to match what is shown in the picture above. Click on the rectangle shown above indicated by the red circle. This will bring up a color picking box. See below. In the spot indicated by the red oval, please type in the number shown. (A36624). This is going to be the color of the drop shadow.

After you have entered the drop shadow color, click “ok”.

· Now that you have created a photo with a drop shadow, you will need to re-save it as a jpeg, because all the work we did on the picture turned it into a Photoshop document, which is too large to display on the web. Please click File-Save As and when the save as dialog box comes up, change the format to Jpeg and rename the file something you will remember and in a place that you will be able to locate easily. In the Image Options box, please save it at “quality 7, baseline standard”. Now you have a photo with a drop shadow, ready to plug into the web page.

Adding A Page or Making Changes to an Existing Page

I. There is an HTML file in the website folder which is called template.html. It is a “second level” page just like all the other pages, such as “mission.html” and “faq.html”, except it doesn’t contain any content. If you want to create a completely new web page, this is a good place to start. A person who is experienced with web sites will be able to open the templates file up and see that there is an area toward the top which says “place header image here”. In order to place a new header here that matches the rest of the site, you will need to create one.

· Creating a New Header Image: In order to create a header image that matches the rest of the website, you may need to load the font “Pristina” on to your computer if it isn’t already loaded. You will find this font located in the folder called Fonts on this c.d. *Note, these are P.C. compatible fonts. After you have this font loaded, launch Photoshop 6.0. From the file menu, go File-Open and navigate to the folder on this c.d. called Photoshopdocs, and to the file in that folder called “headers.psd”. With this file open on your desktop, Select “Save As” and save the document to your computer so you can edit the file. You will need to open the layers palette. Create a new layer in this document by selecting the type tool. You may want to hide the other type layers that are open so that you can see what you are doing better. Type your new header into the document and then save the document. Next you will turn this new header into a transparent gif for use on the web site. Please close all visible layers in your document except your new type layer. You should see the checkered transparent background visible behind the type. In the upper bar of Photoshop, you will see a menu item called “help”. Go Help-Export Transparent Image. 1: click on the item which says “my image is on a transparent background”. 2: Select “online” for the next question (what will the image be used for). 3: Select “gif” for format. 4: say “next” when it says the next step is to reduce the number of colors in your image. 5: On the Indexed color box, fill in the following: Palette: Local (adaptive) Colors: 216 Forced: none. Transparency: (checked) Matte: select “custom” and when the color picking box comes up, type the following into the very bottom box, which is preceded by a “#” symbol: F6E5C4. As you type this number in, you will see that it brings up a soft cream color which will help your image blend into the background of the website better. Click “ok”, and then “ok” again. Next you will be prompted to name the file you have just created. Name it something obvious like “galleryheader.gif” in your computer and you are ready to place it into your html document.

· Placing the header image into the html document: Open the “templates.html” document in Dreamweaver or any other html editing software. Go “File-Save as”- and save the document to your computer with its new name, such as “gallery.html”. Locate the spot on the page which says “place header image here” and place your new header gif in this spot.

· Creating a new Navigation Button: If you create a new web page for your web site, you will want to create a new navigation button to link to the new page. You may want to incorporate this new navigation button into the main navigation on every page on the website. You will need to make sure the font “Ottawa” is loaded on your computer. If not, it is provided on this c.d. in the folder named Fonts. Open Photoshop 6.0. Click File-open and navigate to the Photoshopdocs folder on this c.d. In this folder click on the file called “blankbutton.psd”. Click “save as” and save the document to your computer so you can edit it. In the layers palette, make the layer called “education” active by clicking on it. Using the type tool, highlight the word “education” in the document window and type in your new button name, such as “gallery”. Click the type layer in the layers palette to lock in the new word. Next, click on the “color brushstroke” layer to make it active. Use the layer styles selector at the bottom of the layers palette to create a color overlay of your choice. Save the document. Next, you will save two copies of your new button, one as the “normal” state of the button and one as the “rollover” state of the button. For the normal state, hide the layer which is named “white brushstroke” and make sure the other layers are visible. Select Save As, and change the file type to jpeg, and save the file as a medium size jpeg with a name like “nav2gallery.jpg” onto your computer. Next, go back to the “blankbutton.psd” file and hide the “color brush stroke” layer, and show all the other layers. Do a File-Save As again, and this time name the resulting jpeg something like “nav2gallery-over.jpg” to differentiate it from the regular state button. Now you have two images which are ready to be placed in your new html document by an experienced web designer. The logical placement for the new navigation button will be at the very bottom of the existing navigation, right under the navigation link named “links”.