If you read previos articles about "Basic principles of web design" (part1 and part2), then you can easily implement those knowledge to start creating your own web design. Today we will create a "underwater" layout.

First of all open a new document in your Photoshop, and set the dimensions (about 1200X1080) ,don't worry about large dimencions of the document, the wrapper will be about 900px wide.Drag two vertical rullers: one at 150px from left and other at the 1050px from left side of the layout.Create a new layer called "water_surface".Set the foreground color to a light blue (almost white) and for the background color something little more darker like a #014e84 blue. Go to the "filter" tab in main menu and choose "Render" and then "Clouds". That will create a nice cloud effect from those colors. Next go to "Image" (alt and I from your keyboard) "Adjustments" and choose "Level" . Drag the side sliders little bit closer to the middle slider to encrease the contrast and make colors more vivid. Copy this layer and rename the "water_surface_copy" in "liquid_surface". Select "liquid_surface" layer and go to filter gallery and choose "Chrome" filter from the "Sketch" folder. Increese "Smoothness" to 10 and decreese "Detail" to 1. Now ser the "Soft Light" blending mode for this layer.Select both layers and Merge them in one. Aply a Gaussian Blur(with the value of 1,6) effect to new layer.You should to have something like in image below: 

Scale the "water_surface" in y to about 250px height. Go to Filter->Filter Gallery -Ocean Ripple and set the "Ripple size" to 14 and "Ripple magnitude" to 2.Make a new layer called "water_back" and move it under the "water_surface". On "water_back" aply a greadient from #1491d9(top) to #026bb4(bottom). Now create a layer just above "water_surface" and fill it with a color about #0374b5.Let's name this layer "color_over". Set the blending mode for this layer overlay (or, if you prefer a lighter background, set it by a "Screen", or "Lighten" in case of to dark areas.) Feel free to experiment with blending modes.Now le's Return to our "water_surface" and aply to this layer a gradient mask, to fade the bottom side of this "ripples" and create a underwater distance effect. Check the second image for this phase.

Now that we have the background (by the way, you can group the 3 layers created in a folder called Background) we can start creating page elements. So we'll start with button area: Create a round corner shape (with corner radius about 10px). Unfill the layer and aply a gradient in blending options from light blue(bottom) to dark blue in middle and to fade on top. Cut another rounded-corner shape and make some nice corner to a new shape (something like a layerd page of a folder). Make a stroke from white to a blue color. Create a "content" side with a lighter color but not to light compare to the background. And remember what I wrote in "basic principles of web design" : keep the same element on the page , in this case it's about rounded corners and color gamma. Place the background of the content on layer just under the "butons" .Fade the top side of the "content" wich is beyound the butons.Now create a search input from a new shape keeping the layout idea. Make the color of the shape same color of "content", aply a dark blue stroke and inner shadow. Also create a button for "go" with a splited gradient like in image below

 

 

It is highly recomanded to use text when creating web design to beter view of entyre concept. So go ahead and put bredcrumbs and Menu text ("Home, Aboutr us..."). Create a shape for a text and title container. aply a gradient from the dark blue for the side where goes title, to a lighter blue then content for the text side. 

The images you will use for content will look great if will have a padding space and a border of 1px in dark blue . Now create a "right side" and "update-boxes" not too different from "content". Since it is a Home page layout create a "read-more" button. Make the space for title on the right side in oposite with one on the "content" .

Let's create the "footer". Create a shape (about 200px height) just under the "content" light shape created after "menu". Copy the layer style from "buttons" shape and paste it on the new shape and call it footer.

 In footer , I usualy include a fade logo (smaler than one on the header) ,menu including "terms and conditions" and a few landing pages (important for SEO). Also include on the left side the addres of your client. And that's it. You can play with shadows and outer glows (remember: shadow color should be in same gamma with background color not black, and blending mode is multiply). My final version is just below... you can make your one version ..(like without right side ..or different "upgrate-boxes" put some bubbles that will be placed absolute in HTML).

Hope it's help you to train your skills, adn imagination.

The PSD file can be found here