角丸サムネイルの作り方、プラグイン、表示方法を教えてください。

質問

イラストサイトリニューアルのため、作業をしています。

http://q-orbit.jp/pictures/
http://gurimasu.cside5.jp/blog/gallery.html
上に挙げたようなサイトのようなギャラリーを目標にしているのですが、
このような角丸サムネイルはどのように作られているのでしょうか。
前者は枠の中にあとから、パラパラとイラストが表示されていくので
何か、プラグインかjavaか何かを使っているのではないかと
素人想像しています。
膨大なイラスト（200枚くらいあります）を1枚ずつ
角丸サムネイルを作るのは大変面倒なので、何か
プラグインやフィルタ（Photoshopの）があれば教えていただけないでしょうか。
ちなみに、普通のサムネイルは作成可能です。
また、サムネイル作成ソフトも探してみましたが、
角丸サムネイルは見つかりませんでした。

よろしくお願いいたします。

回答No.3

ddg67 · ベストアンサー

前者はスタイルシートで表示させてます、後者はサムネイル画像を作ってそれを表示

角丸サムネイルなんて５分も掛かりませんよ(^_^;

アクションを組みます。
角丸選択ツール（オプションで大きさ指定して）切り抜きたい場所を選択、別名で保存。
というアクションを組んで、切り抜きの時に一時停止するように設定しておきます（一時停止することで好きな絵柄の場所で切りぬけます）

自動処理→バッチで、フォルダと保存先を指定して実行させればいいだけです

切り抜き場所が一定なら、一時停止させないで実行すれば２分と掛からないでしょうし（ファイルサイズやパソコンのスペックによって違いますが(^_^;）

任意の場所をあれこれ迷って決めてるともーちょっと時間が掛かります。

ま、どっちにしろ200枚程度のサムネイル化なんて（切り抜きのサムネイルじゃなくて全画像の縮小化もできます）そんなに時間の掛かる作業じゃないですよ(^_^;

Photoshopのバージョンによって、アクションの組み方が違うので示しましょう、角丸選択ツールが無いバージョンもありますし(^_^;

お礼

ご回答、ありがとうございました。

すみません、PhotoshopのバージョンはCS3でした。
切り抜きの時に一時停止するように設定するのがわからなくて
アクションをあきらめていました。
やってみます。

回答No.2

kodomo55

1つ目のサイトでの表示方法は HTMLとCSS で工夫しています。
枠画像(中は透明で枠の外側は白で塗りつぶし)を1つ用意し、
その表示の下に特定縦横サイズの画像を敷くことで、枠付きに見せています。

2つ目のサイトでは、全ての画像に枠を付けています。
Photoshopであれば、それほど難しくない処理なので、
その処理でバッチ処理すれば200枚くらいなら簡単に出来るはずです。

プラグインで角を丸めたいのであれば、
http://www.pentacom.jp/pentacom/products.html
ここにある、Rounded Corner という物は如何でしょうか。

お礼

ご回答ありがとうございます。

なるほど、画像自体は切り抜いているけれど、
角丸にはなっていないんですね。
中は透明で枠の外側は白で塗りつぶしなのですね。
ご説明、ありがとうございました。

プラグインの紹介もありがとうございました。
できなかったら、プラグインに頼ることにします。

回答No.1

dezimac

Photoshopならアクション機能を使えば、決まりきった同じ作業を自動化できます。

・適当な大きさに縮小
・選択範囲 > 全てを選択
・選択範囲 > 選択範囲を変更 > 境界線（幅2ピクセル）
・選択範囲 > 選択範囲を変更 > 滑らかに（半径4ピクセルくらい）
・編集 > 消去
・選択範囲 > 選択範囲を反転
・選択範囲 > 選択範囲を変更 > 境界線（幅1ピクセル）
・編集 > 塗りつぶし（黒）
・Web用に保存

やり方なんていくらでもありますが、その一例。
これを記録しておけば、あとはボタン一つでいつでも同じ事が出来ます。
バッチ処理で何百枚あっても自動で行わせる事も可能です。

http://web.kyoto-inet.or.jp/people/hikeda/justnet/smu/smu02/smu02.html

> 前者は枠の中にあとから、パラパラと～
JavaScriptとか一切使っていません。
中透明な枠の画像を用意して、サムネイル画像をその背景として表示しているだけです。
バラバラと順次表示されるのは、読み込みに時間がかかっているだけ。
枠は軽くて皆同じだから、1枚読んだら即表示できるけど、サムネイルは1枚1枚違うから、読み込み終わったのから表示としているから、そういうふうに見えているだけです。

この手のはソースを見ればわかります。
<img width="40" height="70" alt="○×" style="background-image:url(サムネイル画像URL);background-position:center center; border:none;" src="枠画像URL" />

参考URL：

http://web.kyoto-inet.or.jp/people/hikeda/justnet/smu/smu02/smu02.html

お礼

ご回答、ありがとうございます。

アクションは、任意の場所を切り取ったりするので
全部自動化できないだろうとあきらめていました。
URLを参考に、やってみます。

>JavaScriptとか一切使っていません。
>中透明な枠の画像を用意して、サムネイル画像をその背景として表示
>しているだけです。
>バラバラと順次表示されるのは、読み込みに時間がかかっているだけ。
うわ～、なぞが解けてすっきりしました。
つまり、中が透明な枠の画像の下に、それぞれのサムネイルが
背景として乗っかっているということですか。
全然わかりませんでした。

ありがとうございました。