Proxy WebSite Template

Download:

Coded Version: .Psd Version:

Welcome to DirectoryMIX. In this tutorial I'm going to show you how to create a simple, stylish and effective Proxy website design in Photoshop.

(click image for full-size)

Step 1

Start by creating a new document. I used a smaller size of 700 x 600 pixels. I then filled my background with a very faint blue (#fafafc).
That's all for step 1.

Step 2

Now we'll design the websites header. Start by making a new layer, now make a selection along the top of your document, my selection took up all of the width but only 100 pixels of height.
After making your selection, make sure you're on your new layer then fill your selection with any color, I simply used black. After doing this, deselect then go into the Blending Options for your header layer. Apply the following layer styles:

1. Inner Shadow
2. Gradient Overlay

Now your header should look like this:

Using the Horizontal Type Tool write out your text on the header.

You'll need to be creative with the text so that you get a unique look. The font I used above is called VAGRounded BT & VAGRounded LT, sizes 30 pt & 16 pt.
After writing out my text, I applied the following layer styles:

1. Drop Shadow
2. Gradient Overlay

And now your text should look something like this:

I'll finish this off by adding a few effects to give it a nice, unique look.

I added in a highlight to the top left of the text, I added an underline using the to the bottom of "FREE WEB PROXY" Line Tool and also added a faint line to the bottom of the header.

Step 3

This will be a quick step. Create a new layer thne make a small selection (whole width of document) one pixel underneath the header. Fill this selection with a blue to transparent gradient.

Now lower the opacity for this gradient layer to 15-25%, your choice.

Looks great in my opinion ;)
Lastly, add in some describing text for the proxy website. I just copied mine from a Turnkey Proxy website and edited it slightly.

You can copy the text I used below.

SeeThrough is your 100% free online proxy service. Feel free to tell your family and friends! The purpose of this service is to allow you a legal and free method to access sites you might not normally be able to, not for legal reasons but possible bad network settings. This proxy service is not intended for illegal usage, it is intended for privacy and the other many legal reasons people would use a proxy server. Some may not want websites to track your activity, proxies might help stop spyware, allow you to log into pages like Myspace.com and Bebe.

And that's all for this step.

Step 4

Now it's time to make the input bar and button. Start by creating a new layer (Layer > New > Layer) now find and get out the Rounded Rectangle Tool.

Change the settings for the Rounded Rectangle Tool as shown:

Make sure you use all of the settings shown above. Change your foreground color to black then draw a rectangle on your document like shown in the below image.

You may need to clean up the edges, do this by using the Rectangular Marquee Tool to make the selections then press delete.
After you've created your rounded rectangle box, apply the following Layer Styles in the Blending Options:

1. Inner Shadow
2. Gradient Overlay

And now your bar should look like this:

I then added a few nice touches to the bar, such as a highlight line at the bottom of the bar, and a highlight shine at the top of the bar.

All you need to do to get these effects is:

1. Select original bar layer (Hold CTRL and Click layer thumbnail).
2. Move selection downward (down arrow key).
3. Fill your selection with a white gradient or solid color. Move selection down a few more pixels, press delete.
4. After following the other steps, you might want to change the layer mode and opacity for your layer. Soft Light is a good layer mode choice.

Write out your text inside of the bar. The font I used was Tahoma, 16 pt.

Now you need to make a button. Follow these few simple steps to make a button from your current bar.

1. Duplicate your bar layer(s) then merge the duplicates together (CTRL+E).
2. After doing that, select the end 20 pixels or so of the bar, inverse the selection and delete.
3. Now you only have a small portion left, duplicate the layer and flip it horizontally, move it along until it connects perfectly.
4. Move your button into place and add text as you did before.

And that's all for this part, I hope it was easy for you to understand! If not, there's always the PSD file at the end of the tutorial.

Step 5

Now it's time to make this website make some money, adding in some advertisements! I have a Google AdSense account, so I went and set up some ads and put them in the design like so:

And I also put a small add in the header.

And that is pretty much it... if you don't know how to code, I guess you'll have pay someone a small sum to code the template for you.
I hope you enjoyed the tutorial, if you want you can of course download the PSD file from here!


This Tutorial  was written by a very  good friend of mine Eli Burford.