デイトラweb制作中級編 DAY11

作成したWebカンプ(スマホ版)

※基本的にはWeb版と作り方は同じ

①グループ化

②書き出し

デザイナーの方から元の画像を頂ける場合

→ そのまま使う


そうでない場合

→ デザインカンプから書き出す

JPGPNGの使い分け

JPG ・・・ 写真、四角形

PNG ・・・ イラスト(色数少)、丸形など、透明な部分有り

丸形の写真の場合(JPG?PNG?)

→「JPG」

元の画像(四角形)を書き出して、CSSで丸くする!

③解像度の高い画像を表示

1. 書き出すときにサイズを「Web」にする

2. 「2x」と書かれた画像の方を使用する

④Webカンプの共有(ブラウザ上で)

手順

①「共有」ボタンを押す

②「開発」に変更

③チェックボックスにレ点をつける

④ボタンを押して「作成」または「更新」

共有のメリット

・相手方がxdと契約してなくても共有できる

・パーツが動かないため、要素の確認でラクできる

まとめ

今回はスマホ版のWebカンプを作成しました。

PC版のWebカンプとほとんど作り方は変わらず、そこまで躓くところはなかったです。

しかしDay11ではWebカンプの作成方法だけでなく、

書き出しや共有方法について学習したので、それをつかって後で遊んでみたいと思います!

コメントを残す

メールアドレスが公開されることはありません。