We are glad to welcome you at the next time our lesson on the work in Adobe Photoshop.. This article we will talk about how to create smooth transitions in the program on the border between images / colors. This is a very useful skill that you will probably come in handy, so I will proceed!
We make a smooth transition between colors
Because Photoshop is professional program Image processing, very often one and the same result can be achieved in several ways. So with the transitions.
Through the "Gradient" tool
You are probably familiar with this tool. Therefore, go to the toolbar on the left and choose "Gradient".
After the tool is selected, the gradient settings panel will appear under the main menu, where you can select the gradient template and install extra options At your request.
Unfortunately, the standard set of gradients includes not so many templates, so you can use the search and expand your collection, or create your own option.
So that the transition was exactly the color, and not transparent, you need to set the settings also for control point opacity (see Screenshot below):
After everything is ready, it remains to apply the changes by pressing "OK", and pour the canvas gradient. To do this, form a dedicated area that we want to fill, or use a gradient for the entire canvas. Just clicking the LKM (left mouse button) in the right place and dragging as much as necessary.
Important! Pay attention to what kind of fill is selected:
In our case "Linear gradient".
Through the "Mask Layer"
To this way already resorted experienced users. All actions will occur through the layer palette. Let's proceed:
Through the decisiveness of the selection
Essence this method in creating smooth transition On the border of the filled object / pictures and background. Baister!
- We will need a "rectangular area" tool.
- Now you need to create a selection:
- When the selection is already ready, with the help of hot keys SHIFT + F6. call a window where you want to enter a value in the point "Range Range".
- After, you need to pour the formed selection. To do this, we will use the hot keys again SHIFT + F5. And choose the color of the fill.
- After applying changes, we obtain such a result of a smooth transition:
- It remains to remove the selection using Ctrl + D. And ready:
As you can see, there is nothing hard in making smooth transitions in photoshop between flowers. We presented the whole 3 ways how to do it, each of which is suitable in a certain situation.
That's all! See you in our following lessons!
In this article, consider popular methods of smooth transitions between images.
Such transitions are necessary when you make complex collages or you want to make a beautifully arrange several pictures in one.
Of all the options presented below: Soft eraser, soft brushes and gradient, the best method is a gradient. It is he who creates a first-class transition, without losing the quality of the source images. See ourselves: Using eraser, we paint pixels, but where is the guarantee that you get to paint everything perfectly? Of course, you can spend the whole day for photoshop, washing a pixel for a pixel. But, I believe, "the game is not worth the candle," since we strive not to spend a lot of time on certain operations and do everything quickly.
A soft eraser and a brush are good for cutting edges so that two photos merge well and did not seem to be strangers due to sharp edges.
Now let's look at Read more:
Soft erase
Since the eraser tool can be used with the brush parameters, then with soft brushes You can erase part of the image in such a way that another image is seen located below. With this reception, you can achieve the desired result, but it is also irreversible, as is - if you change your mind and decide to connect images differently, you will have to start all over again.
After you put both images you want to merge, in one document (each on a separate layer), follow these steps:
1. Drag the image of the image that you want to partially erase, at the top of the palette of the layers.
Note
Before you wash, it is useful to make a duplicate layer with whom you will work, in case you do not like the result (for this, press the Ctrl + J key combination). So that the new layer does not interfere with you, its visibility can be turned off (and turn on again, if necessary).
2. Select an eraser by pressing the E key, and install it in the brush mode. To do this, select Brush item in the parameter panel in the parameter drop-down list. Then, in the drop-down list of sets of parameters of the brushes, select a soft brush. Make sure that the opacity and pressure fields are set to 100.
To make the transition even smasher, experiment with the lasty opacity. By reducing the value of opacity, you can create more smooth transitions, watering a brush along the desired area, and without making individual clicks with the mouse.
3. Install the mouse pointer over the image and erase the unnecessary part. If you allow an error or at some point to change your mind - use the palette of the story to go back to several brush strokes, or cancel the last operation by pressing the Ctrl + Z keys combination.
Soft brushes and layers masks
Alternative to the eraser accounts for the reverse version - drawing Layer Mask Large Soft Brush. At the same time, you just hide part of the pattern instead of removing it.
Suppose you want to emphasize how the motorcycle goes quickly. Strengthen traffic effect You can, adding a little blur in the motion to the drawing, and then the sister part of the blur of the layer-mask.
Here's how to create fast Movement effect:
1. Open the picture and create a duplicate of the source layer by pressing the CTRL + J key combination.
2. Select the Filters menu command \u003d\u003e Blur \u003d\u003e Blur in motion. With this filter, you can create a feeling that the object is moving very quickly. Since the filter is blurring the picture entirely, it becomes difficult to see the necessary object on it, so you have to hide part of the blurred layer by adding a layer-mask. To add it to, click on the button with the image of the circle in the rectangle at the bottom of the palette.
3. Press the key to select the brush tool and select a large soft brush. Set the black color as the color of the foreground.
I remind you that in relation to layers-masks drawing in black hides that we need to be done in this case. Take a look at the bottom of the tools panel and, if they show black and white colors, then press the X key until the black indicator turns out to be over. If other colors are selected, then first set the default colors by pressing the D key, and then press the X key until the black indicator turns out to be upstairs.
6. Install the mouse pointer over the image and, working with a brush, hide a part of the blurred layer.
Gradient masks
I will postpone soft brushes. Create the most smooth transitions from possible You can, Using gradient - soft, gradual transition from one color to another. Methods for combining images using soft brushes and gradients similar to the fact that images are combined in one document and then a layer-mask is added to the upper layer. But instead of drawing a mask with a black or white brush, you use a black and transparent or black and white gradient for smooth, solid "flowing" of one image to another.
1. Drag the picture, which should be in the foreground of the collage, to the very top of the list of layers and add a layer mask to it.
2. Press G to select the gradient tool. On the parameter panel, click the drop-down list arrow. In the drop-down list, select a black and transparent gradient, and in the Type group, click on the linear gradient button.
3. In his example, I want the Batman's logo to right to be transparent. To do this, click the mouse button on the border of the logo and the type shrid by the key to about about the middle of the logo. After releasing the key, I get a smooth transition between images. To improve the quality of the transition, you can also apply the gradient.
When dragging, the photoshop program draws a line depicting the width of the transition: the shorter line (than by a smaller distance you drag the pointer), the already tougher transition (the clear boundary will not be, but it will turn out something close to it); The longer the line, the wider gradient and smaller transition.
Noticed the error in the text - select it and press Ctrl + Enter. Thank you!
Hello dear novice webmasters. Again.
In this article I will tell you how to make a lighter moving from dark shades, as well as from one color to another.
Called such an action - gradient, and since it is essentially it is background image, It is performed by the Background property of the receiving two values:
1. Linear-gradient - the transition of color from one edge or angle, to another.
2. Radial-gradient - the transition of color from the center to the edges.
Written as follows:
background: -moz-linear-gradient (TOP, # FF0000, #FFCFCF);
tOP, # FF0000, #FFCFCF);
Below, on the example, we analyze each element of this entry in detail.
Unfortunately, the gradient still has problems displaying in browsers, and the W3C specification, so the values \u200b\u200bstill have to use prefixes.
Put the prefix at the beginning of the value, and starts with a dash.
Here is such a list we will have to insert the element in the selector, creating a gradient to him, in order for your very beautiful background Correctly reflected in all browsers. Beauty requires sacrifice.
Это самый простой, двухцветный градиент. Разберём подробно значения свойства background
В первой строке задаётся фон для браузеров не поддерживающих линейный градиент.
Следующие 5 строк — для отображения фона в разных браузерах. Сначала пишется значение градиента с префиксом в начале.
Затем, в круглых скобках:
top — направление от которого начинается первый цвет (может быть bottom , left , right )
#ff0000
— через запятую первый цвет; 
#ffcfcf — через запятую второй цвет;
У Safari, до 5-ой версии, и у Chrome до десятки был свой собственный синтаксис, заметно увеличивающий код. Наверное поэтому, градиент для этих версий, зачастую, не указывается, особенно при наличии большого количества цветов.
Можно сделать переход цвета не горизонтально, или вертикально, а из угла в угол. Для этого существуют следующие направления:
bottom right — от правого нижнего угла к левому верхнему;
bottom left — от левого нижнего к правому верхнему;
top right — от правого верхнего к левому нижнему;
top left — от левого верхнего к правому нижнему;
Можно сделать переход цвета от центра блока к краям. Тогда в значении вместо слова linear (линейный), ставиться radial (радиальный)
#gradient
{
background
: #ff0000
;
background
: -moz-radial-gradient
(center, ellipse cover, #ff0000, #ffcfcf
);
background
: -webkit-radial-gradient
(center, ellipse cover, #ff0000, #ffcfcf
);
center, ellipse cover, #ff0000, #ffcfcf
);
center, ellipse cover, #ff0000, #ffcfcf
);
width
: 600px
;
height
: 400px
;
border
: 1px solid #333
;
}
А теперь давайте сделаем, так сказать, что-то типа радуги. Для этого добавим в вышеприведённый код ещё пару цветов, и зададим в процентах объём каждого цвета (количество цветов не ограничивается)
Объём цвета задаётся от 0% до 100%, (первый — 0%, последний — 100%, остальные между ними в порядке следования). Рассмотрим этот вариант на радиальном градиенте. На линейном делается всё аналогично.
#gradient
{
background
: #ff0000
;
background
: -moz-radial-gradient
();
background
: -webkit-radial-gradien
t(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%
);
background
: -o-radial-gradient
(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf1005
);
background
: -ms-radial-gradient
(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%
);
width
: 600px
;
height
: 400px
;
border
: 1px solid #333
;
}
Принцип, я думаю, понятен. Так что строку для Safari до пятой версии, и Chrome до десятой, попробуйте написать самостоятельно.
Градиент задаётся любому блоку HTML (body, div, h1-6, p, ul, ol), и как глобальным, так и встроенным стилем (это для сайта на WordPress).
Теперь несколько слов о том, как и где подбирать цвета. Есть сервисы по созданию градиентов, предлагающие и цвет, и процент объёма, и код градиента, но выбор у них ограничен предложением.
Поэтому я пользуюсь инструментом colorscheme.ru , в котором можно подобрать цвет в неограниченном диапазоне, и оптимально подобранных последовательностях и сочетаниях.
В верхнем ряду панели выбирается количество сочетаемых цветов. Пройдя по «Угол 30°» меняется диапазон выбора.
В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.
В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.
Желаю творческих успехов.
— Рабинович! У вас есть разменять сто долларов?
— Нет, но спасибо за комплимент!
Две одесситки:
— Роза, как тебе нравится моё новое платье?
— Извини, Сара, я спешу, мне сейчас не до скандалов!
Сегодня я покажу вам, как сделать плавный переход между двумя фотографиями .
Я сделала картинку заранее и вот какой результат у меня получился:
Для того чтобы получить такую картинку я возьму две фотографии, которые я буду соединять.
Я взяла красивый фон с морем и фотографию девушки, которая сфотографирована на фоне мрачных деревьев без листьев.
Итак приступим - я буду делать плавный переход цветов и для этого я выполню следующие шаги:
Шаг 1
Открываю мои фотографии в фотошопе и с помощью инструмента Перемещение перетаскиваю фотографию девушки на фотографию с морским фоном.
Фотографию девушки я хочу немного уменьшить и для этого я вызываю Свободную трансформацию, нажав на сочетание клавиш CTRL +T .
Рамочка, которая появилась вокруг фото с девушкой, имеет узелки, за которые можно потянуть и уменьшить размер фото, при этом необходимо удерживать клавишу Shift , чтобы пропорции изображения не исказились.
Шаг 2
Теперь я перехожу к палитре Слоёв и находясь на слое с девушкой нажимаю на значок , который называется Добавить векторную маску .
Как мы видим в палитре Слои на слое с девушкой образовалась слой-маска, которая выделена рамочкой, что говорит о том, что маска активна и все работы, которые я буду выполнять, будут проводиться, именно, на слое-маске.
На верхней панели, где находятся все настройки инструмента Градиент я нажимаю на стрелочку , находящуюся рядом со значком инструмента и в появившемся окошке с градиентами я выбираю радиальный градиент, который переходит от чёрного цвета к прозрачному .
Теперь я провожу линии градиента не доходя до фигуры девушки, как указано на картинке (у вас может быть больше направлений). При проведении линии градиента фон плавно исчезает.
Мне понадобилось два-три раза провести линию градиента по каждому из указанных на картинке направлений, чтобы добиться результата, который вы видите ниже на картинке.
Шаг 4
Однако, мы можем заметить, что с исчезновением фона, принадлежащего фотографии девушки, так же несколько изменилось и само изображение девушки, так как в некоторых местах оно стало полупрозрачным.
Но это поправить очень просто.
Находясь на слое-маске, я беру мягкую круглую кисть белого цвета и рисую этой кистью по девушке.
Белая кисть восстанавливает все потерянные участки изображения девушки.
И еще мы хотим вам напомнить, что вы всегда можете пообщаться на фотошопские темы, на форуме фотошоп и найти ответы на многие свои вопросы.
Вот, что в результате получилось:
Я соединила две фотографии вместе с помощью плавного перехода.
Надеюсь, я объяснила понятно, как сделать плавный переход между двумя фотографиями - как видите это довольно просто.
Так же советую вам посмотреть мой предыдущий урок Валентика в Фотошопе , в котором много интересного.
Желаю вам дальнейших успехов в освоении Фотошопа!
С вами была Галина Соколова.
