close

Вход

Забыли?

вход по аккаунту

?

Презентация

код для вставкиСкачать
Подготовка графики для Web
© И. Э. Широкова, ИИПКРО
2011
Требования к графическим изображениям
для web.
1. Формат файла
Формат JPEG (JPG):
- Для полноцветных фотографий и изображений
со сложными градиентными переходами.
- Возможность сохранить до 16 млн. различных
оттенков.
- Возможность выбора степени сжатия
(чем больше сжатие, тем ниже качество итоговых
изображений и меньше размер файла).
Требования к графическим изображениям
для web.
Формат GIF:
- для изображений с малым количеством
цветов;
скриншотов, схем, графиков,
примитивов; анимированных изображений;
изображений с прозрачными областями.
- ограничен 256 цветами и эффективен для
сжатия изображений,
если в них не
присутствуют градиентные заливки или
другие тоновые переходы (изображения со
сплошными тонами или повторяющимися
цветами).
Требования к графическим изображениям
для web.
Формат PNG (Portable Network Graphics
— Портативная сетевая графика):
Этот формат поддерживает прозрачность,
для представления изображений можно
использовать 256 цветов.
Разница между GIF и PNG – в качестве
цветопередачи, глубине цвета.
Требования к графическим изображениям
для web.
2. Объем файлов
• перед
публикацией
веб-страницы
графику оптимизируют — подбирают
такие параметры графических файлов,
чтобы они занимали меньше места при
максимальном сохранении качества
изображений.
• оптимальный объем выставляемых на
интернет-сайте изображений не должен
превышать 40-60 Кб.
Требования к графическим изображениям
для 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
3
2
1
5
4
4– окно, содержащие диалоги для
1 – строка заголовка
работы со слоями, каналами,
2 – верхнее меню
контурами и кистями
3 – панель инструментов 5– строка состояния
Графический редактор GIMP
Кадрирование изображений (обрезка
фотографии с одной или нескольких
сторон)
Инструмент Кадрирование: .
Растяните
рамку
ограничивающую
вокруг
изображения,
той
которую
части
вам
хотелось бы оставить. Часть
фотографии
за
пределами
рамки будет затемнена.
Графический редактор GIMP
Кадрирование с заданными размерами
1.Выбрать
на панели
инструментов
2.Поставить галочку Фикс
3.Выбрать Размер
4.Введите желаемые
размеры изображения,
например, 100×100 пкс.
Графический редактор GIMP
Инструменты выделения
-
выделение прямоугольной области
-
выделение эллиптических областей
- выделение области произвольными
линиями или отрезками
- выделение области, содержащей
объекты на переднем плане
- выделение соседних областей
изображения по схожести цвета
- выделение областей с заливкой
схожего цвета
- выделение фигур при помощи
распознавания краев
Графический редактор GIMP
Инструменты выделения
Для всех
инструментов
выделения можно
(И НУЖНО!!!)
настроить значение
растушевки края и
выбрать режим
выделения.
Графический редактор GIMP
Инструменты выделения
Растушевать края – значит сделать край
выделения нечетким, расплывчатым.
Радиус – ширина области растушевки –
может принимать значения от 0 до 100
пкс.
Внутри этой области часть пикселов
является выделенной, а часть – нет.
Графический редактор GIMP
Изображения, обрезанные с разными значениями
параметра «растушевка»
Графический редактор GIMP
Режимы выделения
Одиночное выделение – в документе может
быть выделена только одна область. Если
попытаться выделить что-нибудь еще, первое
выделение снимется.
Объединение выделений – в документе можно
выделить одновременно несколько областей.
Вычитание выделений – из более раннего
выделения вырезается часть, ограниченная
более поздним выделением (если области
выделения накладываются друг на друга, т.е.
имеют общую часть).
Пересечение выделений – из двух выделенных
областей остается только общая их часть.
Графический редактор GIMP
Инверсия выделения
Инвертировать выделение – значит сделать
выделенную
область
невыделенной,
а
невыделенную – выделенной.
Для этого в верхнем меню нужно выбрать
Выделение → Инвертировать.
Графический редактор GIMP
Тоновая и цветовая коррекция фотографий
в редакторе GIMP.
Инструменты тоновой и
цветовой коррекции
могут воздействовать как
на все изображение
целиком, так и на
выделенную область.
Все инструменты
доступны в меню Цвет.
Графический редактор GIMP
Инструменты тоновой коррекции изображения
Тоновая
коррекция
обеспечивает
правильное
распределение
яркостей
пикселей в изображении.
Оптимальным считается такой
диапазон, в котором самые
темные
области
являются
абсолютно черными, самые
светлые – белыми, а остальные
цвета
распределены
равномерно.
Графический редактор GIMP
Тоновая и цветовая коррекция фотографий
в редакторе GIMP.
Яркость - Контраст
Графический редактор GIMP
Инструменты цветовой коррекции
изображения
Цветовой баланс
позволяет настроить
баланс цветов. Передвигая
ползунки в сторону какоголибо цвета, вы
увеличиваете его
содержание и ослабляете
цвет на противоположном
конце шкалы в выбранном
вами изменяемом
диапазоне (тени, полутона,
светлые части).
Графический редактор GIMP
Инструменты цветовой коррекции
изображения
Тонирование – позволяет сделать
изображение монохромным.
Постеризация – уменьшает количество
цветов до заданного уровня.
Обесцвечивание – делает изображение
черно – белым.
Графический редактор GIMP
Инструмент Тон/Насыщенность
Работает и над цветовой,
и над тоновой коррекцией.
Тон отвечает за
цветовой баланс
Освещенность - служит
для
осветления
либо
затемнения рисунка
Насыщенность
позволяет отрегулировать
интенсивность цветов.
Перекрытие
–
определяет,
насколько
цветовые
диапазоны
пересекаются.
Графический редактор GIMP
Диалог
Слои
Графический редактор GIMP
Контекстное меню слоя.
Графический редактор GIMP
Контекстное меню слоя.
Графический редактор GIMP
Хэдер сайта
Хэдер сайта –картинка или анимации,
находящаяся в самом верху сайта.
Размеры ее небольшие: ширина максимум на
весь экран, а высота примерно 2-3 см.
Изображать на хэдере можно все, что угодно,
но нужно стараться поддерживать общую тему
сайта. Также в хэдере можно размещать не
только надписи, но логотип самой организации.
Не забывайте о размерах и объеме (весе)
изображений на хэдере!!
Графический редактор GIMP
Хэдер сайта
Документ
Категория
Презентации по информатике
Просмотров
16
Размер файла
9 000 Кб
Теги
1/--страниц
Пожаловаться на содержимое документа