Developing a Web Site in Photoshop 6
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The best way to learn is to read about it and then do it. For this reason, I created this simple mock-up for a (fictitious) consulting company that uses many of the elements that you find in real-world Web sites. I will walk you through every step of the development from the design-showing you some of the new features of Photoshop 6-through the optimization of the images, up to the point of creating an HTML page in GoLive.
Figure 1 This mock-up of a Web site shows you some of Photoshop's new features.
){kind=link}
1. Creating a sidebar: after creating a new 640x600 file (File > New; Contents: Background Color), create a second (temporary) document for the fill pattern; make it four pixels wide by one tall. The first pixel is a light gray (RGB: 204, 204, 204), the second pixel is a dark gray (RGB: 102, 102, 102), and the third and fourth pixels are a medium gray (RGB: 153, 153, 153). Use the maximum magnification to paint the pixels with the Pencil tool. To define a color, click on the Foreground Color field in the Tools palette and make sure that the Only Web-Safe Colors option is selected in the Color Picker.
){kind=link}
Figure 3 Use the Only Web-Safe Colors option when creating the pattern.
){kind=link}
Edit > Define Pattern will store this small document as a pattern. You won't need this document anymore, but you can save it for later in case you want to edit it. Switch back to your first document and display the rulers (View > Show Rulers). To create the actual sidebar, use the Rectangle tool, but before you start, make sure to select the Create New Shape Layer option and check that No Style is selected from the Layer Style pop-up menu. You are now ready to create a layer with a layer clipping path: usually this would require that you first create a new layer, but since this is a new document and we are working on the background layer, Photoshop will create a new layer for you automatically.
Figure 4 Before drawing with the Rectangle tool, make sure that No Style is selected in the options bar.
){kind=link}
Figure 5 The shape is filled with the pattern. In the Layers palette, you can see the new layer with its clipping path.
){kind=link}
Draw a 150-pixel-wide rectangle for the sidebar; it will fill with the foreground color. To fill it with the pattern, create a pattern overlay layer effect: choose Layer > Layer Style > Pattern Overlay, and select the pattern that you saved previously from the pop-up menu. Voila. Your sidebar is done.
Figure 6 In the Layer Effects dialog box, select Pattern Overlay and pick the previously saved pattern.
){kind=link}
2. Creating the arch: when designing a Web site in Photoshop, you should decide early on whether you intend to use frames or just tables when you prepare the HTML. This decision affects what you can and can't do when designing in Photoshop. While this particular design could also be re-created with tables, it is much more suitable for frames and we want to design the arch that is later going to be in the top frame.
Create a new layer in the Layers palette (by clicking on the Create New Layer button) and use the Rectangle tool to draw a shape that's 95 pixels tall and offset from the top by 20 pixels; you will have to zoom in to do this precisely. If you need to adjust the shape later, you can do so with the Path Component Selection tool, with the option Show Bounding Box checked in the options bar. With this bounding box you can reshape the rectangle as you would in Adobe Illustrator; the only difference is that you have to double-click in the rectangle when you are finished resizing. Another tip: if you adjust the shape while the bounding box is visible, the Free Transform tool becomes active and its options bar will display the position of the bounding box.
Figure 7 In the Path Component Selection tool's options bar, check the Show Bounding Box and then drag a handle of the shape to resize the rectangle.
){kind=link}
To change the rectangle into an arch, click on the lower right corner of the rectangle with the Direct Selection tool (the white mouse arrow), and drag the anchor point up while pressing Shift (to restrict the movement to the vertical axis). Use the Add Anchor Point tool to add an anchor point to the middle of the path, and move this anchor with the Direct Selection tool until you get a nice arch.
Figure 8 After the lower right anchor was moved up, an anchor point was added to the path and then moved to create the arch.
){kind=link}
Fill this path with a pattern as you did with the sidebar: open a texture, define it as pattern, and select Pattern Overlay in the Layer Effects dialog box. Also select Drop Shadow.
Figure 9 A copy of the arch was created, an anchor added, and the rest deleted. Then the remaining path was copied.
){kind=link}
3. Creating the sidebar navigation buttons: if you are familiar with Adobe Illustrator and working with the Path tool, this should be no problem. Duplicate the layer with the arch (using the Duplicate Layer button in the Layers palette pop-up menu), then choose Layer > Layer Style > Clear Layer Style to get rid of the layer effects in this copy. Now cut out the part of the arch that lies over the sidebar and use this as the basis for the buttons (to ensure both arches will match). Select all anchor points with the Direct Selection tool-except the anchor point at the lower left-hand corner of the arch, and the newly-added anchor point directly to its right. Then drag the path parallel by pressing Shift and then Option/Alt before releasing the mouse button to create a copy automatically. Connect the ends of the paths with the Pen tool and use the Convert Point tool to adjust the handles of the anchor points. Change the color of the shape to black in Layer > Change Layer Content > Solid Color. Finally, adjust the Opacity of each button, making the lower buttons more transparent. The other two buttons are simply created by duplicating this layer, then moving and adjusting the paths and transparency.
Figure 10 The path is reshaped using the Convert Point tool and then the content is changed to Solid Color.
){kind=link}
With the Text tool, click where you want to place the labels for the buttons and then type the text. Make sure that the foreground color is set to white before you do this, otherwise you have to change the color later by highlighting the text with the Text tool and changing the color in the Color Picker. To rotate the text layer, use Edit > Free Transform (if this command is grayed out, select the Move tool first). You will see a bounding box that you can use to scale and rotate the text (consult the Photoshop manual for instructions on how to use the Free Transform command). Once the text is in position, duplicate the layer twice and change the text.
Figure 11 With the Text tool, click where you want to place the text. Rotate and resize the text using the bounding box.
){kind=link}
4. Creating the top and bottom navigation bars: for the background of the buttons, create the shape again with the Rectangle tool. Instead of using beveled buttons, use the Inner Shadow effect and disable the MouseOver rollover state in ImageReady to give the appearance of the gray background moving up when the mouse is positioned over the button. Once youÕve placed the text for the buttons (and the black rectangle on the left side), create a new folder (Layer Set) in the Layers palette and drag all the elements of the top navigation in it. Being able to organize the content of the Layers palette in folders is a true blessing of Photoshop 6.0. Not only does it help you keep an overview, it makes it easy to duplicate several layers at once. Select the top navigation bar layer set in the Layers palette and use the Duplicate Layer Set command in the Layers palette pop-up menu. Drag the new set to the bottom of palette.
){kind=link}