WEBデザインの基本②
色の復習
色相・・・色み
彩度・・・鮮やかさ 色相の分かりやすさ
明度・・・明暗 白混ぜたら明るく、黒を混ぜたら暗く
fecebookカバーの作成
851px 315pxに設定
端末によって表示位置がかわってくるため、安全エリアに必要な情報を作る
Facebookの場合幅561px 縦295pxの安全エリアと
アイコン表示位置の幅186px縦172px（目安）のガイドを引く
〇フォーマットの種類
ラスターデータ
- JPEG .jpg
写真に適した画像形式
フルカラー1678万色
基本は非可逆圧縮なので完全に元に戻すことはできない
背景透過不可 枠が残ってしまう - GIF .gif
256色
ドット絵 アイコンなどで使われる
可逆圧縮
背景透過も可能
アニメーション可能 - PNG .png
フルカラー 1678万色
可逆圧縮
背景透過可能
JPEGより少し容量が大きい
他のデザインと組み合わせやすい - WebP .webp ウェッピー
フルカラー 1678万色
非可逆圧縮
背景透過可能
かなり軽量 PNGの10分の1
アニメーションも可能
SEOに強い
ベクターデータ
- Ai
編集可能なデータ
バージョンが異なると表示が変わったりする
他のソフトでは開けない（illustrator専用） - SVG
ベクター状態で保存できる画像形式
ウェブブラウザで開かれる
デベロッパーツールで記述を書き換えられる
要素を動かしたり、効果をかけたりすることが可能（SVGアニメーションで検索
illustratorのショートカット
ctrl+space+左右ドラッグ・・・拡大拡縮
ctrl+0・・・アートボード全体表示
ctrl+1・・・100％表示
space+ドラッグ…手の平ツール
ctrl+z・・・1手戻る
ctrl+shift+z・・・1手やり直す 戻しすぎたのを巻き戻す時など 1手先へ
illustrator扱えなさすぎてわらえる
がんばります・・・