PhotoShopでの画像スライス



今まで画像スライス(1つの画像ファイルから複数の画像を切り抜く事)と言えばFireWorksみたいに思っていた所があったんですが、PhotoShopCS6の本を読んでいてかなり機能が、web向きになっていたりillustratorにも近くなっている部分もあったり(知らなかっただけかもですが。。)したので、PhotoShopも、もう少しスキルアップしよう!と思った次第です。

Photoshopでの画像スライス方法


今回はこんなヘッダーを仮定して作ってみました。
ここからスライスするところを決めていきます。

  1. スライスツールは切り抜きツールの中にあります。
  2. スライスツールで切り抜きたいポイントを図の様に作っていきます。(マークのついているところが、今回切り抜いた所です。
  3. 次にコーディングをする際、透過pngを使いたいので目のマークで背景の木目を非表示にします。
  4. ファイルweb用に保存を選択。
  5.  

  6. 最適化2アップを選択
  7. スライスボタンが押されている事を確認する。
  8. 切り抜きたいスライス画像をクリック(今回は透過画像にするのでpng-8を選択)
  9. 透明部分にレ点が入っているか確認
  10. 保存をクリック
  11. 「スライス:」の部分を選択したスライスに指定
  12. 好きな名前を付けて。。
  13. 「保存」でfinishです

今回は個別で指定する方法を試みてみましたが、切り抜きが増えると個別じゃ面倒そうなので、一括でスライスする方法も今度やってみます!

多少駆け足でしたが、本日は終了です!では、またです!

“PhotoShopでの画像スライス” への 1 件のフィードバック

  1. スライスの方法はわかるんですが、その後CSSで組む方法を誰も教えてくれないんです。
    なんで???

コメントを残す

メールアドレスが公開されることはありません。