УРОКИ PHOTOSHOP (Часть 1) В предыдущей главе вы познакомились с интерфейсом и инструментами редактора
растровой графики Photoshop. Еще раз повторяем, что данная книга не является
учебником по Photoshop. Поэтому подробной информации по применению всех
описанных инструментов и возможностей данного редактора вы здесь не найдете. Создание и обработка текстов в графическом редакторе весьма актуальны в Web-дизайне, а также при разработке рекламных буклетов, объявлений и т. п. Речь идет о создании красивых и небольших (по количеству слов) заголовков. Этой задаче и посвящен данный раздел. Приведенные примеры следует рассматривать как опорные. Советуем вам поэкспериментировать с выбором параметров, фильтров и т. п. Начнем с самой простой и часто встречающейся в Web-дизайне задачи —
создания объемных заголовков (надписей). Эффект объемности легко получить
за счет иллюзии тени, отбрасываемой буквами заголовка. Хотя это далеко
не единственный путь, ведущий к указанной цели, рассмотрим данный прием
подробнее. Рис. 172. Слово на прозрачном фоне Далее выполним команду Layer>Layer StyIe>Drop Shadow (Слой>Стиль слоя>Отбросить тень). Откроется диалоговое окно Layer Style (Стиль слоя), в котором можно выбрать параметры тени. Если установлен флажок Drop Shadow, то тень будут отбрасывать буквы заголовка. Если установить флажок Inner Shadow (Внутренняя тень), то цветом тени будет выделен контур букв. Можно одновременно установить оба названных флажка. Поэкспериментируйте с выбором различных значений параметров в окне Layer Style. В частности, вы можете задать угол падения света от виртуального источника (Angle), дистанцию между буквами и тенью (Distance), прозрачность (непрозрачность) тени (Opacity) и др. Вы увидите, сколько интересных эффектов можно создать для текста (и не только для текста). Вместо текста можно использовать любое изображение. Рис. 173. Окно параметров стиля слоя, в котором можно задать параметры тени Рис. 174. Текст отбрасывает тень Для начала создаем новый документ (файл) примерно 600x600 пикселов,
в режиме RGB, на прозрачном фоне. Затем заливаем черным цветом текущий
слой. Рис. 174. Исходный текст для эксперимента Теперь применим фильтр Filter>Blur>Gaussian Blur (Фильтр>Размытие>Гауссовское размытие) с радиусом размытия 2 пиксела. В результате наш текст должен стать немного размытым. Далее, применив фильтр Filter>Stylize>Solarize, мы получаем изображение нерезкого контура нашего текста.
Рис. 175. Текст после применения фильтра Blur>Gaussian Blur Рис. 176. Текст после применения фильтра Stylize >Solarize Обратимся к палитре Layers (Слои). Для включения
этой палитры выполняем команду Window>Show Layers
(Окно>Показать Слои). Скопируем текущий слой в новый путем перетаскивания
его миниатюры на значок Рис. 177. Палитра Layers
— здесь выполняем копирование текущего слоя QWERTY в новый слой QWERTY
copy. Активный слой всегда выделен синим цветом Рис. 179. Мы инвертировали а затем повернули на 90° по часовой стрелке исходное изображение Рис. 178. Исходный текст после его перевода в полярную систему координат Полученное изображение инвертируем. Самый удобный для этого способ —
нажать комбинацию клавиш <ctrI>+<I>. Повернем изображение
на 90° по часовой стрелке (команда Image>Rotate
canvas>90°cW). Рис. 180. Применение фильтра Filter>Stylize>Wind, который имитирует смазанность от дуновения ветра Рис. 81. После автоматической регулировки уровней, текст получил темный оттенок Для этого используем уже знакомый вам фильтр Filter>Distort>Polar coordinates, но здесь обязательно изменяем значение параметра на противоположное — Rectangular to Polar. После правильного выполнения вышеуказанных манипуляций наш текст вернется в первоначальное горизонтальное положение, выровняется и станет почти читаемым. Однако проявятся и новые его качества, ради которых, собственно, все это и делалось. Рис. 182. В результате всех действий мы получили прежний текст с интересным свечением (или сиянием) Настало время вспомнить и о первом слое QWERTY. Получившийся у нас текст со свечением имеет размытые границы, что делает его неудобным для чтения. Чтобы оформить границы букв, мы и используем первоначальный слой с контуром. Обратимся к палитре Layers и перетащим миниатюру нижнего слоя (с контурной надписью) наверх так, чтобы он занял первую строку в списке слоев. Теперь зададим ему режим смешивания Screen (или <ctrl>+<Shift>+<E>) для объединения слоев. Рис. 183. Результат вполне читаемый текст со свечением Следующий способ представления текста называется «Стеклянный текст».
Особенность его заключается в том, что текст не просто является прозрачным,
но и создает некоторое преломление изображения подложки.
Как вы уже знаете, при использовании инструмента редактирования текста Тyре весь текст записывается в отдельный слой. Таким образом, наши фон и текст находятся в разных слоях. Рис. 185. На фоновое изображение наносим текст, который будем делать стеклянным Создаем копию получившегося документа. Для этого используем команду Image>Duplicate. Затем переключаемся в слой с фоновым изображением и заливаем его черным цветом: сначала нажимаем клавишу <D> (чтобы установить черный цвет как цвет переднего плана), а потом — комбинацию клавиш <Alt>+<Backspace>.
Рис. 186. Мы залили весь фон черным цветом, используя комбинацию клавиш <Alt>+<Backspace> После правильно выполненных операций должен получиться белый текст на черном фоне. Выбираем команду Layer>Flatten Image (Слой>Выполнить сведение) для «склеивания» слоев. В палитре Layers (Слои) заметны изменения: у нас остался только один фоновый слой. Теперь, применив гауссовский шум (фильтр Filter>Blur>Gaussian Blur) с значением радиуса (параметр Radius) порядка 5 пикселов, мы получим некоторую размытость границ нашего текста. Сохраним полученные результаты в отдельном файле в формате psd (мы использовали для сохранения файл zapas.psd) — они нам еще пригодятся чуть позже! А пока закрываем этот файл (естественно, после сохранения с помощью команды File>Save As или комбинации клавиш: <Shift>+<ctrl>-t-<S>). Для ускорения операций можно просто нажать <ctrl>+<W>. Рис. 186. А сейчас вернемся к нашему первоначальному документу. Так как после создания
копии этого документа все последующие действия производились только с
копией, после закрытия файла zapas.psd первоначальный документ должен
остаться единственным на вашем рабочем столе. Рис. 188. Используем фильтр Distort>Displace Далее, удерживая нажатой клавишу <ctrl>, щелкнем по текстовому слою на палитре слоев Layers. На искаженном изображении текста должно появиться еще одно изображение того же текста в пунктирном исполнении. Рис. 189. Готовое изображение
-стеклянный текст
Теперь нам останется проделать аналогичные действия еще для двух стилей:
Bevel and Emboss и Satin (Атлас). Их
действие вы и сами сможете оценить. Рис. 191. Вот такой эффект у нас получился. Не бойтесь варьировать параметры — у вас может получиться и другой итог нашего примера. Рис. 192. Окончательный вариант изображения со стеклянным текстом Продолжаем применять различные эффекты для оформления текстов. На сей
раз речь пойдет о выполнении надписей из специфических материалов. Выбор
материала остается за вами. Главное, чтобы конечный стиль текста гармонировал
с той средой, куда вы его желаете вставить. Дело в том, что текст, оформленный
таким образом, лучше всего подходит для оформления заголовков Web-страниц
или для создания различных баннеров. Рис. 193. При отключении инструмента Туре, фон слоя приобретает свой первоначальный цвет, а текст — белым, но с пунктирной окантовкой Теперь перейдем к палитре Слои (Layers). Здесь у нас пока есть только один слой, который автоматически появился при создании документа с белым фоном. Это слой Background (Фон), имеющий белый цвет. Именно сюда теперь надо загрузить маску из канала Alpha 1 (или, что то же самое, из четвертого канала). Помните пунктирную окантовку букв нашего текста? Это и есть маска, которая нам теперь так необходима! Для загрузки этой маски используем комбинацию клавиш <ctrl>+<Alt>+<4> (4 — порядковый номер канала Alpha 1). Рис. 194. Загружаем маску, используя комбинацию клавиш <ctrl>+<Alt>+<4> Как узнать, что маска уже загрузилась? Да очень просто: на первоначальном
белом фоне появится пунктирное начертание того текста, что был в канале
Alpha 1. Заливаем маску черным цветом. Если черный цвет уже установлен
как основной цвет, то проще всего это сделать, нажав комбинацию клавиш
<Alt> + <Del>. Как только маска окрасится черным, ее можно
отключать (<ctrl> + <D>). Рис. 195. Применение фильтра Filter >Blur > Gaussian Blur приводит к размытию текста Для дальнейших операций нам понадобится еще один аналогичный слой. Поэтому
необходимо его создать! Но сначала давайте переименуем наш слой Background
в какой-нибудь другой, например New.
Просто делаем двойной щелчок на миниатюре слоя Background в палитре Слои
(Layers). Появится диалоговое окно New Layer (Новый
слой), предлагающее ввести новое имя слоя. Сделав это, нажимаем кнопку
ОК. Теперь уже можно создавать еще один аналогичный
слой, о необходимости которого мы говорили чуть раньше. Для простоты операций
и экономии времени просто дублируйте имеющийся слой New.
Об этом мы уже тоже несколько раз говорили в предыдущих уроках (перенесите
миниатюру слоя на значок Рис. 196. Итак, мы имеем два абсолютно одинаковых слоя (но с разными названиями). Далее, нам необходимо сдвинуть эти слои относительно друг друга. Для этих целей используем команду Filter>Other>Offset. Причем для первого задаем положительные смещения по 4 пиксела как по вертикали, так и по горизонтали, а для другого, соответственно, отрицательные смещения (то есть, противоположные) по 4 пиксела, также в обоих направлениях. Рис. 197. Для создания сдвига слоев относительно друг друга используем команду Filtet>Other>Offset. В новом окне устанавливаем значения смещения по горизонтали и вертикали Таким образом, мы раздвигаем наши тексты относительно центральной точки
по диагонали в верхний левый и нижний правый углы. Предложение замысловатое,
но когда начнете осуществлять данный этап нашего урока, вам все станет
ясно. Рис. 198. В результате объединения слоев мы увидим тексты из обоих слоев, но с установленным сдвигом Выполняем команду Image>Adjust>curves(<ctrl>+<M>). Откроется окно curves (Кривые). Как вы уже знаете из теоретического материала, изложенного в первой части книги, данное окно позволяет изменять яркость всех пикселов изображения. Здесь мы опытным путем добиваемся снижения яркости средних тонов. Рис. 199. Окно curves: Добиваемся снижения яркости средних тонов Рис. 200. Опытным путем добиваемся снижения яркости средних тонов, чтобы результат получился почти как на рисунке Поэкспериментируем на этом этапе и попытаемся сделать что-нибудь похожее
на то, что получилось у нас в этом примере. Рис. 201. В области Source в списке channel устанавливаем канал, в котором содержится маска В результате поверх имеющегося «суррогатного» текста будет нанесено пунктирное изображение маски. Инвертируем маску (<ctrl>-f<Shift>+<I>). Путем инвертирования маски мы добиваемся того, что выделенным становится все, кроме того, что перекрывает маска. Об этом свидетельствует пунктирная линия по периметру всего документа. Нажимаем клавишу <Del>(<Delete>) для удаления ненужного изображения и фона. Рис. 202. Клавишей <Del> удаляем лишний фон изображения Вот мы уже получили вполне понятный текст с интересной заливкой. Нажимаем
комбинацию клавиш <ctrl>+<D> (для отмены выделения), а потом
<ctrl>+<I> (для инвертирования изображения). Рис. 203. В окне color Balance подбираем оттенки так, чтобы создалась имитация золотого литья Создаем новый слой Layer 1 и заливаем его
черным цветом — это будет фон нашего конечного изображения. В завершение
операции по изготовлению золотого текста необходимо всего лишь правильно
расположить все наши слои. Делаем это в следующей последовательности:
color Balance 1, new, Layer 1. Вот и все.
«Золотой текст» получен. Следующий урок мы назвали «Огненный текст». Результатом нашего эксперимента будет статическое изображение текста в огне. . Рис.204. Создаем новый документ, выполнив команду File >New (<ctrl>+<N> ) Итак, создаем новый документ, в котором будем разрабатывать изображение. Мы выбрали размер этого документа 489x202 пиксела. Этого вполне хватит для создания текста. Задаем черный цвет фона нашего документа. Для этого после создания нового документа фон можно просто залить черным цветом. Набираем нужный текст. Обратите внимание, что в данном случае текст лучше всего располагать ближе к нижней границе документа (ведь буквы у нас будут полыхать в огне, а для этого пламени нужно место). Как вы уже догадались, мы вновь используем свое любимое слово QWERTY. В данном случае мы использовали белый цвет букв, рубленый шрифт и полужирное начертание. Рис. 205. Создаем новый документ, заполнив соответствующие поля окна New Как обычно, сразу создается новый слой —текстовый. Поэтому тут же объединяем
его со слоем фона, используя команду Layer>Flatten
Image (Слой>Выполнить сведение) для объединения слоев. Проследим
на палитре Layers (Слои), что у нас действительно
остался только один слой Background (Фон). Рис. 206. Ближе к нижней границе документа помещаем наше слово для эксперимента Устанавливаем значения параметров фильтра Filter>Stylize>Wind,
имитирующего ветер слева Рис. 207.
Рис. 208. Установим метод Wind (Ветер) для создания смазанного вида Параметр Opacity (Непрозрачность) установим в пределах 80%. Еще раз применим фильтр Wind, но теперь с направлением (Direction) — справа налево (From the Right). Если раньше у нас имелись линии-следы только справа (сверху) от букв, то теперь они добавятся и слева (снизу), но меньшего размера. Используем фильтр Filter>Distort>Ripple с значением параметра Amount равным 48, а параметра Size — Large. Рис. 209. Рис. 210. Применение данного фильтра создаст волнистость изображения. Вернем изображение
в исходное горизонтальное состояние. Для этого применим команду Image>Rotate
canvas>90°ccW. Рис. 211. Текст пылает —
выглядит вполне реально! Данный пример имитирует текст, написанный краской (или кровью), которая
еще не успела подсохнуть, поэтому образовались подтеки. Рис. 212. Набрав исходный текст, отцентрируем его командой Layer > Flatten Image Командой Image>Rotate canvas>90°ccW
(Изображение>Повернуть холст>90° против часовой) поворачиваем исходное
изображение на 90° против часовой стрелки. Так мы получим изображение,
в котором текст читается снизу вверх. Такой поворот необходим для применения
фильтра стилизации под ветер: FiIter>Stylize>Wind
(Фильтр>Стилизация>Ветер). Рис.213. Рис. 214. С помощью команды Image>Adjust>Invert инвертируем изображение. Затем к инвертированному изображению применяем фильтр Filter>Torn Edges. Рис. 215. К инвертированному
изображению применим фильтр Filter>Torn Edges Однако текст у нас остается по-прежнему черным. Если мы хотим создать
текст, написанный кровью, то ему необходимо придать соответствующую красную
окраску. Рис. 216. Панель фильтра Filter>Blur>Gaussian Blur Рис. 217. Конечный вариант изображения — текст в подтеках Как обычно, создаем новый документ с белым фоном и черным шрифтом набираем нужный текст. Рис. 218. Используя команду Select>Load selection, задаем имя нашего выделения. Впрочем, можно оставить и то, что предлагается по умолчанию. Рис. 219. В итоге набранный текст будет побуквенно обведен бегущей пунктирной линией.
Командой Layer>Flatten Image (Слой>Выполнить
сведение) объединяем текстовый и фоновый слои. Рис. 220. Коэффициент кристаллизации cell Size подбираем
чисто опытным путем. Значение около 7—9 будет вполне удовлетворительным.
Повторяем команду Select>Inverse (<Shift>
+ <ctrl> + <I>) и вновь применяем фильтр, на этот раз Filter>Noise>Add
Noise (Фильтр>Шум>Добавить шум). Рис. 221. Рис. 222. Далее размываем полученное изображение, для чего используем очередной
фильтр: Filter>BIur>Gaussian Blur (Фильтр>Размытие>Гауссовское
размытие). Рис. 223. Рис. 224. Предварительно поворачиваем наше изображение на 90° по часовой стрелке (Image>Rotate canvas>90°cW), а затем применяем фильтр Filter>Stylize>Wind. Рис. 225. Поворачиваем наше изображение на 90° и применим фильтр Filter>Stylize>Wind для придания эффекта ветра Метод (Method) устанавливаем в значение
Wind (Ветер), направление (Direction)
— From the Right (Справа). И возвращаем
изображение в первоначальное горизонтальное положение командой
Image>Rotate canvas>90°ccW. Рис. 226. Для придания изображению реалистичного цвета, используем команду Image>Adjust> Hue/Saturation В принципе, наш текст из льда уже принял окончательный вид. Однако хочется
сделать еще несколько штрихов. Давайте добавим несколько искрящихся бликов
— ведь это все-таки лед, который искрится на свету. Рис. 227. Рис. 228. Выбираем отпечаток, кисти для инструмента Brush В раскрывшемся меню выбираем команду Load Brushes. Далее выбираем файл Brushes\Assorted.abr, содержащий виды кистей (загрузив данный файл, вы заметите изменения в меню Brush). Выбираем вид кисти в виде искринок (например, №49 или 50). Основной цвет для кисти устанавливаем белый. Теперь выбранным видом кисти наносим однократные отпечатки в некоторых углах букв. Не очень усердствуем, дабы больше приблизится к реальности. Можно использовать несколько похожих видов кисти. Рис. 229. Текст изо льда — переливается и сверкает на свету Создаем новый документ. А потом создаем новый канал. В этом канале создаем
квадратное выделение по центру. В результате первого этапа у нас должна
получиться репродукция знаменитой картины Малевича «Черный квадрат». Снимаем
выделение. Рис. 230. Рис. 231. Теперь применим фильтр «Скручивание»: Filter>Distort>Twirl. Значение параметра Angle устанавливаем по собственному усмотрению. Рис. 232. Применим фильтр «Скручивание». Установим значение параметра Angle, например, 336 К полученному изображению применяем другой фильтр: Filter>Pixelate>coIor
Halftone. Такой фильтр преобразует изображение в точечный узор. Рис. 233. Рис. 234. В результате получили узор из множества точек на голубом фоне В принципе, узор уже готов. Рис. 235. При оформлении Web-страниц нередко используют специфическую заливку
текста небольшим рисунком (текстурой). Как это сделать? . Рис. 236. На начальном этапе создаем текст, используя крупный шрифт Теперь открываем файл, содержащий собственно текстуру, которую будем применять в качестве заливки. Мы выбрали текстуру «каменная кладка». Рис. 237. Текстуру «каменная кладка» будем использовать для заливки букв текста Выделяем все изображение текстуры: Select>AlI (<ctrl>+<A>). Выполнив команду Edit>Define Pattern (Редактирование>Определить Образец), определяем выделенную текстуру как образец. В диалоговом окне задаем имя образца. Рис. 238. Возвращаемся к документу с набранным текстом. Выделим этот текст побуквенно, выполнив команду Selecr>Load Selection. Теперь объединяем имеющиеся слои с текстом и фоном: Layer>Flatten Image (Слой>Выполнить сведение). А потом заливаем выделенные области текстурой: Edit>FiIl. Для параметра Use устанавливаем значение Pattern, а в списке custom Pattern выбираем миниатюру с нашей текстурой. Рис. 239. Рис. 240. В итоге буквы текста получат заливку текстурой и станут «каменными». Можно добавить к тексту тень, созданную с помощью фильтра
Filter>BIur>Gaussian Blur. Она придает тексту некоторый объем. Мы не можем не упомянуть еще один инструмент, позволяющий модифицировать
изображение — фильтр Liquify (Разжижение).
В Photoshop 6.0 соответствующая команда находится в меню Image
(Изображение). Однако в Photoshop 7.0 эта команда уже перемещена
в более подходящее для нее меню Filter (Фильтр). Рис. 241. Окно фильтра Liquify |