dot.Mobi website layout

1 Star2 Star3 Star4 Star5 Star (8 votes, average: 4.38 out of 5)
Loading ... Loading ...

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

Mobi1

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

Mobi2

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.

Mobi3

Then for the gray shapes please add the following layer style

This is my result

After that i will add some text alone

Mobi4

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

Mobi5

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

Mobi6

4 Comments »

  1. HASSAN' Says:

    This is a very nice website. but plz tell me which software u used for this???

    comment-bottom
  2. robert Says:

    i would really like to design websites like you do please send me more tutorials of like the one you have designed

    comment-bottom
  3. hotxac Says:

    nice temp

    comment-bottom
  4. Holly Says:

    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!

    comment-bottom

RSS feed for comments on this post. TrackBack URL

Leave a comment