Paint Shop Pro Layout Tutorial

Welcome Back! Another PSP Tutorial for you! Aquistica Park is a layout made in PSP9, it is compatible with PSP8 and Up. This tutorial will rely heavily on Vector Tools. It will teach you in the beginning on how to use them, after that you should be able to know what to click to reach there. Each tool will have a bracket with what key you should press in case you cannot find it. For Example with the Text Tool (T), you can press the letter T on the keyboard to select it.

To make things go faster, there are a few fonts that are required for logos. If you are going to be using your own custom logos you should probably skip the logo steps.

Fonts:
       –Destroy Dingbats
       –Dingsbum Bats [download]
       –FontCo Flares
       –PetitaMedium [download]
       –Wingdings
       –Script Font ** More Info on this Later

 Layers In Order of Tutorial:
       –Thin Red Strip
       –Red Header
       –Red Content Menu Bar
       –Red Content Comments
       –Purple Background
       –Stars and Swooshes
       –Stars and Swooshes (Overlay)
       –ALL Text
       –Cellphone

Size: 1024×768
Background: White

Layer: Thin Red Strip

1. Click Rectangle Tool (G) in the Tool Options (F4), Create on Vector should be Checked. Anti-Alias should be Unchecked.

2. Change the Fill Color of the Materials Palette (F6) to  #cc0404

3. From the top of the page, draw a Rectangle 5 pixels high and make it the width of the entire page.

Tip! You can check the length of the rectangle by zooming in really close and playing around with the Crop Tool (R). Check the Tool Options Palette (F4) to see how many pixels the Height is.

4. After you draw the thin strip, draw small rectangles within the height of it. These small rectangles should be different variations of red and the length should be random. Use the Object Selection Tool (T) and change the properties of these rectangles so that they use different colors. Double Click or Right Click on a Rectangle and click Properties to change their colors. Position the rectangles so that they are randomly spaced away from each other. Also the bottom red rectangle must show through so do not make too many.

Note Red Rectangles of Various Lengths. Colors Used are #f0040a #930306 #fc5d2c

5. After you have finished making rectangles for 1/4 of the entire width of the page. Click the Object Selection Tool (T) and click in a white space, and drag to select all the rectangles you made so far. Press CTRL+C to Copy

6. Paste the rectangles with CTRL+G and they should be somewhat similar in random spacing throughout the whole entire width. Zoom Out until the image is small. Click the Object Selection (O) tool, Outside of the image, Click and Drag over the entire Red Strip. Right click, and press Group.

You have Completed the First Layer. We will be using two Thin Red Strips. The second one will go below the Red header.

 Layer:  Red Header

7. Click on the Rectangle Tool (G). In Tool Options (F4) Anti Alias:Checked. Create on Vector: Checked. The Rectangle will have no Stroke. Fill can have any color you want, it will be changed later

8. Draw the Rectangle to the width of the whole page. Click the Object Selection Tool (G). Double Click or Right Click on the Rectangle to Change the Properties.

9. Click Fill’s color box, Click Gradients Tab. The Gradient is called Red Baron, If you don’t have Red Baron, Click Edit, Click New. Type ‘Red Baron’, Click on the Left side (1), Click on the Custom Color Box (2), Click on the Color box under location (3), Select the color #aa1616. On the right side the color will be #df3b15.  Close and Save. Your Angle will be 0, and repeat is 0. Click Invert so the Darker color is on Top.

10. Place your rectangle some distance apart from the Red Thin Strip. You can now bring a 2nd Thin Red Strip by Copying (CTRL+C) and Pasting(CTRL+G) it below the Red Header. Now your done with the red header layer.

11. Create a New Vector Layer by clicking on it from the Layers Palette (F8). Click on Rectangle Tool’s Drop down and click on Preset Shapes (P).

12. In the shape’s list of the Tool Options, Choose Triangle. Create on Vector: Checked, Anti-Alias: Checked, Retain Style: UNCHECKED.

13. Click Tool Options (O), Double Click or Right Click, and click properties, change its fill color to white. There should be no stroke. Press Ok! Rotate the Triangle on its side and manipulate it so that it appears like a quote arrow in a comic. You can Hold SHIFT and click on the end point  of the triangle to make it tilt. You’ll also need to push the triangle a bit higher so that 1/4 of it is within the white area.

14. Next, we’re going to make a shadow triangle. To do this, simply Click on the White Triangle using the Object Selection Tool (O), Copy it (CTRL+C) and Paste (CTRL+G)

15. Change the Shadow Triangle’s color to #680a0a, and move it so that its covering the whole white triangle. This triangle should not stick through the white area. Make sure the top of the triangle is straight and aligned with the top of the red header. Right click on the triangle and click Arrange > Move Down, so the red shadow is now below the white triangle.

 
The White Triangle is sticking through the white area.
The Shadow Triangle is being covered by the White Triangle.

 = Page 2 =

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.

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.

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.

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.

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.

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.

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.

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.  

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.

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.

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