How to work with the Gradient Editor – Da Clipping Path

How to work with the Gradient Editor

How to work with the Gradient Editor – In this lesson we will learn to create, edit, and save our own gradients using the Gradient Editor. Next, you will see that the Gradient Editor allows you to not only select the desired gradient of the finished samples (as well as gradients palette), and edit gradients, choosing different colors, adding new, changing their order and removing the unnecessary colors. We can add a gradient transparency, and even adjust the transition of colors! And finally, we can save our gradient as a finished sample, which will allow us to choose it quickly in the future work, if necessary!

HOME |ABOUT US  | CONTACT US | REQUEST A QUOTE | FREE TRIAL

In the last tutorial, we covered the basics of drawing gradients, so today’s lesson will be devoted to the study of the Gradient Editor. If you do not know how to use the “Gradient” tool (Gradient Tool) or how to draw gradients, I suggest you study the last lesson on drawing gradients . In this tutorial I will be working in Photoshop CC version of the program, but also Photoshop CS6 version is also suitable. Let’s get started!

How to work with the Gradient Editor – Create a new document

Let’s start the lesson by creating a new document. To do this, I go to the “File» (File) in the menu bar at the top of the screen and select “New» (New):

Choose File> New (File> New)

As a result, open the “New» (New) dialog box. As we study itself Gradient Editor, the file size is not important for us. But if you work with me, let’s create a file of the same size as the last time: Width(Width) 1200 pixels Height (Height) 800 pixels. The “Resolution» (Resolution) I leave without change the default – 72 pixels per inch (pixels / inch), and the parameter “Content background»(Background Contents) – «white» (White). I Click OK when finished entering the data to close the dialog box, and a new document will appear on the screen with a white background:

Create a new file size of 1200×800 px

Select the tool “Gradient”

After creating a new document, I will choose the tool “Gradient» (Gradient Tool) on the toolbar:

Select the tool “Gradient”

How to work with the Gradient Editor – Open the Gradient Editor

As you and I have learned from the previous lesson, after the activation of “Gradient” tool, there are two ways to select a gradient. We can choose from a ready-made samples gradients gradient palette, or create and edit your own gradient using the Gradient Editor. In order to open the Gradient Editor, click directly on the preview window in the Settings panel gradients. If you click on the little arrow on the right side of the window view, then open the Gradient palette, which we examined earlier. However, this time we need the Gradient Editor, so click on the window itself:

We click on the preview window in the Settings panel gradients

This action will open the Gradient Editor (Gradient Editor). At first, he may look for you some scary, but soon we will see that in fact it is very easy to operate:

gradient Editor

Field ready samples gradients

In the process of using the Gradient Editor, two stages can be distinguished. In fact, we do not create a gradient from the ground up. Instead, we first select a sample of the finished gradient, which will serve as a starting point for us. Then we edit the sample color to create your own gradient.

Gradient Editor is divided into two main sections: the top region is ready gradients samples (sets), at the bottom – gradients editing section. Field samples of finished works in the Gradient Editor in the same way as in the gradient bar by displaying thumbnails of all ready-made samples gradients. To select the gradient, just click on its thumbnail. gradient name, which you have clicked, will be under the domain of ready samples:

We click on the thumbnail to select the desired gradient of the finished samples.

Initially, we have provided a limited amount of sample ready gradients, but Photoshop program include other sets of samples, we can load a gradient editor, as well as gradients in the palette. To see a list of additional sets, click the little gear icon:

We click on the icon of gears

At the end of the list that appears on the menu screen you will see the other sets of gradients, each of which has a certain theme, such as “Harmonised colors» (Color Harmonies), «Metallic» (Metals),«Pastel» (Pastels), etc. To select any set, click on its name. In my case, I will choose a set of harmonized colors 1 (Color Harmonies 1):

Select the set of “Harmonised color 1”

The program will ask you if you need to replace the current gradients of the new set. If you press the button “Add» (Append), instead of replacing the program will add new gradients gradients to existing ones. I like it when the screen I order and there is no clutter of icons, so I click OK to replace the gradient, the more to restore the original is very simple (as we’ll see later):

Click OK to replace the current gradients of the default set of new

And now we can see that instead of the original gradients, new gradients from the set:

Gradients of a set of “Harmonised color 1”

To restore the original default gradients, again click on the icon of gears:

We click on the icon of gears

Then, from the menu select the command “Restore gradients» (Reset Gradients):

Select the command “Restore gradients”

