イラストサイトリニューアルのため、作業をしています。
http://q-orbit.jp/pictures/
http://gurimasu.cside5.jp/blog/gallery.html
上に挙げたようなサイトのようなギャラリーを目標にしているのですが、
このような角丸サムネイルはどのように作られているのでしょうか。
前者は枠の中にあとから、パラパラとイラストが表示されていくので
何か、プラグインかjavaか何かを使っているのではないかと
素人想像しています。
膨大なイラスト(200枚くらいあります)を1枚ずつ
角丸サムネイルを作るのは大変面倒なので、何か
プラグインやフィルタ(Photoshopの)があれば教えていただけないでしょうか。
ちなみに、普通のサムネイルは作成可能です。
また、サムネイル作成ソフトも探してみましたが、
角丸サムネイルは見つかりませんでした。
よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
前者はスタイルシートで表示させてます、後者はサムネイル画像を作ってそれを表示
角丸サムネイルなんて5分も掛かりませんよ(^_^;
アクションを組みます。
角丸選択ツール(オプションで大きさ指定して)切り抜きたい場所を選択、別名で保存。
というアクションを組んで、切り抜きの時に一時停止するように設定しておきます(一時停止することで好きな絵柄の場所で切りぬけます)
自動処理→バッチで、フォルダと保存先を指定して実行させればいいだけです
切り抜き場所が一定なら、一時停止させないで実行すれば2分と掛からないでしょうし(ファイルサイズやパソコンのスペックによって違いますが(^_^;)
任意の場所をあれこれ迷って決めてるともーちょっと時間が掛かります。
ま、どっちにしろ200枚程度のサムネイル化なんて(切り抜きのサムネイルじゃなくて全画像の縮小化もできます)そんなに時間の掛かる作業じゃないですよ(^_^;
Photoshopのバージョンによって、アクションの組み方が違うので示しましょう、角丸選択ツールが無いバージョンもありますし(^_^;
ご回答、ありがとうございました。
すみません、PhotoshopのバージョンはCS3でした。
切り抜きの時に一時停止するように設定するのがわからなくて
アクションをあきらめていました。
やってみます。
No.2
- 回答日時:
1つ目のサイトでの表示方法は HTMLとCSS で工夫しています。
枠画像(中は透明で枠の外側は白で塗りつぶし)を1つ用意し、
その表示の下に特定縦横サイズの画像を敷くことで、枠付きに見せています。
2つ目のサイトでは、全ての画像に枠を付けています。
Photoshopであれば、それほど難しくない処理なので、
その処理でバッチ処理すれば200枚くらいなら簡単に出来るはずです。
プラグインで角を丸めたいのであれば、
http://www.pentacom.jp/pentacom/products.html
ここにある、Rounded Corner という物は如何でしょうか。
ご回答ありがとうございます。
なるほど、画像自体は切り抜いているけれど、
角丸にはなっていないんですね。
中は透明で枠の外側は白で塗りつぶしなのですね。
ご説明、ありがとうございました。
プラグインの紹介もありがとうございました。
できなかったら、プラグインに頼ることにします。
No.1
- 回答日時:
Photoshopならアクション機能を使えば、決まりきった同じ作業を自動化できます。
・適当な大きさに縮小
・選択範囲 > 全てを選択
・選択範囲 > 選択範囲を変更 > 境界線(幅2ピクセル)
・選択範囲 > 選択範囲を変更 > 滑らかに(半径4ピクセルくらい)
・編集 > 消去
・選択範囲 > 選択範囲を反転
・選択範囲 > 選択範囲を変更 > 境界線(幅1ピクセル)
・編集 > 塗りつぶし(黒)
・Web用に保存
やり方なんていくらでもありますが、その一例。
これを記録しておけば、あとはボタン一つでいつでも同じ事が出来ます。
バッチ処理で何百枚あっても自動で行わせる事も可能です。
http://web.kyoto-inet.or.jp/people/hikeda/justne …
> 前者は枠の中にあとから、パラパラと~
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/justne …
ご回答、ありがとうございます。
アクションは、任意の場所を切り取ったりするので
全部自動化できないだろうとあきらめていました。
URLを参考に、やってみます。
>JavaScriptとか一切使っていません。
>中透明な枠の画像を用意して、サムネイル画像をその背景として表示
>しているだけです。
>バラバラと順次表示されるのは、読み込みに時間がかかっているだけ。
うわ~、なぞが解けてすっきりしました。
つまり、中が透明な枠の画像の下に、それぞれのサムネイルが
背景として乗っかっているということですか。
全然わかりませんでした。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) Wordpress 複数プラグインの不具合? 1 2022/10/09 21:52
- CAD・DTP 「機能ブロック図」の描画用フリーソフトを教えてください 1 2022/09/23 16:12
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- WordPress(ワードプレス) ワードプレスで検索サイトのプラグインを探しています。 1 2023/02/26 12:20
- WordPress(ワードプレス) 「あるサイトのリンクを踏まないと、次のサイトを見れない仕組み」を作りたい 2 2022/07/20 02:43
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- HTML・CSS 使用しているプラグインの自動表記リンクを目立たなくする方法はありますか? 1 2022/07/15 19:00
- iOS これは日本語入力の大発明ですか? 7 2022/12/21 07:17
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Photoshopでパスのオフセットの...
-
GIMPで選択した範囲にdeleteキ...
-
Photoshop Element で円を描くには
-
PDFの表がエクセルに貼り付けら...
-
Photoshopで輪郭をなめらかにし...
-
GIMP 2.8 画像の選択範囲を切り...
-
photoshop で二重線の長方形を...
-
Photoshopで「選択範囲を反転」...
-
線を太くする方法
-
GIMPで、フォントの太さを変更する
-
photoshop CS6 多角形選択ツー...
-
エクセルで並び替えが一部(下...
-
GIMPでトリミングした画像の周...
-
PhotoshopElementで「50%以上...
-
黒線の全部を赤へ変更
-
GIMPで線を太くするには?
-
Photoshopで写真をハート形にマ...
-
photoshopで同時に複数のレイヤ...
-
フォトショップで青の下書き線...
-
PhotoshopElements2.0で正円を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Photoshopでパスのオフセットの...
-
線を太くする方法
-
GIMP 2.8 画像の選択範囲を切り...
-
エクセルで並び替えが一部(下...
-
GIMPで選択した範囲にdeleteキ...
-
拡張子がjpgの 背景が黒の画像...
-
GIMPで線を太くするには?
-
Photoshop Element で円を描くには
-
Photoshopで「選択範囲を反転」...
-
GIMPで背景を透明にした画像の...
-
PhotoshopElementで「50%以上...
-
Photoshopで、写真を履歴書用(...
-
【GIMP】選択範囲を貼り付けた...
-
フォトショップの境界線のぼか...
-
画像の輪郭を強調したい
-
メモ帳で必要部分のみ印刷するには
-
photoshop マッティングの使い...
-
Photoshop:選択範囲内の複数レ...
-
GIMPについて。 輪っかの選択は...
-
blenderで画像のような選択範囲...
おすすめ情報