フリーランスデザイナーが自由なライフスタイルを実現するための新しいブログの活用法や個性的がほとばしるブログにするためのPhotoshopを使ったデザインのチュートリアルなどを公開中~。

画像の上をカーソルでなぞってビフォアーアフターイメージを実装させるワードプレスプラグインBefore-After Viewerが有料だけどすごい!

ワードプレスのビフォアーアフターイメージ

当スリームデザインのブログではフォトショップ技術などを紹介しており、加工前と加工後のイメージをgifアニメーションで画像を入れ替えて比較させたりしてました、しかしgifだと画質が極度に落ちるため何か良い方法は無いかと模索していたところ・・

画像上でカーソルをなぞることでビフォアーアフターのイメージ比較ができるワードプレスプラグインBefore-After Viewer】がすごいので早速12$(約1500円)で購入し実装してみました。プレビューは ↓ 最下部で確認できます。

このプラグインを使えば、フォトショップ技術だけではなく美容系ダイエット記録メイク技術部屋の片づけ昼夜の景色季節の変化などさまざまな用途に応じたビフォアーアフターの画像比較が可能になり重宝しそう。

Before-After Viewerプラグインのアップロード

ダウンロードしたzipを解凍するといくつかのファイルが入っているので、その中の【_wordpress_plugin】のフォルダに格納してある【wpw_ba_vlewer.zip】をさらに解凍し、wpw_ba_vlewer】のフォルダごとpluginsディレクトリにアップロード。

Before-After Viewerアップロード

ワードプレスの管理画面でWPW-Before/After Pluginを有効化すると、投稿・ページ画面のエディタにボタンが追加されます。

ビフォアーアフター画像の設定の仕方

設定はめちゃ簡単。エディターに追加された【Add B/A Viewer】を押すとコードが入力されるので、AFTER_PATH】をビフォアー画像のURLに、BEFORE_PATH】をアフター画像のURLにそれぞれ変更するだけでOKっ!(※2枚の画像は同じサイズで統一)

画像のパスへ変更

さらにAdd B/A Image】ボタンで画像を追加したりオプションの設定などもあるので必要に応じて活用することが可能です。

ビフォアーアフターイメージのプレビュー

でもこれ実装してからスパムコメントが増えた気が・・?スリームデザインは現在フェイスブックコメント欄にカスタムしてるので何の影響もないのですが使用はご自身の判断で。

ちなみに ↑ の加工方法はこちら ⇒ ひと味違うHDR風のディティールを表現する所要時間3分のフォトショップ技術

ちなみに今回使用した素材は123RFで格安にて購入。関連記事:最近、123RFとうゆー画像素材のストックフォトがめちゃめちゃ安くてハンパない件。

スリームデザイン無料の公式メールマガジン スリームデザインのメールマガジン

関連記事

Wordpress日本語テーマのまとめ
個別ブログ相談会
photoshop日本語チュートリアル
ブログラ

スリームデザインの出版書籍情報

photoshopの本

fotoliaデザインコンテスト大賞受賞作品の解説

tenコレクションデザインコンテスト

スリームデザインおすすめの書籍

本 本本 本

スリームデザインとソーシャルで繋がろう!

 
 
 

カテゴリー