Website Design Blog: discussion, Inspiration and More…

July 23, 2009 in Tutorials by Designussion

Proxy templates are being designed left right and center and before the popularity of Wordpress they were one of the most famous types of templates sold online. In this tutorial, Designussion shows you how to create a minimalistic proxy template in Photoshop with some awesome eye catching effects.

Final Preview

Step 1: Background

The background is created using a block colour overlaid with a pattern. You first want to fill your layer with whatever color you choose, in this case I chose #151515. I think this is a nice solid color for a minimalistic template. Creating a new layer, I then filled it with a pattern i liked setting its opacity to 10%. For this template I used a custom diagonal pattern that I created myself. Shown below is the process from one to another.

Step 2 : The Header / Navigation

The header is created using a simple rectangle filled with a gradient. First of all fill a rectangle like seen in the header with any color and navigate to its blending options. Choose a gradient you like, for a minimalistic theme i choose a silver to grey gradient, which stuck out from the background. Adding the navigation lines separating the text is done by using a 1px pencil tool. Select the color you want, hold shit and drag down the mouse as far as you require. Then simply add a logo and navigation text for design purposes. For the text i chose a small simple font called MyriadPro to keep with the minimalist theme.

Step 3: Surf

The central section is used for the surfing section. I created another rectangle, and filled it with a dirty orange to yellow gradient. This is contrasting against the background and catches the eye. Inside this, using the rectangle tool, I selected an area for the content and filled a new layer with white. I then lowered the opacity to 46% so that it had a nice blended effect over the yellow gradient.

Using the same method as the white box, the URL input area and button are produced. Simply follow the same instructions as the white box but create shapes that resemble a URL and button. I chose the following shapes and added text in for the design as shown below.

Step 4: Ad Space

Creating the ad space section utilizes the same method as the surf box. A rectangle is made with an inner shaded box. This time though, the background rectangle uses a different gradient to create the outer edged shine effect seen on the template.

Step 5: Footer and putting it all together

The footer is a simple rectangle filled with a solid color. Some copyright text is then placed over the top and a small monochrome version of the logo applied. It is then a simple case of placing all the rectangles in a position that fit. Moving round each rectangle is easy if they are placed in folders which are nicely organised and labeled.

We hope this tutorial has helped you, here is one last look at the final outcome!