Crazy Rebel: викификация, оформление, иллюстрация

Crazy Rebel — Tue, 16 Feb 2010 09:18:48 GMT

викификация, оформление, иллюстрация

Новая статья

: '''''ImageMagick''''' Мощный графический редактор без графического интерфейса

==''ImageMagick'': Яркие эффекты==

{{Цикл/ImageMagick}}

: '''Часть 2''': Пакетное кадрирование и поворот – далеко не полный список возможностей ''ImageMagick''. Чтобы доказать это, '''Александр Бербер''' решит с его помощью ряд серьезных дизайнерских задач.

На прошлом уроке мы коснулись некоторых возможностей ''ImageMagick'' (''IM''), таких как создание простенькой аватары, миниатюр, рамок, и главное – групповой обработки изображений, лишь бегло затронув эффекты и совершенно не осветив создание красивых надписей. Но ведь в каждом уважающем себя графиче ком редакторе можно изобразить «горящий» текст или буквы, подсвеченные неоновым светом.

Способен ли на такое ''ImageMagick''? Развернутый ответ на вопрос вы получите в конце урока, но, забегая вперед, скажу: да. Функционал ''IM'' огромен, а каждая из утилит понимает десятки настроек и даже математичеcкие функции – например, полиномиальную, позволяющую создать реалистичный эффект воды или пламени. Здесь есть практиче ки все, что можно встретить в редакторах с GUI. Не хватает только одного – этого самого GUI. Он пригодился бы уже для того, чтобы просматривать промежуточные результаты, и аудиторию ''ImageMagic'' можно было бы
расширить за счет людей, ужасающихся от одной мысли о написании магиче ких символов в командной строке.

Я думаю, что разработчики не добавляют графиче кий интерфейс умышленно, и вовсе не потому, что программа устарела. Просто они преследуют несколько иные цели, придерживаясь своей собственной философии. И это правильно, ведь ''ImageMagick'' – единственный в своем роде консольный графический редактор.

Следует отметить, что создание эффектов и манипуляции с картинками и фотографиями в ''IM'' требуют от пользователя определенных навыков и терпения; но результат того стоит. Нет нужды сравнивать ''ImageMagic'' с ''GIMP'' или ''Inkscape'': у них немного разные предназначения. Последние два используются как для обработки, так и для создания изображений и фотокоррекции, а в ''IM'' упор сделан скорость и простоту в сочетании с достойным результатом.

На этом уроке мы с вами «наверстаем упущенное» и научимся создавать интересные и яркие графиче кие эффекты, используя только ''ImageMagick'' и вашу любимую консоль.

===Часть 1: Граффити===

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

{{Врезка|Заголовок=Скорая помощь|Содержание=Чтобы не потеряться в огромном разнообразии шрифтов и выбрать из них тот, что подходит вам
больше всего, вы можете установить программу предварительного просмотра шрифтов ''Fontmatrix''. Для систем на базе Debian достаточно набрать в консоли команду: ''sudo aptitude install fontmatrix''|Ширина=200px}}

Для чего могут понадобиться красивые, изыскано выполненные надписи с оригинальным шрифтом? Согласитесь, вопрос некорректный, ведь они используются повсеместно: в печатных изданиях, web-страницах, рекламных слоганах, водяных знаках и так далее. Если проявить немного фантазии, им можно найти самое различное применение.

Надписи в ''ImageMagick'' создаются с помощью утилиты ''convert'' и соответствующих ключей. Для понимания того, каким образом получается готовый результат, я приведу основные опции, которые необходимо знать и понимать при работе с утилитой ''convert'', а также дам подробные комментарии ко всем используемым в статье примерам. Вот как выглядит шаблон команды для создания надписи:

# convert -background [цвет/файл] -fill [цвет] \
-font [шрифт] -pointsize [размер] label:[текст] \
example.jpg

Меняя те или иные значения, мы можем добиваться совершенно разных результатов. Главным в данном случае является путь к шрифту ('''-font'''): если вы ошибетесь и укажете его неправильно, ''convert'' подставит стандартный системный шрифт, и вы получите
не то, что хотели. Также важен ключ '''-background''', так как именно он отвечает за цвет фона изображения или его отсутствие, то есть
прозрачность.

Давайте создадим надпись в стиле граффити-модерн на кирпичной стене (текстуре). Для этого нам понадобится соответствующий шрифт: я остановил свой выбор на ''Urban'', доступный (наряду с другими гарнитурами) по адресу: http://www.dafont.com/urban-hook-upz.font.

Начать следует с создания требуемого текста на прозрачном фоне. Это делает команда:

# convert -background transparent -fill black \
-font /home/alex/fonts/urban.ttf -pointsize 150 label:Urban \
label4.gif

