Open Book with Pages

This tutorial shows you how to make a website design that looks like a book.
Create bendy pages, coloured bookmarks, and a spiffy cover.



1 – The shape of a page
Fill your background with a darkish green colour. You can change this later, but dark green is a good background for this layout.
Set your foreground colour to white. Use the Rectangle Tool (shares a spot on the Toolbar with various other shapes) to draw a rectangular "page" shape on the right-hand side of your canvas. Make sure the Shape Layers icon at the top left of the screen is selected.
Click on the Pen Tool. In the Layers window, click on the miniature image of your "page". It should say "Shape 1" next to it. You need to click on the actual little image there, not just the layer itself. Hold down Ctrl, and add two more points, each close to the left hand side of the shape (as shown). Then Ctrl+Click on each of these, and use the arrow keys to nudge them around. Nudge the top one upward by five pixels (press Up five times), and nudge the bottom one down by five pixels. Press Enter.





2 – Adding effects to the page
Right-click the shape layer, in your Layers window. Give the page a Drop Shadow, and a Gradient Overlay. Set the Angle of the gradient to 0°. Click on the little picture of a gradient, and change the sliders until they appear as shown in the image above.



3 – Stack o' pages
Make a new layer set, and drag your page into it. You'll soon have lots of pages, and a layer set will help you keep them organised.
Duplicate your page, by dragging its layer onto the New Layer button, or by right-clicking on it, and clicking Duplicate Layer. Move this new layer down the layers list, so it's underneath the original page.
Click on the Move Tool. Use the arrow keys to move the duplicated page around. Move it down one pixel, and across one or two pixels.
Repeat this duplication until you have eight or so pages.
It looks more natural if your page edges don't all neatly line up. Give some of your pages the wrong number of nudges.



4 – Flipping the pages
Duplicate the whole set of layers. This new set will be the left-hand pages.
Move the new set below the original set, in the Layers window. Because shadows appear to the right of images by default, this stops your left-hand pages casting a shadow on the edges of your right-hand pages.Click on the new layer set, and click Edit > Transform > Flip Horizontal.
Click on the Move Tool, and nudge the new set of pages over to the left of the canvas, so that the pages form a nice crease in the middle. You can hold shift to nudge ten pixels at a time.The only thing that hasn't been flipped around is the gradient. Right-click on one of the layers in your new layer set, click Blending Options, Gradient Overlay, and then change the angle to 180°. Press OK. Right-click on the same layer, click Copy Style, and then right-click on each other layer in the set, and click Paste Style.



5 – Creating a bookmark
Choose a red colour. Use the Pen Tool (with the Shape Layers option selected at the top left of the screen) to make a banner shape, as shown. Press Enter when you're finished.




6 – Finishing the bookmark
Ctrl+Click on the little image of your layer, in the Layers window. This should select its outline.

Create a new layer.
Click Filter > Render > Clouds
Click on the Move Tool, and nudge this layer to the left five pixels or so.
In the Layers window, change its Mode from Normal to Overlay.
Put some text on the layer. I've used a light yellow colour here, and the Palatino Linotype font.

Right-click the text layer, choose Blending Options. Give the text a Bevel, and a Stroke. Set the Size for each of these options to 1.

For your red bookmark layer, give it a Drop Shadow, and a Gradient Overlay (Mode: Overlay, Opacity 43%), with the sliders placed as above. This gradient will help the bookmark look like it's flopping out of the side of the book, and down into the surface below.
Create a new layer set, and drag these three layers (the text, bookmark, and clouds) into it. Put the clouds layer above the text layer, and the bookmark at the bottom.

Drag this layer set down the layers list until it's below the first page.

Drag the layer set into place if necessary.



7 – More bookmarks

Duplicate this layer set another four times, to make four more bookmarks.
Move these layers into place, and move some of them down in the layers window, so they're under more than one page. You should make the lower bookmarks stick out more.

For each of the layer sets, go in and click on the bookmark layer. Click the coloured square next to it, and change the colour. (I only used the vertical slider here. I didn't pick new colours from the colour picker.)

The last stage of this tutorial involves adding a hard cover to the book, and inserting a light-blue textured paper lining on the inside of that cover.



8 – Shape of the book cover
Use the Rectangle Tool to draw a large, light-blue rectangle that's just bigger than your pages. Try to keep it close at the top and bottom. It can stick out a little bit at the sides though.

Drag this new layer to the bottom of the layers list, so it's only above the green background.



9 – Adding a spine

Choose a very dark brown colour (I used 1d0e00). Use the Rounded Rectangle Tool, with a radius of about 10px, to draw a shape as shown. It should extend outside the blue area just slightly.

Turn the page and bookmark sets on and off as you need to, by clicking the eye next to them, in the Layers window



10 – Adding effects to the book cover

Give the blue area:

A Drop Shadow.
A Bevel (Depth: 62%. Size: 6. Gloss Contour: Ring. Highlight Mode: Overlay.)
A Pattern Overlay (Opacity 28%. I recommend the Wax Crayon on Charcoal Paper pattern, if you have it. Click the tiny right-facing arrow, and choose Grayscale Paper.)
A Stroke (Size: 6. Position: Inside. Colour: A dark brown. I used 311800.)

Right-click this layer, and click Copy Layer Style. Paste this layer style to the spine layer, then remove the Drop Shadow and Pattern overlay from the spine layer.



11 – Finishing up

Turn all the layers back on.
You can either put text on your book in Photoshop, or in your web editor. The text doesn't precisely follow the contour of the curved page, but that's not really noticeable here