Photoshopping une uniques Formulaire de contact

Il ya quelques looking nice formulaires de contact là-bas sur le web, mais par des formulaires web sont un grand bourbier de la laideur default-style web. Cela est dû, en partie, en raison de cross-browser quirks et la difficulté de dénommer certains éléments de formulaire dans certains navigateurs. Mais en vérité, ce n'est pas si difficile à des formes de style et il est plus sur concepteur / développeur paresse qu'autre chose.

C'est triste vraiment, parce que ces formes sont des éléments essentiels de sites web. Il est sur les formulaires qui vous demandent une attention très intime avec vos utilisateurs. Vous avez fourni un espace pour eux de communiquer avec le site web est une manière quelconque. Ceci est toujours souhaitable et utile. La conception de formulaire devrait renforcer cette expérience, non nuire.

Je pense que la meilleure façon d'obtenir une excellente forme est de le concevoir d'abord, sans penser aux contraintes du langage HTML et CSS. So let's get Photoshopping!

1. Créer un fond

Créez un nouveau document Photoshop la taille désirée de votre zone de formulaire. La mienne est de 800 × 600px. Double-cliquez sur votre calque de fond par défaut pour "débloquer" it.

Double-cliquez sur le calque pour ouvrir la boîte de dialogue Styles de calques, et choisissez une texture agréable pour votre arrière-plan.

2. Dessinez la forme pour l'Espace Forme

Étant donné que nous allons créer un formulaire de contact de base, nous allons avec un grand "bulle" de forme pour la zone de formulaire. Vous pouvez facilement établir un avec l'outil plume, ou de trouver une forme vectorielle en ligne, vous pouvez copier et coller dans d'Illustrator en tant que couche de forme. Voici quelques bulle formes J'ai trouvé sur Shutterstock (abonnement requis).

Voici la forme maintenant dans notre document:

Ajoutons certains styles de calque à la forme à agrémenter d'un peu:

Pour encore plus de style, nous allons donner la parole la bulle d'une ombre. Créez un nouveau calque au-dessous de la bulle. Commande-cliquez sur le calque bulle création d'une sélection à partir de sa forme. Ensuite, remplissez la section de votre nouveau calque avec du noir. Maintenant vous avez une forme noire de la forme exacte de la bulle sous la bulle réel. Appliquez un peu de flou gaussien et nous avons une ombre.

Cette ombre ressemble un petit appartement, donc il faut bien l'égayer un peu. Avec votre couche d'ombre sélectionné, utilisez le "Warp" transformer (sous le menu Edit). Vous obtiendrez une grille de 3 × 3 de poignées, vous pouvez utiliser pour manipuler la forme de l'ombre. Ici, je drogue de la poignée en bas à gauche un peu vers le haut à droite et en haut à gauche poignée vers le bas et à droite un peu. Donne la forme regarder un peu plus de trois dimensions. J'ai aussi baissé l'opacité de l'ombre un peu.

3. Ajout de texte

Il s'agit d'un formulaire de contact, nous allons donc le faire savoir! Ajouter le texte "CONTACTEZ-MOI!" En dessous de la bulle. J'ai utilisé ici une taille de police assez grande et que la police l'ordre du jour Noire.

Plus de styles de calques! J'ai appliqué un coup à motif pattern (le même que l'arrière-plan), un gradient et un peu d'une ombre portée.

Les éléments du formulaire

Notre forme se prête bien à une à deux colonnes de conception avec la moitié gauche pour les champs texte plus court et la moitié droite de la zone de message supérieure. Chacun des domaines d'entrée est juste un simple rectangle blanc avec une ombre légère baisse appliquée. Le «label» à chaque élément du formulaire se trouve sur le dessus, aligné à gauche.

Le bouton Soumettre

En raison de la circulation », nous avons mis en place avec ce formulaire, il est plus logique de mettre le bouton" soumettre "dans la partie inférieure droite de la zone de formulaire. Nous sommes pas mal bon avec les styles de calque à ce point! Notre bouton est juste un rectangle arrondi simple avec un peu de couleur et un biseau légèrement. Restons dans la même famille font l'ordre du jour comme nous l'avons utilisé partout ailleurs.

DOWNLOAD FILE PHOTOSHOP

Making it Work ...

Stay tuned! Je vais être la conversion de cette sous une forme utilisable réel pour le Web sur le CSS-Tricks la semaine prochaine!