Solution: Create Game Site

This home page for a game site is ultra-cool. You'll learn how to create its modular elements in Photoshop, and output the results as a full HTML page that's all ready to be included in a Web site for gamers. After you practice these techniques with our files, try them on a site of your own.

Design with Modules

This page layout has lots of information. Its modular design pulls together the diverse elements on the page and makes it easy to update separate pieces of information to keep the page current. You'll begin this project by finishing up the page layout we've started for you. The gray boxes establish the location of each module. In the steps to come you'll shape and style these rectangles to become cool-looking frames.

If you're ever working on a site that offers lots of diverse items on the home page—like games, chat rooms, tutorials, and forums—try this modular approach. When you're working on your own designs, make some plain filled rectangular selections to begin laying out the modular elements of your design. If you make the rectangles on separate layers, you can move them around as you develop the layout.

CAUTION

Turn Off Guides. We've added some guides to this layout to help you along. If they're in your way, you can turn them off temporarily by choosing View>Show>Guides.

Move a Box to a Separate Layer

The gray boxes are located on the Frames layer. You'll start by moving the small gray box on the upper-right to its own layer. Select the Frames layer in the Layers palette. Select the Magic Wand tool and check Contiguous in the Options bar. Click on the upper right gray box to select it A. Then press the Shift and Command/Ctrl-J keys to cut the selected box from the Frames layer and move it to an automatically created new layer—Layer 1.

Use a Selection to Shape the Box

Now you'll cut off a diagonal corner of the Layer 1 box. Select the Polygonal Lasso from the toolbox A. Hold the Shift key and click on one and then the other side of the bottom-right corner of the box to create a 45° selection boundary B. Release the Shift key and click twice more to make the other two legs of a triangular selection C. Then press Delete/Backspace to delete the selected corner D. Press Command/Ctrl-D to deselect.

Make Two More Boxes

Make a copy of Layer 1 by dragging it to the Create New Layer icon at the bottom of the Layers palette A. Select the Move tool and press the arrow keys on your keyboard to move the copy to the right. Repeat to create and position the second copy, spacing the three boxes evenly B.

Next you'll cut out a narrow space between the third box and the edge of the document window to accommodate the style you'll be adding to the box later. Select Layer 1 copy 2 in the Layers palette C. Select the Rectangular Marquee tool and draw a narrow vertical selection at the right side of the third box D. Press Delete/Backspace to delete. If you get a warning that no pixels were selected, try again, moving the selection slightly.

Turn the Boxes into Frames

Now you'll merge all the lighter gray box layers into one layer. Select the Frames layer and click in the Link field to the left of Layer 1, Layer 1 copy 2, and Layer 1 copy A. Click the arrow on the right side of the Layers palette B and choose Merge Linked.

Next you'll select and delete the center of each box. Hold the Command/Ctrl key as you click on the Frames layer in the Layers palette to load a selection of each of the boxes on that layer C. Choose Select>Modify>Contract. Type 10 (pixels) into the Contract Selection dialog box that opens, and click OK D. Then choose Delete/Backspace to delete the selected area of each of the boxes E. Choose Command/Ctrl-D to deselect.

Style the Frames

With the Frames layer selected, click the f icon at the bottom of the Layers palette and choose Bevel & Emboss. In the Layer Style dialog box that opens, choose the following Bevel and Emboss settings: (Style: Inner Bevel, Technique: Smooth, Depth: 311, Direction: Up, Size: 3 px, Soften: 0 px, Gloss Contour: Ring) A . Leave the other settings at their defaults.

Add another style by highlighting the Color Overlay style in the Layer Style palette B. Then click the Color option on the right C to open the Color Picker, and choose gray-green (R: 120, G: 124, B: 112 ). Click OK to close the Color Picker. Click OK again to close the Layer Style dialog box.

CAUTION

Customizing a Layer Style. If you want to change the default settings of a layer style, that style must be highlighted on the left side of the Layer Style dialog box. It isn't enough to just put a checkmark next to the style.

Create Boxes Inside the Frames

Now you'll create some dark gray boxes to fill the inner area of each frame. Select the Magic Wand tool with Contiguous checked in the Options bar. Hold the Shift key as you click in the white center of each of the five frames to select their centers A.

Make a new layer for all the boxes by clicking the Create New Layer icon at the bottom of the Layers palette B. Rename this new layer Boxes. Drag the Boxes layer just above the Background layer in the Layers palette.

Choose Edit>Fill. In the Fill dialog box, choose Color from the Use menu C. In the Color Picker that opens, choose dark gray (R: 66, G: 66, B: 66). Click OK to close the Color Picker. Click OK again to fill the boxes with gray D. Press Command/Ctrl-D to deselect.

Style the Shapes on the Left

Expand the ShapesLeft layer set by clicking its arrow in the Layers palette A. Select the FramesLeft1 layer in that layer set. Click the f icon at the bottom of the Layers palette B and choose Bevel and Emboss. In the Layer Style dialog box, choose the following Bevel and Emboss settings: (Style: Pillow Emboss, Technique: Smooth, Depth: 100, Direction: Up, Size: 35 px, Soften: 0 px) C. Leave the other settings at their defaults and click OK.

Now you'll use the same layer style on the other two layers in this layer set. Control/right-click on the FramesLeft1 layer in the Layers palette, and choose Copy Layer Style from the pop-up menu D. Control/right-click on the FramesLeft2 layer, and choose Paste Layer Style from the menu. Control/right-click on the FramesLeft3 layer and choose Paste Layer Style again. Beveled edges now separate the three shapes on the left E.

Add a Patterned Background

