Tech Website Layout
A website layout with a hi tech feel. This tutorial will show you how to create the layout together with some hi-tech buttons.
Create a new 800 X 200 file. Now, go to your tools, right click on your lasso tool and select ‘polygonal lasso tool’
Now, create a new layer (rename it layer 1), select something similar to what I have below:
Fill your layer with the color code: #E1E1E1. Now, double click on your layer 1, the layer style window will pop up. Fill in the following properties for Inner Shadow ,Inner Glow and Gradient Overlay
This is what you should have so far:
Create a new layer below layer 1 and rename is layer 2. Import one of your abstract graphic art or an abstract photograph.
Create a new layer above layer 1 & 2. Repeat steps 2 & 3 for the bottom part of the header:
Create another new layer above all of your other 3 layers. Type in the your website’s name with stylish font using the color #E1E1E1.
On top: click > Layer > Layer Styles > Stroke… Change your size to 3 px and color to black.
Create a new layer below your text layer. Using one of your custom tools, draw it out using the same font color, then add the same layer style stroke to this layer. (If you have a logo, you can place it here instead). Change your layer’s opacity to %65:
Now that your header is complete, you need buttons for your website. Create a new 200 x 35 file.
Create a new layer, fill it in with the color #E1E1E1. Go back to your header’s photoshop file. Right click on layer 1 > copy layer style. Return to your button file > right click on the layer > paste layer style. The layer style should now be copied into your layer.
Create a new layer above this one. Type in your button’s name. Go back to your header style > right click on your text’s layer style > copy layer style. Return to your button layer > right click > paste layer style:
Now that you have a completed header and buttons, you can easily code them together (using CSS or tables). Now you’ve learnt how to create a quick and fast appealing design!
