Curled Ribbons For Scrapbooking - Part Three

Objective: To demonstrate how to create a continuous curled ribbon border or frame for your web or scrapbooking projects.

Tools Used: Guides, Rulers, Flood Fill Tool, Move Tool

Palettes Used: Materials Palette, Layers Palette, Tools Toolbar, Tool Options Palette

Effects Used: Flip Image, Mirror Image

Types of Layers Used: Raster Layers

Picking up from where we left off from Part Two

To keep us together on the same page, let's review what we have so far. If everything went well, you should have a sample folder which contains a sample.html page, and an images folder containing both the left and right column images. You don't need a web server to view your new web page, simply double click on the sample.html page with your mouse and it will open in your internet browser.

Okay, we're assuming that you've created and saved the original Psp source file from the previous tutorial(s). You're going to need it, but we're going to do something different. We're going to show you how WE create Psp web templates from our psp images. The techniques that we're going to show you on this tutorial are the real deal, from start to finish. Nothing added, nothing taken away. Every template you've ever seen created by us (either for ourselves or for others) is using these identical steps. Yes there are other ways of doing it, probably even better and faster. We don't care, this is how we do it and it's what works best for us.

Without any further ado, let's rename this tutorial more appropriately:

Step 1

Creating a web template with Paint Shop Pro

We'll start the "steps" over as well and unless you really enjoy mental anguish, remember to save often!

Page Size and Layout

One of the challenges for building a web template is choosing the most appropriate size for the design. Considering all of the various screen sizes that are available on the market today, you can usually base it on several factors. It really helps if you know your potential audience. If they are likely to be fairly tech savvy and up-to-date, plan to design for an 800 pixel screen. If you want to reach as wide an audience as possible, you should design for people with older monitors, around 640 pixels.

As a general rule for we tend to target the 800 pixel screen width, primarily to allow our visitors the option of printing out the tutorials. The 800 Pixel width seems to fit most standard printer models.

Template Setup

I've chosen a screen width of 780 pixels, and we're going to create a template based on our Curled Ribbon image.

Start by creating a new image 800 X 520 pixels. Set the background color to #ffffff.

This next step is more out of habit than anything else. We're going to create a 10 pixel "edge cleaner" for our template. I'll explain this better later, for now lets place guides to create this edge.

Make sure that both guides and rulers are turned on.

View > Guides

View > Rulers

You should see a checkmark next to both of them:

We're going to be using both horizontal and vertical guides to help us here (for more information on using guides, view step 1 of our Creating Interface Widgets tutorial).

Let's start with our first horizontal guide.

Click the top ruler and drag the guide onto the canvas area. To place the guide precisely, double-click or right-click the guide handle to display the Guide Properties dialog box.

Set the Guide position: to 10, and click OK. As you'll notice you can also change the color of this guide.

Click the top ruler and drag our second guide towards the bottom of the canvas area.

Set the Guide position: to 510, and click OK. (original height of 520 pixels - 10 pixels = 510 pixels)

Now the vertical guides.

Click the left ruler and drag a guide towards the left edge of the canvas.

Set the Guide position: to 10, and click OK.

Click the left ruler again and drag a guide towards the right edge of the canvas.

Set the Guide position: to 790, and click OK. (original width of 800 pixels - 10 pixels = 790 pixels)

Now we create the actual edge cleaner itself.

Selections > Select All

Selections > Modify > Contract... > Number of pixels: 10 > OK

Now we'll save it to the alpha channel.

Selections > Select All [Keyboard shortcut: CTRL + A]

Selections > Float [Keyboard shortcut: CTRL + F]

Selections > Defloat [Keyboard shortcut: CTRL + Shift + F]

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

Selections > Select None

Template Layout and Image Preparation.

Layers > New Raster Layer... > Ok

On the Materials palette, set your Foreground color to #a5a4a0

Selections > Load/Save Selection > Load Selection From Alpha Channel... > Load

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection.

Our sample image is shrank down to 20%, but it's what your image should look like:

Now you need that original source file for the tutorial.

Step 2

Using the Psp source file from our previous Part One and Part two of our Curled Ribbons For Scrapbooking tutorials,

On the Layers palette, highlight the Group 1 layer:

