Chapter 11 Graphics and Site Production

Chapter 11 Graphics and Site Production Site production is concerned with actually creating all the components that will ¯t together and form the desired site. Typically a project team has already made substantial progress and completed the formulation of these items: ² Text-only site with structure, navigation system, typical pages, ¯ll-out forms, and textual content. ² Look and feel of site: font, spacing, color, and layout. ² Design of graphical elements: site entry, rollovers, graphics and images. Based on the graphical designs, image processing tools such as Photoshop can be used to produce the desired image ¯les are ready to drop into the designated spaces in the layout. This is what we call graphics production. Graphics production involves the manufacture of various elements such as navigation bars, hand-drawn images, photographs, charts, illustration and so on. These elements are referred to as the \¯nal art." This is normally considered a fairly mechanical procedure, one in which you follow speci¯c steps to produce the graphical elements needed. With graphics production done, the project team is ready to produce the site. Figure 11.1 shows an overview of the site production process. The three boxes on the third row in this ¯gure constitute the input to the production process. Central to the production e®ort is an 513 514 CHAPTER 11. GRAPHICS AND SITE PRODUCTION Integrated Development Environment (IDE) such as Macromedia Dreamweaver. The IDE provide an e®ective visual environment to create layout grids, drop in graphics and text, install rollovers, and adjust HTML and styles. The IDE can then generate HTML page templates, style sheets (CSS), and Javascript code. Usually a set of templates are created for various parts of a site. The generated ¯les often need hand tuning and editing to become the ¯nal ¯les and templates used to obtain the ¯nal pages for the draft site. Figure 11.1: Site Production Overview Hand tuning can simplify HTML code, make it XHTML compliant, add CSS rules with sophisticated selectors, and customize Javascript code for the site. Most pages can be produced by simply dropping contents into an appropriate template. Sometimes other adjustments are needed. The ¯nal pages will combine audio/video and CGI ¯les, produced using other appropriate tools, to for the complete draft site. Hence, the site production achieves the Brooks/Cole book/January 28, 2003 11.1. GRAPHICS FOR THE WEB: USING PHOTOSHOP 515 integration of graphics, HTML code, style sheets, and ultimately client-side and server-side programming. Most Web developers have several production sta® to do this work, but for independent contractors, or freelancers, this is another task to perform themselves. As with any task, the ability to control all aspects of the creative process is highly rewarding. Regardless of who does the production, it is critical that all members of the Web team understand the basics of site production, seeing how their expertise ¯ts into the ¯nal product. 11.1 Graphics for the Web: Using Photoshop Once the text-only site and page layouts have been approved, and the client has given you permission to proceed, it is time to prepare graphics. This phase of the project is often referred to as \production" phase in print, because it is here, that you actually produce the \¯nal art." For art production, good software tools are indispensible. In our coverage here, typical tools such as Photoshop and Freehand will be used heavily and you will learn how to use them as well. Once you learn the concepts and techniques, using other tools will be quite easy. Perhaps the best way to begin our introduction to creating images is to describe how to perform image processing in Photoshop. Photoshop was originally conceived as a photo retouching tool. Over the years, its capabilities expanded to an image editing and color painting tool. Photoshop is primarily a raster image program used for working with photographs. Although its capabilities have vastly expanded with every new version, Photoshop's pri- mary functions are to merge and edit color images, to retouch proofs, and to create original or composite artwork, collages or photo montages for print or on the Web. Photoshop is frequently used by printers and service bureaus for generating color separations. There are many good \how to" books which explain how to execute particular techniques, including a whole series from Adobe Corporation. This chapter will outline major topics and Brooks/Cole book/January 28, 2003 516 CHAPTER 11. GRAPHICS AND SITE PRODUCTION help you get started. The Photoshop Image Editing Model One way to think about Photoshop is to imagine a big canvas made up of pixels. Each image you open has its own pixels with a di®erent color model. Photoshop allows you to open and combine many di®erent ¯le types, but you will get the most ﬂexibility in working with the native PSD ¯les, or Photoshop documents. A PSD image can be saved in any other format you wish such as EPS, TIF, GIF, JPG, etc. After starting Photoshop, you either open an existing image or create a new image to process. Then next thing you do is to select a color mode in which to do work. Available modes include Bitmap, Grayscale, Duotone, Indexed Color, RGB Color, CMYK Color, Lab Color, and Multi Channel. Each mode gives you slightly di®erent tool options which are automatically provided with each mode. For example, If you're working only with a gray scale image for print, you would select the Image>Grayscale option. If you're working on a Web image, you would choose the RGB mode. You can switch modes any time you wish by simply resaving in a di®erent mode. Let's say that you want to reduce a full color image to a Duotone image and then save it as JPG for your site. You would open the image in RGB mode then switch to Grayscale to strip all colors in the original RGB image, select Duotone option to create your duotone, and make color adjustments. To save that image as a JPG however, you need to go back to the RGB mode and then save as JPG. All JPGs must be saved from the RGB mode. To combine, merge or join images from several di®erent ¯les is not a problem. You simply open the various ¯les into Photoshop and drag and drop to one another. Index ¯les have to be converted to native Photoshop ¯les before they can be moved (File>Save As). This way you can drag and drop all the images into one ¯le and combine them using layers. The image being drag-dropped will assume the size and mode of the receiving host image. So, if you drag and drop a 300K, CMYK image into an 100 K RGB ¯le, the CMYK image will come into a separate layer and it will become 100 K RGB ¯le. You can continue to work in Brooks/Cole book/January 28, 2003 11.2. CROPPING AND SCANNING 517 the RGB image and when you're ¯nished with your task, you can again save the image as a JPG or any ¯le format you wish. The process for creating ¯nal art usually goes like this: ² Obtain the image: digital photo, scanned photograph or drawing ² Adjust the image in Photoshop: color balance, cropping, resizing, photo manipulation ² Process or edit the image in Photoshop using layers. ² If necessary, divide (cut-up) the image into smaller parts to ¯t into the layout grid. ² Save images as JPG or GIF. Photographs look best as JPGs. Most icons, logos, and line drawings look best saved as GIFs. ² Reassemble cut-up images (now GIFs or JPGs) in your layout gird (normally HTML tables). 11.2 Cropping and Scanning Most Web graphics, but certainly not all, begin with an existing image, which can be used in its original form, cropped, cut, manipulated, or combined with other images. However, before we continue to examine the actual process of scanning, we need to reiterate that any scanned or printed graphic, text, or sound is protected under the constitution whether it has a copyright symbol or not (www.whatiscopyright.org). Taking someone else's printed or digital images is illegal, as is stated in the Bern Convention for the Protection of Literary and Artis- tic Works (Paris Text 1971) Article 2 (www.law.cornell.edu/treaties/berne/2.html). If you still have questions about copyrights, there are many good sites which summarize the laws which can help you to understand what you need to know before scanning existing images. Copyright laws are speci¯c and stringent on this topic, and the authors of this book would like to encourage you to consider this before scanning any images which you do not own or Brooks/Cole book/January 28, 2003 518 CHAPTER 11. GRAPHICS AND SITE PRODUCTION have permission to use. The safest way to stay within the limits of this law, is to generate your own imagery, commission others to do it for you, or purchase royalty free images with unlimited usage. The general "rule of thumb" is this \If you ¯nd it in print or on the Web, it is not yours to use, reuse, change or recreate." Brad Templeton explains some of the myths about copyrights in his article titled, \10 Big Myths About Copyright Explained" at www.templetons.com/brad/copymyths.html. The toddler image in Figure 9.2 was scanned on a Umax, Astra 1200, which costs less than US $100. Scanners are often sold or bundled with other software, such as Photoshop or Illustrator.

Load more