WEBデザインで、ラフデザインからスライスを切る前までの作業

質問

現在webデザイナーを目指しスクールでの勉強をほぼ終え、課題製作中のものです。

タイトル通りなのですが、
「ラフデザインからスライスを切る前までの作業」
の手順がいまいちわからず、困っています。

わからない点とは

　1.ラフデザインをフォトショップ、イラストレーター（またはファイアーワークス）どちらで起こしていくか。
　2.具体的な作業の流れ。
3.各パーツを作って置いてみたところで、色やちょっとしたデザインがまとまっていなく感じやりなおししてしまうので、どこまで紙の上で吟味すべきか。また良い手直しの仕方。

です。

現在は

　1.http://design.rightclicksright.com/Make-Site/webDesign.htm様を参考にイラストレーターを使用し
　2.手描きのラフをスキャンで取り込み配置して
3.各パーツを自分で決めたサイズ、位置に、グリッド、ガイドに沿って作成し、置いていく。

という感じでやっています。

プロの方や経験者の方で、アドバイス頂けると助かります。
おそらく多少人によって、もしくは会社によって違うと思われるので、いろいろな方に頂けると助かります。
宜しくお願いいたしますm(__)m

-----------------------------
補足:

スクールではいきなりもう出来上がりのものをスライスを切るところからの内容説明なのでわからないのです。

勿論講師の方にも聞きましたが、<好きなほうでやったほうが..しかしイラストレーターでやってるんですか？>という答えで...f(--;)

はっきりした手順がテキストに無いのでわけもわからずやっている状態なので、だいたいの正しい手順（いろいろあるかもですが）のようなものを最初は知っておきたいのです。宜しくお願いしますm(__)m

回答No.1

nekonyanko · ベストアンサー

まず、ラフデザインをイラストレーターかフォトショップどちらで起こしていくかということですが、それは決まった方法はないので自分のやりやすいほうでやればいいと思います。
DTP出身者はイラストレーターを使うのが慣れているのでイラストレーターで作ることが多いかもしれません。私がそうですが同僚はフォトショップで作ります。

起こすデザインによって使い分けたほうがいいかもしれませんね。写真をメインに使ってるページなどだったらフォトショップのほうが使いやすいでしょうし。

イラストレーターの場合、デザイン段階ではやりやすいのですが画像化するという段階があるので直接フォトショップでやるより手間になるかもしれません。
私の場合、イラレで作った後Webで保存などで画像化し、それをフォトショップ上で切っていきます。
フォトショップだとパスとか使いづらいんですよね^^;

ラフはだいたいこんな感じ程度に書いてスキャンしてテ
ンプレートとするまでは作りこまないですね。
仕事の場合、他の人の意見（上司や他部署の人の）が入って、必ずといっていいほど直しが入るので作りこんじゃうと逆に手間になってしまいます。

別にレイアウトして切り出してページを作らないといけないということはないので必要な部品ごとに作成してレイアウトはDreamweaverなどでしていくという方法もよくやります。

お礼

早速のアドバイス、本当にありがとうございます！
煮詰まっているので、真に嬉しく読ませていただいています。

nekonyankoさんのお答えの一つ一つがまさに聞きたいことでした。
　最初は試行錯誤でフォトショップでやってみたりしていたのですが、おっしゃるようにパスが扱いずらく、それもあって、参考サイトを元に、イラストレーターを使ってみたけれど、マスクなどを使っても写真がいまいち扱いずらくて..(><)（納得がいかず、いっぱいなおすので）
　自己流で直し続けて、これでいいのか、悪いのかと、頭がぐるぐる回っていましたところに光明が見えてきました(^^)
あと、やはり、後で直しも結構入れられるのですね。ホッといたしました。
　本当にありがとうございます。m(__)m

回答No.3

o0-0o

独学で勉強して現在webデザイナーをしているものです。
私はスタートが　Fireworks　だったのですが、その後 Photoshop　もメインで使うようになり、
現在は、両方の良い部分をうまく使いわけながら作業をしています。

作り方は人それぞれだと思うのですが、私の作り方を少しご紹介します。
（ちなみに、私は、イラストレーターではロゴや地図制作のときぐらいで、
　ほとんど使いません）

まず、ラフですが、私はタブレットペンを使って作業をしているので（かなり便利ですよ^-^）
手書きでのラフはレイアウト等の最低限にして、ほとんどの作業をソフト側で行っています。
ちなみに”ラフをスキャンして持っていく”という事は、これまで一度もしたことがないです…笑
私が、ラフの段階では、そこまで細かなデザインをしない、ということもありますが、
ソフト側で少しずつバランスを調整しながら作りこんでいきます。
あと、個人的に”切りのいい数字”が好きで、ソフト側で作業することでサイズを計りながら
作っていけるので、実際手書きラフはほんの参考程度で、仕上がりは違ってくることもよくあります^^;

まず、ソフトですが、私は主に
==================================================
スピード優先の場合　→　Fireworks
質を優先の場合　→　Photoshop
微妙なタッチや、こまかなオブジェクトを作る　→　Photoshop
==================================================
で使い分けています。

