Элементы веб

PHOTOSHOP
Лекция 1: Основы работы.
1
Photoshop – мощный инструмент для подготовки графики в веб-дизайне. Помимо обычных
функций графического редактора, он позволяет нарезать и оптимизировать графику специально для
размещения на веб-сайтах, обладает широким спектром дополнений, предназначенных для различных
операций над изображениями (так называемые фильтры и плагины). Так же имеется развитый
инструментарий для сканирования и последующей обработки печатных материалов и фотографий.
Механизм записи совершаемых действий позволяет обрабатывать большое количество однотипных
материалов. Все эти, а так же многие другие функции позволяют графическому редактору Photoshop
занимать одно из лидирующих мест в области работы с графикой для Web.
Рассмотрим подробнее особенности редактора и типичные инструменты подготовки
изображений.
Фотошоп – один из первых редакторов, ориентированных на работу с фотографиями, а так же –
первый редактор, в обиход которого вошло понятие слоев.
Слой – это часть изображения, с которой можно работать отдельно от остального изображения.
То есть, все применяемые фильтры, инструменты, эффекты будут ограничены только текущим слоем.
Изображение можно делить на слои, слои можно комбинировать, сводить, менять порядок
расположения и т.п. Представьте себе, что Вы рисуете на абсолютно прозрачной бумаге разные части
изображения и потом складываете их в стопку, чтобы получить целое изображение – это и будет работа
со слоями. В чем преимущество такой системы? Очень просто – части изображения становятся
независимыми друг от друга, позволяя применять инструментарий только к требуемым частям
изображения.
Пример: если мы нарисуем фон на одном слое, надпись – на другом, картинку – на третьем, то
мы получим возможность передвигать картинку и надпись независимо от фона и друг от друга, не
пользуясь инструментами типа «копировать», «вставить», можем изменять, допустим, цвет и размер
надписи, не затрагивая остальные элементы.
Рассмотрим работу в Фотошопе на примере подготовки серии фотографий для web-галереи.
Открыть фотографии можно несколькими способами:
1. FileOpen, переходим в каталог с изображениями, выделяем мышкой или кнопками (клик
мышкой с зажатым Shift или Ctrl позволяет выделить группу файлов) и нажимаем кнопку «Открыть».
2. Переходим в Windows в нужную папку, выделяем файлы и перетаскиваем их на рабочую
область Фотошопа.
Второй способ проще, он позволяет открыть в Фотошопе файлы сразу из нескольких папок, не
совершая лишних нажатий.
Количество открытых в Фотошопе файлов может быть каким угодно и ограничивается только
объемом оперативной и виртуальной памяти. Как правило, если памяти не хватает, Фотошоп
предупреждает об этом и не позволяет открывать файлы дальше (на моем веку количество открытых
файлов в Фотошопе достигало 80).
Постольку поскольку Фотошоп позволяет открывать несколько файлов сразу, то становится
возможным копировать из файла в файл слои, надписи, участки изображений или изображения
целиком.
Каждое изображение открывается в своем окошке, в заголовке которого прописано название
файла, процентное отображение на экране и палитра.
Размеры каждого окна можно менять, окна можно сворачивать и разворачивать – в общем,
работать с ними, как с обычными окнами Windows. Свернем все окна и развернем одну из фотографий
(photo002.jpg). В заголовке мы видим, что фотография отображается в 100%-виде – то есть, один к
одному на экране.
Уменьшать – увеличивать изображение можно используя панель Navigator (вверху справа,
если ее нет, включаем путем нажатия в главном меню WindowsNavigator). Кнопочки с
треугольниками рядом с процентами позволяют уменьшать и увеличивать масштаб изображения.
Внимание! При этом изменяется только отображение на экране, реальные размеры изображения
не меняются! При этом, в масштабе, отличном от 100% изображение может искажаться, поэтому все
изменения нужно оценивать в масштабе 100%. Обратите внимание на рамку в окне навигатора при
масштабе, большем 100%. Эта рамка показывает видимую часть изображения. Двигая ее мышкой,
можно быстро попасть в требуемую часть изображения. Уменьшать-увеличивать масштаб можно так же
PHOTOSHOP
Лекция 1: Основы работы.
2
инструментом Zoom, расположенным на панели инструментов слева (горячая клавиша - Z). Простой
клик на изображении увеличивает, клик с нажатой клавишей Alt уменьшает изображение.
Теперь разверните фотографию photo009.jpg и обратите внимание на то, что в заголовке
написано 50%, что означает, что реальный размер фотографии на самом деле в два раза больше.
Промасштабируем ее, используя панель навигатора, до 100%.
Конечно же, такое изображение сложно смотреть на экране, поэтому его необходимо уменьшить.
Для изменения реальных размеров изображения используется команда ImageImage Size… в
главном меню.
Здесь мы видим размер изображения в пикселах (в верхней группе) и в сантиметрах при
заданном разрешении на печать (в нижней группе). Нижняя группа нас не интересует, поскольку она
подготавливает размеры для вывода на принтер, нас интересует верхняя часть. Помня, что
минимальный размер экрана 800х600 пикселов, мы должны сделать изображение чуть-чуть меньше – я
предлагаю остановиться на 640х480.
Введя ширину (width), можно заметить, что высота (height) изображения автоматически
поменялась. Это означает, что включена опция сохранения пропорций изображения – т.е., меняя один
параметр, можно не беспокоится о том, что изображение изменится непропорционально – Фотошоп сам
рассчитает значение второго параметра. Отключить эту опцию можно, убрав галочку с Constrain
proportions внизу окна.
Самый нижний параметр означает алгоритм изменения изображений – по умолчанию стоит
самый лучший, но медленный (bicubic). При надобности его можно сменить, но тогда после изменения
размеров на изображении будут заметны пикселы (иногда это может потребоваться для достижения
какого-либо эффекта).
Итак, мы вводим желаемые цифры (640 вверху или 480 внизу) и нажимаем OK.
Включаем 100% масштаб отображения и видим, что фотография теперь без проблем умещается
на экране.
То же самое проделываем с фотографией photo008.jpg.
Теперь научимся поворачивать изображение на произвольные углы и работать с рамками.
Рамки – это инструмент, позволяющий временно ограничить область работы на каким-то
участком изображения. Инструмент «Рамка» находится в левом верхнем углу панели инструментов и
может вызываться горячей клавишей M. Нажав на иконку инструмента и немного подержав, мы
увидим, что выпадет меню с целыми четырьмя видами рамок – первая рамка прямоугольной формы,
вторая – эллиптической, третья – выбирает одну произвольную строку пикселов, четвертая – один
столбец пикселов.
Сейчас нам понадобится выделить все изображение, то есть, нам подойдет прямоугольная рамка.
Выбираем ее, изменяем масштаб изображения на 50% и выделяем все изображение рамкой. Лучше
всего это сделать так – начните выделять выше и левее всего изображения, а закончите – ниже и правее,
прямо на нерабочей области окна. Эту же операцию можно продублировать, выбрав в главном меню
SelectAll.
Теперь нажимаем в главном меню EditFree Transform или нажимаем Ctrl+T и входим в режим
свободного изменения изображения. Внимание! Изменение изображения в этом режиме происходит
абсолютно независимо от его изначальной формы – то есть, его можно вытянуть, сплющить, извернуть,
повернуть – в общем, все вплоть до того, что свернуть в трубочку. Поэтому следует быть осторожным –
пропорции в этом режиме значения не имеют и, чтобы при изменении размеров сохранить пропорции
(если это возможно), следует удерживать клавишу Shift. При ошибке редактирования в таком режиме
можно отказаться от всех изменений, нажав клавишу ESC, или отменить последнее действие, нажав в
главном меню EditUndo (горячая клавиша – Ctrl+Z). Если же необходимо подтвердить сделанные
преобразования, нажимаем Enter.
Вернемся к фотографии – нам нужно ее повернуть так, чтобы линия горизонта была
горизонтальной. Для этого отводим курсор за пределы изображения, пока он не пример вид изогнутой
стрелочки, и начинаем аккуратно поворачивать изображение, нажав и не отпуская левую кнопку мыши.
Когда линия горизонта встанет примерно горизонтально, можно отжать клавишу.
PHOTOSHOP
Лекция 1: Основы работы.
3
При этом можно заметить, что все изображение стало каким-то ступенчатым и некрасивым. В
этом нет ничего страшного – после подтверждения всех преобразований Фотошоп пересчитает размеры
изображения по своим алгоритмам, вернув фотографии ее сглаженный вид.
После поворота мы видим, что остались белые пятна по бокам изображения – то есть, повернутое
изображение необходимо увеличить. Зажимаем Shift (для сохранения пропорций), берем мышкой
какой-либо угол изображения и растягиваем его, пока изображение не перекроет белые участки. То же
повторить с остальными углами.
Как только белых углов не останется, нажимаем Enter для подтверждения преобразований. Вы
увидите, что изображение пересчиталось и стало вновь аккуратным, в чем можно убедиться, увеличив
масштаб до 100%.
Из этого упражнения можно увидеть, что в Фотошопе есть изображение и так называемый холст,
на котором оно расположено. Можно поворачивать изображение относительно холста, но бывают
случаи, когда нужно повернуть изображение вместе с холстом, например, на фото photo005.jpg.
Попробуйте повернуть его с помощью предыдущего способа, и Вы увидите, что повернется лишь
изображение, холст останется в прежнем положении. Для поворота изображения вместе с холстом
служит опция ImageRotate Canvas. При этом Вы можете заметить, что вращать холст можно только с
шагом 90 градусов. При этом у нас есть возможность повернуть на 90 градусов по часовой стрелке
(CW), на 90 градусов против часовой (ССW), 180 градусов и развернуть изображение на произвольный
угол, соответственно увеличив холст (Arbitrary…). Существует так же возможность отобразить холст
зеркально слева направо (Flip horizontal) и сверху вниз (Flip vertical).
Сейчас мы научимся еще нескольким интересным трюкам, а именно – изменять резкость,
контраст и яркость изображения.
Для изменения яркости и контраста изображения photo005.jpg воспользуемся опцией главного
меню Image  Adjustments  Brightness/Contrast. Здесь есть два ползунка – Brightness (Яркость) и
Contrast (Контраст) – измените их так, чтобы казалось, будто на фотографии ясный день. Все изменения
ползунков тотчас же отображаются на изображении, но применятся эти изменения только после
нажатия кнопки OK (Cancel, соответственно, отменит текущие изменения).
Теперь изменим резкость на фотографии photo001.jpg
Для наведения резкости на изображение служит специальный фильтр, который находится в
главном меню FilterSharpenUnsharp Mask… Рассмотрим поподробнее опции этого фильтра. Вверху
справа находится окно предварительного просмотра, которым можно пользоваться, если отключена
галочка «Preview» для предварительного просмотра на исходном изображении. Мы не будем отключать
эту полезную опцию и будем отслеживать изменение резкости прямо на фотографии. Параметр Amount
означает силу резкости, параметр Radius – радиус применения алгоритма резкости, параметр Threshold –
величину его воздействия на изображение. Для работы с фотографией рекомендуется оставлять
Threshold на нуле, Radius – от 0 до 1,5, Amount – в зависимости от размытия изображения.
Отрегулировав параметры, подтверждаем их кнопкой OK.
Для быстрого повышения резкости можно воспользоваться фильтрами FilterSharpenSharpen
(Повысить резкость) и FilterSharpenSharpen More (Повысить резкость больше). Результат Вы
увидите немедленно после нажатия. Отменить действие можно клавишами Ctrl+Z или опцией
EditUndo.
Для понижения резкости (размытия) служат следующие фильтры: FilterBlurBlur (размыть),
FilterBlurBlur More (размыть больше), результат этих фильтров отображается немедленно, и
FilterBlurGaussian Blur (размытие по Гауссу), где можно задать вручную силу размытия. Остальные
фильтры раздела FilterBlur служат для художественного размытия и мы их рассматривать не будем.
Существует еще несколько полезных приемов при работе с фотографией (их можно опробовать
на любой фотографии), но перед этим я хочу рассказать об еще одной возможности Фотошопа – это
список изменений. Для каждого файла Фотошоп хранит определенное количество изменений (20
последних по умолчанию), которые можно увидеть в списке History в правой части экрана (если этого
списка нет, идем в главное меню WindowHistory). Активируйте, например, photo005.jpg и там
появится список всех изменений, проведенных с этим файлом. Внимание! По умолчанию этот список
ограничен 20 последними изменениями, увеличить количество которых можно в главном меню
EditPreferences->General…, в четвертой строчке в окошке History States. Обычно хватает 50 последних
PHOTOSHOP
Лекция 1: Основы работы.
4
изменений, однако, следует помнить о том, что увеличение количества запоминаемых изменений
сказывается на потребляемой памяти.
Таким образом, мы получаем возможность следить за сделанными изменениями и отменять
сколько угодно последних изменений путем простого выделения мышкой и нажатием кнопки с
корзинкой внизу окна History для удаления выделенного количества изменений. После этого система
выдаст подтверждение на удаление их из списка, где можно согласиться (OK) или отказаться (Cancel).
Возьмем любую фотографию (например, photo006.jpg) и попробуем некоторые другие приемы
работы. Кстати, если выделить область уже упомянутым инструментом «Рамка» (клавиша M), то можно
увидеть, что сделанные изменения касаются только выделенной области.
Рассмотрим некоторые полезные опции раздела ImageAdjustments.
Изменение цветового баланса (Color Balance, Ctrl+B) позволяет перераспределить основные
оттенки изображения между основными цветовыми компонентами.
Изменение цветосочетаний/насыщенности (Hue/Saturation, Ctrl+U) позволяет изменить
цветовой набор (Hue), насыщенность (Saturation) и яркость (Lightness) изображения. Это очень мощный
инструмент по цветоконтролю изображения.
Инвертировать цвета (Invert, Ctrl+I) – инвертирует все цвета выделенной области или всего
изображения на противоположные.
Вариации (Variations…) – позволяет добавить необходимый цвет к изображению и изменить
яркость. Этот инструмент применяется в случаях, когда необходимо изменить тональность изображения
или отобразить его в определенных тонах (например, синих или красных).
Еще одно замечание – после открытия изображения, если необходимо с ним работать,
следует проверить, чтобы режим цветов изображения был отличным от Indexed. Режим
изображения отображается в заголовке, сменить его можно в меню ImageMode.
Рассмотрим несколько иных режимов:
Grayscale – режим черно-белого изображения. В этом режиме работает большинство опций и
фильтров, но при этом пропадают некоторые возможности инструментов цветопреобразования.
Indexed – специальный режим ограниченной палитры, применяемый в GIF и PNG изображениях.
Большинство фильтров и инструментов не работают или работают неадекватно.
RGB – режим полноцветного отображения, в нем работают все фильтры и инструменты.
CMYK – полиграфический режим полноцветного отображения, в нем так же работают все
фильтры и инструменты.
Lab – режим полноцветного отображения для работы с каналами яркости.
Multichannel – специальный режим для работы с каналами определенных цветов.
Мы в основном будем работать в RGB-режиме.
Еще один полезный инструмент – Обрезание (ImageCrop) – работает только при выделенном
рамкой участке изображения и обрезает те участки изображения, которые не попадают в рамку.
Применяется тогда, когда нужно сохранить только выделенную часть изображения.
Есть так же огромное количество фильтров, расположенных в меню Filter, имеющих
значительные возможности для обработки изображений, но в данном курсе затронуты не будут.
Теперь рассмотрим возможности пакетной обработки изображений и оптимизации их для Web.
Сначала сохраним наши файлы, что можно сделать в меню FileSave As… (горячая клавиша
Shift+Ctrl+S). В появившемся диалоге нажимаем Save, соглашаемся с тем, что надо перезаписать уже
существующий файл и попадаем в меню оптимизации файла формата JPG. Устанавливаем Quality в
значение 10-12 и соглашаемся. Повторяем это для всех наших файлов, но не закрываем их!
Теперь создадим для галереи уменьшенные копии наших фотографий и обведем каждую
уменьшенную копию рамочкой.
Выбираем любую фотографию и уменьшаем ее размер в 4 раза (ImageImage Size…). Кстати,
для того, чтобы не считать, сколько будет 640/4, можно включить процентное отображение размеров
картинки, выбрав справа от ширины или высоты вместо pixels percent. Уменьшение в 4 раза
соответствует 25% (сам значок % писать не надо), что и вписываем и подтверждаем изменения. Не
забываем о том, что нам можно поменять только ширину или высоту, второй параметр поменяется
автоматически. Размер изображения становится равным 160х120.
PHOTOSHOP
Лекция 1: Основы работы.
5
После сильного уменьшения изображения целесообразно повышать его резкость, что и сделаем
командой FilterSharpenSharpen.
Обведем изображение рамкой, скажем, шириной в 2 пиксела. Для этого выделяем все
изображение инструментом «Рамка» (можно командой SelectSelect All или горячей клавишей Ctrl+A)
и заходим в меню EditStroke… Это – инструмент обведения выделенной части рамкой. Здесь мы
задаем, где и как будет отрисована рамка. Первое поле показывает толщину рамки. Ставим “2 px” (2
пиксела) или другую желаемую ширину. Ниже можно установить желаемый цвет рамки, кликнув по
прямоугольнику «Color». Ниже группа Location показывает, где будет отражена рамка – внутри области
выделения (Inside), снаружи (Outside) или по центру (Center). Нас устроит Inside. Остальные параметры
оставляем по умолчанию и соглашаемся.
Снимаем выделение (Ctrl+D или просто кликнув в нерабочую часть изображения) и видим, что
вокруг фотографии появилась рамка.
Теперь оптимизируем и сохраним файл для Web. Для этого вызовем диалог сохранения для
Web путем вызова меню FileSave for Web… (горячая клавиша Alt+Ctrl+Shift+S). Рассмотрим
подробнее опции окна сохранения. Внизу экрана, под изображением, расположена информация о
формате файла, размере и информации для определения времени скачивания (которое все равно
неверно определяется для наших телефонных линий, так что не обращаем на него никакого внимания).
Справа расположены опции (Settings) оптимизации. Воспользуемся ими. Вверху можно выбрать
уже настроенные варианты, но мы будем настраивать оптимизацию сами. Чуть ниже можно выбрать
формат изображения – для фотографии подойдет JPEG. Справа от выбора формата отмечаем галочку
Optimized, что позволит несколько сократить размер файла. Далее настраиваем параметры качества
(Quality) и сглаживания (Blur), обращая внимание на изменение изображения и размер файла. После
экспериментов можно остановиться на Quality 50-70 и Blur 0. В некоторых случаях можно использовать
лучшее качество, если изображение сильно страдает. Размер файла для уменьшенной версии
желательно делать не более 15Кб.
Можно попробовать оптимизировать файл в других форматах (GIF, PNG) и посмотреть, каких
размеров будет файл при этом. В параметрах GIF и PNG при оптимизации можно изменять параметры
Colors (Количество цветов), Lossy (зашумление) и Dither (размытие), остальное оставить по умолчанию.
Вернемся к JPEG, 60. Нажмем кнопку Save в самом верху. Создаем каталог для уменьшенных
копий (третья верхняя кнопка), переходим туда и нажимаем Save. Закрываем файл в Фотошопе путем
нажатия на правую верхнюю кнопку окна файла. Нажимаем No в появившемся окне.
Теперь перед нами еще восемь файлов, с которыми нужно проделать аналогичную процедуру.
Долго? Я тоже так думаю. Поэтому разворачиваем следующую фотографию и обратимся к
замечательному инструменту автоматизации Фотошопа – Actions. Это одно их окон справа. Если его
там нет, нажимаем WindowActions в главном меню. Создаем свой набор actions, нажав третью справа
внизу кнопку (Create action set), вводим имя набора, соглашаемся. Теперь в этот набор мы можем делать
записи различных действий. Давайте сделаем запись уменьшения размера, обведения рамкой,
сохранения и закрытия файла. Для этого выделяем созданный набор actions, нажимаем вторую справа
внизу кнопку (Create New Action), вводим имя записи и соглашаемся. Вы видите, что активировалась
кнопка записи, остановить которую можно путем нажатия на кнопку с квадратом рядом. Нам пока это
не надо.
Повторяем все, что мы делали с предыдущей фотографией (создаем рамку, сохраняем для Web,
закрываем…) и нажимаем кнопку остановки записи. Теперь все наши действия записались, после чего
можно просто развернуть следующее изображение и нажать кнопку проигрывания записи (кнопка с
треугольником). Повторив проигрывание записи для каждого изображения, можно закрыть Фотошоп и
приступать к написанию html-кода галереи.