View Single Post
  #1 (permalink)  
Old 10-22-2007, 07:35 PM
admin's Avatar
admin admin is offline
Administrator
 
Join Date: Sep 2006
Posts: 1,385
Blog Entries: 2
admin has disabled reputation
135 Ecommerce web hosting layout

Hello

Today i am going to make Tutorial Number 135 from 500 Tutorial Marathon
I will show you how to create a e-commerce web hosting layout
This is my final result:



All layer styles , and gradients are included in this Package : Talk-Mania big-pack

Let's start with a new document
size : 760 x 770 pixels
background color : #333333

With Rounded rectangle tool create some shape and place it like me.
I will use different colors. In this way you can see better where i am placing the shapes



Then for the top white shape please add the following layer styles







This is my result



Now for the orange shape please add the following layer styles











This is my result



Now for the other white shapes please add the following layer styles







This is my result



Now we need to create a new pattern. for this pattern please create a new document
Size 10 x 10 pixels with transparent background
Zoom this document to 1600 %
Grab Pencil Tool ( set the brush size to 1 pixel ) , then create the following drawing



Now go to Edit > Define pattern
Chose a name for this pattern and press ok.
You can close this small document. now let's return to our layout

We will add some layer styles for the big red shape
But before that please change the color of this shape from red to black ( # 242424 )

Then add the following layer styles













This is my result



Now please go to www.free-photoshop.com and download the Brush #18 - Grunge Brushes

Load this set of nice brushes into photoshop, then load the selection for the orange shape. To load the selection please click on the layer thumbnail while you are holding down the CTRL key



This is the result. you will see a selection around your shape



Create a new layer ( press CTRL+SHIFT+ALT+N ), Then with brush tool create some random drawings with those brushes downloaded from Free-Photoshop.com



Then change the blending mode for this layer to Overlay



press CTRL+D to deselect
This is my result



Over this orange shape please add some details: text an a 3D laptop



Then with Rounded rectangle tool add some boxes.



Then create a white shape , with rounded rectangle tool, and place it under the text : " Now with more features then ever before "



Then add the following layer styles







This is my result



Now load one more time the selection for the orange shape
Then create a new layer right above the shape layer. ( press CTRL+SHIFT+ALT+N )
Then Grab Paint Bucket tool, and use the following settings:



Then click on time inside your selection
this is what i have



Now press CTRL+D to deselect , then press on Add layer mask button



Select gradient tool



And draw a small line over the top of the shape
then for this layer please change the blending option to Overlay

This is my result



Do the same for the blue shape. You have to apply the same technique as above



Now it is time to create a shape with pen tool



For this shape add the following layer styles









This is my result



Duplicate this shape ( be sure you have the layer selected then press CTRL+J )
place the shape on the other part of the website



Then select polygon tool, use the following settings



And create a star.



rasterize this layer ( right click on the layer then select Rasterize layer )

Load the selection for the blue shape



Then press CTRL+SHIFT+I ( select inverse ) , be sure you have the star layer selected and hit delete key on your keyboard

press CTRL+D. You will have the following result



Duplicate this star one time ( CTRL+J ) then place it on the other side of the website. In the same time i will add also some text



Now you can add alone some text on your layout and i think you are ready



This PSD file is available only for VIP members


3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote