『Twenty20 Image Before-After』が画像のビフォーアフター比較に簡単便利

先日、写真加工の仕方についての記事で、初めて「比較用のスライダー付き画像」を使った。

夜や暗いお店などで写真を撮る機会って結構あると思う。 誕生日会とか飲み会とか。 でも、「楽しいよ!インスタ映えだよ!」ってシーンは大...

写真ブロガーさんやカメラが趣味の人にはお馴染みだと思うが、普段から写真について深い興味がない人は是非一度使ってみて。

▼こういうやつ。スライダーを左右にドラッグしてビフォーアフターが比較できる。

これはWordpressのプラグイン『Twenty20 Image Before-After』

こういうプラグインはいくつかあるみたいだけど、『Twenty20 Image Before-After』は導入〜実際に使うまでのステップが単純明快だったので、これから使ってみようかなって人にはおすすめ。

このスライダーを使った活用法も紹介するよ。

インストールの仕方

  1. プラグイン > 新規追加
  2. プラグインを検索 > 『Twenty20 Image Before-After』で検索
  3. [今すぐインストール]
  4. [有効]

▼ここからzipをダウンロードして、新規追加から[プラグインをアップロード]でも可。

Need to highlight the differences between two images? Makes it easy with Twenty20 plugin.

使い方

通常の画像を挿入する時と方法は同じ。

▼このボタンが追加されている

画像はビフォーとアフターの2枚を選択。
1つ目に選択したものがビフォー、2つ目がアフターになる。

▼いつも通り画像を挿入する感じで2枚選択するだけ。

2枚選択すると、各種設定画面に切り替わるので任意で設定。

Width:画像の幅(サイズ変更しない場合は空欄でOK)
Offset:スライダーの位置(0.1~1.0→左もしくは上からどのくらいの位置にするか)
Direction:スライダーの動く方向(Horizontal→左右、Vertical→上下)
Alignment:画像の位置(基本NoneのままでOK)

▼スライダーを0.5(真ん中)にしておくと、動画の再生ボタンに見えなくもない。少しズラしておいた方がいいかも。

▼設定が完了すると本文中にショートコードが挿入される。

これで挿入完了。

簡単〜!

活用法

写真の加工を見せる

▼Lightroomでの現像ビフォーアフター

言わずもがな、写真編集やフィルターのビフォーアフターを見せるのに効果的。

これならわずかな差でも違いがわかりやすい。
何度でも左右に動かしたらいいさ。

ちなみにこれは上下に動くやつ。
スマホだと画面が動いちゃって全く使えないので注意。

▼ちょっとアンダー目にざらつかせた加工をしてみた

写真でビフォーアフター

まさに「劇的ビフォーアフター」みたいな、変化を見せるのにも良い。

なんということでしょう…バーをスライドするだけであんなに汚い部屋がこんなに綺麗に!

とかやりたかったけど、私の部屋は汚いままなのでやりませーん。

▼色落ちしたスウェードジャケットがこんなに綺麗に!!(買い直しただけ)

スウェードのジャケットを着てフランクフルトは食べた時の失敗談です。スウェードについた油染みは取れないよ。

他にも、すっぴん→化粧後とか、太った→痩せたとか、二段腹→シックスパックとかもいいね。

もちろん太ったままなのでやりませーん。

2コマ漫画

▼いらすとや「水掛け論」を左右反転させただけ

パラパラ漫画のような見せ方ができるので、絵が描けて面白いこと言える人はぜひ使ってみてほしい。

私はスベる気しかしない。

簡易スライド

2枚目を隠しておけば、簡易スライド的な使い方も。

告知や重大発表とか、ちょっと凝った魅せ方ができるね。

写真ブロガー以外にも楽しめる要素は無限大

イラストやを組み合わせれば誰でも簡単に2コマ漫画が作れると思えば、写真やイラスト系のブロガーさん以外でも楽しめそう。

なんか他に面白い使い方を思い付いたら教えてください。

私はビフォーアフターできるくらい痩せたいね!!

ジャックナイト参戦!

▼ジャックナイトに参戦します!まだ参加可能ですよ〜!

スポンサーリンク
レスタングル(大)


レスタングル(大)


シェアする

  • このエントリーをはてなブックマークに追加

フォローする