I will show you how to create a Dot.Mobi layout, which is a very elegant and professional appearance for any mobile relates services.
This is the final layout

So let’s start with a new document.
Size 760×770
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

This is a very nice website. but plz tell me which software u used for this???
i would really like to design websites like you do please send me more tutorials of like the one you have designed
nice temp
This is a beautiful design, but does it resolve to a mobile device? It doesn’t really look like it. Mobile websites are long and skinny and have tiny graphics file sizes. If you go to ready.mobi with the url of your site, it will be graded from 1 (worst) to 5 (best) based on how well it is expected to display on a phone.
For example, iframes and tables may cause a fail on the validator, as will large file sizes, especially for graphics. Image sizes need to be specified in the html as well.
It’s been my experience that you will need to really shrink the file size in Adobe Fireworks to get the job done.
Good luck!