Image by Earl

明けましておめでとうございます！
初詣で大吉を引いて幸先良さげな新人森田です。
本年も株式会社ハレノヒをよろしくお願いいたします。

それでは今日も元気に修行したいと思います。
2014年一発目はどのようなお題でしょうか？

[山形師匠のお言葉]
Photoshopでデザインカンプ（ページ全体のデザイン）や、画像パーツ等を作成したらブラウザで表示できるようにするためにスライスツールを使います。
ツールの使い方と書き出し画像形式の種類と特徴を学んでください。

[森田]
スライs…あ、はい！早速実践的な内容ですね！PhotoshopCS2を使い続けていた森田にとって最新版を勉強する良い機会でもあります。さくさくっとスライスしちゃいます！

Photoshopのスライスツールとは

と言いつつ、正直に申し上げますと実は私、過去１回くらいしかスライスツールに触ったことがありません。なのでまずアイコンを探すところから始めたいと思います。

発見。メニューバーのここに隠れてました。
いかにもスライスしてくれそうな鋭い切先ですね。

そして今回スライスする元の画像がこちら。

自社サイトに載せるブログ記事のリストです。
自分なりにハレノヒのイメージを絞り出して作ってみました。（入社して初の制作に緊張しまくりこれだけで既にヘトヘトという失態）

必要とされる画像は、右側の雲の画像とアイキャッチ画像を入れなかった場合のデフォルトアイコンです。（下図参照）

まず雲の画像に狙いを定めます。

画像のぎりぎりのところにガイドラインを引き、スナップを頼りに範囲選択。アイコンも同様に選択します。

このようにスライス範囲が確定されました。
範囲表示が邪魔という時は表示タブからオンオフ出来ます。

ここまでくればスライスマスターまであと一息！
ファイルタブから[web用に保存]を選択し、最適な画像形式で保存します。

画面左のスライスツールマークで切り出した画像を選択し、右側のファイル形式を選びます。今回は色数が少ないのでGIF形式で保存したいと思います。

はい！出来ました！
 　

なーんだ思ってたより簡単じゃーん！

[山形師匠]
森田さん、これ片方だけ画像形式jpgになってるよ。

[森田]
はっはいぃ！すぐ直します！！

どうやら複数保存する場合はそれぞれ選択して保存形式を選ばないといけないようです（私は１つGIFにして満足してました）。
作業終了まで気を抜いてはいけません。
最後に保存形式についてまとめてみます。

Web用に保存
[jpg]

最も一般的な、写真などによく使用される画像形式です。
圧縮の際に多少の劣化を伴いますが、比較的きれいに保存できます。赤が弱点です。

[gif]

カラーパレットの256色で頑張る保存形式です。小さいアイコンや簡単な動画におすすめ。頑張りすぎるとドット絵みたいになります。

[png]

windowsでスクリーンショットを撮ってペーストしてみるとすごい奇麗だったりする時の保存形式です。個人的すぎました。GIF形式より透明色の扱いが得意で、劣化せずきれいに保存が出来ます。でもファイルサイズにご用心。

まとめ

一枚の画像をスライスツールで切り出して保存することで作業効率が大幅アップ！webデザイナーとしては初歩中の初歩的ツールでした。こういうのを覚えると沢山使ってみたくなりますね。森田はこれから一体何枚の画像をスライスしていくのか、途方もないことを考えつつ今回の修行はここまでです。押忍！