スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > HTML5で手持ちの画像をビンテージにする方法

HTML5で手持ちの画像をビンテージにする方法

投稿日:2013年5月14日       

HTML5で手持ちの画像をビンテージにする方法をご紹介いたします。

Step1:はじめに

InstagramやHipstamaticなどのスマートフォンの写真アプリのおかげ(せい)で、誰が始めたのかはともかくとして、撮った写真にビンテージなどの効果をつけるようになりましたが、しばらくはこのトレンドが終わることはないでしょう。

ビンテージの写真が好きでも嫌いでも、クライアントやプロジェクトの要請などで、いずれ使うことになるでしょう。

Photoshopや他のデスクトップ(あるいは携帯電話)のアプリを使ってウェブサイトの製作で写真の処理に大量に時間を使うよりも、サイト自身に自動的に画像を処理させるプラグインの方が使いやすいのではないでしょうか?

結局のところは、そのほうが合理的です。
そうでなければ、新しい画像がアップロードされるたびに、画像が処理されているか確認をする必要があります(クライアントが自分でサイトをアップデートするのは理想的とはいえません)。
一貫した画像処理のプロセスがないと、サイトの見た目は一気に素人っぽくひどいものになります。



jQueryプラグインのvintageJS

今回紹介する「vintageJS」は、HTML5のキャンバスを使ってウェブサイトで画像に効果をつけるjQueryプラグインです。





基本プリセットのオプション

高度な設定が可能で、希望通りの見た目の画像を作ります。
基本プリセットのオプションは次のとおりです

・default(デフォルト:プリセットが設定されない場合)
・sepia(セピア)
・green(緑)
・grayscale(グレースケール)
・custom(カスタム:カーブだけが調整されますが、その他すべては設定がオフですので、自分で好みの見た目を作ることができます。)

カスタムフィルターを作りたいのであれば、次のオプションを使うことができます。

・vignette(ビネット:オンオフの切り替えと、黒と白の変数を設定可能。)
・noise(ノイズ)
・screen(スクリーン:Photoshopのレイヤースクリーンのように機能)
・desaturate(彩度を下げる)
・allowMultiEffect(効果を数倍にする)
・viewFinder(ファインダー越しの効果)



最後に

上記の設定を使って、本物同様のビンテージ写真をウェブサイトで簡単に作ることができます。
画像の前処理に時間を費やすことはありません(バッチ処理が終わるのを待つ必要はありません)。
クライアントが画像をアップロードしてサイトのルック・アンド・フィールを損ねることもありません。

vintageJS.comを既にご存知かもしれませんが、このサイトで写真をアップロードしてビンテージの効果をつけることができます。
jQueryプラグインの能力を示す一例です(カスタマイズについてはなおのことですが)。



引用:Web Design Library  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング