Отправляет email-рассылки с помощью сервиса Sendsay

Adobe Photoshop: алхимия дизайна

  Все выпуски  

Adobe Photoshop: алхимия дизайна


Информационный Канал Subscribe.Ru





Adobe Photoshop: алхимия дизайна #13
от 23.06.02
н е н а г л я д н о е   п о с о б и е   п о   г р а ф и ч е с к о й   э к в и л и б р и с т и к е

>другие номера журнала
>пишите письма :)
>версия для печати?
это она и есть..



Н О В А Я   К Н И Г А
( з а п о з д а л ы й   о б з о р )

Курт Клонингер.
Свежие стили веб-дизайна или как сделать из вашего сайта конфетку.

Книжка-раскраска.
Заглянув в поисках новинок на сайт одного книжного магазина, наткнулся на анонс книжки Курта Клонингера, с классификацией стилей веб-дизайна которого я уже был знаком по переводной статье на www.webmascon.com. Поскольку литературу по дизайну я покупаю "просто чтобы было в коллекции", на книгу немедленно был сделан предварительный заказ, поступивший ко мне с опозданием всего в две недели.

В отличие от широко известного сериала "веб.дизайн" от "Символ+", книга Клонингера выпущена издательством ДМК-пресс, что, безусловно, является началом хорошей тенденции к конкуренции между издательствами и в области книг по веб-дизайну.

Книга в мягком переплете, средней толщины и с изображением внутренностей холодильника на обложке. (Кстати, обратите внимание, насколько аскетично содержимое холодильников настоящих веб-дизайнеров. :) Поражает огромное количество скриншотов описываемых сайтов (правда, цветные вы найдете только на внутренней стороне обложки).

Теперь о содержании. Парадигмой книги является утверждение о десяти базовых стилях веб-дизайна (в основном некоммерческого), по отношению к которым все остальное якобы является производным. Для каждого "стиля" приведена краткая история, описание особенностей реализации в Photoshop и HTML, скриншоты сайтов-апологетов. Все это сдобрено восторженными заверениями автора о каждом стиле как о будущем веб-дизайна. Но будет ли это будущее таким, каким его видит Клонингер?

Keep It Real
Книга нужна коммерческому дизайнеру в той же степени, в которой Храм Христа Спасителя был нужен взрывавшим его красноармейцам.
В современном коммерческом веб-дизайне, где специалисты по юзабилити вроде Якоба Нильсена подсчитывают доход компании от каждого пикселя ее веб-сайта, пространные разговоры о высших материях стиля выглядят, по меньшей мере, нелепо.
В конечном счете, победят деньги и клиенты с их клиентскими правами на творчество. На Западе деньги уже победили. Вы не согласны? Разве вы не видите долгосрочных тенденций? Энтузиасты вроде вашего покорного слуги вымирают как динозавры в период мирового капитала, апологеты понятного дизайна и Netscape 4 процветают. Законы эволюции просты и безжалостны как топор. Выживет тот, кто приспособится к среде обитания.

В конце концов, ущербна сама попытка подходить к веб-дизайну, отталкиваясь лишь от расплывчатого слова "стиль". Представляется, что это ремесло (которому, соответственно, можно научиться) лежит где-то посередине между крайними точками зрения специалистов по удобству интерфейса и графических дизайнеров. Соответственно, задач у веб-дизайнера гораздо больше, чем одно лишь проектирование интерфейсов или рисование визуалов. Не стану публично заявлять, что книга Дмитрия Кирсанова "веб.дизайн" до сих пор остается лучшей, но в ней отражены все аспекты нашей многострадальной профессии - от правильного употребления тире и тонкостей верстки HTML до создания логотипов, визуалов и баннеров.

Резюме
В любом случае, это не та книга, чтобы начать изучение веб-дизайна. Она предназначена опытным профессионалам, которые могут отличить зерна от плевел в контексте конкретного проекта и не будут просыпаться с мыслью "по какой главе книги Клонингера я сделаю сегодняшнее задание". Это, скорее, желтые страницы сайтов с модным дизайном.

Хотите увидеть, что творят в Photoshop лучшие дизайнеры планеты?
Представляю вам ежедневную рассылку самых стильных фоновых рисунков и фотографий для вашего рабочего стола.
Подписавшись на рассылку, вы будете ежедневно получать письмо с уменьшенными копиями фоновых изображений (200x150 pix) + ссылки на оригинальные картинки (например, 1024x768 pix).


Подпишитесь прямо сейчас! ..или загляните в архив рассылки!


С Н И М А Е М    К О Ж У Р У ( п о с л е д н я я   ч а с т ь )

Предыдущая часть статьи была в прошлом номере. Статья переводная.
Оригинал здесь.

