今回は特筆することがないですが、手順をテキストに起こしておきます。
- パスワードを入力し、XDでカンプを開く
- 2ページ目(PC)、3ページ目(SP)のアセットからzipファイルをDL
- 上記を解凍し、PCフォルダの中身をpracticeに作ったimgに移し替え
- SPフォルダはspと小文字にリネームし、imgフォルダに入れる
- spフォルダ内には、bg@2x.png、top@2x.pngだけ残す⇨@2xの部分を消す
- imgフォルダ直下の画像ファイルは、bgとfuture-n以外@2xの方を残す
- imgフォルダ内の画像ファイルをリネーム(全て選択⇨右クリック⇨名称変更⇨置換する文字列に“@2x”を入力⇨一括削除)
実際に表示されるサイズより小さい画像で実装してしまうと、画質が荒くなってしまいます。
中級総復習編 Web制作コース中級編 | デイトラ ー 1日1題のステップで身につけるWEBスキル
ブラウザ幅100%のような画像は仕方ないですが、なるべく想定される最大の表示サイズより大きい画像サイズのものを利用しましょう。
実務でどうしても画像サイズが足りない場合はデザイナーに相談してみましょうね！
今回は動画で答えを見てしまいましたが、実際の案件ではカンプで画像のサイズを見ながら等倍か二倍かを選んでいきます。
以上で画像の準備は終わりです。次はコーディングといきたいですが、ファイルの準備からですね。
コメント