Creating a WoW Themed Blog Layout

In anticipation of Blizzard’s newest expansion to World of Warcraft. I decided to show you little horde and alliance how to create a World of Warcraft: Cataclysm themed Blog. So let’s begin.

To begin open a document 1100×1200 and fill the background with #202b31.

Make a new layer and hit D. Fill the new layer with the foreground color. Then go to Filter > Render > Difference Clouds. Hit CTRL+F 3 – 7 times to get a good range of tones. Set the layer blend to Sofy Light.

Make a selection on either side of the document 50 pixels wide. Make a new document and fill the selections with Black.

Next make a new selection 640 pixels wide. Make a lew layer and fill the selection with #d6c284. Then add a Drop Shadow, Set the distance to 0, the spread to 12, and the size to 20.

Next you will need to download my asset pack here. Then Extract the files and open them in photoshop. Then move “Site-frame” into our document and place the edge up to the black border. Starting from the bottom duplicate the layer until you have a bar that goes to the top of the document. Merge the frame layers together.

Duplicate the layer and go to Edit > Transform > Flip Horizontal. Now place the new layer on the edge of the right black border.

Next move that “Border Cap” image into our document. Then place the first copy towards the bottom of the document (It may help to drag a guide at 1120) and line it up with the edge of the right frame. Then Duplicate the cap, flip it horizontally and place it on the left frame. Merge both cap layers and duplicate the new layer. Drag out a guide at 150 and flip the second cap layer vertically. Next move them to the guide you just created.

Next make a selection 5 pixels below the btoom caps and make a new layer. Fill the selection with black.

Now move “Bottom” image into our document. Place the top of this image and the bottom edge of the cap then duplicate the layer till you have a bar that goes acroos the bottom of the document. Merge the bar layers.

Next we are going to build the Right sidebar section. These will be empty but can be used for various information. Drag out 4 guides place one 10 pixels fron the top of the top caps, the next should be 10 pixels from the tan section, one 10 pixles from the right border, and one at 315. Now select your “Round Rectangle Tool” set the radius to 2 pixels and make a selection within the guides you just made. Make a new layer and fill the selection with #13181c. Then add an Inner shadow and a Stroke. Set the inner shadow distance to 0, the choke to 0, and the size to 6. Then add an inner Stroke 1 pixel thick, at 50% opacity, and in color #b36f1c.

Using the same layer options, and the width of the first box, make two larger boxes below the first.

Next we are going to create the main content mini boxes. To begin this section we need to drag out a few guides. Withn the tan section drag out two guides 15 pixels from either edge, then add a guide 10 pixels from the bottom, the last guide needs to be placed at 990. Again select your “Round Rectangle Tool” set the radius to 2 pixels. Holding shift while make a square selection starting at the left and top guide. Then add a 10 pixel buffer and make another box holding shift. Now with another 10 pixel buffer make another box with the remaining space. Next make a new layer and make the box pathes into selections and fill them with #d6c284. Lastly add then blending options from the sidebar boxes.

Make a selection of the boxes once again then highlight the difference cloud layer and make a copy of the selected area and place it above the box layer.

Next we are going to build the framing of the boxes. For this part you will need the “Box Header” and “Box Splice”. First, place the box header in the top left corner of the base boxes we jast made. Then place the box splice into the document then cut the block slpice corners to new layers, then cut the other 4 sections to their own layers. Now place the corners of the spliced box in the corners of the base box. Now select the blue header and line it up with the header and duplicate it till it reaches the right corner. Then do the same for the other sections.

Next find a World of Warcraft pet image, I chose the Pandaren monk cause he is cool, place that image under the box frame. Cut out the excess of the image that is outside the frame.

Now grab your text tool and type out “Pandaren Dojo” or the name of whatever pet your chose. Set the font size to 12px, the face to Arial, and the color to #ffe500

Follow the same steps as on the first box but change the text to “Career Sightings”

Make this box like you did the first two this one will just be longer. The text should aslo read as “Blizzard Artwork And Wallpapers”