Мы передали утилите convert опцию '''-background transparent''', то есть установили прозрачный фон. Цвет текста – черный ('''-fill black'''), размер шрифта – 150 пикселей ('''-pointsize 150'''); надеюсь, вы помните, что ''convert'' – умная утилита и сама умеет соблюдать
соотношение сторон. За текст отвечает опция '''label:Urban''': все, что идет после двоеточия, попадет на картинку. Если в тексте есть
пробелы, заключите его в кавычки, например: '''label:“Urban style”'''. Теперь, когда мы получили изображение с граффити, можно нанести его на стену. Данный прием нам отчасти уже знаком: он упоминался в [[LXF116:ImageMagick|LXF116]] в сценарии по обработке массива изображений для добавления водяного знака, но теперь я покажу, как выполнить это двумя разными способами.

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

# convert -font /home/alex/fonts/urban.ttf -pointsize
100 label:'Urban style' -border 60 \
-tile wall.jpg -draw “color 0,0 reset” \
-tile black.png -gravity center -annotate +0+0 'Urban style' \
autosize2.png

{{Врезка|Содержание=[[Изображение:LXF117_70_1.jpg|400px]]За такое граффити к ответственности не привлекут, а выглядит оно, как настоящее.
|Ширина=400px}}

С первого взгляда она может показаться немного запутанной, но это не так. С опциями '''-font, -gravity''' и '''label''' мы уже знакомы, '''-border''' вписывает надпись в границы изображения, ключ '''-annotate''' указывает, где ее разместить. Он точнее '''-gravity''', так как
вы можете указать координаты ('''±x±y'''). Например, '''-100+100''' означает, что надпись будет в левом нижнем углу, причем она «выедет»
за границы изображения ('''x'''-координата отрицательна). Аналогом является '''-gravity SouthWest''': текст тоже будет в левом нижнем углу картинки, но точности до пикселя добиться не удастся. По моим личным наблюдениям, в ''IM'' есть много команд, выполняющих приблизительно одни функции, но с разной точностью или тонкостью настройки.

Если желания вдаваться в эти тонкости у вас нет, воспользуйтесь вторым, более лаконичным и простым способом: примените специально созданную для этих целей и входящую в состав пакета ''IM'' утилиту ''composite''. В данном случае мы берем заготовку надписи и просто «наклеиваем» ее на наш фон, указав лишь расположение шаблона граффити на рисунке:

# composite -gravity center label4.gif wall.jpg autosize2.png

Параметр '''-gravity center''' отвечает за расположение наклеиваемого изображения относительно фона: здесь это центр. Результат проделанных выше действий вы можете видеть на рисунке. По-моему, симпатично: нам удалось создать неплохое изображение, не покидая командной строки и затратив минимум системных ресурсов, что в некоторых случаях может играть ключевую роль. Как видите, генерация надписей – не такой уж трудоемкий процесс, но важная составляющая любого графиче кого редактора, в том числе и ''ImageMagick''. Поэкспериментировав
с приведенными выше командами, вы будет удивлены широкому спектру возможностей и по достоинству оцените функционал ''ImageMagick''.

===Часть 2: Маленькие хитрости===

В первой части статьи мы остановились на создании красивых надписей с использованием сторонних шрифтов: насколько хорошо они будут выглядеть, зависит по большей части от правильно подобранной гарнитуры. А как же эффекты и прочие фокусы? Вот с ними-то мы сейчас и разберемся.

====Получаем огонь====

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

# convert -size 320x120 xc:black -font /home/alex/fonts/Gothic.ttf
-pointsize 72 \
-fill yellow -annotate +25+95 'Linux' -motion-blur 0x25+90 \
-background red -rotate 60 -wave 3x35 -rotate -60 \
-gravity center -crop 320x120+0+0 +repage +gravity \
-fill navy -annotate +25+95 'Linux' font_smoking4.jpg

{{Врезка|Содержание=[[Изображение:LXF117_71_1.jpg|300px]]Готика традиционно ассоциируется с инфернальными моти ами — неудивительно, что для огненного текста мы выбрали именно такой шрифт.|Ширина=300px}}

