In this tutorial we will create a nice simple wordpress gallery layout. You will learn to use gradients, shapes and the horizontal text tool!
Preview:
Create a new photoshop document
1 Open up Photoshop, create a new document that is 1000px by 1000px, with a background color of #111420
Creating the header
2 Select the rectangular marquee tool (M) and create a rectangular with a width of 920px and height of 150px, it should be centered on the canvas and have a 20px gap from the top
3 Set the foreground color to #ffa33e and the background color to #ff4400. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gGradient from the top of the selection downwards, this will create a Linear Gradient in the selection
Creating the Content area
4 Select the rectangular tool (U), create a white (#ffffff) rectangle with a width of 920px and height of 610px, place the rectangle underneath the orange header, there should be a 20px gap
Creating the image area
5 Select the rectangular tool (U), create a Grey (#e9e9e9) rectangle with a width of 490px and height of 410px
6 Double click the layer to open the layer styles dialogue box, use the settings below
7 Select the rectangular marquee tool (M) and create a rectangular section across the top part of the image area
its height should be 40px
8 Set the foreground color to #222739 and the background color #121521. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gradient in the selection
Creating the footer
9 Select the rectangular marquee tool (M) and create a rectangle with a width of 920px and height of 150px it should be centered on the bottom of the canvas 20px away from the white area
10 Set the foreground color to #ffa33e and the background color #ff4400. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a Linear Gradient in the selection
Creating the logo
11 Select the horizontal type tool and create some text, use the settings below
12 Double click the layer to open the layer styles dialogue box, use the settings below
Creating the navigation
13 Repeat steps 11 – 12 with a reduced font size to create the navigation
Creating the gallery
14 repeat the image area 5 times and add a thumbnail to each box. Also add a star rating area to the dark blue bars of each image area box
Creating the Footer
15 For the footer I centered some text in the middle of the rectangle.
Congratulations
you have now completed the tutorial
3 Responses
Nice and simple. Just the way I like it!
Thanks venard
Won’t use this directly, but the Base always gives me inpiration!!