Самоучитель по Adobe Photoshop 5.5


10Интерактив


GIFанимация
GIF-анимацияЗавершим эту главу примером создания несложного баннера, в котором использована GIF-анимация. Для создания анимационных изображений ImageReady предлагает особый инструмент — палитру A...
Автоматические фрагменты
Автоматические фрагментыВы определили фрагмент, который хотели бы иметь в виде отдельного изображения (и файла). Поскольку фрагменты могут иметь только прямоугольную форму, программа автоматически...
Рис 10 33 Изменнение размеров автоматических фрагментов
Рис 10.33. Изменнение размеров автоматических фрагментов ="Pic 14-34.jpg">Рис- 10.34. Появление дополнительного автоматического фрагмента...
Время демонстрации (тайминг)
Время демонстрации (тайминг)Для каждого кадра анимации вы можете задать произвольное время демонстрации. 1. Нажмите кнопку перехода к последнему кадру.2. Щелкните на маленькой треугольной стрелке...
Вторичные ролловеры
Вторичные ролловерыImageReady умеет создавать код JavaScript для т. н. вторичных ролловеров. Вторичными они являются потому, что их состояние в браузере определяется не положением курсора мыши, а...
Градиентные заливки
Градиентные заливкиОдин из главных сюрпризов для начинающего пользователя Image Ready состоит в том, что в программе нет инструмента Gradient, без которого пользователь Photoshop не мыслит свою ра...
Рис 10 15 ПалитраLayer Option/Effects
Рис 10.15. ПалитраLayer Option/Effects для эффектаGradient/Pattern5. Нашей целью является градиент из двух цветов с переходом от темно-синего к голубому. Отредактируем граничные цвета градиента. С...
Рис 10 16 Прямоугольник нарисован инструментом Rectangle
Рис 10.16. Прямоугольник нарисован инструментом Rectangle5. Добавьте к слою Stripe эффект Gradient, выбрав соответствующую команду в списке эффектов. Как вы помните, он открывается нажатием кнопки...
Рис 10 17 Диалоговое окно Layer Options в ImageReady
Рис 10.17. Диалоговое окно Layer Options в ImageReady...
Рис 10 18 Для придания градиенту
Рис 10.18. Для придания градиенту прозрачностииспользован режим наложения MultiplyКак видите, эффект Gradient в Image Ready далеко не обладает такой гибкостью, как одноименный инструмент в Photosh...
Интерактивные графические элементы для WWW
Интерактивные графические элементы для WWWХотя Photoshop 5.0, бесспорно, являлся одним из главных инструментов каждого профессионального Web-дизайнера, он не мог решить многие из повседневных зада...
Интерфейс ImageReady
Интерфейс ImageReadyПеред вами главное окно Image Ready (Рисунок 10.2). В первый момент его легко перепутать с Photoshop, настолько похожи они внешне: та же панель инструментов, знакомые палитры....
Рис 10 2 Главное окно ImageReady
Рис 10.2. Главное окно ImageReady...
Рис 10 3 Палитра инструментов
Рис 10.3. Палитра инструментов ImageReady. Обозначены только инструменты, отсутствующие в Photoshop...
Рис 10 4 Режимы отображения фрагментов
Рис 10.4. Режимы отображения фрагментов Hide Slices (a),Show Slices (б)ПримечаниеПримечаниеЕсли выбрать инструмент Slice или Select Slice режим показа фрагментов включается автоматически. Редактор...
Рис 10 5 Палитра Optimize
Рис 10.5. Палитра OptimizeВид оптимизированного изображения отображается прямо в окне каждого документа Image Ready и обязательно имеет четыре вкладки, аналогичных вкладкам модуля Save For Web (Ри...
Рис 10 6 Показ оптимизированного
Рис 10.6. Показ оптимизированного изображения в окне документа Image Ready § Color Table. Эта палитра Image Ready показывает текущую палитру изображения, если задан режим оптимизации в индексирова...
Рис 10 7 Отображение эффектов
Рис 10.7. Отображение эффектов в палитреLayers программы Image Ready...
Рис 14 8 Палитра Layer Options/Effectsв
Рис 14.8. Палитра Layer Options/Effectsв режимах LayerOptions (а) и Effects (б) § Styles. Набор эффектов, ассоциированный с текущим слоем, можно сохранить в специальной палитре Styles. Чтобы воспр...
Рис 10 9 Палитра Styles спредопределенными стилями
Рис 10.9. Палитра Styles спредопределенными стилями § Type. В Photoshop параметры текста, да и сам тест, вводятся в специальном диалоговом окне Type Tool. В Image Ready ввод и редактирование текст...
Рис 10 10 Палитра Type в ImageReady
Рис 10.10. Палитра Type в ImageReady § Animation. Палитра содержит перечень всех кадров анимации и управляет их очередностью и просмотром.§ Slice- Палитра предназначена для установки параметров от...
Карты ссылок
Карты ссылокИзображения на Web-страницах часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных с...
Рис 10 48 Ссылка на ресурс в палитреLayer
Рис 10.48. Ссылка на ресурс в палитреLayer Options/Effects и в палитре LayerКарта ссылок определена. Функция Preview in позволяет протестировать карту ссылок еще до экспорта HTML-кода и самого изо...
Обработка событий
Обработка событийЭлементы дизайна, о которых идет речь, изменяют свое состояние (внешний вид) в браузере в зависимости от нескольких возможных событий: § Отсутствие событий — обычное состояние (со...
Определение состояний
Определение состоянийИзображение подготовлено к созданию ролловеров. Теперь необходимо определить, в каких состояниях ролловеров что будет отображаться в браузере.1. В палитре Layers отключите вид...
Рис 10 52 Палитра Rollover
Рис 10.52. Палитра Rollover3. В списке фрагментов находятся шесть фрагментов, соответствующих будущим ролловерам. Как программа догадалась, какие из фрагментов будут ролловерами? Очень просто: в с...
Определение фрагментов
Определение фрагментов1. Откройте изображение Europe.psd и сохраните под именем Europe sliced, psd в вашей рабочей папке.2. Включите режим отображения Show Slices нажатием одноименной кнопки на па...
Рис 10 31 Рамка фрагмента
Рис 10.31. Рамка фрагмента 3. Выберите инструмент Slice на палитре инструментов. Работа с ним похожа на работу с инструментом Crop сначала вы строите рамку, а затем уточняете ее размеры и положени...
Оптимизация анимации
Оптимизация анимацииДля GIF-анимации исключительно важна оптимизация, поскольку это, фактически, несколько изображений в одинаковом формате. Если анимация долго загружается в браузере пользователя...
Оптимизация изображений
Оптимизация изображенийПолученное изображение непригодно для использования в Internet, поскольку находится в формате PSD и занимает уйму (по меркам сети) места, 370 Кбайт. Займемся его оптимизацие...
Рис 14 24 Диалоговое окно Preferences раздел Optimization
Рис 14.24. Диалоговое окно Preferences, раздел OptimizationВ области Default Optimization задаются параметры оптимизации по умолчанию. Они будут приниматься всякий раз при сохранении нового докуме...
Оптимизация ролловеров
Оптимизация ролловеровОптимизация ролловеров ничем не отличается от оптимизации обычных изображений. Как вы помните, ее параметры устанавливаются в палитре Optimize. На этот раз для оптимизации им...
Рис 10 54 Ролловер в браузере
Рис 10.54. Ролловер в браузере СоветСоветЕсли при размещении курсора мыши на территории какой-нибудь страны появляется не одна, а несколько фотографий, то перейдите в ImageReady и внесите в роллов...
Оптимизация фрагментов
Оптимизация фрагментовТак как все фрагменты, составляющие документ ImageReady, сохраняются в отдельных файлах, параметры оптимизации можно назначать для каждого из них индивидуально. На первый взг...
Рис 10 41 Границы фрагментов с разной палитрой четко видимы
Рис 10.41. Границы фрагментов с разной палитрой четко видимы 5. В палитре Optimize повысьте количество цветов до 32. Ситуация не изменилась. Сделайте несколько щелчков курсором мыши на различных ф...
Организация ссылок
Организация ссылокТеперь, когда изображение разрезано на требуемое количество фрагментов, их надо ассоциировать с соответствующими документами. Для этого предназначена специальная палитра Slice (Р...
Рис 10 38 Палитра Slice для фрагментов
Рис 10.38. Палитра Slice для фрагментов типа Image (а) и No Image (б) Содержимое палитры Slice относится только к текущему выделенному фрагменту и изменяется при выделении другого. Верхний левый у...
Рис 10 39 Раздел Slices диалогового окна Preferences
Рис 10.39.Раздел Slices диалогового окна Preferences Алгоритм генерации имен фрагментов задается списками, находящимися в области Default Slice Naming. По умолчанию из них задействованы только три...
Особые инструменты ImageReady
Особые инструменты ImageReadyСоздание изображений в Image Ready имеет ряд особенностей, которые следует учитывать. Возможности Image Ready несколько отличаются от Photoshop. Например, корректирую...
Подготовка изображений
Подготовка изображенийДля создания ролловера требуется создание серии изображений. Этим и займемся в настоящем разделе. Для примера добавим ролловеры к карте Европы, которую вы раскрашивали при из...
Рис 10 49 Диалоговое окно Create Guides
Рис 10.49. Диалоговое окно Create Guides8. Диалоговое окно Create Guides имеет две идентичные области Horizontal Guides и Vertical Guides, отвечающие за построение горизонтальных и вертикальных на...
Рис 10 50 Размещение фотографий с видами стран на карте
Рис 10.50. Размещение фотографий с видами стран на карте ПримечаниеПримечаниеДля построения ролловеров не обязательно размещение встык ролловеры на одном изображении могут пересекаться Мы использо...
Рис 10 51 Изображение разрезано на фрагменты
Рис 10.51. Изображение разрезано на фрагменты 1. Переключитесь в режим показа фрагментов кнопкой Show Slices в палитре инструментов.2. Выберите команду Divide Slice из меню Slices3. Разделите изоб...
Подготовка изображения
Подготовка изображенияБаннер, который мы создадим, будет изображать летящий самолет, оставляющий за собой рекламную надпись (Рисунок 10.57)....
Рис 10 57 Баннер с GIFанимацией
Рис 10.57. Баннер с GIF-анимацией 1. Для изготовления баннера нам понадобится изображение самолета. Запустите Photoshop и откройте в нем файл plane.tif с прилагаемой дискеты.2. Преобразуйте слой B...
Предварительный просмотр
Предварительный просмотрИзображение разрезано. Функция Preview in позволяет протестировать сборку изображения и ссылки еще до экспорта HTML-кода и фрагментов самого изображения. 1. Выберите устано...
Проблемы интеграции Photoshop и ImageReady
Проблемы интеграции Photoshop и ImageReadyО том, насколько хорош ход, сделанный Adobe, можно поспорить. Вместо одной программы, Web-дизайнеру все равно приходится пользоваться двумя. Это не просто...
Рис 10 1 Требование сохранить
Рис 10.1. Требование сохранить файл при переключении между Photoshop и ImageReady ПримечаниеПримечаниеДля переключения между приложениями в меню File каждого из них имеется специальный список Jump...
Разбивка фрагментов
Разбивка фрагментовТеперь разрежем изображение на фрагменты, соответствующие территории стран. 1. Выделите правый фрагмент (фрагмент №3) с помощью инструмента SliceSelect.2. Выберите команду Divid...
Рис 10 35 Диалоговое окно Divide Slice
Рис 10.35. Диалоговое окно Divide Slice3. Разобьем фрагмент по горизонтали на три. Установите флажок DivideHorizontally Into и сбросьте флажок Divide VerticallyInto. В поле slices down, evenly spa...
Рис 10 36 Результат автоматической разбивки фрагмента
Рис 10.36. Результат автоматической разбивки фрагмента...
Рис 10 37 Изображение разрезано на восемь фрагментов
Рис 10.37. Изображение разрезано на восемь фрагментов Если у вас не получилось сразу получить такие же линии разреза, как на рисунке, скорректируйте их положение инструментом Slice Select. Если же...
Разрезание изображений
Разрезание изображенийНа Web-страницах изображения часто используются для организации меню. Щелчок в разных участках изображения приводит в действие различий гипертекстовые ссылки. Наиболее очеви...
Расчет промежуточных фаз
Расчет промежуточных фазМы определили начальную и конечную фазы анимации. В первой фазе самолет еще не "прилетел", а в последней уже "улетел" и открыл рекламную надпись. А тепе...
Рис 10 59 Диалоговое окно Tween
Рис 10.59. Диалоговое окно TweenКак вы видите, программа "догадалась" о ваших манипуляциях с перемещением слоя и построила промежуточные стадии его движения. Впрочем, вы сами указали на...
Редактирование готовой анимации
Редактирование готовой анимацииImageReady, в отличие от многих специализированных программ-аниматоров, обеспечивает широкие возможности редактирования уже готовой анимации. Две из них очевидны: до...
Резюме
Резюме§ Специально для Web-дизайнеров в поставку Adobe Photoshop 5.5 включена программа ImageReady 2.0, предоставляющая возможности разрезания изображений, создания ролловеров, карт ссылок и GIF-а...
Слои
СлоиИзучим специфику Image Ready на простом примере. Раскрасим несложное изображение, схематическую карту Европы, на которой выделены цветом несколько стран (Рисунок 10.11)....
Рис 10 11 Карта Европы до (а)
Рис 10.11. Карта Европы до (а) и после (б) раскрашивания и добавления текста 1. Запустите программу Image Ready, если она закрыта.2. Откройте файл Europe, tif, находящийся на прилагаемой дискете.3...
Создание кадров
Создание кадровИзображение подготовлено. Теперь займемся определением кадров анимации. Для начала определим два кадра — первый и последний. 1. Убедитесь, что все слои видимы.2. Выберите инструмент...
Сохранение анимации
Сохранение анимацииСохранение анимации в формате GIF осуществляется все той же командой Save Optimized. Вам потребуется только выбрать папку для готового анимационного файла и дать ему имя....
Сохранение набора эффектов
Сохранение набора эффектовУдачно найденные комбинации эффектов в Image Ready можно сохранить в виде стиля. Для хранения стилей используется особая палитра Styles (Рисунок 10.9). В ней уже находитс...
Сохранение ролловеров
Сохранение ролловеровСохранение ролловеров выполняется все той же, знакомой нам командой save Optimized As из меню File. Нам остается только обсудить особенности формирования имен файлов, поскольк...
Рис 10 55 Файлы фрагментов для изображения с ролловэрами
Рис 10.55. Файлы фрагментов для изображения с ролловэрами Если у вас получилось меньшее количество файлов, то, скорее всего, вы забыли определить состояния одного или нескольких ролловеров. Если ф...
Сохранение фрагментов
Сохранение фрагментовТеперь, когда изображение разрезано и ссылки назначены, осталось только сохранить его фрагменты в отдельные оптимизированные файлы и получить HTML-код для их сборки в браузере...
Рис 10 42 Диалоговое окно Save Optimized
Рис 10.42.Диалоговое окно Save Optimized2. В поле File name уже введено имя файла, соответствующее названию документа ImageReady. Это имя будет использовано при формировании имен файлов отдельных...
Рис 14 43 Диалоговое окно Preferences раздел HTML
Рис 14.43. Диалоговое окно Preferences, раздел HTMLДилоговое окно HTML Options (и диалоговое окно Preferences с разделом HTML) состоит из двух областей: Formatting, содержащей настройки форматиров...
Рис 14 44 Диалоговое окно Saving Files Options
Рис 14.44. Диалоговое окно Saving Files OptionsДиалоговое окно Saving Files Options устроено аналогично разделу Slices установок программы. Область File Naming занимают девять списков, задающих &q...
Рис 10 44 Диалоговое окно Saving Files Options
Рис 10.44. Диалоговое окно Saving Files Options. Диалоговое окно Saving Files Options устроено аналогично разделу Slices установок программы. Область File Naming занимают девять списков, задающих...
Рис 10 45 Диалоговое окно Image Info
Рис 10.45. Диалоговое окно Image Info4. Нажмите кнопку ОК, закрывая этим диалоговое окно Saving Files Options. Перед вами снова окажется окно Save Optimized.5. Если вы желаете сохранить только нек...
Рис 10 46 Предупреждение о том
Рис 10.46. Предупреждение о том, что для сохранения не выбрано ни одного файла <html><title>France</title><body><hl>France</hl></body></html>...
Рис 10 47 Простейший документ для тестирования ссылок
Рис 10.47. Простейший документ для тестирования ссылокДалеко не всегда разрезанное изображение является единственным объектом на странице. Поэтому во многих случаях Web-дизайнеру требуется не код...
Сплошные заливки
Сплошные заливкиРазработчики ImageReady внесли в программу еще один неожиданный эффект — сплошную заливку. Несмотря на то, что заливку можно легко реализовать с помощью команды Fill, этот эффект т...
Рис 10 20 Палитра Layer Options/Effectsдля эффекта ColorFill
Рис 10.20. Палитра Layer Options/Effectsдля эффекта ColorFill3. Поэкспериментируйте с различными вариантами режимов наложения и непрозрачности заливки. Попробуйте разные цвета заливок. Оставьте то...
Ссылки и ролловеры
Ссылки и ролловерыНаличие ролловеров никак не связано с назначением гипертекстовых ссылок: ссылки все равно назначаются фрагментам. Чтобы назначить адреса ссылок, используйте палитру Slice точно...
Текст
ТекстДля завершения работы над картой осталось ввести текст, для которого мы уже заблаговременно подготовили фоновую плашку. Ввод и редактирование текста организованы в ImageReady даже удобнее и е...
Рис 10 22 Палитра Type
Рис 10.22. Палитра Type 5. Наберите текст "EUROPE '99" и нажмите клавишу <Enter>. Вводимый текст будет немедленно отображаться на экране, а после нажатия <Enter> текстовый ку...
Рис 10 23 Редактирование текста
Рис 10.23. Редактирование текста Сравните полученное изображение с исходным. Очевидно, работа проделана не зря. Полученный вариант выглядит гораздо привлекательнее. Не забывайте, что он создан иск...
Текстуры
ТекстурыИзучая палитру Layer Options/Effects вы, наверное, уже заметили переключатель Gradient/Pattern в верхней ее части. Положение Pattern соответствует другому часто используемому эффекту — зал...
Рис 10 19 Палитра Layer Options/Effects для эффекта Pattern
Рис 10.19. Палитра Layer Options/Effects для эффекта PatternПримечаниеПримечаниеФлажок Linked to layer, расположенный под образцом текстуры, "привязывает" текстуру к объекту Если он уста...
Удаление кадров
Удаление кадровКрайним способом уменьшения размера изображения можно считать удаление отдельных кадров. Критически взгляните на получившуюся анимацию и подумайте, можно ли сократить ее на кадр-др...
Фон Webстраницы
Фон Web-страницыКак вы увидите позже, ImageReady позволяет создавать довольно сложные элементы и генерирует для них столь же сложный HTML-код. Часто удобнее всего взять его за основу страницы и до...
Рис 10 25 Диалоговое окно HTML Background
Рис 10.25. Диалоговое окно HTML Background2. В списке Color выберите любой цвет.3. Закройте диалоговое окно, нажав кнопку ОК.4. Выберите установленный на вашем компьютере браузер в списке Previewi...
Рис 10 26 Окно фильтра DitherBox
Рис 10.26. Окно фильтра DitherBox4. В диалоговом окне Color Picker сбросьте флажок OnlyWeb Colors.5. В полях R, G и В задайте синий цвет (51, 133, 255).6. Закройте Color Picker нажатием кнопки ОК....
Рис 10 27 Создание узора спомощью DitherBox
Рис 10.27. Создание узора спомощью DitherBox7. Нажмите кнопку Fill под списком гибридных цветов. Окно DitherBox закроется, а текущий документ будет заполнен созданным узором. Установив текущий док...
Рис 10 28 Окно фильтра Tile Maker
Рис 10.28. Окно фильтра Tile Maker3. Фильтр работает в двух режимах: Blend Edges и KaleidoscopeTile. Установите с помощью переключателя первый режим.4. В поле Width вводится ширина краев изображен...
Рис 10 29 Диалоговое окно Trim
Рис 10.29. Диалоговое окно Trim7. Нажмите кнопку ОК Изображение обрезано, прозрачные поля удалены.8. Объявите изображение фоновой текстурой в диалоговом окне HTMLBackground и воспользуйтесь команд...
Эффекты для слоев
Эффекты для слоевПридадим территории всего континента эффект Drop Shadow, знакомый вам по Photoshop. В Image Ready для получения эффектов используются несколько иные элементы управления. 1. Перейд...
Рис 10 13 Эффект Drop Shadowв палитре слоев
Рис 10.13. Эффект Drop Shadowв палитре слоев...
Рис 10 14 Палитра Layer Options/Effectsдля
Рис 10.14. Палитра Layer Options/Effectsдля эффекта Drop Shadow6. Список Blend Mode задает режим наложения тени. Оставьте в нем значение Multiply, выбранное по умолчанию. Цвет тени в списке Color...


Начало