Color stretch is a smooth transition from one
colors to another, for example from green to blue.
Tone stretching - this is when a smooth transition goes from a light tone to a dark tone, most often of one color, for example, from light green to dark green. Or vice versa, from dark to light.
Stretch marks are sometimes referred to as gradient fills or gradients.
Color stretch can bemake from any two or more colors. Why do I say more colors, yeah
because smooth transitions of color from one to another can consist of three,
four, five colors ...
This stretch usedonly two colors: blue and green
And this one already has three colors: red, yellow and green.
it seems that the color flows over :-).
I hope the theory is clear. Let's get down to practice.
An exercise
For exercises, we need A4 paper (landscape sheet size), gouache
and a synthetic gouache brush, watercolor and a soft core or squirrel brush for
watercolors.
Divide the sheet into four parts, like this:
Let's make two stretches (in the upper rectangles) using gouache, and two
(in the bottom) using watercolor, technique
the application of these paints is slightly different.
Let's start with gouache
Choose two colors for the first stretch. I chose purple and
whitewash, it will be a tone color stretch.
We spread on the palettea little purple paint and dilute with water to the consistency of sour cream,
next to the palette, place a little white. Now we type on the brush
purple paint and draw a strip along the edge of the paper in the first
small rectangle. After that, in purple paint on the palette
add quite a bit of white, mix, it turns out a little color
lighter than it was. With this new shade we draw the next strip,
literally grabbing the previous strip by a millimeter. After that again
add more whitewash to the purple mixture, mix and repeat
strip. And so continue until the rectangle ends.
It should look something like this:
Now select two other colors and stretch them in the same way.
principle.
I stretched from blue to red, then to orange, and this is what happened:
Now let's do a watercolor stretch
In the same way as with gouache, aim at
palette separately two selected colors.
I'll take yellow and green. Paint
the palette should look like two colored puddles.
Before applying watercolors, cover the rectangle with clean water without paint.
When the water has been absorbed so that the paper is damp but not wet, you can
start applying paint. First apply yellow paint, after each
adding a little green to the yellow paint, mix and again
we apply a strip. This should be done so that the edges of the strokes are not
dried up, then the color transition will be smoother and more delicate.
And the last exercise is going from white to any color in watercolor.
How to do it if you paint in watercolors
can not be used?
Very simply, we take the sheet itself for the white color, that is, the first page
we will write with ordinary clean water, and then we will go to the water a little bit
add the selected color. If, on the contrary, a color stretch is required.
to white, then we direct the desired color on the palette and after each application on
paper, slightly dilute the color with water.
If the watercolor stretch is applied in stripes and cannot achieve smooth transitions, then most likely you have thin paper that absorbs paint quickly. Then moisten the paper with a soft brush, wait until the water is absorbed, and the paper is wet but not wet (no puddles) and stretch across the wet paper, using a different gradient fill.
Lesson "Stretching color for the sky and dunes"
Why is the ability to stretch color useful?
It's long and boring to explain, better let me show you on
example.
After completing this exercise, you will immediately understand why
you need to learn how to stretch :-).
For the exercise, we need watercolor paper (the denser the better),
watercolor and a soft kolinsky or squirrel brush.
Attach a piece of paper to an easel or table with buttons (or masking tape),
to prevent the paper from curling when it gets damp.
Now imagine a desert with dunes.
With light (without pressure) pencil lines, apply
wavy lines. First define the horizon line and then
draw a desert with dunes.
By the rules of linear perspectivethan
Let's draw the sky
The sky is always brighter near the horizon than overhead.
First, we wet the paper so that the paint lays down more evenly and
spread more easily. Dip the brush in water, and wet
brush the entire area of \u200b\u200bthe sky to the horizon. Wait a few seconds, gotta
to allow moisture to penetrate the paper, i.e. puddles disappeared, and paper
just got wet, not wet looking. After that take
on a brush of blue paint, stir on the palette and apply a horizontal strip along
top edge of the paper.
Now, you need to work quickly, without letting the strokes dry out around the edges,
to form a smooth transition from a bright blue color to a transparent almost white color.
Just dip (do not wash, namely dip the tip of the brush in water,
so that water is added to the paint remaining on the brush) and
draw a new horizontal line with a more diluted color
just below. But draw each new horizontal line like this
so that it slightly captures the previous one,
so that they merge into a single space.
We draw the dunes
When the sky dries up, draw the desert in the same way.
We wet the distant dunes, and do
a stretch of yellow or orange, ocher or red
colors if you like Martian landscapes :-).
Just not as we wrote the sky from dark to light, but vice versa from light
tones to dark. The first stroke is done with slightly colored water (very
diluted paint), and in each subsequent stroke add
a little color.
Having written the dunes on the horizon, we let them dry, and
moisten the next row of dunes and prescribe them again with
using a stretch from light to dark.
We continue to write each
the next row of hills-dunes.
Don't forget the aerial perspective rules: then
what is closer to us we prescribe more clearly, what is further from us
we write with less clarity, so to speak, do not worry if
the paint has spread a little, this will only enhance the picturesque
pictures.
Here's what we should get.
Nice, but not entirely believable. We forgot about the shadows.
For example, if the sun shines on the left, then the shadows will be on the right sides.
hills-dunes.
I remind you again about the rules of aerial perspectivethen what
in the foreground it is more contrasting that in the far
the plan is less contrasting, that is, in the background the shadows are softer, on
front sharper)
I've never been to the desert, but now I understand
that in bright sun the shadows should be much darker than I drew :)
I will not fix it :)
With the help of a column brush number 2 - we will outline the footprints in the sand, and
several vertical strokes will create the effect of a distant
caravan.
Instead of a caravan, you can draw a cactus, or a lizard, or something else.
And if you want to draw your own pictures, and not copy others' master classes, then in our online school for adults "EVERYONE can draw!" there are courses for beginners with a system-step-by-step training in drawing their own paintings:
A course for those who can draw with a pencil, and who dream of learning how to write with watercolors. Plunge into the magic of color :)
We study the techniques of ancient masters: Flemish layering, Italian, as well as ala prima and pointillism. Suitable for those who do not know how to paint with oil, as they say from scratch. All friends and acquaintances will admire your pictures.
See you at our courses :)
Mila Naumova
In this tutorial, we will learn how to paint gradients in Photoshop. They can be used in many ways, for example, the Gradient tool lets you paint gradients on layers, or on selections, or on layer masks to create smooth transitions from one layer to the next. We can fill texts and shapes with gradients.
We can colorize the photo with a Gradient Map Adjustment Layer, or add color effects with a Gradient Overlay Layer Style, and more! Gradients are an invaluable tool in Photoshop for dramatically enhancing a design or image that looks flat.
In this tutorial, we will learn the basics of painting gradients using the simplest (and arguably most useful) tool, the tool "Gradient"(Gradient Tool). In later tutorials, we'll look at other ways to apply gradients, but they all work the same way, so once you've learned the basics of using the Gradient tool, you can easily take advantage of the other gradient features in Photoshop!
In addition to drawing gradients, we will also look at how to select gradients from the Gradient Picker and how to load additional gradient sets. We'll explore different gradient styles and take a closer look at several of the most commonly used gradients, including the Foreground to Background gradient.
After learning the basics of drawing gradients, in the next tutorial we'll look at how to edit and save our own gradients using the Gradient Editor.
For this tutorial I'll be using Photoshop CC, but Photoshop CS6 will work as well. Let's get started!
Create a new document
Let's start by creating a new document. For this, I will go to the section "File" (File) on the menu bar at the top of the screen and select "New" (New):
Choose File\u003e New (File\u003e New)
As a result, a dialog box will open "New" (New). In this lesson, I will set the following parameters for the document: Width (Width) 1200 pixels, Height (Height) 800 pixels. There is no particular reason why I chose these parameters, so if you want, set other values \u200b\u200bthat you like. Parameter "Resolution" (Resolution) I'll leave the default 72 pixels / inch unchanged, and the "Background content" (Background Contents) - "White" (White). I'll click OK when I'm done entering the data to close the dialog and a new document with a white background appears on the screen:
New Dialog Box
Selecting the Gradient Tool
Tool "Gradient"(Gradient Tool) is located in the toolbar on the left side of the screen. I will select a tool by clicking on the appropriate icon. You can also select the Gradient tool by pressing the G key on your keyboard:
On the toolbar, select the "Gradient" tool
Gradient palette
After selecting the Gradient tool, you need to select a gradient, and this can be done in several ways: using the Gradient Palette or using the Gradient Editor. The difference between the two is that the Gradient Palette allows us to select a gradient from pre-made swatches, while the Gradient Editor, as its name suggests, allows us to edit and create our own gradients. In this tutorial we will take a look at the Gradient Palette, and postpone the study of the Gradient Editor until the next lesson.
If you want to select a ready-made gradient from the proposed samples or a gradient that you recently created and saved as a sample (and again how to do this - we will learn in another lesson), click on the small arrow on the right side of the gradient preview window in the panel settings. Make sure that you are clicking on the arrow and not on the preview window itself (otherwise the gradient editor will open, and we do not need this now):
Click on the arrow to open the Gradient Palette.
This will open the Gradient Palette with suggested gradient swatches. To select a gradient, click on its thumbnail and then press the Enter (Win) / Return (Mac) or click on an empty space in the settings panel to close the palette. You can also double-click the gradient swatch thumbnail to both select a gradient and close the palette in one go.
Gradient palette
Loading additional gradients
By default, we have a small number of gradients available, but Photoshop includes other presets from which we can select gradients. All we need is to simply load them into the palette. To do this, click on the gear icon in the upper right corner of the palette:
Click on the gear icon in the gradient palette
If you look at the bottom of the menu that appears, you will see a list of additional gradient sets, each with a specific theme, such as metals, pastels, harmonized colors, etc. If you are into photography, gradients “ Neutral density"(Neutral Density) and" Photographic toning " (Photographic Toning) will be especially helpful for you:
Other gradient sets
To download any of the sets, click on its name. I chose the Photographic Toning set. Photoshop will ask us if we want to replace the current gradients with new ones. If you click on the " Add " (Append), then instead of replacing the current gradients, the program will simply add new gradients to the existing ones. As you will see later, it is easy to restore the original gradients, so I'll click on the OK button and replace the existing gradients with gradients from the Photo Shading set:
Click OK to replace the original gradients with new ones from the set
And now in the Gradient Palette, you can see that instead of the original gradients, there are gradients from the Photographic Toning set. To learn more about the Photographic Toning Kit and its uses, check out the Photographic Toning Samples tutorial (http://www.photoshopessentials.com/photo-editing/photographic-toning-cs6/):
The original gradients have been replaced with gradients from a new set
Restoring default gradients
For a step-by-step study of the topic, we will return to the original default gradients. To restore them, click on the gear icon in the gradient palette again:
Click on the gear icon
Then select the command from the menu list Repair Gradients (Reset Gradients):
Selecting the Restore Gradients command
Photoshop will ask you if you want to replace the current gradients with the default gradients. Click OK
Replace the current gradients with the default gradients
And now, we are back to the original gradients:
Original gradients have been restored
Foreground to background gradient
Before we start drawing gradients, let's take a closer look at one gradient - "From main to background" (Foreground to Background). This is the gradient that the program chooses by default for us, but we can also select it manually if we need it by clicking on its thumbnail (the first one on the left in the top row):
As you might have guessed, the Foreground to Background gradient uses the foreground and background colors. You can see the current foreground and background colors in the respective swatches at the bottom of the toolbar. The top left swatch displays the color foreground(Foreground) and the bottom right is the color background (Background). By default, the foreground color is black and the background color is white:
Current foreground (top left swatch) and background (bottom right swatch) colors
Since the foreground-to-background gradient is based on the foreground and background colors, it is the easiest to modify and often most useful. Let's use this gradient to understand how to draw gradients, and at the same time see how easy it is to change the colors of the gradient as needed!
Draw a gradient with the Gradient tool
Draw gradient with tool "Gradient" (Gradient Tool) is as easy as clicking on a mouse button and moving the cursor. Simply click where the starting point of the gradient will be, and then hold down the mouse button and drag your cursor to where the ending point of the gradient will be. As you move the cursor, you will see a thin line defining the direction of the gradient. When you release the mouse button, the program will finish painting the gradient using the selected colors.
For example, I'll click on the left side of the document and, while holding it down, drag the cursor to the right side. Note that for now we only see a thin line between the start and end points of the gradient. To make it easier for you to draw a flat horizontal gradient, press and hold Shiftas you move the cursor, thereby limiting the angle at which the cursor moves. Just remember that at first release the mouse button, and then Shift key, otherwise nothing will work:
Click and move the cursor (keeping the mouse button pressed) from one side of the document to the other
When I release the mouse button, Photoshop draws the gradient. Since the foreground color was set to black and the background color was set to white, I drew a black to white gradient:
When you release the mouse button, Photoshop draws a gradient
Reverse colors (inversion)
You can swap the colors in your gradient by selecting the option in the settings panel "Inversion" (Reverse):
Select the "Inversion" option on the settings panel
After selecting the Invert option, if I paint the same gradient again, this time the colors change location: white will be on the left and black will be on the right. This is a handy option, but remember to uncheck the Invert option when you draw the gradient, otherwise all of the following gradients will also be inverted:
The same gradient, only with a different color arrangement
Of course, you don't have to paint the gradients horizontally. They can be located in any direction you choose. I'll draw another gradient, but this time from top to bottom. Please note that I do not need to undo or delete my drawn gradient. Photoshop will simply replace the current gradient with a new one. I will click at the top of the document and, while holding down the mouse button, drag my cursor to the bottom. Just as with the horizontal gradient, it's easier to draw a vertical gradient while holding down the Shift key. Remember to release the Shift key only after you release the mouse button. Again, at first we only see a thin outline:
Click and drag a vertical gradient from top to bottom
When I release the mouse button, Photoshop will finish painting the gradient, replacing the original horizontal gradient with a vertical black and white gradient:
New black and white vertical gradient
Change colors in default gradients
Since the default gradient uses the foreground and background colors, all we need to replace the gradient colors is to select different foreground and background colors. For example, I'll choose a different foreground color by clicking on the appropriate color swatch in the toolbar (the one currently black):
Click on the foreground color swatch
As a result of this action, the color palette will open. I'll choose red as the new foreground color and then click OK to close the color picker:
Choosing red as the foreground color
Click on the background color swatch
This will open the color picker again. I'll change the background color from white to bright yellow and then click OK to close the color picker:
Choosing yellow as the new background color
Notice that the color swatches are now showing the new colors I've chosen for the foreground and background:
Swatches displayed new colors
The preview window in the settings panel also began to display new gradient colors:
The preview box in the settings panel also displays the new gradient colors:
I'll draw a gradient, this time diagonally, by clicking on the bottom left of the document and dragging the cursor to the top right. Again, we don't need to undo or delete the previous gradient, since the program will replace it with a new one.
Draw a new gradient from left to right diagonally
When I release the mouse button, the program finishes drawing a red-to-yellow diagonal gradient:
New red-yellow gradient
Restore the foreground and background colors
Notice that if I open the Gradient Palette in the Options Bar, I see that the foreground to background gradient thumbnail is red-yellow:
Updated foreground to background gradient thumbnail in the Gradient Picker
You can change the colors for this gradient any time you want by clicking on the foreground and / or background color swatch icon in the settings panel and choosing other colors. If you need to quickly return the foreground and background colors to their defaults and make the foreground color black and the background color white, just press the D (Defaults) key on your keyboard. Thus, the swatches in the toolbar will again be filled with black and white:
The foreground and background color swatches have again been replaced with the default swatches
In the Gradient Preview in the Options Bar and in the Gradient Palette, the gradient from the foreground color to the background color is back to black and white:
Everything is back to the original version
Drawing the gradient on a separate layer
If we look at the layers panel, we can see that so far I have painted gradients directly on the layer. background (Background):
In the layers panel, you can see that the gradient is drawn on the background layer
Drawing gradients on a background layer might be fine for our tutorial, but to get a better understanding of Photoshop, let's take advantage of layers and place each object on a separate layer. To do this, I will first remove the current gradient by going to the menu section "Editing" "Run Fill" (Fill):
We choose Edit\u003e Perform Fill (Edit\u003e Fill)
When the dialog box opens "Fill in"(Fill) I will set for option "Content"(Contents) value "White"(White) and click OK. This will fill the background with white:
Fill Dialog Box
While holding down Alt (Win) / Option (Mac), click on the "Create a new layer" icon
Holding Alt (Win) / Option (Mac) opens a dialog before adding a layer "New Layer"(New Layer) where we can enter the name of the layer. I'll name the layer "Gradient" and then click OK:
New Layer Dialog Box
The program will add a new blank layer called "Gradient" above the background layer. Now I can draw my gradient on this new layer and separate it from everything else (“everything else” in this case means the background, but painting on separate layers is a good working habit nonetheless):
Now I have a separate layer for the gradient
Jump area
When drawing gradients, it is not only the direction of movement of the cursor that is important, but also the distance between the start and end points of the gradient.
This is because in reality, when you use the Gradient tool, you are defining not only the direction of the gradient, but also the transition area between colors. The distance that you move the cursor from the start point to the end point determines the size of the transition area between colors. Longer distances give us smoother transitions, while shorter distances create sharp and abrupt transitions.
For a visual example, I'll use a foreground to background gradient in black and white. First, I'll draw the gradient from left to right, starting near the left edge of the document and ending near the right edge. The area between the start and end points of the gradient is the transition area between two colors (in my case, between black and white):
How to draw a gradient with a large transition area
I'll release the mouse button and the program will finish painting the gradient. Since there was a lot of space between the start and end points of the gradient, the transition between black on the left and white on the right was gradual and smooth:
Gradient with a consistent transition between colors
I'll undo this gradient for ease of reference by going to the section "Editing" (Edit) at the top of the screen and selecting Undo Gradient (Undo Gradient). I could also press Ctrl + Z (Win) / Command + Z (Mac) on my keyboard:
We choose " Editing\u003e Undo Gradient (Edit\u003e Undo Gradient).
This time I'll draw the gradient in the same direction (from left to right), but with a much smaller distance between the start and end points:
How to paint a gradient with a small transition area
When I release the mouse button, you can see that even though the gradient was drawn in the same direction as the previous one, the transition between black and white is sharp and abrupt. Thus, when drawing a gradient, the distance between the start and end points is as important as the direction of the gradient:
Similar gradient, but with a smaller transition area
Before we continue, let's take a look at the layers panel. Since I previously added a new layer, my gradient is now drawn on a separate “Gradient” layer, not on the background layer. And again, in this lesson it is not important for us, but if you train yourself to draw each object on a separate layer, it will be easier for you to work in Photoshop:
The gradient is now on a separate layer above the background layer
Basic to Transparent Gradient
So far, you and I have mainly studied the default gradient. - "From main to background" (Foreground to Background), however there is another commonly used gradient - "From basic to transparent" (Foreground to Transparent). I propose to also consider it, because the principle of operation of this gradient is slightly different from the others. I'll select a gradient from the Gradient Palette by double-clicking on its thumbnail next to the foreground to background gradient thumbnail:
Selecting the Basic to Transparent Gradient
A foreground to transparent gradient is similar to a foreground to background gradient in that it uses the current foreground color, and you can easily change the color of the gradient by choosing a different foreground color. What distinguishes this gradient is that it does not have a second color. Instead, there is a transition from a single color to transparent.
I will undo my current gradient by going to the section "Editing" (Edit) and selecting the item Undo Gradient (Undo Gradient). Then I'll select a color by clicking on the foreground color swatch in the toolbar, which is currently filled with black:
Click on the foreground color swatch
When the color picker opens, I'll select purple and click OK:
Choosing purple as the new foreground color
By choosing purple as the new foreground color, in the Gradient Preview in the Options Panel, I can see that I will be drawing a gradient from purple to transparent (the checkerboard pattern is responsible for the transparency image in Photoshop):
Gradient from purple to transparent
I'll draw a vertical gradient from the top of the document to the center:
Draw a vertical gradient from base color to transparent in the upper half of the document
When I release the mouse button, it looks like we have drawn a gradient from purple to white. However, white is not part of the gradient, but the color of the white background below the gradient:
Purple refers to the gradient and white refers to the background below it
To prove my point, I'll temporarily turn off the visibility of the background layer by clicking on the layer visibility icon (in the form of an eyeball) in the layers panel:
Turn off the visibility of the background layer
As a result of this action, the white background in the document will cease to be visible, and the gradient itself will appear. Now you can clearly see that this is a gradient from purple to transparent. Again, using the checkerboard pattern, Photoshop shows transparency:
Valid gradient from purple to transparent
Another difference from the base color to transparent gradient is that the program does not remove the previous Base to Transparent gradient if we paint a new one over the previous one. Instead, it just adds a new gradient to the original one. I'll draw a second gradient from the foreground color to transparent, this time from the bottom edge of the document to the center:
Add a second gradient "Base to Transparent"
I'll let go of the mouse button and Photoshop will add a second gradient to the first instead of overwriting the gradients. If I were to draw a third or fourth gradient (from the left and from the right, for example), the program would also add these gradients to the existing ones:
Both gradients blended together
I'll turn back the visibility of the background layer by clicking the layer visibility icon again:
Turn on the visibility of the background layer
And now we again see the gradient from purple to white (and again to purple), although we know that, in fact, white is the background color, showing through the transparent layer:
The same gradient with the background layer turned on
Option "Transparency"
Using a foreground to transparent gradient can darken the edges of a photo or the sky in an image to emphasize details (we'll cover that in another tutorial). But for the transparent part of the gradient to be drawn, you must be sure that the option "Transparency" (Transparency) in the settings panel is selected:
Make sure the "transparency" option is on when you paint a gradient with a transparent part
If the transparency option is turned off while drawing the gradient, then in the end you just fill the layer or selection with the selected foreground color.
Without the "Transparency" option selected, the program will not be able to draw the transparent part of the gradient
Gradient "Black, white"
We will not go over every gradient that Photoshop offers us (since you can easily do it yourself), however, if you need to draw a black and white gradient and your foreground and background colors are different from black and white, just select the gradient. "Black White" (Black, White) from the Gradient Picker (third from the left in the top row). Unlike a foreground-to-background gradient, the Black, White gradient always uses black and white, no matter what the current foreground and background colors are:
Black, White gradient thumbnail
Gradient styles
So far, you and I have studied examples of gradients in which there were color transitions from the starting point to the ending point in a straight line. This type of gradient is called linear, and is actually one of five different gradient styles that you can choose from in Photoshop.
If we look to the right of the Gradient Preview in the Options Bar, we see five icons representing the different gradient styles (from left to right): Linear(Linear), Radial(Radial), Cone-shaped (Angle), Mirrored (Reflected) and Diamond-shaped (Diamond)
Linear, Radial, Taper, Mirror and Diamond gradients
Let's explore what each of these gradient styles is capable of. I will press Ctrl + Alt + Z (Win) / Command + Option + Z a few times to undo the previous steps and return to a blank document filled with white. Next, I'll switch back to the Foreground to Background gradient by selecting it from the Gradient Palette:
Selecting the Foreground to Background gradient
I'll press the D key to return the foreground and background color settings to their default black and white. Next, to make it more interesting to work, I'll change the background color from white to light blue:
Foreground and background colors (last option)
Linear gradient
By default, the program has a gradient style "Linear" (Linear). You can also select it manually by clicking on the first icon on the left:
Choosing a Linear Gradient Style
We have already looked at several examples of a linear gradient style, which makes it possible to draw a gradient in a straight line from the start to the end point in the direction of the cursor movement. Option "Inversion" (Reverse) allows you to reverse the order of colors:
An example of a regular linear gradient
Radial gradient
The radial style (the second icon from the left) allows you to draw a circular gradient in the direction from the start point:
Choosing a Radial Gradient Style
I will remove the drawn linear gradient by pressing Ctrl + Z (Win) / Command + Z (Mac). To draw radial(Radial) gradient, I'll click in the center of the document to define the starting point, and then start moving the cursor towards the outer edge:
Draw a radial gradient from the center of the document
I'll release the mouse button and a radial gradient will appear in front of us. It starts with the foreground color (black) at the origin in the center of the document and fades into the background color (cyan) as it approaches the edge:
Radial gradient
If I chose the option "Inversion" (Reverse) in the settings panel, then the colors would change: in the center there would be a blue color with a gradual transition to black:
The same radial gradient with reversed color order
Cone gradient
The cone style (middle icon) is more interesting to us (although perhaps not as useful):
Choosing the Cone Gradient Style
Just like the radial style, cone-shaped The (Angle) style uses the starting point as the center of the gradient. But instead of making a uniform transition in all directions, it begins to twist around the starting point counterclockwise. I'll press Ctrl + Z (Win) / Command + Z (Mac) again to undo the last gradient. Next, I'll start drawing a cone-shaped gradient in the same way as a radial one: by clicking in the center of the document to define the starting point and moving the cursor towards the edge:
Draw a tapered gradient from the center
The screenshot below shows the taper gradient after I release the mouse button. As with all gradient styles, choosing the option "Inversion" (Reverse) will replace the used colors:
Cone Gradient Style lets you spin the gradient around the start point counterclockwise
Mirror Gradient
MirroredThe (Reflected) style (fourth icon from the left) of the gradient is very similar to the standard linear style except that it flips the colors on both sides of the starting point:
Choosing a mirrored gradient style
So, I'll click in the center of the document to define the starting point and then move the cursor up:
How to draw a mirror gradient
When I release the mouse button, the program draws a regular linear gradient in the upper half of the document from the start to the end point, but then flips it in the lower half of the document:
Mirror Gradient
And here's what the mirrored gradient will look like if we swap the colors:
A gradient is a smooth transition from one value to another. In this case, the value of a physical quantity can be anything, from temperature and speed to color and transparency (if used in Photoshop). It should be noted that this smooth transition can be carried out at different speeds, in different space and time. The main thing is that there are no sharp jumps.
How important is gradient in Photoshop? I will say without exaggeration - huge. After all, it is using the gradient tool that we create in Photoshop a smooth transition between two or more colors, change the illumination, or, simply put, make our work natural, naturalized.
You can apply a gradient either to the content of the layer, or using a new layer, let's call it - "gradient fill". In this case, the gradient will be on its own "gradient fill" layer and will have the property of a layer mask that masks the image pixels of the main layer.
Photoshop is the most popular image processing software for raster graphics. The number of her fans is increasing daily. Therefore, it makes sense to tell where the gradient is located in Photoshop. Despite the fact that the Gradient Tool is one of the main tools in Photoshop, an unknowing person won't find it right away. So where is the gradient in Photoshop located?
The selection of the gradient tool is carried out by right-clicking on the group with the "Paint Bucker" tool (1) on the toolbar. When you open the additional window, left-click on the "gradient tool" icon (2) to switch to the mode of working with gradients. Also, to switch to the mode of working with gradients, you can use the G key, or Shift + G, to switch between the group tools.
In this case, the properties panel will display: the image of the gradient in the active tool window (3), the current gradient window (4) and the gradient type selection buttons (6-10).
Select the type of gradient depending on the planned work using the buttons on the parameters panel (6-10).
Linear Gradient (6) is intended for a gradient fill of a layer with color or transparency along a straight line along the direction we specified (enabled by default).
The radial gradient (7) defines the transition of color or transparency evenly in all directions from the point you specified.
The cone-shaped gradient (8) provides a spiral transition of color or transparency, forming a cone-like shape.
Mirror Gradient (9) defines a straight line transition of color or transparency with a mirror image. It is essentially two linear gradients extending in opposite directions from the starting point of the gradient.
The diamond-shaped gradient (10) lets you set the color or transparency transition along the diagonals of the diamond from its center. Or in other words, four linear gradients radiating from one point at an angle of 90 degrees relative to each other.
In the rectangular window (4) we see the current version of the gradient. If you left-click on the arrow (5) located next to it, we will open the gradient palette. It remains for us to select the desired gradient by clicking on it with the left mouse button. 
When you click on the arrow (11), a menu will open to us, divided into several submenus. With the help of submenu (12) we can customize the appearance of the gradient palette. In another submenu (13) there are sets of gradients available to us, which can replace the set of gradients presented in the gradient palette.
In addition to the above-mentioned gradient properties, on the properties panel we will see: "Mode" (14), "Opacity" (15), "Inversion" (16), "Dithering" (17) and "Transparency" (18).
In this case, we use the "Opacity" gradient property to adjust the opacity level of the entire gradient. Set either by numbers in the window, or by moving the slider along the scale, called by pressing the triangular arrow to the right of the window.
The Invert property reverses the order of colors in the gradient. Dithering prevents streaking. Transparency applies the transparency mask of the gradient (turns on or off the transparency gradient as part of the entire gradient). Enabling (disabling) these properties of the gradient is carried out by setting (unchecking) the checkbox in their window. 
The "Mode" property of the gradient gives us a wide range of gradient blending modes. Just click on the triangular arrow to the right of the current gradient blend mode window and a menu of gradient blend modes will open in front of us. Using the same gradient, but different blending modes, you can achieve the desired effect. Experiment with the modes on the same image to see what effects they have. Don't forget to select a mode first, and only then apply the gradient overlay. 
If we left-click on the gradient window (4), the gradient editor will open, which we will use to edit existing gradients and create new Photoshop gradients. 
How to make a gradient
We will learn how to make a color gradient and a transparent gradient with you. I think you've already noticed that the top edge has a greater transparency than the entire gradient.
So let's start:
1. Enter Photoshop, select the "Gradient" tool - right-click on the toolbar (palette) where the "Fill" tool is located. Left-click on the "Gradient" tool. Then left-click on the gradient sample window in the "Properties" panel (shown with a red arrow in the figure).
The gradient editor window will open, where we will see:
A) Sets (Presets) - contains the gradients supplied with the program. The gradients of the active gradient set are displayed.
b) Name - the name of the selected gradient, which we can change as it is convenient for us to use. Just select the name and enter your own. In this case, we have on the skin shot - "Custom" (Custom), a gradient with custom settings.
c) Gradient Type. By clicking on the arrow we will see two options: Continuous (Solid) and Noise (Noise)
d) Smoothness - the softness of the color transition in the gradient. We can also change it if necessary.
e) Color bar with sliders (sliders) at the top and bottom. The sliders locate the color (blue arrows) and opacity (red arrows) stops. In the center of the window is a sample of the selected gradient. 
When one of the color or opacity sliders is activated, we will also see the “midpoint of color” or “midpoint of opacity”, respectively, located between the sliders. 
2. Now let's left-click on the lower left slider (1), the triangle above it will become colored, which means that the slider has become active. This is also indicated by the color window (2), which became active and painted in the color of the slider.
3. Click on the "Color" window with the left mouse button and an additional window "Select color" will open. Here we will select the color of the beginning of the gradient by clicking on the color field (3). If you want to select a color of a different color scale, then move the slider (5) on the color scale to the range you need. Or just click on the color bar where you want. If you have a color number, enter it in the window (4). After choosing a color, click "OK" to save it. If you want to make a gradient from the base color to the background, then click on the black arrow to the right of the "Color" window (2). An additional window will open where we can choose "Main color", "Background" or "Custom". The foreground color and background match the color and background set on the toolbar.
Do the same with the bottom right slider - set the final color of the gradient. For simplicity, let's take a color of the same color scheme, but darker. As a result, we will get a linear color gradient from light to dark. 
4. To make us understand what role the position of the sliders plays, move them 10% from the edges while holding down the left mouse button. Or enter the numerical values \u200b\u200b"10" - for the left slider and "90" - for the right slider in the "Position" window (6). Don't forget to activate the corresponding sliders beforehand. Numerical values \u200b\u200bof extreme control points: 0% - left and 100% - right. We can see that the color left outside the sliders is not processed with the gradient. 
5. Click with the left mouse button in any free space between the sliders. A new slider will appear. It can also be moved and configured. You can move the slider with the mouse, or by entering a numerical value in the Location field. If we want to create a control point similar in color to the existing one, then simply copy the selected point by dragging it with the left mouse button while holding down the "Alt" button.
If you want to remove an unnecessary control point, we simply drag it outside the color bar. Or activate it and press the "Delete" button on the dialog box. It is also possible to use the Delete and Backspace buttons. 
6. Similarly, create one more control point of the color (Fig. 7) and set it a darker shade of color (see item 3 of this article). 
7. To further explore the gradient functionality, move one of the color midpoints. To do this, activate one of the nearest sliders. A point of light color will appear between them. Let's click on it. The color will change to black, which means it has become active. Moving the midpoint of the color is done in the same way as the sliders (see item 4). 
8. Now let's experiment with opacity, another gradient function. Our actions are the same as in working with color. Only now we activate the top sliders and change their settings. 
9. To consolidate the skills of creating control points, set one for the opacity. We carry out the actions already familiar to us in step 5. It immediately becomes clear that the opacity gradient is formed only between those control points whose values \u200b\u200bare not equal in opacity. 
10. The gradient is ready. Let's apply the created gradient and see what we get: 
11. This is not the end of my lesson on how to make a gradient in Photoshop. We already know how to work with the gradient tools, now let's see how our gradient will change when the Smoothness function is changed. Notice how the gradient has changed: 
12. Now apply the gradient function "Noise". Here we open up new spaces. We can change the smoothness, color model, channel metrics and other gradient parameters. 
13. I think it's time to remember my promise to tell you how to make a transparency gradient. Now it will not be difficult for you. Using the knowledge you just learned, try making the transparency gradient yourself. I am posting a screenshot for a hint. Make the color control points the same. For the control points of the opacity set different values, depending on the purpose of the gradient. 
Finishing our Photoshop tutorial "How to Make a Gradient". Further mastering the properties of the gradient, with the knowledge you now have, will not be difficult.
