Советы постороннего

Архив

   В сегодняшней "AltТерре" советы и секреты питерского дизайнера Сергея Тулаева.

   Рисование спиралей

Рис. 1.
Виновник торжества.

   Поговорим о такой замечательной форме, как спираль (рис. 1). Хотите ли вы подражать в дизайне ацтекам (у которых спираль являлась символом солнца), рисовать ракушки или схемы - спираль слишком распространенная вещь, чтобы ни разу в жизни ее не применить. Разумеется, Photoshop - не программа векторной графики и совершенно не предназначен для создания форм, кроме самых простейших, однако ничто не устоит перед мощью человеческого разума, особенно когда носитель этого разума загнан тяжелыми обстоятельствами в тупик. Предположим, по каким-то причинам вы не можете воспользоваться ничем, кроме Photoshop, а рисовать надо. Что ж, нам не впервой сеять кукурузу в Заполярье, запускать человека в космос и рисовать спирали вручную. Впрочем, используя описанные ниже техники, можно получить достаточно оригинальные картинки, может, это станет для вас источником вдохновения.

   Не забудьте, что, хотя все излагается на примере Photoshop (весьма близкого моему сердцу), не составит сложности адаптировать мою методику к любому редактору изображений.

   Метод первый, очевидный


Рис. 2.
"Перспективная" форма.

   Знание фильтров Photoshop и толика здравого смысла подсказывают, что в таком деле не обойтись без фильтра Twirl, закручивающего изображение на некоторый угол. Все дело в том, к какой форме применять этот фильтр. Простая прямая не очень годится - слишком много искажений и неровностей, больше подходит прямоугольник, к которому добавлена небольшая перспектива (рис. 2). Для того чтобы сделать это, нажмите Ctrl+T, чтобы активизировать Free transform, и перетащите один из углов появившегося каркаса, удерживая Alt+Ctrl+Shift, получается классическая перспектива с одной точкой схода лучей. Между прочим, при работе в Windows весьма удобно отключить переключение русской и английской раскладок с клавиатуры - многие клавиатурные команды Photoshop содержат комбинации Alt+Shift или Ctrl+Shift, что приводит к постоянным переключениям, причем, когда активна русская раскладка, все клавиатурные команды перестают работать.

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


Рис. 3.
Twirl, угол 999 градусов.


Рис. 4.
Еще 999 градусов.

   И, наконец, используйте Twirl, подобрав значение угла закручивания сообразно желаемому числу витков спирали (360 градусов = один виток). (Рис. 3, 4.)

   Маленькая хитрость: вместо того чтобы закрутить изображение на, скажем, 720 градусов, лучше закрутите его на 240 и повторите фильтр еще два раза (Ctrl+F). В результате накопления ошибок алгоритма получите отличные сглаженные края. Вот и все. Осталось лишь отрезать лишнее.

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




Рис. 5.
Просто полоски.

   Давайте придумаем что-нибудь получше. Например, попробуем в качестве исходной формы использовать две толстые контрастные полоски в надежде на то, что будущая форма станет более плавной и симпатичной (рис. 5).


Рис. 6.
Снова Twirl.


Рис. 7.
Еще немного...

   Дальнейшие шаги, как и прежде: закрутим полоски - получается нечто с вполне греческими мотивами (можете взять на заметку). (Рис. 6, 7.)

   Если будете делать спираль не из искусственного изображения вроде этих полосок, а, например, - ради эффекта - из фотографии, следите, чтобы края изображения были ровными, иначе после "спирализации" они превратятся в крупные зазубрины (или, если воспользуетесь моим советом по поводу сглаживания, в неясное пятно).

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


Рис. 8.
Растяжка.

   Теперь пойдем чуть дальше - посмотрим, что можно выжать из растяжки (рис. 8). В принципе, две полоски, с которых все началось, такой растяжкой и являются (в вырожденной ее форме).


Рис. 9.
Как повелось...


Рис. 10.
Приятная бесконечность.

   Закрутив ее, получим не совсем спираль, но тоже весьма интересную форму научно-фантастического вида (черная дыра, спираль времени - пофантазируйте сами), из нее, в свою очередь, можно сделать неплохую имитацию тоннеля, уходящего вдаль (рис. 9, 10).


Рис. 11.
Растения-убийцы с Марса!

   Конечно же, незачем мучиться вопросом, что же все-таки получилось, - несложно раскрасить получившуюся вещь и использовать саму по себе (рис. 11).

   Для тех, кто не боится трудностей
   До этого речь шла о том, как приспособить Photoshop для более или менее автоматизированного рисования. А теперь предположим, что вам нужна настоящая векторная спираль. Как ее нарисовать?

   Дело это не столь сложное, как кропотливое, впрочем, никаких секретов.

