Υποθέτω ότι ένας πιο κατάλληλος τίτλος μπορεί να είναι ότι το Photoshop είναι ακόμα ένα κατάλληλο εργαλείο για το σχεδιασμό τυπογραφίας στο διαδίκτυο; Αλλά αυτό στερείται της δραματικής έκκλησης των παραπάνω.
Όπως πολλοί από σας, έχω χρησιμοποιήσει πάντα το Photoshop για να δημιουργήσω μακέτα των σχεδίων μου. Για όσο διάστημα μπορώ να θυμηθώ, υπήρξε το βιομηχανικό πρότυπο και το λογισμικό επιλογής για τους περισσότερους σχεδιαστές με τους οποίους συνεργάστηκα. Έχω περάσει εβδομάδες σχεδιάζοντας pixel τέλεια layouts, ομαδοποίηση στοιχείων σε ιεραρχικούς φακέλους και επισήμανση όλων των στρωμάτων μου για να κάνει τη μετάβαση από το όμορφο ψεύτικο μέχρι τον κώδικα όσο το δυνατόν πιο ομαλή.
Θα ήμουν γεμάτος ενθουσιασμό, ενέργεια και ενθουσιασμό που θα εξηγούσα τα σχέδιά μου σε έναν προγραμματιστή, θα μετατοπίζω τα στρώματα και θα προσπαθώ να απεικονίσω το όραμά μου μέσα από το Photoshop, αλλά θα ήταν πάντα λίγο απογοητευμένος καθώς ο γυαλιστερός μου γυαλισμένος σχεδιασμός μετατράπηκε σε αυτό που θα δούλευα στο πρόγραμμα περιήγησης. Σίγουρα, θα έμοιαζε με το σχεδιασμό μου ... Και αναγνώρισα τα γραμματοσειρά αλλά μου λείπει η ευκρίνεια που θυμήθηκα από τις συνθέσεις μου. Δεν ήταν ότι οι προγραμματιστές δεν το είχαν κωδικοποιήσει καλά, περισσότερο που η τυπογραφία που είχα δημιουργήσει στο Photoshop δεν είχε μεταφραστεί σε κώδικα.
Όταν επιλέγετε γραμματοσειρές υπάρχουν λίγα πράγματα πιο σημαντικά από το αν μια γραμματοσειρά είναι ευανάγνωστη ή όχι. Στο Photoshop, αυτό δεν είναι τόσο μεγάλο πρόβλημα επειδή όλα φαίνονται υπέροχα. Δεν έχει σημασία το είδος της γραμματοσειράς που χρησιμοποιείτε, με το μέγεθος ή το βάρος (στο λογικό), όπως θα γίνει τέλεια στην οθόνη.
Δυστυχώς, αυτό δεν εκτείνεται στο πρόγραμμα περιήγησης. Συχνά κατά την προβολή του σχεδιασμού μου στο πρόγραμμα περιήγησης, οι σχέσεις μεταξύ στοιχείων και τύπου ήταν όλες λανθασμένες. Τα μεγέθη γραμματοσειρών και τα ύψη γραμμών που είχα αποδώσει στα στυλ στη σύνθεση του photoshop μου δεν θα έμοιαζαν όπως θα ήταν στο πρόγραμμα περιήγησης. Αν είχα ορίσει ένα περιθώριο 20 εικονοστοιχείων πάνω από τον τίτλο στα σχέδιά μου, αυτή η απόσταση μπορεί να έχει αλλάξει καθώς το ύψος γραμμής της επικεφαλίδας θα επηρεάσει το μέγεθος του περιθωρίου, κάτι που δεν θα συνέβαινε στο Photoshop. Θα έπρεπε τότε να ξεκινήσω τη μακρά και κουραστική διαδικασία των τρομακτικών «σχεδιαστικών ταιριάζει».
Πιστέψτε με, δεν είναι μόνο ο προγραμματιστής που φεύγει από την ιδέα ενός σχεδιαστή που κάθεται δίπλα τους να τους ζητάει να «αυξήσουν το ύψος της γραμμής αντιγραφής του σώματος κατά δύο εικονοστοιχεία» και έπειτα να έχει ο προγραμματιστής να κάνει την αλλαγή και τη δέσμευση του CSS .... Εισαγω. 'Πραγματικά, 1 εικονοστοιχείο μικρότερο' ... Εισάγετε. «Ίσως ήταν καλύτερα πώς ήταν». Αυτό το είδος της μικροαλλαγές του CSS λίγο-λίγο για να δείτε τα αποτελέσματα σε πραγματικό χρόνο μέσω του προγράμματος περιήγησης είναι χρονοβόρα και δεν ευνοεί τη δημιουργικότητα. Οι προγραμματιστές παίρνουν γρήγορο ρυθμό να ξοδεύουν την ημέρα αλλάζοντας επανειλημμένα αυτό που βλέπουν ως τις μικρότερες λεπτομέρειες που δεν θα κάνουν καμία διαφορά και οι σχεδιαστές δεν είναι σε θέση να πειραματιστούν γρήγορα και εύκολα αλλάζοντας τυπογραφίες και στυλ για εκείνες που θα καταστήσουν καλύτερα στο πρόγραμμα περιήγησης.
Για τους σχεδιαστές που έχουν κατανόηση του CSS, μπορείτε να χρησιμοποιήσετε εργαλεία όπως Firebug για να δημιουργήσετε αποτελεσματικά τα δικά σας σχέδια σχεδιασμού στο πρόγραμμα περιήγησης, σημειώνοντας όλες τις αλλαγές του CSS σε ένα έγγραφο που μπορείτε στη συνέχεια να μεταβιβάσετε σε έναν προγραμματιστή για να το εφαρμόσετε. Αυτό είναι ουσιαστικά το ίδιο με το κάθισμα με έναν προγραμματιστή και κάνει αλλαγές CSS αλλά πολύ λιγότερο κουραστικό για τον κύριο του έργου και θα επιτρέψει επίσης στον σχεδιαστή να πειραματιστεί περαιτέρω με τα μεγέθη και τα στυλ πριν πάρει μια απόφαση. Παρόλο που αυτό είναι ένα καλό εργαλείο για την επιθεώρηση και την αλλαγή των τμημάτων του HTML και του CSS, θα χάσετε τις αλλαγές που θα κάνετε μόλις ανανεωθεί το πρόγραμμα περιήγησης, κάτι που μπορεί να είναι πολύ ενοχλητικό εάν έχετε αλλάξει πολλά στοιχεία και δεν έχετε καταγράψει όλα τα προσαρμογές.
Μπορείτε να χρησιμοποιήσετε το Firediff plug-in για να αποθηκεύσετε μια καταγραφή όλων των αλλαγών που κάνετε στο Firebug, κάτι που είναι πολύ ωραίο καθώς εξοικονομείτε το γεγονός ότι πρέπει να σημειώσετε κάθε αλλαγή σε ξεχωριστό υπολογιστικό φύλλο για αργότερα. Το μεγαλύτερο πρόβλημα με αυτήν τη μέθοδο είναι όταν αρχίζετε να εισάγετε τις γραμματοσειρές Ιστού στην εξίσωση, καθώς όλες οι επιλεγμένες γραμματοσειρές πρέπει να εγκατασταθούν στο κιτ τύπων ή δεν θα εμφανιστούν στο πρόγραμμα περιήγησης. Αυτό κάνει τα πράγματα πολύ πιο δύσκολο και λιγότερο ελεύθερο να πειραματιστείτε εύκολα με διαφορετικές γραμματοσειρές, καθώς δεν μπορείτε απλά να δοκιμάσετε γρήγορα τις γραμματοσειρές.
Υπηρεσίες όπως Τύπος καθιστούν πολύ πιο εύκολο για τους σχεδιαστές να συνεργαστούν με τις γραμματοσειρές Ιστού και λίγο πολύ μου κάνει όλη μου την τυπογραφία για το web που το χρησιμοποιεί. Σας επιτρέπει να δημιουργείτε τυπογραφικά mock ups (όπως θα κάνατε και στο Photoshop) χρησιμοποιώντας την οπτική διεπαφή για να ορίσετε γραμματοσειρές, στυλ, βάρη, χρώματα, ύψος γραμμής, περιθώριο, padding και περισσότερο στην τυπογραφία σας. Το καλύτερο πράγμα για τη χρήση του Typecast είναι ότι όλα λειτουργούν μέσα στο πρόγραμμα περιήγησης, ώστε να παίρνετε αποφάσεις σχετικά με τον τύπο ακριβώς όπως θα αποδίδεται για το χρήστη. Μήπως μια συγκεκριμένη γραμματοσειρά δεν φαίνεται πολύ ζεστή στα 19 εικονοστοιχεία; Τραβήξτε μέχρι 20 με ένα πάτημα ενός κουμπιού, πίσω μέχρι 19, πριν τελικά εγκατασταθεί σε 18 pixels σε μέγεθος, όλα γίνονται σε δευτερόλεπτα και όχι ώρες που κάθεται με έναν προγραμματιστή.
Μπορείτε να χρησιμοποιήσετε τυχόν γραμματοσειρές ιστού από τις συλλογές τους με 23.000 γραμματοσειρές, συμπεριλαμβανομένων γραμματοσειρών Google, Typekit και άλλων στις συνθέσεις σας, γεγονός που καθιστά γρήγορο και εύκολο τον πειραματισμό (πρόσφατα έχουν αγοραστεί από τον Monotype που κατέχουν το Fonts.com και το Myfonts, στο δρόμο σύντομα). Το Typecast, κατά τη γνώμη μου, εισάγει μια έννοια παιχνιδιού πίσω στην τυπογραφία καθώς σας ενθαρρύνει να δοκιμάσετε παραλλαγές γραμματοσειρών, τις οποίες ίσως να μην έχετε ανακαλύψει αν δεν ήταν τόσο εύκολα διαθέσιμες και εύκολα εναλλάξιμες όπως είναι.
Ένα άλλο πολύ χρήσιμο χαρακτηριστικό του typecast είναι η δυνατότητα προβολής και επεξεργασίας του CSS του τύπου σας. Μπορείτε να προσθέσετε χρώματα και εικόνες υποβάθρου, καταστάσεις του hover ή ακόμα και μεταβάσεις απλά επεξεργάζοντας τον πίνακα CSS. Μόλις είστε ευχαριστημένοι με τη δημιουργία σας, μπορείτε εύκολα να εξαγάγετε και να αποθηκεύσετε τον κώδικα CSS, ο οποίος στη συνέχεια μπορεί να μεταφορτωθεί στον ιστότοπό σας ή να αποσταλεί σε έναν προγραμματιστή και επειδή όλα έχουν σχεδιαστεί στο πρόγραμμα περιήγησης, θα εμφανίζονται ακριβώς όπως σκοπεύετε.
Το Photoshop δεν είναι το πρότυπο της βιομηχανίας για τίποτα, και θα υπάρξουν μερικοί από εσάς που υπερεκτιμούν τη σκέψη να το εγκαταλείψουν για να σχεδιάσουν στο πρόγραμμα περιήγησης, τελικά είμαστε δημιουργικοί και όχι κωδικοποιητές. Λοιπόν, κατεβάστε την τσάντα χαρτιού, καθώς υπάρχει ακόμα ένας τρόπος για να δημιουργήσετε όμορφη τυπογραφία χρησιμοποιώντας γραμματοσειρές web στο Photoshop. Extensis έχουν δημιουργήσει ένα plug-in το οποίο μπορεί να εγκατασταθεί σε εκδόσεις Photoshop CS5 και άνω που θα σας επιτρέψουν την πρόσβαση σε όλες τις γραμματοσειρές WebINK και Google Web Fonts για δωρεάν χρήση, απευθείας μέσα στο Photoshop.
Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε οποιεσδήποτε γραμματοσειρές WebINK ή ιστοσελίδων της Google στις σχεδιαστικές σας συνθέσεις, όπως θα κάνατε με τις τυχόν γραμματοσειρές που είναι εγκατεστημένες στο σύστημά σας και θα εμφανίζουν περίπου το ίδιο μέγεθος που θα έπρεπε να φαίνεται στο πρόγραμμα περιήγησης. Η προσθήκη θα σας δώσει πρόσβαση μόνο στις γραμματοσειρές WebINK και Google web, αλλά στην πλευρά συν θα ενημερώνει αυτόματα τις νέες γραμματοσειρές καθώς προστίθενται στο WebINK και τη βιβλιοθήκη γραμματοσειρών της Google.
Ένα άλλο πολύτιμο plug-in που διευκολύνει τη μετάβαση μεταξύ των συνθέσεων του Photoshop και του συμβατού με το πρόγραμμα περιήγησης CSS είναι το δωρεάν plug-in που βασίζεται σε σύννεφο από css3ps.com . Ένας από τους κύριους λόγους που πολλοί σχεδιαστές συνεργάζονται με το Photoshop είναι ο έλεγχος που έχετε πάνω από τα στρώματα και τα στοιχεία σχήματος. Η δυνατότητα να πειραματιστείτε εύκολα και γρήγορα με τη σκιά, τη λάμψη, το χρώμα, την υφή, τις στρογγυλεμένες γωνίες και άλλα είναι σχεδόν η δεύτερη φύση στα περισσότερα και κάτι που ακόμη και έμπειροι σχεδιαστές προσπαθούν να αναπαράγουν ακριβώς στο πρόγραμμα περιήγησης. Για αυτούς, αυτό το plug-in είναι τέλειο καθώς σας επιτρέπει να δημιουργήσετε τις συνθέσεις σας με τον τρόπο που γνωρίζετε καλύτερα, αλλά στη συνέχεια, ας μετατρέψετε εύκολα τα στυλ του στυλ σας σε συμβατό με το πρόγραμμα περιήγησης CSS3. Αυτή η μέθοδος είναι ιδανική για το σχεδιασμό κουμπιών, πλοήγησης ή οτιδήποτε άλλο μπορεί να έχει σχεδιάσει ένα σχήμα για.
Ίσως εξακολουθεί να υπάρχει ένας ρόλος για το Photoshop ως εργαλείο για το σχεδιασμό layouts web, αλλά όσον αφορά το σχεδιασμό τυπογραφίας για το web, εφαρμογές όπως το Firebug και το Typecast το έχουν ξεπεράσει. Ο χρόνος που απαιτείται για την ενημέρωση των στατικών συνθέσεων απλά δεν μπορεί να συγκριθεί με την ταχύτητα και την ευκολία που μπορείτε να κάνετε αλλαγές στο πρόγραμμα περιήγησης. Για όσους απλά δεν μπορούν να διασκεδάσουν την ιδέα του σχεδιασμού στο πρόγραμμα περιήγησης, οι παραπάνω προσθήκες θα πρέπει τουλάχιστον να δώσουν στο Photoshop την ώθηση που χρειάζεται για να παραμείνει σχετική και να διευκολύνει τη μετάβαση.
Χρησιμοποιείτε το Photoshop για να σχεδιάσετε ιστότοπους; Το Photoshop πηγαίνει το δρόμο του Flash; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, χρησιμοποιεί νεκρή εικόνα μέσω Shutterstock.