Photoshop will ask you to replace the current default gradients gradients. Click OK:

Click OK to restore the default gradients

And now we can see again the original gradients:

Background gradients have been restored

The editing area

If the purpose of the Gradient Editor to create your own gradients, why then is it a lot of ready-made gradients patterns that we might as well choose and the gradient bar? As I mentioned earlier, in fact, we do not create gradients from scratch, instead, we choose one of the preset gradient patterns and then begin to edit its color.

The reason that we have access to the samples Gradient Editor, is that of the ready-made samples, we can choose like the one that we want to create. Thus, the need to expend less effort. For example, if I need to create a gradient transition between the three colors, then I can choose a ready sample, which already includes three colors. Perhaps colors are not the same, but at least they have to be three.

So, if we are going to create a gradient with the transition from a solid color to transparent, we can save yourself time by ready to start the sample a gradient color to transparent.

Or if the gradient will be used, for example, pastel colors, it may be simpler to download the set of «Pastel» (Pastels) and pick out a suitable sample of the finished flowers.

At least, this is one of the options. But in fact create any gradient with the Gradient Editor so easy that often you will simply choose to start one of the main gradients “Black, White» (Black, White). I will choose it by clicking on the appropriate preview (third from the left in the top row):

Select the gradient “Black, White”

All parameters and the editing means are gradients at the bottom Editor gradients. Once you have selected a sample of the gradient, it will have to scale the gradient, which is a work area for us. This is the place where we will “build” our gradient. In my case, since I chose black and white gradient, scale became reflect the transition from black to white from left to right:

The selected gradient appeared on the gradient scale preliminary view

gradient type

If instead of a gradient with a smooth transition, you will see a number on the scale gradient colored lines, it means that the parameter “Gradient Type» (Gradient Type) is not set to “Continuous» (Solid),and the “Noise» (Noise). We consider such gradients in a separate class, because they not only look different, but the stages of their creation and others. Generally speaking, whenever you want to create a regular gradient with a smooth transition between two colors, you need to set the type of “continuous” gradient (Solid).

Make sure that as the gradient type is set to “Continuous”

Changing colors gradient

If you look at the scale of the gradient, you can see the color control point (color samples in the form of small squares with arrows pointing to the gradient over them). Each color gradient falls at the same point in color. Since I chose black and white gradient, then it has a two-color point: one filled with black on the left and the other filled with white, on the right. These dots indicate the color Photoshop program on two important points – what colors to use in the gradient and how to place them:

Checkpoints colors on each of the edges of the gradient

To change the current color, first click on the appropriate reference point to select it. Next, click on the color sample in the section “Control Points» (Stops) at the bottom of the Gradient Editor to select a different color. For example, let’s say I want to change my color gradient from black to red. To do this, I click on the black spot of color:

Click the point of the color you want to change

Choosing a point, I click on the sample color

Click the sample to change color

As a result, starting palette of colors (Color Picker). I choose dark red as a new color, and then click OK to exit the Palette:

Choose a palette of colors in red

After that, my original black-and-white gradient will become a red-and-white gradient:

The black color in my gradient changed to red

The same thing I did, and with a different color, changing it from white to yellow. But this time, I will use a faster way color replaced. Instead of clicking on a point and select it, then click the color sample, all I need – is to double-click mouse button on the point:

Double click mouse button on the white control point color

As a result of double-clicking happen instantly opening the Color Palette. I will choose the yellow color and then press OK to close the Palette:

Change the white color in the gradient on yellow

Thus, after a few clicks, our original black and white gradient turned into a new red-yellow gradient:

New color gradient

Setting the average color point

If you look at the scale between the two control points of color, you will see a small icon in the shape of a rhombus. This icon is the mid-point color, which marks the middle of the transition between the colors (the place where the two colors are mixed together). If you do not see the mid-point of the icon, click on any of the control points of color to make it appear.

Icon average color point

We can change the position of the middle point, moving the icon closer to one or the other color. For example, I move the mid-point towards the left, so that it becomes closer to the red dot of color. Note that happens then with the gradient. Shifting the midpoint of the left, I shortened the transition area between the red color point and the mid-point and extended the transition between the mid-point and the yellow color of the point:

We set up the transition area by moving the secondary color points

The “Position”