FireworksとPhotoshopでは、
仕上がりがある程度同じもの（どちらでも制作が可能なデザインの場合）
を作った場合、Fireworksのほうがかなり早く作れると思います。
なにより「塗り」や「線」の機能、オブジェクトの「グループ」や「選択」
あと、センタリングの配置等もショートカットキーでできるので、
Photoshopに比べて使い勝手が断然ラクだと思います。

ただ、Fireworks　にもやはりどうしてもPhotoshopにはかなわない部分があり…。

マスクが不便…
ドット絵が面倒…
写真の加工ができない…等

…こんなときにはPhotoshopを使うようにしています。

ただ、どちらをメインにして作る場合でも、
作る内容によって作りやすい方のソフトで作るといった感じです。

あと、WEBデザインには修正はつきものですが、
この修正作業もFireworksなら意外とラクにできたりします。
Fireworksには「ライブラリ」という機能があり、
写真や作った素材をストックでき、もとのファイルを1つ変えることで
全部変更が可能になり、メニューボタン背景などの同じ画像を複数で使いたい場合などに
にかなり活用できます。
写真も大きなサイズでライブラリに保存しておくことで、
一度小さくしたものでも画質を崩さず大きく戻すことができます。
また、素材の色変更も、メニューからではなく、プロパティのエフェクトから
修正することで、いつでも色を元の色に戻せます。
ほかにもレイヤーやフレームをうまく使いこなすことで、かなり便利になります。
たとえば、Fireworksには「レイヤー（フレーム）をファイルに変換」
しかも”自動切抜き”もできるというすばらしい機能があるので、
素材をレイヤー（フレーム）別に作るだけで、スライスの作業がまったく必要なくなります。
色数が関係してきますので、作る内容にもよって使い分けも必要ですが…。

FireworksはWEBを作るために作られた本当に良いソフトだと思います。
使い込んでいくといろいろ良い部分の見えるソフトですよ。

あと、私は　スライスは　100% Fireworks で作業します。
何度もPhotoshopでスライスしましたが、かなり使いにくく、
今ではラスタライズしたものをFireworksに持っていってスライスしています。

スライスはきりやすいですし、同名ファイルのチェックも自動でされますし、
何より、同じレイアウトの場合、スライスをコピペして使いまわすことができるので…
Photoshopもその辺もっと便利になるといいのですが…

お礼

まずはじめに、ここしばらくネットに接続出来なく、お礼が遅れて申し訳ありませんm(__)m
------

o0-0oさん、大変為になるアドバイスを有難うございます。
　なるほど、状況に応じて使い分けと言うことですね。
　はずかしながら、まだ各ソフトの機能が頭で混乱している状態のようです。今は積極的にイラストレーターとフォトショップを使い分けたりしようとしていますが、ファイヤーワークスはスライスを切るとき、教材で使った程度でした。
　アドバイスどおり、こちらももっと使ってみて体で覚えて、方法を確立していこうと思います。
丁寧なアドバイスを頂き本当に有難うございました。

----------

ここをお借りして皆さん、お忙しい中、素人の質問に丁寧にアドバイス頂き、真に有難うございました。

質問の内容で困っていたのも事実ですが、それに加えて、求職中で心理的にもあせりや、混乱が水増しされているような状態でしたので、その道で頑張っていらっしゃる諸先輩方の姿が見えて、何だかそういう意味でも少し勇気がわいてきました。

　まだまだで、毎日あせっていますが、教えていただいた方法を試して、頑張って行きたいと思います。
皆様ご親切に、有難うございました。

回答No.2

non_milky

これは人によって全く違うのでしょうね(^^ゞ
という訳で、参考程度に私の場合です↓

ラフは、たいてい企画書（PowerPoint等で作成）の段階で
簡単に枠組みや各エリアの目的・コンセプト、イメージを決めるだけ。
時間の余裕があったり、提出を求められたりした場合は
FireworksやIllustratorで作りますが、あまり作ったことナシ。

実際のデザインは、DreamweaverとFireworksで。
グラフィックソフトで作り込んで最後にスライス…ではなく、
HTMLファイルがキャンバスの感覚です。
基本は「HTMLという言語を利用したデザイン」だと思うので。
時にはスライスという機能も使いません。
部品を作って自分で配置した方が、ソースもきれいで
簡単にできることがある為です。ケースバイケースですね。
また、ブラウザに表示させるのが完成地点なので、
ブラウザでプレビューを何度も何度も何度も！
繰り返しながら作ります(^^;

なお、３.の良い手直しの仕方ですが、
最初に「HTMLに落とす」ことを考慮してデザインを決めること、
途中で何度かHTMLに落として様子を見つつ、作り進めること…で、
手直しは多少楽になると思います。

お礼

non_milkyさん、早速のアドバイス、真にありがとうございます！

ある意味限られた分野の質問なので、困っているときにこういう風にアドバイス頂き、本当に感謝しています。
　なるほど、<1>のnekonyankoさんとはまた違った方法ですね。こういった方法もあるのですね。
　基本的にスクールで習った方法を鵜呑みにしていました(@@;)有難うございます。
いろいろと頂いたアドバイスを試して行きたいと思います。
しかし..スクールの先生より皆さんのお話が分かりやすい。。(爆)