Adobe StockとXDを使用すれば、webサイトのプロトタイプにインタラクティブな写真をすばやく追加できます。
高解像度で撮影された街のパノラマ写真を見つける
Adobe Stockで、拡大表示に対応できる解像度の、サイズの大きい街のパノラマ写真を検索します。画像をXDから利用できるように、Creative Cloudライブラリに保存します。
高解像度写真をXDのアートボードに配置する
XDでホーム画面のアートボードにパノラマ写真を読み込みます。レイアウト内で写真が最大限広角で表示されるようにサイズと位置を調整します。
XDでレイアウトを複製しサイズを調整する
テキストやラベルなどのレイヤーを追加します。さらにナビゲーションボタンの状態も変更します。次に、特定の地域に該当する部分が拡大表示されるように、街の写真のサイズと配置を変更します。
XDでアニメーショントランジションを作成する
XDでプロトタイプワークスペースに切り替え、ホーム画面のアートボードの「Battery Park」ボタンを選択します。選択したボタンから2番目のアートボードへのリンクを追加し、トランジションのアクションを「自動アニメーション」に設定します。リンクのプロパティパネルで継続時間を2.5秒に設定したら、パネル以外の場所をクリックして変更を適用します。
XDウィンドウの右上隅にあるリンクのプレビューボタンをクリックして、インタラクティブ機能を試してみます。
完成
プロトタイプをグループメンバーと様々なプラットフォームでプレビューして共有できるようになりました。
Adobe Stockの厳選されたコレクションから、次回のプロジェクトに活用できる素材を見つけてください。
