ImageMagickで影を回転させる

ImageMagickで-rotateオプションで影を回転させて立体感を
出すこともできます。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe -size 80x30 xc:none -fill #ffffff -draw "roundrectangle 5,5 79,29 4,4"
( +clone -background #000000 -shadow 30x2-3+1 -background none -rotate 5 )
+swap -background #bbddff -mosaic sample112.jpg

出力画像(sample112.jpg)


関連項目
ImageMagickで影の方向を変える

ImageMagickでラベルの付いた角丸四角画像を作成する

ImageMagickでラベルの付いた角丸四角画像を作成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem 左下だけ角丸の四角形
im%\convert.exe -size 60x24 xc:none -fill #000000 -draw "roundrectangle 0,0 59,23 4,4" -gravity northeast -chop 4x4 lbl.gif
rem 画像と重ねあわせを行い文字列を描画
%im%\convert.exe sample7.jpg -gravity northeast lbl.gif -composite +gravity -pointsize 16 -font "c:/winnt/fonts/msmincho.ttc" -fill #ffffff -draw @title.txt sample111a.png
rem 角丸四角に切り抜き
%im%\convert.exe -size 150x100 xc:none -channel RGBA -fill white -draw "roundrectangle 0,0 149,99 10,10" sample111a.png -compose src_in -composite sample111b.gif

文字列描画用ファイル(title.txt)UTF-8にて保存します。
text 100,16 'お花'

元画像(sample7.jpg)


出力画像(sample111.gif)

ImageMagickで光沢のあるタブ画像を生成する

ImageMagickで光沢のあるタブ画像を生成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16
rem タブ画像1 - 非選択
%im%\convert.exe -size 100x30 xc:none -fill #c0c0c0 -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#c0c0c0-#f2f2f2 -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #909090 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133a.gif
rem タブ画像1 - 選択
%im%\convert.exe -size 100x30 xc:none -fill #bbddff -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#bbddff-#f0f5ff -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #3070a0 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133b.gif
rem タブ画像1 - hover
%im%\convert.exe -size 100x30 xc:none -fill #aaccf0 -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#aaccf0-#e0e5ff -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #3070a0 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133c.gif
rem ３つのボタン画像を連結
%im%\convert.exe sample133a.gif sample133b.gif sample133c.gif +append tab1.gif

出力画像(tab1.gif)

ImageMagickで端がグラデーションの半透明角丸四角形を描画する

ImageMagickで端がグラデーションの半透明角丸四角形を描画するには
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16

%im%\convert.exe -size 120x120 xc:#ffffffff -channel RGBA -fill #000000FF -draw "roundrectangle 10,10 110,110 10,10" -blur 0x7 -crop 100x100+10+10 +repage -channel A -fx 0.3 sample109a.png
%im%\convert.exe -size 100x100 xc:none -channel RGBA -fill white -draw "roundrectangle 0,0 99,99 10,10" sample109a.png -compose src_in -composite sample109b.png
%im%\convert.exe sample1.jpg sample109b.png -geometry +10+10 -composite sample109c.jpg

出力画像(sample109b.png)


元画像(sample1.jpg)

出力画像(sample109c.jpg)

ImageMagickで消えていく影を描画する

Webページなどで見かける消えていく影を描画するには、
以下のコマンドを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe -size 100x100 xc:none -fill white -draw "rectangle 0,0 49,99" -channel RGBA sample110a.png
%im%\convert.exe -size 100x100 xc:white -fill #fad759 -draw "rectangle 50,25 99,74" sample110a.png ( +clone -background #000000 -shadow 40x3+2+2 -crop 100x100 -fx "1-sin(pi*j/h)" ) +swap -mosaic sample110b.jpg

出力画像(sample110b.jpg)

ImageMagickで左上が明るい半透明グラデーションを描画する

ImageMagickで左上が明るい半透明グラデーションを描画するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16

%im%\convert.exe -size 80x40 xc:#f8f8ffff -channel A -fx "((w-i)/w)*((h-j)/h)*0.6+0.3" grad.png
rem 重ね合わせ
%im%\convert.exe sample2bg.jpg grad.png -geometry +10+10 -composite -fill #204070 -draw "font-size 14 text 16,26 'Flower'" sample107a.jpg

元画像(sample2bg.jpg)

出力画像(sample107a.jpg)

ImageMagickで横線の入ったボタンを生成する

ImageMagickで横線の入ったボタンを生成するには、以下のバッチファイルを
実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16

rem ボタン画像1
%im%\convert.exe -size 100x20 xc:none -tile gradient:#c0c0c0-#f2f2f2 -stroke #ffffff -draw "roundrectangle 0,0 99,19 8,8" -fx "j%%2==0?p:p*0.8" +tile -stroke none -fill #a0a0a0 -draw "font-size 12 text 32,15 'Search'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample130a.gif

rem ボタン画像2
%im%\convert.exe -size 100x20 xc:none -tile gradient:#bbddff-#f0f5ff -stroke #ffffff -draw "roundrectangle 0,0 99,19 8,8" -fx "j%%2==0?p:p*0.8" +tile -stroke none -fill #3070a0 -draw "font-size 12 text 32,15 'Search'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample130b.gif

rem ２つのボタン画像を連結
%im%\convert.exe sample130a.gif sample130b.gif +append button.gif

出力画像(button.gif)