Переваги використання Fireworks для дизайну інтерфейсів
Більшість дизайнерів, які працюють над сайтами або мобільними програмами, звикли користуватися програмою Adobe Photoshop. Однак за певними параметрами Adobe Fireworks має низку переваг перед традиційним Photoshop.
1. Робота з об'єктами
1.1 Виділення
При наведенні на об'єкт навколо нього виникає червоний прямокутник (або вершини прямокутника, якщо це група), що повідомляє про те, що його можна вибрати. Вибраний об'єкт підсвічується синім. За моїми відчуттями, вибір та переміщення об'єктів у Fireworks здійснюється простіше та швидше, ніж у Photoshop, де подібний функціонал відсутній.
1.2 Групи: швидка робота з об'єктами
Робота в Fireworks багато в чому заснована на угрупованні та розгрупуванні об'єктів. Це дозволяє верстати макети набагато швидше, ніж у Photoshop, де швидка робота з групами неможлива. Там угруповання елементів веде до створення папки, а щоб пізніше вибрати папку, потрібно звертатися до панелі шарів. Fireworks не має проблем зі швидким вибором як цілої групи, так і її складових без використання панелі шарів.
Принцип роботи в програмі можна описати як "що бачу на робочому просторі, з тим і працюю" (за аналогією з концепцією WYSIWYG) - це дозволяє не відволікатися і працювати швидше. Кропітке привласнення назв кожному шару і кожній папці (наприклад, «header», «footer» тощо) зовсім не потрібне — простіше зобразити всі стани інтерфейсу і пояснити їх прямо на макеті, виглядатиме наочніше.
Сполучення клавіш:угруповання — ⌘+G, розгрупування — ⇧+⌘+G.Меню:угруповання/розгрупування - Modify → Group/Ungroup.
1.3 Простота використання шарів
Цей пункт безпосередньо пов'язаний із попереднім:відсутність папок у робочих файлах дозволяє переміщати шари по ієрархії документа нічим не обмежуючись і нічого не ускладнюючи (проте, функціонал папок передбачено). Маніпуляції з об'єктами зазвичай обмежуються елементарним рухом вище або нижче в ієрархії верств. Повторюся, що панелі шарів приділяється мінімальна увага. У цьому плані Fireworks схожий на Illustrator.
Сполучення клавіш:переміщення вище/нижче — ⌘+↑/↓, нагору/вниз усіх шарів — ⇧+⌘+↑/↓.Меню:переміщення вище/нижче тощо — Modify → Arrange → Bring Forward/Bring Backward і т.п.
1.4 Вирівнювання елементів
Інтерфейс вирівнювання розташовується на панелі Align. Крім вирівнювання елементів відносно один одного, наявного у Photoshop, передбачено вирівнювання елементів щодо всього полотна. Дуже зручно під час роботи з макетами з відцентрованою версткою.
1.5 Виділення «позаду» об'єкта
Виділення «позаду» об'єкта
Інструмент для виділення «позаду» об'єкта називається Select Behind Tool, він захований у меню інструмента Pointer Tool. Він дозволяє виділяти об'єкти, заховані під об'єктом, що їх перекриває, без зміщення останнього в бік або відключення його видимості. Причому можна здійснювати вибір будь-якого з безлічі об'єктів, складених у стопку. Для цього необхідно кілька разів натиснути на розташований зверху об'єкт і вибрати відповідний за списком — від верхнього до нижнього.
Сполучення клавіш:вибрати інструмент Select Behind Tool - V або 0 (при необхідності натиснути два і більше разів).
1.6 "Розумні" напрямні (Smart Guides)
При переміщенні об'єкта виникають пунктирні напрямні, що показують у якому положенні цей елемент вирівнюється зінші об'єкти на полотні. Можна увімкнути/вимкнути «прилипання» об'єкта до напрямних.
Поєднання клавіш:показати Smart Guides — ⌘+\, прилипання до Smart Guides — ⇧+⌘+\.Меню:показати Smart Guides: View → Smart Guides → Show Smart Guides, прилипання до Smart Guides: View → Smart Guides → Snap to Smart Guides.
1.7 Розподіл
Розподіл об'єктів на однаковій відстані
Панель Align (див. пункт 1.4) містить блок Space, що дозволяє розподіляти об'єкти на рівній відстані як горизонтальному, так і вертикальному напрямку.
2.1 Копіювання стилів
Копіювання стилів з одного об'єкта на інший
Стиль об'єкта може бути багато складових (або атрибутів, attributes), наприклад колір заливки, обведення, гарнітура, кегль і т. п. Копіювання одного стилю з одного об'єкта на інший робиться дуже швидко: вибираємо вихідний об'єкт, натискаємо ⌘+C. Потім вибираємо цільовий об'єкт і натискаємо ⇧+⌥+⌘+V.
Сполучення клавіш:скопіювати стиль — ⌘+C, вставити стиль — ⇧+⌥+⌘+V.Меню:скопіювати стиль - Edit → Copy, вставити стиль - Edit → Paste Attributes.
2.2 Паттерни
Вибір заливки патерном у панелі Properties
Fireworks об'єкту можна призначити заливку у вигляді патерна, яким може стати будь-яке зображення. При цьому об'єкт можна легко трансформувати без порушення малюнка патерна, якщо маніпулювати вузловими точками контуру об'єкта.
Налаштування параметрів лінії на панелі Properties
Лінії, створені векторним інструментом Line Tool (клавіша N), можна кастомізувати (налаштовувати). Іноді потрібно зобразити підкреслене посилання. Для цього на панелі Properties необхідно натиснути на кнопку EditStroke у графі Dash змінити значення на Single Dash. Довжину штрихів та проміжків між ними можна налаштувати там же.
2.4 Градієнти
Робота з градієнтами Fireworks побудована простіше і зручніше, ніж у Photoshop. Є дві вузлові точки: кругла позначає початок градієнта, квадратна його кінець. Остання також визначає довжину градієнта. Ніяких кількох спливаючих вікон, як у Photoshop (одна з жахливих характеристик програми).
2.5 Закруглені кути
Налаштування округлених кутів у панелі Properties
Створивши прямокутник за допомогою інструмента Rectangle Tool (клавіша U), вибираємо в панелі Properties у полі Roundness необхідне значення, а також одиницю виміру закругленості кутів. Отриманий прямокутник можна трансформувати, маніпулюючи його вершинами, при цьому кути, що округляються, будуть зберігатися.
Символи є об'єктами, які можна копіювати багаторазово, зберігаючи деякі властивості та змінюючи інші. Наприклад, можна створити символ кнопки з можливістю розтягування її по ширині та можливістю зміни тексту на ній. Змінивши колір однієї кнопки, ви зміните його у всіх інших копіях символу кнопки.
Складні символи називаються component symbols. У них можна налаштовувати безліч параметрів, використовуючи панель Symbol Properties. Наприклад, у випадку із символом кнопки – це колір заливки, шрифт, колір тексту тощо.
Особлива властивість символу - можливість масштабування зі збереженням усіх його граней (9-slice scaling). Його бажано створювати та налаштовувати на етапі створення символу.
Робота з масками у Fireworks здійснюється швидко та зрозуміло. Найпростіший спосіб: Розташовуємо поверх шару векторний об'єкт, який буде маскою. Виділяємо обидва об'єкти,клацаємо правою кнопкою миші та вибираємо Group As Mask.
5. Прив'язка до пікселів
Вирівнювання об'єкта по піксельній сітці
Fireworks орієнтований створення екранної графіки. Векторні об'єкти створюються з прив'язкою до пікселів. Якщо ж, внаслідок маніпуляцій з об'єктом чи імпорту графіки ззовні прив'язка порушується, її можна відновити, натиснувши поєднання клавіш ⌘+K.
На жаль, у програмі є баг: іноді при повторному відкритті файлів, можна виявити, що у векторних об'єктах, не переведених у криві (paths), прив'язка до пікселів збивається, і грані об'єктів стають нечіткими. Тому рекомендується якнайчастіше переводити в криві векторні об'єкти типу прямокутників.
Сполучення клавіш:вирівняти за піксельною сіткою - ⌘+K.Меню:вирівняти за піксельною сіткою - Modify → Snap To Pixel.
6. Вихідні файли
Робочі файли програми Fireworks зберігаються з роздільною здатністю png. Їх переваги полягають у тому, що ці файли:
7. Імпорт з Adobe Photoshop/Adobe Illustrator
У Fireworks відкриваються файли у форматі psd, проте з деякими обмеженнями та багами. На жаль, цей механізм не було опрацьовано компанією Adobe до кінця.
Векторну графіку можна імпортувати з Illustrator. Зокрема, зручно користуватися стандартним Copy→Paste. Точність відображення графіки при цьому зберігається (для досягнення найбільшої точності я рекомендую в Illustrator виконувати над об'єктами операцію expand, доводячи їх до максимально простих контурів).
8. Експорт параметрів у CSS
Панель CSS Properties
Зручною характеристикою програми створення веб-сайтів є експорт властивостей об'єктів у CSS. До них можуть належатиколір (це може бути градієнт), тіні, шрифт тощо — все, що може бути описано властивостями CSS. Для цієї операції використовується панель CSS Properties.
Сполучення клавіш:викликати панель CSS Properties — Fn+⌘+F7.Меню:викликати панель CSS Properties — Window → CSS Properties.
9. Прототипи
Висновок
На сьогоднішній день Fireworks входить до складу Adobe Creative Cloud, хоча, на превеликий жаль, компанія Adobe відмовилася від подальшого розвитку цього гідного продукту (ніж адепти Fireworks в усьому світі були невимовно засмучені), пообіцявши створити адекватні аналоги, яких, однак, ми не бачимо до сих пір.