Photoshopping ένα μοναδικό Φόρμα Επικοινωνίας

Υπάρχουν μερικά ωραία έντυπα αναζητούν επαφή έξω εκεί στο διαδίκτυο, αλλά και από μεγάλα έντυπα για το Διαδίκτυο είναι ένα τέλμα της προεπιλεγμένο στυλ ασχήμια web. Αυτό έχει να κάνει, εν μέρει, λόγω της διασυνοριακής ιδιορρυθμίες browser και η δυσκολία του στυλ ορισμένα στοιχεία μορφή σε συγκεκριμένα προγράμματα περιήγησης. Αλλά στην πραγματικότητα, δεν είναι και τόσο δύσκολο να αποτελεί στυλ και είναι πιο σχετικά με σχεδιαστή / τεμπελιά του έργου από οτιδήποτε άλλο.

Είναι πραγματικά λυπηρό, διότι τέτοιες μορφές είναι βασικά μέρη των δικτυακών τόπων. Είναι σε έντυπα που ζητάτε για την πολύ στενή προσοχή με τους χρήστες σας. Έχετε μια περιοχή που προβλέπεται γι 'αυτούς να επικοινωνούν με την ιστοσελίδα είναι κατά κάποιο τρόπο. Αυτό είναι πάντοτε επιθυμητή και πολύτιμη. Ο σχεδιασμός έντυπο θα πρέπει να ενισχύσει αυτή την εμπειρία, δεν αναιρεί αυτό.

Νομίζω ότι ο καλύτερος τρόπος για να πάρετε μια μεγάλη μορφή είναι να το σχεδιασμό πρώτο, δεν σκέφτονται τους περιορισμούς της HTML & CSS. Έτσι πάρτε Photoshopping!

1. Δημιουργήστε ένα Ιστορικό

Δημιουργήστε ένα νέο έγγραφο Photoshop το επιθυμητό μέγεθος της περιοχής φόρμα σας. Η δική μου είναι 800 × 600px. Κάντε διπλό κλικ στο στρώμα φόντο προεπιλεγμένο σας για να "ξεκλειδώσει".

Κάντε διπλό κλικ στο στρώμα που να ανοίξουν το Layer στυλ παράθυρο διαλόγου, και επιλέξτε μια ωραία υφή για το φόντο σας.

2. Τραβήξτε το σχήμα για το έντυπο Χώρου

Δεδομένου ότι θα δημιουργηθεί μια βασική μορφή επικοινωνίας, πρόκειται με ένα μεγάλο "φούσκα ομιλία" σχήμα για την περιοχή φόρμα. Μπορείτε να σχεδιάσετε εύκολα ένα εργαλείο με το στυλό, ή να βρείτε ένα σχήμα φορέα σε απευθείας σύνδεση, μπορείτε να αντιγράψετε και να επικολλήσετε σε Εικονογράφος από το στρώμα ένα σχήμα. Εδώ είναι μερικά φούσκα ομιλία σχήματα βρήκα στο Shutterstock (απαιτείται εγγραφή).

Εδώ είναι το σχήμα τώρα στο έγγραφό μας:

Ας προσθέσω κάποια Layer Styles με το σχήμα στο καρύκευμα αυτό επάνω λίγο:

Για ακόμα περισσότερο στυλ, ας δώσουμε την ομιλία φούσκα μια σκιά. Δημιουργήστε ένα νέο στρώμα κάτω από τη φούσκα ομιλία. Command-κλικ στο στρώμα φούσκα ομιλία δημιουργώντας μια επιλογή από το σχήμα αυτό είναι. Στη συνέχεια, συμπληρώστε το τμήμα για νέα στρώμα σας με το μαύρο. Τώρα έχετε μια μαύρη φιγούρα το ακριβές σχήμα της φούσκας ομιλία κάτω από την πραγματική φούσκα ομιλία. Εφαρμόστε λίγο Gaussian Blur και έχουμε μια σκιά.

Αυτή η σκιά φαίνεται λίγο επίπεδη, οπότε ας το ζωηρεύω λίγο. Με στρώμα σκιά του εγγράφου σας, χρησιμοποιήστε το "Warp" μετασχηματισμό (κάτω από το μενού Edit). Θα πάρετε ένα 3 × 3 πλέγμα των λαβές μπορείτε να χρησιμοποιήσετε για να χειριστείτε το σχήμα της σκιάς. Εδώ τα ναρκωτικά στην κάτω αριστερή λαβή λίγο στην άνω δεξιά και πάνω αριστερά λαβή προς τα κάτω και δεξιά λίγο. Κάνει το σχήμα δούμε λίγο πιο τρισδιάστατο. Έριξα επίσης την αδιαφάνεια της σκιάς κάτω λίγο.

3. Προσθήκη κειμένου

Αυτή είναι μια μορφή επικοινωνίας, οπότε ας το αφήσουμε αυτό να είναι γνωστό! Προσθέστε το κείμενο «ΕΠΙΚΟΙΝΩΝΙΑ ΜΕ!" Κάτω από τη φούσκα. Εδώ χρησιμοποιείται ένα αρκετά μεγάλο μέγεθος και η γραμματοσειρά Ατζέντα μαύρο.

Περισσότερα στυλ στρώμα! I εφάρμοσε patterned εγκεφαλικό επεισόδιο (ίδιο πρότυπο με το φόντο), μια βαθμίδα και μια κάποια σκιά πτώση.

Τα στοιχεία Μορφή

Σχήμα μας προσφέρεται σε δύο όμορφα στήλη σχεδίαση με το αριστερό ήμισυ για τη συντομότερη πεδία κειμένου και το δεξί ήμισυ για την ευρύτερη περιοχή μήνυμα. Κάθε μία από τις περιοχές εισόδου είναι μόνο ένα απλό λευκό παραλληλόγραμμο, με μια ελαφρά πτώση σκιά εφαρμοστεί. Το "σήμα" για κάθε στοιχείο μορφή κάθεται πάνω, αριστερή στοίχιση.

Το κουμπί Υποβολή

Λόγω του "ροή" που έχουμε δημιουργήσει με την παρούσα μορφή, το λογικότερο να τεθεί το κουμπί υποβολής στο κάτω μέρος, δεξιά από την περιοχή φόρμα. Θα έχουμε πολύ καλή με στυλ στρώμα σε αυτό το σημείο! Κουμπί μας είναι μόνο ένα απλό ορθογώνιο με στρογγυλεμένες λίγο χρώμα και μια μικρή bevel. Ας κρατήσουμε στην ίδια οικογένεια γραμματοσειράς ατζέντα όπως έχουμε χρησιμοποιηθούν οπουδήποτε αλλού πολύ.

DOWNLOAD PHOTOSHOP ΑΡΧΕΙΟ

Making it Work ...

Μείνετε συντονισμένοι! Πάω να τη μετατροπή αυτή σε μια πραγματική εκμεταλλεύσιμη μορφή για το διαδίκτυο πάνω από την CSS-Κόλπα επόμενη εβδομάδα!