Her

Home Photoshop Tutorials Web Layout Mobile Phone Shopping Cart Layout

Mobile Phone Shopping Cart Layout

Author: amitk Author's URL: www.talk-mania.com More by this author

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 2

image 7

image 8

image 5

This is my result

image 10
Click to enlarge

Now create another black shape like mine

image 11
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

image 13
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 2

image 24

image 5

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

image 42
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
Click to enlarge