Градієнт

Градієнт (від латів. gradiens — «крокучий, зростаючий») — це вид заливки, яка створює плавний перехід між двома або більше кольорами. також просто для прикраси.

1. Градієнт у різних галузях
2. Роль градієнтів у дизайні
3. Види градієнтів
4. Як пом'якшити твердий градієнт?
5. Як зробити градієнт у Adobe Photoshop
6. Плагіни для роботи з градієнтами у Figma
7. Як зробити градієнт у CSS
8. Сайти - генератори градієнтів
9. Підготовка градієнтів до друку

Градієнт у різних галузях

Термін градієнт зустрічається аж ніяк не лише у сфері дизайну. Проте скрізь він має невловимо загальний відтінок значення.

У математиці градієнт — це вектор, який показує, в якому напрямку і як швидко змінюється значення певної функції, яка залежить від координат у просторі. і як сильно температура підвищується.

Ілюстрація того, що таке градієнт у математиці: він вказуватиме на місце розташування червоного піку, так як функція досягає екстремуму в даній точці.

Градієнт у фізиці — це міра зміни фізичної величини (наприклад, тиску, щільності, електричного потенціалу та ін.) Наприклад, якщо взяти тиск газу в посудині, то градієнт тиску визначатиме силу та напрямок дії газу на стінки судини.

У хімії градієнт — це різниця концентрацій будь-якої речовини між двома областями.Градієнт концентрації солі визначатиме швидкість і напрямок зміни концентрації солі з менш концентрованої області більш концентровану.

Наочна ілюстрація градієнта хімії С2 — менша концентрація, С1 — велика.

Градієнт у біології — це закономірна зміна морфологічних чи функціональних властивостей організму чи його частин уздовж однієї з осей тіла чи органа.

Помічаєте схожість визначень? Скрізь градієнт позначає якусь зміну у напрямку від однієї точки до іншої.

Дізнайтесь, яка професія у дизайні вам підійде

Роль градієнтів у дизайні

Тут градієнт — це плавні колірні переходи. У них можуть використовуватися різні кольори і навіть «прозорий», тобто відсутність будь-якого кольору.

Градієнти дуже широко застосовуються практично у всіх сферах дизайну.

Ось основні функції, які виконують градієнти.

1. Створення обсягу та реалізму. Кольорові переходи можуть імітувати світло та тінь, створюючи відчуття тривимірності та глибини. Наприклад, при зображенні сфери, куба або циліндра.

1. Поліпшення читальності та контрасту. Градієнти можуть допомагати виділити текст або інші важливі дизайн-елементи на загальному тлі, збільшуючи контраст.
2. Привернення уваги до окремих елементів. За рахунок яскравості та насиченості градієнти здатні залучати погляд глядачів до певних блоків дизайну, таких як заголовки, кнопки, іконки та ін. Також їх часто застосовують для створення фону або рамки, які наголошують на важливості або активності елемента.

1. Передача сенсу та емоцій. Градієнти можуть нести символічне значення, асоціюючись з певними поняттями, ідеями і почуттями. Наприклад, поєднання яскраво-жовтогарячого, синього та фіолетового кольорів часто використовуються для передачі атмосфери заходу сонця, а ніжні біло-блакитні градієнти викликають асоціації з ясним небом.

Градієнти можуть також передавати настрій або емоцію дизайну, наприклад, радість, легкість, смуток або пристрасть.

1. Створення декоративних ефектів. Зрештою, градієнт – це просто красиво! У переливах кольору є щось магічне, тому що один колір розчиняється в іншому, а разом вони створюють неповторні відблиски та переливи. Саме тому ілюстратори часто використовують такі колірні рішення у своїх роботах.

Дизайнери використовують градієнти буквально скрізь! Ось кілька сфер, де переходи кольорів зустрічаються особливо часто.

Сайти та програми

Градієнти здатні покращувати візуальне сприйняття сайтів та додатків, додаючи їм обсяг, контраст та настрій. Колірні переходи можуть бути застосовані до фону, тексту, кнопок, іконок та інших елементів інтерфейсу.

Сайт та іконки для нього із стриманим синім градієнтом від Viktoriia Kubai. Історія

Логотипи та брендинг

