Журнал LinuxFormat - перейти на главную

LXF117:ImageMagick

Материал из Linuxformat
(Различия между версиями)
Перейти к: навигация, поиск
(викификация, оформление, иллюстрация)
 
(Часть 3: Трехмерный логотип)
 
Строка 164: Строка 164:
 
как и на «неоновой вывеске» ('''-font Gothic.ttf'''). Опция '''-pointsize 23''' указывает на размер букв в логотипе – 23 пикселя, а '''-stroke yellow''' рисует вокруг них симпатичный ободок. Надпись располагается по центру ('''-gravity Center''').
 
как и на «неоновой вывеске» ('''-font Gothic.ttf'''). Опция '''-pointsize 23''' указывает на размер букв в логотипе – 23 пикселя, а '''-stroke yellow''' рисует вокруг них симпатичный ободок. Надпись располагается по центру ('''-gravity Center''').
  
Настало время придать изображению объем (все помнят винную бутылку из [[LXF115:GIMP|LXF115‑116]]?). Это делает следующая команда; поиграв с входящими в нее параметрами, вы можете получить совсем другие (хотя и тоже «трехмерные») изображения.
+
Настало время придать изображению объем (все помнят винную бутылку из [[LXF115:GIMP2.4|LXF115‑116]]?). Это делает следующая команда; поиграв с входящими в нее параметрами, вы можете получить совсем другие (хотя и тоже «трехмерные») изображения.
  
 
  # convert ant.png -fx A +matte -blur 0x6 -shade 110x30 -normalize \  
 
  # convert ant.png -fx A +matte -blur 0x6 -shade 110x30 -normalize \  

Текущая версия на 20:08, 3 июля 2014

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

Содержание

[править] ImageMagick: Яркие эффекты

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

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

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

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

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

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

[править] Часть 1: Граффити

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


Для чего могут понадобиться красивые, изыскано выполненные надписи с оригинальным шрифтом? Согласитесь, вопрос некорректный, ведь они используются повсеместно: в печатных изданиях, 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 в сценарии по обработке массива изображений для добавления водяного знака, но теперь я покажу, как выполнить это двумя разными способами.

Первый вариант – использовать утилиту 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


С первого взгляда она может показаться немного запутанной, но это не так. С опциями -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


Внимательные читатели наверняка заметили, что в ней мы используем несколько новых опций: 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


Как видите, мы практиче­ ки не используем ничего нового. Незначительным изменениям подвергся только эффект размывания: для «неонового свечения» нам необходимо настроить его более тонко, указав уровень и частоту. За это отвечают опции +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


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


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

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

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

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


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

Итак, приступим к генерации контура. Это делается следующим образом.

# 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‑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

Персональные инструменты
купить
подписаться
Яндекс.Метрика