Select the Background layer in the Layers palette. Choose Edit>Fill. In the Fill dialog box, choose Pattern from the Use pop-up menu A. Click in the Custom Pattern field B to open the Pattern picker. Click the arrow on the right side of the Pattern picker C. Choose HTWWeb-Pat from the menu and click OK at the prompt. (If you don't see HTWWeb-Pat in this menu, you haven't properly installed the HTWWeb Presets from the CD. Go ahead and do that now following the instructions in the Introduction. You'll use several items from those presets in this project.)

Double-click the diagonal bg pattern that appears in the Pattern picker D. Click OK to close the Fill dialog box. The background of the image, which is visible around the frames, is filled with a diagonal pattern E.

Cut Out the Top Bar

Next you'll use a selection to shape the black bar at the top of the image. Expand the Bars layer set by clicking the arrow to its left in the Layers palette. Select the BarTop layer. If you turned off the guides, choose View>Show>Guides to see them again. Select the Polygonal Lasso tool and click on the left edge of the second guide from the top A. Hold down the Shift key as you click at the intersections of horizontal and vertical guides to create the tab-shaped selection in the illustration. When you reach the right edge of the image B, click around the top of the document window until you arrive back at the beginning of the selection.

Choose Select>Inverse. Then press Delete/Backspace to delete the selected portions of the bar, creating a unique shape C. Press Command/Ctrl-D to deselect.

INSIGHT

Shift Key Constraints. Holding the Shift key while you make a selection with the Polygonal Lasso tool creates straight lines and 45° angles, which are useful for cutting out sharp-edged shapes.

11.

Style the Top and Bottom Bars

In this step you'll add pattern, color and dimension to the top and bottom bars. Open the Styles palette (Window>Styles). Click the arrow on the right side of the Styles palette A and choose HTWWeb-Styles from the pop-up menu. (You won't see this style set unless you've installed the HTWWeb Presets, as explained in the Introduction.)

Drag the Blue Grid style from the Styles palette B onto the top bar C in the document window. The style is immediately applied to the top bar. Drag the same style from the Styles palette onto the bottom bar D.

Create a Navigation Bar

Select the Rectangular Marquee tool and make a short, wide rectangular selection in the tab area of the top bar A. Select the BarTop layer in the Layers palette, and press Delete/Backspace to delete the selected area from the top bar B. The beveled edges of the deleted area come from the style you applied to the top bar in the last step.

Make a new layer above the BarTop layer by clicking the Create New Layer icon at the bottom of the Layers palette. Name the layer NavBar. Use the Eyedropper tool to sample the dark gray color (R: 66, G: 66, B:66) in one of the other boxes on the page. Choose Select>Reselect to reactivate the rectangular selection. Choose Option/Alt-Delete to fill the selection with gray C.

Choose the Type tool. In the Options bar choose a small sans serif font (try Arial, 9 pt) and type some navigation labels separated by decorative colons (Tips :: D-Loads :: Support :: Games :: Help) D. That's all it takes to make the navigation bar for this page.

INSIGHT

Blue Grid Style. If you're wondering how we made the Blue Grid style you applied to the top and bottom bars, it's a combination of three layer styles—Bevel and Emboss, Color Overlay, and Pattern Overlay. We chose options for each in the Layer Style palette and made them into a reusable style by clicking the New Style button in the Layer Style palette.

13.

Add a Gradient

Now you'll add a gradient to the navigation area to make it look rounded. Make another new layer above the NavBar layer and name it NavBar Gradient. Press D and then X to set the Foreground Color box to white A.
Select the Gradient tool in the toolbox B. Click the Gradient field in the Options bar C. In the Gradient Editor that opens, select the White to Transparent gradient D and click OK.

Command/Ctrl-click the NavBar layer (not to be confused with the NavBar Gradient layer) to select the navigation bar. Create a gradient in this selected area by dragging a short vertical line in the top one-third of the navigation bar E. In the Layers palette, lower the opacity of the NavBar Gradient layer to 80% F.

Group Layers

Click in the Visibility field to the left of the Supernova layer in the Layers palette A. In this step you'll link this layer to the Frames layer below it in the Layers palette so that the Supernova image appears to be inside the frame. Hold the Option/Alt key and move your cursor over the border between the Supernova layer and the Frames layer. When you see a double-circle icon B, click to make a clipping group of the two layers. The Supernova image now appears in the image only where it overlaps artwork (one of the frames) on the layer below C.

Make Content Layers Visible

Now you're all set to turn on the layers of content that we made for you. Click in the Visibility field to the left of the Skin layer set and the Free Game layer set in the Layers palette. The content of the layers on those layer sets is now visible inside the interface you've created.

Slice

Select the Slice tool in the toolbox and draw slices around each of the text buttons in the small navigation bar so that you can give each button a separate link in a site-building program. Slice each content module too so that each module outputs as a separate GIF or JPEG. This will facilitate updating individual parts of the page later on. For more on slicing and optimizing, take another look at previous tutorial, Navigation.

Optimize and Save

Choose File>Save for Web. In the Save for Web dialog box, optimize individual slices, selecting them with the Slice Select tool A and choosing Optimization settings on the right side of the dialog box B. Optimize each slice so that it is as small as possible, but still looks good. Some slices, like the slice around the Supernova image, will optimize best as JPEGs. Others, like the slice around the Login area, will optimize best as GIFs.

When you're done, click Save. In the Save Optimized As dialog box that appears choose Format/Save As Type: HTML and Images. This will generate a separate GIF or JPEG file for each slice, along with an HTML file with a table that holds the sliced images in place on the Web page. You can bring the HTML file and images into a site-building program like Dreamweaver to incorporate this cool page into a complete game site.

In this tutorial:

Solution

Wednesday, September 1, 2010

Create Game Site

CAUTION

CAUTION

INSIGHT

INSIGHT

1 comment:

Blog Archive