Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Retro 2 Tone Website Layout

Retro 2 Tone Website Layout


Note most of the images we be logged in at 50%

Phase One:

Open up you image sized 800 x 700. Set your foreground colour to: FFFFFF
And your background to: 7F6302

S1: On our first layer, simpy fill it with our foreground colour, and go Layer>New Layer

S2: Using the Rectangular Marquee Tool (RMT for short), make a box about the same size as mine. Fill it with your background colour.

image 1

S3: Again use the RMT Tool, make the same box as me. Then press delete. Repeat this, until you have a similar image:

image 2

S4: Then, just make another box, and fill with the brown background colour. This will define our content area.

image 3

S5: Taking your Text Tool use the default font Impact, write out your version number. It could be 01, 02, etc. Use your knowledge to judge how big you need to make your text. Then, Layer>New layer, and use the RMT to make a box for your navigation, fill it white. (FFFFFF)

image 4

Phase Two:

S1: Layer>New Layer. Ok, make your foreground: 91730B. And add some more boxes, fill it with the foreground. Make as many boxes as you need for your links.

image 5

S2: Use the text tool to write out your links It doesn't matter what font you use, but I use a pixel font size 8, surf for fonts at http://www.dafont.com. Use the colour: FFFFFF. Then zoom in, use the eraser tool size 1 pixel, you'll be asked to raterize the layer press Ok, and eraser the rough edges around the text. Repeat this for all the text you use. Place your links in the position I have.

image 6

image 7

S3: Layer>New Layer. Make the rectangle I have, and fill it: B08F17.

image 8

S4: Then again, use RMT, and make another box, fill it the foreground, and again RMT to make smaller boxes, delete and repeat.

image 9

S5: Layer>New Layer. Again, write your version number, and use the RMT to make a box. Delete the segments as I have.

image 10

S6: Take your Text Tool, and using Impact, write out your sites name. I use two different colours: 413303 and 735A05.

image 11

S7: Ok, we need a picture to fill this blank area. Im going to use a BMW Mini Car. You'll need to extract this, there are many excellent tutorials on how to do this can be found on the net, I recommend: http://www.stealthdesignz.com/index2.php?page=photoshop/cutting. After doing that: Filter>Artistic>Cutout, and the below settings. Then press and hold "CTRL+U", with the below settings: After, Filter>Blur, Filter>Blur more.

image 12

image 13

S8: Apply this outer glow:

image 14

S9: Add your logo:

image 15

S10: Add your finishing touches, a border, scroll bar, motto, etc:

image 16

S11: You've finished!

You will see my final result below:

Retro 2 Tone Website Layout
Click to enlarge


Author's URL: Blueshout.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Retro 2 Tone Website Layout"

Captcha