Gradient Backgrounds - Freeway Pro

In this tutorial we'll learn how to make a simple gradient background using Freeway 5 Pro. If you're using any other Pro version of Freeway the instructions should work the same.

Creating A New Blank Pro Document

Freeway Pro / Express Lesson Image

For this tutorial I'll be using Freeway 5 Pro version 5.3.2. So go ahead and launch Freeway 5 Pro and then proceed to create a Blank new site through the startup window. I've gone ahead and created a separate Site Folder to publish my site into. Once you've done that proceed to the next step.
NOTE: If you're trying to create a gradient for an existing site in Pro then I suggest that you create the gradient on a separate page first to get the feel of creating one before you attempt it on the actual site area.

Creating The Graphic Item

Freeway Pro / Express Lesson Image

Next we'll need to drag out a Graphic Item onto our page and I'm going to stretch my graphic item vertically to the length of the page. So in this instance my graphic dimensions, by default, are 100px wide by 700px tall. If you do not want your graphic item to stretch to cover the entire page vertically then resize it to the dimensions you want. Once you've made the necessary adjustments proceed to the next step.

Optional Step

Freeway Pro / Express Lesson Image

This step is optional but it might help you stay organized. I'm going to change my Title name to be gradient-bg.

Applying An Action

Freeway Pro / Express Lesson Image

Next, with our graphic item still selected, we'll need to goto Item (1) and hover over Actions (2) and then choose Fill Master (3).

To The Actions Palette

Freeway Pro / Express Lesson Image

We'll need to open up our Actions palette and we'll need to change a few things. First we'll need to change our Fill type to be Linear and by doing so you'll notice that our options change. We can now choose two colors, adjust the scaling and shift of our fill, and then adjust the angle of the fill. What we'll need to do next is to make our gradient choices and you should see the results in real-time in your Freeway document. Once you've done so proceed to the next step.
NOTE: To get an angle for a typical vertical gradient you'll need to enter -90 into the angle field.

Exporting Our Graphic Item

Freeway Pro / Express Lesson Image

Since we are using Pro we have the ability to export our created graphic right out of Freeway. To do this we'll need to, with our graphic item selected, goto File and choose Export. You'll be presented with the first window which lets us choose our format as well as our file name. Once we have done that we'll then get a second window that gives us our graphic options. Since I choose GIF from the first window as my format of choice, I have GIF related options. Once you have finished making your choices you can then click on the OK button.
NOTE: If you're doing a simple repeating vertical gradient make sure you resize your graphic item horizontally first to 5px or less to cut down on file-size.

Optional Format Options

Freeway Pro / Express Lesson Image

If you want to output your graphic item as something other than a GIF format you can do so by adjusting the format in the Export File As screen.

Applying The Background Gradient

Freeway Pro / Express Lesson Image

Since we're doing a simple vertical gradient background we can easily apply it by going to our Inspector palette and then selecting the paintbrush icon (1) and then under Background we can choose Image and then select our gradient-bg.gif file (2) we exported to a separate images / media folder in the previous steps. We can then choose our tiling options and in this instance we want to have Horizontal set to Tile (3) and have Vertical set to Top (4). Then in your Freeway document the created GIF should tile across your page and that's it. Enjoy!