Создание эскизаНаступает самая ответственная часть работы, в которой мы опробуем наши навыки рисования карандашом. Распечатайте изображение апельсина, полученное в предыдущей части упражнения (нужно распечатать в масштабе 100%). Накройте отпечаток калькой и приступите к рисованию кожуры. В принципе, ее можно рисовать и в Photoshop на отдельном слое (особенно если у вас планшета Wacom), но я чувствую себя комфортнее, когда одновременно вижу кончик карандаша и создаваемый рисунок. Эта часть проекта займет у вас больше всего времени. Вам часто придется пользоваться ластиком, возможно даже рвать свой труд на клочки и начинать сначала. Пожалуй, лучший способ сохранить свои нервы - начать рисовать ближнюю к зрителю часть спирали первой; на небольших объектах вроде апельсина достаточно будет нарисовать четыре витка. Постарайтесь представить непрерывную спираль, идущую из вершины объекта и заворачивающуюся к низу. Когда закончите рисовать ближнюю часть, переходите к дальней, имея в виду, что теперь спираль будет повернута к нам внутренней стороной. Рисуйте так, как будто уже нарисованная ближняя часть спирали прозрачна: так легче будет соединить части. В нашем примере и в любом другом симметричном объекте вроде апельсина, ближняя и дальняя части спирали будут симметричны по горизонтали. (Конечно, наброски для более сложных объектов вроде руки или головы не должны быть симметричными.)

Когда рисунок будет готов, возьмите еще один лист кальки и прикрепите сверху. Уберите отпечаток апельсина - нам он больше не нужен. Аккуратно обведите ручкой переднюю часть спирали, затем заднюю, только в этот раз не прорисовывайте невидимые части. Отсканируйте последний набросок, не забыв положить над ним лист белой бумаги. Сканируйте с тем же разрешением, что и у исходного файла (300 dpi): нам нужно точное совпадение размеров.

После настройки уровнейОтсканированному изображению, возможно, понадобится небольшая корректировка уровней, чтобы избавиться от ненужных смазываний и дополнительно осветлить белый фон. Откройте окно уровней (Ctrl+L) и поиграйте с черным и белым бегунками до тех пор, пока на белом фоне не исчезнут огрехи рисования, а сам набросок станет четким, но не слишком жирным. В палитре слоев (F7) дважды щелкните на слое с наброском и переименуйте его в "rind sketch".

Эскиз поверх фотоПеретащите набросок спирали в уже открытый документ с апельсином, и убедитесь, что он появился верхним в списке слоев. Чтобы белый фон наброска не загораживал апельсин, переключите режим слоя в Multiply (умножение), выбрав его из выпадающего списка в палитре слоев. Теперь видимыми должны остаться только линии рисунка. С помощью инструмента Move (Перемещение, клавиша V) постарайтесь совместить линии эскиза с контурами фотографии апельсина. Для более точного перемещения можно использовать клавиши со стрелками на клавиатуре.

Несколько раз опробовав эффект трехмерной спирали в деле, я убедился, что режимы наложения слоев могут сэкономить кучу времени. Если раньше мне приходилось долго колдовать с инструментом Magic Wand (Волшебная Палочка), чтобы создать выделение и избавиться от белого фона рисунка, то теперь я добиваюсь лучшего результата всего лишь одним щелчком мыши. Вообще, я настоятельно рекомендую вам экспериментировать с режимами наложения: вы будете приятно удивлены, насколько быстро они смогут справиться с проблемой, неподвластной другим методам редактирования.

Ближняя часть спирали готоваСледующим нашим шагом будет маскИрование ближней к нам части кожуры апельсина. В качестве направляющих при создании выделения мы будем использовать только что созданный набросок. С помощью инструмента Lasso или Pen аккуратно обрисуйте ближнюю к нам часть апельсиновой спирали, ориентируясь на контуры эскиза. Когда закончите, растушуйте выделение (Ctrl+Alt+D) на 0.5 пикселей, чтобы слегка смягчить его края. Затем инвертируйте выделение (Ctrl+Shift+I), потому что мы собираемся спрятать все кроме ближней к нам части спирали. Убедитесь, что активна маска слоя с апельсином (необходимо щелкнуть по миниатюре маски справа от миниатюры самого слоя в палитре слоев) и залейте выделение черным цветом. Все кроме ближней к нам части ленты должно исчезнуть. Теперь надо закрутить обратную сторону спирали.

Нам придется собственноручно создать текстуру внутренней стороны кожуры, так как ее не было видно в оригинальной фотографии. Сначала снимите предыдущее выделение (Ctrl+D) и залейте белый фоновый слой темно-серым: это поможет лучше видеть ярко освещенную внутреннюю часть кожуры, над которой мы и будем работать. Создайте прямо над фоновым слоем новый слой и назовите его, скажем, "back rind". И опять, ориентируясь на видимый набросок спирали, нарисуйте инструментом Lasso (L) выделение для задней части спирали и растушуйте его на полпикселя. Не беспокойтесь о тех зонах дальней части, которые перекрываются ближней: их просто накроет вышележащий слой с апельсином. Поэтому, разумеется, вам совсем не обязательно тщательно вырисовывать эти области.

