toggle
札幌市東区にあるマンガ・イラスト制作、WEBデザイン・DTP制作、雑貨制作、MOSなどを学び、行う就労支援事業所です。
2018-01-19

スライスツール

こんにちは、まるたにです。

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」フォルダが作られてしまうのもデメリットなんですね~~~( ^ω^)・・・。。

これで終わります!
みなさん風邪には気をつけてくださいね。それではまた~~~。


関連記事