Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Mobile Phone Shopping Cart Layout

Mobile Phone Shopping Cart Layout


Let's start with a new document:

Size 760x770 pixels
Background color: white

Select Rectangle Tool , and create 2 shapes

image 1

Then for the top shape add the following layer styles

image 2

image 3

image 4

image 5

And for the other shape please add the following layer styles

image 6

image 7

image 8

image 9

This is my result

Click to enlarge
Click to enlarge

Now create another black shape like mine

Click to enlarge
Click to enlarge

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

image 12

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

This is my result

Click to enlarge
Click to enlarge

Now drag this layer right above the background layer

image 14

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 )

image 15

Then lower the opacity for this layer to 50 %

image 16

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

image 17

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

image 18

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

image 19

Hit enter on your keyboard, then go one more time to Edit > Transform > warp

This time drag manually the left corners of this shape

image 20

Hit enter on your keyboard after you are happy with result

Here is my modified shape

image 21

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

image 22

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

image 23

image 24

image 25

This is my result

image 26

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

image 27

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

image 28

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 )

image 29

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

image 30

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

image 31

Then drag the shape under the gray shape

image 32

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 %

image 33

Do the same for the top part of your layout

image 34

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

image 35

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

image 36

And with this brush create a single point inside your selection

image 37

Lower the opacity for this layer to 40 %

Then with Single Column marquee tool , place a small selection in the middle of the circle

image 38

Be sure you have the last layer selected, and press Delete on your keyboard

Press Ctrl+D to see the effect

image 39

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

image 40

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

image 41

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

Click to enlarge
Click to enlarge

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

image 43

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

image 44

Then hit on the delete key

Then press Ctrl+D to deselect

image 45

Then add the following layer styles

image 46

image 47

This is my result

image 48

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

image 49

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

image 50

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

Mobile Phone Shopping Cart Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Mobile Phone Shopping Cart Layout"

Captcha