Select Page

Note: I am not affiliated with the Lord of the Rings or its publishers in any way. This is a project for VIC 5325: Digital Imagery on the Web as a part of their Master’s in Web Design and Online Communication.

The Project

For this project, we were asked to re-create a book cover from one of our favorite books. Now, I’ll admit, a few of my interests are typically classified as “nerdy.” I have no problem with this. One of the things that fall under the “nerd” umbrella is my love for Lord of the Rings.

Why I Chose This Book

Every night, before I go to sleep, I read a novel. I last anywhere between 2 pages and 2 chapters before I start nodding off. Then I close the book, turn off the lamp, and go to sleep. I pretty much do this every night. Lord of the Rings was one of the first book series I read from start to finish. My first read through was probably in 2001. Since then, I read the whole series every year or two.

I know I submitted another hobbit-themed assignment earlier in the semester. I promise, I’m not THAT fanatic about Lord of the Rings, but it is what I’m reading right now. Book 1 (the Fellowship of the Ring).

The Story and Design Choices

In the Fellowship of the Ring, the story hasn’t got that heavy yet. A young and innocent band of Hobbits leaves the Shire to embark on a quest to take a ring from point A (The Shire) to point B (Rivendell, almost the ‘headquarters’ for the good guys and home of many Elves). They quickly discover there is a danger, the Ring Wraiths, in hot pursuit. They are searching for this ring and are willing to do anything to get it back. They are attacked, and Frodo is almost killed. He is rushed to Rivendell.

Rivendell represents everything that is right with the world. It is safe. The elves there have power. It is the best place to be. While there, Frodo is restored to health. Although the Wraiths and the big bad guy, Sauron, cannot easily get to Rivendell, the ring cannot stay there. It must be destroyed. Frodo is compelled to volunteer for a new responsibility, taking the One Ring to Mordor to destroy it. A company is formed around the Ringbearer and they set off on a journey.

The Elements

  • Frodo’s Outstretched Hand – Frodo did not volunteer to receive the ring. However, he made a choice to stay with it…to bear it through the journey. An open hand represents a willingness and vulnerability.
  • The Ring – Nearly in his Grasp – The ring is floating in the air. Yes, Frodo is bearing it, but it is not his. As much as he is drawn to the One Ring, its master is also searching for it. The ring has an agenda of its own. As the One Rings hangs on the page, so does the narrative.
  • The Fellowship – Obviously, the fellowship (company) needed to be in the image. Had the story been “Frodo and His Ring,” then the hand and possibly the Wraiths would be the only things needed.
  • Rivendell – Again, this is the most good place there can be in Middle Earth. It is the “haven” for the weary. It is the shelter. It is the place of restoration. From this place of ultimate good, the company must depart to journey to the place of ultimate Evil. I attempted to reinforce this in the order of the remaining background elements.
  • Moria – A pivotal part of the story happens in Moria. The company loses Gandalf (*spoiler alert*). Moria is not totally in the clutches of Sauron’s control, but much evil resides there, sharing much of Sauron’s desires.
  • The Wraiths – These menaces haunt the much of the beginning of the story. They only appear a few times but haunt over half of the novel. I wanted to portray their presence in the story by making them visually hovering over most of the elements on the cover.
  • The Eye of Sauron – Although NOT a character in this story, he is implied. His eye is the ultimate embodiment of evil in Middle Earth. He faintly finishes out the design and provides support to the Wraiths.

I knew I wanted these elements but didn’t know how to position them. For this assignment, I’ve posted a few “progress” pictures.

 Progress Images

