Подготовка графики для сайта

распознаются браузерами и графическими приложениями.
В web-дизайне используются три основных

типа графических файлов:

GIF
JPEG (JPG)
PNG

Он может хранить сжатые без потери данных изображения с небольшим

количеством цветов (256).
Файлы этого формата имеют расширение gif.
Формат GIF идеально подходит для рисованных иллюстраций, текстов, эмблем, чертежей и графиков.
Он позволяет создавать необычные эффекты: прозрачность фона и анимацию изображения.

GIF

сжатия без потери данных.
Достоинство: используется палитра до 16 миллионов цветов;

реализована возможность выбора требуемой степени сжатия «высокая степень сжатия и плохое качество – низкая степень сжатия – высокое качество»

PNG

ним всегда существует возможность выбора между меньшим размером файла и

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

JPЕG

и изображения со сложными градиентными переходами сохраняют в формате JPEG.

Картинки с небольшим количеством цветов, скриншоты, схемы, графики, картинки с текстом и т. п. сохраняют в формате GIF.

Анимированные картинки и картинки с прозрачными областями можно получить только с использованием формата GIF или PNG.

сайте, должно быть предварительно подготовлено.
Для этого идеально подходит программа Adobe

Photoshop.

Этапы подготовки графики в Adobe Photoshop

1. Обрезка ненужных областей изображения
2. Коррекция изображения (регулировка яркости, контрастности,
цветового баланса)
3. Уменьшение размера изображения
4. Оптимизация изобажения

- «Цветовой баланс».
2. Для коррекции изображения
используются команды:
«Изображение»

- «Коррекция» - «Цветовой тон/Насыщенность».

В открывшемся окошке двигаем ползунки, добиваясь нужного результата
(должна стоять «галочка» в опции «Просмотр»).

1. Для обрезки изображения в Adobe Photoshop CS3 используется инструмент «Рамка».

для Web…
3. Для уменьшения изображений используется команда «Изображение» –

«Размер изображения»

результате вы можете одновременно видеть четыре варианта одного изображения, окно

«1» - это исходное изображение, а остальные окна показывают, как будет выглядеть фотография после сохранения в различных форматах. Так в поле «2» фотография сохранная в формате .gif, а в окне «4» фотография сохранная в формате .jpg.
Каждый формат имеет параметры, которые вы можете изменять в правой части окна, на рисунке активно второе окно и соответственно в правой части мы видим параметры для формата .gif.

Для формата .gif главные параметры:
количество цветов (чем их меньше, тем меньше финальный файл);
прозрачность.
Если галочка установлена, то прозрачные пиксели в Adobe Photoshop останутся прозрачными и в gif-файле.

Для формата .jpg главный параметр:
качество изображения (параметр изменяется от нуля до ста)
Важно, что изменяя любой параметр, вы можете видеть, какая картинка у вас получится на выходе и какой размер она будет иметь. Сравнивая полученные значения, можно быстро подобрать необходимые значения.

можно разрезать на несколько частей и сохранить их в разных

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

Разрезание изображения