Portfolio Site

Make this eye-popping interface for displaying a portfolio on the Web. It's easier than it looks if you follow our lead. After you build this 3-D interface, you'll use it to display Web-ready images generated automatically by the Web Photo Gallery.

1.	Focus on Efficiency In this project you'll create a three-dimensional portfolio interface that looks good enough to eat. The focus here is on efficiency. We'll teach you techniques that simplify and save effort. For example, you'll make only one thumbnail frame from scratch, and then apply a useful step and repeat technique to create the others. And you'll learn how easy it really is to make custom-built 3-D effects with alpha channels. This portfolio interface is specially designed for repurposing images generated by the Web Photo Gallery template you used in the last project, Gallery Site with Viewer Feedback. You won't have to spend hours resizing and optimizing individual images or writing an action for batch processing. Just run your own images through the Web Photo Gallery with the same settings you used before, and the resulting Web-ready images will fit perfectly into this interface.
2.	Create Some Guides This interface can display six thumbnail-sized images plus one larger image. You'll build it from the inside out— creating placeholders for the images and then making a 3-D bell shape around the placeholders. Let's start by creating some guides for positioning the placeholders you'll be making. Choose View>Rulers. If your rulers are not displaying pixels, Control/right-click in one of the rulers and choose pixels from the pop-up menu A. First you'll place a vertical guide at the center of the document. To find the center, press Command/Ctrl-A and then Command/Ctrl-T. An anchor point appears at the document's center B. Click in the vertical ruler and drag out a vertical guide to that point C. Press the Escape key to exit transform mode. Drag out two more vertical guides, placing them at about 45 and 153 pixels D. Drag two horizontal guides from the top ruler and place them at about 375 and 383 pixels E. Use the Move tool to tweak the position of the guides if necessary. Create a Thumbnail Placeholder Now you'll make a selection for a square thumbnail placeholder. Select the Rectangular Marquee tool in the Toolbox. In the Options bar, choose Fixed Size from the Style menu A, and type 101 px into both the Width and Height fields B. Click in the document to create a square selection. With the Rectangular Marquee tool, drag the selection to the intersection of the first vertical and horizontal guides C. Step and Repeat Now you'll learn a great way to make evenly spaced copies of selections.You'll use this technique to create and distribute selections for the rest of the thumbnail placeholders. We love this technique because it's automatic and doesn't require doing math. The square selection you made in the last step should still be active. Press Q to enter Quick Mask mode. This mode is just another way of viewing a selection. The selection is clear, and the non-selected area has a red mask A. With the Rectangular Marquee tool selected, change the Style setting in the Options bar to Normal B. Click and drag a rough selection around the clear square C. Hold the Option/Alt key and choose Edit>Free Transform. This creates a copy of the clear selection. You can't see the copy yet because it's on top of the original. Still in transform mode, click the right arrow key on your keyboard to move the clear selection copy to the right until its left edge is aligned with the second vertical guide from the left D. Press the big checkmark in the Options bar to exit transform mode. Now you'll step and repeat in Quick Mask mode to make and position the other thumbnail selections. Holding the Option/Alt key, press Command/Ctrl-Shift-T four times. You'll see a total of six clear boxes, evenly spaced horizontally and aligned vertically E. Press Q to exit Quick Mask mode. The boxes now look like regular selections F. Fill the Thumbnail Selections Click the side arrow on the Layers palette and choose New Layer. Name the layer Frames. Click the Foreground Color box in the toolbox to open the Color Picker. Choose gray (R: 153, G: 153, B: 153). Press Option-Delete/Alt-Backspace to fill the selections with the foreground color A. Choose Command/Ctrl-D to deselect. Make the Large Image Placeholder Select the Rectangular Marquee tool. In the Options bar set Style to Fixed Size A and type 361 px in both the Width and Height fields B. Click to create a large square selection. With the Rectangular Marquee tool still selected, drag the large selection so that it rests on the top horizontal guide and is centered horizontally C. With the Frames layer selected in the Layers palette, press Option-Delete/Alt-Backspace to fill the large square selection with the gray foreground color. Choose Command/Ctrl-D to deselect.
7.	Create Half a Bell Shape Now you'll work on the 3-D bell shape that surrounds the images in this interface. We made things easier for you by creating a path that outlines half of a bell shape. (If you'd rather draw the path yourself, click and drag with the Pen tool.) In the Paths palette (Window>Paths), select the half bell path A and click the Load Path as Selection icon at the bottom of the palette B. This creates a half bell-shaped selection. Click the side arrow on the Layers palette and choose New Layer. Name the layer Bell. Choose Option-Delete/Alt-Backspace to fill the selection with the gray foreground color C. Complete the Bell Shape Duplicate the Bell layer by dragging it to the Create New Layer icon at the bottom of the Layers palette A. With the new layer selected, choose Edit>Transform>Flip Horizontal. Select the Move tool in the toolbox. Hold the Shift key to constrain vertical movement and drag the second half of the bell to the right so that its left edge joins the right edge of the other half B. Press Command/Ctrl-D to deselect. Click the side arrow on the Layers palette C.and choose Merge Down to merge the two halves of the bell into one Bell layer. Make an Alpha Channel for the Bell In this step you'll begin to add dimensionality to the bell shape by creating an alpha channel. Command/Ctrl–click on the Bell layer to load a selection around the bell shape. Choose Select>Inverse to select everything but the bell. Open the Channels palette (Window>Channels). Click the Save Selection as Channel icon at the bottom of the Channels palette A. This creates an alpha channel in which the opaque bell shape is represented as black and the surrounding transparent area as white B. Double-click the new Alpha 1 channel and name it Bell. Press Command/Ctrl-D to deselect INSIGHT What Is an Alpha Channel? An alpha channel is a special grayscale channel that describes image transparency. The black part of an alpha channel represents transparent pixels in an image. The white part of an alpha channel represents opaque pixels in the image, and gray areas in an alpha channel correspond to semi-transparent pixels in the image.
10.	Blur the Alpha Channel With the Bell channel highlighted in the Channels palette, choose Filter>Blur>Gaussian Blur. In the Gaussian Blur dialog box click the minus sign several times A, and set Radius to 8.0 pixels B. Click OK. This blurs the edges of the bell shape in the alpha channel, which adds grays to the alpha channel and shape to the image. Select the RGB channel in the Channels palette to view the image in its normal state. INSIGHT Why Blur an Alpha Channel? Blurring an alpha channel adds gradually changing shades of gray to the alpha channel. The shades of gray translate into semitransparent pixels in the image that shade the image, giving it a 3-D look.
11.	Add a Gradient to the Bell In this step you'll add a small gradient to the bell shape to increase the illusion of dimensionality. Command/Ctrl-click the Bell layer in the Layers palette A to load a selection around the bell shape. Press D on your keyboard to set the Background Color box in the toolbox to white. Click the Foreground Color box, choose a medium gray (R: 102, G: 102, B: 102) from the Color Picker that opens, and click OK B. With the Bell layer selected in the Layers palette, click the New Fill or Adjustment layer icon (a black and white circle) at the bottom of the Layers palette C.and choose Gradient from the pop-up menu. In the Gradient dialog box that opens, click in the Gradient field D to open the Gradient Editor. In the Gradient Editor, select the Foreground to Background gradient thumbnail E. Then drag the lefthand gray color stop under the gradient bar F to the right until the Location field G reads about 96%. This will make the white part of the gradient at the top of the bell shape very short. Click OK in both gradient dialog boxes. The top edge of the bell now looks rounded. Press Command/Ctrl-D to deselect. INSIGHT Gradient Tools. Another way to make a gradient is with the Gradient tool in the toolbox. We prefer using a Gradient Fill layer, as you did in this project, because unlike the Gradient tool, a Gradient Fill is not destructive of the underlying image pixels (it comes in on its own layer) and it remains editable. You can modify a Gradient Fill at any time by double-clicking the gradient thumbnail on its layer to reopen the Gradient Editor.
12.	Change Gradient Blending Mode With the new Gradient Fill 1 layer selected in the Layers palette, choose Overlay from the Blending Mode field at the top of the Layers palette A. This blends the colors in the gradient layer with the underlying colors. Reduce the Bell's Fill Opacity Next you'll lower the Fill opacity of the bell to make it slightly transparent. Select the Bell layer in the Layers palette and decrease the Fill field at the top of the Layers palette (not to be confused with the image Opacity field) to 89% A.   Add Lighting Effects to the Bell This is the tricky part. You'll apply the Lighting Effects filter to the bell to enhance its dimensionality. The Lighting Effects filter has lots of settings. Use ours as a starting point and experiment to get an effect you like. With the Bell layer selected in the Layers palette, choose Filter>Render> Lighting Effects. In the Lighting Effects dialog box: Choose Style: Default A and Light Type: Spotlight B, with On checked. Set Intensity to around 15 C.and Focus to around 100 D, although you can play with these two settings to get an effect you like. Choose Bell in the Texture Channel E (not to be confused with Bell Transparency) and check White is High F, This uses the Bell alpha channel you made earlier to set the contours of the lighting effect. Click and drag the center and side anchor points on the preview on the left side of the dialog box G to get an effect you like. (The configuration of anchor points in the illustration is a good starting point.) Unfortunately there is no live preview of the Lighting Effects filter in the full document. Click OK to apply the filter, and if you don't like the result, choose Command/Ctrl-Z to undo and try again.
15.	Cut Frames in the Bell Now you'll use the placeholders to cut frames into the bell interface. Command/Ctrl-click the Frames layer in the Layers palette A to load a selection around the large placeholder and each of the thumbnail placeholders B. It's important that you now select the Bell layer in the Layers palette C. Press Delete/Backspace to cut out the selected areas in the bell interface. Choose Command/Ctrl-D to deselect. Click the Eye icon next to the Frames layer D to turn the Frames layer off so you can see the cut-outs in the bell interface E. Then click that Eye icon again to turn the Frames layer back on. Finally, drag the Frames layer to the top of the Layer stack in the Layers palette. Add a Bevel to the Interface The interface looks good, but it needs one more touch to make it really appear three dimensional. Open the Styles palette (Window>Styles). With the Bell layer selected A, click the Portfolio Iface style B. You won't see this style if you didn't load the HTWWeb presets as instructed in the Introduction. Go back and do that now. Or make your own bevel and emboss by clicking the f icon at the bottom of the Layers palette C, choosing Bevel and Emboss, and experimenting with the Bevel and Emboss settings in the Layer Styles palette that opens. (Hint: Change the Gloss Contour layer style setting to the Ring style.).   Congratulations! You've finished building this unique interface for portfolio images. Next you'll try out some Web-ready images that you generated from the Web Photo Gallery in the last project. Add Some Images Find the folder of HTML pages and images that you saved from the last project, Gallery Site with Viewer Feedback. If you can't find them, use the final project files for that project (C04_02_gallery-end).   Open each of the six JPEG files you'll find in the thumbnails folder that was generated by Photoshop's Web Photo Gallery. Select the Move tool, click in one of those open images, and drag it into the interface image, where it will be located on a separate layer automatically. Position the thumbnail image on top of one placeholders in the interface. Repeat with each of the other thumbnail images that were generated by the Web Photo Gallery. Then open the images folder and do the same with one of the larger images you'll find there—butterfly.jpg, camera.jpg, gameboy.jpg, guitar.jpg, tentacles.jpg, or watch.jpg.
18.	Slice the Interface Click the Eye icons on the thumbnail and image layers you added in the last step to turn off all the content layers. With the Slice tool, create a slice around each of the thumbnail placeholders and around the large placeholder. Optimize the Slices Choose File>Save for Web. In the Save for Web window, click on the Optimiize, 2-Up, or 4-Up tab to preview each slice with the optimization settings you choose. Select the slices one by one and choose settings that make each slice as small as possible, while retaining its appearance. (Hint: All these slices optimize best as JPEGs.) Set the Page Background Color In this step you'll set the color of the HTML page background that will appear around this page when it's viewed in a browser window that's bigger than the green illustration. Click the small arrow at the far right of the Save for Web window A, and choose Edit Output Settings. In the Output Settings dialog box that opens, choose Background from the second pop-up menu B. Click in the Color field C, and choose black from the Color Picker that opens. Click OK to close the Color Picker. Click OK again to close the Output Settings dialog box. Back in the Save for Web dialog box, click Save to open the Save Optimized As dialog box. Save the Optimized Interface In the Save Optimized As dialog box, set Format/Save As Type to HTML and Images. Choose a destination folder and click Save. The program will save each slice of the interface as an optimized Web-ready image, along with an HTML file containing a table to hold all the separate image files in place. The thumbnails and large image that were generated by the Web Photo Gallery will not be re-optimized because you turned off those layers before saving. TIP Adding Links. Of course there's lots more you could do with this page. Each of the thumbnails could be made into a remote rollover that causes a different large image to appear in the frame at the top of the interface. Or you could give each thumbnail a link to another page you include in the site. Or perhaps you could put an image slide show in the large frame. These techniques are covered in previous tutorials, Navigation, and Animation. TIP Use Your Own Images. Run some of your personal images through the Web Photo Gallery, using the Centered Frame 2- Feedback template and the settings we used in the last project. Pay particular attention to the size of the thumbnails (100 pixels) and of the large images (360 pixels). You'll end up with automatically resized and optimized images, ready for adding to this portfolio interface.

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