- •Содержание
- •Глава 1. Виды компьютерной графики, их характеристика 6
- •Глава 2. Графический редактор adobe photoshop 19
- •Глава 3. Подготовка графики для web и мультимедиа 81
- •Глава 4. Основы web-дизайна. Язык html 90
- •Глава 5. Сайтостроение в Macromedia Dreamweaver 103
- •Глава 6. Проектирование web-сайта 122
- •Введение
- •I. Растровая, векторная, фрактальная графика
- •Глава 1. Виды компьютерной графики, их характеристика
- •II. Разрешение растровых изображений
- •1. Разрешение экрана монитора:
- •III. Изменение размеров, разрешения изображения
- •IV. Программы – графические редакторы двумерной графики
- •V. Форматы графических файлов
- •1. Критерии выбора формата файла
- •2. Методы сжатия информации (используемые в разных форматах файлов)
- •3. Виды форматов графических файлов
- •Глава 2. Графический редактор adobe photoshop
- •I. Выделение областей в Photoshop
- •4. Выводы: что можно делать с выделенной областью?
- •II. Инструменты рисования. Выбор цвета
- •III. Многослойные изображения
- •IV. Создание теней, отражений
- •V. Цветокоррекция
- •Цветокоррекция с помощью Пипеток
- •Особенности действия Пипеток :
- •Цветокоррекция Белой и Черной пипетками
- •VI. Ретушь – устранение дефектов фото
- •Типы дефектов: технические дефекты (царапины, пятна, отслоение эмульсии) и художественные (неправильная композиция, освещенность, неудачный фон).
- •1. Инструменты ретуши, коррекции
- •1.1. Инструмент `Штамп`
- •1.2. Инструмент `Восстанавливающая кисть`
- •1.3. Инструмент `Заплатка` (Patch)
- •1.4. Инструментом `Красные глаза` убираем дефект
- •1.5. Инструмент `Замена цвета`
- •1.6. Инструменты Размытие , Палец (Размазывание) , Резкость
- •1.7. Инструменты Осветлитель , Затемнитель , Губка
- •1.8. Инструмент Обрезка (Рамка)
- •2. Увеличение резкости
- •2.1. Инструменты увеличения резкости отдельных элементов (вручную)
- •2.2. Фильтры для увеличения резкости
- •2.2.1. Автоматические фильтры
- •2.2.2. Настраиваемые фильтры
- •3. Профессиональная ретушь фото:
- •Этап I. Создание снимков фото в палитре История
- •Этап II. Фильтр `Пыль и царапины`
- •Этап IV. Удаляем крупные дефекты Штампом
- •Этап V. Завершение ретуши: фильтр `Контурная резкость`
- •Методика использования фильтра `Контурная резкость`
- •VII. Использование каналов
- •2. Использование альфа-каналов
- •3. Создание рамок для фото, используя альфа-каналы
- •4. Получение черно-белых изображений (из цветных)
- •VIII. Векторные инструменты, контуры в Photoshop
- •2. Работа с контурами (Paths): обводка, заливка и пр.
- •3 . Векторные инструменты группы Перо (Pen)
- •С Установка стиля нового слоя вободное перо : создание контуров, выделений
- •Инструменты редактирования контуров
- •Глава 3. Подготовка графики для web и мультимедиа
- •I. Оптимизация – уменьшение объема файла
- •Х Таблица 5 арактеристики растровых форматов файлов
- •II. Создание рисунка на прозрачном фоне (без фона)
- •III. Анимация: разработка анимированных баннеров
- •Глава 4. Основы web-дизайна. Язык html
- •I. Основные понятия. Редакторы html
- •II. Структура html-кода страницы
- •III. Html-теги и атрибуты
- •Обязательные тэги
- •Форматирование абзацев, заголовков
- •Создание гиперссылок
- •Форматирование шрифта
- •Вставка изображения
- •Создание списков
- •Создание таблиц
- •Описание фреймов
- •Комментарии
- •Глава 5. Сайтостроение в Macromedia Dreamweaver
- •I. Интерфейс Dreamweaver. Начало работы
- •Начало работы в Dreamweaver
- •II. Принципы языка html и работа в режиме html-кода
- •III. Работа в режиме дизайна: форматирование текста
- •Форматирование абзацев
- •Создание списков
- •IV. Создание сайта в Dreamweaver
- •1. Настройки окна `Определение сайта`
- •2) В категории Удалённая информация (Remote Info)
- •3) В категории Примечания к дизайну (Design Notes)
- •2. Установка параметров страницы и русской кодировки
- •3. Разметка макета web-страницы
- •4. Настройка цвета страницы
- •5. Вставка рисунков
- •6. Ввод текста web-страницы
- •7. Настройка гиперссылок
- •Создание остальных страниц сайта и настройка ссылок
- •Рисунки в качестве ссылок. Карты изображений
- •Глава 6. Проектирование web-сайта
- •Этапы проектирования сайта
- •Рекомендуемая литература
- •Содержание этапов работы по проектированию сайта
- •241036, Г. Брянск, ул. Бежицкая, 14
III. Изменение размеров, разрешения изображения
М
Рис.
4. Окно настройки размера изображения
Если же надо изменить размер рисунка в см (в Photoshop), используйте команду меню Изображение /Размер изображения (Image /Image Size).
Откроется окно (рис.4), в нём в поле Количество пикселей (Pixel Dimensions) по умолчанию отображаются размеры рисунка на экране в пикселях.
Рядом с заголовком `Количество пикселей` указан объем, который рисунок занимает на диске (например, 208 К).
В группе настроек Размер документа (Document Size) отражены размеры изображения (в см), которые оно будет иметь при распечатке на принтере.
Ниже, в поле Разрешение (Resolution) указано разрешение рисунка. Напомним:
если рисунок готовите для показа на экране, достаточно низкого разрешения 72 или 96 пикс/дюйм. Если для распечатки на бумаге, то нужно 200-600 пикс/дюйм (чем выше, тем четче, качественнее будет выглядеть рисунок при распечатке).
Итак, окно Размер рисунка позволяет и узнавать, и изменять параметры рисунка.
Но проблема растровой КГ: размер рисунка не всегда можно изменять без ухудшения его качества (прежде всего размер рисунка для печати).
Поэтому при изменении параметров рисунка вам предоставляются 2 варианта, задаваемых состоянием флажка Тип масштабирования (Resample Image) (на рис.5 внизу)
а
б
Рис. 5. Два варианта изменения параметров рисунка, задаваемые флажком Тип масштабирования
Вариант 1. Если флажок не поставлен (рис.5 слева), то "абсолютный" размер рисунка на экране в пикселях фиксируется. Зато можно изменять настройки для печати рисунка (размеры в см и разрешение). Причем они будут изменяться связанно, обратно-пропорционально, чтоб количество пикселей в рисунке осталось то же.
Так, если надо в 2 раза уменьшить размер (вы введёте в см цифры в 2раза меньше), то разрешение автоматически увеличится в 2 раза. Поэтому количество точек в рисунке останется прежним, т.е. детализация, четкость на печати будут как на экране
Но увеличивать размер рисунка для печати (без потери качества) возможно не всегда. Так, если надо увеличить размер в 2 раза, то разрешение автоматически уменьшится в 2 раза. Но для печати нужно минимум 200 пикс/дюйм (среднее качество распечатки), лучше 300. Поэтому увеличивать размер рекомендуем только у картинок с изначально высоким разрешением, иначе распечатка получится размытая, плохая (если при увеличении размера рисунка разрешение уменьшится ниже 150-200).
Вариант 2. Если флажок установлен, размер и разрешение рисунка можно изменять независимо (рис.5 справа). Так, при уменьшении рисунка (в см) разрешение остаётся то же. Для этого Photoshop при уменьшении размера рисунка просто удаляет из него `лишние` пиксели, а при увеличении – добавляет новые – интерполирует.
И
Рис.
6.
Масштабирование
(вверху), интерполяционное увеличение
(внизу)
Изображение выше (рис. 6) обозначает просто масштабирование в 2 раза растровой картинки из 4-х пикселей:
количество пикселей не изменилось (осталось 4), а размер картинки увеличился за счет увеличения размера пикселей.
Изображение ниже иллюстрирует интерполяцию: кроме 4-х исходных пикселей, появилось еще 12 интерполяционных. Их "додумал" компьютер на основе одного из 5 способов интерполяции (его можно выбрать – см. рис. 4 внизу).
Рассмотрим предлагаемые способы интерполяции:
Бикубическая интерполяция: способ даёт лучший результат для фото (для изображений со сложными переходами цвета и формы).
Билинейная интерполяция: даёт средний результат при меньших затратах ресурсов ПК
По соседним точкам: подходит для одноцветных, простых форм, для которых важно, чтоб они не были размыты. Пример - чертежи.
Бикубическое сглаживание (появилось в Photoshop CS) – для изображений высокого качества при увеличении их размеров.
Бикубическая резкость: для качественных картинок при уменьшении их размеров.
При задании более высокого разрешения Photoshop тоже просто добавляет пиксели
СОВЕТ. Не воспринимайте интерполяцию (2й вариант настроек) как хороший метод увеличения рисунка. Если издательство требует рисунки разрешения 300 dpi, то увеличение его до 300 в рисунке, взятом из Интернета (т.е. с разрешением 72 dpi), ничего не даст. Мелкие детали, которые были бы в "настоящих" 300 dpi, не появятся - увеличатся только те, что были видны на исходном изображении.
