Вебдизайн безперечно пройшов довгий шлях від початкових обмежень HTML і браузерів. Сьогодні завдяки HTML5, CSS3, надшвидкому інтернету та можливостям сучасних браузерів, вебдизайнери можуть створювати справді міцну й потужну основу для розвитку бренду в інтернеті. Вебдизайн перетворився з суто технічної дисципліни на справжнє ремесло. Анімації, художні зображення та ілюстрації поєднуються з геометричними формами та лініями, створюючи щоразу нові комбінації та композиції, здатні нести в собі певну інформацію.
Незалежно від того, чи використовує вебдизайнер відео чи фотографії для фону сторінок, перед ним завжди постає вибір між реалістичністю й абстракцією. Завдяки простим формам, яскравим кольорам і текучим, повітряним лініям, абстрактні ілюстрації стали однією з найгарячіших тенденцій у вебдизайні. Тенденцією, яка з року в рік додає проєкту унікальності. Натхненний безліччю мистецьких і дизайнерських напрямів, цей естетичний підхід допомагає привернути увагу, передати емоції та запросити користувачів до взаємодії з елементами, навігацією та контентом.
У цьому матеріалі ми розглянемо, як створити ефект абстракції з простої фотографії в Photoshop. Якщо раніше ми вже розглядали цей ефект , вивчаючи ефект Polyscape (геометрична абстракція), то тепер подивимось, як створити більш “живу” форму — текучу, але змістовну для композиції.
Вихорова абстракція Twirl Art
Художник може не лише “розбивати” зображення на геометричні фігури, а й “закручувати його навколо центру”. Сенс скручування зрозумілий, але при поєднанні різних варіантів цього ефекту можна отримати цікаві нові композиції. Вони вражають не тільки своєю незвичністю, але й кольорами, яскравістю та тематичною відповідністю.
Спочатку погляньмо на деякі проєкти, створені з використанням плавних і текучих абстрактних фонів, серед яких є й варіації ефекту закручування. Наприклад: lesanimals, bacter, lonsdale, kikk, strv та інші.
Загалом створити такий ефект нескладно, але у вебдизайні його використовують нечасто, бо одного “закручування” та спотворення оригінального фото недостатньо. Якщо хочеш просто абстрактний фон — можна приглушити кольори. Але якщо хочеш створити вражаючу «обкладинку» для сайту, додати анімацію — доведеться фантазувати.
Що ж, почнемо…
Twirl Art за допомогою Photoshop
Візьмемо звичайну фотографію — ромашки в траві. У нас виділяються основні кольори: білий, жовтий і кілька відтінків зеленого. Якщо тобі потрібна інша палітра — краще одразу підібрати відповідне фото, адже змінювати кольори потім складніше.
Відкриваємо зображення у Photoshop CC або CS6 — це не має значення.
Важливо: ми будемо використовувати смарт-фільтри. І багато! Тому ефект + велике зображення можуть навантажити комп’ютер. Щоб полегшити собі життя — зменш розмір зображення. Потім готовий ефект можна буде масштабувати і накласти на оригінал (ми це окремо розглянемо).
Створюємо дублікат зображення через Зображення → Дублювати і називаємо його Вихор. При потребі зменшуємо розміри. У нас, наприклад, 840х525 px.
Перед тим як додавати фільтри, треба перетворити зображення на смарт-об’єкт. Клікаємо по шару ПКМ, обираємо Перетворити на смарт-об’єкт. Перейменовуємо шар на Фото.
Перший фільтр, який ми застосуємо — Фільтр → Оформлення → Меццо-тінто. Цей фільтр додає випадкові, контрастні штрихи, лінії або точки — залежно від налаштувань. Ми оберемо Довгі штрихи, згодом зможемо змінити.
Тепер застосовуємо Радіальне розмиття з розділу Фільтр → Розмиття. У вікні обираємо Метод: Лінійний, Якість: Найкраща або Чернетка. Нижча якість працює швидше.
Важливо: якщо у тебе потужний ПК — одразу став найкращу якість. Якщо ні — застосуй фільтр 2–3 рази без зміни налаштувань. Це зменшить шум. Кілька шарів розмиття дають дуже цікавий результат.
Переходимо до Фільтр → Спотворення → Скручування. Переміщуємо повзунок вправо або вліво (за або проти годинникової стрілки). У нас — за годинниковою на 130 градусів.
Тепер повернемося до редагування смарт-фільтрів. Відредагуємо Меццо-тінто. Клікаємо по ньому двічі у панелі шарів. Photoshop попереджає, що всі фільтри будуть відключені. Це нормально — фільтри застосовуються згори вниз. Погоджуємося.
У вікні обираємо замість штрихів плями. Зображення стає менш контрастним, з м’якішими кольорами. Можна ще погратися з налаштуваннями, але ми зупинимось тут.
Створимо копію шару (Ctrl+J). Копіюються й смарт-фільтри з усіма налаштуваннями.
Для нового шару відкриваємо фільтр Скручування і змінюємо значення на -130. Можна спробувати й інші — все на твій смак.
Верхній шар повністю перекриває нижній. Щоб змішати їх — застосовуємо режими накладання. Найкраще підходять Темніший, Світліший або Пряме світло.
Ось як виглядають варіанти:
Ми обираємо Світліший.
На цьому етапі можна змінювати параметри будь-якого фільтра. Просто двічі клацни ЛКМ на Скручування або Меццо-тінто і внеси зміни. Наприклад, для копії Фото ми обрали «Великі точки».
Якщо вимкнути Радіальне розмиття, то картинка стане чіткішою — ефект нагадуватиме подвійну експозицію.
Або спробуй змінити тип розмиття з лінійного на кільцеве.
Ми додали по 2 розмиття для обох шарів з максимальними налаштуваннями. Фільтр можна перетягнути ЛКМ у панелі шарів.
Масштабування ефекту до оригіналу
Ефект-вихор готовий, але зображення маленьке. Переносимо ефект на оригінал з високою роздільністю (наприклад, 1680px шириною).
На вкладці з оригіналом обираємо Виділення → Усе, далі Редагування → Копіювати або Ctrl+C.
Переходимо у вкладку Вихор, двічі клацаємо будь-який смарт-шар — відкриється вкладка “Шар0.psb”. Тут вставляємо Ctrl+V оригінальне зображення.
Якщо зображення не вміщується — йдемо в Зображення → Показати все. Полотно автоматично збільшується.
Натискаємо Файл → Зберегти і закриваємо цю вкладку.
У документі Вихор ефект частково обрізається — знову Зображення → Показати все. Після прогрес-бара з’являється фінальна картинка.
Власне, це і є повний ефект Вихору. Його можна крутити, деформувати, зміщувати — кожного разу отримуючи новий результат. Але давай ще покращимо композицію — додамо симетрії.
Shift + Ctrl + Alt + E — створюємо зведений новий шар. Це вже не смарт-шар, смарт-фільтри не потрібні.
Обираємо Редагування → Трансформування → Відобразити по горизонталі.
Міняємо режим накладання на Темніший. Можна трансформувати шар, обертати, накладати тон або градієнт.
Варіантів безліч — все залежить від фантазії.
Завершення
Художній абстрактний вихор, або Twirl Art, практично повністю змінює початкове фото — і створює нове, оригінальне зображення. Можна просто «закрутити» кольори, але варіації ефектів дають можливість створити цілу нову сцену. Так, це абстракція. І в вебдизайні її складніше використати, ніж фото чи графіку.
Але — навіть легка абстракція на фоні може перетворити суворий дизайн на креативний, свіжий і захопливий. Такий ефект не варто вставляти на кожну сторінку. Але ось обкладинка головної, сторінка контактів або “Про нас” — ідеально. Тим паче, ефект дуплекса ще ніхто не відміняв.
Це не про тренди — а про стиль, естетику та варіативність. Так, у моді яскраві кольори — але ж вони не повинні бити по очах. Головне — як і де ти їх використовуєш. Те саме з художніми ефектами: в Photoshop величезна галерея фільтрів — залишилось тільки обрати свій.