公式LINEに登録する

年収1000万円を実現したいデザイナーへ

実践的ノウハウ・情報をお届け

Photoshopで画像を合成(フォトコラージュ)してWordPressで空間を表現してみたらいろいろできそうな予感がプルプル。。

Photoshopに使い慣れてくると、自由に画像を切り取ったり、合成したり、色調を補正しながらいろいろな表現ができるようになるので、もしWordPressでブログとかやっていれば、自分の作った「フォトコラージュ作品」を公開したいものです。でも・・

フォトコラージュって、せっかく複数のレイヤーで構成されているので、単なる1枚の画像作品として公開するんじゃなくて「なんとか空間とか表現できないものだろうか?」と考えていたところ・・

D.ex – Multilayer Parallax(以下DEXと記載)】という面白いプラグインを見つけました。PhotoshopとDEXをうまく組み合わせて使えば、これからいろいろできそうな予感がプルプル。。

ただ、英語オンリー(ちなみに有料のプラグイン)で、まだスリームデザインも使い方に慣れてないので、詳しい解説はしませんが「どんなことができそうなのか?」をシェアしたいと思います↓

Photoshopでフォトコラージュ作品を作る

とりあえず、Phtoshopで好きなようにフォトコラージュ作品を作って、レイヤーは統合せずに維持しておきます(なんでUFO?という突っ込みはスルー)。

風景などの色調補正(レタッチ)はこちらの記事を参考に↓

画像の切り取り方法はこちらの記事を参考に↓

背景と複数レイヤーに分けてそれぞれ保存

1枚のフォトコラージュに動きを加えて「空間を演出」したいので、ここでは背景とは別に、前面に近い「女性レイヤー」と「UFOレイヤー」を、背景が透明なPNGで別々に保存します。

つまり「背景」と「女性レイヤー」と「UFOレイヤー」の3つの画像を作っておくということ。

DEXでそれぞれのレイヤーを配置&動きの度合いなどを設定

DEXには、「Scroll Parallax(スクロールすると奥行が出る)」と「Mouse Parallax(カーソルに合わせて動く)」から選択できて、細かい調整もいろいろとできそうですが、ここでは「Mouse Parallax」で簡単に設定します。

保存しておいた背景やPNGレイヤーを配置して、動きの度合いなどを設定すると・・?こんな感じで完成です。パソコンのカーソルでグリグリしてみてね↓

[dex_mlp_parallax alias=”%e3%83%80%e3%82%a4%e3%83%8a%e3%83%9f%e3%83%83%e3%82%af”]

 
スマホではパララックス効果がなく画像の横が見切れてしまうのがざんねんっ、、ですが、アイデア次第で面白い表現ができそうですね~コレっ。

スリームデザイン

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などの動画制作で”マジで使える”フリー音楽素材と効果音サイトのまとめ

おすすめ記事

ページ上部へ戻る