[image_gallery id=”bf9982f9ca26cb6439b10a1a7b05d578″ images=”‹º›{‹²›attachment_id‹²›:5818,‹²›url‹²›:‹²›//‹²›},{‹²›attachment_id‹²›:5821,‹²›url‹²›:‹²›//‹²›},{‹²›attachment_id‹²›:5820,‹²›url‹²›:‹²›//‹²›},{‹²›attachment_id‹²›:5819,‹²›url‹²›:‹²›//‹²›}‹¹›” columns=”4columns” image_ratio=”portrait” dots=”disable” autoplay=”{‹²›autoplay‹²›:‹²›off‹²›,‹²›on‹²›:{‹²›animation_speed‹²›:3}}” overlay=”on” margin=”5″ __fw_editor_shortcodes_id=”d53528f65332efd274824a7ed5119bb9″ _array_keys=”{‹²›images‹²›:‹²›images‹²›,‹²›autoplay‹²›:‹²›autoplay‹²›}” _fw_coder=”aggressive”][/image_gallery][image_gallery id=”dc5b67da52888f225c72b0e641a72fc6″ images=”‹º›{‹²›attachment_id‹²›:5822,‹²›url‹²›:‹²›//‹²›},{‹²›attachment_id‹²›:5823,‹²›url‹²›:‹²›//‹²›},{‹²›attachment_id‹²›:5824,‹²›url‹²›:‹²›//‹²›},{‹²›attachment_id‹²›:5825,‹²›url‹²›:‹²›//‹²›}‹¹›” columns=”4columns” image_ratio=”portrait” dots=”disable” autoplay=”{‹²›autoplay‹²›:‹²›off‹²›,‹²›on‹²›:{‹²›animation_speed‹²›:3}}” overlay=”on” margin=”5″ __fw_editor_shortcodes_id=”cdfde166e607b447b9baac821edeec8a” _array_keys=”{‹²›images‹²›:‹²›images‹²›,‹²›autoplay‹²›:‹²›autoplay‹²›}” _fw_coder=”aggressive”][/image_gallery]


  • I started with an image of an outstretched hand and used the Paint bucket Tool, Cloning Tool, and Spot Heal tool to continue the background (there’s light texture in there).
  • I added an overlay image of the ring wraiths. I duplicated them, made them much more opaque and set the Blending Modes to “Soft Light” and “Lighten”
  • I erased the “black” from the wraith layers so the hand was unaffected
  • Added a “fellowship”  silhouette. Duplicated it as well and set various blending modes and opacities.
  • Added mount “Moria” to the background. I used the eraser tool in many places to clean up everything below the silhouette line. I probably used different selection tools to select the “black” at the bottom.
  • Cut out Rivendell from another image and pasted it into the fellowship and the mountain. Changed the blending mode to “Luminosity.”
  • Added the Eye of Sauron. Duplicated it. Set one layer to “Luminosity” and the other to “screen”
  • Added a noise layer to equalize the different elements… Sometimes when you use a lot of different image sources, you get a LOT of different looks in the same image. Adding noise can add “grit” to the image and make it look a bit more cohesive. I added this via a multiply layer.
  • Added a curves layer.
  • Added a vintage paper layer (I had on hand from the postcard assignment) and set the blending mode to “Vivid Light.” Again, I erased the hand from this layer
  • Added text. I made a Layer style with Emboss, inner shadow, color overlay, and Drop Shadow
  • Created a clipping mask of text using a gold foil image and softened the opacity and blended them together.

After I was done with these steps, I found a book mockup and was pleased with my progress. I also tried to add a bit of “gloss” to the ring on this mockup:

Mockup 1


[single_image id=”67ce1b80604179c51e03447b326e7908″ image=”{‹²›attachment_id‹²›:‹²›5816‹²›,‹²›url‹²›:‹²›//‹²›}” url=”” alignment=”left” size=”large” radius=”0″ lightbox=”false” shadow=”disabled” overlay=”{‹²›overlay‹²›:‹²›disabled‹²›,‹²›overlay1‹²›:{‹²›button_name‹²›:‹²›This is button‹²›,‹²›button_icon‹²›:‹²›ti-check‹²›}}” popover=”” animation=”none” animation_speed=”2″ animation_delay=”0″ __fw_editor_shortcodes_id=”88d86635fa6325d33684ee071af950a5″ _array_keys=”{‹²›image‹²›:‹²›image‹²›,‹²›overlay‹²›:‹²›overlay‹²›}” _fw_coder=”aggressive”][/single_image]

What I Didn’t Realize…

I went back and looked at some of the submission requirements. I didn’t realize that I needed a BACK cover as well. So… After much work, I took everything I had created and threw it into another mockup and crafted my different elements. What I was left with was my final submission below:


[single_image id=”482c013e0b291bdb596e807a0a5b335d” image=”{‹²›attachment_id‹²›:‹²›5780‹²›,‹²›url‹²›:‹²›//‹²›}” url=”” alignment=”left” size=”large” radius=”0″ lightbox=”true” shadow=”disabled” overlay=”{‹²›overlay‹²›:‹²›disabled‹²›,‹²›overlay1‹²›:{‹²›button_name‹²›:‹²›This is button‹²›,‹²›button_icon‹²›:‹²›ti-check‹²›}}” popover=”” animation=”none” animation_speed=”2″ animation_delay=”0″ __fw_editor_shortcodes_id=”a5d346eff750ac0056b4a57cc3f0e9ce” _array_keys=”{‹²›image‹²›:‹²›image‹²›,‹²›overlay‹²›:‹²›overlay‹²›}” _fw_coder=”aggressive”][/single_image]