Установите пару направляющих крест-накрест.
Рис. 12.
Полуокружность в Photoshop.

Нарисуйте полуокружность. Для того чтобы нарисовать ее, нарисуйте вписанную в половину квадрата кривую из двух сегментов (3 точки), причем направляющие этих точек должны быть взаимно перпендикулярны (рис. 12).
Рис. 13.
Заготовка.

Скопируйте полуокружность несколько раз, уменьшая размер (рис. 13).
Рис. 14.
Лучшая работа - ручная.

Подправьте места переходов между полуокружностями, чтобы они были плавными. Все точки должны лежать на направляющих (рис. 14).

   Все! Спираль готова. Правда, это не настоящая спираль, а некое ее приближение, но кто заметит, если все сделано аккуратно...

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

   Скругленные углы
   В природе сложно найти объект правильной геометрической формы и четких очертаний. В дизайне же, как правило, наоборот: четкие простые фигуры, контрастные края и незамысловатая форма давно являются общим местом.

   Прямоугольники лежат на поверхности, от них никуда не уйти - хотя бы потому, что набранный текст, по сути, является прямоугольником, не говоря уже о листе или экране, на котором он расположен.

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

   Говоря о скругленных углах, вспомним также о вездесущих псевдотрехмерных кнопках; как правило, углы их скруглены ради красоты и реализма.

   Скругление углов прямоугольника


Рис. 15.
Начнем с малого.


Рис. 16.
Вот так...


Рис. 17.
...и вот так.

   Все тривиальное просто. Для начала нарисуйте четыре одинаковых круга (с помощью Elliptical Marquee Tool, удерживая в процессе рисования Shift), от их диаметра будет зависеть радиус скругления углов (рис. 15). Настоятельно рекомендую воспользоваться направляющими - для аккуратности. Затем, поверх кругов, нарисуйте два перекрывающихся прямоугольника, которые соединят круги (рис. 16, 17). Лучше всего, конечно, рисовать на альфа-канале, чтобы потом загрузить его как выделение.

   Скругление углов любой фигуры
   Эта задача несколько сложнее: простое рисование кругов ничем не поможет. Вы замечали, что после фильтра Gaussian Blur прямые углы выглядят скругленными?

   Предлагаю воспользоваться этим свойством. Предположим, у вас уже имеется представление о форме. Теперь надо поработать руками.

Создайте новый канал (щелкнув на иконке с листом в палитре Channels).
Рис. 18.
Наверное, это гантель...

На черном фоне нарисуйте белым задуманную фигуру, например, как на рисунке 18.
Рис. 19.
Сходство усиливается...

Примените к ней фильтр Gaussian Blur, от выбранного вами радиуса размытия будет зависеть степень скругления углов (рис. 19). Для наглядности на рисунке я обвел исходную форму линией. Видно, что, хотя стыки выглядят гладкими, форма утратила ясность, да и размер изменился.
Рис. 20.
Элегантно, не так ли?

Для окончательной доводки используем команду Levels из меню Image/Adjust (Ctrl+L). В три окошка Input Levels введите последовательно: 100; 0,40; 130 (рис. 20). Что это значит? Вы наверняка уже знакомы с цветовой моделью Grayscale, в которой каждый пиксел имеет уровень яркости от 0 (черный) до 255 (белый).

   Введенные числа означают, что новое изображение будет содержать те пикселы, которые в исходном имели значение яркости от 100 до 130. Кроме того, они будут перераспределены в диапазоне от 0 до 255. В результате останутся черный и белый цвета и 30 градаций между ними. Откуда я взял эти числа? Я просто померил инструментом Eyedropper ("пипетка") яркости пикселов по обе стороны обведенной мной границы исходного изображения и как раз получил два этих значения. Более того, по моему опыту, алгоритм фильтра работает таким образом, что всегда можно использовать пару чисел 100 и 130 (или близкие). Вообще, изменение этих значений влияет на размытость краев, что позволит создавать сглаженные формы.

   Число 0,40 (80%), в свою очередь, означает новое перераспределение яркостей: у точки, имевшей значение яркости 80% белого (то же самое - 20% серого), это значение становится равным 128 (50%) и т. д., таким образом, становится больше темных пикселов и видимая граница изображения из-за этого несколько смещается (конкретно, размер фигуры уменьшается). Варьируя это значение (от 0,1 до 9,99), можно получить фигуру несколько большую или меньшую исходной.