Getting started

A good way to start any project is to sit down with a blank sheet of paper and start sketching out an idea. Add notes, scribble, cross out things that don't work—overall, get some sense of where you're going. Then, create a list of assets needed to generate the layout you want or to pull motivation from. Do whatever you can to start with a plan.

In this tutorial, the visual assets and content are supplied in an organized collection of source files. This section will help you set up the project structure and understand the assets you'll use to construct your mockup.

Set up the project structure

It's a good idea to start your projects by taking a moment to think about file organization. There are two types of files you'll work with: source files and published files. Source files are the editable master files that you'll use to build and edit the site. Published files are the exported versions of the source files, along with supporting files used by the web page's content. Only the published files are uploaded to a server on the Internet.

Set up the sample files for the tutorial:

1. Download the project file (cs4_project.zip [ZIP, 11 MB]) and unzip the contents to your desktop or another folder on your computer.
2. Open the CS4_Project folder. Notice that the project folder contains a subfolder named _Source. The _Source folder contains the sample files for the tutorial separated by product (see Figure 2). You'll reference these assets while creating your mockup and source files in the steps to come.

   

   Figure 2. CS4_Project root folder and _Source folder containing sample files

The CS4_Project folder acts as the root folder for the project containing all the published files alongside the _Source folder. As you work, you'll save source files to the _Source folder and published files to the CS4_Project folder. When the site is complete, you'll upload all the files in the root folder (except for those in the _Source folder) to a server.

Understanding the sample files

There are three types of media assets supplied with this tutorial: images, audio, and text.

Computer images come in two general formats: vector and bitmap. Vector images are generated from mathematical equations that define shapes through lines and points. Vector images are resolution-independent and tend to have smaller file sizes than bitmap images. Bitmap images are composed of a grid of color pixels that collectively represent a picture—the more pixels in the grid, the higher the resolution. Bitmap images tend to have larger file sizes, but do a better job at describing complex photographic content. In terms of the CS4 workflow, you'll look to Photoshop to handle bitmap image manipulation and Illustrator to draw and edit vector content.

Audio generally comes in WAV (Windows) or AIFF (Mac OS) format for uncompressed audio, and MP3 format for compressed audio. In the CS4 workflow, you'll create editable audio source files using the new Soundbooth Sound (ASND) format. Doing so will allow you to make roundtrip edits by starting Soundbooth from the Edit With Soundbooth CS4 option. Once the file is saved in Soundbooth, you can return to Flash and hear the updates without having to import and replace the file.

Take a look at the next section to get the context of the sample files and the tools they were created in.

Quick tour of Photoshop CS4

Photoshop is a powerful image-editing tool with a wide range of applications. In the print industry, Photoshop is commonly used for high-resolution image editing and image production. In the web industry, Photoshop is commonly used for complex image compositing, photo manipulation, and image restoration. In a CS4 project workflow, Photoshop is used to generate the various bitmap image assets. The assets remain editable in Photoshop source files (PSD), but can also be exported to flattened image formats (for example, JPG, PNG) for post-production touch ups in your source files.

Follow these steps to explore the background image in Photoshop:

1. Open the city_background.psd file from the CS4_Project/_Source/Photoshop folder in the sample files.
2. Notice the main elements of the workspace in Figure 3, including the Tools panel on the left, the Options bar above the Canvas, the Color and Adjustment panels, and the Layers panel on the right.
3. Take a close look at the Layers panel. Compositing images with layer effects and blend modes is one of the main strengths of Photoshop when it comes to web page graphics.

4. Try clicking on an icon in the Adjustments panel to see what happens to the image.

   

   Figure 3. Main elements of the Photoshop CS4 workspace

For more information about using Photoshop, please see Using Adobe Photoshop CS4 in the documentation.

Quick tour of Illustrator CS4

Illustrator is a high-end vector graphics editing tool most commonly used for creating logos, text layouts, and complex illustrative content. Designing with vector content allows you to use graphics in high-resolution or low-resolution implementations, while keeping them editable. In the project workflow, Illustrator is used to generate the logo, tagline text, and name text for use in the interactive header layout. While vector graphics remain editable when used elsewhere, the Illustrator source files (AI) are preferred for making edits.

Follow these steps to explore the logo image in Illustrator:

1. Open the logo.ai file from the CS4_Project/_Source/Illustrator folder in the sample files you downloaded.
2. Notice the main elements of the workspace in Figure 4, including the Tools panel of the left, the Options bar above the Artboard, the color group and transform group panels, and the Layers panel on the right.

3. The Pen tool for drawing vectors is more of a core utility in Illustrator than in other drawing programs. Take a moment to experiment with drawing points and lines using the Pen tool.

   Tip: As you click to add a point, drag the Pen tool to bend the curve in the Bezier path.

   

   Figure 4. The main elements of the Illustrator CS4 workspace

For more information about using Illustrator, please see Using Adobe Illustrator CS4 in the documentation.

Quick tour of Soundbooth CS4

Soundbooth is an audio-editing and creation tool designed to help you easily record and edit audio for use with Flash. Soundbooth records audio in an uncompressed format and exports the audio to a number of compressed file types. New to Soundbooth CS4 is the ability to save snapshots of your work as your make edits using the Soundbooth Sound (ASND) format. Also new in Soundbooth CS4, is the ability to create multitrack ASND files (see Figure 5). In the CS4 project workflow, Soundbooth is used to generate and edit the soundtrack audio in ASND format.

Follow these steps to explore the soundtrack file in Soundbooth:

1. Open the soundtrack.asnd file from the CS4_Project/_Source/Soundbooth folder in the sample files you downloaded.
2. Notice that the screen is split into two sides with the Files, Tasks, and History panels lining the left side and the waveform editing view on the right (see Figure 5).
3. Take a moment to play with the editing controls. Notice the multitrack arrangement in the workspace. Experiment by moving the smaller sound effect to a different time—it's quite easy to change the timing of elements in the file.
4. Click on the Resource Central tab to check out online resources you can use to build sound scores and effects for your projects.

   

   Figure 5. Main elements of the Soundbooth CS4 workspace

For more information about using Soundbooth, please see Using Adobe Soundbooth CS4 in the documentation.

One last thing to note is that you can manage all your source files and published files in Adobe Bridge, which is installed with Creative Suite 4. Bridge is a file browser and media manager that you can use to search for files and manage files between projects. Of particular interest is the ability to tag content with metadata for more meaningful searches and the ability to synchronize with Adobe Version Cue and Adobe Device Central. For more information on using Bridge, see Using Adobe Bridge and Adobe Version Cue CS4 in the documentation.

That's it for the overview. You'll explore Fireworks, Flash, and Dreamweaver in the following sections.

Page 2 of 6

Previous Page

Next Page