We are glad to welcome you at the next language of our lesson on working 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 a professional image processing program, 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 set additional parameters for your desire.
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 the control point of 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"
Experienced users are resorted to this method. All actions will occur through the layer palette. Let's proceed:
Through the decisiveness of the selection
The essence of this method is to create a smooth transition on the border of the bordered object / picture 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!
We move the second photo to the previously open.
Read more about Connection Photos You can read in.
Then, using the "Move Tool" tool, you specify the location of the photos relative to each other. It is necessary to make one photo overlap the other, at the place of overlapping and the smooth transition will be mounted. For convenience, it is possible to temporarily reduce the opacity of images in the layer panel, it is also nice to put guides on the overlap boundaries.
Now we define what kind of photography will be on top, and, if necessary, change the location of the layers in the layer panel. I will have a twitter image from above.
Then we put the opacity of the layers with images back to one hundred percent.
And, now, let's turn to the creation of a smooth transition between photos, in this example we will do it with a layer mask and the use of a black and white gradient.
We add a layer of the mask to the layer with a top photo by clicking on the corresponding icon at the bottom of the palette, while the colors in the color palette automatically changed to the black basic color and white background, the mask icon on the corresponding layer will appear in the layer panel. Then open the Gradient Tool in the instrumental palette. In the upper left corner of the photoshop working window, click on the triangle for the opening of the gradient palette, and select the very first name of the name "from the main color to the background". Then we carry out the line from one guide to the other in the direction indicated in the figure.
In order to spend the gradient line strictly horizontally (or, for other cases, strictly vertically), the SHIFT key should be kept.
As a result, we obtain a smooth transition to the transparency of the right edge of the upper image, which gives the effect of a smooth transition between two photos.
On the mask icon in the layers panel, we will see the following changes, black shows full transparency, and white, on the contrary, the full opacity of the image to which the mask layer is applied.
Here, actually, and everything, the task is completed!
Agree, one of the most unusual gifts are collages. They can be decorated to decorate the interior, laugh friends and please close. Original pictures are usually ordered in a photo studio or try to independently perform them on the computer. In order for the overlay of one photo to another to be organically, it is necessary to assimilate several simple combinations. The most important thing is that there is no contrast between frames. Selecting the backgrounds for the collage, be sure to take into account the color solutions and the direction of light on both photos, as well as the size of the items and the main object. To understand how to make a smooth transition to Photoshop, it is enough to explore the procedure presented in this article.
About the order of action
Try in practice to perform the following sequence of actions.
Studying graphic editors will allow you to create unusual work, adjust images, edit them and create amazing compositions with any photographic material!
We hope our article will allow you to successfully cope with the task, as well as get real pleasure from this exciting and creative process.
Today I will show you how to make a smooth transition between two photos.
I made a picture in advance and this result I got:
In order to get such a picture I will take two photos that I will connect.
I took a beautiful background with the sea and a photo of a girl who is photographed against the background of gloomy trees without leaves.
So let's get up - I will do smooth flower transition And for this, I will perform the following steps:
Step 1
I open my photos in Photoshop and with the tool Move By dragging a photo of a girl on a photo with a marine background.
A photo of the girl I want to reduce a little and for this I call Free transformation Pressing the keyboard key Ctrl+ T..
The frame that appeared around the photo with a girl has a nodules for which you can pull and reduce the size of the photo, while you must hold the key Shift., To the image proportions are not distorted.
Step 2.
Now I turn to the palette Layers and being on the layer with a girl click on the icon called Add vector mask.
As we see in the palette Layers A layer mask was formed on a layer with a girl, which is highlighted by a frame, which indicates that the mask is active and all the work that I will perform will be held, it is, on a layer-mask.
On the top panel, where all the tool settings are Gradient I click on arrowlocated next to the tool icon and in the appeared window with gradients I choose radial gradient which passes OT. black to transparent.
Now I spend the gradient lines without reaching the figure of the girl, as indicated in the picture (you may have more directions). When conducting a gradient line, the background smoothly disappears.
I needed two to three times to spend the gradient line for each of the directions specified in the picture to achieve the result you see below in the picture.
Step 4.
However, we can notice that with the disappearance of the background belonging to the photo of the girl, the very image of the girl also changed, since in some places it became translucent.
But this is very simple.
Being on a layer mask, I take a soft round brush white color And drawing this brush in a girl.
White brush restores all the lost sections of the girl image.
And we also want you to recall that you can always talk to photoshop topics, on the photoshop forum and find answers to many of your questions.
This is what happened as a result:
I connected two photos along with a smooth transition.
I hope I explained clearly how to make a smooth transition Between two photos - as you see it is quite simple.
Also advise you to see my previous lesson Valentics in photoshop, in which there is a lot of interesting things.
I wish you further success in mastering photoshop!
With you was Galina Sokolova.
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.
This action is called - a gradient, and since it is essentially a background image, it is executed 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 element selector, creating a gradient to him, in order for your very beautiful background to be 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°» меняется диапазон выбора.
В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.
В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.
Желаю творческих успехов.
— Рабинович! У вас есть разменять сто долларов?
— Нет, но спасибо за комплимент!
Две одесситки:
— Роза, как тебе нравится моё новое платье?
— Извини, Сара, я спешу, мне сейчас не до скандалов!