As you move the icons midpoint color setting “position» (Location) at the scale of the gradient changes to reflect the percentage the exact place where the middle point located between the two colors. By default, the midpoint location value is 50% (exactly in the middle between colors), but after moving the midpoint of the left location value is changed to 25%. In other words, the transition between the left and the color gradient midpoint now occupies one fourth of the entire length of the gradient, and the transition between the middle point and the color gradient on the right – three quarters of the entire length:

The current position is the middle point of the color

We have already seen how you can change the position of the mid-point of the color by moving its icon, but also we can change its location by entering specific values in the “Position” input box data parameter (Location). If I want to, for example, move the mid-point mark with “1/4” to the level of “3/4”, then I can do it by changing the “Position” setting from 25% to 75%:

Manually enter a new value “Position” setting

And now we can see that the mid-point has moved to the mark of 75%, at the same time extending the distance between the red color point and the mid-point and reducing the distance between the midpoint and the yellow color of the point:

The new position of the average color point

I will return back to the mid-point of its original position by silence, by setting the “Position” setting (Location) 50%:

Midpoint returned back to the middle of the gradient

Adding colors to the gradient

To add a new gradient colors, all you need – click under the gradient on the spot where you want to add a new color. Photoshop will add to this position a new color stop. For example, to add a third color between the two original colors, I click on the desired location for the gradient (note that I click the icon below the mid-point, rather than on it):

We click-click in the appropriate place to add a third color

As a result, the new color control point appears at this point. To change the color, double-click it with the mouse button:

Double click-click on the new color sample

Then, in the color palette to select a color. In my case, I will choose the blue:

Choosing a color for the gradient of the third

Then I click OK to close the Color Picker, and my two-color gradient is transformed into a three-color. Not too bad, especially considering that we initially chose a black and white gradient:

The third color was added

Moving color gradient

We can not only add color to the gradient, but to move them, and even change the order in which they appear. There are several ways to move color. The first is to simply click on a color control point and move it to the left or right. In my case, I clicked on the blue point color in the center and move it closer to the point of the yellow color. Just as in the case of moving the midpoint value of “position”parameter (Location) thus changes to display the exact location of the point as a percentage:

Move the color by moving its control points along the gradient

The second way to move the color – is to click on its reference point to select a color, and then enter in the input box data parameter “Position” specific values. I click on the yellow color point, to select it.Please note that its current position is equal to 100%:

Select the yellow dot color

I will change the location of points by entering a value of 50%, which will move the yellow dot in the middle of the gradient:

Move the color by entering the new value of the parameter “Position”

Then I click on the blue point color to select it:

Choose a blue color point

I will move it through the right side, where there used to be yellow dot of color, and thus effectively swap the two color gradient:

Move the blue dot to the end of the color of the right edge of the gradient

Removing colors

In order to remove the gradient of any color, click on its reference point to select, then start moving down point for the gradient scale until, until it disappears. I will take away the blue color by clicking on it the reference point for the selection:

Select the blue color stop

I will move it down the scale of the gradient and we will be seen that the blue color disappeared from the gradient, while the red and yellow color remained. Photoshop program for editing gradients gives us the option to cancel a single action, however if you have accidentally deleted the color you want, simply press the key combination Ctrl + Z (Win) / Command + Z (Mac), to undo the last action and restore the color:

Move the color stop down to remove it

Copying an existing color

Another way to add a color gradient is to create a copy of an existing color. To do this, press and hold the key Alt (Win) / Option (Mac) as the highlight color control point and move it to the right or to the left.Thus, instead of movement the starting point you move a copy of the point, which subsequently can be placed on your gradient in the right place.

Suppose that I really want to create a gradient with the transition from red to yellow and back to red. I already have a red color on the left side of the gradient. Rather than add another color to the gradient, and manually choose in the color palette, the same shade of red, I just press and hold the Alt key (Win) / Option (Mac), then click on the red dot of color and moving it to the right, creating an exact copy :

Click on the color point and move it while holding down Alt (Win) / Option (Mac), to create a copy

Then I move the point to the right edge of the gradient, and thus will create a gradient to the transition from red to yellow and back to red:

Making copies of color dots makes it easy to add the same color to different parts of the gradient

Adding transparency

If you look above the gradient slider, you’ll see icons like additional color points. In fact, it is the control point of opacity. They allow us to adjust the opacity of different parts of the gradient. In the screenshot below you can see one checkpoint opacity at each end of the gradient:

Checkpoints opacity

