Modern Web Design Style

For this tutorial, I'm taking a temporary departure from realistic lighting, smooth bevelling, metallic effects, and soft shadows... :)

Welcome to a world of sans-serif fonts, monocoloured areas, objects that don't cast shadows, colours that don't contrast, and text saved as picture files.

Modern-style web design, also known as the "Microsoft style" has become the most common form of web design these days. It presents web page elements not as realistic images, but as neatly arranged diagrams.

This tutorial goes through the steps to making a website in this style.

 

 

1 – Creating some header text

Choose a sans-serif font (a font with no curly bits), such as Verdana and write a title. Don't put a space between the words - just make the first word bold and the second word grey.

In Adobe Photoshop 5.0, you'll have to use the text tool twice - once for each colour. In Adobe Photoshop 6.0 and 7.0, you can just select the second word and change its colour.

Click File > Save for Web. Choose Jpeg, Quality 60. Do this for every image in this tutorial.

 

 

2 – Creating the menu

Create a thin image like this one and fill it with the colour of your choice. (This orange contrasts with both black and white.)

To help cut up the large orange area, it's good to create a lighter watermark area.

Make a new layer with Opacity set to 20%.

To make the shape I've made here, select an oval-shaped area. (Hold down on the Rectangular Selection Tool to get the Elliptical Selection Tool.)

Then, to extend the selection downwards, hold shift and select a rectangular area .

Fill the area with white.

 

 

 

3 – More watermarking, and some text

Right-click on your watermark layer, and select Duplicate Layer.

Click the new layer in the layer list.

Select the Move tool. Press Shift+Down Arrow about ten times. Holding shift makes the item move much further with each press.

Put in some white menu text, again in a sans-serif font. White doesn't contrast very well with orange, but it's still readable.

 

 

 

 

 

 

4 – Colourful titles

Create a new, small, rectangular image as shown.

Fill the image with a new colour.

Put in some sans-serif (non-curly) white text.

Click File > Save for Web, then change the text, then change the colour (by pressing Ctrl+U to bring up the Hue/Saturation sliders.)

 

 

5 – Picture icons

Choose a few pictures that are relevant to your site, or to something new that's on your site.

With the Crop Tool, start selecting an area of your image, then hold Shift, to make your selection square. (In Adobe Photoshop 7.0, press Enter once you're happy with the area you've selected.)

Click Image > Image size, and set the size to about 70x70.

 

 

6 – Making a web page from the pictures

(These instructions are accurate for Microsoft FrontPage, but other editors should be very similar.)

Insert your title image above this table. Right-click the page, choose Page Properties, and set the background colour to a dark colour.

4: Set the background of this cell as your menu image. (This allows you to put text on it.)   2: Cell width = the width of the menu image. (Right-click this cell.) Background colour = colour of bottom of menu image. Cell alignment = Top (Right-click this cell.) Create a new table in this cell, with width and height equal to that of your menu image.

1: Create a 3-cell table - width 630 pixels. No borders or cell spacing/ padding. Right-click it the table and set the background colour to white. Cell width = 630 pixels minus the width of the left cell and the right cell.

3: Cell width = the width of the menu image.  Cell alignment = Top "Davis Tip" Add a light pastel color to this column to make it stand out!

Put another table here, to put your text links in.

 

 

7 – The completed web page

____________________________________________________________________

Home Information Products Services Place an Order Christmas Gifts Special Offers Promotions Web Design Store Locations Contact Us   Home Information Products Services Place an Order Christmas Gifts Special Offers Promotions Web Design Store Locations Contact Us Other Links Adobe Photoshop Tutorials

- - - - - - - - - - - - - - - - - - - - - - Office Building - Right-click a picture, and set its alignment to Left. That way you can easily put text next to it like this, without needing to use tables. - - - - - - - - - - - - - - - - - - - - - - Horse - Grey is the colour of choice in this style of web design. It fills up empty white space, and breaks up blocks of black text. Simply type a line of dashes and make it grey. - - - - - - - - - - - - - - - - - - - - - - Fireworks - This is Size 1 Verdana font. It was created for web read- ability, and looks better than Arial at size 1.

To make their edges smooth, make the coloured titles in Adobe Photoshop. Check out our latest designs. New items added. Click here. Check out our latest designs. New items added. Click here. Check out our latest designs.

Home | Information | Products | Services | Place an Order | Christmas Gifts Special Offers | Promotions | Web Design | Store Locations | Contact Us Always put a text menu at the bottom. Use "|" (Shift+\) as a separator.