Photolog – Wordpress Theme

This time will be creating a Photolog design theme for Wordpress. I chose the subject for this to be web design but you can change it to whatever you like to represent. It’s a clean and simple photo gallery and I like how it turn out to be. I hope you like it too. The resource pack is also up for download as well as the PSD file. So, let’s begin.

Step 1

Open Photoshop and create a new document:

Step 2

Take the Paint Bucket Tool (G) and fill the Background layer with color 58595a:

Step 3

In the Layers Pallet, create a new fill or adjustment layer and select Pattern:

Load the vivid red patterns from the pack and select the one with circles:

In the Layers Pallet, change the Blending Mode of the Pattern Fill to Soft Light and turn down the Opacity to 14%.

Step 4

With the Pattern Fill layer selected, make a new fill or adjustment layer and choose Gradient. Put the following settings with color 58595a:

Make sure that the Use Previous Layer to Create Clipping Mask is checked.

Create another Gradient adjustment layer and put the following settings with the same color:

Now, create a Photo Filter adjustment layer and put these settings with the same color:

Step 5

Create a new layer and name it Main Bar. Grab the Rectangle Tool (U) and draw a 1020px width and 80px height shape in the middle of the canvas with white color. To have the same dimensions just select Fixed size from Rectangle Options:

Put the following Blending Options:

Create a new layer above this one and name it Main Bar Shine. Hold down Ctrl key and click on the Main Bar’s thumbnail in the Layers Pallet to make a selection. From photoshop menu click on Select – Modify – Contract and put 1px.

Grab the Gradient Tool (G), make sure your Foreground color is white, select from the menu Foreground to transparent and from the top of the selection draw a straight line to the middle of the bar.

Change the layers Opacity to 50%.

Step 6

Create a new layer and name it Main Photo. Grab the Rectangle Tool (U) and draw a 512px width and 262px height shape in the middle of the canvas with color white.

Put the following Blending Options:

Create a new layer and name it Main Photo Shine. Make a selection of the Main Photo layers thumbnail, Contract the selection by 13px and draw a white fill with the Gradient Tool (G), same as in Step 5.

Step 7

Make a new layer and name it Albums Menu. Grab the Rounded Rectangle Tool (U), set the Radius to 6px and draw a 160px width and 66px height shape with color 999999. Place it middle left:

Change the layers Blending Mode to Overlay and add a Drop Shadow:

Step 8

Create a new layer and name it Navigation. Take the Rectangle Tool (U) and draw a 1020px width and 90px height shape.

In the Layers Pallet, Ctrl-click it’s thumbnail to make a selection. Contract it by 10px.

Grab the Rectangular Marquee Tool (M) and hold down Shift key while selection the left and right middle part of the navigation shape.

Hit delete. Don’t deselect. Make a new layer and name it Navigation Bkg. Fill the selection with color 999999. Now you can deselect ( Ctrl+D ).

Change the Blending Mode of the Navigation Bkg layer to Overlay and put the following Blending Modes to the Navigation layer:

Step 9

Create a new layer and name it Left. Grab the Rounded Rectangle Tool (U) and draw a 40px width and 22px height shape with color d5d5d5:

Change the layers Blending Mode to Overlay and put a Drop Shadow:

With the Custom Shape Tool (U), draw a 12px width and 10px height white arrow on a new layer. Name it Left Arrow.

Duplicate the layers and from photoshop menu, Edit – Transform – Flip Horizontal.

Step 10

Create a new layer and name it Photo1. Grab the Rectangular Tool (U) and draw a 80px width and 50px height shape with white. Duplicate it 4 times and place them on Navigation.

Step 11

Create a new layer and name it Button. Grab the Rectangular Tool (U) and draw a 100px width and 20px height shape with color 999999. Duplicate it and change both layers Blending Mode to Overlay.

Step 12

Add content to the design. I used the Bell Gothic font and the Arial font.

That was the final step on this tutorial. It’s simple and easy so it doesn’t take a lot of time to accomplish. Remember to subscribe to feed or follow me on twitter to stay up-to-date with fresh tutorials.