http://tutorialaday.com.nyud.net:8080/web-design-workflow-complete-overview/

↑のTutorialaday.comのJosh氏のエントリーに、Web製作の製作手順について「プロ」のやり方が説明されてました。

クライアントとよく話し合う、ってのは個人サイトでは自分の中でコンテンツの構想を練る、ってのに置き換えられるかな。で、スケッチを書いて大まかなレイアウトを決めてから、Photoshopで大まかにデザインしていく。デザインの方針が固まったら細かいデザインをPhotoshop上で行って、最後にXHTMLとCSSでコーディングをする……って流れらしいです。

「MOGSTYLE」について、サイトのデザインはやはり基本的にPhotoshopで完結させていました。ロゴのマークくらいは流石にスケッチをして何通りかデザイン作ってからしたけど、Photoshop上でイメージを膨らませていくことが多かったです。……が、やっぱり時間がかかってしまう。スケッチをしたほうが早いのかなぁ。次のサイトでは簡単にスケッチくらいしてみようかな。

で、今のバイト先では皆さんIllustratorでサイト全体のデザインをされてます。俺は最近少しずつ練習してるとはいえ、基本的にIllustratorはド素人です。……いや、最初はホントに困った。画像サイズがちっとも合わないし、切り抜き方は分からないし。何とか慣れては来ましたが、やはり俺はPhotoshopでデザインするほうが性にあってるっぽいです。

Photoshopでデザインすると、基本的にはブラウザで見るのとほぼ同じ見た目を作ることが出来ます。サイト全体のイメージを作りやすいし、ドロップシャドウとかの効果が簡単に使えるからデザインの自由度も高い。Photoshop上でデザインを完結させれば、後はスライスして必要な画像を一気に書き出してやればOK。画像とサイト構成さえハッキリしてれば、コーディング自体はデザインをしているときに大体の構造は頭の隅で考えてるのでそんなに時間はかからない。

Photoshopの弱点は、レイヤーを重ねすぎると、非力なPCだと如何せん実に重い。サイト全体のデザインを完結させるくらいにレイヤーを重ねまくると、いちいち動作に時間を食うようになってしまいます。また、スカラーゆえ画像サイズに関する融通が利かないのもちと面倒と思うことも。

対してIllustrator。ベクトルなので画像の大きさなどを簡単に入れ替えまくって試行錯誤出来るのがすごく大きい。パスを重ねまくっても結構軽いし、サイズが可変だから紙に印刷したいときも綺麗に印刷できます。

……が、ベクトル形式ゆえフォントとかの見栄えや大きさが実際にブラウザで表示したのと結構違ってくるのがマイナス。Photoshopではデザインをした時点でサイトの全体像が把握できるのに対して、Illustratorだと、実際に組んでみると文章が収まりきらなかった……みたいなことも結構あったりしました。

好みと慣れの問題なんだろうけど、重さを考慮しても私はPhotoshopのほうがWeb製作には使いやすいかな～。全てのデザインをPhotoshopだけで完結させられるのが楽チンで、一度慣れると辞められないです。こういうのやってると、PCにメモリ2G積んどいて良かった～、と思います。次のサイトはちゃんとスケッチしてからPhotoshopで作成しようかな、と思っております。

---

Today's Practice:A Glossy Starburst & Orange Icon

今日は一昨日サボった分、簡単なのを2個作ってみました。「Glossy-Starburst」と「Orange Icon」です。前者はWeb2.0を謳うサイトでは結構見ることが多いマークですね。どっちも作り方は結構単純だけど、デザインには結構使えるかな。特に前者は、色々なサイトで使われてるだけあってなかなか使いやすい。……まぁ、逆に言えば色んなサイトで使われている分、相当工夫しないと逆に使いにくいわけですが。

今回は、photoshopitと、Solutiondesigns.netのHeadshot氏のチュートリアルを参考にしました。

http://photoshopit.wordpress.com/2006/09/19/a-photoshop-tutorial-on-starbursts-badges-web20-style/
http://www.solutiondesigns.net/Tutorial/2/26/Orange%20Icon/

このエントリーのトラックバックURL

http://mogstyle.net/mt/mt-tb.cgi/214

Name

Mail

URL

Save

YesNo

感想や意見、質問などお気軽にどうぞ☆