Web用のイラストを準備する
2008年6月16日chriscoyier％で3件のコメント 
イラスト、Webデザインの素敵な傾向がある。 うまく媒体収まる。 偉大なイラストレーターかかわらず、多くの場合は、ウェブの面で、いつ自分のイラストを行うとは思わない。 これは非常にいい空を見てください/私はシャッターで発見丘の景観画像 ：
私はこの図は、Webデザインのための偉大な基地を作ることだろうと思うが明確には、ボックスのような課題を解決のために準備されていません。 いくつかの操作を行うことができるし、ウェブの準備を行う。
Photoshopにそれを取得
これは、図のベクトルである幻想的です。 は、我々の品質を損なうことなくする必要があります任意のサイズに設定することができます。 私たちの目標は、このシーンは、ブラウザの上部中央になので、Photoshopには最大で当社のウェブサイトのメインコンテンツ領域とそれを得るように座るようにすることです。 、960px言ってやる。 新しいPhotoshop文書を作成960px幅より背が高いに収まるようにする必要があります。
Adobe Illustratorと[ すべて選択 ]で画像を開きます。 コピーと貼り付けPhotoshopのドキュメントに挿入。 スマートオブジェクトとして貼り付けしてください。 これはそれのベクトルの性質を保持する場合、その品質を失うことなく、高級できるようになる。 が小さすぎるようになることがあります。 はありませんが、ちょうどあなたの960px幅文書に収まるようにスケールアップする心配だ。
エッジの拡張
ブラウザウィンドウをPhotoshopの文書のような幅の環境で固定されています。 我々は画像を準備するときに、ブラウザウィンドウにわれわれの基地960pxよりも広いです見栄えがする必要があります。 の先に行くと1280pxに当社の文書のキャンバスの幅を増やすように我々が動作するようにいくつかの部屋があるみましょう。
当社の目標はここでは水平方向に再現されるもので、このイラスト終わりの強みを持っています。 人は、Web用のこの設計で動作させるには、このようなものが必要になりますこの文書をスライス。 最終的には、このスライスは、ウェブページの<body>要素の背景を、私たちのメインイラストを上に座ってされます。
私は、この画像の右端の小さなとげを取るよ""それまでにそれ自身の新しいレイヤー（コマンド- J）の浮かんでいる。
今は無料（コマンド+ T）は、この新しい小さなスライスを変換することができますし、水平方向には、ドキュメントの両方の側面を展開します。 これは、グラデーションいいと垂直方向に作成された、この拡張子をきれいに右サイドをオフに動作します。 丘の茂みや道路の右側にあるものの、あまりにも突然のように、突然切断される。
への移行を覆い
ではなく、何かあまりにもファンシーかと一緒に、これらの2つのレイヤーを結合しようとするのは、前景配置することによって、過酷な移行をあいまいに直接トップ上のオブジェクトができます。 この図は、余分な深さのビットではとにかくことができます。
このベクタは、メールボックスをきれいに尽くします。
メールボックス自体を除くすべてを削除し、スマートオブジェクトとしての画像に貼り付けると同じように我々はオリジナルイラストが配置されます。 少しのサイズ変更や配置、我々の背景の変遷を覆いのための完璧な要素を持ちます。
メインコンテンツエリア
当社の図は、素敵なヘッダーや背景にすることが予定されているWebサイトの実際のコンテンツには、白の大きなブロックのいくつかの種類があります。 ドロップシャドウのビットをオフに設定する上で、白い角の丸い四角形右ドロップできます。
ボトムアウト充填
水平方向のエッジがきれいに隠されて、私たちはウェブサイトのモックアップの底の残りの部分の色を記入することができます。 サンプルでは、方法は下のほとんどの画像のピクセルからの色はスポイトツール（）とし、この新しい色で、ほとんど空のレイヤーは下にご記入ください。
これは、メインコンテンツ領域に今すぐにまともなウェブデザイナーのための最大のスライスには非常に簡単になるだろう。
最後の仕上げ
空の良い小さな歓迎メッセージをスローし、私たちが素敵なイラストさんのWebモックアップしている。 なぜなら、考え込むように両方の水平方向の拡張性と垂直方向の拡張の世話をし、この図では変換のために実際のWebマークアップに最適です。
すべてでは、このタスクを使用する理由Photoshopの？
なぜフォトショップを使用する？ Photoshopのは、このイメージはレイアウト（チュートリアルアイデア）に良いようなベクトルのWeb用のイメージではなく、のための優れたツールです。
情報提供に感謝！ Photoshopのマジックです！