PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Textured Chain Tutorial Fire Effect Simple Blog Layout EZ Lightning Effect Fresh Tutorials:
Last Update: 2.14.2007
Online: 86 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com Tutorials Web Layouts Tech Site Layout

Tech Site Layout

This tutorial will teach you how to create a very nice looking tech site, using very simple techniques and various photoshop tricks. This layout works great for anything from a band website, to a gaming website. The end result is both very coder friendly, and ascetically appealing.


Download File Download Tech Site Layout Source Package

Go To Page: [ 1 2 ]

Page 1 of 2


Step # 1
Create a new document in photoshop that is 600 x 800 in size.




Step # 2
Create a new layer, and fill the background with the flood fill paint bucket with #666666 or a nice dark grey.




Step # 3
Now you'll need to find an image to use to create the sidebars using a technique called "pixel stretching".

Open any picture (3d renders work great for these).

Get out the 1 pixel horizontal marquee tool ()

Now click once on the canvas to make a selection on your image:
The render l'm using here is available in the download pack for this tutorial


Press CTRL + C on your keyboard to copy the selected image.

Now go back to our original document, create a new layer and press CTRL + V to paste this onto our document.





Step # 4
Now get out the rectangular marquee tool () and make a selection in the center of the canvas over a portion of our pasted sliver. Tap delete on your keyboard to remove this portion of the image. Your canvas should look like this:


Now press CTRL + D on your keyboard to deselect the selection.

Press CTRL + T on your keyboard to open up the Free Transform Tool.

Place your cursor near the top center node (small square) press down the mouse and drag it all the way to the top of the canvas.

Now place your cursor near the bottom center node (smalls square) press down the mouse and drag it all the way to the bottom of the canvas.

This should stretch out the sliver and create some very nice looking sidebars for our website:





Step # 5
Get out the rectangular marquee tool () and make a square selection similar to that shown below for our navigation bar:


Fill this selection with #666666 (or the same color of your background.

Double click this layer and apply the following blending options:
Outer Glow:


Bevel & Emboss:


Satin:


Gradient Overlay:


Inner Shadow:


Drop Shadow:


Result:






Step # 6
Create a new layer. Now get out the pencil tool (), set your foreground color to black (#000000) and set the pencil tool up like so:


Draw a 1 pixel vertical line down the navigation box as pictured here:


Press CTRL + J on your keyboard to duplicate this layer.

Press CTRL + I on your keyboard to "invert" the color, it should change to white (#FFFFFF):

Press 'V' on your keyboard to get out the move tool, and tap the -> (right arrow) on your keyboard once, to nudge this white line 1 pixel to the right.


Change the blending mode of this layer to "Soft Light":


Press CTRL + E on your keyboard to merge this layer with the previous layer.

Result:


Now press CTRL+ J on your keyboard to duplicate this layer, then press 'V' on your keyboard to get out the move tool, and position the dividers along our navigation bar as shown here:
(you'll want to duplicate this divider once for each button your navigation bar will need)



Go To Page: [ 1 2 ]
Page 1 of 2
Tutorial Index


Download File Download Tech Site Layout Source Package



Author: Frikandel
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
Desktop Deck - Desktop wallpapers and graphic design tutorials SourceCrave - Quality Webmaster Resources SENKOURYU.NET Kostenloses für den Webmaster BladeWorkz - Photoshop Tutorials Tutorio.com - Free Webmaster Tutorials
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page