最近のエントリーはアップデートばかりでバランスが悪いので、たまには開発日誌を書いてみよう。
それなりにプロ意識を持ったデザイナー達がざわざわとエントリーしてそうなDeviantART
のサイト。ここでは至る所で作品のサムネイル画像を目にすることができます。で、どの画像にもいい感じでドロップシャドウが利いていますね。ドロップッシャドウ自体はppBlogでも指定出来るのですが、このDeviantのサイトのように綺麗ではありません。何故なら、おそらくDeviantのサイトでは、個々のサムネイルの大きさに合わせて、動的に「影」を生成しているからです(おそらく。ソースを見た感じでの推論です)。ppBlogでは、サーバーへの負荷やパフォーマンスを考慮して、このアプローチは取っていません。何より、PHPでのドロップシャドウのプログラムは「何だかややこしそうだ」というのがありました。
でも、画像ギャラリーのサムネイル画像で、ぜひともDeviantみたいなドロップシャドウを実現したくて勉強がてらスクリプトを書いてみました。こんな感じです。左上にある「エリア拡張ボタン」を押すと見やすいと思います。
function ImageDropShadow($from='', $output, $borderW=5){
$size = GetImageSize($from);
$tl_shadow = ImageCreateFromPNG("Images/top-left.png");
$offsetX = ImageSX($tl_shadow);
$offsetY = ImageSY($tl_shadow);
$br_shadow = ImageCreateFromPNG("Images/bottom-right.png");
$shadowX = ImageSX($br_shadow);
$shadowY = ImageSY($br_shadow);
$canvas = ImageCreateTrueColor($size[0]+$offsetX+$shadowX+$borderW*2, $size[1]+$offsetY+$shadowY+$borderW*2);
ImageAlphaBlending($canvas, true);
switch ($size[2]){
case 1 : $out = ImageCreateFromGIF($from); break;
case 2 : $out = ImageCreateFromJPEG($from); break;
case 3 : $out = ImageCreateFromPNG($from); break;
}
$bg_color = ImageColorAllocate($canvas, 255, 255, 255);
Imagefilledrectangle ($canvas, 0, 0, ImageSX($canvas), ImageSY($canvas), $bg_color);
ImageCopy ($canvas, $out, $offsetX+$borderW, $offsetY+$borderW, 0, 0, $size[0], $size[1]);
// top left
ImageCopyResampled($canvas, $tl_shadow, 0,0, 0,0, $offsetX,$offsetY, $offsetX,$offsetY);
$tp_shadow = ImageCreateFromPNG("Images/top.png"); // top
ImageCopyResampled ($canvas, $tp_shadow, $offsetX,0, 0,0, $size[0]+$borderW*2,$offsetY, ImageSX($tp_shadow),ImageSY($tp_shadow));
$tr_shadow = ImageCreateFromPNG("Images/top-right.png"); // top right
ImageCopyResampled ($canvas, $tr_shadow, $offsetX+$size[0]+$borderW*2,0, 0,0,
$offsetX,$offsetY, ImageSX($tr_shadow),ImageSY($tr_shadow));
$r_shadow = ImageCreateFromPNG("Images/right.png"); // right
ImageCopyResampled ($canvas, $r_shadow, $size[0]+$offsetX+$borderW*2,$offsetY, 0,0,
$shadowX,$size[1]+$borderW*2, ImageSX($r_shadow),ImageSY($r_shadow));
$l_shadow = ImageCreateFromPNG("Images/left.png"); // left
ImageCopyResampled ($canvas, $l_shadow, 0,$offsetY, 0,0,
$offsetX,$size[1]+$borderW*2, ImageSX($l_shadow),ImageSY($l_shadow));
$bl_shadow = ImageCreateFromPNG("Images/bottom-left.png"); // bottom left
ImageCopyResampled ($canvas, $bl_shadow, 0,$size[1]+$offsetY+$borderW*2, 0,0,
$offsetX,$shadowY, ImageSX($bl_shadow),ImageSY($bl_shadow));
ImageCopyResampled ($canvas, $br_shadow, $offsetX+$size[0]+$borderW*2,$offsetY+$size[1]+$borderW*2,// bottom right
0,0, $shadowX,$shadowY,$shadowX,$shadowY);
$bm_shadow = ImageCreateFromPNG("Images/bottom.png"); // bottom
ImageCopyResampled ($canvas, $bm_shadow, $offsetX,$offsetY+$size[1]+$borderW*2, 0,0,
$size[0]+$borderW*2,$shadowY, ImageSX($bm_shadow),ImageSY($bm_shadow));
ImageDestroy($tl_shadow); ImageDestroy($tp_shadow); ImageDestroy($tr_shadow);
ImageDestroy($l_shadow); ImageDestroy($r_shadow);
ImageDestroy($bl_shadow); ImageDestroy($bm_shadow); ImageDestroy($br_shadow);
ImageDestroy($out);
switch ($size[2]){
case 1 : case 3: ImagePNG($canvas, $output); break; // GIF and PNG
case 2 : $out = ImageJPEG($canvas, $output); break; // JPEG to JPEG
}
ImageDestroy ($canvas);
}
いやー、長い長い。メモ紙に模式図を書きながらでないと、とても頭の中だけでは無理でした。改良の余地はありそうですが、これをutils.phpに組み込んで、画像ギャラリーのサムネイル画像はそれっぽいドロップシャドウ付きで表示できるようになりました。Deviantと違う点は、Deviantはサムネイル画像とは別に、背景に影を(動的に)用意しているのですが、この上に挙げた関数で生成される影はサムネイルと一体化しています。なので、一度サムネイル画像を作ってしまえばおしまいなので、サーバー負荷などを気にする必要もありません。
上のギャラリーアイコンをクリックして雰囲気を見てください。最初にしては、まぁまぁかなと。なお、ここのギャラリーは、まだ画像が少ないんでイマイチな感じですが、weblogの方は画像が揃っているので、なかなか見ごたえはあります→http://martin.p2b.jp/index.php?mode=gallery
Y:
ALL:
Comments