Best Tutorials of the Month

Paint With Fire

In real life, painting with fire might be considered dangerous and possibly illegal. In Photoshop, however, painting with fire can produce stunning results. This tutorial from Digital Arts demonstrates how to create a flaming person in Photoshop.
Visit Tutorial

Using Lighting, Atmospherics and Digital Illustration Techniques for Matte Painting

To create a realistic matte painting, or any artwork for that matter, it is important to understand the properties of light, atmospherics, color and perspective. This tutorial from Creative Fan demonstrates how to use these principles to create a stunning landscape matte painting.
Visit Tutorial

Create a Refreshing Beer Themed Poster Design in Photoshop

When you create a print advertisement, it’s important that all the elements of your composition are geared towards selling a product and promoting a brand. This tutorial from Colorburned demonstrates how to produce a beautiful beer-themed advertisement in Photoshop.
Visit Tutorial

Combining Custom Brushes for Wild Effects in Photoshop

Photoshop brushes are one of the most powerful tools in Photoshop’s arsenal. In this tutorial, Creative Fan makes a second appearance in this round up with this really nice tutorial demonstrating how to use custom brushes to produce wild effects in Photoshop.
Visit Tutorial

Correcting Exposure with the Shadows & Highlights Tool

Often, when taking pictures, it’s difficult, sometimes impossible, to get the perfect exposure on everything within the frame. When shooting outdoors, you’re bound to over or under-expose parts of your shot. This tutorial from Tutorial9 demonstrates how to use Photoshop’s Shadow/Highlight adjustment to maximize the potential of your shots.
Visit Tutorial

Create a Scene with Retro-futuristic-Inspired Light Effects

Photoshop and Illustrator make a powerful combination. You can often produce stunning results by creating objects in Illustrator and bringing them into Photoshop. This tutorial from Design Instruct demonstrates how to produce stylish custom patterns and vector shapes and import them into Photoshop to bring them to life.
Visit Tutorial

Flash Splash Page

We'll finish up with a big splash. You'll make a splash page for a Web site that includes a Flash animation that tests whether a viewer has the Flash player installed on her computer.

