Web Sites and Home Pages

Pulling it all together to make eye-popping web sites and home pages

This is the big payoff. Bring together all you've learned and mix in more new techniques to build these exciting and practical home pages and sites. In this tutorial you get a real-world sense of how to use what you know to design eye-popping, useful Web pages with that Wow quality that will keep viewers coming back for more. By the time you've finished this tutorial, you'll be confident that you've mastered the graphic techniques, tips, and tricks you need to make some of the best-looking sites on the Web.

In this tutorial:

1. Web Site and Home Pages
2. Getting in the Game
3. Showing Off
4. Getting Serious
5. Create Game Site
6. Applying Patterns to Web Graphics
7. Web Pattern Recipes
8. Gallery Site with Viewer Feedback
9. Adding File Information to Images
10. Customizing a Web Photo Gallery
11. Portfolio Site
12. Information Site
13. Flash Splash Page

Creating and Importing External Data Sets

The last project, Creating Dynamic Flash Web Banners, covered how to create data sets in ImageReady's Variables dialog box for use with variables in a PSD file. Another way to make data sets for that purpose is to enter data into an external spreadsheet and then import data sets from the spreadsheet into ImageReady. This is the easier way to go if you're working with preexisting data sets, or if you have lots of data or variables.

Create a Data Set

Let's take a look at how to make an external data set instead of the data set we created in ImageReady in the last project, Creating Dynamic Flash Web Banners. We'll use Microsoft Excel here, but you can use any spreadsheet editor that saves files in tab-delimited text format.

In the first row of the spreadsheet, type the names of the two variables that will change in each version of your Web banners: page_name and game_name. Don't use spaces or unusual text characters.

In the page_name column enter each of the text values that will replace the words text here in the Web banners you plan to make: home, links, games, and about us, in that order. In the game_name column enter the text value of each game that will replace the words GAME HERE in your Web banners: SLAM, KINGPIN, B-BALL, and WARRIOR, in that order. Each row of the spreadsheet now contains a data set made up of the two values that appear together in a Web banner. Save the spreadsheet in a tab-delimited format. In Excel, choose Format: Text (tab delimited) in the Save dialog box.

Import a Data Set]

To import your external data sets, choose Image>Variables to open the Variables dialog box A. In that dialog box, choose Define from the top menu. To define the first variable, choose text here from the Layer menu, check Text Replacement, and type page_name in the Name field. Then choose GAME HERE from the Layer menu, check Text Replacement, and type game_nameM in the Name field.

Choose Data Sets from the top menu. Click the Import button B. In the Import Variable Data Sets dialog box C, check Use First Column for Data Set Names, and Replace Existing Data Sets. Click the Choose button and navigate to your spreadsheet file. Click OK. Click the forward arrow in the Variables dialog box to view each of your data sets in action. 

In this tutorial:

1. Automation
2. Batch Processing Photo Thumbnails
3. Making the Most of Actions
4. Making Multiple Web Graphics
5. Demystifying Droplets
6. Preparing Photos for Web with Conditional Actions
7. Design Multiple Pages in a Single File
8. Linking HTML Pages from Layer Comps
9. Outputting Multiple Linked Web Pages
10. Creating Dynamic Flash Web Banners
11. Creating and Importing External Data Sets

Creating Dynamic Flash Web Banners

In this advanced project you'll automatically create variations on a Flash Web banner using data sets and dynamic text variables. You can use the resulting Web banners to spice up individual pages in a Web site.

