Curled Ribbons For Scrapbooking - Part Two

Objective: To create the illusion of a seamless image that will expand or contract automatically to fit (either horizontally or vertically) with the amount of content on a web page.

Tools Used: Move Tool, Pick Tool, Guides, Selection Tool, Flood Fill Tool

Palettes Used: Layers palette, Tool Options palette, Materials palette

Effects Used: N/A

Types of Layers Used: Raster

One of the unique challenges of graphic design is creating "expandable graphics" for web pages. Normally we just show you how to create a particular type of image and then be done with it. By popular demand, I'm going to take it one step further by showing you how to take what you've learned to create from our Curled Ribbons For Scrapbooking tutorial, to the web. I've created so many web templates, graphics, and web applications that for me it's second nature, and I do it fairly quickly. I've never stopped and taken the time to try to explain it. With this in mind, please bare with me. I will try to be as thorough and to the point as possible. What I'm not going to do is drag you through the quagmire of various coding styles, methods, and ethics. I'll just stick with the basics, and leave the rest up to your endeavors.

Step 7

Continuing from where we left off in Step 6. I'm going to assume you have (or intend to create) your source file from the Curled Ribbons For Scrapbooking tutorial. As I usually end up creating my graphics on the fly, I've had to create a new one myself.

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

On the Layers palette, highlight the first Copy of Raster 2 layer:

Layers > Duplicate

Layers > Arrange > Bring to Top

Now, line up the Copy (2) of Raster 2 on the end:

Now we have two complete ribbon segments to work with. Let's put them into a group.

On the Layers palette, select the Raster 2 layer

Layer > New Layer Group... > OK

Drag the other layers into the group. Remember to keep them in the same order when you move them. When you're finished it should look similar to this:

We want to create a copy of this entire group to work with and hide the original.

On the Layers palette, highlight Group 1.

Layers > Duplicate

On the Layers palette, turn off the visibility for the original Group 1 layer:

We'll come back to this original group in Part 3, when we show you how to create corner pieces. You'll notice that the Copy of Group 1 is still highlighted.

Layers > Merge > Merge Group

Now let's turn this 90 degrees. Here's the fastest way to do it.

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

On the Tool Options palette set the Angle to 90:

Your image should now look similar to this:

Now we're ready to proceed to step 2.

Step 8

Brief introduction to image slicing.

Because we're going to be placing our image on a web page, we're going to be slicing it up into smaller pieces. (We're not really going to be slicing any of the images for this tutorial, more of a cut and paste job, but the concept is the same. For argument sake, we're slicing it.) This can help your web pages load more quickly as it takes less time to download to your visitors computer than it would as one large image.

While that's nice to know, and it certainly does help, it's not the primary reason we're going to do it. Our primary reason is to create the illusion of a seamless image that will expand or contract automatically to fit (either horizontally or vertically) with the amount of content on a web page. This is known as a tiled image. It is nothing more than taking an image and either stacking it or placing it next to another one multiple times.

As an example, let's look at the Loadboy web template for this site. It only consists of four images. The top header (logo) the footer at the bottom of the page, and one image each for both the left and right sides.

Let's look closer:

Excluding the header and the footer image, here's the actual size (and image) used to create the left template border and horizontally flipped to create the right template border:

That spec is only 1 pixel high and 16 pixels wide. Stack those up a few thousand times and we've created the illusion of it being one long image that you see right now. You're welcome to try it. Right-click directly on the image for either the left or right side of this web page, choose Save Background As... save it to your own hard disk. Believe me, it's not very exciting, but you can open it up in Psp and take a look.

What we're going to show you how to do here is a little bit more complicated because we're using an image that has a unique pattern to it. Also, because of the complexity of the image itself, the height is going to be larger than 1 pixel, but still small enough that it won't put a major dent in your bandwidth.

Depending upon the type of image that you're trying to stretch, it can get very confusing. Just take your time and think it through. It may take a few trial and errors, but the outcome is awesome! I'll show you the fastest way I know (for this project anyway).

