Photoshop Занятие 1. Требования к иллюстрациям в Internet и подготовка графики для Веб

Цель: изучение алгоритма подготовки графических элементов веб-страницы

Требования к иллюстрациям для ВЕБ

Общие пожелания для подготовки изображений:

  • Графические элементы должны быть представлены в формате GIF или PNG.
  • Фотографии должны быть представлены в формате JPEG.
  • Обеспечьте показ изображений с малым разрешением, пока идет загрузка больших изображений.
  • Используйте GIF-изображения с чересстрочным форматом.
  • Укажите атрибуты height и width элемента img.
  • Сократите количество анимации.
  • По возможности используйте пиктограммы изображений.
  • Обязательно создавайте «альтернативный» текст (атрибут alt)

Требования к иллюстрациям для ВЕБ Photoshop

Градиент на фон в Photoshop

При размещении градиента на фон, подбирается либо горизонтальный либо вертикальный градиент, и, в зависимости от этого, вырезается лишь тонкая линия данного градиента. При размещении в CSS устанавливаются соответствующие свойства фона (см. рис. 1.1)

Градиент на фон в Photoshop

Рис. 1.1. Градиент на фон в Photoshop

Диалоговое окно Сохранить для Интернета и устройств

Прежде чем использовать файл изображения в веб-странице, необходимо в графическом редакторе подготовить его для размещения. При этом важно не только определить в photoshop размер изображения, но и правильно сохранить: используя диалоговое окно Сохранить для Веб и устройств (см. рис. 1.2):

Диалоговое окно Сохранить для Интернета и устройств

Рис. 1.2. Диалоговое окно Сохранить для Интернета и устройств

Устанавливаем настройки диалогового окна Сохранить для Интернета и устройств:

настройки диалогового окна Сохранить для Интернета и устройств

Рис. 1.3. Настройки диалогового окна Сохранить для Интернета и устройств

Оптимизация и сжатие до заданного размера файла:

Оптимизация и сжатие до заданного размера файла photoshop

Рис. 1.4. Оптимизация и сжатие до заданного размера файла


Лабораторная работа Photoshop 1_1:

  1. Откройте изображение в Photoshop и выберите «Файл» -> «Сохранить для Интернета и устройств».
  2. В диалоговом окне «Сохранить для Интернета и устройств» щелкните вкладку «Оптимизированный».
  3. В меню «Стиль» выберите «Низкое качество JPEG».
  4. Щелкните вкладку «Размер изображения».
  5. Убедитесь, что установлен параметр «Сохранить пропорции» и введите ширину. Для электронной почты подходит размер 400 пикселов.
  6. Нажмите кнопку «Сохранить». Введите имя файла и путь для сохранения файла. Убедитесь, что в меню «Формат» выбран вариант «Только изображения». Нажмите кнопку «Сохранить».

Установка параметров оптимизации JPEG

Для размещения качественных фото, необходимо подготовить в Photoshop изображение в формате JPEG:

Параметры оптимизации JPEG

Рис. 1.5. Параметры оптимизации JPEG

Установка параметров оптимизации для форматов GIF и PNG

Параметры оптимизации для форматов GIF и PNG

Рис. 1.6. Параметры оптимизации для форматов GIF и PNG


Лабораторная работа Photoshop 1_2: JPEG-сохранение

  • Откройте в редакторе изображение jpg формата (или скачайте изображение желтого цветка) и вызовите диалог «Сохранить для Веб и устройств» (Save for Web & Devices) в меню File.
  • Выберите вкладку «Оптимизированный» (Optimized)
  • Откройте список «Наборы параметров» (Preset) и выберите один из 12 предлагаемых вариантов – JPEG Medium (средний)
  • Оцените качество изображения и размер итогового файла
  • Уровень качества, можно грубо задать в меню, а можно точно настроить ползунком «Качество» (Quality): передвиньте ползунок на 70.
  • Включите флажок опции «Оптимизированный» (Optimized): позволяет чуть уменьшить размер файла в обмен на ограничение совместимости со старинными браузерами.


Лабораторная работа Photoshop 1_3: GIF-сохранение

  • Скачайте файл для работы.
  • Из «списка форматов» выберите пункт «GIF».
  • Выберите (или впечатайте) количество оттенков в поле «Цвета» (Colors) и посмотрите, как это отразилось на изображении и размере итогового файла (установите 90)
  • Для уменьшения исходной гаммы картинки до заданного количества, можно воспользоваться одним из 9 доступных методов редукции цвета. Выберите одну из четырёх верхних опций: установите «Ограниченная» (Restrictive)
  • Смешение цветов (Dithering) отчасти компенсирует узость гаммы, «конструируя» отсутствующие цвета из набора имеющихся. Выберите «Диффузия» (Diffusion) и передвиньте ползунок Dither (степень количества полутонов) на 80.
  • В таблице цветов выберите один из цветов (желтый), дважды щелкнув по цвету, и замените его другим оттенком. Для выбора можно воспользоваться Пипеткой в левой части экрана.
  • Щелкните кнопку Done, чтобы сохранить параметры оптимизации в исходный документ

Лабораторная работа Photoshop 1_4: Взвешенная оптимизация

  • Скачайте файл для работы.
  • Откройте файл в редакторе. Выделите фрагмент картинки (цветок) Прямолинейным Лассо или любым другим инструментом.
  • Сохраните выделение в альфа-канал (Select → Save Selection (Выделение → Сохранить выделение)). Дайте ему имя (введите в поле Имя).
  • Откройте диалог «Сохранить для Веб и устройств», выберите «JPEG» в качестве формата на выходе и, если нужно, настройте уровень качества.
  • Щёлкните кнопку «маска» по соседству с полем «Качество» (Quality). Открывается диалоговое окно.
  • Выберите в меню «Канал» (Channel) только что сохранённый альфа-канал. Настройте «Минимальное» и / или «Максимальное» значения по вкусу и нажмите Ok.

Лабораторная работа Photoshop 1_5: Настройка параметров вывода

  • В диалоговом окне «Сохранить для Интернета и устройств» в раскрывающемся меню «Оптимизация» выберите пункт «Изменить настройки вывода» (Edit output settings).
  • Отметьте флажок Вывод XHTML: При экспорте создаются web-страницы, соответствующие стандарту XHTML.
  • Щелкните по кнопке Следующая и настройте параметры в группе «Фрагменты».
  • Настройте вывод фона щелкнув по Следующая.
  • Щелкните ОК и сохраните оптимизированный файл.
  • Просмотрите HTML-код результирующего файла.

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить