ART 170: Web Design 1

Transcription

1 Banner Design Project Overview & Objectives Everyone will design a banner for a veterinary clinic. Objective Summary of the Project General objectives for the project in its entirety are: Design a banner that best represents a veterinarian practice called Comfort Care Veterinary Clinic. You MUST use Fireworks to design, optimize, and export the banners. Create a large header banner with a seamless tiling background image. Create a second smaller footer banner, based on the first design idea. Create an alternative animated large header banner. Optimize and submit your final banners as Animated GIF or JPG files; the final animated banner will be saved and exported as an animated GIF and the static banner as a JPG. Keep copies of your original artwork files as Fireworks Native PNG files. Creative and artwork requirements are as follows: o Incorporate original ideas o Use original, vector artwork created in Fireworks o You may use photos as secondary design elements but they must be original photographs Typography, content and color choices are up to you o Create color palettes in your design that compliment one another and your theme o Consider how texture, pattern, gradients, etc., can be used to express your ideas o Consider scale, depth and positioning of items in your design. Consider layout, composition, color and texture concepts covered in Chapters 2, 3 and 4 of your textbook The Principles of Beautiful Web Design Create two sample HTML pages per instructions o Successfully add banner images and tiling background o Create another page with the animated banner and tiling background o Add text content o Create CSS to guide basic HTML tags o Link the static and animated banners to one another 1

2 WEEK ONE Objectives 1. Create a folder for your banner work on the server so that it is saved from week to week. 2. Experiment with different ideas: consider color schemes, masking techniques, vector shapes, text, and logo ideas. As you play with ideas, consider how a simple animation will eventually figure into the animated gif version of the banner. 3. Generate two different ideas for the static banner this week. We will look at them and do critiques one week from today. 4. Optimize the banner using the two or four up views to compare file sizes versus quality. 5. Export and upload the two versions to your web folder. Step by Step for Week One Begin work on the initial rough design ideas. Experiment in Fireworks, and consider creative interpretations of the theme and what it means to you. Incorporate unique ideas, and think outside of the rectangle. You will begin with the static (as opposed to animated) banner first. It's OK if these ideas are rough you will be revising them in the coming weeks. Just make sure you can explain your concepts clearly for critique. Setting up FTP and a Folder to Save the Banners: Set up a banner folder on the desktop. Launch Dreamweaver and select Site > New Site. Set up the banner site. (Give it a name, point to the desktop banner folder as the local site folder, and set up the server with the host, your username and password.) Launch Fireworks and create a new document o Size it 960 pixels wide by 300 pixels high and with a resolution of 72 and a background of white. The banner won t be 300 pixels high, but the added height will give you more space while you experiment. Save your native PNG file in Fireworks to your desktop banner folder. o Select File > Save As in Fireworks o Choose Fireworks PNG if it s not already selected Name your file banner01-yourname.png 2

3 Fw.png will ensure you are saving an original editable file with layers intact. Upload the banner to the banner folder on the server. Do this frequently as you work. Save early, save often! You can also save a copy to your Drop Box folder. This will give you another backup. You can access both the server and the Drop Box folder at home or on the computer labs so you can continue work at your convenience. Kuler: Creative Color Considerations Use the Kuler website or Fireworks extension to create interesting color combinations. Select Window > Extensions > Kuler to access its panel in Fireworks. Select a color scheme; from the arrow on the right, Save to Swatches Panel. o You can watch a video overview of Kuler at o Consider how color theory and color choices relate to your theme; consider legibility of type, content and the logo in your design. Techniques to Trigger Your Creativity To overcome the rectangular nature of the web, many designers place masked images on their pages. Fireworks provides three kinds of masks. Auto Vector Mask Vector Mask Bitmap Masks Bitmap Masks Bitmap masks hide bitmap image data using a pixel-based mask. You can create bitmap masks using other bitmap images, selections or the Brush tool. To create a selection for a mask, you can use any of the bitmap selection tools. Decide on the type of edge you want for the selection (Hard, Anti-alias, Feather) using the Live Marquee settings in the Properties panel. Then, just draw your selection. Using the Brush tool, you can easily create or edit the mask live on the canvas, just by painting. Black hides, white reveals, and shades of gray produce semi-transparency. If you set your brush color to a shade of gray, the pixels you paint over will be semitransparent. 1. Import an image. 2. Use a selection tool such as the polygon selection tool to draw around the area you want in the mask. 3. Feather the selection. 4. Click the Add Mask icon at the bottom of the Layers panel. 5. Use the brush tool (soft rounded works well) to edit the mask. 3

4 6. Black hides and white reveals. Vector Masks Vector masks can be applied to vectors, bitmaps, groups, or graphic symbols. Compared to bitmap masks, vector masks tend to have a higher degree of control and accuracy, because you use a path, not a brush, to create them. It s easy to change the fill or stroke of a vector mask. Generating the same type of effect with a bitmap mask can be more time-consuming. Vector masks use one of two modes: Path Outline or Grayscale Appearance. You can change the mode in the Properties panel. In Path Outline mode, the vector mask acts like a cookie cutter, using the shape of the path to act as the mask. In Grayscale Appearance, any bitmap information in the vector fill gets converted to a grayscale alpha channel. Grayscale Appearance uses the pixel values of the vector s fill and the vector shape itself to create the mask. If your vector mask has a range of tones in it such as a gradient fill the image will be hidden or revealed based on those tones. Just like with bitmap masks, black hides, white reveals, and shades of gray produce semi-transparency, as in this example, where a linear gradient has been used to fill the vector shape. 1. Import image to canvas. 2. Draw ellipse shape over it. 3. Use the white, black preset gradient. 4. Select the image and the ellipse shape. 5. Choose Modify > Mask > Group as Mask. 6. Use the small blue handle to reposition the mask. 7. Auto Vector Mask Command. Instant Masks Choose Commands > Creative > Auto Vector Mask. Creating the Static Banner In Fireworks 1. Select File>Import to place images on the page. 2. Navigate to the image you want to import. 3. Click and drag the cursor to the size you want the imported image to be. 4. Apply one of the masking techniques: bitmap, vector, or auto vector. 5. Apply creative text techniques such as text on a path. 6. Create a logo for the clinic Comfort Care Veterinary Clinic. 7. In the Optimize panel, select JPG as the image format. OPTMIZING AND EXPORTING IMAGES FOR THE WEB 4

5 Consider the following when preparing images for the web: FORMAT: Identify the appropriate file format for our image GIF, JPG or PNG; RESOLUTION: Optimize images by adjusting the resolution: o Resolution (DPI, dots per inch) for web images should be 72 DPI (in most cases). o High quality cameras/scanners may capture images at 300, 250 or 150 dpi. PHYSICAL SIZE: Optimize images by reducing the physical size (when possible); COMPRESSION: Optimize images by adjusting colors, palette, and compression; COLOR MODE: Set images to RGB color mode (adjust any print or scanned images); o Web images use the RGB color mode. o Images that come from a printer, may use PMS or CMYK color mode. QUALITY: Find a balance between quality and file size. Open each of your banner PNG files in Fireworks and do the following: Open the Optimize panel if it s not already open (Window > Optimize) o Select JPG or GIF from file format menu depending on whether it is a static or animated banner o Choose Adaptive from the optimized palette menu for GIF images o Experiment with the number of colors in your GIF, comparing quality to file size o Choose a quality in the quality slider for JPG images Choose the 2 Up or 4 Up button (upper left corner) o this will show the original as well as the optimized versions A summary of all optimization settings will display under the image in the 2Up or 4Up screen Select File > Export to save your JPG or GIF files in your banners folder 5