19 July 2007 - 16:01Делаем сайт в Photoshop и Dreamweaver (части III-VI)

Часть III. Эффект Rollover. Подготовка.

А теперь мы будем применять эффект Rollover к нашим ссылкам.

1. Нажмите два раза на любом из слое (где Вы собираетесь устанавливать ссылку) и перед Вам откроется окно,

2. Теперь можно выбрать следующие эффекты: Drop Shadow, Outer Glow, Bevel and Emboss, Color Overlay. Поэкспериментируйте с настройками - у меня получилось вот что:

3. Потом сохраните как New Style и примините данный стиль ко остальным ссылкам.

Часть IV. Резка дизайна.

1. Теперь переходим из Photoshop в ImageReady

2. Переключаемся в режим Оптимизации:

3. Поиграясь с настройками, оптимизируйте изображение

4. Выберите инструмент Slice Tool, и теперь Вам следует буквально порезать изображения на части. Делая это интуитивно, попытайтесь внести смысл в резку. К примеру, следует отделить изображение ссылок друг от друга. В самую последнюю очередь отделите главное изображение, где будет текст. Каждой разрезной части присваивается свой номер. Вот что получилось у меня:

Часть V. Эффект Rollover.
1. Выберите инструмент Slice select tool и выделите любое изображение ссылки и она будет активной, ее Вы увидите на панели Web Content. Теперь выделите этот же слой на панели Layers. Убедитесь, что видимость эффектов отключена!

2. А теперь на панели Web Content данного слоя правой клик мышью выберите Add Rollover State => Over. Сделайте Over активным и на панели Layers включите видимость эффектов.

Примените данное действие ко всем ссылкам.

3. А теперь, чтоб по ссылкам можно было куда-то переходить Вам следует заполнить их содержимом, то есть… ссылками.

Часть VI. Оптимизация изображений.
1. Следующее, что Вам следует сделать это оптимизировать каждый отрезанный кусок дизайна (т.е. рисунка). Выделяем и экспериментируем с настройками. Лучше выбирать для маленьких кусков jpg формат, а для больших gif.
2. После этого сохраняем страницу File>Save optimized as. У нас получиться hmtl файл и папка с изображениями.
3. Открываем страницу в Dreamweaver и главное изображение (где будет текстовое содержимое Вашего сайта) объявите фоном. То есть удалите и назначьте (выбирая через Обзор) его же фоном ячейки, где было удалено это изображение.
4. И последнее, что следует сделать - это назначить цвет для фона страницы. У меня он черный, а Вы устанавливайте на свое усмотрение.
Просмотреть что получилось можно тут:
Пример примитивной страницы, при создании которой была применена резка дизайна

Начало урока

полный урок - оригинал