Photoshop Занятие 2. Работа с изображениями

Цель: изучение процесса обработки изображений для Веб, изготовление фавикон из картинки

Работа с вектором в Photoshop

Лабораторная работа Photoshop 2_1
Вектор в photoshop

  1. Выберите инструмент из группы «Фигура» или инструмент «Перо». Убедитесь, что на панели параметров выбрана кнопка «Слой-фигура».
  2. Чтобы задать цвет фигуры, щелкните образец цвета на панели параметров и выберите цвет в палитре цветов.
  3. Чтобы применить к фигуре стиль, выберите готовый стиль во всплывающем меню «Стиль» панели параметров.
  4. Для отрисовки фигуры протащите указатель мыши по изображению.
  5. Нарисуйте различные фигуры, применив к ним разные стили.

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 и щелкните по темному цвету.