Edit > Copy

You may close the original file now, and let's go back to our new image.

Edit > Paste As New Layer

Just like we did in the previous tutorial, we want to create a copy of this entire group to work with.

On the Layers palette, you'll notice that the Group 1 layer is already highlighted.

Layers > Duplicate

On the Layers palette, highlight the Copy of Group 1 layer and select the visibility toggle (we don't want the red x on the eyeball):

Layers > Merge > Merge Group

* Have you saved yet?

Step 3

Creating Dark Corners

On the Tools toolbar, select the Move Tool (M)

Move the image towards the top left corner.

Layers > Duplicate

On the Tools toolbar, select the Pick Tool(P)

On the Tool Options palette set the Angle to 90:

See anything wrong with that picture?

Take a closer look. The two top left corners of the ribbon are the same color. That's a bad thing. Remember, the idea here is that it's a continuous ribbon all the way around the page.

Image > Flip

If you have your screen enlarged for better viewing.. or in my case... REALLY BIG VIEWING.. then you probably don't see the image any more. Now would be a really good time to shrink the viewing area so that you can retrieve it. :))

Assuming you've found it, grab it by the center node and move it back up towards the top left corner:

Remember that you can use the arrow keys on your keyboard for the final alignment of the image along the guides. The ability to move the image while having it surrounded with the nodes as it's own guide is one of the best feature fixes in Paint Shop Pro that I really like! Previous version required that you switch back to Move Tool (M) , move it a time or two, switch back to the Raster Deform Tool (D) to see if everything was properly lined up. And if it didn't? Back to the Move Tool (M) with no mini-guides..wheEEee... speaking of which...

On the Tools toolbar, select the Move Tool (M)

You'll need to see this really good for the best effect and you may need to zoom in close enough to see the pixels forming on the image itself. You need to line up the left image with the top image, where the two pieces meet, in order to give the appearance that the ribbon border continues and make sure that there is still a small gap towards the bottom edge of the top image:

You'll notice also that the top image is now protruding past our vertical guide:

We've already prepared for that.

On the Layers palette, highlight the Copy (2) of Group 1 layer:

Layers > Merge > Merge Down

Selections > Load/Save Selection > Load Selection From Alpha Channel... > Load

Selections > Invert

Now hit Delete on your keyboard.

Selections > Select None

Your image should now look similar to this:

On the Layers palette, double click on the Copy of Group 1 layer to bring up the Layer Properties dialog box and name it Lft Crnr.

That completes our top left corner. Three more to go.

Layers > Duplicate

Image > Mirror

Image > Flip

On the Layers palette, double click on the Copy of Lft Crnr layer to bring up the Layer Properties dialog box and name it Rght Bttm Crnr.

Make that two corners left. Because it's a continues ribbon, we don't want the corners to be the same so we're going to use the top left corner as our bottom right corner also. You'll understand here in a moment.

* Have you saved yet?

Step 4

Creating Light Corners

On the Layers palette, highlight the Group 1 layer:

Layers > Duplicate

Layers > Arrange > Bring to Top

On the Layers palette, highlight the Copy of Group 1 layer and select the visibility toggle (we don't want the red x on the eyeball):

In order for this piece to work right, we're going to need to add a lighter color to the end of it first!

On the Layers palette, expand the Copy of Group 1 layer and highlight the second Raster layer in the group (the lighter colored segment)

Layers > Duplicate

Layers > Arrange > Bring to Top

On the Tools toolbar, select the Move Tool (M)

Move the image into place to extend the image:

Layers > Arrange > Move Into Group

Layers > Merge > Merge Group

Now let's move it towards the upper right corner.

Next piece.

On the Layers palette, highlight the Group 1 layer:

Layers > Duplicate

Layers > Arrange > Bring to Top

On the Layers palette, highlight the Copy of Group 1 layer and select the visibility toggle:

Layers > Merge > Merge Group

On the Tools toolbar, select the Pick Tool(P)

On the Tool Options palette set the Angle to 90:

Image > Mirror

Now we want to make sure that everything stays lined up. This is an important step! Place a horizontal guide at the bottom edge of the left corner:

Now, line the right side image up with the bottom edge on the the guide line that you just added. The key here is to make sure that the bottom points on the left and right side are aligned:

On the Tools toolbar, select the Move Tool (M)

Once again you'll need to see this really good for the best effect and you may need to zoom in close enough to see the pixels forming on the image itself, only this time just move the top right image close enough to leave just a small gap between the two pieces:

We're just about through. All that's need is one more piece.

On the Layers palette, expand the Group 1 layer and highlight the first Raster layer in the group (the dark colored segment)

Layers > Duplicate

Layers > Arrange > Bring to Top

Using the Move Tool (M) align this piece up the top right edge of the top image like so:

We really don't want it at the top, so lets move it down a couple of layers.

Layers > Arrange > Move Down

One more time.

Layers > Arrange > Move Down

You'll notice that this piece is also protruding past our vertical guide:

On the Layers palette, highlight the top layer:

Layers > Merge > Merge Down

One more time.

Layers >Merge> Merge Down

Now we'll trim the excess.

Selections > Load/Save Selection > Load Selection From Alpha Channel... > Load

Selections > Invert

Now hit Delete on your keyboard.

Selections > Select None

Your image should now look similar to this:

On the Layers palette, double click on the Copy (3) of Raster 2 layer to bring up the Layer Properties dialog box and name it Rght Crnr.

Now let's create our final corner!

Layers > Duplicate

Image > Mirror

Image > Flip

Your image should now look as though it has all four corners:

On the Layers palette, double click on the Copy of Rght Crnr layer to bring up the Layer Properties dialog box and name it Lft Bttm Crnr.

* Have you saved yet?

Step 5

Filling In The Gaps

On the Layers palette, highlight the Group 1 layer:

Layers > Duplicate

Layers > Arrange > Bring to Top

On the Layers palette, highlight the Copy of Group 1 layer and select the visibility toggle:

Layers > Merge > Merge Group

On the Tools toolbar, select the Pick Tool(P)

Align the piece up with the top left corner:

Now lets work it all the way across until we reach the top right corner.

Layers > Duplicate

Align the piece up with the top left corner:

We're getting closer.

Layers > Duplicate

Align the piece up with the top left corner:

If all goes fairly well, you should only have to do a minor adjustment by grabbing the right center node and aligning it accordingly:

Let's join these three pieces together.

Layers > Merge > Merge Down

Again.

Layers >Merge> Merge Down

One more time.

Layers >Merge> Merge Down

Now we'll add the piece to the bottom.

Layers > Duplicate

Image > Flip

Image > Mirror

Your image should now look similar to this:

So far so good. But we do have a couple of small problems to fix. Can you spot them on your own? The ribbon isn't flowing yet. Take a look at this piece of the upper right corner:

The dark segment doesn't match the others. It's above the lighter segments while the others are below them.

Here's the fix.

On the Layers palette, highlight the Rght Crnr Layer

Layers > Arrange > Bring to Top

Now all of the top pieces flow together. We have one more to fix. Look at the lower left hand corner. Can you spot the area that needs fixed?

And the fix.

On the Layers palette, highlight the Lft Bttm Crnr Layer

Layers > Arrange > Bring to Top

Your image should now look similar to this:

Now let's complete the left and right sides.

On the Layers palette, highlight the Group 1 layer:

Layers > Duplicate

Layers > Arrange > Bring to Top

On the Layers palette, highlight the Copy of Group 1 layer and select the visibility toggle:

Layers > Merge > Merge Group

On the Tools toolbar, select the Pick Tool(P)

On the Tool Options palette set the Angle to 90:

Image > Flip

Align this piece on the left side of the image:

Layers > Duplicate

Image > Flip

Image > Mirror

Fix our continuous curl.

On the Layers palette, highlight the Lft Crnr layer:

Layers > Arrange > Bring to Top

If all went well, your image should now look similar to this:

This completes the entire ribbon frame.

Updated January 08, 2008
Due to the length of this tutorial, the final step for slicing our completed image and placing it on the web would have been continued to a Part Four, however, there hasn't been much response on this yet and our log files indicate that most users haven't been beyond the second tuturial in this set, so it will be postponed. Long tutorials have never been a favorite amongst our visitors which is why we haven't created them.