Внимательные читатели наверняка заметили, что в ней мы используем несколько новых опций: '''xc:black''' – цвет фона, на котором будет располагаться изображение, '''-motion-blur 0x25+90''' – размывание, '''-rotate -60''' – поворот изображения на 60 градусов. Вот
тут бы нам и пригодился графиче кий интерфейс: сначала мы поворачиваем изображение, затем применяем опцию '''-wave 3x35''' (аналогично функции '''wind''' в ''Adobe Photoshop''), после чего возвращаем его в исходную позицию; промежуточных результатов (того, что происходит в этот момент с картинкой) мы увидеть, увы, не можем. '''-annotate +25+95 'Linux'''' «комментирует» изображение текстом «Linux», '''-crop 320x120+0+0''' вырезает заданную прямоугольную область (320 × 120 пикселей, отсчитывая от левого верх его угла).

На рисунке этого не видно, но от «высокой температуры горения Linux» у нас даже оплавились края изображения, что добавило еще немного реалистичности. Ключ '''-fill''' отвечает за цвет того или иного объекта композиции: его можно смело менять, создавая огонь на свой вкус (кто сказал: «гори оно синем пламенем»?!).

====Неоновая вывеска====

Думаю, почти каждому любителю графики понравится текст в виде ослепительной неоновой вывески. Ее создание в ''ImageMagick'' не вызывает проблем; если приложить некоторые усилия, то сам эффект будет смотреться не хуже, чем созданный в ''GIMP'' или даже в ''Photoshop'' (впечатляет, особенно если учесть, что мы работаем вслепую).

# convert -fill dodgerblue -background black -font /home/alex/fonts/Gothic.ttf -pointsize 72 \
label:' Neon Hotel ' -bordercolor black -border 30x30 \(+clone -blur 0x25 -level 0 %,50 % \) \
-compose screen -composite neon.gif

{{Врезка|Содержание=[[Изображение:LXF117_71_2.jpg|300px]]За голубое свечение на этом рисунке отвечает фильтр '''Blur'''.|Ширина=300px}}

Как видите, мы практиче ки не используем ничего нового. Незначительным изменениям подвергся только эффект размывания: для «неонового свечения» нам необходимо настроить его более тонко, указав уровень и частоту. За это отвечают опции '''+clone''' и '''-level'''. Еще один новый параметр, '''-compose screen''', отвечает за способ наложения пикселей. На рисунке, который вы видите, используется нестандартный
готиче кий шрифт. На вкус и цвет товарищей нет: уверен, вы уже достаточно освоились в ''IM'', чтобы подставить вместо него другую,
более близкую вам гарнитуру.

====Блики на стекле====

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

# convert -background navy -fill DodgerBlue \
-font /home/alex/fonts/ttona.ttf -pointsize 130 label:'Water Text'
-trim \(+clone -alpha On -blur 0x8 -shade 110x30 -normalize \
-alpha On \) \
-compose HardLight -composite blick.png

{{Врезка|Содержание=[[Изображение:LXF117_71_3.jpg|300px]]Создать эффект выдавленного в геле текста в ''ImageMagick'' тоже несложно.|Ширина=300px}}

Поясним некоторые новые моменты. Опция '''-trim''' применяется для «подгонки» краев изображения по размеры надписи; она не столь необходима, но без нее текст оказался бы «где попало» (других параметров, влияющих на расположение, вроде '''-gravity center''', здесь нет). Скобки нужны, чтобы выделить канал, который создается опцией '''-alpha On''', включающей прозрачность, в отдельный блок. Экранирующий слэш перед ними необходим, так как '''(''' и ''')''' являются метасимволами оболочки. Увидев в этой команде скобки, ''IM'' сначала выполняет операцию '''+clone -alpha On -blur 0x8 -shade 110x30 -normalize''', затем '''-alpha On''' и налагает результаты
друг на друга по методу '''-compose HardLight'''.

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

===Часть 3: Трехмерный логотип===

Ни для кого не секрет, что с помощью графиче ких редакторов создают всевозможные кнопки и логотипы для сайтов. Зачастую это «трехмерные» изображения, потому как они смотрятся намного привлекательнее своих плоских собратьев. С помощью ''ImageMagick'' тоже можно создать 3D-кнопку или логотип, и для этого потребуется не так уж много этапов. В нашем случае, их будет пять. В принципе, данный процесс можно автоматизировать, но из-за сложности подбора различных параметров это не всегда будет работать корректно: генерировать один и тот же баннер, создавая его посредством скрипта – не самое разумное решение. С другой стороны, если перед вами стоит задача создать множество похожих друг на друга изображений, определенная автоматизация не помешает.

Упомянутые выше пять наших этапов сводятся к следующему:

{{Врезка|Содержание=[[Изображение:LXF117_72_1.jpg|400px]]Для создания объемного логотипа из ничего требуется всего пять шагов.|Ширина=400px}}

# Создание контура логотипа или маски.
# Заливка контура цветом и нанесение на него надписи.
# Самая ответственная часть – наложение теней, именно благодаря им изображение приобретает объем.
# Склеивание маски и полученного после третьего этапа промежуточного изображения.
# Создание тени, которую наш трехмерный логотип будет отбрасывать на задний план.

Итак, приступим к генерации контура. Это делается следующим образом.
# convert -size 170x100 xc:black \
-fill white -draw 'circle 40,40 3,40' \
-draw 'circle 110,40 147,40' \
-draw 'rectangle 40,3 110,77' \
-fill black -draw 'circle 40,40 15,40' \
-draw 'circle 110,40 135,40' \
-draw 'rectangle 40,15 110,65' \
-fill white -draw 'circle 50,40 30,40' \
-draw 'circle 100,40 120,40' \
-draw 'rectangle 50,20 100,60' \
-gaussian 1x1 +matte ant_mask.png

Мы создаем два овала – центральный и наружный. Главная сложность этой операции заключается в правильном подборе координат обеих фигур: в отличие от ''GIMP'', мы видим только конечный результат, поэтому придется поэкспериментировать. Для создания овалов мы использовали опцию '''-draw''', указав в одинарных кавычках требуемый примитив ('''circle''' – окружность) и его координаты.

Теперь, когда заготовка сделана, можно приступать ко второму этапу: нанесению надписи и заливке цветом. Это намного проще – надо лишь закрасить требуемые области изображения. Здесь-то и пригодится наша маска:

# convert ant_mask.png -fill green -draw 'color 0,0 reset' \
ant_mask.png +matte -compose CopyOpacity -composite \
-font Gothic.ttf -pointsize 23 -fill black -stroke yellow \
-gravity Center -annotate 0 "LXF" ant.png

Ключевыми в данной команде являются параметры цвета шрифта, его гарнитура и размер букв, наносимых поверх логотипа, и, конечно, их цвет. Я использовал зеленый в каче тве основного цвета, задав его параметром '''-fill green''', выбранный шрифт – Gothic,
как и на «неоновой вывеске» ('''-font Gothic.ttf'''). Опция '''-pointsize 23''' указывает на размер букв в логотипе – 23 пикселя, а '''-stroke yellow''' рисует вокруг них симпатичный ободок. Надпись располагается по центру ('''-gravity Center''').

Настало время придать изображению объем (все помнят винную бутылку из [[LXF115:GIMP|LXF115‑116]]?). Это делает следующая команда; поиграв с входящими в нее параметрами, вы можете получить совсем другие (хотя и тоже «трехмерные») изображения.

# convert ant.png -fx A +matte -blur 0x6 -shade 110x30 -normalize \
ant.png -compose Overlay -composite \
ant.png -matte -compose Dst_In -composite\
ant_3D_newone.png

Эффект трехмерности достигается благодаря хорошо извест ным функциям, аналогичным фильтрам ''GIMP''. Это размывание ('''-blur'''), тень ('''-shade'''), повышение контрастности ('''-normalize''') и наложение ('''-compose Overlay''').

Обратите внимание, что на выходе вы получите два изображения: одно будет похоже на «незаконченное 3D», второе будет точной копией картинки, сгенерированной предыдущей командой. Для получения окончательного результата нам необходимо склеить нашу маску с первым из них. Это действие выполняется командой:

# convert 1.png ant_mask2.png +matte -compose CopyOpacity \
-composite logo.png

Превосходно! Теперь у нас есть готовый трехмерный логотип на прозрачном фоне. Последнее, что осталось сделать – это изобразить тень, отбрасываемую логотипом. Данная операция снова делится на два шага: создание тени и ее наложение. Тень, разумеется, должна быть аналогична логотипу по форме и размеру. Получить ее можно командой:

# convert logo.png -channel A -blur 0x6 +channel -fill green \
-colorize 100 % shade.png

Чтобы «подложить» ее под логотип, выполните следующее:

# convert shade.png -background none -gravity SouthEast -splice \
6x6+0+0 logo.png -compose Dst_Over -composite logo3D_final.png

Эта команда станет завершающим штрихом в создании «трехмерного» логотипа. Результат вполне может удовлетворить даже самых требовательных ценителей графики (при том, что он получен в консоли), однако это всего лишь учебный пример: посерьезнее взявшись за дело, можно добиться еще большей реалистичности.

===Три безусловия===

''ImageMagick'', безусловно, является классным редактором, обладающим широкими возможностями и, главное, потенциалом, ведь приоритетом любого программного продукта является улучшение его качеcтва.

''ImageMagick'' есть куда расти и развиваться, и, возможно, уже в ближайшем будущем мы увидим, как консольный графичеcкий редактор составляет достойную конкуренцию программам с GUI-интерфейсом.

''ImageMagick'', безусловно, можно и нужно использовать. Не стоит сетовать на минусы или заявлять о плюсах: такое присуще любому программному продукту, и главное – это баланс между такими важными параметрами, как ресурсоёмкость и качество, удобство и доступность, интеграция и возможность расширения. Очень важно то, что ''ImageMagick ''является свободным ПО, и вы тоже можете принять участие в его развитии, внося тем самым свой вклад в создание этого баланса.

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

LXF117:ImageMagick - История изменений

Crazy Rebel: викификация, оформление, иллюстрация