WEB DESIGN WITH PHOTOSHOP AND D R E A M W E AV E R

By Michael L Curry WEBSITE

www.michaelcurry.com

DESCRIPTION This advanced tutorial in web design builds on your knowledge to create professional website graphics. Dreamweaver and Photoshop are powerful design tools but require experience to master. This class will teach you how to perform some common tasks which you can adopt to many web projects. FUNDAMENTALS Before we start working with the tools, it is instructive to cover the basics of file formats, image depth and other characteristics.
File Formats: Vector versus Bitmap

When we look at an image what we see are pixels painted on a screen. Those pixels are stored in a computer file as either a bitmap, or a vector equation. A Photoshop file can contain both bitmaps and vectors. However, once the file is output for the web, the final representation is always a simple bitmap.

Advanced to Web Design with Photoshop and Dreamweaver Notes

When you down sample a bitmap, you are discarding information which can never be restored unless you revert back to the original. Therefore, you will always have at least two versions of an image: the original Photoshop file, and the final bitmap output. Bitmap formats include JPEG, GIF, BMP, PNG & TIFF.

File Formats: Pixel Depth

When creating graphics think ahead and consider what the final output will be used for. A computer printer or a printing press may require much higher pixel depth than for the web. 150 pixels per inch (ppi) to 1200 ppi are typical for print. However, for the web, only 72 ppi graphics are needed because the diffusive glow of the pixels on the computer monitor smoothes out the edges of the image.

File Formats: Compression, Color & Alpha

A final consideration is the characteristics of the output bitmap file. The following table summarizes the color considerations of various formats. File Color JPEG 16 Million GIF 1 256 Max PNG 16 Million Compression Lossy (compressing reduces image quality) Reduce colors creates smaller file sizes without loss of quality Pixel by pixel color sampling combines the best attributes of GIF & JPEG Alpha No Best used for: Lots of colors and especially gradients One Limited number of colors, no gradients Multiple At this time, not all browsers support PNG

In general, a JPEG is best for a photograph or gradient fills. However, large images may cause the page to load slower. GIF is best for graphics created in a vector program that do not have a gradient fill. Eventually PNG will be a better format once it is more widely supported. One common technique is to slice an image into pieces and use a table to put it together on a page. The focal point of the image can be kept high quality, while reducing the quality of the other parts of the image (or even using HTML color). Alpha refers to transparency. JPEGs do not support transparency; GIFs do (but have a less colors than JPEG). ASSIGNMENT 1 You have been asked to update the Green Light Data Technologies design. Go to the class web page and download the files for this assignment. Page 2

Advanced to Web Design with Photoshop and Dreamweaver Notes

Updated Header Graphic

1. Right mouse click on the original header image and note the size (800x145) 2. Open Photoshop, and then open the new traffic light image. 3. In the layers roll-up, right mouse click on the background and choose layer from background. Accept the default layer name. 4. Save the image as a Photoshop PSD file in your documents folder 5. Resample the image: ImageImage Size change to 72 dpi, and then choose 1000 pixels for the width. Accept the automatic height. Press OK. 6. View the rulers: View Rulers right-mouse on the ruler and select Pixels. 7. Click on the ruler then drag four guides onto your image to frame the dimensions of your photo (800x150). 8. Resize the image so that it fits inside of your guides: Edit Free Transform. 9. Use the Crop tool to crop along the guide lines. Save your file. 10. Use the dropper tool to select the green color inside of the green light. 11. Use the Text Tool to place the text on your image 12. To make the text stand out, you may choose to blur the image (select background layer in layers roll-up, then Filter Blur Radial Blur 5 Pixels), and add a Glow to your Text (Right click text layer, Blending options Outer glow choose white Spread 14, Size 5). 13. Use the Save For Web and compare the quality and file size of the following formats: a. JPEG 100% b. JPEG 80% c. GIF Adaptive with 256 colors d. GIF Adaptive with 128 colors
Incorporate the New Header into Your Web

1. Open Dreamweaver, and define a new site choosing the folder that you saved the assignment 1 files into. 2. Change the header graphic of the template to one of the new graphics you created.
Create a Title Graphic