Some of the gradients ready samples already contain transparency, some – no, but we can easily add it to the gradient as needed. For example, if I want my gradient was the transition from the solid color from left to right is fully transparent, I can achieve this by clicking on the point of opacity, located above the gradient slider to the right. As a result, the options become active transparency in the section “Control Points» (Stops) under the gradient. Note that the current value of the “Opacity” parameter (Opacity) 100%, which means that this area is not very transparent gradient:

Select a control point of opacity on the right side

To add transparency, I click on the arrow to the right of the current value of the opacity and change the setting by moving the slider to the left. I’m reduced to 0% in order to make the right side of the gradient is completely transparent. You can also create a partial opacity gradient, selecting a value ranging from 0% to 100%.

Please note that the color control point of opacity changed from black to white. Black color means that the opacity is 100%, white – that the value of opacity to 0% (fully transparent color). Partial Opacity is represented by various shades of gray. Note also that the gradient scale now has a transition from a solid color checkerboard pattern to the left to the right side of the board. Checkerboard pattern in Photoshop responsible for the transparency of the image:

Reduce the opacity control point to the right 0%

Moving control points opacity

In addition to moving the control points on the color scale of the gradient, we can also move control points opacity. For example, what if I want to draw a transition to a transparent color from yellow in the middle of the gradient instead of red on the left side? I can do this in several ways. Firstly, I can simply click on a control point of opacity on the left side and drag it to the middle of the gradient, so that it is located over the yellow. Thus, the gradient will be completely opaque to the middle of the scale (to yellow), and only then begin the transition to a transparent color on the right side:

Move the opacity stop to the left edge of the gradient center

Adding control points opacity

Secondly, I can leave the starting point of the two opacity in their original positions, and just add the third point above the middle of the gradient slider. To begin, I’ll give opacity stop back to its original position on the left side of the gradient by changing the value of the “Position” setting (Location) 50% 0%:

Just as the color control points, control points opacity can be moved by changing the value of parameter “Position”

Next, I’ll click on the gradient slider in the place where I want to add a new point, in my case – in the middle:

We click the middle mouse button in the gradient to add a third point of opacity

Photoshop will add a new point of opacity. Please note that the value of “Opacity” parameter (Opacity) to this point already is 100%, so it does not change we need. But I could enter any opacity value of 0% to 100%, if necessary. Also note that the value of the “Position” setting (Location) is 50%, but again, if necessary, I could change the value either by moving of the point or enter a new value in the window “Position” setting. You can add to the gradient so the opacity control points as you need for the best color change of control:

Each point of opacity is completely independent from the others

You can copy the existing control points opacity, just as you did with the color control points. Simply press and hold the Alt key (Win) / Option (Mac) left or right by moving the point of opacity to create a copy and put it in the right place. Just as in the case of the control points of color, you can see the average opacity point icon opacity for each set of points. Click this icon and move it closer to one or the other point of opacity, as desired to adjust the transition between colors:

Shift the midpoint of the right opacity

Removing checkpoints opacity

To delete the opacity stop, click it to select and then move up the gradient of the limits as long as it does not disappear. I will take away the point of opacity from the right by clicking on it and dragging upwards. As soon as this point of the three existing opacity (Opacity) different from 100%, with its removal of our gradient again become completely opaque:

Remove the opacity stop right

Finally, to return the gradient to the original state (although this is not required, because the gradient is no longer transparent areas), I click on the control point of opacity in the middle of the gradient and moving it to the right:

Move the control point of opacity gradient from the middle to the right side

The “smoothness”

The last parameter, which we need to consider in today’s lesson – the parameter “Smoothness» (Smoothness), which is responsible for the smooth and gradual transition between the primary colors. By default, the value is 100%, and all transitions are distributed as evenly as possible. With decreasing its value at the transition between colors will be additional shade, which will cause a undesired gradient bands. In most cases, the best option is to leave the “smoothness” of 100%:

The “smoothness”

Saving gradient as a new sample

When you’re happy with the look of the resulting gradient, you can save it as a new sample. To do this, first enter the name of the gradient field «Name» (Name). I’ll call your gradient “red-yellow-red”:

We give a name for the new gradient

Then, click on the button «New» (New):

Click the “New”

As a result, Photoshop software to add new gradient to the other models, giving it its own thumbnail, by clicking on which you can select the next time a new gradient, if necessary:

The new gradient will appear in the finished samples gradients

When you are finished, click OK to close the Gradient Editor:

Click on the OK button

And here we are finished! We learned how to create, edit and save custom gradients using the Gradient Editor! In order to learn to paint gradients.