Мабуть, жоден сучасний логотип не обходиться без градієнта. Він допомагає втілювати позитивні асоціації з продуктом та доносити його ідею.

Постери та обкладинки

Градієнтні елементи часто-густо можна побачити на красивих вуличних постерах, обкладинках для книг, журналів, музичних альбомів та інших виданнях.Перетікання кольорів привертає увагу, створює атмосферу, підкреслює тему або стиль продукту.

Ефектні інтер'єрні постери від Devit Huotkeo. Джерело

Ілюстрації

За рахунок здатності імітувати світло та тінь, створювати відчуття тривимірності, а також завдяки яскравості та виразності градієнти часто використовують у ілюстраціях.

Види градієнтів

Залежно від того, як розташовані ключові точки кольорів у градієнті, розрізняють його види.

Лінійний (Linear) - такий, у якому кольори розташовані по одній лінії, але з різних боків. Такими градієнтами дуже зручно заливати прямокутні фігури та області. Його можна розміщувати в будь-якому напрямку: з боку в бік, навскіс, зверху вниз і т.д.

Круговий, радіальний (Radial) - Той, у якому відтінок або інтенсивність змінюються від країв кола до центру. Він більше підходить для округлих фігур.

Angular (кутовий, конусний) — це градієнт, у якому кольори розташовані навколо центральної точки. Цей градієнт створює ефект об'єму або обертання віртуальної «лопаті» – місця стику кольорів.

Ромбоподібний, алмазний (Diamond) — такий, у якому кольори розташовані за діагоналями ромба. Цей тип градієнта створює ефект симетрії чи перспективи.

Так виглядають перелічені типи градієнтів у Figma

Відбитий — градієнт, у якому кольори повторюються дзеркально щодо центральної лінії. Цей прийом асоціюється із симетрією та балансом.

Сітчастий - Рішення, в якому кольори розподілені по сітці з безлічі точок або вузлів. Такий градієнт часто використовується для великої площі: фонів сайтів, банерів і т.д.

Залежно від плавності зміни кольорів розрізняють такі типи градієнта.

М'який - Це плавний, без різких контрастів і стиків, перехід кольорів один в одного. Цей градієнт створює ефект гармонії та спокою.

Жорсткий - Це градієнт, в якому кольори переходять один в одного різко та/або з високим контрастом. Цей градієнт створює ефект динаміки чи навіть агресії.

Приклади твердих градієнтів від Ninon Riviere. Джерело

Залежно від гармонійності та чистоти колірних поєднань розрізняють два види градієнтів.

Чистий - це такий, у якому кольори добре поєднуються один з одним і створюють гармонійний та природний ефект. Такий ефект отримують у результаті правильного підбору кольорів та високої якості друку (якщо робота друкується на папері, тканині).

Приклад чистого градієнта Pol Polà. Джерело

Брудний - Це градієнт, в якому кольори або не поєднуються один з одним, або створюють негарний темний відтінок у зоні переходу одного в інший. Такий ефект може вийти від некоректного підбору кольорів, неправильної підготовки до друку макета (наприклад, при виборі некоректної колірної схеми) або низької якості друку.

Але іноді брудні градієнти використовують і навмисне, цілком усвідомлюючи, що вони можуть створювати відчуття неохайності та похмурості. Ця робота якраз із таких. Додатковий гранж ефект передає накладена зверху текстура. Джерело

Дизайн-хвиля – ваше експрес-занурення у дизайн-професії. Беріть участь в ефірі з експертами, виконайте нескладні практичні завдання та отримайте подарунки.

Як пом'якшити твердий градієнт?

Така банальна річ, як недостатньо плавний перехід між двома кольорами може серйозно погіршити враження від усього дизайну.На жаль, новачки нерідко припускаються цієї помилки — створюють занадто жорсткі градієнти з різкою зміною одного кольору іншим.

Ось кілька способів, як можна буквально за пару хвилин виправити ситуацію. неправильний підбір кольорів (наприклад, вони спочатку надто темні, надто насичені і контрастні по відношенню один до одного), то можна спробувати змінити їх на більш схожі або гармонійні. Для цього можна використовувати колірне коло або спеціальні сервіси для підбору колірних схем, такі як Webgradients або uiGradients. Для найбільш гармонійних поєднань найкраще вибирати кольори, які близькі один до одного на колірному колі або мають однакову насиченість та яскравість.

