1. Photoshop в веб-дизайні
2. Illustrator в веб-дизайні
3. InDesign в веб-дизайні
4. глибокий аналіз
5. Adobe Experience Design
6. Так що вибирати

Веб-дизайн багатогранний і включає в себе не тільки роботу над макетом за принципом «що де буде розташовуватися», а й створення необхідних зображень, обробку фотографій, різних елементів призначеного для користувача інтерфейсу, іконок, кліпартів, продумування типографіки і поєднання шрифтів і багато-багато іншого . Оскільки веб-дизайнери створюють візуальний макет, то використання Photoshop більш ніж зручно і зрозуміло. Але між тим, різні майстри в світі намагаються користуватися величезним набором додатків компанії Adobe і при створенні одного тільки макета задіють і Illustrator, і Fireworks, і InDesign, навіть новітній Experience Design (XD).

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

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

Photoshop в веб-дизайні

Спочатку додаток було створено для редагування і ретушування растрових зображень і роботі з фотографіями. Через 25 років додаток дозволяє створювати і редагувати 3D-об'єкти, працювати з освітленням в зображеннях, кольоровістю, шарами, створювати анімацію та інше.

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

Illustrator в веб-дизайні

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

Але якщо розглядати Illustrator з точки зору веб-дизайну і макета сайту, то він не підходить як такої. Як мінімум, відкоригувати фотографію ви не зможете і зі шрифтами «погратися» теж. Що вже говорити про розмітку і верстці, анімації. Втім, останнє оновлення Illustrator CC (2017.1) від 5 квітня 2017 року дозволяє обрізати растрове зображення без сторонніх програм. В результаті, обрізані частини не зберігаються, а розмір загального файлу зменшується. Проте, повноцінно працювати з зображеннями в Ілюстраторі все ж неможливо, але деякі веб-майстри примудряються створювати макети сайтів в форматі AI і відсилати їх замовникам.

InDesign в веб-дизайні

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

Додаток має готовими модульними сітками, є панелька для перегляду готових сторінок, навіть, наприклад, можна створити шаблон footer і закріпити його один раз на всі сторінки. Можна навіть редагувати AI і PSD. Але для роботи Landing Page, з промо-станицями все одно буде потрібно Photoshop. Якщо ж ваш сайт призначається для великої кількості тексту або замовник замовив макет безлічі сторінок (более3-4) і готовий їх побачити навіть в PDF форматі, то створити його в InDesign реально і зручно.

глибокий аналіз

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

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

Але ось у чому проблема. InDesign створює макети сторінки на основі готових і наявних у нього шаблонів. Навіть зверстати їх може і згенерувати CSS і HTML. АЛЕ! Цей код не буде оптимізований для різних браузерів. Як то кажуть: «код буде брудним». Очищення його перетворитися в складну рутину, яка у веб-розробника відніме колосальну кількість часу, а автоматичний варіант не впорається і зовсім. Саме тому Photoshop має більшу перевагу, навіть не дивлячись на те, що творчий процес займає більшу кількість часу. InDesign підійде тільки тоді, коли замовнику потрібен макет великого сайту з декількома сторінками, різними за змістом і з великою кількістю тексту.

Чому не підійде Photoshop? Тому що доведеться створювати окремі PSD для кожної сторінки і промальовувати окремо (InDesign є шаблони), а налаштувати між ними (сторінками) зв'язок і активні посилання не вийде. Більш того, створити всі сторінки в одному PSD теж не варіант - розмір файлу буде великим і потім вже верстальщикам буде незручно розбиратися, що і де. Саме тому при роботі над великими сторінками, над Landing Page - Photoshop краще, що може бути.

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

Існує і такий додаток у Adobe, як Fireworks. Точніше існував, але про це трохи пізніше. Завдання програми - обробка растрових і векторних зображень для сайтів. Особливість в тому, що в ньому зручно робити елементи призначеного для користувача інтерфейсу. Навіть є можливість перевірити їх працездатність, додати анімацію та інше. У Photoshop це робити копітка. Тому багато відомих веб-майстри мають це додаток теж на комп'ютері і поєднують в створенні макета сайтів і PS, і Fw. Плюсом є те, що об'єкти, створені в Fw можна переводити в CSS і HTML і потім вже вставляти безпосередньо на сторінки сайту. Та й код створюється чистим.

Adobe Experience Design

Але зараз програма більше не підтримується, і на зміну їй вже приходить Adobe Experience Design або XD. доступна вона в бета-версії для Windows і Mac безкоштовно на офіційному сайті . Що це за звір? Adobe XD створюється для макетів інтерфейсів мобільних додатків, сайтів. Тобто, якщо InDesign створений все ж для поліграфії та друкованої продукції, а можливість створення документів для Web як бонус, то Adobe XD створюється, навпаки, для розробки «цифрової продукції», мобільних інтерфейсів, десктопних. Існує сумісність з Illustrator, Photoshop, можна створювати кнопочки, макети, елементи, працювати з посиланнями, переходами, анімацією, відео. І ще багато всього. Можна створювати макет і бачити його в дії.

Тим часом, деякі веб-дизайнери не прагнуть на нього переходити. Виглядає додаток аж надто «сирим» і багатьох можливостей, до яких люди вже звикли і в Fireworks, і в Photoshop просто немає. Так, шаблони і принципи створення макетів розроблялися Adobe за підтримки багатьох іменитих фахівців, але реалізовано все це ще не дуже успішно. При отриманні замовлення на створення дизайну сайту набагато швидше відкрити PS і намалювати в ньому, щось створити і перенести з Fw або AI. Часу витрачається набагато менше.

Так що вибирати

Отже, Adobe для веб-дизайнерів пропонує великий асортимент додатків, кожне з яких зручно по-своєму і виконує різні завдання. Але при цьому потрібно розуміти, що головне при створенні дизайну сайтів - зробити швидко і якісно. Відповідно, вибір падає на звичний і зручний Photoshop і Illustrator для роботи з вектором. Але не варто забувати і про Fireworks, навіть не дивлячись на те, що він не підтримується вже, їм продовжують користуватися у всьому світі. Свої безпосередні функції і завдання він виконує. А прагнути замінювати його на Adobe Experience Design теж питання спірне, бо до сих пір в версії для Mac функціоналу більше, ніж у версії для Windows.

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

Photoshop дійсно найзручніша програма для дизайну-сайту, InDesign підійде для макета, Illustrator - для векторних зображень, Fireworks / Adobe Experience Design - сукупне додаток для веб-дизайну, растрових і векторних зображень. Тут же відзначимо, що деякі веб-майстри взагалі намагаються в своїй роботі не використовувати Photoshop взагалі і все робити тільки в Fireworks, навіть в нинішній час. Або не користуються продуктами Adobe, але це ж внутрішньокорпоративні особливості. Так чи інакше, це окрема тема, тим більше що з кожним роком Photoshop продовжує поліпшуватися, а Fireworks переходить в формат XD.