PSP Tutorial: Blue Web 2.0 Layout Advanced

linear2.jpg

The first  Web 2.0 Blue Layout Tutorial focused on the text of the page. This tutorial will follow up by teaching you extra features and style you can add to the layout. Now there is an Added Logo on the left side with a small Menu Bar. On the right side is a graphic of the grand opening. This can be tweaked so that you can lower the opacity and right some text on it if you want. Below the ticket area, are two empty spaces which can be added for extra advertisement elements to go to another part of the site. Below that a Grey Box features a Download Now button, where you can quite possibly put a PDF file of the Schedule information, or change it to something different entirely. Subsections finish up the site where you can send a link to another area. This tutorial doesn’t focus much on text, and your welcome to ADD text to any areas you see fit.  This tutorial is compatible with PSP 8 to 11, it was made with PSP 9.

 

previewlinearline.jpg

 

Elements of the Layout

1) Pink Box: The Logo & Ticket Information

2) Subcontent: Subcontent Buttons

3) Blue Sidebar: The optional Sidebar

 

 

 

1. Just like the previous tutorial you will have a blue gradient bar on top. You can either start from scratch or delete the rest of the content in the previous layout except for the top. Skip to step 2 if you have this done already. If you are just starting this layout from scratch, create a 1000 x 800 image with a white background. Openi your Layers Pallete (F8) and click on New Vector Layer. Click Rectangle Tool (G) and create a long rectangle that takes up 1/4 of the page. To edit properties of this vector, click on the Object Selection Tool (O) and select the rectangle. You’ll need to either Right Click and press Properties, or, Double Click on the Rectangle to reach the properties area. [Anytime Properties is mentioned, please memorize the previous sentence on how to edit it]  The Properties for this rectangle is: Anti-Alias: OFF. Stroke: Unchecked. Fill: Checked (with a gradient.) Click inside Fill and select the Gradient Tab.  The Gradient for this Blue Bar must be from #0f80ff to #2db3f with Angle: 0, Repeat: 0. After you set your blue bar at the top of the page you can continue to Step 2.

tutorial010.jpg

Now we’re going to throw away the previous tabs from the first tutorial and choose another design. The standard for most tabs on websites is just a rectangular block. For mockup purposes we will draw the rectangles, but when adapting this layout for web, these new tabs will be handled by CSS.

2. Draw a rectangle block at the bottom of the blue bar just like the images below. The first one must be white, and the rest can be the color #a1d8ff. To create these blocks, click the rectangle tool (G), and create one block that will be white with no stroke. Click the Object Selection Tool (O), and click on the rectangle to highlight it. You will then Copy & Paste by pressing CTRL+C then CTRL+G. Create the remaining blocks based on how many tabs you will need. Try to keep the width between the tabs the same. ZOOM IN to check and see how evenly spaced they are. The rest of the tabs will be the color #a1d8ff. You can add text also by clicking the Text Tool (T) and ALT+CLICK on the first block. Type the word home, the color is #008ee0. The  font color for the rest of these tabs will have white.

rectangleblocks.jpg

3. Open your Layer Pallete (F8), and click a new Vector Layer. You can name this layer “Pink Box”.

The Pink Box is basically a Pink/Magenta type box where some links are stored. The width of this box affects the position of the subcontent below it. Try to get this pink box at a tad shorter than all the tabs above. Check the top of this page on where to position the pink box.

4. Create a rectangle for the Pink Box. Edit its properties by double clicking on it with the Object Selection Tool (O) or Right Clicking and selecting Properties. Stroke: Unchecked. Fill: Checked (with a gradient). Click on Fill’s box, and click on the Gradient tab.  Create a new gradient with the color #d22e6c to #90123e. After this, make sure the linear gradient’s setting is Angle: 0, Repeat: 0.

hive004.jpg

5. On the left you can add your very own logo. In my example I used a star. This star can be downloaded from Jasc Paint Shop Pro 8 Additional Download Components. In the properties, the star’s width is 30. Stroke: checked (with color white). Fill: unchecked. The star features random tiny circles which you can create around it with the Eclipse Tool (Q). You can create the paint dropping effect by clicking on the Pen Tool (V). Make sure your materials Pallete has White as Stroke. While holding SHIFT, draw short vertical lines below the star. Click the Object Selection Tool (O) and enter the line’s Properties. Change the width to 9. Click on Current Line Style, Click Custom, change the “First” and “Last” Cap to “Round”. Change the size to 1.00 x 1.00. Save and Name your line and select it. You’ll now notice that the line has created round edges. Change the width if your round edges peek through the star’s edge.

hive011.jpg

hive006.jpg

6. On the right side of the pink box, you can optionally add “trade tickets”, “buy tickets” and “auction tickets”. Below each text you will add a dotted line. Click the Pen Tool (V)  create a line below each text to the edge of the pink box. Change the Line style to “dotted” or “diamond”, Anti-Alias must be checked, Stroke: 2. Line up each of the text and lines with the Object selection tool (O). I also added an Arrow to each of the text.

hive013.jpg

7. To create the bright pink highlight effect over the text area. Create a New Vector Layer. Create a White rectangle over the text area. Change this Rectangle’s properties, Stroke: Unchecked, Fill: Checked (with a gradient). Fill’s Gradient is Angle: 270, Repeats: 0. Click Edit and create a new gradient. White should be on both sides. In the Opacity area, change the Opacity on the left to 100% and on the right to 0%. Move the diamond slider 75% to the right. Close and save your gradients. Now go back to your Layers Pallete (F8) and change this layer’s blending from Normal to Dodge. Change the Opacity to 14. Now you should have a fading area like the image above.

 hive015.jpg

The last area on the left hand side is pretty easy. Just a few more gradients and you should be done.

8. Create a New Vector Layer. With the Pen Tool (V), stoke should be #c0c0c0, width is 2 or more. Draw a line going horizantally to the length of the Pink box above. Below this grey line, draw another rectangle (G) the same length. Make it low enough so that you can create a smooth fading gradient. Change the properties of this rectangle to: Stroke: Unchecked. Fill: Checked. Anti-Alias: Off. Click on Fill, and change the gradient to Angle: 0, Repeat: 0. Color goes from #e2e2e2 to white. Push the black diamond to 60%. Save and Close your gradient. You may optionally use the Gradient to create a drop shadow below the Pink Box. Click Object Selection Tool (O), click on the fading box, and copy (CTRL+C) and paste (CTRL+G). Use the edges to decrease the size of the box. Pay attention to the length, it should still match up with the pink box above it.  

samewidth.jpg

9. Add your own button by clicking on the Rectangle Tool (G).  Create a long horizantal bar centered inside your fading grey gradient. In its Properties, Stroke: Unchecked. Fill: Checked. Anti-Alias: OFF. Use the same Pink Box gradient you used.  However, click invert so the darker part is at the bottom and its lighter at the top. Click OK. Next create a thin box over this rectangle. Use the Rectangle Tool (G) and make the same rectangle so that its one pixel away from the original rectangle on each side. The properties for this rectangle must be Stroke: Checked (with a pink color) Fill: Unchecked, Anti-Alias: OFF. If you made a mistake change the size by using the Object Selection Tool (O). Add whatever text you’d like.

bars.jpg

 

The last area for the subcontent be easily made with even more rectangles.

10. On a new Vector Layer, Create a rectangle that is somewhat half the length of the fading gray box. The properties should be Stroke: Unchecked. Fill: Checked (with color #c0c0c0). Add random white circles to the edge to create a design. Add a Pink rectangle to the left side thats the same height of the subsection bar. This pink rectangle’s color is #ff97b9.

circles.jpg

11. Copy the whole subsection you made by using the Object Selection Tool (O). Drag the pointer over the whole subsection, Copy (CTRL+C) and Paste (CTRL+G) to create a duplicate. Align it anyway you want and now you should have two subsections.

Page 2: The Sidebar