Web白描

Webデザインの勉強 - 演習

提出サイトのサムネイル作成

提出サイトのサムネイル作成

  • 幅「800px」高さ「800px」の画像を作成
ウェブページ全体をスクリーンショット - FireShot

使用可能な状態にする

  • ピンをブラウザのオプションバーに表示するために「ピンを有効化」する

スクリーンショットを作る
  1. ページをプレビューする
  2. FireShot「ページ全体をキャプチャ」をクリック

  • 「画像として保存」を選択して、管理可能な場所に保存する
Photoshopでトリミング
  • サムネイルとして使いたい部分を「切り抜きツール」で切り抜いておく(このときサイズ指定は不要)

  • 切り抜いたあとでの、修正は加えないでそのまま使用します

Photoshopで画像サイズを変更する
  • 「イメージ」メニュー → 「画像解像度」

  • 幅を「800px」にする(切り抜きツールで正方形に切り抜いた場合は、高さも自動的に800pxになります)

スクリーンショットの幅を800pxに設定する場合
  • 画像幅を「画像解像度」で「800px」にする

  • 「カンバスサイズ」で必要なサイズに切り抜く

拡張子「.webp」に変換

squoosh.app