dot.Mobi Layout

admin · #1 (**permalink**) 06-29-2007, 02:05 AM

Hello

Today i am going to make Tutorial Number 124 from 500 Tutorial Marathon
I will show you how to create a Dot.Mobi layout.
This is the final 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

Then Create a text logo

For this text logo please add the following layer styles

This is my result

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

this action will merge the layers into a single one

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 " )

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

Select Gradient tool ( use the following settings )

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

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

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

Then add the following layer styles for all these buttons

This is my result

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

Press on " add layer mask " button .
then with gradient tool, create another line like in the following image

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

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

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

Then for the gray shapes please add the following layer style

This is my result

After that i will add some text alone

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

Here you can see the layer styles settings

And this is my result

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

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

If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack
This layout is available only for VIP members. Here you can find the PSD file - DOWNLOAD
If you don't know how to become a VIP member please see this LINK
Thank you