Що ж таке Fireworks?, HTML, XML, DHTML, Інтернет-технології, статті

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


Коли я завантажив на диск свого ПК цю “солодку парочку” програм компанії Macromedia (Fireworks і Dreamweaver), То тоді ще не зовсім розумів їх прекрасні можливості працювати разом. В умілих руках це дійсно найпотужніших інструмент для розробки та підтримки веб сайтів …


Справа в тому, що я звичайний “юзер”, як люблять презирливо писати про нас, представників багатомільйонної армії простих користувачів інтернету “акули” програмування або сайтобудівництва. “Академією” з програмування я не закінчував, хто такі “теги” дізнався випадково і взагалі навіть HTML розшифрувати не міг без словника!


І тут Fireworks! Спочатку я прийняв його, як просто графічний редактор в якому можна зробити швидко і якісно небудь графічний файл (або простіше кажучи – картинку) для свого нехитрого сайту на Narod.Ru… За недосвідченість я спочатку робив картинки в Fireworks, Потім відкривав Dreamweaver і починав копітку роботу з таблицями, вставляючи в них ці самі картинки.


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


Виявилося прямо в Fireworks можна відкрити файл на всю широту майбутнього сайту (зазвичай це не більше 760 пікселів) намалювати все графічне оформлення, потім розрізати його інструментом Slice Tool приблизно так, як і повинна виглядати майбутня таблиця HTML документа. Відразу ж можна починати доопрацювання окремих графічних елементів (логотип, меню і тд …), у тому числі створювати активну графіком реагують на курсор навіть зовсім не знаючи мови програмування (JavaScript).


Закінчивши роботу з графікою, потрібно просто клацнути по Edit > Copy HTML Code додатково вказати деякі елементи для майбутньої таблиці в вікні, що розкрилося, потім відкриваємо Dreamweaver – Виконуємо Edit > Paste HTML і все те, що ви намалювали виявиться чудовим чином вставлено (правильно) в таблиці!


Тим самим працює в Fireworks звільняється від величезної чорнової роботи!


Причому за своїми можливостями при створенні веб графіки Fireworks напевно мало в чому поступається знаменитому Photoshop_у. Тут так само можна працювати використовуючи шари, ефекти, маски, змішування і тд …


І як мені здається мабуть пара позицій цієї програми навіть перевершує знаменитий Photoshop! Так, не дивуйтеся фанати Photoshop_а! Прямо в Fireworks можна створювати анімацію (не потрібно стрибати в Image Ready) І крім того можна дуже тонко оптимізувати графіку для веб – тобто максимально полегшити файл. Причому Fireworks відразу ж показує користувачеві скільки буде важити вироблений на світ файл … Хоча чесно сказати я сам звичайно іноді звертаюся по допомогу і до Photoshop, Так як ця програма теж має свої значні плюси …


Виходячи з цього я роблю висновок, що Macromedia Fireworks це не просто рядовий графічний редактор, а універсальна програма для створення веб графіки і відповідає всім вимогам для цього!



















Інструменти (Tools) і властивості (Properties)


Панель з інструментами ви завжди бачите зліва у вікні програми. Можна правда при бажанні і перетягнути її в потрібне вам місце. Інструменти
розділені на групи – Select, Bitmap, Vector, Web, Color, View.
Кожна група призначена для конкретної мети: виділення об’єкта,
робота з растровим об’єктом (зазвичай фото), робота з векторними зображеннями, підготовка файла для веб (нарізка або hotspot), робота з
кольором, різні види файлу.
Де на значку інструмента є ось такий чорний трикутник в кутку, як наприклад на Ellips Toll значити під ним, щось ще приховано. Потрібно навести покажчик миші на значок і притиснути, відкриється вікно з набором цих прихованих інструментів, як ви бачите на зображенні вгорі зліва.
Напевно не варто зупинятися і докладно розповідати про кожен інструмент, тут варто самому поклацати і спробувати, як все працює. Думаю, що буде краще, якщо ми звернемо більше уваги на панель, яка завжди висить внизу і називається – Properties inspector (Інспектор властивостей).
Вона безпосередньо пов’язана, як з інструментами, якими ви працюєте, так і з редагований об’єктом. Подивіться, яка вона красива 🙂


