Then go to Edit > Transform > Scale and scale the map vertically so you will get the following:

I have changed colors a bit and used Burn and Dodge tools on the pieces of map to give it a bit of third dimension look. Legend: Red spots idicates burn tool and green- dodge tool. Remember to switch the layers.

Now on we will add even more shadows. You can place the all shadows on one layer. Chenge blending mode to Multiply, pick some dark color and make a selection from first layer, then place some gradients here and there. Replicate this effect with all four layers. Thanks to this we will nicely enchant the edges.

At this moment I have added a bit of smaller effects that you can find out in psd source file. Here's how to make a shadow under the map. Create a selection like this one and fill it with dark color. This layer should be under the map.

Deselect and use Blur tool to achieve something like that. Notice: closer to the corner- less blurred shape.

With Eraser tool smooth the inner edge of the shape.

Replicate this effect to achieve this:

Seems like we're done. Just add a map sign and that's it. Mine is a mix of three effects shown before. Colors and lights from the menu button, skew and blurred shadow. Give it a try before we will go to the cutting part.

Step 14 - Cutting to html

It's good to have some blank html and reset css files in your inventory. It's like an action in photoshop. You don't have to write/copy everything hundreds of times. Just copy reset css and blank html to your project folder and you have a fast start. Here, you can download my blank template as well. Right, let's start to reproduce our main page in html/css. Open up in photoshop our psd file with main page mock-up and hide all the layers except noisy background. Then make a selection, about 200x200 pixels. We don't have to worry too much here because this pattern will be seamless for sure.

Go to Edit > Copy merged, so everything that is under the selection will be copied (in case you have a background on more than one layer) and then go to File > New. As you can see width and height has automatically the values from our copied selection. In new document go to Edit > Paste and then to File > Save As. Save the file as a background.jpg (with maximum quality - 12) in 'graf' folder from my blank template (Or in any other folder, but later on remember to change the paths in my css codes). Don't worry about the images' weights too much for now. Save everything with maximum quality and later on I will show you how to shrink them. Alright, open up index.html in your browser. It's blank. Then open up index.html in some codes editor as well as style.css. Even notepad could be, but of course there are better choices. Update html's style in css by pasting this code into it: