Making your Proxy Template!

Hey Guys,

I’m sorry I haven’t posted much on here recently because I had some other projects I had to finish up. I will focus on this project now.

Have you ever visited a proxy site and said, “I want that!”  Well now you can.  With this tutorial, you will learn how to create your own proxy template in photoshop which you can code, setup a site, and make money!

Step 1 – Opening your File!

For the template, we will start off with a conventional size, 1200×1000.  In my opinion, proxies should be like minisites, small and to the point.  So after we are done making our template, we shall crop it and take away all the unneccesary things.  To open a New file, go to File > New.

Step 2 – Background!

In this step, you have to decide if you want a light template or a dark one.  I usually have my proxies dark but I have made light ones before.  For this one, we’ll go dark.  So use your Paint Bucket Tool or press G, and fill in the background with #353535.

Now this might seem dark but its actually fine when its spread out over the page.

Adding a Pattern to the background is really one thing that you can do to make your proxy stand out.  To do this, select your layer in which you have painted your background color.  Right click anywhere on the background and press Blending Options.  If you do not see this, make sure that your background color is on a seperate layer, not on the default background layer.  Now you go to Pattern Overlay.  Whoa!  If you think you did something wrong because your screen just went blue, well you didn’t.

Choose the pattern Metal Landscape and set the Opacity to anywhere between 1-3.  And there you go!

Step 3 – Content Background!

Here, we will make the base of our template.  Its quite simple, really.  Take the Rounded Rectangle Tool or press U, and draw a white rectangle in the center of the template.  Don’t make it too big or too small.  Just try it out, if you need something bigger or smaller, you can always change it.

Right Click and press Blending Options.  Then go to Stoke and make a gray (#D2D2D2) 2 or 3 pixel stroke.

Step 4 – Logo!

This is my favorite part because I can use my creativity to create the logo WE want.

Use the Horizontal Type Tool to write the title of your proxy.  The font doesn’t matter right now, and the size, just make it so you can see it clearly.  Now take the font and move it to the top left corner of the content box.  I usually like to put my logo on the outside of the content box like this.

Now you can fool around with the font color and size.  If you look at my previous web 2.0 tutorial, you can make your logo look nice and shiny.  But for this tutorials purposes, I will stick to this logo.

Step 5 – Content!

The main reason for having your content is for people to read it, enjoy it, and come back.  When I create my templates, I use a Lorem Ipsum.  A Lorem Ipsum is basically content that you use instead of the actual content.  Its the placeholder for your content which you will change after you code the template.

You can use www.Lipsum.com to generate a Lorem Ipsum.

Now take the text you have and put it at the top left corner of the content box.  I added a 25% opacity to the text to make it look more web 2.0.  Also, make sure that the text only goes to the middle of the content box and doesn’t pass by it.  The other side is used for your ads.

Heres an example.  ( Above )

Step 6 – Ads!

If you plan on using ads, I would suggest you put in a placeholder for them.  You can get a simple placeholder for Google themselves.  https://www.google.com/adsense/static/en_US/AdFormats.html.

All you do is take the ad you want, and put it where you want it.  I suggest you use the space we left to the right of the text.

Step 7 – Final Step! Address Bar!

Finally, the final step.

All you have to do is use the rectangular marquee and make a rectange, the size of the address bar that you desire.  Fill it with a white color.  Right click and press Blending Options.  Go to the stroke and make a 1px gray stroke.

Before you close out of the window, go to the Gradient.  The default setup should make the bottom half of the box black and top half white.  If you click on the Gradient in the window, you will be able to change the colors around.  Make the black, light gray (#D4D4D4).  Leave the white.

Now make another rectange using the rectangular marquee to the right of the previous rectange.  Make sure they are the same height.  The width must be different though because its going to serve as the button.

After you fill it in with white and add a stroke to it, go to Blending Options and Gradient.  Make the white a light version of the color you want.  For example, if I wanted to use Orange, I would use the colors (#FEB21D) for the top and the color (#E99A00) for the bottom.

Put in the Text “Browse” or “Surf” inside the rectangle.  I added some web 2.0 here and there.

Guess what?  Your FINISHED!

Heres what the final product should look like.

http://ps-tutorials.org/tutorialimages/proxyfinal.gif

Hope you enjoyed it! 🙂

Leave a comment