7 Photoshop Συμβουλές για το σχεδιασμό καθαρών και σύγχρονων ιστοσελίδων
Ο καθαρός, κομψός και όμορφος σχεδιασμός ιστοσελίδων είναι συχνά θέμα προσωπικής προοπτικής. Παρακολουθώ εκατοντάδες ιστότοπους κάθε εβδομάδα και πολλοί από αυτούς ξεχωρίζουν, αλλά δεν είναι απαραίτητα αποτελεσματικοί.
Πολύ συχνά οι σχεδιαστές βράζουν μια ιδέα κάτω πολύ μακριά, παράγοντας ένα τελικό σχέδιο που δεν είναι τίποτα περισσότερο από κείμενο και ένα πλέγμα. Ενώ αυτά τα ελάχιστα σχέδια έχουν την αισθητική τους ελκυστικότητα, ειδικά όταν συνδυάζονται με εξαιρετική τυπογραφία, κινδυνεύουν να υποχωρήσουν.
Προσωπικές απόψεις, υπάρχουν ορισμένα χαρακτηριστικά ενός σχεδίου που του επιτρέπουν να χαρακτηρίζεται περήφανα ως καθαρό ή μοντέρνο και να ενισχύει την ευχρηστία και τη ρευστότητα του σε παγκόσμιο επίπεδο. Η απλότητα δεν είναι μια τάση σχεδιασμού, αλλά μια ιδιότητα καλής σχεδίασης.
Το Photoshop μας προσφέρει ένα ευέλικτο σύνολο εργαλείων για τη δημιουργία βάθους και ενδιαφέροντος και μας προσκαλεί να ενσωματώσουμε λεπτή λεπτομέρεια όπου θα αφήναμε κενό χώρο. Χρειάζεστε μόνο μια χούφτα από αυτά τα εργαλεία για να εμπλουτίσουν τις ιδιότητες του μοντέρνου σχεδιασμού σε μια διάταξη. Με τον έλεγχο τους, μπορείτε να δημιουργήσετε καθαρά σχέδια που να εκφράζουν τη λειτουργικότητα σαφώς και αποτελεσματικά.
1. Διάστημα
Ο λευκός χώρος επιτρέπει τον οπτικό χωρισμό των στοιχείων σχεδιασμού χωρίς τη χρήση κουτιών, γραμμών ή επιπρόσθετων γραφικών και είναι πιθανώς η πιο σημαντική πτυχή του σύγχρονου σχεδιασμού. Είναι απαραίτητο για την παρουσίαση του περιεχομένου και την αναγνωσιμότητα. Όταν χρησιμοποιείται σωστά, ο λευκός χώρος δίνει στη διάταξη σας καθαρή και κομψή αίσθηση.
Οι οδηγοί και τα πλέγματα διατίθενται στο Photoshop για να σας βοηθήσουν να τοποθετήσετε τα στοιχεία με ακρίβεια. Το πλέγμα επικαλύπτει ολόκληρο το έγγραφο ενώ οι οδηγοί μπορούν να ρυθμιστούν χειροκίνητα. Χρησιμοποιήστε έγκαιρα τις οδηγίες για να ορίσετε αόρατα περιθώρια, περιθώρια και επιθέματα που χρησιμοποιούνται για τον ορισμό του λευκού σας χώρου.
Δημιουργήστε έναν οδηγό πιέζοντας Ctrl + R (Win) ή Cmd + R (Mac) για να ενεργοποιήσετε τον χάρακα και στη συνέχεια κάντε κλικ στον άνω ή αριστερό χάρακα για να σύρετε μια κατευθυντήρια γραμμή στην επιθυμητή θέση. Ακολουθούν μερικές πρόσθετες συντομεύσεις που σας βοηθούν να διαχειριστείτε τους οδηγούς ενώ εργάζεστε:
- Για να μετακινήσετε μια κατευθυντήρια γραμμή: Ctrl (Win) ή Cmd (Mac) και κάντε κλικ στον οδηγό
- Εμφάνιση / Απόκρυψη οδηγών: Πατήστε Ctrl +; (Win) ή Cmd +. (Μακ)
- Εμφάνιση / Απόκρυψη του πλέγματος: Πατήστε Ctrl + '(Win) ή Cmd +' (Mac)
Ενεργοποιήστε τους έξυπνους οδηγούς σας κάτω από την προβολή> Εμφάνιση> έξυπνοι οδηγοί . Οι έξυπνοι οδηγοί εμφανίζονται αυτόματα όταν σχεδιάζετε ένα σχήμα, ευθυγραμμίζετε κείμενο ή δημιουργείτε μια επιλογή ή μια διαφάνεια και θα σας εξοικονομήσει το έργο της ρύθμισης των οδηγιών για αυτά τα στοιχεία εκ των προτέρων.
Η ευθυγράμμιση αντικειμένων με οδηγούς και πλέγματα καθιστά το σχέδιό σας πιο εύχρηστο και θα δώσει στο συνολικό αποτέλεσμα μια πιο γυαλιστερή εμφάνιση.
2. Βάθος
Το βάθος που δημιουργείται με το φως και τη σκιά κάνει τα στοιχεία σας να εμφανίζονται καθαρά και πραγματικά. Τα εφέ σκιάς μπορούν να εφαρμοστούν σε οποιοδήποτε αντικείμενο, επιλογή ή στρώμα κειμένου, αλλά το κόλπο είναι να επιλέξετε ένα χρώμα που να ταιριάζει με το φόντο και να παραιτηθεί από το προεπιλεγμένο μαύρο.
Όχι όλες οι σκιές πρέπει να είναι σκοτεινές. Συνδυάστε το εφέ Inner Shadow με μια λευκή ή ανοιχτόχρωμη Σκιά Drop για να δημιουργήσετε μια βυθισμένη ή "ανοιχτή" αίσθηση με πεδία κειμένου ή φόρμας.
3. Λεπτομέρειες
Τόσο το εργαλείο διαβάθμισης όσο και οι επιδράσεις στρώματος κλίσης παίζουν μεγάλο ρόλο στον καθαρό και μοντέρνο σχεδιασμό. Οι κλίσεις είναι παρούσες σε όλες τις πτυχές του μοντέρνου στυλ, από τις σκιές και τις αναδείξεις στα φόντα και τα κουμπιά.
Για να αποκτήσετε πρόσβαση στο εργαλείο κλίσης, πατήστε Shift + G. Για να δημιουργήσετε μια κλίση, κάντε κλικ στον καμβά, σύρετε και αφήστε τον. Αυτό το εργαλείο χρησιμοποιείται καλύτερα για μεγάλες περιοχές όπως φόντο, φώτα ή ακτινικές σκιές. Όταν εργάζεστε με επιμέρους στοιχεία, όπως τμήματα, κουμπιά ή εικονίδια, η επίδραση επιπέδων επικάλυψης Gradient είναι ένα αποτελεσματικότερο μέσο για τον καθορισμό επιφανειακών σχημάτων ή υφών. Αυτό το εργαλείο είναι προσβάσιμο κάνοντας διπλό κλικ στο στρώμα στοιχείου και επιλέγοντας το πλαίσιο ελέγχου "Επικάλυψη μεταβλητής".
Χρησιμοποιήστε αυτό το εφέ για να δώσετε λεπτή διάσταση στα κουμπιά σας και τις γραμμές πλοήγησης ή για να μιμηθείτε το ύφος και την υφή του χαρτιού ή των μετάλλων.
4. Ορισμός
Με την υπερπροσδιορισμό των άκρων και των ορίων, εξασφαλίζετε ότι τα στοιχεία σας έχουν την κατάλληλη αντίθεση.
Το εφέ στρώματος Stroke θα περιγράφει στοιχεία όπως κείμενο ή κουμπιά όπου χρειάζεστε ένα εξίσου σταθμισμένο περίγραμμα σε όλες τις πλευρές. Η χρήση αυτού του αποτελέσματος θα απελευθερώσει τις σκιές Εσωτερικού και Πτώσης για να επεκτείνει τις επιλογές σας.
Είναι δελεαστικό να κατευθυνθείτε προς το εργαλείο πένας για να σχεδιάσετε ευθείες γραμμές και οριζόντιους κανόνες, αλλά εάν θέλετε να εφαρμόσετε κλίσεις ή σκιές στη γραμμή, είναι ευκολότερο να χρησιμοποιήσετε το εργαλείο μονής γραμμής, το οποίο είναι κρυμμένο διακριτικά πίσω από το εργαλείο ορθογώνιου σφραγίσματος . Χρησιμοποιήστε το εργαλείο Single Row σε ένα νέο στρώμα και μια λευκή ή ανοιχτόχρωμη σκιά απόσβεσης για να δημιουργήσετε γραμμές επισημάνσεων κατά μήκος των ορίων ή των διαχωριστικών των τμημάτων όπου δεν μπορείτε να εφαρμόσετε ένα εφέ στο ίδιο το στοιχείο.
5. Τόκοι
Καθαρή και σύγχρονη δεν χρειάζεται να ισούται βαρετό, λευκό, ή ελάχιστο. Η έξυπνη χρήση της υφής και του σχεδίου θα κάνει το σχέδιό σας ξεχωρίζει, ενώ θα επικοινωνεί με το στυλ και το εμπορικό σήμα. Χρησιμοποιήστε λεπτές τεχνικές όπως η προσθήκη θορύβου (Φίλτρο> Προσθήκη θορύβου) ή η επίδραση στρώματος Υφή επικάλυψης σε περιοχές φόντου ή στοιχεία διεπαφής για να τα ξεχωρίσετε. Όσο πιο πραγματικό και σαφές εμφανίζεται ένα στοιχείο, τόσο πιο δελεαστικό είναι για τον θεατή.
6. Προοπτική
Η προοπτική είναι η πιο ανεπαρκής τεχνική στον σύγχρονο σχεδιασμό ιστοσελίδων απλώς και μόνο επειδή οι συνεχιζόμενες τάσεις επικεντρώνονται σταθερά στη συμμετρία και στα πλέγματα. Με την εφαρμογή της προοπτικής στις εικόνες και τα στοιχεία του σχεδιασμού σας, μπορείτε να εισαγάγετε το βάθος, τη διάσταση, τον μοντερνισμό και το ενδιαφέρον για το σχέδιό σας σε ένα απλό βήμα.
Προοπτική μπορεί να δοθεί σε οποιοδήποτε σχήμα ή εικόνα επιλέγοντας την επιλογή "Δωρεάν μετασχηματισμού διαδρομής" στο δεξί κλικ μενού και κάνοντας κλικ στο κουμπί "Warp" που βρίσκεται στη γραμμή εργαλείων εργαλείων.
Η ψευδαίσθηση της προοπτικής μπορεί επίσης να παραχθεί δημιουργώντας ασύμμετρα σχήματα ή πλαίσια και χρησιμοποιώντας διαβαθμίσεις και σκιές κατάλληλα για να τοποθετήσουν τα αντικείμενα μεταξύ τους.
7. Αναγνωσιμότητα
Ο ισχυρός τύπος αγαπητοί στην κοινότητα σχεδιασμού και ένα ακόμα ισχυρότερο στοιχείο του καθαρού σχεδιασμού. Μπορεί να αντικαταστήσει τις εικόνες και τα γραφικά που διαφορετικά θα μπορούσαν να υπερκατασκευάσουν ένα σχέδιο και να μεταφέρουν τη συνολική ουσία των παραπάνω τεχνικών με έναν απλό και απλό τρόπο.
Για να προσθέσετε υφές στο κείμενο, μετατρέψτε πρώτα το στρώμα κειμένου σε ένα Smart Object κάνοντας δεξί κλικ στο στρώμα και επιλέγοντας "Μετατροπή σε έξυπνο αντικείμενο". Είστε απλώς περιορισμένοι στα εφέ των επιπέδων εκτός εάν το κείμενο σας είναι ραστεροποιημένο, μια πρακτική που θέλετε να αποφύγετε, ακόμα και όταν σχεδιάζετε για την οθόνη. Η μετατροπή σε Έξυπνα αντικείμενα σας επιτρέπει να εφαρμόζετε φίλτρα και άλλες τεχνικές στο κείμενο διατηρώντας παράλληλα τις δυνατότητες επεξεργασίας σας σε περίπτωση που χρειάζεται να αλλάξετε τι λέει αργότερα το κείμενο.
Μην ξεχνάτε ότι έχετε διαθέσιμες επιλογές παρακολούθησης και εντοπισμού κατά τη ρύθμιση στοιχείων κειμένου. Ακόμα κι αν το κείμενό σας προορίζεται να αναπαραχθεί σε CSS, θα πρέπει να πειραματιστείτε με την απόσταση γραμμών και γραμμάτων από νωρίς για να απεικονίσετε καλύτερα πώς θα εμφανιστεί το περιεχόμενό σας μέσα στον χώρο που τον έχετε δώσει. Επίσης, θυμηθείτε να χρησιμοποιήσετε το κείμενο "Κρεμ" ή "Καρύς" για να διατηρήσετε τον ορισμό και τη σαφήνεια.
Ο τρόπος με τον οποίο παρουσιάζετε το περιεχόμενό σας σε καθαρό σχεδιασμό είναι πιο σημαντικός από οποιοδήποτε άλλο στυλ απλώς και μόνο επειδή υπάρχει μικρότερη οπτική διάσπαση του θεατή. Χρησιμοποιώντας τις παραπάνω συμβουλές για να διαχωρίσετε σωστά το κείμενο και τα αντικείμενα, προσθέστε ορισμό και ενδιαφέρον και ρυθμίστε το περιεχόμενο εκτός από τη διεπαφή, ο σχεδιασμός σας θα επιτύχει τη βέλτιστη αποτελεσματικότητα.
Τι πιστεύετε για αυτές τις συμβουλές και έχετε άλλους που χρησιμοποιείτε σε τακτική βάση; Παρακαλώ μοιραστείτε παρακάτω ...