Находясь на слое "back rind", залейте получившееся выделение белым цветом. Видите, мы уже дошли до точки, когда основная идея композиции уже видна, но отсутствие существенных деталей говорит не в пользу профессионализма автора. Например, апельсиновой кожуре не хватает объема: кажется, будто она толщиной с лист бумаги. Мы можем придать ей глубину, нарисовав тонкую белую окантовку, но сначала мы применим к слою "back rind" стиль: дважды щелкните по этому слою в палитре слоев и выберите в списке "Color Overlay". Щелкнув по образцу цвета переднего плана, выберите красный цвет: он достаточно яркий, чтобы разграничить объемный край кожуры и саму кожуру. Также, не будет лишним спрятать слой с наброском, дальше он нам будет только мешать.

Сделайте новый слой под слоем с дальней частью спирали и назовите его "rind edge". Сначала мы нарисуем боковину ближней к нам кожуры. Выберите инструмент Airbrush (J в Photoshop 6.0, в последней версии Photoshop этот инструмент упразднен и доступен как флажок в палитре параметров некоторых рисующих инструментов) и создайте новую кисть диаметром в 20 пикселей, жесткостью 90% и 1% плотностью наложения мазков (мой перевод англоязычного термина Spacing - прим. перев.). Выбранный размер может показаться излишне большим, но это в порядке вещей, так как мы будем рисовать край кожуры под слоем с самой кожурой, и из-под него будет виден лишь край мазка. Кроме того, с большой кистью куда проще управляться, чем с маленькой. Скорее всего, вам понадобится кисть меньшего размера, когда вы будете рисовать край дальней части спирали.

Появилась толщинаНикакие волшебные плагины никогда не смогут так естественно нарисовать боковину кожуры, как это может сделать ваша рука. Только не забудьте сделать края ближней к нам части спирали толще, чем края дальней части, чтобы показать перспективу.

Теперь изображение почти готово, но поверхность дальней части спиральной кожуры нуждается в доработке, а именно недостает контраста между освещенной дальней частью и ее белой боковиной. Кожуре не хватает теней. Создайте новый слой поверх слоя "back rind" и назовите его "back rind shading". Затем, удерживая клавишу Alt, поместите курсор между пиктограммами этих слоев в палитре. Должна появиться пиктограмма монтажной группы слоев, щелкните, чтобы создать ее. Теперь все тени, которые мы будем рисовать на пустом слое "back rind shading", не будут выходить за пределы задней части спирали, так как она стала маской для нового слоя.

Выберите инструмент аэрограф (J) и создайте новую кисть диаметром 300 пикселей, жесткостью 0% и плотностью мазков 1%. Опять-таки, диаметр в 300 пикселей может показаться чересчур большим, но я сознательно выбрал такой размер, чтобы добиться мягкости кисти, без которой нельзя положить естественную плавную тень. Установите нажим кисти в 20% и аккуратно обведите заднюю часть кожуры, постарайтесь положить реалистичные тени. Ближе к краю ленты работайте с меньшим размером кисти и более сильным нажимом: настоящая тень всегда гуще около края объекта.

Чтобы придать целостность композиции, мы наложим поверх дальней поверхности кожуры корректирующий слой, который для пущей реалистичности будет отбрасывать оранжевый отсвет на "цедру" апельсина. Оставаясь на слое "back rind shading", щелкните на кнопке создания корректирующего слоя в палитре слоев и выберите вариант Color Balance. Установите верхний бегунок так, чтобы добавить 50 единиц красного цвета, а нижний - чтобы добавить 50 единиц желтого. Как объяснялось выше, создайте монтажную группу из корректирующего слоя и слоя с тенью, так как нам надо, чтобы изменения коснулись только его. Если тень выглядит слишком густой, попробуйте режим Screen для корректирующего слоя.

Вот и все! Трехмерная спираль из кожуры апельсина полностью готова. Чтобы серый фон композиции не казался слишком скучным, в окончательном варианте я добавил фон из темно-синего радиального градиента с помощью стиля слоя Gradient Overlay с 60% непрозрачностью и режимом наложения слоя Soft Light.

Окончательный монтаж

По правде сказать, я не уверен, правильно ли я забросил эти проекты в свое время или же мне следовало исследовать этот эффект более тщательно. Меня все еще не оставляет идея нарисовать человека, целиком разрезанного на трехмерную спираль. Также любопытно было бы посмотреть на попытку реализовать "фирменный" эффект Эшера с помощью программы трехмерного моделирования. Боюсь, что результат будет выглядеть недостаточно естественно, но некоторые вещи, выполненные в 3D, заставляют меня подумать дважды. Полагаю, что вне зависимости от средства реализации, идея будет дальше интриговать меня, пока я не выведу ее на качественно новый уровень. Поэтому советую вам реализовать этот эффект в одном из своих проектов максимально нонконформистским способом. Вы просто можете наткнуться на источник вдохновения, который обеспечит вас на несколько проектов вперед.

Всего наилучшего,
Головачев Андрей




(C) Головачев Андрей 2001
Adobe, логотип Adobe и Photoshop - торговые марки Adobe Systems Inc.
Все права, которые можно нарушить, уже нарушены. У вас нет шансов
нарушить их повторно. Тем не менее, при перепечатке материалов
согласие автора обязательно. Просьба все жалобы и предложения
направлять сюда: ps-alchemy@nm.ru В течение трех дней вы
получите ответ сервера, подтверждающий уничтожение
вашего письма ;-)





http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное