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.



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



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



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)



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.



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.





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



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



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



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



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.





S8: Apply this outer glow:



S9: Add your logo:



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



S11: You've finished!

You will see my final result below: