AssetThumbnailMagick プラグインでサムネイルあれこれ。

| コメント(2) | トラックバック(0)

先週の土曜日に行ってきたんですよ、ええ。

今やイラレもフォトショもMacに入れてなくて自分で画像をあれこれすることもまったく無くなっちゃってるんですが(一応ベジェ扱えるんだぜこれでも)、Web制作/CMSの会社経営してるんだからデザインのお勉強だって必要ですよね。

で、冒頭あたりで、「円窓切り抜き(画像を丸く切り抜く)」ってのが取り上げられていたので、会場でコーディング始めちゃってアップしました。お前話し聞いてねーだろ(いや、ちゃんと聞いてましたよ、社内イントラにつぶやきながら)

※注意 : ダイナミックについては調整中、ノーテストです。

で、週末にあれこれ調整してたら何か楽しくなってきちゃって、こんな感じになりました。

生成されたサムネイル画像たち! 素材はビールです

<div style="padding:2em;text-align:center;letter-spacing:1em;line-height:2em;width:600px">
<mt:Setvar name="size" value="150">
<mt:Setvar name="round" value="20">
<MTAsset id="144">
<img src="<MTAssetThumbnailMagick square="1" type="circle" width="$size" force="1">" alt="丸(切り抜き)">
<img src="<MTAssetThumbnailMagick square="1" type="roundrectangle" round="$round" width="$size" opacity="0.3" composite="sp_icon" force="1">"  alt="スマホアイコン風(切り抜き+重ね)">
<img src="<MTAssetThumbnailMagick square="1" type="heart" width="$size" force="1">" alt="ハート">
<img src="<MTAssetThumbnailMagick square="1" type="roundrectangle" round="$round" width="$size" force="1">" alt="角丸(切り抜き)">
<img src="<MTAssetThumbnailMagick square="1" type="star" width="$size" force="1">" alt="星型(切り抜き)">
<img src="<MTAssetThumbnailMagick square="1" type="star" width="$size" opacity="0.8" composite="star" force="1">" alt="星形(立体)">
<img src="<MTAssetThumbnailMagick square="1" type="abc" width="$size" opacity="0.8" force="1">" alt="ABC(文字切り抜き)">
<img src="<MTAssetThumbnailMagick square="1" width="$size" opacity="0.8" composite="kirakira" force="1">" alt="きらきら(重ね)">
<img src="<MTAssetThumbnailMagick square="1" width="$size" opacity="0.8" composite="punpun" force="1">" alt="怒(重ね)">
<img src="<MTAssetThumbnailMagick square="1" width="$size" opacity="0.8" composite="namida" force="1">" alt="涙(重ね)">
<img src="<MTAssetThumbnailMagick square="1" type="shizuku" width="$size" force="1">" alt="しずく(切り抜き)">
</MTAsset>
</div>

アイテムのコンテキストの中で MTAssetThumbnailMagick タグが使えます。基本的にこいつの処理は(途中までは) MTAssetThumbnailURL と同じで、サムネイルを生成した後で、

  • (モディファイアで指定があれば)画像を重ねる
  • (モディファイアで指定があれば)マスクで切り抜く

という処理をします。typeモディファイアで指定できるのは circle(円形)、roundrectangle(角丸)の2つなのですが、プラグインのディレクトリ直下の masks 以下に heart.png のような形でマスク画像を置けば heart 指定でその画像でマスクします。角丸の場合は r(ピクセル)をroundモディファイアに渡します。

重ねることのできる画像は同じくプラグインのディレクトリ直下の composites ディレクトリ以下にpng画像を設置し、composite="namida"のように指定します(composites/namida.pngが重ねられる)。opacityモディファイアで、重ねるときの透明度を指定します。

ま、コーポレートサイトなんかで使うシーンは限られると思うし、今どきであればCSSだけでできてしまうんだけど、お手軽だし、古いブラウザもOKだし(透過PNGは駄目なブラウザがあったっけ(遠い目))、何より、何か楽しいのでブログのデザインで遊ぶ用途にいーんじゃないかな。

追記 : forceモディファイアは毎回強制的に再構築時にサムネイルを生成するものです。これがない場合、オリジナルのタイムスタンプをチェックして、更新されていた場合のみ再生成されます。

トラックバック(0)

トラックバックURL: http://junnama.alfasado.net/cgi/mt/mt-tb.cgi/697

コメント(2)

@riatw http://t.co/incixHoLSv この辺の奴を参考にImageMagickで画像に文字を合成するようにすればできそうですけどね 見栄え良くできるかは別として

Movable Typeのプラグインで画像切り抜きとか変態だな(笑) 使うシーンが難しいけどおもしろい!

コメントする

Facebook

Twitter

このブログ記事について

このページは、Junnama Nodaが2013年3月 7日 21:01に書いたブログ記事です。

ひとつ前のブログ記事は「Kansai.pm 第15回ミーティングに参加してきました。」です。

次のブログ記事は「博多の皆さん! ごめんなさいm(_ _)m ばってん...」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 6.2.6