2月29日 授業内容② photoshopで画像のスライス

今日の授業ではロフトのサイト画面をスライスする為に、ガイド線を引くところまでしました。
元画像
 ↓
f:id:paris1204:20160229233252p:plain

photoshop
画像のスライス

①サイトをコピーし、photoshopの新規作成でクリップボード→ペーストする。
②環境設定で単位・定規をピクセルに、ガイドグリッド、スタイルのグリット線、分割数を10ずつにする。
f:id:paris1204:20160229232558j:plain
f:id:paris1204:20160229232604j:plain
③レイヤーの鍵マークをクリックして作業中に画像が動かないようにする。
④表示のルーラーのガイドをクリックする。
⑤ルーラー(定規)を表示する

⑥画像の周りを拡大表示してルーラーで囲んでいく。
⑦境界線が今回のようなグリッド構造の場合、ルーラーで線を引いた後に画像の境目が分からないところは他の場所に同じ大きさの四角形がある可能性がある。
そこで長方形ツールを使って幅、高さが同じ四角形を作り、shiftを押しながら十字キーで場所を調整する。
f:id:paris1204:20160229233009p:plain
f:id:paris1204:20160229233018p:plain


仕上がり
  ↓
f:id:paris1204:20160229233044p:plain