This Tutorial is compatible from PSP 8 and up. It was made with PSP 9. Sticking to Web 2.0 Layouts can be pretty easy once you get the hang of it. The problem is that they depend on the use of white-space, which can take some time to get it perfect if your coding a site. This is a basic tutorial to teach you how to start the layout, but your welcome to modify it in anyway you like. This layout style is seen on many web 2.0 designs, what it closely resembles, but it uses other clich� elements on many other web 2.0 sites. I call this a "Full" layout because it encompasses the whole screen area. In an upcoming layout tutorial we shall try the "Center" layout which is prominent on many  blogs. This tutorial is split into two parts, the first is the layout itself, and the second is the logo.

The Elements of Full Style

1. The Top Bar
2. The Tabs
3. The Content
4. The Side Bar
5. The Bottom Content

1. Start your image with width: 1000 height: 800.

2. With Vector tools you will create the top blue bar. First click the Rectangle Tool (G). Make sure the Tool Options (F4) has Create on Vector checked, click on the rectangle button under Draw Mode. Draw your rectangle so that it fills a small portion at the top of the page. Click on Object Selection Tool (O) and either double click or right click on your rectangle and press properties. 

3. Uncheck Stroke, and uncheck anti-alias, click on Fill’s Color Box, and click on the Gradients Tab. First make sure the Angle and Repeat is 0, and that Invert is unchecked. Click on Edit.. Click on New… Name it Blue Header, and edit your gradient so that the left side is #2ab3fa and the right side is #0f80ff. Close that window, and click OK twice, and now you will have a top blue header.

Tabs: Most Web 2.0 styles use large tabs similar to what you see in IE7 and Firefox. Another trend which seems to be popping up is a divided tab, where dotted lines are used to split between the different sites. In this example we will use the dotted line approach.

4. To start the tab section off, choose a font thats readable but won’t take up too much width. Any normal font will do like Times New Roman, or Arial. In this example I used Arial Narrow. First open up your Layers Pallete (F8), Click on New Vector Layer, type in the name "Tabs", and click OK. Click on that new Vector Layer and click on Text Tool (T). Make sure it says create as Vector in the Tool Options (F4). Move your mouse near the bottom of the blue header, zoom in closer so you have a better view. You will have to hold ALT+CLICK, and then the textbox will appear. Type in a the word "Home" and then highlight the whole text and change the font size to Arial Narrow, 11. After your done, you can move the text around with the Object Selection Tool (O). Be Careful because you can easily move the Blue Header since its a vector also. Change the Text to white by right clicking on Home and clicking on Properties. Stroke Must be Unchecked, Fill Should be the White. Place "Home" down as if it were the center of a tab.

5. Next you should place a rectangle block down below the word "home". Click the Rectangle Tool (G) and zoom in to create a small rectangle like the one below. It should fit so that home is in the center of it and there is some space to the right and left of it.  Change the rectangle’s Fill properties to the color #a1d8ff, Stroke should be unchecked, uncheck anti-alias for easier placement.

6. Now repeat steps 4 and 5 for each additional word. The words used in this example is "home, blog, about us, contacts, sitemaps". Also the rectangle portion for "about us" must be longer in length, but the width must stay the same. To get this done faster you could use the Object Selection Tool (O) highlight "home" and your blue rectangle beneath it, and press CTRL+C, and then Press CTRL+G, and paste the information near it. Leave a gap between the rectangles and also the blue header. After this,  you can change the text by clicking the Text Tool (T) and click on second "home". Make sure your mouse shows [A] in a bracket and not A with a slight curve. The [A] means that it will edit the text. The slanted curve A will tell you that it will apply a text path depending on the shape of the rectangle, which is not what you want.  After your done you should get it something like below.

7. To add those dotted lines, click on the Pen Tool (V), and draw a line in between the two rectangles. Before you begin, make sure your Materials Pallete shows that your stroke is filled with white, and your fill is off.

8. Draw a straight line upward by holding shift. You can change the style by clicking on Object Selection Tool (O) immediately after you draw the line, and right click and press properties.  Click on Line Style. You can choose Dash or Dot. Whichever you chooose,  all lines must use the same style. Anti-alias must be checked and depending on your version, the stroke should be 2 or high enough that you can see individual dashes. You must now place all these lines in between the rectangle boxes, and you can do this faster by highlighting your line with the Object Selection Tool (O) and pressing CTRL+C and CTRL+G. Then you can now line up and place all the text neatly as shown in the previous examples. After you have finished this you can move on to the next step.

9. The Tabs are highlighted with the use of a soft faded drop shadow. To create one, click on the Rectangle Tool, and create a bar as wide as the whole page but it must be below the blue boxes where the text is.

10. Click the Object Selection Tool (O) and right click to change the rectangle properties so that stroke is white, anti-alias is unchecked, and fill is a gradient from #eaeaea to #ffffff. 0 Angle, 0 Repeat, Click OK Twice, and now you’ll have a soft drop shadow. You can change the length so that its shorter or longer.

The Content is filled with various information you choose. Its recommended that you do the text in your HTML editor program. The text rendered from PSP is not accurate and doesn’t show the true width of some fonts. For example purposes I have created a block paragraph of text within PSP, but it will not look like this when converted to true HTML.

11. Type a topic for your paragraph with the Text Tool (T). In my Example, I used a font Called Eras Light ITC. You can choose whichever font you want. The color of this font is #2a87f0 which you can change in the properties by clicking the Object Selection Tool (O), right clicking and pressing properties. You can add a line beneath it by clicking on the Pen Tool, and holding down shift to draw a straight line beneath it. The color for the line is #95c3f8.  Add a block of text if you want to, the example uses Book Antiqua, Size 9, Color: #4e4e4e

12. You can additionally create a box for your 2nd topic. Draw a rectangle around your block of text, the stroke is 1 and the color is #c0c0c0, the fill should be unchecked. Anti-Alias should be unchecked. After you create the box and set it up neatly, you can add a drop shadow again by creating a rectangle block beneath your box.

13. To add the drop shadow, click on your first one near the top of the page with your Object Selection tool (O) and press CTRL+C then CTRL+G. Change the width of this new rectangle with the Object Selection Tool  (O), make it so that it fits beneath your box, disable the stroke by right clicking and pressing properties, and uncheck stroke from there. Now you should have it looking like this.

The sidebar is where you place additional links. You can do this on your own since it reinforces the same ideas that were presented before. It is basically adding a line below each text which is the same color as the line in your first topic. The sidebar has its own mini header and footer.

14. After you have added your sidebar text you can add the sidebar header which uses the same gradient you have used before. Copy the drop shadow below your bottom box with the Object Selection Tool (O). Drag and highlight over that object and press CTRL+C and CTRL+G, then change the width of the box so that it fits the length of the column. If you would like it to be curved in the shape of a tab, click on the rectangle and with the pen tool, click on the edge and drag it so that it creates a curve.

15. Next you need to change the properties so that this rectangle has anti-alias checked. Click OK. Convert the rectangle to path by right clicking on it with the Object Selection Tool (O) and selecting convert to path. Next you will need to click on the Pen Tool (V) and highlight the bottom two nodes and delete. You can create the buttom footer for the sidepanel, by again copying the same drop shadow under your second block of text. Select that drop shadow, press CTRL+C, CTRL+G, and change its width so that it fits with the length of the column.

Bottom Footer: The bottom footer is basically the same thing you did before with copying the drop shadow. You basically click on the drop shadow below your second block of text and Copy And Paste it near the bottom. Add some text and your done.  Here is the Final Product!

Web 2.0 Full Blue Layout

Here is a quick guide to make your logo like this one. The logo consists of Vector as well as Raster elements. Unfortunately there is no easy way to guestimate how much larger a text border is, and resizing a vector won’t bring it up easily. So we will be using selection tools to estimate how far two points should be.

1. First create your text in vector. Click the Text Tool (T). Make sure your Tool Options has create on vector.  Use a font with some thickness and a fill color only, no stroke.

2. Click the Object Selection Tool (O) and select your text, right click and press Create Raste Selection.

3. Click Selections > Modify > Expand, by 3.

4. Open Layers Pallete (F8) and create a new Raster Layer.

5. Click on the new layer, and use the flood fill color to splash in a color other than white.

6. After that move your "Vector" Layer on top of your flood filled "Raster" Layer. You can now change the text to white, by clicking on the Object Selection Tool (O) and click on your text, right click, click properties, and change the Fill color to white.

7. In your Layers Pallete (F8), duplicate your raster layer, if you still have the text in selection mode you can turn that off by clicking on the Selection Tool (S) and right clicking. You can duplicate the raster layer by right clicking and pressing duplicate.

8.  Click on the Move Tool (M) and click on the blue border text, and move it down diagonally to the left.  You may accidentally move another layer, you can tell this is happening by noticing what the layers pallete is highlighting when you drag. So you should only drag the "Copy of Raster" Layer only.

9. Create a new Vector Layer beneath the vector layer with the text. Click on the Rectangle Tool (G), and fill in the gaps with a rectangle. you want to leave the edges open so that they show curves. Set the color in the fill, you can do this without stroke. What your basically doing is drawing a rectangle over the background text. This will block out the whole area, but you should still see curves on the edges.

10. Next just as if you were drawing a cube, fill in the top corners of each layer using the pen tool (V). Draw line points until you fill the white space. You do not need to create a complete triangle, a gap open is fine. You can change the positions of the nodes by clicking on the Arrow button in the Tool Options Pallete, then click on a node to move it around.

You can see that there is a 3 point triangle used to connect the top part with the bottom. In this example the fill is turned off so you can see the triangle more clearly.  Also from step 9, notice that your rectangle has blocked out the text, you don’t see a gaps under the letter "i".

Here is the same triangle in the bottom part. Zoom out so that you can see if there are any mistakes.

Your Done! You can add additional elements like stars and lines and stripes. Remember its like filling in a cube so use the duplicate layer to figure out the position of where your connecting to. Then fill them in by drawing a triangle. When your finished, Merge all your layers except background so you can place it in another image.

discuss this topic to forum