公式LINEに登録する

AI×スワイプLPの最新情報をお届け。

特典も受け取れます。

画像の上をカーソルでなぞってビフォアーアフターイメージを実装させるワードプレスプラグイン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分のフォトショップ技術

スリームデザイン

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとマーケティングと玄米ご飯。 フリーランス時代に独学で身に付けた技術を活かし、世界規模のデザインコンテストで日本人初の大賞を受賞&Photoshopの専門書を出版。 ブログ集客のエキスパートとして企業や個人のコンサルティングをしながら、コンテンツマーケティングやコピーライティングを手掛けるブログマーケターである。

最近の記事
おすすめ記事
  1. イケてる見た目に着せ替えチェンジ!ブログの運営目的に適したWordPressテーマに変更する方法

  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそうな書籍を4選しました。

  3. Photoshopで立体感や空間を表現してリアリティのある世界観を創る方法

  4. 「ネーミング」を考える前に理解しておきたいその重要性について

  5. Phostohopの切り取り方法をマスターして画像コラージュ作品を作ってみよう!

  6. 中性脂肪が6ヶ月間で208→73にガチ下げ!42歳の私が試した三方向アプローチの結果がヤバイ、、

  7. 「いつも締め切りに追われてしまう」そんな人がミッションを成し遂げるために克服しておきたい3つの心理メカニズムについて

  1. 中性脂肪が6ヶ月間で208→73にガチ下げ!42歳の私が試した三方向アプローチの結果がヤバイ、、

  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画のまとめ

  3. わずか10秒っ!Photoshopで部分的に色を変えたいときの【色の置き換え】の使い方&動画解説ダイジェスト

  4. 「ちょっと待って!」Photoshopの初心者にありがちな間違った5つの使い方とスキルが飛躍する解決策

  5. Photoshopユーザー必見!無料になったNik Collectionのヤバすぎる使い方

  6. 【保存版】Photoshopの技術を一気に飛躍させるための日本語で学べる実践テクニック7連発

  7. これだけはブクマしておきたい!Youtubeなどの動画制作で”マジで使える”フリー音楽素材と効果音サイトのまとめ

おすすめ記事

ページ上部へ戻る