21. Дизайн сайта в программе PhotoShop. Создание логотипа, кнопок панелей навигации, организация слоев, вставка фотоизображений и текста.

21. Фрагментация макета сайта. Оптимизация изображений для их использования в Интернете. Использование ImageReady. Ролловеры.

Цель web-дизайна всегда одна и та же: создать быстро загружаемый, визуально интересный сайт, по которому легко перемещаться и который отчетливо и недвусмысленно передает посетителю свой основной замысел. И одним из ключей к этой цели являются фрагменты.

Фрагментация изображения в теории проста. Мы берем одно большое изображение и разбиваем его на множество более мелких изображений, а затем собираем большое изображение обратно в web-страницу, пользуясь HTML-таблицами.

С фрагментацией справляется инструмент Slice (Фрагмент) в палитре инструментов. Можно сделать фрагментацию по направляющим. Это наиболее простой и быстрый способ фрагментации из всех существующих. Если вы использовали направляющие для разбивки макета страницы на рабочие области, то, нажав на эту кнопку, вы осуществите фрагментацию изображения непосредственно по этим направляющим. Перед использованием этого метода можно умышленно добавить некоторые направляющие.

Другой способ осуществления фрагментации - опция Layer Based Slice (Фрагменты слоя). Этот метод отлично подходит для кнопок он создает фрагменты вокруг содержания любого данного слоя и предоставляет следующие преимущества:

1. При изменении изображения слоя фрагмент слоя также изменяет свои размеры.

2. При перемещении слоя его фрагмент также перемещается вместе с ним.

3. При создании ролловера фрагмента соответствующий ему слой будет автоматически выбираться в палитре слоев.

Для создания фрагмента слоя выделите требуемый слой в палитре слоев. В меню Layers (Слои) выберите пункт New Layer Based Slice (Новые фрагменты слоя). Результат: к кнопке добавлен фрагмент и несколько фрагментов в её окружении.

Фрагменты, определяемые пользователем - наиболее распространенный метод фрагментации. Фрагменты создаются вручную. В качестве помощи вы можете воспользоваться направляющими, а также впоследствии выбрать при помощи инструмента Slice Select созданный фрагмент для внесения в него небольших изменений.

Для запуска приложения ImageReady щелкните на кнопке в нижней части палитры инструментов. Это действие запустит ImageReady и перенесет в него все данные изображения. Обратите внимание, что интерфейсы ImageReady и Photoshop очень похожи, но в ImageReady присутствуют некоторые дополнительные функции. Это оптимизированный дисплей, ролловеры, области срабатывания изображения и анимация.

При щелчке мышью на фрагменте в приложении ImageReady все другие фрагменты в изображении меркнут, так что всегда видно, с какой частью изображения вы работаете в данный момент.

Если вдруг понадобиться объединить объекты следует сделать следующее: пользуясь инструментом Slice Select и удерживая нажатой клавишу Shift, щелкните на выбранных элементах, затем в меню Slice > Combine Slices (Соединить фрагменты).

Чтобы предварительно просмотреть внешний вид страницы в браузере нужно щелкнуть на кнопке Preview (Предварительный просмотр) или нажать клавиши Ctrl+Alt+P. В браузере будет отображена вся страница, а также некоторая относящаяся к ней информация: размеры изображения, типы и размеры файлов и др.

На сегодня интерактивные характеристики являются практически обязательным элементом любого сайта.

Ролловер изображения — это просто-напросто изображение, откликающееся на действия мыши, например вызывающее другое изображение, что может создавать эффект свечения кнопки или нажатия кнопки и т. д.

Чтобы создать ролловер нужно открыть палитру Web content и выберите фрагмент с кнопкой. В нижней части палитры щелкните на кнопке Create New Rollover State (Создать новое состояние ролловера). Появится новое состояние. По умолчанию оно называется Over State (состояние «Над»). Это состояние будет изменять изображение при перемещении мыши над кнопкой. После того как выбрано состояние «Над», любые произведенные нами изменения в слое будут отображаться в палитре Rollover, а при сохранении файла для фрагмента будет создано новое изображение. Наиболее быстрый путь осуществления такой задачи — воспользоваться стилями слоев в палитре Layers.

Оптимизация — это искусство уменьшения размера файла до минимума с сохранением качества содержащегося в нем изображения. Приложение ImageReady обладает некоторыми мощными инструментами оптимизации.

Перед тем как оптимизировать документ следет знать, что формат GIF подходит для текста и больших, однотонных площадей, а формат JPEG лучше подходит для фотографий.

Для оптимизации больше всего подходит вид 2-Up. Он позволяет визуальным способом сравнить начальное и оптимизированное изображения. Кроме этого, на вкладке приводятся более детальные данные о конкретном фрагменте.

Не следует, за исключением редких случаев, использовать более высокие показатели качества, чем 50. Они возможны, например, при необходимости организации показа галереи изображений, когда необходимо наилучшее качество рисунка. Но даже и в таких случаях показателя 70-80 будет вполне достаточно.

Теперь текст во фрагменте выглядит резче, а размер изображения составляет всего 11 Кб.

Один из способов сжатия данных формата GIF - ограничение цветов в палитре. Можно выкинуть достаточно много цветов из палитры без значительной потери качества изображения, но со значительным уменьшением его размера.

Чтобы сохранить оптимизированный документ нужно для последующей работы с ним следует:

• Создайте новую папку на жестком диске.

• Дайте команду File-Save Optimized as… Найдите только что созданную папку и введите имя файла. Установите тип файла HTML and Images (*.html). Нажмите Save (Сохранить).

Таким образом, мы получили полноценную WEB-страницу. А в папке Images все фрагменты изображения.