普段はデザイン済み、HTMLマークアップ済みのデータが多いのです。でもたまにphotoshop（PSD）やイラストレーター(ai)データを受け取ります。WEB素材を作るのはとても簡単なんですが。知らないと手数に迷いが多くなり、無駄が多い。
スライスを覚える。
１，２，３にもスライス、４５がなくて６もスライス。WEB素材を作るには、ひたすらスライス。
スライスするには、photoshopとFireworksがあって、FWのほうが便利だと言われている。
PhotoShopでスライス
fireworksで上手くいかない時もあるので、先にphotoshopのスライスを覚えるのがベター
- ai を開く
- psd形式の保存
- psdで開く
- スライスを作る
- WEB用に保存
- png を保存
のごくシンプルな手順。たったこれだけ。でも、photoshop内でボタンを探したり、など機能が多すぎて意外と出来ないものです。
ai を開く
aiを貰ったらとりあえず psdに変換。
イラストレーターでファイルを開いてPSDに変換
(1-ai を開く)
(2-書き出す)
(3-psd形式)
イラストレーターはここまで。
aiのままでも作業できるけど、psdのほうが手っ取り早い
PSD 形式で保存
保存されたPSDを開く
(4-psdを開く)
スライスツールを選ぶ
スライスツールを使って欲しい場所を切り出します。
(5-スライスツールを選ぶ)
(スライスツールはここ)
(6-スライスする場所を選ぶ)
このとき、ガイドや画像境界でマウスがスナップして止まる。これがすごく楽です。ペイントやプレビューで操作するのと大きな違いはここですね。ai からレイヤが維持されているので、切り出しがとても楽です。
スライスのサイズを変更するときは、スライス選択ツールを使います。
デザイナーはこうやって楽をしてたのかっ。
解像度を変更する
印刷用データの場合150になっていたりするので、72に落としておく
(7-画像解像度を72-スクリーンに)
(8-印刷用は１５０なので７２にしておく)
解像度はai → psd時でもできる。
(9−７２に設定)
(9−７２に設定-2)
解像度を７２にしておくと、保存時にサイズが予定サイズにピッタリ収まります。
ファイルをWEB用に保存
最後のWEB用に保存します。いまはPNGが一般的だそうです。
(10-スライスをWEB用に保存)
(11-pngを選ぶ)
(12-選択したスライスを保存する(png 形式で))
出来上がりは imagesフォルダに
ファイルを保存したら、確認します。
(13-imagesというフォルダに出てくる.PNG)
指定したファルダ直下には作られず、imagesフォルダに入る。
Fireworksの場合
Fireworksの場合も手順がほぼ同じ。
違いは２点
- 解像度はファイル開く時の指定。
- ファイル形式（PNG）は保存前に指定。
の２点になります。
PSD作るところまでは同じ。
PSDをPhotoshopで開かずにFireWorksで開きます。
解像度を指定して開きます。
Fireworksの場合、開くときに解像度を指定します。
(f1-fireworksで開く)
スライスツールでスライス！
基本的作業は同じです。
(f2-スライスツール)
スライスを選んだり領域サイズを変えるときは、選択ツールを使います。
(f3-スライスを選ぶ)
保存したいスライスを選んだら、保存ファイル形式を選びます。
(f4-保存形式を選ぶ)
もちろんPNGです。
スライスツールで保存します。
(f5-スライスがPNGになる。)
(f6-スライスを書き出す)
透明を保存するときも同じ。
透明を保存するときは、背景のレイヤを消し、透明だけで保存します。
(f7-不要レイヤを消して透明背景で)
(f8-透明背景のPNG)
簡単ですね。
とりあえず、ai もらってもこれくらい出来れば、コーディング作業パパっとできるので、マークアップ待って無くても作業できるよ！！
いままでプレビューや、ImageMagickで切り出してたけど、やっぱりPhotoshop便利です。
