Web Hosting Deals Holiday Logo Design Webcam Chat Website Header Templates Register domain Search Engine Optimisation Web Hosting
Go Back   Talk Mania Forum > Tutorials > Photoshop Tutorials > Web Layouts

Web Layouts Create professional webpage layouts with this very detailed, step by step tutorials.

 Image
Buy Sell Downloads

Reply
 
Submit Tools LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 10-24-2007, 09:30 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
136 Mobile phone shopping cart layout

Hello my friends

Today i am going to make Tutorial Number 136 from 500 Tutorial Marathon
I will show you how to create another type of shopping cart. You can use this type of layout for a oscommerce , creloaded , or any shopping cart you want.
This is my final result:



Let's start with a new document:
size 760x770 pixels
background color: white

Select Rectangle Tool , and create 2 shapes



Then for the top shape add the following layer styles









And for the other shape please add the following layer styles









This is my result



Now create another black shape like mine



Then go to Edit > Transform Path> Warp and use the following settings:



NOTE : if you don't have Warp tool, you can create a shape like this with pen tool

This is my result



Now drag this layer right above the background layer



Then go to Filter > Blur > Gaussian Blur and use the following settings :
( you will be asked if you want to rasterize the file , press YES )



Then lower the opacity for this layer to 50 %



Duplicate this layer ( press CTRL+J ), and with move tool place the duplicated layer on the bottom of your other shape



Now with Rectangle tool create another shape and place it like me



With this layer selected please go to Edit > transform path > Warp and use the following settings :



Hit enter on your keyboard, then go one more time to Edit > Transform > warp
This time drag manually the left corners of this shape



Hit enter on your keyboard after you are happy with result
here is my modified shape



Now duplicate this shape ( CTRL+J ) , then go to Edit > transform path > flip Horizontal



Change the layer styles for this shape to the following ones:







This is my result



Drag the layer right above the background layer in your layer palette



Then with move tool , try to place the layer like me



With the same techniques please create the same effect for the bottom gray shape, or you can duplicate the 2 shapes ( front and bottom )
Then place it like me, and modify the proportion with Transform tool ( CTRL+T )



Select the gray layer and with warp tool try to modify the shape like me



Do not forget to hit Enter on your keyboard. Now i will show you how to add some nice shadows

Select pen tool and create a simple shape



Then drag the shape under the gray shape



Then you need to go to Filter > Blur > Gaussian blur and set the value between 4-8
In the same time you can lower the opacity of this layer to 50 %



Do the same for the top part of your layout



Now create a layer on top of all layers, and with rectangular marquee tool create a selection like in the following image



Then grab Brush Tool, and chose Soft Mechanical 300 pixels brush



And with this brush create a single point inside your selection



Lower the opacity for this layer to 40 %
Then with Single Column marquee tool , place a small selection in the middle of the circle



Be sure you have the last layer selected, and press Delete on your keyboard
Press CTRL+D to see the effect



Then with Single Row Marquee Tool, create a horizontal selection ( the same this selection should be in the middle of your brush



After i hit , Delete and CTRL+D this is my result



Now it is time to add some images, and text, and maybe some icons. this is a very simple task and i think everybody can complete this task alone



Now we will create another 2 shapes with Rounded rectangle tool ( set the radius to 2 pixels



Then select both layers in your layer palette, and press CTRL+E ( this will merge the two layers into a single one )
In the same time the layer will be rasterized.

Select Elliptical marquee tool, and make a selection like mine



Then hit on the delete key
then press CTRL+D to deselect



Then add the following layer styles





This is my result



Now create a new layer , and with brush tool, ( soft mechanical 200 pixels brush ) create a few drawings like me



Lower the opacity value for this layer to 30 or 40 % then with " Single row marquee tool " and " Single Column Marquee Tool " delete some parts of this layer
This is my result



If you are curious how my lines are looking in this way, then instead of hitting the Delete key, you can use the eraser tool, with a smooth round brush

The nest step is to create some other details on our header.
I will add some text , and with a brush from Talk-Mania Big-Pack i will add some details on a new layer
This is my final result



This PSD file is available for download only for VIP members

__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 10-24-2007, 09:36 PM
Junior Member
 
Join Date: Sep 2007
Posts: 20
Security-rahef is on a distinguished road
thank u admin
Reply With Quote
  #3 (permalink)  
Old 10-25-2007, 05:41 AM
Scorpian8867's Avatar
Junior Member
 
Join Date: Feb 2007
Location: Texas
Posts: 24
Scorpian8867 is on a distinguished road
Send a message via AIM to Scorpian8867 Send a message via MSN to Scorpian8867
Very nicely done. I never thought to use arced shadows before. I'm going to have to try that out.
__________________
RoddyInnovations.com
Reply With Quote
  #4 (permalink)  
Old 10-27-2007, 04:28 PM
frankws's Avatar
Junior Member
 
Join Date: Apr 2007
Posts: 22
frankws is on a distinguished road
nice admin
Reply With Quote
  #5 (permalink)  
Old 10-27-2007, 09:01 PM
Member
 
Join Date: Apr 2007
Posts: 30
kanthi is on a distinguished road
Wow..great tutorial.
Though i don't have a warp tool.....gonna try this with apen tool.
Thanks for the alternative suggestion for warp.
Reply With Quote
  #6 (permalink)  
Old 11-05-2007, 12:49 PM
Mahdi's Avatar
Junior Member
 
Join Date: Nov 2007
Posts: 1
Mahdi is on a distinguished road
Hello,
That was a very great tutorial.
I am a new registered user, But I have seen some of your other tutorials on this forum.
Where do you find those great PNG files?!
Can you give us the Globe image?!
Reply With Quote
  #7 (permalink)  
Old 11-20-2007, 06:45 PM
Junior Member
 
Join Date: Jun 2007
Posts: 6
xzsurf is on a distinguished road
finally arc shadow tutorial!!
Reply With Quote
  #8 (permalink)  
Old 11-22-2007, 10:29 AM
Junior Member
 
Join Date: Nov 2007
Posts: 15
kamak is on a distinguished road
Thanks for the lesson.

It is a lesson for me.
Reply With Quote
  #9 (permalink)  
Old 11-23-2007, 09:26 PM
Junior Member
 
Join Date: Nov 2006
Posts: 24
jokeru is on a distinguished road
Interesting layout!
Reply With Quote
  #10 (permalink)  
Old 12-28-2007, 10:56 AM
Junior Member
 
Join Date: Dec 2007
Posts: 1
orioncs is on a distinguished road
Thumbs up

Really informative tutorial, Thanks

Reply With Quote
Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump


All times are GMT +2. The time now is 12:54 AM.


Fake ID

Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
SEO by vBSEO 3.2.0 RC8
Forums Copyright © Talk-Mania.com