webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

画像をスライスしてコーディングする その1

f:id:ohta-felica:20160729155208p:plain

  •  一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。
  • フォトショップでスライスをする。
  • 「環境設定」でピクセル単位の作業ができる環境にする。
  • スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定」→「切り出すサイズを入力」して、作業をすると便利。

f:id:ohta-felica:20160729155624p:plain

  • スナップは画面の拡大率によってうまくいかないこともある。必要に応じて拡大してから作業する。
  • 1番大きな、なるべく境界線のはっきりした対象に長方形選択ツールを重ねて、それから選択ツールにスナップさせながらガイドを引いていく。
  • ガイドが引けたら、ガイドをロックしてファイルを保存しておく。 

f:id:ohta-felica:20160729161854p:plain

  •  コーディングするときのことを念頭に、スライスした各々のパーツにわかりやすくナンバリングしながらスライスする。
  • スライス選択ツールのままCtrlキーを押してドラッグすると、スライスデータを作成できます。わざわざスライスツールに持ち替える必要がありません。

f:id:ohta-felica:20160729164300p:plain

  •  スライスできました。スライスをロックしてファイルを保存します。
  • 「ファイル」「web用に保存」

f:id:ohta-felica:20160729164424p:plain

 

f:id:ohta-felica:20160729164638p:plain

  •  切り出す部分をクリックしながら選択する。
  • 選択が終わったら、出力ファイル形式を「PNG24」にする。必ず選択後にする。選択前に選んだ形式はキャンセルされる。
  • 「保存」ボタンを押す。

f:id:ohta-felica:20160729165016p:plain

  • 保存するフォルダを指定する。
  • 「保存時に背景画像をコピー」をオフにする。

f:id:ohta-felica:20160729165158p:plain

  •  そして、設定項目の中で一番大切なのは「すべてのユーザー定義スライス」を選択すること。

f:id:ohta-felica:20160729165342p:plain

  •  これで、スライスは終わり。