1.	Create a Fly-In Animation Get started by making a simple tweened animation in ImageReady. We'll walk you through the process, but if you have any questions about animations review previous tutorial, Animation. Choose Window>Animation to open the Animation palette. Click the Duplicate Animation Frame icon at the bottom of the Animation palette A to create Frame 2. In the Layers palette, select the text here layer B. Select the Move tool in the toolbox, and press the right arrow key on your keyboard several times to move the text to the right until it is outside the document window and no longer visible in the image C. With Frame 2 selected, click the Tween icon at the bottom of the Animation palette D. In the Tween dialog box E, choose Tween With: Previous Frame, and Frames to Add: 3. Leave all three Parameters checked and click OK. Click the side arrow on the Animation palette F and choose Reverse Frames.
2.	Add a Fade-In Animation Select Frame 5 in the Animation palette. In the Layers palette, select the GAME HERE layer and click in the Visibility field to the left of the GAME HERE layer to add an Eye icon A, making the words GAME HERE visible in the image. Change the Opacity field at the top of the Layers palette to 0% B. Click the Duplicate Animation Frame icon at the bottom of the Animation palette C to create Frame 6. With Frame 6 selected, change the Opacity field in the Layers palette back to 100%. Then click the Tween icon D. Leave the options in the Tween dialog box as you set them in the previous step and click OK. You now have nine frames in the animation. Click the Play button at the bottom of the Animation palette E to see the words text here fly in from the right, followed by the words GAME HERE fading into view. Select Frame 9 in the Animation palette so all of the elements are visible in the document window.
3.	Define Text Variables Now things get really interesting. You'll define two variables, one for each of the text layers. Choose Image>Variables>Define. In the Variables dialog box, choose text here from the Layer menu A to define the source of the first variable. Check Text Replacement to establish that this is a text variable B. Type page name as the name of this variable, being careful not to include spaces or unusual characters in the variable name C. Don't click OK yet. To define the second variable, choose GAME HERE from the Layer menu D in the Variables dialog box, check Text Replacement E, and type game_name as the name of this variable F.
4.	Create the Home Banner Data Set In the next two steps you'll create a set of data that will be used to replace the words text here and GAME HERE on one of the Web banners you're creating—a banner for a home page. First you'll create the data for the page_name variable (the data that will replace the words text here on the home Web banner). Choose Data Sets from the menu at the top of the Variables dialog box A. Set the fields in the Data Sets panel of the Variables dialog box as follows: Type Home Data Set in the Data Set field B. This names the set of data that will be used for the home Web banner. This data set will have two variables—the page_name variable and the game_name variable. Choose page_name from the Name menu C. This is the name of the variable you're working on. You'll see this variable highlighted in the variables list at the bottom of the dialog box D. In the Value field, type home E. This is the text that will appear in place of the words text here on the home Web banner. TIP Understanding What You've Done. This is pretty advanced stuff, but if you understand what you've done so far, making the rest of the data sets will be easy. You may want to reread Steps 3 through 5 to make sure you understand how you made the variables and the home data set before moving on to Step 6.
5.	Add to the Home Banner Data Set Now you'll create the data for the game_name variable (the data that will replace the words GAME HERE on the home Web banner). Choose game_name from the Name menu A. You'll see this variable highlighted in the variables list at the bottom of the dialog box B. In the Value field type SLAM—the name of a fictitious game C. This is the text that will appear in place of the words GAME HERE on your home Web banner. Leave this dialog box open for the next steps. Create the Links Banner Data Set Now you'll make another data set that will replace the page_name and game_name variables on another Web banner—a banner for a links page. In the Variables dialog box, make a new data set by clicking the New Data Set icon A. Then set the rest of the fields as follows to create data for the page_name variable in this data set: Type Links Data Set in the Data Set field to name this new data set B. Choose page_name from the Name menu C. Type links in the Value field. This is the text that will appear in place of the words text here on the links Web banner D. Now choose game_name from the Name menu E to create data for the second variable in this data set. In the Value field type KINGPIN—the name of another game F. This is the text that will appear in place of the words GAME HERE on your links Web banner.
7.	Create the Games Data Set Now make a third data set for another Web banner, this one for a games page. There's nothing new here, so relax. Make a new data set by clicking the New Data Set icon in the Variables dialog box A. Set the rest of the fields as follows to create data for the page_name variable in this data set: Type Games Data Set in the Data Set field B. Choose page_name from the Name menu C. Type games in the Value field D. Now choose game_name from the Name menu E. And in the Value field type B-BALL, the name of another game F.
	Create the About Us Data Set Now you'll make the last data set, this one for a Web banner to use on an about us page. This step is just like the last two steps. Are you starting to get the picture? Make a new data set by clicking the New Data Set icon in the Variables dialog box A. Set the rest of the fields as follows to create data for the page_name variable in this data set: Type About Us Data Set in the Data Set field B. Choose page_name from the Name menu C. Type about us in the Value field D. Now choose game_name from the Name menu E. And in the Value field type WARRIOR, the name of another game F.
9.	Preview the Web Banners Click the forward arrow in the Variables dialog box A to cycle through the data sets you created. Leave Preview checked B to see a live preview of each of the data sets. If you notice any errors, correct them by editing the fields in the Variables dialog box. When you're satisfied, click OK. Choose File>Save to save the PSD file with its data sets. Export the Banners as a Flash File Each of the four data sets you've made will generate a separate Web banner. You can export them all together as a Flash movie (SWF format). This allows you to check that all the banners export correctly and gives you a quick reference file. Choose File>Export>Macro-media®Flash© SWF. This opens the Macromedia Flash (SWF) Export dialog box, where you'll set export options in the next step. CAUTION Truncated Text. Occasionally, the text in a dynamic text file will look truncated in the exported file. Use the Flash movie you exported in this step to check for truncated text. If some text is cut off, go back to your original PSD file and try substituting a different font. Make sure the original text layer (text here, GAMES HERE) is longer than the text in each of your data sets.
11.	Set SWF Export Options In the Macromedia Flash (SWF) Export dialog box, set the following options: Check Preserve Appearance A. This ensures that the text retains its appearance. Check Generate HTML B. This creates an HTML file to display the SWF in a Web browser. Check Enable Dynamic Text C. This is necessary to make your dynamic text variables work. Choose Full Set from the Embed Fonts menu D. This embeds a full set of fonts in your Flash movie. Under Bitmap Options, leave Format set to Auto Select, and set JPEG Quality to 50 E. This controls how the logo and background are optimized. Click OK to open the Export as Macromedia© SWF dialog box F. Create a new output folder, and click OK. Open the resulting HTML file in a Web browser to view all four of your Web banners in a Flash movie G.
12.	Export Individual Flash Banners You can also export the Web banners generated by your data sets as individual Flash movies so that you can add each of them to a different page in a Web site. Choose File>Export>Data Sets as Files. Click Choose to choose an output folder A. Leave Data Set set to All Data Sets B. Choose Macromedia®Flash© (.swf) from the Save As menu C. Leave the SWF settings as they were in the last step. Otherwise you'd click Set D to open the SWF Export dialog box. Click OK. You'll find four SWF files on your hard drive, each one a separate Web banner ready to be added to individual pages in a site-building program.

In this tutorial:

1. Automation
2. Batch Processing Photo Thumbnails
3. Making the Most of Actions
4. Making Multiple Web Graphics
5. Demystifying Droplets
6. Preparing Photos for Web with Conditional Actions
7. Design Multiple Pages in a Single File
8. Linking HTML Pages from Layer Comps
9. Outputting Multiple Linked Web Pages
10. Creating Dynamic Flash Web Banners
11. Creating and Importing External Data Sets