-
ID:a7swjM さんの質問


もしかしてHP作成の際のアイコンやバナーなどの画像データって、カンプデータにスライスを切って、用意しているのでしょうか…?
私は今までillustratorで完成案を作成し、クライアントにOKをもらったらそれぞれパーツごとに大まかにaiファイルを分けて、さらにスライスで細かく刻んで画像データに書き出していました。先日他社のWEBデザイナーさんのサイトデータを見せてもらったら、editデータの中身がphotoshopのカンプデータだけだったんです。あとはphotoshopに入っている写真などの元データのみ。
それがすごく衝撃で(誰が見ても、例えばこのデータAはページAの全体のデータだと分かるから)、改めて私のeditデータを見ると細々したファイルがたくさんあって見づらいなと感じました。
透過画像やマウスオーバー前後で切り替わる画像などを作成する際は、どのように作成しているのでしょうか?また、しばらくしてコンテンツの内容を大幅に更新する際などはどうやっているのですか?

今までillustratorは、photoshopと違ってテキスト編集や四角などのパスやオブジェクトの選択・編集が楽なので使っていたのですが、これほどphotoshopでHP作成をしている方が多いのは、やはりphotoshopがillustratorよりデータ作成に優れている点が多いからなのでしょうか?(しょっちゅう議論されている内容ですが、あまり腑に落ちず…。)画像編集以外の点でのメリットをご教示ください!
できればphotoshopデータが他社から届いたときでも柔軟に対応できるようになりたいです。
.
追記:色々な便利ツールを教えてくださり、ありがとうございます。

みんなの回答 5 件

ID:vJ1mFg さんの回答

報告 · 削除
暇なのでマジレス
1、
最近のデザインって画像自体少ないからカンプから切り出して作るのはLPくらい。
例えば20pxの丸いアイコンが10種類あるとしたら20px四方のサイズで icon_.psd ってのを作ってpsdカンプからレイヤーをそこに移動させてく感じ。で icon_a.png icon_b.png って感じで書き出してる。
>マウスオーバー前後で切り替わる画像
これはカンプの中にbn_aとbn_a_hvを作っておいてカンプ見せるときは2種類見せてる。
>コンテンツの内容を大幅に更新する際
その可能性がある部分はテキストとcssだけでなるべく作ってる
画像とか大幅に絡んでくる部分は最初の時点で用意するか、諦める。
2、
元々DTP出身ですがWebデザインはPSのみですね。イラレ使うのはsvg必要な時くらい。
どう考えてもPSの方が便利ですよ。イラレだとRGBとかピクセルとかわざわざWeb用に設定変更してあげなきゃいけないし、結局PSも開くからPC重くなるし、、
ならPS一本で完結出来るからいいやー、みたいな感じ

ID:a7swjM

釣りと思われたのならすみません…マジレスありがとうございます。

>例えば20pxの丸いアイコンが・・・
photoshopってレイヤーに別に書き出せるのを、恥ずかしながらさっき初めて知りました…これはすごく便利ですね!

>どう考えてもPSの方が便利・・・
確かに、結局は画像編集する場合photoshopを使いますから、ソフトを2個起動している状態ですもんね。
レイヤー管理や上記のような「テキスト編集や四角などのパスやオブジェクトの選択・編集」に不便は感じませんか?これはただ単に、私がphotoshopで作業をするときにレイヤーが非常に多くなって見づらくなったりワンクリックでテキスト編集ができなかったりすることに不便さを感じているので、純粋に疑問に思っていることです。
それも練習したり慣れれば気にならなくなる部分なのでしょうか?
.
ありがとうございました。

ID:o/TWMZ

>ワンクリックでテキスト編集
設定すればできるよ?イラレみたいに選択ツールでそのまま触れるように。
テキストなら設定すらしないでテキストツールで触れるし
デフォルトの状態でもコマンド+クリックでレイヤー探してくれるし

ID:55k/aT

