PhotoshopでWebデザイン

PSDファイルをHTMLにする流れ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Photoshopのファイルをウェブサイトにするまでの大まかなステップを理解します。
講師:
02:59

字幕

Web デザインを始める前にまず、どういう流れでWeb サイトが構築されていくのかその流れを確認しましょう。闇雲に、Photoshop の使い方を勉強してもちょっと困るのでまずは流れを見ていきます。一番最初「スケッチ」をします。どういう風なWeb サイトを作っていくのか紙と鉛筆でも、指とタブレットでも何でも構わないのでデザインをしていきます。何処にどういう Logo を配置して何処にどういうバナーを置いてこの辺りにメニューかなとかそういうのをざっくり書いていきます。この段階でできれば保存しておきましょう。もしクライアントがいる場合クライアントに同僚がいる場合まず同僚にそのアイディアを見せてそれが実際に機能するかどうかを確認します。次の段階が「ワイヤーフレーム」です。スケッチのデザインを元に実際に Photoshop のファイルに持ち込み何ピクセルでドキュメントを作るのかLogo は何ピクセルぐらいで配置するのかフォントはどれぐらいのサイズかというのを実際に配置していきます。しかし、この際は仮置きです。実際に使う写真とかグラフィックはまだ用意せずに箱で置いていきます。この辺りに何ピクセルという風な感じで仮の枠組みを置いていきます。 実際に配置するのは次の段階です。「デザイン」、一番楽しい段階でここで、まず色を決めます。Web サイト全体の色のパレットを決めて配色をしていきます。更に、実際に使う写真やグラフィックを用意してそれも配置していきます。2 の段階で、もうすでに枠組みの箱が置いてあるのでそこに、置き換えていきます。もし、フォントを用意したい場合はそのフォントを買うのかウェイブセーフフォントだけで対応するのかそういうのを決めていきます。その後に「切り出し・書き出し・引き継ぎ」の作業ですね。Photoshop の中でWeb サイトを作ってしまうと全てが一枚の画像になってしまいます。その画像のままだと後でコーディングし難いので実際に、Logo は Logoメニューはメニューの様にわけて切り出す必要があります。その切り出す作業のことをスライスといいます。後でそのスライスを見ていきます。その後に「書き出し」です。各要素を適切なファイルサイズ適切なファイルフォーマットで書き出します。その書き出したファイルを実際に整理整頓して名前をつけて引き継ぎます。後は Dreamweaver を使ってもしくは他のソフトでもいいんですけどCSS や HTML でコーダーさんがコーディングしてくれます。 この「コーディング」作業でようやく Web サイトが機能します。このクラスでは4 までをカバーしていきたいと思います。もし、コーディングに興味がある人はHTML や CSS のクラスを受講するといいかもしれません。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。