# Gradients

**URL:** <https://discourse.softpress.com/t/gradients/5186>\
**Category:** Freeway\
**Created:** [July 1, 2009, 8:55pm UTC](https://discourse.softpress.com/t/gradients/5186 "2009-07-01T20:55:08Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 1, 2009, 8:55pm UTC](https://discourse.softpress.com/t/gradients/5186/1 "2009-07-01T20:55:08Z")

</div>

I’m wearing out this message board…

I am trying to do a simple gradient box where one part is black and the remaining section fades to transparent. I did not find anything in the reference guide about it and a search of the knowledge base just brings up a technical sentence about changes to the software. Sigh…

So…I went to Fill Master and thought I had it. Unfortunately, I cannot figure out how to get it to fade to transparent. The opacity opacity slider affects the whole image and does not seem to allow me to fade one part of the linear gradient.

Any help?

Where am I missing where these basic things are covered. It was not in any of the tutorials, not in the knowledge base and not anywhere I could find easily in the small or large reference guide…yet I would imagine it is fairly easy to do.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Rich\_Gannon](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/d9b06d/32.png) [@Rich\_Gannon](https://discourse.softpress.com/u/Rich_Gannon)\
**Post date:** [July 1, 2009, 9:19pm UTC](https://discourse.softpress.com/t/gradients/5186/2 "2009-07-01T21:19:46Z")

</div>

Try adding the fade action to the fill master action, and play around with the sliders on the fade action.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 1, 2009, 9:23pm UTC](https://discourse.softpress.com/t/gradients/5186/3 "2009-07-01T21:23:19Z")

</div>

What do you mean “add the fade action.” I do not see an option for that, only choice of two colors and one opacity fader.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Rich\_Gannon](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/d9b06d/32.png) [@Rich\_Gannon](https://discourse.softpress.com/u/Rich_Gannon)\
**Post date:** [July 1, 2009, 9:26pm UTC](https://discourse.softpress.com/t/gradients/5186/4 "2009-07-01T21:26:54Z")

</div>

Sorry,  
In the actions menu, there should be another action simply called “Fade”, you should be able to use it in conjunction with the Fill Master action.  
Here is sample using the actions,  
[http://frontrangeweb.com/sample2.html](http://frontrangeweb.com/sample2.html)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 1, 2009, 9:29pm UTC](https://discourse.softpress.com/t/gradients/5186/5 "2009-07-01T21:29:41Z")

</div>

Rich

i did figure out that you mean to open up Fade and Fill Master actions. The picture you have is EXACTLY what I am trying to do. I cannot figure it out. I have been at it for an hour.

Can you help?

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Keith\_Martin](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/k/7c8e57/32.png) [@Keith\_Martin](https://discourse.softpress.com/u/Keith_Martin)\
**Post date:** [July 1, 2009, 9:36pm UTC](https://discourse.softpress.com/t/gradients/5186/6 "2009-07-01T21:36:16Z")

</div>

Sometime around 1/7/09 (at 17:23 -0400) SkipII said:

> What do you mean “add the fade action.”

Apply a second action (Fade) in exactly the same way that you applied  
the first (Fill Master).

k

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 1, 2009, 9:42pm UTC](https://discourse.softpress.com/t/gradients/5186/7 "2009-07-01T21:42:15Z")

</div>

I’m not exactly sure what I did, but I got it. I had Fade, Advanced Fade and Fill Master all up at once. I just kept screwing around and finally got it.

I would have thought it would have been easier than that.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 1, 2009, 9:47pm UTC](https://discourse.softpress.com/t/gradients/5186/8 "2009-07-01T21:47:30Z")

</div>

Not sure what you mean

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Rich\_Gannon](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/d9b06d/32.png) [@Rich\_Gannon](https://discourse.softpress.com/u/Rich_Gannon)\
**Post date:** [July 1, 2009, 9:49pm UTC](https://discourse.softpress.com/t/gradients/5186/9 "2009-07-01T21:49:54Z")

</div>

Check out this again, [http://frontrangeweb.com/sample2.html](http://frontrangeweb.com/sample2.html)  
I added screen shots on what the fill master is set to and what the fade is set to.  
After I got the desired effect on the fill/fade box, I put the that graphic on top of the other graphic, if when you put the fill/fade on top of the other graphic and something is wrong, you might want to select the fill/fade box, control click and select, “bring to front”.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 1, 2009, 9:58pm UTC](https://discourse.softpress.com/t/gradients/5186/10 "2009-07-01T21:58:54Z")

</div>

That helps. I think that is what I did except that I had advanced Fade going as well – maybe that wasn’t ncecessary. I’ll print your piece off and use it as a reference.

Thank you!

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 4, 2009, 2:54am UTC](https://discourse.softpress.com/t/gradients/5186/11 "2009-07-04T02:54:51Z")

</div>

Rich,

I see everything exactly as you had it in your example and my rectangle is still all black.

Is there something else you did?

I even changed the graphic from GIF to PNG and sitll could not get it to go.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Keith\_Martin](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/k/7c8e57/32.png) [@Keith\_Martin](https://discourse.softpress.com/u/Keith_Martin)\
**Post date:** [July 4, 2009, 10:54am UTC](https://discourse.softpress.com/t/gradients/5186/12 "2009-07-04T10:54:26Z")

</div>

Sometime around 3/7/09 (at 22:54 -0400) SkipII said:

> I see everything exactly as you had it in your example and my  
> rectangle is still all black.

Make sure the graphic box has no normal fill colour applied. In the  
Inspector, the Color popup menu should show “None”.

Apply the Fill Master action and pick the fill colour you want. Don’t  
try to make the gradient here, this is just used to give the box the  
kind of fill that the next action can work on.

Now apply the Fade action. Your fill should fade from solid on the  
left of the box to completely transparent on the right. Configure the  
transparency using the Fade panel in the Actions palette.

* * *

Now, getting this transparency effect to look the same in the final  
output will take one of two approaches, as we’ve discussed before.

EITHER: make sure that the graphic (and anything you want to appear  
underneath, which cannot be HTML boxes) is NOT layered,

OR: make sure that you set the output format of this graphic to PNG  
at millions of colours.

* * *

Any help?

k

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 4, 2009, 11:12am UTC](https://discourse.softpress.com/t/gradients/5186/13 "2009-07-04T11:12:50Z")

</div>

Perfect.

I’m not sure how this got off track, but I will definitely keep this note tucked in my manual.

Thank you.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![IanB](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/i/ee7513/32.png) [@IanB](https://discourse.softpress.com/u/IanB)\
**Post date:** [July 4, 2009, 3:19pm UTC](https://discourse.softpress.com/t/gradients/5186/14 "2009-07-04T15:19:23Z")

</div>

Alternatively:

Drag a bitmap into a Freeway document.

Go to Item\>Actions\>Advanced Fade. The image fades (or graduates) into the background colour. If the background colour is ‘None’, one side of the image disappears.

To change the background colour:

In the Graphic Item Inspector, press the ‘Item Appearance Settings’ tab (it looks like a ‘V’) and choose the desired colour from the drop-down menu.

Different effects can be created by dragging the sliders in the Advanced Fade palette. To display the palette, go to Window\>Actions.

When the background colour is ‘None’, the faded part of the image is transparent. This enables two or more images to be composited.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 4, 2009, 3:23pm UTC](https://discourse.softpress.com/t/gradients/5186/15 "2009-07-04T15:23:22Z")

</div>

I like your approach but don;t understand the first step. i am trying shapes in Freeway, and bitmap is not an option – they are GIF, JPEG and PNG.

are you saying I need to draw the image in something like Photoshop first? If so, I’m not even sure that allows me to make it a bitmap.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [July 4, 2009, 3:39pm UTC](https://discourse.softpress.com/t/gradients/5186/16 "2009-07-04T15:39:13Z")

</div>

In this case, bitmap just means “a pixel-based image”. It’s not meant to indicate a 1-bit image, pure black and pure white. Any sort of photo will do for this trick.

Walter

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![SkipII](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/e5b9ba/32.png) [@SkipII](https://discourse.softpress.com/u/SkipII)\
**Post date:** [July 4, 2009, 3:57pm UTC](https://discourse.softpress.com/t/gradients/5186/17 "2009-07-04T15:57:27Z")

</div>

> On 4 Jul 2009, 3:19 pm, IanB wrote:
> 
> Alternatively:
> 
> Drag a bitmap into a Freeway document. (What do you mean a bitmap image? Do you mean draw a graphic box in Freeway or are you saying import some kind of graphic?
> 
> Go to Item\>Actions\>Advanced Fade. The image fades (or graduates) into the background colour. If the background colour is ‘None’, one side of the image disappears. (One side? Don;t understand. First need to know what you meant by #1, then, how can “one side” of an image do anything. Do you want me to add two colors first?
> 
> To change the background colour:  
> The background color? You mean I should add a color first? Two colors? Which one is backgorund?..getting very confused aobut what you mean.
> 
> In the Graphic Item Inspector, press the ‘Item Appearance Settings’ tab (it looks like a ‘V’) and choose the desired colour from the drop-down menu.
> 
> Different effects can be created by dragging the sliders in the Advanced Fade palette. To display the palette, go to Window\>Actions. Nothing happens. The box either stays all one color or both colors, if I had done both colors.
> 
> When the background colour is ‘None’, the faded part of the image is transparent. This enables two or more images to be composited. When the background color is none is stays none. It does not change with sliders.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![IanB](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/i/ee7513/32.png) [@IanB](https://discourse.softpress.com/u/IanB)\
**Post date:** [July 4, 2009, 8:24pm UTC](https://discourse.softpress.com/t/gradients/5186/18 "2009-07-04T20:24:46Z")

</div>

Bitmap is a term that’s used to describe images that are composed of lots of coloured or greyscale squares. To see the squares, open an image in Photoshop or Preview and zoom in to 800%.

The majority of images on web pages are bitmaps. When Freeway generates a web site, it generates bitmap files with a ‘.jpeg’, ‘.gif’ or ‘png’ suffix. JPEG, GIF and PNG are bitmap formats. Most of the options in Freeway’s Export box are bitmap formats.

* * *

Drag an image from a web page into a Freeway window and apply the Advanced Fade action. The right-hand side of the image fades. That’s it.

* * *

The image at the following address illustrates how to create the fade:  
[http://www.pixentral.com/show.php?picture=1Eu5YGdPsAytKRSoKVYJk1RGKnWO1](http://www.pixentral.com/show.php?picture=1Eu5YGdPsAytKRSoKVYJk1RGKnWO1)

The background colour can be changed in the drop-down menu. In the example it’s ‘None’. As the faded part of the image is translucent, any underlying colour shows through the translucency. This colour is the background colour.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)
