スライスツール
こんにちは、まるたにです。
Photoshop、illustratorにあるツールについて、講座しますね。
全てwebにちなんだお話です!デザインカンプが出来上がった後に個別に画像を切り出すツールを「スライスツール」といいます!
スライス選択ツール
選択したスライスはどちらのツールでもウィズを拡大、縮小出来る。
スライスツールでスライスした部分はユーザー定義スライスになる。
web用に保存
スライスしたものを画質などを確認しながらjpeg、gif、pngのどれかの形式を選択して保存。
jpeg形式
色数は1670万色。表現できる。
容量が軽い。⇒写真向き
gif形式
色数は256色。
透明をサポート。gifアニメ等。⇒ロゴ向き(以前)
png形式
1670万色表現
透明サポート(何色でも)
容量が重いかも。
web用に保存の流れ
① 保存する画像を選択(複数も可)。
② 保存する形式を選択。
③ 形式に応じたやり方でデータ量をおさえる。
④ ①~③を全ての画像に行ったら保存。
形式ごとの画質調整
jpeg 画質を0~100で選択
数値が大きい程画質が良く容量も大きい。
gif カラーで色数を絞って容量を調整。
透明のありなしを選択。
png 画質の調整は出来ない。
web用に保存のフォルダ名の変更
web用に保存ダイアログの
右上「▼三」のアイコンクリック
↓
出力設定の編集
↓
ファイルの保存
※保存場所に注意
自動的に「images」等のフォルダを作成するので保存場所は「images」フォルダがある場所を選択する。
スライスで画像化したい要素
・写真
・全てのPCに入ってるわけではないフォントを使った要素
・グラデーション
・角丸の長方形等
・パターンの装飾の画像
※CSSで表現は出来るがちょっと大変
ロゴ/お問い合わせボタン/ナビボタン/メイン画像/広告バナー等使用されます。
スライスからHTML記述まで
① 完成見本jpgをPhotoshop(illustratorでも可能)で開く。
赤枠で囲ってる部分以外を全てスライスして画像として保存。
※形式はjpg、画質は任意。
ファイル名は任せますがHTMLを書く時に苦労しないような名前がおすすめ。ひらがなカタカナ、全角英数字は出来ません。
② 切り出した画像を「img」フォルダにまとめて完成見本と同じになるようにコーティングしてください。
・必須タグを忘れずに。
・ほとんどが画像です。
・<em><strong>等は使ってないです。
・セクショニングは行ってください。
自動選択ツールみたくではなく、四角にしか切り取られないのです。それと保存するとき嫌でも勝手に「images」フォルダが作られてしまうのもデメリットなんですね~~~( ^ω^)・・・。。
これで終わります!
みなさん風邪には気をつけてくださいね。それではまた~~~。