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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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