フォトショッピングユニークなお問い合わせフォーム

ウェブ上にはいくつかの見栄えのお問い合わせフォームに記入があるが、大規模Webフォームのデフォルトの泥沼スタイルのWeb醜されます。 これを行うには、一部では、クロスのためにはブラウザの癖や、特定のブラウザでは一部のフォーム要素のスタイルの難しさ。 しかし、実際のところ、そうではありませんが困難にスタイルを形成し、デザイナの詳細については、/何よりも開発者の怠慢。

本当に悲しいので、フォームのウェブサイトのような重要な部品です。 このフォームでは、お客様のユーザーと非常に親密な注意を求めています。 あなたがそれらのためのWebサイトとの通信エリアを提供していくつかの方法です。 これは、常に望ましいということで貴重。 フォームのデザインは、そこから差し引かれるわけで、この経験を強化する必要があります。

私は、最善の方法は偉大なフォームを取得すると思うまず、HTMLとCSSの制約を考えることなく設計することです。 それでは、フォトショッピングを取得しましょう！

1。 背景を作成します。

新しいPhotoshopのドキュメントは、フォーム領域の目的のサイズを作成します。 私の800 × 600pxです。 あなたのデフォルトの背景レイヤーをダブルクリックしてください""は解除されます。

そのレイヤーをダブルクリックし、[レイヤスタイル]ダイアログボックスを開くにして、背景に素敵なテクスチャを選択します。

2。 描画図形のフォームエリア

我々の基本的なお問い合わせフォームを作成されるため、我々は、フォーム領域のために大きな"吹き出し"の形で予定です。 簡単には、ペンツール、またはコピーすることができますが、Illustratorからの図形のレイヤーとして貼り付けてベクトル形状をオンラインで見つけると1を描くことができます。 ここにいくつかの吹き出しでShutterStockの上（会員登録が必要です）が図形です。

ここに当社の文書内の図形がされます：

の形に少しだけスパイスそれにいくつかの層のスタイルを追加してみましょう：

さらに多くのスタイルについては、の演説は、影のバブルを与えることができます。 吹き出しの下に新規レイヤーを作成します。 コマンド吹き出し層のそれは形状から選択式を作成をクリックします。 その後、黒を使用して、新しいレイヤー上のセクションをご記入ください。 今、あなたは黒の形状は実際の吹き出しの下に吹き出しの正確な形状をしている。 少しガウスぼかしを適用し、我々の影があります。

この影なので、もう少し盛り上げるせ、少しフラットに見えます。 を使用して影のレイヤーを選択、"ワープ"は、編集メニュー（下）トランスフォームを使用します。 あなたの影の図形を操作するために使用することができますハンドルの3 × 3のグリッドを取得します。 ここで私は薬の下の右上に、少しハンドルを左上部と右ビットダウン処理を残しました。 形状は、もう少し3次元のようにします。 私も少し下の影の不透明度が低下した。

3。 テキストを追加する

これは、お問い合わせフォームなので、それを知ってもらうようです！ "連絡先のテキストを追加！"は、バブルの下。 ここで私は、かなり大きなフォントサイズ、フォントアジェンダブラック使用されます。

複数のレイヤのスタイル！ I）、およびドロップシャドウのビットのグラデーションを背景として（同じパターンの模様のストローク適用されます。

フォーム要素

私たちの形をきれいに2つに大きくメッセージ領域のための短いテキストフィールドの左半分と右半分のデザイン列自体が適しています。 各入力エリアのわずかなドロップシャドウとは単なる白い長方形が適用されます。 各フォーム要素の"ラベル"の上に、左詰めで座っている。

送信ボタン

我々は、このフォームをセットアップしている"フロー"のため、そのフォーム領域の右下の左側の[送信]ボタンを置くために、ほとんど意味がありません。 我々は非常に層のスタイルといい、この時点でなっている！ 私たちのボタンを少しの色とわずかな傾斜では単純な丸い四角形です。 のように我々他の場所でも使用しているのと同じアジェンダのフォントファミリに保管しましょう。

ダウンロードPhotoshopファイル

その作業に...

お見逃しなく！ 私はCSSの上では、Web トリック来週の実際の使用可能フォームには、この変換をするつもりだ！