Звідси можна налаштувати створюваний вами об’єкт практично по всіх параметрах …
Там де намальовано відро з виливається фарбою можна вказати заливку об’єкта. Клацніть по чорному трикутнику і відкриється список з заливками: Solid – Суцільна, Linear – Лінійна, Cone – Конічна … Перераховувати все не буду, вам слід подивитися особисто, так буде наочніше!
Намальований олівець означає обведення або ж, якщо точно перекласти з англійської штрих (Stroke) Навколо об’єкта. Так само клацнувши по маленькому трикутнику можна відкрити список з різними варіантами обведення: 1-Pixel Soft (1 м’який піксель), 1-Pixel Hard (1 твердий піксел) і тд … Якщо ж ви бачите ось такий перекреслений червоним смугою знак Значить обведення відключена, клацніть по чорному трикутнику і оберіть потрібне вам значення … Таким чином можна відключити і заливку об’єкта. Крім цього, як в заливці (Fill), Так і в штриху (Stroke) Можна вказати текстуру: Grain (Земля), Sand (Пісок) і тд …
Ну і в самій правом частини інспектора можна надати об’єкту ефекти або ж прозорість (Opacity). За замовчуванням прозорість завжди відключений, тобто об’єкт абсолютно не прозорий на всі 100%. І якщо зменшувати це значення, то обьекту надається прозорість …

І коротко про ефектах. Думаю, що найбільш часто вживані ефекти це – Bevel and Emboss (Скошування і витискування) і Shadow and Glow (Тінь і сяйво). Ці ефекти, часто використовують, коли роблять кнопки навігаційної панелі …


Тлумачний словник англійських термінів у Fireworks
































Layer – Шар. В Fireworks можна працювати використовуючи верстви … Їх застосування виправдане тим, що розташований на окремому шарі обьект можна спокійно редагувати не зачіпаючи при цьому об’єкти розташовані в інших шарах …

Web Layer – Веб шар. Цей спеціальний шар розташований у верхній частині панелі шарів. Він містить у собі всі веб об’єкти після їх нарізки, які Ви створюєте в процесі роботи в Fireworks. Веб шар можна переміщати в панелі шарів, але видалити неможливо …

Frame – Кадр. В основному застосовуються при створенні анімації. Кілька кадрів проскакуючи за встановлений час створюють ефект рух об’єкта … Кожен кадр може складатися з декількох шарів.

Nested Table – Це таблиця включає в себе невидимі однопіксельні елементи (GIF файли). Ці корисні невидимки утримує завжди таблицю в заданих розмірах по висоті і ширині. Тому вона завжди правильно відображається у всіх броузерах! Програма дає ім’я цьому невидимому файлу – Spacer (розпірка). Групи невидимих ​​розпірок розташовуються з одного боку таблиці по широті і відповідно з однією з сторін по висоті … Вважається, що така таблиця трохи повільніше “вантажиться”, але особисто я думаю, що “гра варта свічок” і краще мати правильно відображається таблицю, ніж “кота в мішку”!
Single Table – Просто таблиця без будь-яких розпірок! Ця таблиця іноді неправильно відображається в різних броузерах або моніторах з різним дозволом …
Всі ці спец. терміни для таблиць потрібно знати, коли копіюєш HTML код для вставки його в Dreamweaver.

Kerning – Відстань між словами тексту. Застосовується в редакторі тексту, за замовчуванням завжди встановлено 0% і якщо збільшити це значення, то і відстань збільшується …

