как облегчить картинку для интернет баннера?

как облегчить картинку для интернет баннера?

Известная картина договорился с другом о баннерообмене, нарисовал офигительную(!) картинку, а она, гадина, весит 300 кило и грузится по полчаса.
Понятно, что толку от такого баннера никакого посетитель ни за что не будет дожидаться окончания загрузки.
Значит, картинку надо облегчить. Давайте разберемся, как это сделать.

Инструкция

Что вам понадобится:

• Adobe PhotoShop (желательно не ниже CS2)

1 шаг

Как нарисовать картинку, статичную или анимированную, разбирать не будем это тема для другой инструкции. Давайте облегчать уже готовую.
Здесь есть 2 пути:
Либо снизить размер файла за счет уменьшения количества цветов, либо убрать сглаживание при цветовых переходах.
Будем считать, что картинка статична.
Сначала убедимся, что размер картинки точно соответствует размеру места под наш баннер.
Для этого в меню image (изображение) выставим размер изображения в пикселах(важно!). Это верхняя часть окна Image size (размер изображения) (Alt+Ctrl+I).
ВНИМАНИЕ!!! На нижнюю часть этого окна мы не смотрим вообще!
То есть, если размер баннера у нас, к примеру, 420 на 80 (один из стандартов), то ширину (width) мы выставляем именно 420 PIXELS, а высоту (height) именно 80 PIXELS.
Выставили. И наша картинка неимоверно сплющилась (или наоборот, вытянулась). Блин В смысле, лица как блины. А буквы вообще не читаются.
Значит, мы пойдем другим путем.

2 шаг

Обрезка.
Чтобы изменить размер, не меняя пропорции, картинку следует обрезать в нужные параметры.
Как это?
Сейчас поясню. Выбираем инструмент crop (обрезка) (клавиша С ) Он как раз выделен на рисунке. В полях ширина и высота выставляем нужные нам параметры. Обратите внимание! Параметры надо выставить в пикселах (px)
После чего проводим по нашей картинке по диагонали слева направо.
Полкартинки остались за кадром? Надо было думать о размерах раньше! Отменяем (ctrl+Z). Перекомпоновываем элементы картинки, чтобы всё укладывалось и повторяем процедуру.

3 шаг

Собственно сжатие.
Здесь есть 2 варианта: Либо сохранить картинку в формате JPEG (jpg), либо перевести её в GIF.
JPEG сохраняет исходные цвета, но при сильном сжатии напрочь ликвидирует плавные переходы между цветами. Отсюда эти неприятные светло-серые пятна вокруг контуров, а при ОЧЕНЬ сильном сжатии пикселизация, превращающая лицо в набор цветных пятен.
GIF тот вообще работает только в системной палитрой (до 256 цветов), зато позволяет создавать анимированные картинки (те самые гифки)
Давайте попробуем сохранить цвета.
В меню file (файл) выбираем save as (сохранить как) (Ctrl+Shift+S). В окне сохранения отмечаем формат (jpg) и выбираем место сохранения.
Всё сделали, нажали сохранить и увидели меню сжатия. Поперек всего меню проходит бегунок, графически отображающий степень сжати. Справа/внизу от него указан получившийся размер файла.
Понятно, что что чем меньше этот размер, тем лучше. НО! Обратите внимание на картинку. Качество самой катринки на основном рабочем столе программы, той самой, которую мы сохраняем, меняется с каждым движением бегунка. Надо добиться гармонии: минимального размера при максимальном качестве.

4 шаг

Сделаем GIF. В анимированной картинке вообще нет других вариантов.
В меню file (файл) выбираем пункт Save for web and devices (сохранить для веб) (Ctrl+Alt+Shift+S). Выбираем формат GIF (на картинке отмечено, где) и количество цветов. Следует учесть, что чем больше выбрано цветов, тем тяжелее катринка. Если гифка графическая, без элементов фото, её лучше сделать изначально с меньшим количеством цветов (16 например).
Теперь выбираем имя файла и сохраняем.
Всё, готово.