Прежде всего — это Слоевые эффекты или Layer Style: Layer->Layer style (Слой->Стили слоя). В версии 5.5 слоевые эффекты были малополезным, почти не применявшимся "наворотом" — только что тень от шрифта пустить можно было (мы, к примеру, это неплохо и руками умеем делать).
Версия 6.0 стала переломной в этом плане. Появление новых эффектов и возможность объединять их в стили настолько расширили потенциал любого пользователя, что даже общая стилистика работы в PhotoShop стала меняться. Все меньше зависит от ловкости рук пользователя и все больше от того, что он знает, в какой момент какую кнопку нажать. С одной стороны, это плохо, а с другой — время и силы экономятся.
В настоящее время при помощи Layer Style создается такое количество эффектов, что можно даже сказать, что делается если не почти все, то очень многое.
Другой очень важный момент — появление элементов векторной графики. Это инструменты, объединенные в группу Shapes (Фигуры). Теперь нет необходимости мучаться в попытках воссоздать ту или иную геометрическую фигуру — они уже есть готовые. Особенно радует то, что можно при помощи Path (Контура) нарисовать любую свою фигуру и сохранить ее в примерах, а в дальнейшем при необходимости использовать.
Не забывайте также о том, что на Shapes также можно применять Layer Style и, тем самым, сложнейшую работу свести к паре манипуляций.
Одним словом, если в PhotoShop 5 после PhotoShop 4 особенно добавить было нечего, то шестая версия принесла множество ключевых изменений.
Итак, начинаем. Пример первый.
Резные деревянные буквы 
Сформулируем задачу — необходимо нарисовать буквы, имеющие фактуру дерева и при этом создающие впечатление нанесенной резьбы.
Разумеется, в более ранних версиях PhotoShop это было бы или вообще невозможно, или пришлось бы вырисовывать, что говорится, по пикселям. Сейчас все намного проще, но необходимо проявить смекалку.
Создайте исходное изображение (Ctrl+N). Color Mode (Цветовой режим) возьмите как RGB, размерность особого значения не имеет, но лучше сразу задать высокое разрешение (Resolution). Это несколько замедлит ход работы, но и результат будет намного качественнее. Фон (Background) исходного изображения лучше взять белый.
Выберите инструмент Text (T). Сразу стоит определиться с используемым шрифтом. Он должен быть как можно более массивным. Лучше всего, на наш взгляд, подойдет распространенный шрифт Arial Black. Он поставляется вместе с Windows, и у вас не должно возникнуть проблем с его применением.
Напишите подходящее слово. В нашем случае им стало банальное Wood. Лучше использовать только заглавные буквы, так как это облегчит дальнейшую работу. Размер шрифта должен быть максимально большим.
Цвет букв не имеет абсолютно никакого значения, так как он все равно будет впоследствии заменен.
После того, как шрифт написан, сделаем его деревянным. В PhotoShop 6.0 для этого есть очень простой и быстрый способ. Откройте палитру Styles (Стили).
Несколько уйдем от темы, чтобы разобраться, что такое Стили. Кликните по любому из них — и вы увидите, как изменились буквы. А теперь найдем причину.
Обратите внимание на палитру Layers (Слои). Вы заметили, что под слоем с буквами появились описания слоевых эффектов? Кликните по любому из них — и у вас откроется стандартное Layer Style окно.
Таким образом, делаем вывод, что любой стиль есть не что иное, как сочетание нескольких слоевых эффектов с определенными свойствами. Вы также можете создать любой свой стиль и сохранить его для дальнейшего использования.
Однако, вернемся к нашему дереву. И для его создания в стандартной поставке PhotoShop 6.0 есть готовый стиль. Откроем его.
В палитре Styles в правом верхнем уголке найдите кнопку в виде стрелки. Кликните по ней. У вас откроется меню, в котором можно выбрать подходящую группу готовых Стилей. Нас интересует группа "Textures".
В открывшихся стилях найдите "Oak". Это сделать несложно — этот стиль единственный напоминает дерево. Примените его к слою с буквами.
Результат похож на абсолютно плоскую деревянную доску. Разумеется, говорить о том, что из этого можно получить буквы, покрытые объемной резьбой, не приходится.
Но решение очень простое. Мы уже говорили, что любой стиль это сочетание слоевых эффектов. Так кто нам мешает к ним добавить еще один, создающий псевдообъем? Никто. Поэтому откройте палитру Layers (Слои) и под слоем с текстом дважды кликните по слову "Effects". Откроется стандартное окно "Layers Style". Откройте в нем эффект Bevel and Emboss (Скосы и Рельеф) и выставьте напротив него птичку.
Буквы сразу станут объемными. Но нам необходимо настроить именно правильный, подходящий вид объема. Поэтому сделайте следующее:
1. Style должен быть выставлен как Inner Bevel.
2. В Technique выберите Chisel Hard. Это жесткая техника для краев, как раз подходит под имитацию резьбы.
3. Depth и Size выставьте максимально большими. Не стоит задвигать бегунок в крайний правый угол — остановитесь на уровне, когда внешний вид букв перестанет изменяться.
4. Gloss Contur выберите как Cove-Deep.
В результате буквы станут достаточно похожими на вырезанные из дерева. На этом подготовительная часть нашей работы закончена, и мы приступаем к творческой части.
Одно из самых положительных свойств слоевых эффектов в том, что они, в отличие от фильтров, действуют постоянно. И вносимые на слой изменения сразу будут подвергаться обработке эффектом. Это свойство мы и используем в своей дальнейшей работе.
Возьмите стирку (Eraser tool). Этот инструмент по своим свойствам принято относить к простым инструментам рисования, так как в его основу положена Кисть (Brush). Как следствие, можно использовать самые разные типы готовых кистей и рисовать свои (Edit->Define Brush (Правка->Определить кисть)).
Возьмите простую круглую кисть и стиркой проведите по буквам. Понятно, к чему все клонится? У вас получилась не дырка, а ровный скос, как будто кусок дерева отщипнули долотом. Это свойство мы и будем использовать.
Загрузите методом, аналогичным тому, что использовался при загрузке Стилей, группу кистей Assorted. В ней находятся самые разные по внешнему виду кисти, всякие звездочки, снежинки и тому подобное. Выберите, к примеру, снежинку и кликните по букве. Сразу появится как бы вырезанная звездочка.
Аналогичным образом используются и другие кисти для покрытия букв резьбой.
Для улучшения конечного результата лучше добавить еще слоевой эффект Drop Shadow, выставив минимальную дистанцию распространения. Выставить же его совсем просто по точно такой же технологии, что мы уже описывали для Bevel and Emboss.
Вот и все, эффект готов. Аналогичную технику можно применять не только для букв и не только для дерева, а еще в куче случаев. Главное — использовать фантазию.
Измененный стиль вы можете сохранить как новый и, таким образом, облегчить себе работу в случае необходимости повторения.
Вообще, привычка сохранять созданные стили является хорошей привычкой и может много раз вам помочь. Места же на диске при этом тратится мизер, да и разговаривать о дисковом пространстве при размерах современных винчестеров как-то несерьезно.
Создание маленьких GIF-файлов для Html-страниц
В одной из прошлых статей, посвященной ответам на вопросы читателей, была заметка на тему "как убрать белые линии на краях gif файлов". Но это породило не столько ответы, сколько вопросы. Читатели стали интересоваться техникой создания таких небольших графических файлов в целом, от начала и до конца.
Сразу хочется сказать, что приведенное описание субъективно. Невозможно сказать, это лучший способ или нет — каждый пользователь работает так, как ему удобнее. Однако приведенная методика наиболее легка, и ей могут овладеть абсолютно все, даже при невысоком коэффициенте ровности рук.
Попробуем нарисовать самый сложный, самый проблематичный вариант — маленький закругленный уголок. Не возьмемся сказать почему, но именно по нему больше всего вопросов возникает у молодых пользователей, в том числе и написавших нам читателей "Компьютерной газеты".
Создайте новый документ (Ctrl+N). Цвет заднего плана (Background color) прозрачный (Transparency). Это нам необходимо для того, чтобы уголок вписывался в дизайн любого сайта. Но если фон под этим уголком у вас на страничке моноцветный, то лучше задать этот же цвет — слава богу в PhotoShop 6 можно выбирать цвета по их web-кодам.
Разрешение (Transparency) выберите равным экранному, то есть 72 PPI (Pixels per Inch). Некоторые используют определенные свойства Html-кода и пользуются более высокими разрешениями, в описании страницы потом выставляя необходимое значение. Этот способ хорош, но только для опытных пользователей, мы же рассматриваем самый простой вариант.
Размеры нужны маленькие, примерно 15 пикселей в высоту и 40 в длину. Впрочем, это уже определять скорее вам — если опыт работы маленький, возьмите несколько больше, если вы опытный, то можно попробовать поработать в "экстремальных" условиях.
У вас откроется новый документ. Для упрощения дальнейшей работы лучше проделать следующее: View->New View (Вид->Новый вид). Эта команда открывает новое окно с этим же документом. Его увеличьте (Ctrl + +) примерно до 1300%, старое окно оставьте без изменений в реальных пропорциях. Теперь все изменения вы сможете вносить и наблюдать в обоих окнах и намного лучше контролировать процесс.
Начинаем работать с окном 2. Возьмите инструмент Pen (Перо) и нарисуйте диагональ. Старайтесь это делать как можно более качественно и внимательно, от этого в наибольшей степени зависит успех всей остальной работы.
Но нас интересует не прямой, а закругленный уголок. Поэтому, дорисовав первый вариант, смените Pen на Add Anchor Point Tool (Добавить якорную точку), имеющий вид пера со знаком "+". Кликните в центре скоса уголка и вытяните его вертикально до нужной степени (тут никаких советов нет — все дело вкуса). Стоит избегать только одного — углы не должны выходить за пределы рисунка.
Убедитесь в том, что вы достаточно качественно нарисовали путь. Не должно быть слишком резких перегибов, выходов за пределы рисунка.
Теперь необходимо открыть палитру Path (Пути). В ее верхней правой части нажмите кнопку в форме стрелки, открывающую меню доступных команд. Из них необходимо выбрать Fill Path (Залить путь).
В открывшемся стандартном окне для нас существенно важен только один параметр. Это Anti-aliased. Антиалиазинг — это распространенный способ сглаживания неровностей, образованных тем, что пиксели имеют квадратную форму. Реализуется он следующим образом — переход осуществляется не сразу, а через небольшой градиент по краям.
Так как в GIF нет многоуровневой прозрачности, то переход при записи в Gif файл и превращается в эту проблемную белую линию.
Поэтому отключите флажок Anti-aliased. Путь зальется основным цветом. Просмотрите все края. Возможно, кое-где придется дорисовать пару пикселей (при помощи кисти (Art Brush Tool)). Еще вероятней придется немного затереть ластиком.
Но это еще не все. Важно правильно сохранить получившуюся картинку. Запустите команду File --> Save for Web (Файл --> Оптимизировать под Web).
Открывшееся окно представляет собой мощнейший инструмент для оптимизации иллюстраций под Всемирную сеть. Однако, это скорее тема отдельной статьи, поэтому коснемся мы только одного параметра.
Посмотрите на часть окна, обозначенную как Color Table (Цветовая таблица). В ней отображены все цвета, которые есть в сохраняемом изображении (индексированные, разумеется). В идеале у вас должно остаться только 2-3 цвета. Поэтому лишние просто-напросто удалите, пиксели таких цветов заменят цвет на наиболее близкий из оставшихся. Вот и все. Размеры получившегося файла будут просто смешные (у нас 83 байта), а качество зависит только от старания и умения.
Можно несколько упростить операцию и получить намного более качественный результат, если вместо GIF использовать формат PNG, обладающий сходными качествами, но поддерживающий 24-битный цвет. Однако при этом и значительно возрастет размер файла, что для web-странички не очень хорошо — элементы интерфейса должны загружаться мгновенно (на наш субъективный взгляд). Хотя в США, к примеру, уже мало обращают внимания на вес страничек — с их скоростями они могут себе это позволить, мы же пока — нет.
Анимированный баннер-2
Некоторое время назад в "Компьютерной газете" вышла статья, посвященная Photo-Paint 10. В ней, в частности, описывались способы имитации так называемого эффекта матрицы, или бесконечно бегущих чисел.
Читатели с достаточным упорством просят переписать тот материал для PhotoShop 6, сделав особенный акцент на изготовлении баннеров. Переписывать мы не станем, а вот использовать эту идею для описания создания баннера в PhotoShop вполне можно.
В качестве идеи будет использована некая калька с рекламного баннера одного из минских банков, который сейчас достаточно часто можно видеть в by-нете. Причина этому не в том, что своих идей не хватает, а в том, что несколько читателей попросили описать процесс создания чего-либо подобного.
Итак, приступим. Основная проблема, которая стоит перед нами, — любой более или менее приличный баннер должен весить не более 25 Кб. Если это число значительно превышено, значит человек, который создавал такую рекламу, не совсем ценит время людей, пользующихся Интернет.
А как следствие, если мы ограничены в размерах, то в чем-то нужно экономить. Учитывая свойства формата Gif, будем выбирать между экономией на кадрах и экономией на цветах (а лучше максимально уменьшать количество того и другого). Так как бегущие цифры нормально выглядят только при соответствии количества кадров количеству строк цифр, то каждый должен определять индивидуально. В нашем случае будет пять строк, следовательно, пять кадров. Экономить придется на цветах. Наш баннер будет выполнен исключительно в зеленых оттенках.
Мы несколько уклонимся от стандартных баннерных размеров и создадим его в пропорциях 400 на 100 пикселей.
Но сначала нам нужно подготовить бегущие цифры. Создайте новый документ (Ctrl+N) размерностью 100 на 100 пикселей в Color Mode (Цветовом режиме) RGB. Background лучше сразу взять как черный.
Сделайте зеленый основным цветом. Выберите инструмент Text (T). Напишите примерно так же, как отображено на иллюстрации справа. Цифры должны занять практически всю площадь изображения, от краев не должно оставаться пустого пространства, за исключением верха.
Лучше каждую строку делать как отдельный слой — будет намного удобнее подогнать их друг к другу.
После того, как вы написали все цифры и подровняли строки, необходимо склеить все слои: Layer->Flatten Image (Слой->Склеить изображение).
Полученный файл сразу сохраните под номером "1" в формате gif, используя команду Save as... (Shift+Ctrl+S).
Сделаем смещение цифр по вертикали. Для выполнения этого есть несколько способов, но мы будем пользоваться тем же, что и в Photo-Paint, то есть наиболее автоматизированным, быстрым и простым.
Запустите фильтр Offset: Filters->Other->Offsets (Фильтр->Другие->Сдвиг). Убедитесь, что тип сдвига выставлен как Wrap around (Вращать вокруг). При применении этого способа повторяется эффект, как будто ваша картинка намотана на барабан.
Нас интересует только вертикальное смещение. Поэтому в Horizontal выставьте 0. А вот с вертикальным смещением придется немного подумать. Так как всего у нас пять строк, следовательно, будет и пять кадров. За пять кадров должна пройти вся картинка. Поэтому сдвигать каждый раз нужно на 1/5 от всей высоты.
Так как высота у нас равна 100 пикселям, то смещение составит 20. Это значение и введите в параметре Vertical. Полученный файл сохраните под именем 2.
Дальше все намного проще. Нажмите Ctrl+F (повторить последний фильтр с использованными настройками) — и картинка снова сдвинется на 20 пикселей. Сохраните ее как 3. Аналогичным образом изготовьте еще 2 кадра.
Но мы ведь делаем баннер. Поэтому после того, как готовы все пять кадров, необходимо создать новый файл размерностью 400 на 100 пикселей в экранном разрешении и RGB цветовой модели. Неважно, что вы на нем нарисуете (у нас вообще произвольный латинизм и обработанный портрет одного из авторов). Важно то, что мы будем делать дальше.
Создайте на диске отдельную папку с произвольным именем.
Добавьте к нарисованному баннеру первый кадр с цифрами путем простого копирования (Ctrl+A) с файла 1 и вставки (Ctrl+V) на обрабатываемое изображение.
Запустим команду Save for Web: File->Save for Web. Посмотрите на количество предлагаемых цветов. Оптимально их оставить на уровне 32, можно немного больше. Меньше у вас вряд ли получится. Сохраните полученный файл в созданной папке под именем 1.gif.
Аналогичным образом сделайте и оставшиеся 4 кадра, соблюдая нумерацию (это очень важно для последующей анимации).
Откройте программу Image Ready, поставляемую вместе с PhotoShop 6.0. Это можно сделать, нажав самую нижнюю кнопку в палитре инструментов, на которой нарисованы два символа и стрелка между ними.
Выполните команду File->Import->Folder as Frames (Файл->Импорт->Папку как кадры). Папку, понятно, выберите созданную, с лежащими в ней заготовками. Кадры сами выстроятся в нужном порядке, потому что мы их нумеровали поочередно. Вы сразу можете просмотреть получившуюся анимацию, нажав кнопку "Plays animations" в палитре Animation. Скорее всего, она вам не понравится — кадры слишком быстро сменяют друг друга.
Однако, это совсем несложно исправить. Обратите внимание на то, что под каждым кадром написаны цифры. Это задержка, сколько "стоит" тот или иной кадр. Кликните по этим надписям и измените до 0.1 секунды (или на другое число, которое вам больше понравится экспериментально). Всегда можно получить абсолютно любую задержку, используя вариант "Other" (Другой), в котором время определяется в удобных всем секундах.
Сохраните полученный файл при помощи команды File-> Save Optimized As (Файл -> Сохранить оптимизированный как).
Итоговая величина файла у нас составила 24.6 Кб, то есть в приемлемый размер, несмотря на большое количество кадров, удалось вложиться. К сожалению, в газете невозможно напечатать анимацию:), поэтому вам придется сделать все самим и только тогда увидеть получившийся эффект. Но это даже лучше — ваш труд не будет отягощен примером, а в основном тяжелее всего сделать что-то новое именно тогда, когда видел какой-нибудь вариант работы.
Если у вас файл получился слишком большой, то причина, видимо, в использовании слишком большого количества цветов. Откройте заготовки в PhotoShop и постарайтесь подобрать такой вариант, при котором и качество останется приемлемым, и размер фалов уменьшится. Возможно, удалять и добавлять цвета придется вручную.
В следующей статье, посвященной PhotoShop, мы снова вернемся к теме интересных примеров работы. Если у вас есть какие-либо наработки, идеи, то посылайте.
|
