Creating the Molly Dog Comprehensive Image/Interface and Other Graphical Elements

Before you begin reading this document I would recommend that you read What application do I use? for an explanation of vector and bitmap images.

You should also feel comfortable searching the Internet. If you need a refresher on searching the Internet effectively view this tutorial on searching with Google. Throughout this project there will be links to Google; click each link to see the search terms that I used to find information and resources for the project.

Here I will outline the process for creating the comprehensive image/interface required for the ROP Web Page Design Class Photoshop project. This comp image/interface will be created for a fictitious company called Molly Dog Salon. This is a dog grooming business and the owner had a few ideas on the site design:

Lots of photos of various dog breeds
Fun logo with a cartoon look - She would like to somehow include a cartoon of her dog who is the shop mascot.
Web site colors match actual salon colors

Preparation

Review sample logo sites for inspiration - http://www.logo--design.com/ and use http://www.google.com to search for "logo samples".

Look at competition web sites - I searched http://www.google.com for "dog salon". Here are a few of the sites that I found:

http://www.citydogsgrooming.com/
http://www.petropolis.com/index.html
http://www.hundepflege.net/en/

Sketching the site

Created thumbnail sketches of my ideas on paper. Created larger rough sketches of my site ideas for the client to view.

Determine color palette

Molly would like to use colors that are similar to the colors in her salon which are salmon and teal. We decided that we will work with four basic colors: Black, white, teal (#669999), and salmon (#e0a3a0).

Create the site folders

Molly will eventually have two web sites. Her dog grooming site and her hair salon site. For Molly's sites I created the following folder structure:

Molly's Site Folders

First I created a folder called molly to store both sites in. This folder separated Molly's web sites from my other client's sites. I created a sub folder called originals. This folder will be used to store original documents (photos, graphics, fonts, Word documents, and other necessary files) that Molly sends to me and that I create. I also create two additional sub folders in the molly folder: one called mollydog for the dog grooming web site and one called mollyhair for the hair salon web site. In each of the site folders (mollyhair and mollydog) I created a folder called images to store site photos and graphics that would be uploaded to her "live" web site. New folders will be added as needed.

Gather needed materials

Gather photos - I searched http://www.google.com for +free +dog +photos and came up with this site http://www.thepetprofessor.com/. I can use up to 20 photos on a non-profit site for free.

Gather clip-art images - For those of us who cannot draw, search Google for +free +clipart or ask your instructor to borrow the MasterClips CDs. Beware, some clip art sites charge a fee, but there are still many sites on-line that are free.

Look for fonts - Fonts say a lot about a site. Spend time searching for the right fonts to use for your graphical elements. I like http://www.acidfonts.com. I also have a folder of fonts that are available in the classroom, please ask me if you would like to view the available fonts. I selected the brady bunch font for logos and other graphics in this project. Please ask your instructor before downloading fonts in the classroom. For more information on installing fonts, visit this page. The fonts that you download are only for use in graphics, they should not be used in your HTML or CSS code. Please remember that there are only a handful of fonts that are considered "web safe" in HTML and CSS code. This means that if a user does not have the font that you use in your HTML or CSS code installed on their system your web page will not display as intended. For a list of core fonts installed on all Windows systems visit this page. Mac system fonts can be found here. Here is a list of common fonts to all versions of Windows and their Mac equivalents that you can print out.

These items were saved in the originals folder.

More on ClipArt

As I mentioned earlier, not all of us can draw our own images. Fortunately, there are millions of clip art images and photos available on the Internet and via clip art collections on CD. If you plan to use an image for a project that you find on the Internet, be sure to ask the original artist for permission to use the graphic.

You may also be able to find inexpensive clipart collections on CD at computer stores (in the discount software section). I have an older version of MasterClips from IMSI Software. If you purchase the updating collection, ClipArt&More CDs, for $24.95 (at Academic Superstore) you also will receive a one year subscription to clipart.com to download additonal images. Academic Superstore also has the Hemera Technologies Big Box of Art 410,000 for $19.95.

Determine file formats - Working with existing graphics

After you have collected the images that you want to use in your project, determine the file format used for each of these graphics. You can determine the file format for a file in Windows Explorer or My Computer (see this handout for displaying file extensions in Windows Explorer). It is important to know the file formats for any existing images that you plan to edit. This helps to determine the graphic program that you should use to edit the image files. Here is a file format chart; it illustrates what programs I would use to manipulate specific file types.

File Format	Graphic Editor	How the graphic is used	Vector or Bitmap
JPEG or JPG	Photoshop, Paint Shop Pro	Web Pages	Bitmap
GIF	Photoshop, Paint Shop Pro	Web Pages	Bitmap
WMF (Windows Meta File)	Paint Shop Pro and Illustrator. Flash may be used if I wanted to create animations.	Print	Vector
EPS	Photoshop, Illustrator	Print	Vector or Bitmap
TIFF	Photoshop, Paint Shop Pro	Print	Bitmap
PNG	Fireworks - PNG is Fireworks native file format	Web

Again, the above chart illustrates what I would use to edit a particular file type and these selections may change depending on the project needs and my comfort level with a particular software application. Also keep in mind that file formats that are designed for print graphics (WMF, TIFF, and EPS) can be converted to web format (jpeg and gif). For more information on vectors and bitmaps read this page.

How I created the comp image/interface

Before we begin the process of creating the actual comp image/interface view my completed comp image/interface here. This is a simple page that includes a logo, some background graphics, and five simple buttons.

Creating the logo in Paint Shop Pro

I selected a dog image that was a WMF file (Windows Meta File) for use in my logo. I found this image in a clip art collection (on CD) that I own. WMF files are vector files; I choose this particular file type because it can be resized and altered fairly easily. Unfortunately, WMF files cannot be opened in Photoshop. The following programs can open WMF files: Paint Shop Pro, Illustrator, Fireworks, Flash. Because my client specified that she wanted the logo to have a "cartoon" look and cartoons are typically created in vector programs, I decided that the best program for me to use would be Paint Shop Pro. Paint Shop can manipulate vector images and I feel comfortable using the program. Illustrator and Fireworks can also be used to create a vector logo.

I then created the logo in Paint Shop Pro. I am not going to write the specific steps that I used to create this logo because there are thousands of tutorials on-line for working with images in Paint Shop Pro. I will tell you that I opened the existing WMF file and increased the canvas size to 800x800 pixels (I always use pixels as the unit of measurement when I'm working with web graphics). I used such a large canvas because I may want to use this image as an opening graphic in a Flash movie or for other applications. I prefer to work with a larger canvas and then crop or resize the canvas later when I am ready to save the image for the web. I made sure to save my work frequently since graphic applications can use a lot of memory and are more prone to crashing.

A note on quality and resizing: It is very easy to downsize images (make them smaller) without any loss of quality. Vector (WMF) images are very flexible; they can be resized (up or down) without any real impact on their quality. Bitmap images (photos) are not as flexible; you can only downsize the image (make it smaller) without affecting the quality. If you try to increase the size of a bitmap image the quality will deteriorate.

Layers in Paint Shop Pro As I created the image I was careful to place each new element of the logo on its own layer. I use layers extensively with any graphic application. Using multiple layers makes manipulating the image at a later date much easier.

Once the logo was completed I saved the image in Paint Shop Pro's native file format which is psp or pspimage. I choose this format because I wanted to retain all of the layers; in order to retain layers in a file it must be saved in the program's native file format. I did not merge the layers before I saved the artwork (the layers were left as they appear in the image to the left).

When you save a file as a jpeg or gif all of the layers are lost and these files are difficult to edit. If you try to adjust the text in a jpeg or gif it is very difficult (try it some time). Text in an image that has been saved with all of its layers is very easy to edit. When you're working with web graphics you usually end up with two copies of the image: One copy is in the native file format which can be edited later and then a copy is made of the file, usually through an export process, for the web in either jpeg or gif format. If you want to make changes to the file you open the original file (in the native file format), make the changes and re-export the image as a jpeg or gif.

Here is a chart of some of the popular graphic application's native file formats.

Application	Format (extension)
Photoshop	PSD
Paint Shop Pro	PSP or PSPIMAGE
Flash	FLA
Fireworks	PNG
Illustrator	AI

Usually, when you save a document in a graphic application it will automatically be saved in the program's native file format. Sometimes if you open an existing image the graphic application will try to resave the image with the existing file format. To check the file format of an image select Save As from the graphic program's File menu. In the Save As dialog box look at the Save as type area located under the File name. It should say the application name along with the appropriate three letter extension (see above chart). If you want to change the file type of a document you must use the Save as type drop down list to select the desired document type; simply adding the three letter extension to the file name does not change the document type. Remember, saving your artwork with the above file formats will retain the artwork's layers and make them easier to edit in the future. You cannot use native file formats on the web. If you attempt to use the <img src> tag with a file that is not converted to a gif, jpeg, or png image it will not display properly on the web page.

After saving the file in PSP format, I then exported my logo image as a transparent gif. I choose the gif format for the web because my image has less than 256 colors and I wanted transparency. This logo completed two project requirements, the logo and the transparent gif.

If you would like to see a sample of my large logo, click here. I placed the logo on a green background so you could see the transparency.

Feel free to use Paint Shop Pro for part of your project. There are many tutorials on the Internet for Paint Shop. You can use Google to search the web or visit my other web site http://www.putertutor.net. To access Paint Shop in the classroom click Start > All Programs > Web Design > Jasc Software > Paint Shop Pro.

Building the interface in Photoshop

With the logo done I opened Photoshop and began building the comp image/interface. I created a new 800x800 pixel graphic with a transparent background. I tend to always select a transparent background when I'm creating a new image. Transparent images are more flexible; they allow the image to be used on web pages with patterned backgrounds and various colored backgrounds. Images with transparent backgrounds can also be exported fairly easily as a transparent gif. I can always add a layer of color if I want to use a specific background color later.

Layer Folders in Photoshop I started drawing the basic image shapes. Each shape was placed on its own layer (I also created layer folders). The shapes consited of the green rectangle at the top of the page and the large salmon rectangle that holds the content of the page. You may want to look at my page one more time to refresh your memory on the shapes.

I added the text "serving all of your pet needs since 1985" and applied some effects.

I saved the image as mollydog.psd in the originals folder.

Next I added my logo to the image. To do this I switched to Paint Shop and resized my logo to 250x250 pixels. I selected the entire image and copied it. I then returned to Photoshop and pasted the image into a new layer. This produced an undesirable white background on the logo layer. I easily removed the white by selecting the Magic Wand tool in Photoshop and clicking once on the white area of the image. I then pressed the delete key to delete the unwanted white areas. I used this same process to add the paw prints to the image.

Adding rollovers and slices in ImageReady

With the basic layout complete (click here to see the basic image), I switched to ImageReady. I then added the basic buttons using the tab retangle tool , placing each button on its own layer. I added the button text to each button (each text element was also placed on its own layer). I also applied strokes to each of the buttons from the Layer Styles menu.

With the buttons created and styled, I then selected each of the buttons and added a New Layer Based Slice from the Layers menu.

From the Web Content Panel (Window > Web Content) I added Rollover states (right click the layer in the Web Content panel and select Add Rollover State).

Select the Over state in the Web Content panel and then select the text that you want to apply a drop shadow to in the image itself or in the regular Layer panel.

Apply the drop shadow or whatever other style you want to add to the over state. You need to be sure to select the Over state in the Web Content panel before you add effects, otherwise the effects will be applied to the button when it initially loads instead of just when the visitor mouses over the button. I then tested the buttons in Internet Explorer.

Once the buttons were done I sliced and optimized the remainder of the image. I included a large slice for content that will be added later (slice 15 in sample image). It is important to optimize each slice of the image. You want to obtain the smallest file size while maintaining image quality. Here is a screen capture of the sample sliced image.

I decided that the canvas was too large so I resized the canvas to 700x800 pixels.

Saving the file as HTML

When I was satisfied with the comp image/interface. I re-saved the file in PSD format. I then saved the optimized file as HTML and images by selecting File > Save Optimized As from the ImageReady menu. I selected the mollydog folder to store the files in and used index.htm as the filename. ImageReady automatically assigned names to the images and placed them in the images folder I created at the beginning of the project.

Editing files in Dreamweaver

HTML files that have been created in ImageReady can be edited in Dreamweaver or your favorite text editor.

I opened Dreamweaver and defined a new site called Molly Dog using the mollydog folder as the local root folder.

I opened the index.html file in Dreamweaver and reviewed the file and HTML code. ImageReady created the HTML code which included a table to layout/control all of the sliced images. I decided to change the alignment of the table to center so that my layout would be centered on a page regardless of the visitor's monitor resolution. I selected the table and changed the alignment to center in Dreamweaver's Properties panel. I again tested the page in Internet Explorer.

I wanted to be able to add content to the file at a later date. I had created a slice in ImageReady for the content (slice 15 in the sample image). When I opened the file in Dreamweaver this slice had been converted to a table cell (<td>) that contained a large salmon graphic. I selected the salmon graphic and pressed the delete key to remove it. I added the placeholder text "content goes here" to the table cell that originally contained the salmon graphic.

I created and linked a CSS file to the index.html page. I used the CSS file to change the font styles for the content cell and the links. I also used the CSS file to change the background color and the verticle alignment (valign="top") of the content cell. You can see my sample CSS here.

With the index.html file still open, I created links from the five buttons to the appropriate pages. Even though the other pages for the site have not been created the links can still be setup in the index.html file using the filenames that I plan to create later. I selected each button and replaced the existing # symbol [the # symbol is a placeholder link that ImageReady created] with the actual filename). I also added ALT tags to all of the buttons and other images. The table below shows the links that I created.

Button	Linked to:
Home	index.html
Services	services.htm
Clients	gallery/index.html
Contact	contact.htm
Links	links.htm

I then saved the index.html file again. I wanted to use the same layout for most of the pages in the site. I needed to create three additional pages using the same layout as the index page: links.htm, contact.htm, and services.htm. The easiest way to reuse the index.html page is to use the Save As command from the File menu. With the index.html file still open, I clicked File > Save As and used the filename services.htm. I repeated this process for links.htm and contact.htm. I again tested the pages in Internet Explorer to make sure that the Home, Services, Contact, and Links buttons work. The Clients button will not work until I create the web photo gallery later in the project.

I then defined the remote site in Dreamweaver. I used my f2o.org account for the site. For more about site definition review this tutorial I wrote.

I created a folder named mollydog on f2o.org to store my project. After creating the folder I changed the host directory in the remote site definition to www/public_html/mollydog. The host directory path tells Dreamweaver what folder to copy files to when you use the Put button to upload a web site. I then uploaded the entire site to f2o.org.

I checked the "live" site in Internet Explorer, Opera, Netscape, and Mozilla (the instructor work station has all of these browsers installed on it). I also checked the site in 800x600 resolution since I had designed it in 1024x768. I would recommend that you check your pages in various browsers as you are developing a site and not wait until you upload your pages to check for design issues.

You can view my completed comp image/interface here.

Creating the Web Photo Gallery

With three Photoshop project elements completed, I moved on to creating my web photo gallery. I found a lot of dog photos at http://www.i-love-dogs.com/canine/dog3674.html. I selected 20 images from this site, respecting the site owner's copyright (the site owner requests that only 20 images be used for a personal web site). Using Windows Explorer I created a sub folder in my originals folder called galleryoriginals to store the 20 images in. Original photos should not be included inside your web site folder (mollydog), this would waste server space when you upload.

I created a second folder inside my web site (the mollydog folder) called gallery (this folder will actually be uploaded to the Internet). When I create the web gallery the galleryoriginals will be the source folder and the gallery folder will be the destination folder.

I then started the web gallery automation process in Photoshop (File > Automate > Web Photo Gallery). I adjusted the gallery settings to suit my needs. When the gallery was done I viewed it in Internet Explorer. The layout was nice, but I did not like some of the text colors, but I knew that I could change these colors in Dreamweaver later. If you would like to see my gallery click here.

I returned to Dreamweaver and opened the gallery folder in the Molly Dog site to see what Photoshop had created. I noticed that there were three sub folders called images, pages, and thumbnails. Photoshop also created files called index.htm, ThumbnailFrame.htm, and UserSelections.txt. Remember that f2o.org requires that index pages be named with an .html extension; unfortunately, Photoshop used a .htm extension on the index file. I used the Dreamweaver Files Panel to rename the index.htm file in the gallery folder to index.html. Dreamweaver automatically corrected the code in all the pages that included links to the index file (what a timesaver!).

I opened the index.html file to investigate the HTML code. I switched to split view and examined the code that Photoshop had generated. I found that Photoshop had created a frameset in the index.html file. The index.html frameset used files located in the pages folder and a file called ThurmbnailFrame.htm. The actual thumbnail images were located in the folder called thumbnails and the larger images were in the folder called images. If you would like to inspect the gallery code, click this link and then click View > Source in Internet Explorer. To view the source code for individual frames, right click the frame and select View Source from the menu.

While inspecting the code I also found that the gallery was linked to an external css file called galleryStyle.css in the images folder. I opened the galleryStyle.css file and adjusted the css styles to my liking in Dreamweaver's CSS Styles Panel.

In order to add file names, descriptions, credits, etc. to the gallery pages I had to open the individual files located in the pages folder in Dreamweaver. (I added this item to my task list to do later).

I again previewed my gallery in Internet Explorer. Satisfied with the results, I uploaded the entire web site to f2o.org and tested it in the various browsers.

Creating the Animated Slide Show

Instructions for creating an animated slide show are on pages 618-620 of your Photoshop book. It's pretty easy to do, but the book left out two critical steps that I think you should know before you create your own slide show, resizing the images and combining multiple images into a single file.

You should select images that are the same height and width. If the images aren't the same size the slideshow won't look good. You may have to resize or crop images to get them to the same size.

Resizing Images in Photoshop

In Photoshop open the image that you want to resize (File > Open) or use the File Browser

Select Image > Image Size

Be sure that the Constrain Proportions box is checked and set the height or width to the desired size and click OK.

Cropping the Image

Open the image that you want to resize (File > Open) or use the File Browser

Select the Crop tool

In the Options bar set the width and height to the desired size.

Using the Crop Tool Select the area of the image that you want to keep by drawing a rectangle on the image with the crop tool.

You can resize the area by using the handles (small squares at the each corner) and dragging the bounding box to the desired size.

Double click in the center of the image to complete the cropping process.

Copying images into a single file

The second thing that you will need to do is copy all of the images into one file. To do this you will need to create a new file in Photoshop with a transparent background. The file should be the same size as the images that you plan to use. My images were 200x300 so I created a new file that was 200x300 pixels.

In Photoshop I opened all of the images that I wanted to use in the slide show.

Drag Drop Image Select the first image that you want to use. Be sure that the Layers panel is visible (Window > Layers)

Hold down your left mouse button on the layer in the Layers Panel that contains the photo (see image to the left). Drag the layer to the center of the new image as shown to the right (my image is currently called Untitled-1).

Release the left mouse button to copy the image into the new document.

If necessary, use the move tool to align the layer with the document window. Repeat this process to copy the rest of the images into the new document.

Once you have copied all of the images, close them leaving only the new image open. Select the new image and inspect the Layers Panel. There will be one empty layer in the panel (on my image it was Layer 1). You can delete this empty layer by dragging it to the trash on the Layers panel or by right clicking the empty layer and selecting Delete Layer from the menu.

Layers Panel

To the left is a copy of my Layers Panel.

Save the image as slideshow.psd

You should now be able to switch to ImageReady and follow the steps for creating an animated slide show on pages 618-620 of your Photoshop book.

Resave the PSD file and then save the completed file as an animated gif (directions pages 621-622). Note: You may have to increase the Colors setting in the Optimize panel if you are working with photos (be sure to pay attention to the file size).

Display your animated slideshow on a web page for me to view. Here is my final slideshow at 107k. If this were a real web site for a client I probably wouldn't use this file because of its large size and poor quality. I would consider creating a Flash movie instead. I think the final quality would be better with Flash. You can experiment with creating a Flash movie with Photoshop, here are the steps:

With your completed slideshow.psd file still open in ImageReady click File > Export > Macromedia® Flash™ SWF.

Lower the JPEG quality setting, I used 3.

Click OK. In the Save As dialog box the filename should already be set to slideshow.swf and I selected the mollydog/images folder to save the file in. Click Save.

You can insert this Flash movie into a web page using Dreamweaver. Simply select Insert > Media > Flash and navigating to the images folder that you saved the file in. Select the slideshow.swf file and click OK.

Flash Placeholder An image placeholder will appear in your document (see image to the left). Preview your web page in Internet Explorer (press F12) to see the actual movie.

While the filesize of the Flash movie is a little larger, 154kb, than the gif file the quality is much better. The second image on this page is my Flash movie.

Creating a background image

I think the final graphic for the Photoshop project is pretty straight forward. Review chapter 8, Background Images, starting on page 314. Create whatever style of background image you would like for your site. A couple of hints:

Layer Opacity The easiest way to soften or lighten a backgound image is to decrease the Opacity of the layer.

Select the layer in ImageReady and decrease the Opacity until you get the desired effect.

Then save the optimized file as instructed in Chapter 8 of the Photoshop book.

Once the file has been saved you can add the background to a web page by adding the correct code to the <body> tag or using CSS. View the source code for my background page to see the CSS code that I used.

Final notes - Where to find additional learning materials

I hope that this tutorial helps you with the process of creating a web site interface and web graphics in Photoshop. Unfortunately, no single book can teach you everything about an application and this is especially true of Photoshop. If you have a real interest in creating graphics I would recommend that you purchase additional books that will cover the specific techniques that you want to learn. I would recommend searching Amazon for photoshop cs. Look for the books that have high Average Customer Reviews . After you find some books that have good reviews and look interesting, go to your local book store and take a look at the actual book to see if it suits your needs. I have included an Amazon search box below for your convenience; just click the Go button to search for Photoshop CS.

There are also thousands of free Photoshop tutorials on the web that will teach you specific techniques for creating web graphics. I have collected numerous Photoshop tutorial links at both of my sites:

Photoshop CS - http://www.tinkertech.net/photoshop.htm
Photography related - http://www.tinkertech.net/photography.htm
Photoshop 7 and earlier - http://www.putertutor.net/photo/photosho.htm

Use Google to search the web for tutorials. Here are some sample search terms that you can use in http://www.google.com to start hunting:

Creating Buttons
Search terms: +tutorial +"photoshop cs" +buttons - I used the phrase "photoshop cs" to limit the search terms to only show results that contained tutorials for Photoshop CS.

Creating Banners
Search terms: +tutorial +"photoshop" +banners - I choose to omit cs from the search terms to get more results. If you want to limit the results, use +"photoshop cs" in the search terms as I did in the creating buttons tutorial.

Cropping Photos
Search terms: +tutorial +"photoshop" +cropping +photos
The results contain tutorials for Photoshop Elements (another Adobe program). You can eliminate the Elements tutorials by using the following search terms:
+tutorial +"photoshop" +cropping +photos -elements

Resize Photos
Search terms: +tutorial +"photoshop cs" +resize +photos

Restore Photos
Search terms: +tutorial +"photoshop cs" +restore +photos

Web Graphics
Search terms: +tutorial +"photoshop cs" +"web graphics"

Text Effects
Search terms: +tutorial +"photoshop cs" +"text effects"

Rusty Text
Search terms: +tutorial +photoshop +"rusty text"

Metal Text
Search terms: +tutorial +photoshop +"metal text"

Seamless Background
Search terms: +tutorial +"photoshop cs" +"seamless background"

Animation in ImageReady
Search terms: +tutorial +imageready +animation

Rollovers in ImageReady
Search terms: +tutorial +imageready +rollovers

Try using the above search terms in other search engines or modify them to suit your own needs. You can also modify these search terms to search for tutorials for other programs like Paint Shop Pro, Illustrator, and Fireworks.

You may want to take additional classes. Check your local community college or adult school. I have taken numerous online computer courses at http://www.lvsonline.com (tell them Robin Wood sent ya!).

Please let me know if you need additional information on creating your Photoshop projects.

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.