Photoshoppen een unieke Contactformulier

Er enkele mooie contact formulieren die er zijn op het web, maar in grote lijnen webformulieren zijn een moeras van standaard-stijl web lelijkheid. Dit heeft te doen, voor een deel, als gevolg van cross-browser grillen en de moeilijkheid van de styling een vorm elementen in bepaalde browsers. Maar in werkelijkheid is het niet zo moeilijk om stijl vormen en het is meer over ontwerper / ontwikkelaar luiheid dan iets anders.

Het is triest eigenlijk, want zulke vormen essentiële onderdelen van websites. Het is op formulieren die u vraagt ​​voor zeer intiem aandacht met uw gebruikers. U hebt verstrekt een ruimte voor hen om te communiceren met de website is een of andere manier. Dit is altijd wenselijk en waardevol. De vorm ontwerp moet deze ervaring te verbeteren, niet weg van.

Ik denk dat de beste manier om een ​​grote vorm te krijgen is het eerste ontwerp, zonder na te denken over de beperkingen van HTML & CSS. Dus laten we Photoshoppen!

1. Maak een Achtergrond

Maak een nieuw Photoshop-document op de gewenste grootte van uw formulier gebied. Mine is 800x600px. Dubbelklik op uw standaard achtergrond laag "geopend".

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

2. Teken de vorm voor de Form omgeving

Aangezien wij zullen 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 vectorvorm online je wel en kopiëren vanuit Illustrator plakken als een vorm laag. Hier zijn een aantal tekstballon vormen vond ik op Shutterstock (abonnement vereist).

Hier is de vorm nu in onze document:

Laten we eens wat Layer Styles toe te voegen aan de vorm te spice it up een beetje:

Voor nog meer stijl, laten we de tekstballon een schaduw. Maak een nieuwe laag onder de tekstballon. Command-klik op de speech bubble laag maken van een selectie uit zijn vorm. Vul dan het gedeelte op 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 Gaussiaans vervagen en we hebben een schaduw.

Deze schaduw ziet er een beetje plat, dus laten we leven in de brouwerij het op een beetje. Met je schaduw layer geselecteerd is, gebruik dan de "Warp" te transformeren (onder het menu Bewerken). U krijgt een 3 × 3 grid van handvatten die je kunt gebruiken om de vorm van de schaduw te manipuleren. Hier heb ik drug de linker handvat een beetje naar de rechterbovenhoek en de linkerbovenhoek hendel naar beneden en naar rechts een beetje. Maakt de vorm er een beetje meer driedimensionaal. Ik heb ook 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 gebruik gemaakt van een vrij groot lettertype en de lettergrootte Agenda Black.

Meer laagstijlen! Ik paste een patroon beroerte (zelfde patroon als de achtergrond), een helling en een beetje van een slagschaduw.

De vormelementen

Onze vorm leent zich goed voor een twee kolommen ontwerp met de linker helft voor de kortere tekst velden en de rechter helft voor de grotere boodschap gebied. Elk van de ingang gebieden is een eenvoudige witte rechthoek met een lichte slagschaduw toegepast. Het "label" voor elk formulier element ligt op de top, links uitgelijnd.

Op de knop Verzenden

Vanwege de "flow" we hebben opgezet met dit formulier, maakt het het meest logisch om de submit knop zet 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 het houden op dezelfde Agenda font gezin zoals wij dat hebben overal te gebruiken.

DOWNLOAD Photoshop-bestand

Waardoor het werk ...

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