Базы данныхИнтернетКомпьютерыОперационные системыПрограммированиеСетиСвязьРазное
Поиск по сайту:
Подпишись на рассылку:

Назад в раздел

Делаем сайт не выходя из ImageReady 2.0

div.main {margin-left: 20pt; margin-right: 20pt} Делаем сайт не выходя из ImageReady 2.0

Как ни странно, новость на этой неделе было всего одна - подходит к концу конкурс на сайте CreativePro, про который я уже писал. Окончание конкурса и подведение итогов будет 30 сентября. Торопитесь - может, еще отхватите хотя бы прикольную кружку от CreativePro.

Взглянув на название обзора, многие, наверное, подумали - ну вот, АСЕ нашел очередной 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 (перекатывания картинок при наведении мышки), причем создание этого эффекта делается очень просто и интуитивно понятно.

После проделывания всех этих операций вам достаточно лишь нажать кнопку save optimized в меню File и получить готовую HTML страничку, со всеми необходимыми JavaScripts, с прозрачными "распорками" из картнки 1х1 (довольно известный прием). И все что вам останется сделать это слегка подкорректировать код. И все, основа дизайна сайта готова, можно добавлять туда контент. Лично меня эта возможность ImageReady просто потрясла. Особенно если учесть качество ее реализации.

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. Вот так.

С уважением, ACE.


  • Главная
  • Новости
  • Новинки
  • Скрипты
  • Форум
  • Ссылки
  • О сайте




  • Emanual.ru – это сайт, посвящённый всем значимым событиям в IT-индустрии: новейшие разработки, уникальные методы и горячие новости! Тонны информации, полезной как для обычных пользователей, так и для самых продвинутых программистов! Интересные обсуждения на актуальные темы и огромная аудитория, которая может быть интересна широкому кругу рекламодателей. У нас вы узнаете всё о компьютерах, базах данных, операционных системах, сетях, инфраструктурах, связях и программированию на популярных языках!
     Copyright © 2001-2024
    Реклама на сайте