>イラレだとRGBとかピクセルとかわざわざWeb用に設定変更してあげなきゃいけないし
ドキュメントプロファイルとして作成しておいて、線の問題はグラフィックスタイルで登録して使えば改善できると思うよ。もともと設計してからPSで素材作ってからイラレでやれば作業すればどっちも起動させてやる必要もないし。ただそれでもピクセル整合性のチェックはオブジェクトによってつけたりけしたり消したりしないといけないけどね。

ID:fnRdha さんの回答

当方CS5環境。基本AIでやってる。画像加工のみPSDを配置
一人だから他の人の手法も参考にしたいですね。

AIで、カンプからそのままが多くなったかな。
ヘッダー・フッター・サイドバーとかの共通部分は独立させてリンクファイルで配置。(AIファイルも納品するならそのとき埋め込む)
>透過画像やマウスオーバー前後で切り替わる画像などを作成する際
置換画像がある場合は、隣にアートボードもう一個作ってそっちで作ってる。
AI使ってるなら別ファイルよりアートボードの方が便利じゃない?
最近はナビもCSSメインが多いし、案件によってはa:hover img {opacity}も使えるから置換画像すら作ってない時もある。
>コンテンツの内容を大幅に更新する際
これはどの程度かによるね。
そもそも別デザインになるなら制作時に気にしてもしょうがないしな~。
けど、共通部分リンクにしとけば楽になるんじゃない??

>テキスト編集や四角などのパスやオブジェクトの選択・編集が楽
に同意だし、レイヤーも気にしなくていいから一人でやってるときはAIオンリーになった。元々PS派だったけど。
AIは初期設定と小数点だけ気をつければ、パス>>スライスも便利だし、スライスだけレイヤー分けて管理してる。
スライス後に最適化保存画面に行かないとファイル名付けられないのだけは困ってる。そこだけは完全にPSに軍配。
あとは使い易い方or指定がある方でいいんじゃない?
既存データがPSDってことも良くあるし、どっちも使えるに越したことはないでしょうけど。こっちが良い!!は不毛だと思うよ。本人が使い易いならそれで良いと思う。

ID:a7swjM

コメントありがとうございます。

>ヘッダー・フッター・サイドバーとかの・・・
>共通部分リンクにしとけば・・・
これとても便利で分かりやすいですね。参考にします!
>AI使ってるなら別ファイルより・・・
1ファイルにアートボード複数は私もよくやります!ファイルサイズが大きくなって重くなる場合は各aiに分けたり…。置換有りの画像は、1つのアートボードの上下に並べて作っていました。

>AIは初期設定と小数点だけ気をつければ・・・
よく、illustratorは小数点やピクセルグリッドに合わないから…という記事を見かけるのですが、あれは「印刷用データもillustratorで作成するから、WEB用データ作成時にいちいち設定変えないといけなくて不便」ということなのでしょうか?私は今までWEBしか作っていなくて、最初の設定で単位を全てピクセルにして作業を行っていて、全然不便を感じていなかったのでそのデメリットが理解できていなかったのですが…。
上記のことが原因のデメリットなのでしたら、かなり論点が変わりますのでこの質問が意味なくなってきますね;
.
確かに、自分の使いやすさが一番ですよね。今は私一人でWEBサイト作成をしていますが、複数人とやり取りをするようになった場合の為にどっちもそつなくこなせるようになりたいです。
ありがとうございました。

ID:4Wou.t

>最初の設定で単位を全てピクセルにして作業を行っていて
自分もそうしてるね。
ただ、例えば配置した画像の拡大縮小したり(しなきゃいいんだけど)、線が中央だったりすると、どうしても小数点は出ちゃうかな。自分の設定が足りてないのかな??
その辺留意しても、オブジェクトの移動だったり整列だったり、フォトショよりもやり易くて、総合的に作業時間短縮できてるのはイラレかなと思う。自分としてはね。
皆さんのご意見参考になるわ~。ナイストピです!

