Photoshop tutorials

Basic Tutorials

Drawing&Paiting

Effects & Objects

Photo Effects

Text Effects

Textures Making

Photo Fixing

Manipulation

Web Graphics

Miscellaneous

Photo Retouch

Animation

Web Layouts

Button Making

Abstracts

Filters

Brushes

Actions

Shapes

Fonts


folder Photoshop Tutorials > Web Graphichs

Web Interface Design

Here you will be taught how to make a web interface that is transparent. This design requires
that you use an image as your webpages background.

1) Open a new file, around 300 x 250pixels, with any background color. I used black.

2) Make a white square on a seperate layer. Set the opacity to 45-55%. This is going to
be the table for our web interface.

web graphic design tutorials

 

 

3) Click on the Polygonal Lasso Tool.

web graphic design tutorials


4) Now cut some corners.

web graphic design tutorials

5) Still using the polygonal lasso tool just cut out lines from the square. Heres what i did.
You don't need to do this, but this gives our website a more techy look.

web graphic design tutorials

6) Repeat step 5 until your happy with what you have.

7) (OPTIONAL) If you want a boarder around your table.
GO TO LAYER > EFFECTS > INNER SHADOW. Use these setting with any color you want.

web graphic design tutorials
web graphic design tutorials

8) Now just add a background. I made this one using my Space Warp tutorial. Thats it for our web interface design tutorial.
You can add additional tables to your website for navigation or whatever else you need.

web graphic design tutorials

 

 

 

 

 

eXTReMe Tracker

                                    © 2006 PhotoshopTutorials100.com