Робимо сайт не виходячи з imageready 2

Робимо сайт не виходячи з ImageReady 2.0

div.main Робимо сайт не виходячи з ImageReady 2.0

Поглянувши на назву огляду, багато, напевно, подумали - ну ось, АСЕ знайшов черговий WYSIWYG-інструмент для створення сайтів, буде нам його нахвалювати на всі лади. Однак це не так. Ті, хто вже знайомий з Adobe ImageReady, знають, що цей пакет призначений для іншого. До виходу нової версії пакет позиціонувався як якийсь придаток до PhotoShop з дуже обмеженою кількістю функцій дає змогу отримувати зображення для Web. Відразу зазначу, що попередня версія використовувалася мною тільки для створення анімованих GIF зображень, ні на що інше вона, на жаль, не годилася.

Тепер ImageReady став по-справжньому потужним інструментом для Web.

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

Що ж так зачарувало вашого покірного слугу в цьому пакеті? А ось що:

1. Набір нових інструментів, який перейшов від PhotoShop (в старій версії таких можливостей і близько не було)

Тепер прямо в ImageReady можна створювати зображення практично так само, як і в PhotoShop, причому робота деяких інструментів навіть більш просунута, ніж в PhotoShop. Приклад - інструмент Type Tool. Тепер робота з ним більше нагадує роботу з текстом у векторному пакеті.

2. Зверніть увагу на два самих верхніх нові інструменти в палітрі - ці інструменти призначені для нарізування зображення на шматки. Розглянемо як це робиться в ImageReady. Перший інструмент призначений власне для нарізування. Просто простягаємо прямокутне виділення і отримуємо один з "шматків" (slices). Кілька рухів цим інструментом і ваше вихідне зображення порізано на акуратні шматочки.

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

У зв'язку з введенням такого цікавого інструменту з'явилося і нове меню, можливості якого ви бачите на зображенні.

Ну порізали ми зображення, і що? Яке диво - те ж саме і в SmartSaver можна робити. Родзинка в іншому.
По-перше, ви самі можете задати кожному з шматочків свій алгоритм оптимізації (GIF, JPG, PNG з різними параметрами). По-друге, заздалегідь назвати шматочок зрозумілим ім'ям, під яким потім він і буде збережений (а не як в SmartSaver - tra_la-La2x1.gif). По-третє, можна вказати чи буде поточний шматок взагалі картинкою, або може бути це буде пусте місце (під текст, наприклад). По-четверте, ви можете відразу створити ефект rollover (перекочування картинок при наведенні мишки), причому створення цього ефекту робиться дуже просто і інтуїтивно зрозуміло.

3. Поява нових можливостей для створення анімованих GIF-файлів. Як я вже говорив, моє знайомство з першою версією почалося саме з створення подібних файлів. У новій версії ця можливість не була забута, навпаки вона була розширена і примножити. По-перше тепер можна анімувати не тільки прозорість і положення об'єкта, а й зміни в "ефекти"

По-друге, були додані засоби оптимізації анімації (хоча при збереженні ImageReady це теж робить).

А створення самих анімацій залишилося все таким же простим і зручним. Ось, наприклад, як робиться в ImageReady нескладна анімація.

створюємо вихідне зображення (в моєму випадку це коло в лівому верхньому кутку зображення) елаем кілька ключових кадрів (створюється новий кадр і робиться переміщення об'єкта)

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

Просто, легко, зручно і зі смаком Ж8-)

4. Невеликі зміни і поліпшення.

Перш за все була змінена палітра Layers. Тепер вона виглядає так:

Бачите, як показуються ефекти? Дуже нагадує After Effects, чи не так? Крім того, були додані нові ефекти: Color Fill і Gradient / Pattern. Ще змінений принцип history. Якщо раніше при натисканні пункту "скасування" (або комбінації Ctrl + Z) ви просто скасовували - не скасовували останню дію, то тепер натискаючи раз по раз цей пункт ви будете скасовувати все нові і нові дії, які ви зробили з картинок. Як і в PhotoShop в ImageReady додалися нові засоби для роботи з текстом (режими згладжування та ін.) З'явилася нова можливість збереження в форматі GIF - із застосуванням розробки Adobe - Lossy GIF Додалася нова панель - styles (дуже нагадує подібний витвір в ImageStyler)

Загальний висновок - ImageReady увібрала в себе все краще від своєї старої версії і додала деякі корисні можливості від ImageStyler і PhotoShop. Мені здається, що у цього пакета попереду ще багато перемог. До речі завдяки його появі, слідом за SmartSaver в мою "кошик" полетів і GIF Animator. Ось так.

Схожі статті