Webデザインコミュの初心者の質問。

Webデザイン初心者です。

今、色んな本を見て勉強しているのですが、カンプを作ってスライス、コーディングまでの過程がいまいちわかりません。

読んだ本には、
「レイアウトをイラレで作成、その後、それに沿ってフォトショップでデザインをグリップさせて行く」
と書いてあったのですが、イラレで先にボックスの大きさなど作ってしまったら、テキストの量とか、写真の大きさを変更したいとなった時にまた作り直さないと行けなくなると思うのです。

・フォトショップで最初から作成という形でいいんでしょうか？

・又、フォトショップでスライスまで行けたとして、その後のコーディングでの
　margin、paddingで調整する幅というのは、聞いた所、フォトショップの選択範　囲ツールで測って「情報」で出た数値を入力、と聞いたのですが、それで間違　いないでしょうか？？

すいません、ど素人なもので色んなとこぐぐったのですが、よくわかりません・・。宜しくお願いします。

コメント(24)

最初
全て
最新の40件

[1] mixiユーザー 07月03日 16:01

ボックスって、何のボックスですか？
ボックス要素？
それともテキストボックスの誤解？

[3] mixiユーザー 07月03日 16:16

明確にドコがどうわからないを記述した方がいいかと思います。後、主様は素人と初心者を履き違えていませんか？

[6] mixiユーザー 07月03日 17:18

写真サイズやテキストの量に変更の恐れがあるなら、スライスで作らない方が良いかも？

[7] mixiユーザー 07月03日 17:48

皆さん、返事ありがとうございます。
＞タクロさん
ボックスはCSSの要素の方です。

＞(夜◇ω・)月さん
すいません。文章がわかりにくくて。
コーディングまでの過程がいまいちわからないということを言いたかったのです。

＞☆selene☆ さん
ありがとうございます。やっぱりそうなんですねっ。

そこが知りたい所でした。

paddingとmarginの違いというのはborderを挟んだ外と内というイメージしか
ないのですが・・・。違ってたら指摘の方お願いします。

＞Mr.Y さん
一番知りたいかったことを詳しい説明ありがとうございます。

paddingを先に決めてもいいし、イメージ優先で後でpadding測ってもいい
ということですよねっ。それが知りたかったんです。ありがとうございます。

グリッド、スナップ、で情報で見てらっしゃるんですね、多分。

＞CIAさん
スライスは全部確定してからなので、大丈夫だと思います。

・・・・・・・・・・・・・・・・・・

も１つ質問なのですが、そしたらイラレとは、どういう時に皆さん使われてるのでしょうか？

ロゴとかパスで作る時に使うとかでしょうか？？

[8] mixiユーザー 07月03日 18:18

>>7

私の場合だと、

１．最初の大まかなレイアウトを考える時
２．複雑なロゴを作る時
３．Photoshopのパスツールでは作りづらい形状のオブジェクトを作る時

などにイラレを利用してます。
１．の使い方に関してはFireWorksが使えるならそっちでやるんですが
使えないので仕方なく…（苦）
基本的にはWEBでは主にパーツ製作用に使ってる感じです。

DTP出身のデザイナーさんはイラレの方が扱いに慣れているので、
たまに全てのデザインをイラレで上げて来るお客さんもいます。
が、結局それを全部Photoshopに書き出して、細かいピクセル修正して
スライス書き出しするはめになるのでできれば全部Photpshopで作って
欲しいと思う今日この頃です。

[10] mixiユーザー 07月03日 19:57

デザインカンプの時点で、サイズ可変部分と
サイズ固定部分を分けて考えた方が
コーディング作業に移った時にスムーズに行くと思います。
ここは文字が多くなったら下に広がっていく・・・といった感じで＾＾

逆に文字数に縛りを入れることが出来るなら、
画像のピクセルサイズを全部指定した状態でページが作れるので、
見た目は調整しやすいですね～。

初めはHTMLで挿入する画像やテキストがある部分を
何パターンか（画像大・文字少、画像小・文字多とか）当てはめて
デザインしてみると、可変できるようにコーディングしなければならない部分
というのが見えてくるのではないでしょうか。

って、これはさすがに初歩的過ぎる回答でしたか＾＾；
根気よく頑張って、いいサイトつくって下さいませ★