Приклади готових кольорів з uiGradients

Якщо жорсткий градієнт утворився через неправильного налаштування параметрів у графічному редакторі можна спробувати один з наступних ходів.

• Змінити тип градієнта. Протестуйте та порівняйте лінійний, радіальний, кутовий та інші види. У них різні налаштування, тому, можливо, ви отримаєте потрібний ефект відразу ж.
• Змінити напрямок та довжину лінії градієнта. Якщо лінію витягнути за межі вашої розфарбованої фігури, то кольори розтягнуться, а перехід може стати більш плавним.

• Додати додаткові точки кольору між крайніми значеннями. У них можна використовувати проміжні кольори між тими, які ви вибрали. Це зробить перетікання кольорів більш плавним і непомітним, а також може надати вашому градієнту нових, свіжих відтінків.

Як зробити градієнт у Adobe Photoshop

Ось проста покрокова схема, як додати градієнт на будь-який об'єкт у графічному редакторі Adobe Photoshop.

1. Відкрийте Photoshop і створіть новий документ або відкрийте існуючий файл, до якого потрібно додати градієнт.
2. Виберіть інструмент "Градієнт" на панелі інструментів зліва. Якщо його не видно, натисніть правою клавішею миші на інструмент «Заливка» та виберіть "Градієнт" з меню, що випадає.

1. На панелі параметрів зверху виберіть тип градієнта зі списку: лінійний, радіальний, кутовий, дзеркальний або ромбоподібний. Перед остаточним вибором можна протестувати їх та зрозуміти, який вам більше підходить.

1. Щоб вибрати або створити кольори градієнта, натисніть на полі зі зразком градієнта на панелі параметрів. Відкриється вікно «Редактор градієнтів».

1. У цьому вікні виберіть один із встановлених градієнтів або створіть власний. Для цього клацніть на контрольних точках під лінією градієнта і виберіть колір для кожної точки. Щоб додати нову точку, просто клацніть по лінії. Щоб видалити крапку, перетягніть її за межі лінії.
2. Щоб зберегти свій градієнт, натисніть кнопку «Новий» у правому нижньому куті вікна. Ваш градієнт з'явиться у списку під назвою Користувальницькі. Закрийте вікно «Редактор градієнтів», натиснувши кнопку "ОК".
3. Щоб застосувати градієнт до фону або об'єкта, виділіть потрібну область або шар і перетягніть по полотну від початкової до кінцевої точки градієнта. Ви можете змінювати напрямок та довжину лінії, щоб отримати різні ефекти.

Все досить просто, чи не так? Створені таким чином власні градієнти можна використовувати на будь-яких об'єктах у Photoshop.

Плагіни для роботи з градієнтами у Figma

У Figma можна працювати з градієнтами не лише вручну.Для цієї програми є багато плагінів — додаткових модулів, які спрощують роботу та розширюють базовий функціонал графічного редактора. Ось кілька популярних плагінів для роботи з градієнтами.

• Mesh Gradient — генерує градієнтне зображення за допомогою двомірної сітки, що лежить в основі. Ви можете контролювати форму, розмір і колір кожної сітки, а також змінювати режим накладання і прозорість градієнта. Плагін має простий та інтуїтивний інтерфейс, який дозволяє швидко створювати красиві складні градієнти.
• uiGradients — плагін, що відкриває вам доступ до більш ніж 350 готових градієнтів, які можна додати до кадрів, груп та текстів в один клік. Ви можете вибирати градієнти за категоріями, такими як Warm, Cool, Pastel і т.д., або генерувати випадкові градієнти. Плагін також дозволяє редагувати кольори та напрям градієнта, а також зберігати свої улюблені градієнти у вибране.
• Easing Gradients - Це плагін, який створює складні градієнти на основі побудови кривої. Ви можете налаштовувати її форму, кількість кольорів та їх розподіл у градієнті. Плагін має сучасний інтерфейс, який показує візуально, як змінюється градієнт залежно від параметрів кривої. Плагін також підтримує різні типи градієнтів, такі як лінійний, радіальний та кутовий.

Як зробити градієнт у CSS

CSS – це мова опису елементів веб-сторінок. На ньому в тому числі описують, які кольори мають бути у елементів і як вони змінюються при взаємодії. Градієнти CSS задаються за допомогою спеціальних функцій, які приймають різні параметри.

• тип градієнта лінійний (linear-gradient), радіальний (radial-gradient), конічний (conic-gradient) або повторюваний (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient);
• напрям градієнта можна вказати кут повороту (наприклад, 45deg), ключове слово (to right, to left) або координати центру (наприклад, at 50% 50%);
• кольору градієнта допустимо застосовувати будь-які параметри кольорів, які підтримуються CSS, наприклад найменовані кольори, шістнадцяткові значення, RGB і HSL-коди, змінні;
• точки зупинки кольору можна вказати положення кожного кольору в градієнті за допомогою відсотків (25%, 50% і т.д.) або довжини (10px) Якщо не вказати точки зупинки, кольори будуть розподілені рівномірно по градієнту.

Щоб зробити градієнт CSS з нуля для різних елементів, потрібно виконати наступні операції.

Для кнопки

Для створення градієнта на кнопці потрібно використовувати властивість background-image та функцію з типом градієнта. Так, щоб зробити кнопку з лінійним градієнтом від зеленого до синього кольору, можна написати такий код:

Для тексту

Щоб додати колірний перехід до тексту, можна використовувати властивість background-clip і функцію з типом градієнта.

Для картинки

Для накладання красивого кольорового переходу поверх зображення можна використовувати властивість mix-blend-mode та функцію linear-gradient. Наприклад, щоб зробити картинку з градієнтом від чорного до білого кольору, можна написати такий код:

Сайти - генератори градієнтів

Якщо вам не хочеться конструювати градієнт самостійно, а стандартні варіанти у графічних редакторах вам не підходять, скористайтесь одним із таких сайтів.На них є як готові поєднання кольорів, так і прості функціонали налаштування градієнтів.

WebGradients

Тут ви знайдете понад 180 готових градієнтів різних кольорів та стилів. Ви можете переглядати їх у вигляді колекції або слайдера. Ви також можете завантажити градієнти у форматі PNG або CSS. Цей сайт зручний, тому що він пропонує багато варіантів, які можна легко використовувати та адаптувати.

Інтерфейс сайту WebGradients

uiGradients

Цей ресурс дозволяє створювати власні градієнти або вибирати з бібліотеки понад 300 поєднань, створених іншими користувачами. Тут легко змінювати напрямок, кольори та прозорість градієнта, а також копіювати код CSS або SVG. Ви можете налаштовувати градієнти на свій смак і ділитися ними з іншими.

Colorzilla Gradient Editor

Це сайт, на якому можна редагувати та створювати градієнти за допомогою CSS. Користувач може додавати, видаляти та переміщувати колірні точки на лінії градієнта, а також змінювати напрямок, форму та повторення градієнта, отримуючи готовий код.

Інтерфейс Colorzilla Gradient Editor

Gradients.app

Це багатофункціональний інструмент для дизайнерів, на якому легко не тільки створювати та завантажувати градієнти, але й підбирати кольори за фотографіями, генерувати свої палітри, перевіряти контрастність та читаність тексту. Існують опції збереження своїх робіт в особистому кабінеті та шерингу.

CSS Gradient Animator

Це сайт, на якому ви можете створювати анімовані градієнти за допомогою CSS. Ви можете вибрати тип анімації (лінійна, радіальна, кутова або ромбоподібна), швидкість, кольори та кут. Існують приклади анімованих градієнтів, доступна функція копіювання коду CSS. Ресурс дозволяє створювати динамічні та ефектні градієнти без використання JavaScript.

Інтерфейс сайту CSS Gradient Animator

Підготовка градієнтів до друку

Якщо ваш дизайн призначений для подальшого друку, то перед відправкою макета в друкарню необхідно виконати наступні операції у графічному редакторі, щоб градієнт було передано коректно.

1. Перекласти макет у колірний простірCMYK, оскільки більшість друкарень використовують цей стандарт друку. Це допоможе уникнути втрати чи спотворення кольорів. Для цього у "Фотошопі" потрібно вибрати команду "Зображення" → "Режим" → "CMYK".
2. Перевірити, чи всі кольори градієнта знаходяться в межах кольорового охоплення CMYK, тобто не перевищують 300% сумарної густини фарби. Це допоможе уникнути перенасичення кольору та поганого сушіння фарби на папері. Для цього потрібно використовувати палітру «Інфо» у Photoshop або Illustrator та навести курсор на колірні точки градієнта.

1. Переконайтеся, що всі градієнти мають достатній дозвіл для друку, тобто щонайменше 300 dpi. Це допоможе уникнути появи ступінчастості чи смуг на градієнтах на готових виробах. Для цього потрібно вибрати команду «Зображення» → «Розмір зображення» у «Фотошопі» або «Ілюстратор».

1. Зберегти макет у відповідному форматі для друку, наприклад, PDF, EPS або TIFF. Це допоможе зберегти якість та кольоропередачу градієнтів під час друку. Для цього у графічних редакторах Adobe потрібно натиснути «Файл» → «Зберегти як» і вибрати потрібний формат.

Все про дизайн за 2 години

Безкоштовний практикум + гайд "300 корисних ресурсів для дизайнера" ​​після реєстрації

background: gradient(); CSS. Плавний перехід від одного кольору до іншого

Здрастуйте шановні початківці веб-майстра. Знову Оригінальний ефект CSS.

У цій статті я розповім, як зробити фоновий колір перехідним від темних відтінків до світліших, а також від одного кольору до іншого.

Називається така дія - градієнт, і так як по суті воно є фоновим зображенням, то виконується властивістю background, що приймає два значення:

1. linear-gradient - перехід кольору від краю чи кута, до іншого.

2. radial-gradient – ​​перехід кольору від центру до країв.

Записується так:

