それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

プログラマが送る、illustrator のデータからWEB素材を作る最小ステップ

普段はデザイン済み、HTMLマークアップ済みのデータが多いのです。でもたまにphotoshop(PSD)やイラストレーター(ai)データを受け取ります。WEB素材を作るのはとても簡単なんですが。知らないと手数に迷いが多くなり、無駄が多い。

スライスを覚える。

1,2,3にもスライス、45がなくて6もスライス。WEB素材を作るには、ひたすらスライス。

スライスするには、photoshopとFireworksがあって、FWのほうが便利だと言われている。

PhotoShopでスライス

fireworksで上手くいかない時もあるので、先にphotoshopのスライスを覚えるのがベター

  1. ai を開く
  2. psd形式の保存
  3. psdで開く
  4. スライスを作る
  5. WEB用に保存
  6. 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-印刷用は150なので72にしておく)

解像度はai → psd時でもできる。

(9−72に設定)
(9−72に設定-2)

解像度を72にしておくと、保存時にサイズが予定サイズにピッタリ収まります。

ファイルをWEB用に保存

最後のWEB用に保存します。いまはPNGが一般的だそうです。

(10-スライスをWEB用に保存)
(11-pngを選ぶ)
(12-選択したスライスを保存する(png 形式で))

出来上がりは imagesフォルダに

ファイルを保存したら、確認します。

(13-imagesというフォルダに出てくる.PNG)

指定したファルダ直下には作られず、imagesフォルダに入る。

Fireworksの場合

Fireworksの場合も手順がほぼ同じ。


違いは2点

  • 解像度はファイル開く時の指定。
  • ファイル形式(PNG)は保存前に指定。

の2点になります。

PSD作るところまでは同じ。


PSDをPhotoshopで開かずにFireWorksで開きます。

解像度を指定して開きます。

Fireworksの場合、開くときに解像度を指定します。

(f1-fireworksで開く)

スライスツールでスライス!

基本的作業は同じです。
(f2-スライスツール)

スライスを選んだり領域サイズを変えるときは、選択ツールを使います。

(f3-スライスを選ぶ)

保存したいスライスを選んだら、保存ファイル形式を選びます。

(f4-保存形式を選ぶ)

もちろんPNGです。

スライスツールで保存します。

(f5-スライスがPNGになる。)
(f6-スライスを書き出す)

透明を保存するときも同じ。

透明を保存するときは、背景のレイヤを消し、透明だけで保存します。

(f7-不要レイヤを消して透明背景で)
(f8-透明背景のPNG)



簡単ですね。


とりあえず、ai もらってもこれくらい出来れば、コーディング作業パパっとできるので、マークアップ待って無くても作業できるよ!!

いままでプレビューや、ImageMagickで切り出してたけど、やっぱりPhotoshop便利です。

広告を非表示にする