[11] mixiユーザー 07月03日 19:57

FireWorksでスライスした時に何か便利な機能があったような…

[12] mixiユーザー 07月04日 02:05

個人的にデザイン・レイアウトは Fireworks を使いますね。

webデザインの場合1pxのズレが致命的になることも多いので、
ピクセル単位のデザインに特化した Fireworks はオススメです。
他のツールより滲みがおきにくいのです

写真の加工などは photoshop で行います。
ロゴデザインなど伸縮性が問われるものは Illustrator を使用します。

margin、padding などはデザインを忠実にが基本ですが、
デザインが左右1px ずれていたり、
メンテナンス性を考慮してmarginを統一した方がいいケースもあるので、
柔軟に対応するスキルが必要かと思います。
分業している場合、もちろんデザイナーに相談する必要がありますが。

[13] mixiユーザー 07月04日 11:13

返事ありがとうございます。
＞にゃんこ@FF10 さん
１，２，３共おいらと全く思ったこと同じでした。

やはり、そうなんですね。細かいピクセル修正てのは見た目で
1pxずつ移動させてるんでしょうか？

イラレの機能がフォトに欲しいｗ
て人はFWを買えってことなんですかね(;´▽｀A``

＞☆selene☆ さん
合っててよかったｗありがとうございます、頑張ります。

＞帝さん
サイズ可変部分ですか。。。

どうしてもまだ全体的なイメージで作ってみないと、どこが可変するのか
まだわからない感じですね。。

色々試してみたいと思います。ありがとうございます。

＞ちょこさん
ちょこさんFW持ってなかったんでしたっけ？

＞kakeru さん
よく「1pxのずれが致命的になる」とは聞きますね。

やはりFWが便利なんですね・・デザイン。

色々な意見ありがとうございます。勉強します。

[14] mixiユーザー 07月04日 12:05

こんにちは。
ウェブの世界では、デザイナーとコーダーが既に解れて考えられていて、私は、最近では「デザイン」を納めることが多くなりました。

デザイナーよりの意見ですが、
私は、softを使う前に、紙にラフを描きます。
その時に浮かんだアイデアをすぐ描き現せるし、全体像を把握できるので、ぜひやってみてください。
ラフを見ながら、photoshopで清書。アイコンやイラストにイラレを使います。
修正や更新が頻繁な案件の時や、お客さんがそのsoftを使っているときはFireWorksを使います。

>margin、paddingで調整する幅というのは、聞いた所、フォトショップの選択範囲ツールで測って「情報」で出た数値を入力、と聞いたのですが、それで間違いないでしょうか？？

後は主サンのおっしゃる通りにやってます。DreamWeaverで、トレーシングイメージを置いてザックリ組むこともあります。

[15] mixiユーザー 07月04日 13:21

＞e-pon さん
解答ありがとうございます。

ラフの方はプロの方には及ばないですが、なんとなくでやってます(゜ー゜;A

[17] mixiユーザー 07月04日 13:27

すいません。新たな質問です。

ロールオーバーボタンのグラフィックを作る時に、一枚絵にすると思うのですが、それを作成する際の何かいいソフトとかはあるのでしょうか？

今現在は、フォトショップでボタンの大きさを座標計算して移動させてるのですが・・。

ボタン1main ボタン1over
ボタン2main ボタン2over

CSSでは、それを元にbackground-positionで示してます。

お願いします。

[18] mixiユーザー 07月04日 14:04

なんでそんなにアプリや手順にこだわるの？

[19] mixiユーザー 07月04日 14:08

ボタンだけならFireworksが簡単です。
凝った装飾にするならPhotoshop、Webメインで完結させるならFireworks、慣れると使いやすいのがIllustratorかな。

[23] mixiユーザー 07月06日 20:39

＞まこと。さん
素人なのでわからないからです。

＞まんごスちんさん
やっぱり、そうなんですね。。。FW触ってみたいなぁ。。
頑張って買うかな。。

ありがとうございます。

＞キモイマン
想像ですね。なるほど。

＞レエル＠恐ろしい子！さん
FWの事はよくわからないですが、FWのが楽そうですね。。ロールオーバー。。

[24] mixiユーザー 07月06日 21:11

紙に20通りぐらい書いて考えるのがベストかと思います…

ログインすると、残り8件のコメントが見れるよ