Now we are going to build the article post section. For this section we are going to use the guide for the top the side bar box and the outer guides of the bottom boxes, then we are going to ad a guide at 550 and that will serve as the bottom of the preview post. Use the same color and blending options from the base layer of the bottom boxes.

Then follow the same steps as the base boxes to make the post texture.

Now download the post header here. Add it to our document and place it at the top of our post box. Then add a slight Drop Shadow. Set the drop shadow distance to 1, spread to 0, and the size to 3.

Now you will need to download the “Lifecraft” font that you can find using your favorite Search engine. Since this is juat a mock up we are going to use example text from my favorite World of Warcraft blog WoW.com. Select any article title and using the lifecraft font type out the title. Set the color to #ffe500 and the size to 20px.

Now we are going to leave a section open for our article image. Place a guide at 320 and start your post text at that guide. Make sure to 10 pixels from either edge of the post block. Use arial as your font and the set the size to 12 px.

Next we are going to add our article image border. this will be 5 px from the article title, 10 pixels from the post block edges, and 10 pixles away from the article text. Using the round rectangle tool add a white box within those new guides. Then add an Inner shadow and a Stroke. Set the drop shadow distance to 0, the choke to 0, and the size to 6.

Now add guides 5 pixels from all the edges of the white box. Then add a world of warcraft related image over that box. Then using the RRT make a box inside the newest guides and cut the image to fit in that new box.

Duplicate the layer and set the fill to 0%. Set the inner shadow distance to 0, the choke to 0, and the size to 6.

Group the post layers and duplicate the group. Move the new group 20 pixels below the first.

Next place a copy of the “Menu” image into our document. then make copies of the menu image until you have a bar just over the top border caps. Merge The Layers. Now add a drop shadow. Set the drop shadow angle to 90° distance to 2, the choke to 0, and the size to 6.

Next do the same thing with the “Top” image. Only this time do not add a drop shadow.

Now add the “Logo-top-bg” and place it in the center of the top section.

Then add the “descript” image and place it to the right of the center. Then grab your text tool and select the lifecraft font. Set the font size to 20 and the color to #f4a60d. Type out in the first bar “Alliance” and the second bar to “Raid Blog”. Now we are going to add a nice bevel and emboss. Set the Style to Inner Bevel, Technique to Chisel Hard, Depth to 600%, Direction UP, the size to 250, set the angle to 120, the altitude to 30, the highlight color to #fff221, and the shadow color to #9d5c21.

Then add a revesred “descript” image on the left side. Follow the same blending option on the text as before. Type out in the first bar “Death’s” and the second bar to “Herald”.

Now add the logo in the center of the “Logo-top-bg”.

Next add the “Top-left” image.

Next add the “Top-right” image.

Then the “Menu-left” to the document.

Then the “Menu-right” to the right side.

Using the same font, size, and blending options type out “World Of Warcraft Community Site”. Place it left of the logo above the black menu section.

Using the same font, size, and blending options type out “World Of Warcraft Cataclysm Site”. Place it right of the logo above the black menu section.

Now we are going to make the mock up menu section. Again use the Lifecraft font and the Blending options. Only this time set the font size to 17. Then type out the following: “News Classes Lore Raid Experience Dragons Flight PTR In-Game Events” allow 7 spaces between each category.

Now we are going to show an example of the drop down menu. Add the “Parchment” image to the document. Place it under the classes category. Set the layer fill to 90%. Then add a drop shadow, set the drop shadow angle to 120° distance to 5, the choke to 0, and the size to 5.

Lastly add all the warcraft classes on the parchment area. Set the font type to Arial, the size to 16px, the color to #77321c, and the style to bold The classes are as follow:

  • Death Knight
  • Druid
  • Hunter
  • Mage
  • Paladin
  • Priest
  • Shaman
  • Warlock
  • Warrior

And you are done. Congrats, you just made a beautiful Blog layout that would WoW, no pun in tended, any potential client.

Leave a comment