Всім привіт, мене звуть Роман, в дизайні вже більше 5-ти років, на сьогоднішній день я працюю UI/UX Designer.

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

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

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

Adobe Photoshop

Adobe — це компанія, заснована в далекому 1982 році. Вона подарувала нам безліч графічних редакторів і корисних сервісів. Однин з найвідоміших це, звичайно ж, фотошоп.

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

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

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

Поділюся ще одним цікавим рішенням, яке подарував нам Photoshop.

У Photoshop можна зробити мокап — нанесення дизайну на існуючий носій. Це просто демонстрація того, як буде виглядати ваша робота в більш-менш реальних умовах. Ось наприклад, ви зробили круте оформлення упаковки для фруктового соку і хочете подивитися, як воно буде виглядати на самій упаковці. Викачуємо необхідний файл і наносимо наш дизайн, результат:

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

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

Недоліки

Мало не забув про них)

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

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

Підсумок

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

Adobe Illustrator

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

Для розуміння розберемося, що таке векторна графіка.

Існує 2 види графіки — векторна і растрова. Растрова графіка — це всілякі фотографії та картинки, завантажені з інтернету, растрова графіка зазвичай форматів .png і .jpeg. Растрова графіка складається з квадратиків, і ці квадратики заповнюються певним кольором. Саме тому якщо ми збільшуємо растрову фотографію, то бачимо, що на фотографії з'являються небажані сходинки.

Давайте на прикладі — у вас є фотоапарат з роздільною здатністю 800х600 пікселів, ви робите фото, на якому кожен з пікселів зберігає певний колір. Якщо математично — 800 помножити на 600 = 480 000. Тобто, в нашому кадрі 480 000 квадратиків, кожен з яких має свій колір.

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

Розглянемо на прикладі, щоб було зрозуміліше:

З першого погляду різниці між картинками немає, але це до того моменту поки ми не збільшимо дозвіл:

І тут вже очевидна різниця між растром і вектором.

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

Що радує — це місцевий функціонал, тут потужний набір інструментів з непередбачуваним результатом. І найчастіше результат — пушка, гонка, картонка!

Подивимося, що цікавого можна намалювати в Illustrator:

Недоліки

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

Підсумок

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

Figma

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

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

Але що ж це за прототипування таке?

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

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

Ось посилання на готовий прототип, щоб подивитися, як це працює: Radar for iOS.

Зображеннями складно передати, що тут можна зробити: