Цель: изучение процесса обработки изображений для Веб, изготовление фавикон из картинки
Работа с вектором в Photoshop
Лабораторная работа Photoshop 2_1
- Выберите инструмент из группы «Фигура» или инструмент «Перо». Убедитесь, что на панели параметров выбрана кнопка «Слой-фигура».
- Чтобы задать цвет фигуры, щелкните образец цвета на панели параметров и выберите цвет в палитре цветов.
- Чтобы применить к фигуре стиль, выберите готовый стиль во всплывающем меню «Стиль» панели параметров.
- Для отрисовки фигуры протащите указатель мыши по изображению.
- Нарисуйте различные фигуры, применив к ним разные стили.
Favicon в Photoshop
Фавикон из картинки можно сделать в Photoshop. При этом следует иметь в виду
Важно:
- favicon всегда следует держать в корне сайта
- оптимальный объем 1 Кб
- размер: 16х16
Лабораторная работа Photoshop 2_2
- Создайте документ с прозрачным фоном в Photoshop. Откройте заготовленную картинку с изображением. Вырежьте инструментом «Магнит» из картинки нужный элемент для будущего фавикон. Или нарисуйте иконку (favicon):
- Используя инструмент Custom Shape и, выбрав на панели параметров инструмента подходящую для иконки фигуру, нарисуйте ее в рабочей области.
- Примените к фигуре стиль.
- Задайте размеры изображения 60х60. Сохраните в формате png-24.
- Перейдите в программу DreamWeaver или другой веб-редактор и откройте html-файл для добавления к нему favicon.
- В области head документа добавьте тег:
- Просмотрите результат в браузере.
<link rel="shortcut icon" href="название_изображения"> |
Изображения на прозрачном фоне
Лабораторная работа Photoshop 2_3
- Откройте файл «Желтый цветок».
- Создайте из заднего фона слой.
- Добавьте маску к слою и выполните команду Спрятать все или щелкните на маске Ctrl+I.
- Выберите инструмент Кисть с большим параметром растушевки и закрасьте белым цветом область цветка.
- Откройте диалог «Сохранить для Веб» (Save for Web).
- Выберите формат GIF и включите поддержку «Прозрачности» (Transparency).
- Выберите метод смешивания в раскрывающемся списке (Diffusion Transparency Dither).
- В меню «Подложка» (Matte) выберите Black, чтобы заполнить им полупрозрачные пикселы.
- Теперь выберите в списке форматов «PNG-24», убедитесь, что установлен флажок «Прозрачность» (Transparency) и почувствуйте разницу. Размер файла вырос
- Выберите формат JPEG. В меню «Подложка» (Matte) выберите other и щелкните по темному цвету.