Photoshopから作るレスポンシブカンプ（後編） | ADC Plus
Photoshop CCをダウンロード Edge Reflow CCをダウンロード 完成したEdge Reflowプロジェクトをダウンロードする 前編に引き続き、Photoshop CCの最新版とEdge Reflow CCの最新版を使用して、レスポンシブなカンプを作るワークフローを紹介します。本記事では、Edge Reflowでレイアウトなどを調整し、仕上げていく過程を説明します。なお、作業のすべては紹介しきれないので、実際に必要となる作業の中からポイントを絞って書いています。 1. 要素の位置やサイズの調整 Photoshopから書き出したEdge Reflowプロジェクトは、横方向の位置や幅が％指定、縦方向の位置がpx指定になっています。つまり、Edge Reflowで読み込んだだけの状態でも、画面の幅に応じて要素の幅や位置が変わるリキッドレイアウトになっています。ただし、要素の位置
Photoshopから作るレスポンシブカンプ（前編） | ADC Plus
Photoshop CCをダウンロード Edge Reflow CCをダウンロード サンプルPSDをダウンロード Webデザインの世界において、Photoshopは決まった幅（固定幅）のデザインを作るツールです。レスポンシブデザインのために、いろいろな幅のデバイスを想定したデザインを作るには、PSDを何枚も作る必要がありました。 この記事では、Photoshop CCの最新版とEdge Reflow CCの最新版を使用して、PhotoshopからデザインをEdge Reflowに書き出し、レスポンシブなカンプを作るワークフローを紹介します。 前編では書き出したものをスマートフォンで見るところまで、後編ではレイアウトなどを調整して仕上げていく過程を紹介します。 必要な準備 Creative Cloudで、Photoshop CCとEdge Reflow CCを最新版に更新してください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
