Подготовка графики для Web © И. Э. Широкова, ИИПКРО 2011

Требования к графическим изображениям для web. 1. Формат файла Формат JPEG (JPG): - Для полноцветных фотографий и изображений со сложными градиентными переходами. - Возможность сохранить до 16 млн. различных оттенков. -Возможность выбора степени сжатия (чем больше сжатие, тем ниже качество итоговых изображений и меньше размер файла).

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

Требования к графическим изображениям для web. Формат PNG (Portable Network Graphics Портативная сетевая графика): Этот формат поддерживает прозрачность, для представления изображений можно использовать 256 цветов. Разница между GIF и PNG – в качестве цветопередачи, глубине цвета.

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

Требования к графическим изображениям для web. 3. Размеры изображений Ограничение по ширине для фото 800 пгс. Размеры кнопок, картинок-превью, аватарок и т.п. жестко задаются определенным количеством пикселей по длине и ширине, например, 100×100.

Требования к графическим изображениям для web. 4. Цветовая палитра изображения Основная для Web - модель RGB Каждая составляющая цвета (красная, зеленая, синяя) может принимать значение от 0 до 255. Белый (255, 255, 255) Черный (0, 0, 0) Синий (0,0,255) Красный (255,0,0) Ярко-фиолетовый (255,0,255). Более 16 млн оттенков!

Графический редактор GIMP – строка заголовка 2 – верхнее меню 3 – панель инструментов 4– окно, содержащие диалоги для работы со слоями, каналами, контурами и кистями 5– строка состояния

Графический редактор GIMP Кадрирование изображений (обрезка фотографии с одной или нескольких сторон) Инструмент Кадрирование:. Растяните ограничивающую рамку вокруг той части изображения, которую вам хотелось бы оставить. Часть фотографии за пределами рамки будет затемнена.

Графический редактор GIMP Кадрирование с заданными размерами 1. Выбрать на панели инструментов 2. Поставить галочку Фикс 3. Выбрать Размер 4. Введите желаемые размеры изображения, например, 100×100 пгс.

Графический редактор GIMP -выделение прямоугольной области -выделение эллиптических областей - выделение области произвольными линиями или отрезками - выделение области, содержащей объекты на переднем плане - выделение соседних областей изображения по схожести цвета - выделение областей с заливкой схожего цвета - выделение фигур при помощи распознавания краев Инструменты выделения

Графический редактор GIMP Для всех инструментов выделения можно (И НУЖНО!!!) настроить значение растушевки края и выбрать режим выделения. Инструменты выделения

Растушевать края – значит сделать край выделения нечетким, расплывчатым. Радиус – ширина области растушевки – может принимать значения от 0 до 100 пгс. Внутри этой области часть пикселов является выделенной, а часть – нет. Графический редактор GIMP Инструменты выделения

Графический редактор GIMP Изображения, обрезанные с разными значениями параметра «растушевка»

Графический редактор GIMP Режимы выделения Одиночное выделение – в документе может быть выделена только одна область. Если попытаться выделить что-нибудь еще, первое выделение снимется. Объединение выделений – в документе можно выделить одновременно несколько областей. Вычитание выделений – из более раннего выделения вырезается часть, ограниченная более поздним выделением (если области выделения накладываются друг на друга, т.е. имеют общую часть). Пересечение выделений – из двух выделенных областей остается только общая их часть.

Графический редактор GIMP Инверсия выделения Инвертировать выделение – значит сделать выделенную область невыделенной, а невыделенную – выделенной. Для этого в верхнем меню нужно выбрать Выделение Инвертировать.

Графический редактор GIMP Тоновая и цветовая коррекция фотографий в редакторе GIMP. Инструменты тоновой и цветовой коррекции могут воздействовать как на все изображение целиком, так и на выделенную область. Все инструменты доступны в меню Цвет.

Графический редактор GIMP Инструменты тоновой коррекции изображения Тоновая коррекция обеспечивает правильное распределение яркостей пикселей в изображении. Оптимальным считается такой диапазон, в котором самые темные области являются абсолютно черными, самые светлые – белыми, а остальные цвета распределены равномерно.

Графический редактор GIMP Тоновая и цветовая коррекция фотографий в редакторе GIMP. Яркость - Контраст

Графический редактор GIMP Инструменты цветовой коррекции изображения Цветовой баланс позволяет настроить баланс цветов. Передвигая ползунки в сторону какого- либо цвета, вы увеличиваете его содержание и ослабляете цвет на противоположном конце шкалы в выбранном вами изменяемом диапазоне (тени, полутона, светлые части).

Графический редактор GIMP Инструменты цветовой коррекции изображения Тонирование – позволяет сделать изображение монохромным. Постеризация – уменьшает количество цветов до заданного уровня. Обесцвечивание – делает изображение черно – белым.

Графический редактор GIMP Работает и над цветовой, и над тоновой коррекцией. Тон - отвечает за цветовой баланс Освещенность - служит для осветления либо затемнения рисунка Насыщенность - позволяет отрегулировать интенсивность цветов. Перекрытие – определяет, насколько цветовые диапазоны пересекаются. Инструмент Тон/Насыщенность

Графический редактор GIMP Диалог Слои

Графический редактор GIMP Контекстное меню слоя.

Графический редактор GIMP Контекстное меню слоя.

Графический редактор GIMP Хэдер сайта Хэдер сайта –картинка или анимации, находящаяся в самом верху сайта. Размеры ее небольшие: ширина максимум на весь экран, а высота примерно 2-3 см. Изображать на хедере можно все, что угодно, но нужно стараться поддерживать общую тему сайта. Также в хедере можно размещать не только надписи, но логотип самой организации. Не забывайте о размерах и объеме (весе) изображений на хедере!!

Графический редактор GIMP Хэдер сайта