くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[Photoshop]カンプからパーツをつくる

Photoshopでつくったカンプから、パーツをつくります。

スライスツールを使用します

見本のようなグリッドデザインでは1pxたりともズレてはいけません。レイアウトが崩れるもとです。
サイズを厳密にするために、Photoshopでパーツをスライスする作業は慎重に行います

f:id:pleasure10501:20150425211054p:plain

① Photoshopを起動しカンプのデータを開く

② レイヤーをロックしてスライスのガイドラインをひきます。
  定規(ルーラー)を表示し、パーツのアウトラインに沿ってガイドラインを当てていきます。このときはおおまかで大丈夫。次のステップで微調整します

 ○ガイドの色は目立つ色がよい  環境設定 > ガイド で変更可能

f:id:pleasure10501:20150425211315p:plain

③ガイドの微調整をします。 画像を800%くらいまで拡大して、パーツのアウトラインにピッタリ沿うようにします。

f:id:pleasure10501:20150425211350p:plain

④全てのガイドの微調整が終わったら、ガイドをロックします
  表示 > ガイドをロック

⑤スライスツールスライスしていきます。

実行前に注意点

  • 設定 > 表示で確認すること
      ・「スナップ」にチェックがあること
      ・「スナップ先」の項目すべてにチェックがついていること
      ☆ガイドにぴったり沿ってスライスできます
  • 「ガイドに沿ってスライス」というボタンを押さないこと
      余計なところまでスライスしてしまうため

スライスは、パーツの左上から右下の方向にプレスドラッグします
切り取られたパーツには青い線の囲みができます

f:id:pleasure10501:20150425212529p:plain

⑥パーツの名前とサイズの設定

サイズが決まっている場合はここでも調整ができます。またパーツごとに名前も付けられます

グリッドデザインはサイズが命!1pxでもずれないように!

 

⑥Web用に保存

パーツごとに拡張子を変えて保存できます。
GIFで保存したいパーツをShiftを押しながら選択 → 保存形式をGIFにする → PNGで保存したいパーツをShiftを押しながら選択 → 保存形式をPNG-8にする → 保存ボタンを押す

ここで設定すること2つ

  1. 「設定」 :ファイルの互換性 ここではWinとMac
          最適化ファイル フォルダーに保存(自動的にフォルダーを作ってくれてその中にパーツを保存してくれる) 
          背景画像にコピーのチェックは外す
  2. 「スライス」:「全てのユーザー定義スライス」を選択
           「全てのスライス」にすると、背景画像も入ってしまうので選ばない。

「保存」を押して、フォルダーに全てのパーツが入っているか数えます