1. Стилі фотографій в веб-дизайні
2. Вінтаж / Ретро
3. Використання Photoshop для вантажу / ретро стилю
4. приглушення кольоровості
5. Приглушення кольоровості в Photoshop
6. монохромний ефект
7. Монохромний стиль в Photoshop
8. Завершуючи розповідь

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

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

Стилі фотографій в веб-дизайні

Існує багато фотоефектів, але є один момент. Особливо помітний він (момент тобто), коли дивишся фотографії на сайті і всі вони здаються трохи схожими або зовсім трохи різними. Насправді, найбільш популярних ефектів мало, а ось їх різновидів дуже багато. Наприклад: Фотостіль Вінтаж / Ретро можна використовувати по-різному. Ефект Вінтаж створюється з переважанням як зеленуватого відтінку, так і блакитного, коричневого та ін. Аналогічна ситуація складається і з монохромним ефектом і з ефектом приглушення кольорів.

Ми розглянемо найпопулярніші стилі фотографій, де їх використовують веб-дизайнери світу, як швидко і просто створити їх Photoshop і де знайти зручні Actions.

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

Вінтаж / Ретро

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

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

В даному стилі зазвичай переважають фіолетові кольори, сині, червоні, жовті й зелені. При цьому, в цілому, вся гама фотографії приглушується, що і прийде їй вид старовини, легкої істёртості від часу. Відмінними прикладами використання таких фотографій є проекти: Lobagola , Lunet Eyewear , South Tree , Life in Greenville , Пауліна Осмонт

Використання Photoshop для вантажу / ретро стилю

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

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

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

Додаємо ще один шар, що коректує «Градієнт». Стиль Лінійний, кут задаємо (зазвичай старі фотографії завжди під кутом втрачають свою кольоровість) і вибираємо перехід кольору для Градієнта від темного до середнього відтінку. Який саме колір вибирати визначить стиль дизайну сайту.

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

Якщо вирішили що це все, то немає. Додаємо ще один шар з Градієнтом, але тепер кольору вибираємо Зелено-сині, а кут його робимо протилежним. Режим накладення для цього шару - «Заміна світлим» і також знижуємо прозорість в більшого значення.

Щоб довести ретро стиль фотографії «до розуму», додамо ще один шар «Вибірковою корекції кольору» і знизимо показник Жовтого кольору, Зеленого (в Photoshop він вважається Cyan в схемі CMYK), Синього (Блакитний + Жовтий).

Зрозуміло, що граючи з квітами і відтінками можна добитися абсолютно різних результатів. Але принцип все одно буде один при створенні ретро-вантажних ефектів. Можна ще накласти текстуру старого паперу, стертої від часу. Потім трохи відкоригувати рівні, зробивши акцент на помятости і тріщинах.

Готові Операції (Action) можна завантажити з Deviantart. Їх тут ціле море і ось приклад 1 , приклад 2 , приклад 3 .

приглушення кольоровості

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

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

Фотографії з приглушеними кольорами відмінний варіант в тих випадках, коли використовувати фото на сайті потрібно, але немає бажання і цілі розміщувати їх в кольоровому оригінальному вигляді. Якщо ж дизайн сайту створюється в світлих або пастельних тонах, то ефект спотворення теж підійде, як не можна до речі. Що ж стосується тематики, то це сайти моди і дизайну, спорту і культури, будівництва та зовсім інших тематик. наприклад: putzengel , Young and Hungry , My 356 Days in Print , POC

Приглушення кольоровості в Photoshop

Відкриваємо фотографію і додаємо новий коригувальний шар «Криві». Змінюємо криву RGB так, як на нашому скріншоті, щоб фотографія стала трохи яскравіше і найбільш різкі кольори зникли.

Тепер потрібен коригувальний шар «Яскравість / Контрастність» і прибираємо контраст бегунком, переводячи його в крайнє ліве положення (-50).

Знову створюємо коригувальний шар «Криві» і на червоному і синьому каналі міняємо положення обох діагоналей, трохи зовсім. Тобто, якщо вони у нас на 45 градусів, ми їх встановлюємо градусів на 40. Суть в тому, а залежить це, здебільшого, від вашої фотографії, щоб знизити кількість червоного і синього кольору, їх інтенсивність. Рухаючи точки кривої, ви це і самі побачите на власні очі. Можна знизити і Зеленого кольору теж. Фантазуйте ...

Після цього потрібно додати новий шар «Колір», залити його темно-блакитним і встановити режим накладення «Екран» з прозорістю в 60%.

І ось порівняння «до» і «після».

В цілому ж, заливка шару може бути і будь-яким іншим кольором, все залежить від вашої палітри кольорів, що використовується в конкретному проекті веб-дизайну. Набір варіантів на Deviantart .

монохромний ефект

Монохромний ефект стає популярним тільки в останні роки; раніше його використовували трохи рідше. Справа в тому, що стиль підходить не тільки для оформлення фотографій, але і сайтів в цілому. Саме поняття «монохромного» ефекту плутають з чорно-білим варіантом. Це не вірно. Використовуючи монохромність, ви просто переводите зображення в одні якийсь колір, але не видаляєте всі наявні кольору.

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

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

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

Використовують монохромний стиль для сайтів університетів, мистецтв, ілюстрацій, бізнесу та інших тематик, в інтернет-магазинах. Особливо відмінно поєднується ефект з сучасними трендами плоского дизайну. наприклад: Baesman , Building careers , Holm Marcher , La Pierre Qui Tourne

На Deviantart це набір з 50 ефектів .

Монохромний стиль в Photoshop

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

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

Додаємо шар «Карта градієнта», і візьмемо ... припустимо ... від бордового до алому. Тобто, ще раз зауважимо, в межах одного кольору, але різні відтінки. Потім даного шару вибираємо режим накладення «Множення». В цілому, картинка готова, але дуже яскрава, важка для сприйняття і занадто виділяється.

Додамо новий шар «Рівні» і зрушимо бігунки зліва направо так, щоб зображення стало світліше в цілому.

Змінимо освітлення фотографії шляхом додавання шару «Градієнт» з сіро-білими відтінками і кутом -90. Режим накладення «Перекриття» і непрозорість близько 48-50%. Ви побачите, що з'являться ще деталі і освітлення буде падати зверху.

Тепер створюємо коригувальний шар «Колір» і заливаємо його білим. Режим накладення «Тон», прозорість близько 10%.

І ось, що вийшло з оригіналу. Приклад хороший тим, що листочки фіалки дуже чорні. Потрібно зробити їх світліше, і саме зараз добре буде видно зміна. Перейдіть на перший шар, що коректує «Чорно-біле» і бігунок Зеленого кольору трохи посуньте вправо. Ви помітите, як деталі листочків почнуть проявлятися.

Таким чином, можна відрегулювати кольоровість фотографії та налаштувати оптимальний варіант.

Завершуючи розповідь

Хоча ми розповіли всього про три фотоефекту, краще експериментувати з різними варіантами і можливостями Photoshop. Зрозуміло, що ми не стали акцентувати увагу на чорно-білих стилях і збільшенні контрастності. Вони мають не меншу популярність, а й створювати їх набагато простіше. Тим більше, що один з наших матеріалів вже присвячений ефекту «Дуплекс» .

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

І головне, не варто строго у всіх шарів, що коректують залишати непрозорість в 100%. Знижуйте її і отримуйте чудові ефекти.