Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates (NEW)  |  Website templates  |  Privacy Policy  |  Link Exchange  |  Contact Us

Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!

Welcome To ProDesignHost.com Photoshop Tutorials Area - Animated Ad Banner

Author: Nathan Ng

- Start a new document 600x200 and fill the background with #3E3F49.
- Select the rectangle shape tool and create a long horizontal bar like mine.

- Now apply the following layer styles to it:

DROP SHADOW | INNER SHADOW | GRADIENT OVERLAY | STROKE

- Now select the Rounded Rectangle Tool , and set the Radius to 60px:

- Then draw a shape about similar size to mine.

- Now go to Edit->Transform->Skew. This will give you handlers on each corner so you can resize/adjust the shape.
- Now use your cursor to pull the top right and left handle inside to give the sides a inward slant. Use your own judgement to make sure both sides slants equally.

Now apply the following layer styles to this shape. Layer->Layer Style

DROP SHADOW | INNER SHADOW | GRADIENT OVERLAY | STROKE

- Create a NEW LAYER
- Set your foreground color to WHITE,
- Now CTRL+CLICK on this layer to load the selection, then select the Brush Tool , set the brush size to 65 Soft Edge and make a straight stroke across the top edge of the selection. Start from outside the selection, then all the way through to outside the other end. (see image). Hold down shift while you do this to get a straight stroke.

- CTRL+D to deselect.
- Now move this layer (the one you just brused) up by about 3 or 4px.
- Now set the layer's opacity down to about 50%

Now choose the rounded rectangle tool, set the radius to 20px, then draw a shape just near the top edge of the shape. Make it smaller than the shape and not to go outside it.

Then set this layer's opacity down to 20%

Now lets add some details to our pipe. choose (by choose, i mean select it as the working layer in the layer's pallete, a working layer pallete is highlighted dark blue) the pipe layer (the first layer we created), then go to layer->rasterize->shape.

Now, use the rectangular marquee tool and make a 225 wide and 5px high selection on the bottom of the pipe.

Now press DELETE, this will delete selected area of the pipe, but because it has some dropshadows on it, it will give it some depth.

now, use your imagination with the above step, create different size selections, different places. Note that this will only look good if done with thin selections, and a more towards the bottom of the pipe.

Now maybe you can add some wires to the interface to make it look hi-tech. Adding a wire is pretty easy.
- Create a new layer
- create a selection using the circular marquee tool (if you know how to use the pen tool, you can make more advanced wires).
- Go to Edit->Stroke, enter 3px, and choose your wire's color.

Then apply the following Bevel and Emboss layer style to it. Now just use the eraser tool with hard edge brush and delete away the unwanted part of the wire.

 

Here is mine.
DOWNLOAD PSD FILE

 

Author: Nathan Ng
Advertisements

Premium Partners

  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Website Design Tutorials - Web site design is an area that simply takes experience to perfect. Get started with these tutorials covering everything from page layout to content tips. At Webdesigntutorials.net you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website templates  |  Privacy Policy  |  Contact Us

All Right Reserved by ProDesignHost.com