Now: Tutorial for Web and Software Design > Photoshop > Web Layout > Photoshop Content
> Creating A Basic Web Layout In Photoshop [Bookmark it]
Creating A Basic Web Layout In Photoshop

Below i will show you how to create a professional Looking website , i reccomend only intermediate + users attempt this!

Make sure your foreground color is : #FCF8F8

Step 1. Create a new document with background color white , 780 x 600 pixels

Step 2. Then Select the Marque Tool And Create A Top Section Like this Below: ( I have cut this image a bit to fit on this page , make sure it goes all away accross!

image 1

Step 3. Create This as a new layer and name it top, then right click on the slected area and go to fill , and then click ok!

Step 4. Then go to layer > later style > stroke , and set it to 1px , black sroke!

By now you should have something looking like this >

image 2

Step 5 . Now go to Layer > Layer Style > Gradient Overlay , And use these following settings! ( click on the picture to view properly!! )

image 3

Step 6 . Then Add Your text!

Step 7 . Select the Maraque Tool and now create a left navigation area down the side

Do the same Again as before , Create new layer this time calling it Left Nav , then right click and fill , and then create a 1px black stroke! you can also insert a drop shadow and inner shadow effect to it!

thats were all your content will Go!

Step 8. now create a bottom footer for your site , by selecting the marque tool again , arrange the layer to the front , and also fill the layer to its foreground color , and also make a black 1px stroke!

Step 9 . Then simply go to layer > layer style > gradient overlay , and use these settings below: ( Click image for larger view! )

image 4

Then you are done! Your layout should now look something like this! > Below

Click to Enlarge
Click to enlarge

[Bookmark][Print] [Close][To Top]
  • Prev Article-Photoshop:

  • Next Article-Photoshop:
  • Related Materias
    Perfume Ad
    Photo Frames Never Easier!
    Retrostyle
    Re-paint Your Picture
    Realistic Spotlight Effect
    Mosaic Header
    Realistic Microphone in Ph
    Pearly Button
    Power Effects
    Create a Web Banner Ad
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial