PSP Tutorial: Web 2.0 Full Blue Layout
Posted 3 years, 2 months ago at 4:50 AM. 10 comments
Posted in Design, Tutorials.
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, in fact bluedot.us is 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!
Part 2: Logostyle
PSP Tutorial: Web 2.0 Full Blue Layout
Does not look Web 2.0 @ all, Nice try though.
Well I’ll Try harder :]
RED
this is cool!
Good easy tutorial. I’m not sure though about image-heavy designs. I find the fast loading sites perform the best.
Technically you would have about 1 image for the background, the nav images can be css backgrounds, the drop shadows is one image and side bar would be 2 images. You can use gifs for most of the elements except for the top blue bar.
Great Tutorial, I like the logo at the page of “Final Product”, would it be possible to let me know some hints of making a logo like this? Wish a good day!
Of course! You forgot to click on Page 2.
i read every single of your post sometimes i read it over and over again ..you really inspired many people here..wish you a good luck in everything you do..
The third is increased efficiency. ,