1.	Start with a Splash Many sites use a splash page as the gateway to the site. This splash page is all that an introductory page should be. It uses animation to catch viewers' attention, and a sexy three–dimensional graphic to entice them to delve further into the site. Most importantly, it serves a real purpose. This splash page offers viewers a test of whether they have the Flash Player—which is necessary to enjoy a Flash-based Web site-. And if they don't, there's a quick link to download the player. We used Photoshop to make the dimensional graphic for this page. You'll work in ImageReady to animate the graphic and export it as a Flash movie. TIP Flash Capability in ImageReady. In case you started reading from the back of the book (we've been known to do it ourselves), we want to be sure you know that you can export movies in Flash format straight from ImageReady. You can also export ImageReady layers as individual Flash files for import into Flash, and you can create Flash movies with variables and dynamic data in ImageReady.
2.	Transform the Ball You'll be amazed at how easy it is to make layered artwork for an animation of a sphere pulsing. In the Layers palette, double-click the layer name on the Ball layer and rename that layer Ball1 to correspond to the animation frame on which it will be first visible. Then Control/right-click the Ball1 layer, choose Duplicate Layer from the pop-up menu, and name the duplicate layer Ball2. Click in the Visibility field of the Ball1 layer to turn its Eye icon off A, and click in the Visibility field of the Ball2 layer to turn its Eye icon on B. With the Ball2 layer selected, choose Edit>Transform>Scale. Hold the Alt/Option key as you click on the center anchor point at the top of the bounding box C.and drag down to compress the height of the ball from the top and bottom. If you want to be precise, keep your eye on the Height field in the Options bar, dragging down until the original number there (173 px) is reduced to 149 px. D. Click the big checkmark on the Options bar E to exit transform mode. TIP Turn Off Layer Edges. ImageReady displays a blue line around the content of a selected layer. If you find that distracting, choose View>Show>Layer Edges to toggle that option off.
3.	Transform Another Ball Repeat the preceding step, duplicating Ball1 and naming the duplicate layer Ball3. Turn off the visibility of the Ball1 and Ball2 layers and turn on the visibility of the Ball3 layer. Compress Ball3 more than Ball2 by Option/Alt-dragging the center anchor point at the top of its transform bounding box down until the Height field in the Options bar reads 107 px. Make Frame 1 of the Animation Now that you've made the layered artwork, you're ready to create the animation in ImageReady. This simple animation is made by clicking in the Visibility field of each ball layer to turn its Eye icon on or off on each frame. Open the Animation palette, which automatically displays Frame 1 A. In the Layers palette, set the layer visibility as follows B: Ball1 layer on Ball2 layer off Ball3 layer off Make Frame 2 of the Animation Click the Duplicate Animation Frame icon A at the bottom of the Animation palette to create Frame 2. With Frame 2 selected, set layer visibility as follows: Ball2 layer on Ball1 layer off Ball3 layer off Make Frame 3 of the Animation Click the Duplicate Animation Frame icon at the bottom of the Animation palette to create Frame 3. With Frame 3 selected, set layer visibility as follows A: Ball3 layer on Ball1 layer off Ball2 layer off Make Frame 4 of the Animation Click the Duplicate Animation Frame icon A at the bottom of the Animation palette to create Frame 4. With Frame 4 selected, set layer visibility as follows B: Ball2 layer on Ball1 layer off Ball3 layer off Set the Animation Time Delay In this step you'll set the time delay between frames. With Frame 4 highlighted in the Animation palette, hold the Shift key and click on Frame 1 to select all the frames. Click the Time Delay label under any frame A and choose 0.2 sec. Click the Play arrow B at the bottom of the Animation palette to preview the animation in ImageReady. Click the same button to stop the preview. Sweet!
9.	Add Text Select the Type tool in the toolbox, and choose white and a Sans Serif font in the Options bar. Type: To enjoy this site you will need to have Flash® Player installed. Use the Move tool to move the text into place under the ball A. (Selecting the Move tool also commits the type and exits text edit mode, so you're ready to add another type layer.) Type: If you see a ball moving in the center of the page click HERE Press Return/Enter, and type: Otherwise, get Flash® Player HERE Highlight the last two lines of text, and click the Align Text Right icon in the Options bar. Use the Move tool to move this text into place at the bottom-right corner of the image B. Make Image Map Hot Spots Select the Image Map Rectangle tool in the toolbox A. Drag rectangular hot spots around each of the two words HERE. Select a hot spot with the Image Map Select tool B. In the URL field of the Image Map palette C.(Window>Image Map) add a relative link (like contact.htm) to a page you plan to add to the site. For the second hot spot add a full link (including http://) to an external site where a viewer can download the Flash® Player. TIP Registered Trademark Symbol. To insert a registered trademark symbol, press Command-R/Alt-0174. Highlight the symbol and click the Character palette icon in the Options bar. In the Character palette, click the Superscript button.
11.	Prepare a Slice Around the Ball If the fully round ball is not visible, turn on the Eye icon on the Ball1 layer in the Layers palette. Select the Slice tool in the toolbox and draw a slice around the ball no bigger than its black glow A. In the Slice palette (Window>Slice), name the slice Ball B. Choose Slices>Group Slices into Table from the main menu bar. A table symbol now appears in the Ball slice C. Putting this slice alone in a nested table as you just did, rather than leaving it as a cell in a larger table, which is the default behavior, will help keep the area from collapsing in the HTML file when you remove the ball image later in this project. Optimize the Slices The file now contains one user slice around the ball and several auto slices that ImageReady made to fill in the surrounding area.You'll optimize these slices in this step. Click on the Optimized tab in the document window A so you can see a preview of the image with the optimization settings you choose. Open the Optimize palette (Window>Optimize), and click the double-pointed arrow on its tab B to see all its settings. Select the Slice Select tool in the toolbox C, and click on the Ball slice in the image. In the Optimize palette, choose the following settings: Format: GIF (This has to be a GIF because it's an animation. JPEG does not support animation.) Reduction: Selective Colors: 256 Dither Method: None Transparency: Checked Add Metadata: Unchecked Repeat this on one of the auto slices. TIP Optimizing an Animation. To learn more about optimizing an animation.
13.	Set the Page Background Color Choose File>Output Settings> Background. In the Output Settings dialog box, click in the BG Color field A and choose black (#000000) in the Color Picker that opens. Click OK in both dialog boxes. This sets the background color of the Web page that will show in a browser window that is stretched larger than this image. Save with a GIF Animation Choose File>Save Optimized As. Set Format/Save As Type to HTML and Images A. Click New Folder B and make a new folder in which you'll save these files. Set Slices to All Slices C. Click Save. ImageReady generates a folder of images that contains the Ball.gif animation D generated from your Ball slice. It also produces an HTML file, with a nested table to hold the animation in place. Export ball.gif as a SWF In ImageReady, choose File>Open and navigate to Ball.gif in the folder of images you generated in the last step. With Ball.gif open in ImageReady, Choose File>Export>Macromedia® Flash© SWF. In the SWF Export dialog box, click in the SWF bgcolor field A and choose black from the Color Picker. Uncheck Generate HTML B to save the SWF without an HTML file. Set JPEG Quality to about 50 C. (This setting will apply to the graphics in this animation.) Click OK. In the next Export dialog box, click Save to save the animation as Ball.swf D. Replace the GIF with the SWF In Dreamweaver or another site-building program, open the HTML file you saved in Step 14. Delete Ball.gif and substitute the Ball.swf file that you exported in the last step. The Flash animation is now incorporated in your splash page! INSIGHT Technique Summary. To review—you saved an HTML file that incorporates a GIF animation, and then re-exported that GIF animation as a SWF Flash movie. You can substitute the GIF animation for the SWF animation by opening the HTML file in a site-building program like Dreamweaver.

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

Information Site

This home page for an information site has lots of text elements. You'll use tables and CSS to organize and output text graphics and coded text for display on the Web. This project takes place in ImageReady.

1.	Decide on Graphics or HTML Text When you're laying out a page in Photoshop or ImageReady that has lots of text, one of your first decisions is when to use text saved as a graphic and when to use HTML text. The advantage of HTML text is that it is much smaller in file size than text graphics. It can also be easier to change when you're updating a page. However, you can't guarantee what font or font size will be used to display standard HTML text at the viewer's end. If you turn your text into graphics, you can use any font and be assured of how the text will appear to your audience. However, the total size of the page will be noticeably larger. In general, graphics are the way to go for headlines, logos, and text in fancy fonts A, and HTML text makes sense for blocks of small text B. In this project, you'll learn how to prepare both kinds of text when you're laying out a page in ImageReady. Shape the Interface The layout of this page is simple but elegant. There are no loud graphics to compete with its main product-—information. We prepared most of the background elements by creating rectangular color blocks that organize and call attention to the text. In this step you'll set off the secondary navigation (1800s, 1900s, 2000s) by creating a tabbed navigation bar. Choose View>Rulers to turn on ImageReady's rulers. Click in the horizontal ruler and drag out a horizontal guide, positioning it at the baseline of the info site text A. Use the Move tool if you need to tweak the guide. In the Layers palette, click the arrow on the Top Bar layer set B to reveal the contents of that layer set, and select the Bar layer. Select the Polygonal Lasso tool from behind the Rectangular Marquee tool in ImageReady's toolbox C. Hold down the Shift key (which constrains the tool to making straight lines and 45° angles). Click at the following points: the left edge of the guide, just under the e in the word site, on the top of the green bar, and at the right edge of the document. Then click around the outside of the document window to come back to the beginning of your selection D. Choose Select>Inverse, and press the Delete/Backspace key to cut out a tab shape E. Press Command/Ctrl-D to deselect. Add Text Links Select the Type tool in the toolbox. Choose white and a Sans Serif font in the Options bar. Type a line of text links: 1800s 1900s 2000s A. Click the checkmark on the Options bar to commit the type. Then choose a script font and create another Type layer by typing link1 link2 link3 link4 link5 B. Use the Move tool to position these two type layers as in the illustration. Create Main Links In this step you'll add text and bullet links to the left side of the page. Click the arrow next to the TextLeft layer set to expand that layer set A. Control/right-click the link here type layer and choose Duplicate Layer from the contextual menu. Repeat this until you have a total of six link here layers B. Select and Distribute the Links Now you'll select and automatically distribute the six link layers. With the link here layer selected, hold the Shift key and click on the link here copy 5 layer at the top of the layer stack A. Select the Move tool in the toolbox to display alignment and distribution buttons in the Options bar. Type 20 px in the box at the far right of the Options bar B, and click the Distribute Layer Vertical Space button C. This evenly distributes the selected layers vertically, with 20 pixels between each D. The ability to select mulTIPle layers and to specify distribution spacing are features found only in ImageReady, not Photoshop. Now do the same thing with the BulletsLeft layer. Make five copies and Shift-click to select the six BulletsLeft layers. This time enter 12 px in the distribute box in the Options bar E and click the Distribute Layer Vertical Space button F. The bullets are now distributed evenly alongside the text G. Complete the job by repeating Steps 4 and 5 on the text and bullet links on the right side of the pages, which you'll find in the TextRight layer set.
6.	Slice the Banner In this step you'll create slices in the banner at the top of the page. First draw a separate slice around each of the photographs A. They merit slicing because they will optimize best in JPEG format, while the text and graphic elements in the banner will optimize best in GIF format. Next you'll slice the text links in the banner, so that each can be assigned a separate URL link when this page is incorporated into a site in Dreamweaver or GoLive. Draw one slice around the five script links that you added to the banner B. Then chose Slices>Divide Slices in the main menu bar. In the Divide Slice dialog box, choose Divide Vertically Into and type 5 in the field labeled slices across, evenly spaced C. ImageReady automatically divides your one slice into five. You can adjust these slices by clicking on their borders with the Slice Select tool and dragging. Finally, draw a separate slice around each word in the secondary navigation bar—1800s, 1900s, and 2000s D. Choose Slices>Divide Slices, and automatically divide it into 3 slices across, evenly spaced E. TIP Turn Off Snap. You may find it easier to slice with the Slice tool if you turn off the Snap feature, which attracts slices to each other and to other items on the page. Choose View>Show>Slices to disable this feature.
7.	Group Banner Slices into a Table In this step you'll group all of the banner slices into a table. When you save this page with HTML, this table will act as a container for all of the GIFs and JPEGs produced by your banner slices. Select the Slice Select tool in the toolbox and click on each of the slices you created in the banner (known as user slices) A. Then choose Slices>Group Slices into Table. A slice border appears around the table, along with a special table slice symbol B. Drag the borders of the table to make sure they encompass the entire banner. View the Table Slices Open the Web Content palette (Window>Web Content) to view a list of all of your user slices. Notice that although you've only made one table yourself, your slices are listed under Table 02 A. That's because when you save a page from ImageReady with standard HTML, the program saves the entire document as one large table—Table 01—with each slice corresponding to a table cell. Any additional tables you create are nested inside of that larger table. That's why these slices are labeled Nested Slices in the Web Content palette. INSIGHT Why Make Nested Tables? Nested tables are useful for holding sections of your page layout together and in place on the page. They're also a means of creating portable modules. For example, you can take this nested table into a site-building program like Dreamweaver or GoLive and save it as a reusable component that can be easily included in other pages in a site. INSIGHT Yellow Warning Icon. The yellow warning icon next to Table 02 in the Web Content palette means that this slice layout contains some spacer cells that could cause gaps in the table. It can be fixed by adjusting the slice borders with the Slice Select tool. But you can ignore it for now.
9.	Slice and Make a Table of Links Draw a slice around the top link here text link and bullet on the left side of the page A. Choose Slices>Duplicate Slice. In the Duplicate Slice dialog box, choose Below Original from the Position menu and click OK B. ImageReady makes a new slice that fits nicely around the next link and bullet C. This works because each item is the same size and they are evenly spaced. Repeat four more times to create slices around all the links on the left side of the page. Select all six slices by clicking on one of them in the Web Content palette, holding the Shift key, and clicking on the slice at top of the stack D. Click the Group Slices into Table button at the bottom of the Web Content palette E to join the slices into another nested table F. Repeat with the link here items on the right side of the page. Create HTML Text In this step you'll designate a slice as one that will contain nongraphic HTML text. With the Slice tool, draw a slice around the large empty area in the middle of the page A. With that slice selected, open the Slice palette (Window>Slice). In the Slice palette, choose No Image from the Type menu B. The palette changes to display a Text box. Type or paste some text into the Text box C, and check Text is HTML D. You won't see the text in the document window, because ImageReady doesn't preview HTML text. However, you will see it shortly in a browser preview. Color the Cell Background The slice you created for the HTML text is a table cell, just like slices that contain graphics. In this step you'll change the background color of that table cell. Choose the Eyedropper tool in the toolbox A and click on a light color in the image. That color appears in the Foreground Color box B. Click the arrow next to the Background section of the Slice palette to expand that section. Click in the Color field C.and choose Foreground color from the pop-up menu. This sets the color of the table cell that will display your HTML text. TIP Expand the Slice Palette. To see all of the options in the Slice palette, click the double-pointed arrow on the Slice tab.
12.	Preview the HTML Text Click the Preview in Browser icon in the toolbox to view the page in your default browser. You'll see the HTML text that you entered into ImageReady's Slice palette against the colored cell background A. You can format and change the color of this HTML text when you bring this page into a site-building program. Set the Page Background Color Now you'll choose the color that will appear in a browser window behind your page. Select the Eyedropper tool in the toolbox and click on the dark green border of the page to set the Foreground Color. Choose File>Output Settings>Background. In the Output Settings dialog box, click the arrow on the BG Color box and choose Foreground Color A. This sets the Web page background to dark green. Click the Preview in Browser button to view your page against this HTML background B. Optimize the Slices Click on the Optimized, 2-Up, or 4-Up tab A of the document window to preview your page with the slice optimization settings you choose. Select the Slice Select tool in the toolbox. Hold the Shift key and click on each of the photographs in the banner B. In the Optimize palette (Window>Optimize) C, choose JPEG as the format, and set the compression quality to Medium, striving for the lowest file size that retains the image quality you want. Select each of the other slices in the image and optimize them as GIFs. Similar slices can be linked so that you only have to choose optimization settings one time for all of them. For example, select all of the link slices. Then choose Slices>Link for Optimization from the main menu bar. TIP More on Optimzing Slices. To learn more about optimizing slices, take another look at JPEG Optimization, GIF Optimization, and Slicing and Optimizing a Navigation Bar. Don't forget that you'll need to optimize the auto slices (the ones with the gray numbers that were created automatically) as well as the user slices (the ones you created).
15.	Save as HTML We'll show you how to save this page two ways—first with standard HTML and then with CSS (Cascading Style Sheets). ImageReady produces HTML with tables by default (unless you choose CSS instead). Choose File>Save Optimized As. In the Save Optimized As dialog box, set Format/Save as Type to HTML and Images A. Make sure the Slices menu is set to All Slices B, choose a destination, and click Save. ImageReady generates an HTML page with nested tables to hold all your images in place, along with a folder of images that contains GIFs and JPEGs generated by each slice in the source file C. Open the HTML page in a Web browser and view the source code there. You'll see tables designated in the HTML code D. CSS Go back to your PSD file, which is still open in ImageReady. Choose File>Output Settings>Slices. Notice that Generate Table is selected by default. Choose Generate CSS instead A. The Referenced setting offers different ways of referencing the styles that position your slices. Leave it at its default, and click OK. Now choose File>Save Optimized As, using all the same settings covered in the preceding step. This time ImageReady produces images and an HTML file that employs CSS styles, rather than an HTML table to hold your images in place. Open this HTML page in a Web browser and view its source code there to see the CSS code. You'll see slices listed with pixel positions B. You can take either kind of output into a site-building program or a text editor and tweak it there. Or use the output as-is in a site. TIP ImageReady CSS. The CSS generated by ImageReady is used to position the output from your slices, as an alternative to HTML tables.

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