You will notice that we originally used only HTML text for the title of our web page. If you want a custom font or other effect, you must create a title graphic. 1. First set a color for the header. Select the HTML text in Dreamweaver and note the HTML color (#973100). 2. Open Photoshop, select File New and then set width 389 pixels, height 35 pixels, color RGB and background Transparent. 3. Double click on the foreground color in the 4. Click the Text Tool, choose Arial 40 pt Bold, and then type the title. Align the title to the top left of the document. 5. Save your file as home_title.psd. 6. Use the Save For Web and compare the quality and file size of the following formats a. JPEG 100% b. JPEG 60% c. GIF Adaptive with 256 colors and index transparency d. GIF Adaptive with 16 colors and index transparency 7. Now, based on file size and quality, which format is best? Page 3

Advanced to Web Design with Photoshop and Dreamweaver Notes

Add a Drop Shadow to Your Title Graphic

1. Go back into Photoshop and open your title graphic file (home_title.psd) 2. Right mouse click on the text in your layers roll-up. Choose blending options, and then check Drop Shadow. Accept all the default settings. 3. Save...as home_title2.psd. 4. Use the Save For Web and compare the quality and file size of the following formats a. JPEG 100% b. JPEG 60% c. GIF Adaptive with 256 colors d. GIF Adaptive with 16 colors and index transparenc
Extra Credit

Update the background image of the website. IMAGE MASKS Quite often we want to pull part of an image out and isolate it on a graphic.

The effect is like the image was cut out with a pair of scissors. This is accomplished using the Masking tools to select part of our image. Working with masks can be very time consuming and requires patience.
Steps to effectively mask web images

1. Try to find images with solid backgrounds that high contrast the foreground 2. Resize the image to 72 ppi 3. Click on the magic wand tool, make sure antialias is off. Adjust the tolerance to select as much of the background as possible without also getting the foreground. 4. Once you have an initial mask, switch to the magnetic lasso tool and zoom in to an area that needs to be cleaned up. Press the shift key to add to your mask or the alt key to subtract from the mask. 5. Clean up your mask as best you can with the magnetic lasso, then if necessary, switch to the polygon lasso to clean it up even further. 6. Save your Mask: Select Save Selection then save your file as a PSD file. In this way you can always reload the mask (Selection Load Selection) if you need to adjust it again later.

Page 4

Advanced to Web Design with Photoshop and Dreamweaver Notes

7. Copy your mask and paste it into a new file. Set the background color of that file to correspond to the color you want behind the image, and then save for the web. ASSIGNMENT 2 You have been asked to change the light green on the sides of the web page design and replace the plugs with a newly updated image of the plugs. There are two files, one is called plugs_easy_2mask.jpg and the other is called plugs_harder_2mask.jpg. Start with the easy plugs first. You should also update the light green on the side of the web page using Dreamweaver setting the background color of the table cell. Once you have a color you like, make that the background color of your new mask image. ASSIGNMENT 3 CREATE BUTTONS
Buttons

There are a number of ways to create web graphics, this class will focus on how to accomplish this task using Photoshop & Dreamweaver. 1. Create a new file, 130 pixels wide by 45 pixels high with a transparent background and RGB color mode. 2. Set the foreground color to #973324 3. Select the rounded corner rectangle tool, radius of 10 pixels and shape layers selected.

4. Draw a rectangle within the document bounds 5. Right click on the layer and select blending options Chose Bevel & Emboss inner bevel smooth direction up 6. Click on the text tool, Arial 14 pt gray, and add Contact Us 7. Save and then Export the file as contact_us_f0 8. Now change the text color to white, and reverse the bevel direction (down) 9. Save and then Export the file as contact_us_f1 10. Go into Dreamweaver and InsertInteractive ImagesRollover Image. The Insert Rollover Image dialog box appears. 11. Use contact_us_f0 as the start image and contact_us_f1 as the rollover 12. Complete the dialog box, then save and preview in a browser 13. Create additional buttons for all the other menu choices on your web page template. ASSIGNMENT 4 MENU BAR While buttons are often effective navigation choices, the current trend in web design is to create more of a unified navigation bar instead of individual buttons. In order to do this, we have to create a graphic, slice it up and then reassemble it using tables in Dreamweaver.

Page 5

Advanced to Web Design with Photoshop and Dreamweaver Notes

Create a Menu Bar with Gradient Fill

1. Create a new Photoshop document 800 pixels wide by 45 pixels high with a transparent background, and RGB color. 2. Select all 3. Click on the gradient fill and then create a custom gradient fill 4. In the middle of your rectangle, click and drag from the top to the bottom to fill with the gradient. 5. Now choose a white text and type the four menu choices evenly on your menu bar. 6. Select all the text layers and then align them: Layer Align Top Edges 7. Select all the text layers and distribute them evenly on your menu bar: Layer Distribute Left Edges 8. Now use the Slices tool to create slices around all of the menu text. Click on each slice and name it the name of the menu choice.

9. Now save for the weband make sure that you have output All Slices. 10. Go back into Photoshop and select all of the text layers, then change the color to #02fafc. 11. Rename the slices to menu name-f1. Now export the slices again. 12. Using Dreamweaver, add a table to one of the header rows beneath the header graphic. Make the table 1 row wide and as many columns as slices you created in your menu bar. 13. Add the non-interactive slices to your table by dragging them and dropping them into your table cells. 14. Add the interactive slices the same way you did with the buttons. 15. Create a custom menu bar for your own web page using the steps above. Pick a different gradient and color choices. CONGRATULATIONS You now have all the information you need to begin creating compelling webs graphics using Photoshop and Dreamweaver! WHERE TO GO FROM HERE Practice is the best way to improve your skills. Start improving the graphics on your website by adding new buttons, menu bars and images. Enroll in the other graphic design courses, especially Illustrator. There is always more to learn in Photoshop too, so take more classes in Photoshop too. Page 6