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

dot.Mobi Layout


So let's start with a new document.

Size 760x770
background color: Black

Now add a image with a phone. I have choose a image with LG Shine, and i have placed this image on the right side of my layout

image 1

Then Create a text logo

image 2

For this text logo please add the following layer styles

image 3

image 4

image 5

image 6

This is my result

image 7

Duplicate this layer 2 times ( to duplicate a layer first you need to select the layer in your layer palette, then press Ctrl+J two times

Select both layers and press Ctrl+E

image 8

this action will merge the layers into a single one

image 9

With this layer selected, go to Edit > transform > flip vertical

Then with down arrow key place the duplicated layer as above ( you can use also move tool " V " )

image 10

be sure you have the duplicated layer selected, then press on " add layer mask "

image 11

Select Gradient tool ( use the following settings )

image 12

Then draw a line with gradient tool like in the following image

image 13

You can notice that we have a nice reflection for our text logo

Next choose rounded rectangle tool ( set the radius to 2 pixels ), and start creating a big shape like mine

image 14
Click to enlarge

Then with the same tool create another small shapes for our buttons

image 15
Click to enlarge

Then add the following layer styles for all these buttons

image 3

image 4

image 5

image 6

This is my result

image 20
Click to enlarge

Select all the buttons ( in layer palette ) then drag all this layers to the " create a new layer button "

This action will duplicate all the buttons.

Then with this duplicated buttons layers selected, please press Ctrl+E

With the merged layer selected, go to Edit > transform > flip vertical

With arrow keys place the merged layer with buttons under the first buttons

image 21
Click to enlarge

Press on " add layer mask " button .

Then with gradient tool, create another line like in the following image

image 22
Click to enlarge

Then create a new layer above the background layer.

To create a new layer you need to select the background layer , then you need to press Ctrl+Shift+Alt+N

With paint bucket tool fill this layer with black

Then select gradient tool, and use the following settings

image 23

Draw a line from point 1 to point 2

In the next image you can see the starting and the ending point and also the result

image 24

Then add alone some text, and you can add also some shapes with Rounded Rectangle tool.

image 25
Click to enlarge

Then for the gray shapes please add the following layer style

image 26

image 27

This is my result

image 28

After that i will add some text alone

image 29
Click to enlarge

Then i will add the same layer styles for the following box

image 30

Here you can see the layer styles settings

image 31

image 32

image 33

image 34

image 35

image 36

And this is my result

image 37

Now please go to www.free-photoshop.com and download the following set of brushes link.

( please not that you need to be registered before you can download this set of brushes )

Create a new layer above all layers. set the foreground color to white, Load the start brushes from www.free-photoshop.com in photoshop, and make some stars on your layout

This is my result

image 38
Click to enlarge

Now you can download also another set of brushes from free-photoshop.com and with this set of brushes you can add another details

I have used the following set of brushes:

Tech brushes #9

Brush #1

This is my final result

dot.Mobi Layout
Click to enlarge


Author's URL: amitk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "dot.Mobi Layout"

Captcha