タグ

Photoshopとレスポンシブに関するiwakuのブックマーク (2)

  • スマホサイトのデザインで意識すべきところ | 成果に導くホームページ制作ならウィズスタイル

    ホームページ制作に携わるそこのあなた。イラストレーターなどでスマホサイトのデザインカンプを作るとき、どんなことを意識されて作られていますか? 突然すみません。あらためまして、こんにちは。ジャスミン茶大好き、高橋 倫佑(たかはしのりすけ)と申します。 スマホサイトのデザインカンプを作るときは、ある程度【約束事】を決めないと、実際にサイト構築のためのコーディング作業に入った時に、とんでもなく時間がかかったり、カンプでは入りきっていたテキストも、Web上ではレイアウト崩れの原因になったりすることがあります。 今回はスマホデザインの各部サイジングについて取り上げていきたいと思います。 ①全体幅を決める。画像は偶数値。 With Styleのスマホサイトのデザインの幅は例外を除き640pxで作っています。 これはiPhoneのレティナディスプレイの横幅の解像度に合わしているもので、実際に表示されるv

    スマホサイトのデザインで意識すべきところ | 成果に導くホームページ制作ならウィズスタイル
  • 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を最新版に更新してください。

    Photoshopから作るレスポンシブカンプ(前編) | ADC Plus
  • 1