tutorials html 2

7/28/2019 Tutorials HTML 2

1/59

TutorialsHTML & CSS1234

Design a Beautiful Website FromScratchMarko Prljic on Apr 29th 2009 with 433 CommentsTutorial Details

Program: HTML Editor, Photoshop

Difficulty: Intermediate

Completion Time: 2-4 hours

Have you ever wanted to design a beautiful website but just didnt know how? To be honest, a few

years ago, that happened to me too. While browsing the web, I saw so many nice looking websites

and wished I had the skills to create such designs. Today I can and Im going to teach you how to do

so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will

point out these tiny details which make a website design look beautiful. Fire up Photoshop and lets

get going!
http://net.tutsplus.com/author/markoprljic/http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/#disqus_threadhttp://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/#disqus_threadhttp://net.tutsplus.com/author/markoprljic/


2/59


3/59

Step 1 - Download the 960 Grid System

TemplateThe designs I create are nearly all based on the 960 Grid System. So, before we begin we need to

download the grid system Photoshop templates. You can

find them on the960.gsofficial website. Simply unpack the zip file and look for PSD templates. You

will see that there are

two different types of templates: one is 12_col and the other one is 16_col. The difference between

these two are, as the name suggests, one is made with 12 columns and the other one with 16

columns. To explain it a bit more, if you have 3 boxes in your design you would choose the 12_col

grid, because 12 is divisable by 3; or if you have 4 boxes in your design, you would choose either

12_col or 16_col grid because 12 and 16 are divisable by 4. If you follow this tutorial, you will seethis in action.

Step 2 - Defining the Structure
http://960.gs/http://960.gs/http://960.gs/http://960.gs/


4/59


5/59

Before we open our PSD grid template and begin drawing, we first need to define the structure of

our site. This is a bit more of a complicated structure because we have a layout inside a layout. You

can see this exemplified in the image above.

Step 3

After weve defined our site structure were ready to move on. Open your 16_col.psd template. Go to

Image > Canvas size . Set the canvas to 1200px wide and 1700px high. Set the background color

to #ffffff.


6/59

Step 4

Now pick the Rectangle Tool and draw in a rectangle the full canvas width and about 80px high. Fill it

with the color#dddddd.

Step 5


7/59

Create a new layer above the rectangle and set Layer mode to Overlay. Ctrl+clickthe rectangle

layer. Now the rectangle will be selected. Choose a 600px soft brush, set the color to white, and click

a few times with the edge of the brush just a bit over the selection, like shown on the image. This

way you create a nice, subtle light effect. Additionally you can link these two layers.

Step 6


8/59

New layer. Choose the Rectangle tool again and draw in a thin dark grey rectangle, as shown in the

image.

Step 7


9/59

With the Rectangle tool selected, draw in a big box around 500px underneath the top rectangle.

Make it 575px high and give it a Linear Gradient overlay from #d2d2d0 to #ffffff, direction -90, Scale

100%.


10/59

Step 8


11/59

Now we are going to create the same light effect as described in Step 5. We will be using this

technique a lot; so next time I will just refer you to Step 5 for the effect.

Create a new layer above all the current layers. Ctrl+click the big rectangle. Choose a 600px soft

brush, set the color to white, and click a few times with the edge of the brush just a bit over the

selection, as shown in the image.

Step 9


12/59

Create a new layer and draw in a big rectangle about 400px high. This one is used for our header.

Fill it with a nice blue gradient from #2787b7 to #258fcd.

See how subtle the color change is?


13/59


14/59

Step 10


15/59

Add a dark blue 1px line on the bottom of the header box, apply the Drop shadow effect. For drop

shadow use Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px. Next,

create a new layer above and draw another 1px white line under the dark blue one. This way we

create sharp edges for our content box. Basically you can apply this border technique on every box

in your design just with different colors.

Step 11


16/59

Create a new layer, and with the Rectangle Tool, draw a 50px high rectangle in the top part of the

canvas, just as shown in the image. This will be used for our navigation.


17/59

Apply a Drop shadow. Use the values shown in the image.

Step 12

Time for the navigation. Use the Rounded Rectangle Tool and set the radius to 5px. Draw a rectangle,

fill it with #f6a836, and apply the following effects:

Inner Shadowcolor: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px.

