А теперь мы будем применять эффект 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. И последнее, что следует сделать – это назначить цвет для фона страницы. У меня он черный, а Вы устанавливайте на свое усмотрение.
Просмотреть что получилось можно тут:
Пример примитивной страницы, при создании которой была применена резка дизайна

Начало урока

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

оригинал

1. Создайте холст размером 800х600 пикселей.

2. Протащите несколько направляющих, чтоб все части дизайна были на своих местах.

3. Создайте новый слой.

4. Установите следующие цвета для вашего фона:

5. Примените градиент для вашей странички, удерживая клавишу Shift.

6. Перенесите изображение на рабочий документ и подгоните размер.

7. А теперь сделайте так, чтобы изображение плавно переходило в фон. Кликните на иконку слева, чтобы добавить маску.

8. Выберите кисть (soft!) и установите 100 пикселей.

9. Установите цвет переднего плана черным и начинайте закрашивать края изображения, тем самым как бы сливая фон и само изображение.

10. Закрашивайте до тех пор, пока вы не будете удовлетворены результатом: переход должен выглядеть мягко.
11. Наконец-то переключитесь на screen режим и установите прозрачность до 49% (в моем случае это 95% иначе совсем не будет видно рисунка).

12. Теперь изображение должно максимально слиться с фоном.

оригинал урока