webデザイン

画像の上をカーソルでなぞってビフォアーアフターイメージを実装させるワードプレスプラグイン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とうゆー画像素材のストックフォトがめちゃめちゃ安くてハンパない件。

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

ピックアップ記事

  1. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…

関連記事

  1. SEO

    アフィリエイトに最適化されたWordPressテーマ”CUBEY”は広告スペ…

    CUBEYは、アフィリエイトやアドセンスなどの広告収益を望むブローガー…

  2. 3分の話

    PhotoshopでGIFアニメーションをトゥイーンで作って保存する方法。

    Photoshopではタイムラインを使うことで動的なGIFアニメーショ…

  3. アフィリエイト

    ブログで稼ぐアフィリエイト職人が使っている7つの道具

    なんとなくブログを書いているけど稼ぐことができず悩んでいませんか?自分…

  4. webデザイン

    初心者でも60秒でマスターできるPhotoshopで角丸の画像を作る方法

    WEBデザインなどをしていると画像の角を丸くしたいケースはよくあります…

  5. webデザイン

    意外と知らないっ、、Photoshopで文字の輪郭(境界線)だけに影を付ける方法

    Photoshopで文字の輪郭(境界線)に影を付けようと思っても、「外…

  6. キュレーション

    WordPress日本語テーマOpinion (tcd018)を使用した参考になるオーソリティな6サ…

    情報量の多いニュースサイトやポータルサイトなど汎用性が高くオーソリティ…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」のWEB…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. webデザイン

    「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  4. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
PAGE TOP