Bernskiold Media

Creating web designs is something that requires practise. In this example, we will be creating a book-like website from scratch in Photoshop, giving you a structure upon which you can build your own website.

Create the File

First, create a file that is 960×800 pixels at 72 ppi (pixels/inch). Make sure it is in RGB Color and as 8 bit. Background contents do not matter.

Making the Background

Set your background color to #1e1e1e and click OK to dismiss the color picker. Use the keyboard shortcut Command + Backspace (PC: Control + Backspace) to fill the background with the selected color.

Next, go to Filter > Noise > Add Noise and set the amount to 2% and the distribution to be uniform. Make sure to tick the monochromatic checkbox at the bottom to make the noise black and white. Click OK.

Content Box Design with Fold and Cover

Create a new layer. Drag out a selection using the rectangular marquee tool from the left side to the right, leaving a little gap at the top, right and bottom of the document edges (as is shown in the image above). Fill it with white.

Right-click on the layer and select Blending Options. In its menu, choose Drop Shadow and use the settings shown in the image above. This will make it stand out a bit from the background.

Selet the white box layer and duplicate it by using the shortcut Command + J (PC: Control + J). Bring up Free Transform (Command + T, PC: Control + T) and drag the left edge over to the right to create a narrow column with a width as shown in the image. Click enter to get out of the Free Tranform and apply the transofmration.

In the layers panel, Command-click (PC: Control-click) on the layer thumbnail for the copied layer (Layer 1 copy, here) to load it as a selection. Fill this with the color #804c00.

Create a new layer. Grab your Rectangular Marquee Selection Tool and drag out a selection on the left side of the content box from top to bottom, leaving enough room for a sidebar between the line and the left edge. Fill this with black.

Go to Filter > Blur > Gaussian Blur and add a blur with the Radius of 8.0 pixels. After you have clicked OK to apply the blur, reduce the opacity of the layer down to 20%.

Next, create another new layer and still with the Rectangular Selection Tool, drag out an approximately one pixel wide line, in the middle of the shadowed area we just created, spanning from top to bottom of the content box. Fill this selection with white (#ffffff) and reduce the overall opacity of the layer down to 80%.

Finally, select the two layers making up the fold and press Command + G (PC: Control + G) to group them together into one group. Name this one “Fold”. This will make the layers panel less messy.

Adding a Bookmark

Create a new layer yet again. Make a selection that starts just a little above the white content box and doesn’t quite reach to the bottom of it, rather stops a little above. Fill this selection with a red color (#9e1313).

Again, create a new layer and put it below the bokmark we just created. Zoom in to the top part of the bookmark and with the Polygonal Lasso Tool, click in the top left corner of the red rectangle and while holding down the shift key (ensuring a 45° angle) making a selection which will add a little triangle to add depth. Fill this selection with red.

When you zoom back out and deselect, this will look like the bookmark is actually wrapping around the page.

Select the Custom Shape Tool in the toolbar (grouped under the Rectangular Shape Tool) and select the Triangle shape. start in the left corner of the red rectangle (now zoomed in at the bottom part) and drag it up and over to the right to draw the rectangle.

Now to turn it the right way, bring up the Free Transform by using the Command + T (PC: Control + T) shortcut again. Right-click which will bring up the contextual menu for the tool and there, select “Flip Vertically”. Move the triangle into place and fill it with the same red color.

Finally, you can select the three layers that make up the bookmark and group these together (Command/Control + G) into a group that you can name “Bookmark”, for better organization.

Adding a Site Title

Using the font “JaneAusten” at a 48pt size, type in the name of the site (here, fictionally, Newsbook). Make sure the text is set to white in color and move it to within a few pixels of touching the content box.

Final Effect: With Some More Content

Adding some more content to the sidebar and main areas (shapes using custom shapes available in Photoshop) you can fill it with your content. I recommend using the font Georgia in different variations as it is a common system font that gives a book-like feel to the design.

You should, after this tutorial, have a good structure that you can continue to fill with type and content.