Design & UX

Build a Wooden Trophy Case in Photoshop

By Anum Khan

Virtual trophy cases are a great way to display your products, books, awards, and much more. Prominently showing off your firm’s (or your personal) achievements can quickly and concisely establish credibility without having to bore anyone with your resume, career history, or curriculum vitae.

Today, I’ll guide you through the process of creating a wooden trophy case in Photoshop. You’ll learn how to make an amazing wood texture and practice many handy techniques. So, let’s get started!


Book covers

Final result: (Download the completed, layered Photoshop file here.)

Wooden Bookshelf Mockup

Step 1

Create a new document in Photoshop with a 600px width and an 800px height.

Wooden Bookshelf Mockup

Step 2

First of all, we’ll make a nice wood texture from scratch. Create a new layer by selecting “Layer” > “New Layer.” Fill it with any color using the paint bucket tool. Set #ab540f as your foreground and #dc8a24 as the background color. Now go to “Filter” > “Render” > “Fibers.” Use the following values.

Wooden Bookshelf Mockup

Step 3

Now, press Ctrl + “T” to activate the free transform tool. Put the value of 50% for the width in the top properties bar and drag the texture towards the left half of the canvas.

Wooden Bookshelf Mockup

Duplicate the texture layer, position it towards the right half of canvas, and flip it vertically to get a variety. To achieve this, click on the duplicated layer and go to “Edit” > “Transform” > “Flip Vertical.”

Select both texture layers, right-click on the layers and choose the option of merge layers. Label this newly-merged layer as “wood texture.”

Step 4

Next, to add noise to the texture, go to “Filter” > “Noise” > “Add Noise.”  Use the following values here.

Wooden Bookshelf Mockup

Step 5

Now, go to “Filter” > “Liquify.” Use the forward warp tool with the settings shown below and apply it randomly at different spots over the texture.

Wooden Bookshelf Mockup

Step 6

We are done with the wood texture. Now, resize it using the free transform tool (Ctrl+ “T”), and use the values of 560px for the width and 760px for the height.

Wooden Bookshelf Mockup

Step 7

Next, we’ll make the shelf sides. First, we have to position few guides for that, press Ctrl + “R” to make the rulers visible. Select the rectangle tool to draw a rectangle like the one below. Place this rectangle over the left side of texture, drag a vertical guide, and position it beside the rectangle. Now, take the rectangle to the right side of texture and place another guide along its border.

Wooden Bookshelf Mockup

Step 8

Next, to make the inner part of the shelf side; place the rectangle along the inner side of the guide line. Now, slightly increase the width of the rectangle.

Wooden Bookshelf Mockup

Now, press Ctrl+ <click on the rectangle layer> to make a selection around it, click on the wood texture layer, press Ctrl + “C” to copy the selection on the texture, and paste it onto a new layer by pressing Ctrl + “V”. Label this layer as “Left Border Inside.”

Wooden Bookshelf Mockup

Step 9

Double-click on the “Left Border Inside” layer to open the layer style window and use the following settings for color overlay.

Wooden Bookshelf Mockup

Step 10

Next, to form its shadow press Ctrl + <click on the “Left Border Inside” layer> to make a selection around it, create a new layer below, and fill the selection with pure black color. Now press Ctrl + “D” to deselect it and go to “Filter” > “Blur” > “Gaussian Blur.” Use a value of 2px here and drag this layer a bit outward to make it visible.

Wooden Bookshelf Mockup

Step 11

Collect the “Left Border Inside” layer and its shadow in a single group, duplicate the group, and flip it horizontally. Position it inside the right sided guide to create the opposite shelf.

Wooden Bookshelf Mockup

Step 12

Draw a rectangle as shown below.

Wooden Bookshelf Mockup

Now, press Ctrl + <click on the rectangle layer>. Now, click on the wooden texture, press Ctrl + “C” to copy, and press Ctrl + “V” to paste the selected texture onto a new layer. After that, go to “Edit” > “Transform” > “Rotate 90⁰CW.” Position it at the bottom of the texture as shown below. Label this layer as “Shelf front.” Then, hide or delete the rectangle.

Wooden Bookshelf Mockup

Step 13

Apply the following gradient overlay settings on the “Shelf front” layer.

Wooden Bookshelf Mockup

Step 14

Duplicate the “Shelf front” layer, label it as “Shelf top,” position it at the top of the original layer, and go to “Edit” > “Transform” > “Distort.” Use this tool to bring its corner inside as shown below.

Wooden Bookshelf Mockup

Step 15

Apply the following layer style settings on the “Shelf top” layer.

Wooden Bookshelf Mockup

Wooden Bookshelf Mockup

Wooden Bookshelf Mockup

Step 16

Make the shadow of “Shelf top” layer in the same way as explained in step 10.

Wooden Bookshelf Mockup

Collect all of the layers forming the bottom shelf into a single group and label it as “Bottom shelf.”

Step 17

Now, we’ll use some more guides to define the position of middle shelves. Draw a rectangle as shown below.

Wooden Bookshelf Mockup

Drag the guides to form even horizontal shelves, as shown below.

Wooden Bookshelf Mockup

Step 18

Duplicate the “Bottom shelf” layer and position it as shown below.

Wooden Bookshelf Mockup

To make its shadow, draw a rectangle as below and apply a 7px Gaussian Blur filter.

Wooden Bookshelf Mockup

Step 19

Now, use the polygonal lasso tool to select a triangular area on the shadow layer.

Wooden Bookshelf Mockup

After that, go to “Edit” > “Clear.” Do the same for the right side of shadow and reduce the opacity of the shadow layer to 50%.

Wooden Bookshelf Mockup

Step 20

Label this group as “Middle shelf,” duplicate it few times, and position the shelves as shown below over each horizontal guide.

Wooden Bookshelf Mockup

Step 21

To make the top border, place a copy of middle shelf over the top guide and erase the shelf top layer, including its shadow, from this group.

Wooden Bookshelf Mockup

Step 22

Our wooden trophy case is almost ready. You can make its shadow using the same techniques used to create the middle shelf shadow. However, make a thinner rectangle this time.

Wooden Bookshelf Mockup

Here is how it looks after displaying books.

Wooden Bookshelf Mockup

That’s it. I hope you guys enjoyed the tutorial and learned something new. Do share your thoughts!

  • kayren

    Excellent. I can see lots of uses for it. Bookshelves / trophy cases are a classy way to display ebooks.

  • Albert

    Thanks for this nice tutorial!!!!
    very useful

  • armin

    thanks a lot…
    it’s very useful for me



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.