Оnion skin – Цибульна шкірка. Це напівпрозоре зображення об’єкта застосовується при виготовленні анімації. “Шкірка” дає можливість оглядати щодо поточного, попередній і следущий кадр, що допомагає ефективніше спланувати анімацію …

Behaviors – Поведінки. Це коли в броузері наводиш курсор на який-небудь графічний об’єкт і він якось на це реагує. Поведінки застосовується в основному при виготовленні навігації … Практично реалізується за допомогою мови програмування JavaScript.

Symbol – Символ. Перетворити в символ можна будь-який створений вами об’єкт і це дає безліч переваг в Fireworks … З символом значно прискорюється процес редагування і створення анімації … Символи зберігаються в бібліотеці …

Tweening – Побудова проміжних зображень між парою Одинокова символів. Практично твіннінг застосовується і скажу, що дуже ефективно, коли робиш анімацію. При цьому можна автоматично розмістити знову створені об’єкти по кадрам (Frames).

Blending – Змішування, накладення. Якщо коротко сказати, то це приблизно так – зважене накладення змішуються квітів один на одного. Дуже корисна “штучка”, коли працюєш над доданням сайту єдиного стилю або ж треба органічно вписати фото в фоновий колір сторінки … За замовчуванням завжди встановлено – Normal, тобто накладення не вказано. Нижче дивіться список накладень.
Normal – Нормальне.
Multiply – Множення.
Screen – Екран.
Darken – Затемнення.
Lighten – Освітлення.
Difference – Неправильне.
Hue – Колірні відтінки.
Saturation – Насичене.
Color – Кольорове.
Luminosity – Світіння.
Invert – Навпаки.
Tint – Забарвлення.
Erase – Прати.


Dither – Плавний перехід між двома кольорами. Чим більше це значення, тим більше об’єм файлу! Рекомендується застосовувати при експорті картинок з градієнтами, накладеннями або ж, коли раптом знадобилося фото експортувати у форматі GIF.

Slicing – Нарізка. Нарізку зазвичай роблять Slice tool, ріже цей інструмент прямокутниками. Ну, а можливістю нарізати багатокутні фігури володіє Polygon Slice tool. Дуже багато чого прив’язане в Fireworks цього самої зрізку. Зрізану частину можна експортувати або задати їй поведінку …

Transparent – Прозорість. Додати прозорість або ж взагалі відкрити новий документ з прозорим фоном можна тільки використовуючи формати PNG і GIF. У самій програмі Fireworks під час роботи прозорість, що б її бачити 🙂 позначена сіро-білим квадратами. Крім цього усунути непотрібний колір, тобто зробити його прозорим можна або ж в панелі оптимізації, або під час експорту у вікні Export Preview …

Opacity – Напівпрозорість, розмитість. Opacity is the degree of transparency to which the blending mode is applied. Так разьясняется Opacity по-англійськи, ну а якщо все це розтлумачити по-російськи, то приблизно буде так – Opacity це щаблі (кроки) до прозорості … За замовчуванням обьекту редакції завжди задана 100% Opacity, тобто він абсолютно не прозорий і зменшуючи це значени ви як-би розмиває обьект! Він зникає, як ранковий туман під променями сонця …
Mask – Маска. Побудувати маску можна в групі з двох одночасно виділених об’єктів. При цьому верхній об’єкт (маска) буде використаний для зміни нижнього об’єкта …
Роблять маску зазвичай так, це коли на повноцінне зображення (зазвичай фото) зверху накладається простий геометричний об’єкт (овал, прямокутник або що там ви ще зобразите) залитий білим кольором. В І тут просто окреслюється площа верхнього об’єкта. Все, що залишається за його межами стає прозорим, а внутрішня частина залишається видимої! Якщо ж застосувати чорно-білу градієнтну заливку в геометричній фігурі, то чорні кольори зберігають ніжележашее зображення, а білі роблять його прозорим …
 

Схожі статті:


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

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*