Photoshopping een Unieke Contact Form

Er leuke zoek contact formulieren die er zijn op het web, maar door en grote web formulieren zijn een moeras van standaard web-stijl lelijkheid. Dit heeft te maken, gedeeltelijk als gevolg van cross-browser quirks en de moeilijkheid om een of andere vorm van styling elementen in bepaalde browsers. Maar in waarheid, dat is het niet moeilijk om formulieren en stijl is meer over ontwerper / ontwikkelaar luiheid dan iets anders.

Het is triest echt, want vormen zijn essentiële onderdelen van websites. Het is op de formulieren die u vraagt om zeer intieme aandacht met uw gebruikers. Je hebt een ruimte voorzien voor hen te communiceren met de website is een manier. Dit is altijd wenselijk en waardevol. Het formulier ontwerp moet versterken deze ervaring niet weg van.

Ik denk dat de beste manier om een goede vorm te krijgen is om het model voor het eerst, zonder na te denken over de beperkingen van HTML & CSS. So let's get photoshoppen!

1. Maak een achtergrond

Maak een nieuwe Photoshop-document de gewenste grootte van uw formulier gebied. Mine is 800 × 600px. Dubbelklik op uw standaard achtergrond laag op "ontgrendelen" it.

Dubbelklik op die laag het openstellen van de Layer Styles dialoogvenster en kies een mooie textuur voor je achtergrond.

2. Teken de vorm voor het formulier Ruimte

Daar zullen we het creëren van een basis contact formulier, we gaan met een grote "tekstballon" vorm voor het formulier gebied. U kunt eenvoudig een tekenen met de pen tool, of zoek een vector shape online kunt kopiëren en plakken vanuit Illustrator als een vorm laag. Hier zijn een aantal tekstballon vormen vond ik op Shutterstock (abonnement vereist).

Hier is de vorm nu in ons document:

Laten voeg wat Layer Styles om de vorm te animeren het een beetje:

Voor nog meer stijl, laten we de tekstballon een schaduw. Maak een nieuwe laag onder de tekstballon. Command-klik op de tekstballon laag maken van een selectie uit zijn vorm. Vul dan het gedeelte over uw nieuwe laag met zwart. Nu heb je een zwarte vorm van de exacte vorm van de tekstballon onder de echte tekstballon. Breng een beetje Gaussian Blur en we hebben een schaduw.

Dit schaduw ziet er een beetje plat, dus laten we verlevendigen het op een beetje. Met uw schaduw laag geselecteerd, gebruik de "Warp" transformeren (onder het menu Bewerken). U krijgt een 3 × 3 raster van handvatten die u kunt gebruiken om de vorm van de schaduw te manipuleren. Hier heb ik drugs links onderaan een beetje naar de bovenste hendel rechts en de linker hendel naar beneden en rechts een beetje. Maakt de vorm een beetje meer driedimensionaal. Ik liet de ondoorzichtigheid van de schaduw een beetje.

3. Tekst toevoegen

Dit is een contact formulier, dus laten we laten weten! Voeg de tekst "CONTACT ME!" Onder de zeepbel. Hier heb ik een vrij groot lettertype grootte en het lettertype Agenda Zwart.

Meer Layer Styles! Ik solliciteerde een patroon beroerte (hetzelfde patroon als de achtergrond), een helling en een beetje een slagschaduw.

Het formulier Elements

Onze vorm leent zich goed voor een twee-koloms ontwerp met de linker helft voor de kortere tekst velden en de rechter helft voor de grotere bericht gebied. Elk van de input gebieden is slechts een eenvoudige witte rechthoek met een lichte slagschaduw toegepast. De "label" voor elke vorm element zit boven, links uitgelijnd.

De knop Verzenden

Vanwege de "flow" Wij hebben met deze vorm, is het het meest zinvol te zetten op de knop in te dienen in de onderste rechterkant van het formulier gebied. We krijgen vrij goed met laagstijlen op dit punt! Onze knop is gewoon een simpele afgeronde rechthoek met een beetje kleur en een lichte afschuining. Laten we in dezelfde agenda lettertype familie zoals we overal te hebben gebruikt.

DOWNLOAD Photoshop bestand

Making it Work ...

Stay tuned! Ik ga te zetten dit in een echt bruikbare vorm voor het web dan op CSS-Tricks volgende week!