Adobe StockとXDを使用すれば、webサイトのプロトタイプにインタラクティブな写真をすばやく追加できます。

高解像度で撮影された街のパノラマ写真を見つける

Adobe Stockで、拡大表示に対応できる解像度の、サイズの大きい街のパノラマ写真を検索します。画像をXDから利用できるように、Creative Cloudライブラリに保存します。

interactive-images-step1_900x506

高解像度写真をXDのアートボードに配置する

XDでホーム画面のアートボードにパノラマ写真を読み込みます。レイアウト内で写真が最大限広角で表示されるようにサイズと位置を調整します。

interactive-images-step2_900x506

XDでレイアウトを複製しサイズを調整する

テキストやラベルなどのレイヤーを追加します。さらにナビゲーションボタンの状態も変更します。次に、特定の地域に該当する部分が拡大表示されるように、街の写真のサイズと配置を変更します。

interactive-images-step3_900x506

XDでアニメーショントランジションを作成する

XDでプロトタイプワークスペースに切り替え、ホーム画面のアートボードの「Battery Park」ボタンを選択します。選択したボタンから2番目のアートボードへのリンクを追加し、トランジションのアクションを「自動アニメーション」に設定します。リンクのプロパティパネルで継続時間を2.5秒に設定したら、パネル以外の場所をクリックして変更を適用します。

XDウィンドウの右上隅にあるリンクのプレビューボタンをクリックして、インタラクティブ機能を試してみます。

interactive-images-step4_900x506

完成

プロトタイプをグループメンバーと様々なプラットフォームでプレビューして共有できるようになりました。

interactive-images-step5_900x506

Adobe Stockの厳選されたコレクションから、次回のプロジェクトに活用できる素材を見つけてください。

05/16/2019
このページは役に立ちましたか。