Step 5: Convert The Gleam Shapes To Gradients

Now it gets a little more complicated, so pay close attention. We need to take our flat gleam shapes and convert them into sexy gradients, so we can lay them on top of the buttons. This is the labor intensive part!

First, create a new layer above the gleam vector layer. Name it 'Unclipped Gleam' or something useful. Notice that I've hidden the 'Vector Gleam' layer... it doesn't need to be visible for you to be able to select the vectors and convert them into selection boundaries, and this makes it a bit easier to see what you're doing when applying your gradients.

Now, for each row of horizontally aligned gleam shapes (there's only one per row in this case), select the shapes with the path selection tool, right click on one of them, and click 'Make Selection...'. This should draw a selection boundary in the same shape as the gleam vectors you had previously selected! See the first example on this page for an idea of what this should look like.

Once you have the proper selection area defined for a single row, make sure you're on the 'Unclipped Gleam' layer, and switch to the gradient tool. Using the grid to make sure your gradient is completely vertical, fill the selection with a white to transparent gradient, from the top of the selection to a couple grid points below the bottom edge. We want at least some white everywhere in the area, and painting the gradient below the bottom edge ensures that this is the case.

If you've done everything correctly, your gradient should look similar to the one in the second example. Since all of these buttons are the same shape, I cheated a little and just cut & pasted the first gradient on top of each of the other buttons, then merged all those new layers into the single 'Unclipped Gleam' layer. The result is shown in the third example.

<< Previous Page Next Page >>