【Adobe XD】パラレルスクロールの作り方!GIFで解説します!

今回は自動アニメーションを使って、

このようなオシャレなパラレルスクロールを作っていきたいと思います!

 

まずは、スクロールする際の画像を用意します。

今回はUnsplashのJoshua Earleさんの写真をお借りします。

Photoshopを使って写真を分割していきます。

Photoshopで写真を分割

Photoshopで行うのは、背景と前景の2分割です。

写真やイラストによっては更に分割してスライドさせることが出来るので、

挑戦してみてください。

今回はAdobe XDの説明になるので、Photoshopの説明は簡単にしますね。

背景と前景の分割
ペンツールなどを使って、分割してください。
背景の修正

スクロールの時に股の間から何もない背景が見えてしますので、

背景のスカスカな場所をコンテントアウェアフィルなどで埋めていきます。

見えるのも一瞬なので、他の背景と馴染んでいたら大丈夫です。
終えたらPNGで書き出ししましょう。
アートボードを縦に×2
ここからAdobe XDを使います。
アートボードはWeb 1920を使用します。そして、アートボードを縦に2倍の大きさにします。
アートボードは名をクリックして、右側でH 2360と打てば大きさを変更できます。
1080*2と打てばXDが勝手に計算してくれます。掛ける2です。便利ですね。
写真の配置
背景と前景を良い感じに配置します。
折角なので冒険というテキストを大きく背景と前景の間に配置しました。
ちなみにOptionキーはWindowsだとAltです。
アートボードの下部に背景色を配置

写真の下部(雪の部分)と同じような色の背景を配置します。

そして、接続部分に長方形を配置します。

グラデーションを使ってブレンドしていきます。上部を透明度0%にするとキレイになります。

グラデーションを上手く使えば、背景も他の色などにも出来ますね。

ボタンを追加

スクロールを起こすボタンを追加します。

矢印を写真の下部に長方形を追加し、

透明度0%な長方形を矢印の下に配置してグループ化します。

長方形のおかげでクリックしやすくなります。
後はアートボード内を自由に編集して構いません。
あと少しです。頑張りましょう!
 全体をグループ化

アートボード内全ての要素をグループ化します。

全体をグループ化したので、アートボード外に出ても崩れなくなりました。

アートボードのサイズを1920X1080にしても平気だと思います。

アートボードの複製

アートボード名をOption(Alt)を押しながらドラックすれば、複製できます。

2つ目のアートボード内全体を上に上げる

そしたら、背景の山の写真とテキストを下にズラします。

レイヤー内では、背景の山とテキストは一番下(後ろ)にあります。

レイヤーから写真とテキストを選択するといいですね。
プロトタイプで2つのアートボードを繋げる

アクションを起こす矢印から青タグを引っ張り、2つ目につなげます。

設定は

タップ 自動アニメーション イーズイン/アウト 2秒

にしてみました。

あとは、背景の写真の位置やスクロールされるスピードをいい感じに調整してみてください。

これで完成です!

 

今回は少し他のアニメーションよりも高度でしたね。

ですが、やってみると案外簡単なので挑戦してみてください。

他にもAdobe XDのチュートリアルをご紹介していますので、チェックしてみてください!

ではまた!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

1 COMMENT

現在コメントは受け付けておりません。