Gradient Transition

In the last lesson, we had imported a photo into our creativeworks.png design comp (which you can get from the link). If necessary zoom back out to about 66% so that we can see the entire canvas.

Instead of the abrupt edge where the bottom of the image meets the page, we can have a transitional gradient by following these steps...

Set the gradient tool to have a linear gradient and a Grayscale mask and the rest of the setting as shown.

With the mask still selected, apply the gradient tool with a drag from bottom to top as shown. If you hold down the shift key while dragging, the line will be constrained to be perfectly vertical.

Look at our mask...

We had applied black on our mask at the bottom of our image. Pure black on our image will mean that that portion is completely masked out (or invisible). Applying pure white means completely visible. Our gradient goes from complete black at the bottom to complete white higher up. Meaning that our image will be totally invisible at the very bottom and slowly transition to completely visible about a quarter way up.

Here is what we have...

You can download my resulting creativeworks.png file from the link.

If you want to learn how to fade more than one edge of an image, see this related tutorial. Or if you need to fit an image into a rounded rectangle instead of a square corner, take a look at this tutorial

When ready, continue to the next lesson.