ID:qmK9ug さんの回答

いままで、AIデータが届いた事がないのですが・・・。
Fireworks または Photoshop だけですね。Fw と Ps の比率は 3:7 くらいです。
というか、AI で送られてくると迷惑です(笑)アセット書き出すの面倒ですしね。いちいちスライスなんて時間の無駄ですから。Ps のアセット書き出し、または Slicy に PSD 投げ込んでアセット書き出して終わり。これが一番ベターだと個人的には思います。

ID:a7swjM

コメントありがとうございます。
>というか、AI で送られてくると迷惑です(笑)
これなんですよね…。今までillustrator最強!と思ってやってきましたが、世間ではこういう評価がとても多く、photoshopで作業をされている方が多かったのですごく不安になっていました。
あと、Slicyというものがとても便利そうでびっくりしました!こんなツールがあるのですね…知りませんでした。他にもphotoshopで使える便利そうなツールを色々調べて試してみたいと思います。
.
ありがとうございました。

ID:qmK9ug

Slicy は Mac 用アプリなので作業環境が限定されますけれども、Photoshop には標準でアセットを書き出す機能があるので、レイヤーとか上手く使えば Photoshop の標準機能で大丈夫だと思ういますよ。

ID:uktcd/ さんの回答

私の会社はすっかりイラレがメインになってきました。
イラレでページ全体のデザインをして作業しています。
あとエクステンションのLayer Exporterが便利ですよ、スライスの作業要りませんし。

ID:a7swjM

コメントありがとうございます。
私もそのように、illustratorで全体のデザインをしていました!
>あとエクステンションのLayer Exporterが便利・・・
なにこれ凄いです!スライス作業は確かに面倒ですし、これだと透過画像を書き出すたびに背景レイヤーを消したりすることもないんですね!すごく便利なツールを教えてくださりありがとうございます!

ID:pmt004 さんの回答

なんとなくAiは印刷用で、画像なんだからPsでしょって流れでそうなってしまったんだと思う。ただ最近はAiもビットマップ対応したし、レイアウト機能では10歩も100歩も優れてるAiに気づいてそっちに移る人が多くなったね。それでも効率の悪いPsにしがみつく人は多いけど。Fwな人はPsがver.5とかのまるで使い物にならなかった頃にFwに出会ってずっとそのまま、って感じ。

ID:a7swjM

コメントありがとうございます。
>なんとなくAiは印刷用で、画像なんだからPsでしょ・・・
そんな感じですね。私は最初から「PCでキレイな線とか画像とか表示したいし、それならillustratorだろう」というにわか知識でillustratorを使い始めましたが、よくよく調べるとillustratorはもともと印刷用(広告作成だったり)で使われていたものだったのですね。photoshopは完全に画像編集・ラフ画や絵を描くもとだと思っていました。
fireworksは触ってみようと思い始めたころに開発終了してしまったので結局触らず終いでしたが、fireworksをメインにWEB制作していらっしゃった方は、皆さん「fireworks最強だったよね」と言っていますね。そんなに使いやすいものだったのだろうか…とうらやましく思います。

ID:pmt004

もっと言うと Ai は名前の通り「イラストレーションを作成するもの」だった。英語の illustration は日本とはニュアンスが違い、「図版」の意味が強い。これで作図して、Psで写真をいじって、それらを読み込んでレイアウトするのは今は亡き PageMaker でやるという感じだった。が、Ai だけでレイアウトまで済ませた方が早いということで文字組みやレイアウト機能が強化され今日に至る、という感じ。
FwはPsがまだドロップシャドウやパスオブジェクトの編集、文字の書き換えすらできなかった頃に出てきた。Psの印刷用の重たい機能は外され、代わりにAiのレイアウト機能が搭載されて画期的だった。今でもWebはFwが最強だと俺も思ってる。

最終更新日:2015-04-15 (3,380 views)

関連するトピックス

ページ上部に戻る