Photoshopping en unik Kontakt skjema

Der noen fine jakt kontakt skjemaer der ute på nettet, men i det store og webskjemaer er en hengemyr av standard-stil web stygghet. Dette har å gjøre, delvis på grunn av cross-browser quirks og vanskelighetene med styling annen form elementer i enkelte nettlesere. Men sannheten er det ikke så vanskelig å stil former og det er mer om designer / developer latskap enn noe annet.

Det er trist egentlig, fordi skjemaene er slike essensielle deler av nettsteder. Det er på skjemaer som du ber om svært intime oppmerksomhet med brukerne. Du har gitt et område for dem å kommunisere med nettstedet er noen måte. Dette er alltid ønskelig og verdifullt. Skjemaet design skal forsterke denne opplevelsen, ikke avlede oppmerksomheten fra det.

Jeg tror den beste måten å få en god form er å utforme det første, uten å tenke på begrensninger av HTML og CSS. Så la oss få Photoshopping!

1. Opprette en bakgrunn

Opprett en ny Photoshop-dokument den ønskede størrelsen på skjemaet området. Mine er 800 × 600px. Dobbeltklikk på standard bakgrunnslaget å "låse" det.

Dobbeltklikk på det laget for å åpne opp lagstiler dialogboksen, og velg en fin struktur på bakgrunnen din.

2. Draw The Shape for Form Area

Siden vi vil lage en grunnleggende kontaktskjema, vi går med et stort "tale boble" form for skjemaet området. Du kan enkelt tegne ett med pennen, eller finne en vektor form nettet kan du kopiere og lime inn fra Illustrator som en figur laget. Her er noen tale boble figurer jeg fant på Shutterstock (krever abonnement).

Her er formen nå i dokumentet vårt:

La oss legge til noen lagstiler til formen å krydre det opp litt:

For enda mer stil, la oss gi tale boble en skygge. Opprett et nytt lag under talen boble. Kommando-klikk på tale boble laget skape et utvalg fra den form. Deretter fyller delen på nytt lag med svart. Nå har du en sort forme eksakte form av talen boble under virkelige tale boble. Påfør litt Gaussian Blur og vi har en skygge.

Denne skyggen ser litt flat, så la oss live det opp litt. Med din skygge lag valgt, bruker du "Warp" transformere (under Edit-menyen). Du vil få en 3 × 3 rutenett av håndtak du kan bruke til å manipulere form av skyggen. Her jeg stoffet nederst til venstre håndtaket litt til øvre høyre og øverst til venstre håndtaket ned og høyre litt. Gjør figuren ser litt mer tredimensjonalt. Jeg har også droppet opacity av skyggen ned litt.

3. Legge til tekst

Dette er et kontaktskjema, så la oss la det bli kjent! Legg til teksten "KONTAKT MEG!" Under boblen. Her brukte jeg en ganske stor skriftstørrelse, og skriften Agenda Black.

Flere lag stiler! Jeg brukte et mønster slag (samme mønster som bakgrunnen), en gradient og litt skyggelegging.

Form Elements

Vår form gir seg pent til en to-kolonne design med venstre halvdel for kortere tekstfeltene og høyre halvdel for større meldingen området. Hver av de innspill områdene er bare en enkel hvit firkant med en liten dråpe skygge brukt. Den "label" for hvert skjema element sitter på toppen, venstrejustert.

Send-knappen

På grunn av "flyt" har vi satt opp med dette skjemaet, er det mest fornuftig å sette inn knappen nederst i høyre side av skjemaet området. Vi får ganske bra med laget stiler på dette punktet! Våre knappen er bare en enkel avrundet rektangel med litt farge og en svak bevel. La oss fortsette i samme agendaen skrift familie som vi har brukt overalt ellers også.

PHOTOSHOP DOWNLOAD FILE

Making it Work ...

Stay tuned! Jeg skal konvertere dette til en virkelig brukbar form for web over på CSS-triks neste uke!