Step 9

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).

For now, we'll just need a horizontal guide. To place a horizontal guide, click the top ruler and while holding down on your left mouse button drag the guide down until it meets the top of our image:

(Tip: On the Tools toolbar, select the Pick Tool(P) to display the boundaries of the image)

The fun begins. Now we have to determine where to slice (we'll actually be copying but the concept is the same) the image.

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

Layers > Duplicate

If this step doesn't make sense, it will by the following step. We want to move the image up one full segment. Make sure that they line up as perfectly as possible. If need be, you can use the arrow keys on your keyboard to help with any final alignments I've modified my image so that you can see it:

For this step DO NOT use the Move Tool (M)

Using the arrow keys on your keyboard, move the duplicated image along side of the edge of the original:

The image on the left is going to be our expandable image. Let's examine our expandable image a bit further. This is where it gets a bit tricky to explain it on my part, please bare with me. The first thing you should notice is that the guide is running through the dark portion of our ribbon. Now let's pretend that that the top piece wasn't there:

It would make sense that if we wanted to stack a piece on top of it and make it match perfectly, it would also have to be a dark piece.

Time for another horizontal guide.

If you take a look at our original ribbon on the right, I want to place the guide at the bottom of the first segment:

Once you have the second guide in place, you now know what piece of the expandable image we need:

Let's check it to see if we're right. let's make a copy of the expandable piece were after.

First, make sure that the expandable image is the one that highlighted in the Layers palette.

The fastest way to do this is to use your Move Tool (M) which should still be selected on the Tools toolbar and click on top of the expandable image (be careful not to move it out of alignment).

If you need a little extra assurance that you have the correct layer highlighted, shoot a quick glace over at the Layers palette:

On the Tools toolbar, select the Selection Tool (S)

Using the top and bottom guides as your pattern, create a selection:

Edit > Copy

Selections > Select None

Edit > Paste As New Layer

Again.

Edit > Paste As New Layer

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

Carefully line the pieces atop each other. If all went well it should look similar to this:

It looks like we have a close enough match. We're ready to move on to step four.

Step 10

Creating our images for the web.

Edit > Paste As New Image

Now you have your image ready to go, but no background color to it. I don't really recommend using transparent .gif's for this type of styling as it may ruin any design you may add to your ribbon that closely matches the color that you want to be transparent. So, with that in mind, now would be a great time to decide what color you want for the background of your web page.

Layers > New Raster Layer... > Ok

On the Materials palette, set your Foreground color to #de7e7e (my chosen color)

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

Layers > Arrange > Send to Bottom

Layers > Merge > Merge All (Flatten)

On your computer, create a folder to hold your project files, and create a sub folder called images.

File > Save As ...

I'm chosen the following file name and type:

and save it to the images sub folder :

Now well create an expandable image for the left side.

Image > Mirror

File > Save As ...

I've chosen the following file name and saved it to the images sub folder

Step 11

Putting it all together.

If you use Windows, you already have a fully functional web page editor built right into your operating system, Notepad. For many people, this is the only HTML editor they use.

Open Notepad (usually in your "Accessories" menu).

Here is the complete HTML code that I've entered (you may cut and past it into Notepad). If you take a moment to study it, you'll see that's not very hard to understand:

<html>
<head>
<title>My Curled Ribbon</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>
<body>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="tblTp">My Curled Ribbon </td>
</tr>
<tr>
<td width="44" class="tblLft"> </td>
<td class="tblContent"><p>This is my ribbon template and I created the graphics in Paint Shop Pro</p>
<p> </p>
<p> </p></td>
<td width="44" class="tbRght"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="915353"><img height="5"></td>
</tr>
</table>
</body>
</html>

Once you have the code copied to Notepad, Click on File > Save As >

Navigate to your project folder

Change the Save As Type drop-down menu to All Files (*.*)

Name your file with the .html extension (sample.html)

Now save your HTML file to your project folder.

Click here to view a live sample for this tutorial.


	Continue to Curled Ribbons For Scrapbooking - Part Three