Web用のイラストを準備
chriscoyier °で2008年6月16日3件のコメント
イラスト、ウェブデザインの素敵な傾向です。 それはよくメディアに適合します。 彼らは彼らのイラストを行うときに偉大なイラストレーターはいえ、しばしばウェブの点ではないと思う。 この非常に良い見てください空/丘の街並みのイラスト私はシャッターストックで見つけたの。
私は、この図は、Webデザインに最適な拠点になるだろうと思うが、明らかにそれは、アウトオブボックスなどのタスクのために準備されていません。 何らかの操作を行うと、それウェブを準備することができます。
Photoshopにそれを取得する
それは図がベクトルであることが素晴らしいです。 我々はそれを我々がする必要のある任意のサイズ品質を損なうことなく作ることができることを意味します。 私たちの目標は、このシーンは、ブラウザの上部中央に座るようになるので、ここでは当社のウェブサイトのメインのコンテンツ領域のことで、最大Photoshopにそれを得ること。 と言う、960px。 それが収まるようにする必要があるより広いし、背の高い、新しいPhotoshop文書960pxを行います。
Adobe Illustratorであなたのイラストを開いて、[すべて]を選択します 。 Photoshopのドキュメントにコピーして貼り付ける。 スマートオブジェクトとして貼り付けるようにしてください。 これは、あなたが品質を失うことなくそれをアップスケールできるように、そのベクトルの性質を保持できるようになる。 それは、小さすぎると海を渡って来る可能性があります。 いいえ、そこに心配しないだけで960px幅のドキュメントに合うようにスケールアップ。
エッジを拡張
Photoshopのドキュメントのようなブラウザウィンドウが固定されていない幅の環境です。 我々は、ブラウザのウィンドウが私たちのベース960pxよりも広い場合に見栄えする私たちのイラストを準備する必要があります。 先に進み、我々が動作するように、いくつかの部屋を持てるように1280pxに私たちのドキュメントのキャンバスの幅を増やしてみましょう。
ここで我々の目標は、水平に再現性になるもので、この図の端の縁を持つことです。 この文書をスライシング人はウェブのためにこの設計作業をするには、このようなものが必要になります。 最終的にこのスライスは、私たちの主な図は、上に座っていると、ウェブページの<body>要素の背景になります。
私は（コマンド+ J）それ自身の新しい層の上に小さなこの図の右端のスライバーと"フロート"それを取るでしょう。
今、私たちは無料この新しい小さなスライス（コマンド+ T）を変換することができ、文書の両面から水平に展開します。 グラデーションが素敵で、垂直に作成されているので、この拡張は右サイドからうまく機能しています。 右側の決断は、丘、ブッシュと突然切断されている道路で、あまりにも突然に見えます。
トランジションを曖昧に
あまりにも手の込んだことをして、これら二つのレイヤーを結合しようとするのではなく、直接上から前景のオブジェクトを配置することにより、その過酷なトランジションをあいまいにしてみましょう。 この図は、とにかく余分な深さのビットがいります。
このベクトルのメールボックスはきれいに行います。
メールボックス自体以外のすべてを削除し、我々はオリジナルイラストを配置しただけのようなスマートオブジェクトとして図に貼り付けます。 少しサイズ変更と配置と我々は、背景の移行を隠すための完璧な要素を持っている。
メインのコンテンツ領域
私たちの図は、素敵なヘッダとバックグラウンドのために作るとしているが、ウェブサイトの実際の内容のために、我々は、白の大きなブロックのいくつかの種類が必要です。 それをオフに設定するには、ドロップシャドウのビットと右上の白い角が丸い四角形を削除できます。
ボトムを記入
今きれいに隠れて水平エッジで、我々はウェブサイトのモックアップの底の残りの部分に色を記入することができます。 道の下から色（スポイトツールを使用）図のほとんどのピクセルをサンプリングし、この新しい色で私たちの一番下の空のレイヤーを塗りつぶし。
このメインのコンテンツ領域には、今までのスライスにまともなウェブデザイナーのための風になるだろう。
最後の仕上げ
空にあるすてきな小さなウェルカムメッセージを投げ、私たちは見栄えの良い図解のウェブのモックアップ自分自身を持っている。 我々は思慮深く、水平拡張と垂直拡張性の両方の世話をしているので、この図は、現在、実際のWebのマークアップへの変換に最適です。
にご期待くださいCSS -トリック私は今後数週間で実際のウェブページにこれを変換されます。
なぜすべてにこのタスクのためにPhotoshopを使用して？
なぜ、Photoshopを使わないのでしょうか？ Photoshopは、Web用画像のためではなく、この画像のようなベクトルのための良いツールがレイアウト（チュートリアルのアイデア）のための良いものです。
ヒントをありがとう！ Photoshopは魔法です！