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

как "облегчить" картинку для интернет баннера?
Казимир Малевич. Пиксел в масштабе 10 000:1

Известная картина – договорился с другом о баннерообмене, нарисовал офигительную(!) картинку, а она, гадина, весит 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 например).
Теперь выбираем имя файла и сохраняем.
Всё, готово.

Обсуждение

353_micro
Рейтинг
  1. +
  2. 0
STALKERY (15:07 21.11.2009)

+

925_micro
Рейтинг
  1. +
  2. 0
DMH (19:58 21.11.2009)

Довольно хорошо написано, мне понравилось. Правда в таких целях в фотошопе я выбираю вкладку “сохранить для web”, так как там можно и выходное качество настроить, а так же формат файла + автоматически говориться какой размер будет выходного файла.

947_micro
Рейтинг
  1. +
  2. 0
Vikeltor (17:13 18.02.2010)

to DMH
так же делаю, имхо проще и быстрее

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

Рейтинг
  1. +
  2. 4
3
1763