Inner glowBlend mode: normal, color: #ffffff, Size: 4px. Everything else leave default.

StrokeSize: 1px, Position: inside, color: #ce7e01.


18/59

Now select the rectangle with Ctrl+click. Go to Select > Modify > Contract and enter1px.


19/59

Create a new layer above, set the Blend mode to Overlay and create the same effect described in

theStep 5 using a smaller brush size this time. Then add the navigation text. I used Arial for

navigation links, all caps and Antialias set to none.

Step 13

Now lets create the search box. With theRounded Rectangle Tool, radius 5px, create a search box

positioned on the right side of the grid layout and in the middle of the top gray stripe from Step 4. Add

these layer styles:

Inner Shadowcolor: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px.

StrokeSize: 1px, Position: inside, color: #dfdfdf.


20/59

I added the search text and a light gray GO button. This is how it should look.


21/59

So far we have a lot of layers and need to organize things a bit so we will create a new Layer

folderand name it search. Select all layers that make the search field and just Click + drag inside

the new folder. Later were going to organize other content inside the folders so we have a nice

organized layer palette.

Step 14

Now create a new layer and draw a Sign Up button the same way we created the search field

just half the width. Place it under the search field in the middle of the navigation stripe.


22/59

Again were creating the effect fromStep 5.

Use a smaller soft brush size. In this case it was 45px.


23/59

Step 15

After adding the logo and the Tagline this is how our site should look like now.

Step 16


24/59

Now were coming back to our layer organization mentioned a few steps earlier. Create a new empty

layer folder and name it top_bar. Move all graphics from the top of the layout inside this folder

(logo, tagline, search field, sign up button, navigation and backgrounds).


25/59

Create another empty layer folder and name it header. This is where we will put our header

graphics. This is how it should look.

Step 17


26/59

Our header looks a bit plain right now so were going to add the same light effect everywhere else on

the site. Select the header box (blue). Create a new empty layer above and set the mode to Overlay.


27/59

Pick a large soft brush 600px, color#ffffffand click a few times in the area under the navigation.

Furthermore, to gain more depth, we can switch the color to black and do the same thing just in the

bottom part of the header. Give it a try!

Step 18

In this step I will explain to you how I created the reflection for the header images. Take two images

of your choice, I used Safari screenshots of my two other templates, scale one down and place it

behind the bigger one. Copy both layers, and with the Free Transform Tool, flip the first image and

then the other one. Shift both images a few pixels down. Now make a selection from outside the

bottom part to middle of the first flipped image with the Rectangular Marquee Tool. Go to Select >

Modify > Feather and type 30px or more. You should have a selection similar to the shown in the

image. Press the delete key a few times and you will create a nice faded reflection from the original

image. Repeat this step for the second image.


28/59

Now to make those two images stand out a bit, create a new layer and set the mode to Overlay.

Create the effect described in Step 5.


29/59

This is how our header should look after adding a nice tagline and some buttons. Dont forget to put

all these graphics inside the header layer

folder to keep things organized here ;)

Step 19

If you look at the final image preview, you can see that we have nice tabs in the content area. In

order to create these tabs well need to perform a few extra steps, but its definitely worth it. First,

create a large rectangle shape with the Rounded Rectangle Tool. Make it 70px high and a radius of

10px or more if you wish. Now we have to get rid of the bottom radius and make a perfect corner out

of it. Pick the Direct Selection Tool and click on the shape path. Click the vertical point and drag it

down while holding the Shift key until it reaches the same level with the horizontal axis. So far so

good but its still deformed. You see the little handle. Click on it and move it upwards to the point of

the path.


30/59

Now we have created a perfect corner. This is how it should look. Repeat this step for the right

bottom corner.

Step 20


31/59

Pick the Line tool and set it to 1px.

Step 21


32/59

Draw in gray separators while holding the Shift key.

Step 22


33/59

Place some icons, headings, and a description for each tab. I used Ray Cheung icons available from

WebAppers.com. Usually one tab is always active and the others are inactive. To make this clear

in our

design, we need to find a way to accomplish this. I desaturated the other icons and reduced the

opacity for the headings and text while keeping the first active tab colorful and bright.

Step 23


34/59

To make the active tab more obvious, were going to give it a faded white background. To do this

first select the whole object and then subtract from the selection to get only the first tab selected.


35/59

This is what your selection should look like.

With a smaller soft brush, paint in a white background.

Step 24


36/59

Add the shadow. Create a dark gray rectangle behind the tabs, as shown in the image.

Add a vector maskby clicking the little icon in the bottom of the layer palette.


37/59

Set the color to black, pick a large soft brush, and start deleting parts of the rectangle. As a result, we

get a nice fake shadow effect behind our tabs.


38/59

Finaly the attention to detail. Draw in a 1px gray line on the bottom of the tabs. Mask the layer again

like described earlier and with a big soft brush delete the left and right end of the line. Now we get a

nicely faded line that follows our shadow behind the tabs.

This is how our tabs should look.

Step 25


39/59

Its time to design the content for our first tab. We need a featured design image, a nice heading and

some text. First we

will create the featured image. I thought that it would be nice to break the edginess of the design by

creating a nice stacked photos effect for our

featured design image. To do this, draw a white rectangle with a 1px light gray border, and a very

subtle drop shadow effect.


40/59

Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.


41/59

Import your featured image and place it over the white rectangles. Dont worry if the image is flowing

outside the boxes, we will fix that. Make a selection from the top rectangle, go to Select > Modify >

Contract and insert 5px. With the featured image layer selected click the Quick Mask icon on the

bottom of our layer palette. You will get nicely bordered image effect like shown in the image here.

This is how your layer order should look like.

Step 26


42/59

Dont forget to keep things organized. So create more layer folders and organize your palette. This is

how I have done it.


43/59

By adding a nice heading, some text, and bullet lists, our web design work is finished. Lets move on.

And again some layer organization.

Step 27: Testimonials


44/59

I thought this one should be huge; so Ive put this in a big box right after the main section. First draw

a big light gray rectangle about 220px high. Give it a 1px gray border.


45/59

Then draw in another brighter rectangle by 10px smaller on all sides. Also add a 1px light gray

border.

Finally add some text and were done!

Step 28


46/59

Its time for the footer. Draw a big 400px high, dark gray rectangle.

Step 29


47/59

Add some light effect the same way as described in Step 5.

Step 30


48/59

Next, draw a 10px high rectangle above the footer and add some subtle effect by adding two more

lines on top and bottom like shown in the image.

Step 31


49/59

Create the very bottom part where the repeated navigation will be placed. You can copy the

rectangle from the top where the navigation is

placed, move it down and make it about 40px high. Place it at the very bottom of your canvas.

Please note that you may need to expand your canvas at this point so that all your graphics fit. If you

need to do that, then go to Image > Canvas size and set the height to fit the entire layout.

Step 32


50/59

Attention to detail again. Add a 1px white line above the footer navigation box to give it a nice border

effect.

Step 33


51/59

Add some footer content and separate it nicely within your grid.

Step 34


52/59

Finally organize all your layers inside the layer folders. This is how Ive done it.

The Design


53/59


54/59


55/59


56/59


57/59


58/59

So there we go, the final design, with a couple of variations for different pages. The finalPSD

designsare, of course, on sale atThemeForest.net.
http://www.themeforest.net/item/bvd-beautiful-website-design/38497http://www.themeforest.net/item/bvd-beautiful-website-design/38497http://www.themeforest.net/item/bvd-beautiful-website-design/38497http://www.themeforest.net/item/bvd-beautiful-website-design/38497http://themeforest.net/?ref=NetPremiumhttp://themeforest.net/?ref=NetPremiumhttp://themeforest.net/?ref=NetPremiumhttp://themeforest.net/?ref=NetPremiumhttp://www.themeforest.net/item/bvd-beautiful-website-design/38497http://www.themeforest.net/item/bvd-beautiful-website-design/38497


59/59

Final ThoughtsI hope you have enjoyed this tutorial and have learned a few new techniques. Now, its your turn tocreate more great designs. Remember, with attention to detail you, will be able to design beautiful

websites with just two or three Photoshop tools. What do you think?

Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and

articles.
http://www.twitter.com/nettutshttp://feeds.feedburner.com/nettutshttp://feeds.feedburner.com/nettutshttp://www.twitter.com/nettuts

tutorials html 2

Documents