background : -moz-linear-gradient (top, #ff0000, #ffcfcf);
background : -moz-radial-gradient (top, #ff0000, #ffcfcf);

Нижче, на прикладі, докладно розберемо кожен елемент цього запису.

На жаль, градієнт все ще має проблеми з відображенням у браузерах, і специфікацією W3C, тому в значеннях все ще доводиться використовувати префікси.

Ставитися префікс на початку значення і починається з тире.

Ось такий список нам доведеться вставляти в селектор елемента, створюючи йому градієнт, для того, щоб Ваше дуже красиве тло коректно відобразилося у всіх браузерах. Краса потребує жертв.

< html lang color: #008080;">ru ">
< head >
< meta charset color: #008080;">utf-8 " />
< title >Документ без названия< /title >
< style >
#gradient background: #ff0000;
background : -moz-radial-gradient ( center, ellipse cover, #ff0000, #ffcfcf );
background : -webkit-linear-gradient (top, #ff0000, #ffcfcf);
background : -o-linear-gradient (top, #ff0000, #ffcfcf);
background : -ms-linear-gradient (top, #ff0000, #ffcfcf);
width: 600px;
height: 400px;
border: 1px solid #333;
>
< /style >
< /head >
< body >
< div id color: #008080;">gradient ">< /div >

< /html >

Це найпростіший, двоколірний градієнт. Докладно розберемо значення властивості 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 );
background : -o-radial-gradient ( center, ellipse cover, #ff0000, #ffcfcf );
background : -ms-radial-gradient ( center, ellipse cover, #ff0000, #ffcfcf );
width: 600px;
height: 400px;
border: 1px solid #333;
>

А тепер давайте зробимо, так би мовити, щось на зразок веселки. Для цього додамо до вищенаведеного коду ще пару кольорів, і задаємо у відсотках обсяг кожного кольору (кількість кольорів не обмежується)

Обсяг кольору задається від 0% до 100% (перший — 0%, останній — 100%, решта між ними гаразд). Розглянемо цей варіант на радіальному градієнті. На лінійному робиться все аналогічно.

#gradient <
background: #ff0000;
background : -moz-radial-gradient ( center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100% );
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 ° змінюється діапазон вибору.

У «Регулювання схеми» тон стає темнішим або світлішим. У «Списку кольорів» всі кольори, присутні на схемі, розташовуються за насиченістю, і з кодом у підписі.

Загалом необмежені можливості щодо підбору кольорової гами для створення градієнта.

Приклади різних варіантів градієнта та готовий код, можна знайти у шпаргалках Градієнт приклади код

Бажаю творчих успіхів.

- Рабіновичу! Ви маєте розміняти сто доларів?
— Ні, але дякую за комплімент!

Дві одеситки:
— Розо, як тобі подобається моя нова сукня?
— Вибач, Сара, я поспішаю, мені зараз не до скандалів!

Створення плавного переходу у Фотошопі між квітами

Ми раді вітати вас на черговому нашому уроці присвяченому роботі у Adobe Photoshop. У цій статті йтиметься про те, як створювати плавні переходи в програмі на кордоні між зображеннями/квітами. Це дуже корисна навичка, яка вам напевно знадобиться, так що приступимо!

Робимо плавний перехід між квітами

Т.к. Фотошоп є професійною програмою обробки зображень, дуже часто одного і того ж результату можна досягти кількома способами. Так і з переходами.

Через інструмент "Градієнт"

Ви, напевно, знайомі з цим інструментом. Тому переходимо до панелі інструментів зліва і вибираємо "Градієнт".

Важливо! Якщо ви не знаєте, як працювати із заливкою в програмі, то пропонуємо ознайомитися також з уроком на тему: «Як зробити заливку у Фотошопі CS6 та СС»

Після того, як інструмент вибраний, під головним меню з'явиться панель налаштувань Градієнта, де ви зможете вибрати шаблон градієнта та встановити додаткові параметри за власним бажанням.

На жаль, стандартний набір градієнтів включає не так багато шаблонів, тому ви можете скористатися пошуком і розширити свою колекцію, або ж створити свій варіант.

1. Давайте спочатку відкриємо налаштування градієнта в панелі налаштувань:
   
2. Перед нами відкриється нове вікно з налаштуваннями, де ми можемо налаштовувати градієнт, як нам заманеться. Для початку ми виберемо пресет "Від основного до прозорого" у наборах. Потім опускаємося до пункту «Контрольні точки» та клацаємо по одній з контрольних точок двічі, якщо хочемо змінити колір.
3. Тепер необхідно підібрати колір у палітрі кольорів. Ми вибрали фірмовий колір нашого сайту - MyPhotoshop.ru.
   
4. Потім переходимо до другої контрольної точки і повторюємо дії із заміною кольору. Якщо ви хочете залишити перехід на прозорий колір, залишаємо все, як є.
   

Щоб перехід був саме колірним, а не прозорим, потрібно встановити параметри ще й для контрольної точки непрозорості (див. скріншот нижче):

Після того, як все готово, залишається застосувати зміни, натиснувши «ОК», і залити градієнтом полотно. тягнемо стільки, скільки потрібно.

Важливо! Зверніть увагу на те, який вид заливки обрано:

У нашому випадку «Лінійний градієнт».

Через «Шар-маску»

До цього способу вдаються вже досвідчені користувачі.

1. Насамперед необхідно створити маску шару, який будемо редагувати.
   
2. Тепер необхідно знову взяти «Градієнт».
   
3. Після того, як вибрали градієнт, робимо все те саме, як і в першому прикладі.
   

Через розтушовування виділення

Суть даного методу в тому, щоб створити плавний перехід на межі залитого об'єкта/картинки та фону.

1. Нам знадобиться інструмент "Прямокутна область".
   
2. Тепер потрібно створити виділення:
   
3. Коли виділення готове, за допомогою гарячих клавіш SHIFT+F6 викликаємо вікно, де необхідно ввести значення у пункті «Радіус розтушовки».
   
4. Після цього потрібно залити освічене виділення. Для цього знову скористаємося гарячими клавішами. SHIFT+F5 та вибираємо колір заливки.
5. Після застосування змін отримуємо такий результат плавного переходу:
   
6. Залишається зняти виділення за допомогою CTRL+D і готове:
   

Як бачите, немає нічого складного в тому, щоб зробити плавні переходи у Фотошопі між квітами.

На цьому все! До зустрічі у наступних уроках!