Tutorial: Πώς να σχεδιάσετε μια ιστοσελίδα με το Adobe Photoshop

Υπάρχει μια τεράστια ποικιλία εργαλείων για το σχεδιασμό ιστοσελίδων και την εργασία με έναν εντελώς απλό και λειτουργικό τρόπο χωρίς να εισάγετε ή να αγγίζετε κώδικα. Είναι αναρίθμητα, προτείνονται από αιτήσεις (Adobe Dreamweaver είναι ένα παράδειγμα) ή απευθείας από διαδικτυακές πλατφόρμες όπως το Wix. Ωστόσο, για έναν σχεδιαστή Ιστού, η γνώση των μη αυτόματων διαδικασιών είναι απαραίτητη. Τα HTML5 και CSS είναι οι θεμελιώδεις πυλώνες για τη διάταξη των ιστότοπων και των σελίδων προορισμού.

Ωστόσο, πιο συχνά από ό, τι θα περίμενε κανείς, θα πρέπει να στραφείτε σε εφαρμογές όπως το Indesign ή το Adobe Photoshop για να συμπληρώσετε τη δουλειά σας και να τους δώσετε τέλειο φινίρισμα Σήμερα θα δούμε σε αυτό το εκτεταμένο σεμινάριο, πώς μπορούμε να σχεδιάσουμε μια ιστοσελίδα χρησιμοποιώντας το Adobe Photoshop. Σε αυτό το πρώτο μέρος θα παραμείνουμε στο έργο που θα αναπτυχθεί από το Photoshop, αν και σε μελλοντικές δόσεις θα δούμε πώς μπορούμε να εφαρμόσουμε αυτό το έργο ήδη απευθείας σε κώδικα HTML για να το κάνουμε λειτουργικό.

Ξεκινώντας με το σχεδιασμό του wireframe μας

Αρχικά με τη διάταξη και το σχεδιασμό μιας ιστοσελίδας, είναι εξαιρετικά σημαντικό να ξεκινήσουμε καθορίζοντας ποια θα είναι τα βασικά στοιχεία, αυτός είναι ο σκελετός. Αυτή η δομή θα χρησιμεύσει ως υποστήριξη για τη συγκράτηση όλου του περιεχομένου (είτε κειμένου είτε πολυμέσων). Καθορίζοντας κάθε μία από τις ενότητες που αποτελούν τη σελίδα μας, μπορούμε να τις επεξεργαστούμε με απόλυτη ακρίβεια και να παρέχουμε μια οπτική σχεδίαση όσο το δυνατόν ακριβέστερη.

Είναι πολύ σημαντικό να λάβουμε υπόψη τις διαστάσεις που θα έχει ο ιστότοπός μας, εάν θα έχει σε κουτί ή σε πλήρες πλάτος. Μια ιστοσελίδα με κουτιά θα βρίσκεται μέσα σε ένα μικρό δοχείο και επομένως θα εμφανίζεται ένας χώρος γύρω από αυτό. Αντίθετα, ένας πλήρης ιστός θα καταλάβει ολόκληρη την οθόνη της συσκευής που αναπαράγει τη σελίδα. Η επιλογή μεταξύ ενός τρόπου ή μιας άλλης απάντησης σε απλώς στυλιστικές ερωτήσεις και θα εξαρτηθεί επίσης από τις ανάγκες του έργου στο οποίο εργαζόμαστε. Θα δουλέψουμε σε αυτό το παράδειγμα με τη λειτουργία boxed, οπότε δεν θα καταλάβει όλο το χώρο που παρέχεται από το πρόγραμμα περιήγησης.

Για να δημιουργήσουμε το wireframe μας, το πρώτο πράγμα που πρέπει να κάνουμε είναι να εισαγάγουμε την εφαρμογή Adobe Photoshop και να συμπεριλάβουμε τις διαστάσεις που θέλουμε να έχει η σελίδα μας. Σε αυτό το παράδειγμα, η σελίδα μας θα έχει πλάτος 1280 pixel. Ωστόσο, το ζήτημα μεγέθους μπορεί να διαφέρει ανάλογα με τον τελικό προορισμό ή τη συσκευή στην οποία θέλουμε να αναπαραγάγουμε τη σελίδα μας. Δεν υπάρχει αμφιβολία ότι για να είναι ένας σχεδιασμός Ιστού λειτουργικός και αποτελεσματικός, πρέπει να είναι ανταποκρίνονται και πρέπει να προσαρμοστεί σε όλες τις συσκευές της αγοράς. Ωστόσο, σε αυτήν την περίπτωση πρόκειται να εργαστούμε για να δημιουργήσουμε ένα πρωτότυπο που πρόκειται να αναπαραγάγουμε σε επιτραπέζιο υπολογιστή. Ακόμα κι έτσι, το αποκριτικό ζήτημα που θα αντιμετωπίσουμε αργότερα, προς το παρόν, εδώ είναι μια ιεραρχία διαστάσεων οθόνης για να εργαστεί σε αυτό το παράδειγμα. Λάβετε υπόψη ότι σε αυτήν την περίπτωση θα κάνουμε μια διάταξη της σελίδας προορισμού στο Adobe Photoshop και στη συνέχεια θα την μεταφέρουμε σε HTML5 ΚΑΙ CSS3. Ο στόχος αυτής της μικρής πρακτικής είναι να μετατρέψει ένα σχέδιο που δημιουργήθηκε στο Photoshop σε ένα χρησιμοποιήσιμο και διαδραστικό σχεδιασμό ιστοσελίδων που ανταποκρίνεται στις κινήσεις του χρήστη.

Μετρήσεις για κινητά τηλέφωνα

iPhone 4 και 4S: 320 x 480

iPhone 5 και 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Μετρήσεις δισκίων

iPad όλα τα μοντέλα καθώς και iPad Mini: 1024 x 768

Galaxy Tab 2 και 3 (7.0 ίντσες): 600 x 1024

Galaxy Tab 2 και 3 (10.1 ίντσες): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Μετρήσεις για επιτραπέζιους υπολογιστές

Μικρές οθόνες (χρησιμοποιούνται για παράδειγμα σε netbook): 1024 x 600

Μεσαίες οθόνες: 1280 x 720/1280 x 800

Μεγάλες οθόνες: πλάτος μεγαλύτερο από 1400 pixel, π.χ. 1400 x 900 ή 1600 x 1200.

Για να ξεκινήσετε να διανέμετε τα στοιχεία και να αντιστοιχίζετε ενότητες στο mockup του διαδικτύου μας, είναι πολύ σημαντικό να λάβουμε υπόψη τις αναλογίες για να εξασφαλίσουμε ένα ευανάγνωστο και μελωδικό φινίρισμα. Θα είναι σημαντικό να χρησιμοποιείτε τις επιλογές κανόνων και οδηγών που μπορείτε να βρείτε στο επάνω μενού Προβολή. Για να εργαστούμε με αναλογικό και ακριβή τρόπο, είναι καλύτερο να εργαζόμαστε από ποσοστά. Θα κάνουμε κλικ στο μενού προβολής και στη συνέχεια στην επιλογή «Νέος οδηγός» για να διαλέξουμε τον τρόπο του τμήματος. Σε αυτήν την περίπτωση θα κάνουμε τέσσερα κατακόρυφα τμήματα στο 25% και θα τα πάρουμε ως αναφορά για να τοποθετήσουμε τις εικόνες μας στο υποσέλιδο και την εικόνα του λογότυπου μας στην κεφαλίδα.

Υπάρχει ένας κωδικός για τον καθορισμό κάθε περιοχής που θα καταλάβει μοντέλο και τη λειτουργία που θα έχει καθένας από αυτούς. Για παράδειγμα, για να υποδείξουμε την περιοχή που θα καταλάβει μια εικόνα, θα δημιουργήσουμε ορθογώνια με ένα είδος σταυρού. Για να δείξουμε ότι θέλουμε να συμπεριλάβουμε βίντεο σε μια συγκεκριμένη περιοχή, θα συμπεριλάβουμε το σύμβολο αναπαραγωγής στο κοντέινερ μας. Σε αυτό το πρώτο παράδειγμα πρόκειται να δουλέψουμε μόνο με εικόνες, στην πάνω λήψη μπορείτε να δείτε την περιοχή που logo από τον ιστότοπό μας.

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

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

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

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

Σε αυτήν την περίπτωση, ο σχεδιασμός της ιστοσελίδας μας θα είναι εξαιρετικά απλός. Θα χρησιμοποιήσουμε το κανόνες σχεδιασμού υλικών, δεδομένου ότι πρόκειται να χρησιμοποιήσουμε το λογότυπο Google για να δείξουμε αυτήν την πρακτική. Πρέπει να διευκρινίσω ότι ο σκοπός αυτού του σεμιναρίου είναι να απεικονίσει τις τεχνικές γνώσεις, επομένως το αισθητικό αποτέλεσμα σε αυτήν την περίπτωση είναι άσχετο. Όπως μπορείτε να δείτε, σιγά-σιγά γεμίζουμε το χώρο με όλους τους τομείς που έχουμε καθορίσει στο παρελθόν στο σχέδιό μας. Ωστόσο, κάναμε μια μικρή τροποποίηση την τελευταία στιγμή. Όπως ίσως έχετε παρατηρήσει, μειώσαμε σημαντικά το μέγεθος του λογοτύπου μας και συμπεριλάβαμε μια διαχωριστική γραμμή στην κάτω περιοχή κεφαλίδας που συνδέεται τέλεια με το πάνω μενού. Σε αυτήν την περίπτωση έχουμε χρησιμοποιήσει κουμπιά και υλικά από μια τράπεζα πόρων. Ως σχεδιαστές μπορούμε να τους σχεδιάσουμε μόνοι μας (ειδικά αυτή η επιλογή συνιστάται αν θέλουμε να παρουσιάζει πολύ παρόμοιο τονωτικό με αυτό που παρουσιάζεται από την εικόνα της μάρκας ή το λογότυπο).

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

Οι δομές 1, 2, 3 και 4 θα είναι μέρος του φόντο της ιστοσελίδας μας, οπότε στην πραγματικότητα δεν θα είναι απαραίτητο να εξάγουμε ως τέτοιο από το Adobe Photoshop, αν και μπορούμε να το κάνουμε, δεν είναι απαραίτητο. Οταν πρόκειται για Επίπεδα χρώματα (Ένα από τα βασικά χαρακτηριστικά του επίπεδου σχεδιασμού και του σχεδιασμού υλικού, μπορούν να εφαρμοστούν τέλεια μέσω κώδικα χρησιμοποιώντας ένα φύλλο στυλ CSS). Ωστόσο, τα υπόλοιπα στοιχεία πρέπει να αποθηκευτούν για μελλοντική εισαγωγή στον κώδικα HTML. Σε αυτό το μικρό διάγραμμα έχουμε επίσης αναπαραγάγει τις περιοχές που ανήκουν στο φόντο της σελίδας, έτσι ώστε να έχουμε μια σαφή ιδέα για το ποια θα είναι η τελική εμφάνιση του ιστότοπού μας.

Όπως θα καταλάβετε, η αίσθηση της δημιουργίας αυτού του σχήματος στο Adobe Photoshop είναι να αποκτήσετε την πραγματική διάσταση κάθε στοιχείου και να αποσαφηνίσετε τη διάταξη και τη δομή κάθε στοιχείου. Φυσικά, το περιεχόμενο κειμένου δεν έχει θέση σε αυτήν τη φάση της διαδικασίας από τότε που πρέπει να είναι παρέχονται από τον επεξεργαστή κώδικα. Πρέπει επίσης να επισημάνουμε ότι σε αυτήν την πρακτική, πρόκειται να εργαστούμε με κουμπιά και στατικά στοιχεία, αν και γενικά αυτά εφαρμόζονται συνήθως από πλαίσια όπως το Bootstrap ή απευθείας από το Jquery.

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

Είναι σημαντικό να μάθουμε να αποθηκεύουμε οποιοδήποτε στοιχείο ανεξάρτητα για να τα αποθηκεύουμε με τις διαστάσεις που έχουν και με ακριβή τρόπο. Οποιοδήποτε σφάλμα, όσο ελάχιστο, μπορεί να επηρεάσει όλα τα στοιχεία που αποτελούν μέρος της ιστοσελίδας σας. Λάβετε υπόψη ότι θα σχετίζονται μεταξύ τους και πρέπει να έχουν τέλειες διαστάσεις ώστε να μπορούν να εισαχθούν από HTML στον τελικό ιστό. Σε αυτήν την περίπτωση, θα πρέπει να κόψουμε και να αποθηκεύσουμε ανεξάρτητα τα ακόλουθα στοιχεία:

• Το λογότυπό μας.
• Όλα τα κουμπιά (αυτά που αποτελούν μέρος του κύριου μενού και τα υπόλοιπα).
• Όλες οι εικόνες.

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

• Αρχικά, πρέπει να μεταβείτε στο φάκελο όπου βρίσκεται το αρχείο PSD που περιέχει το wireframe μας και να το αντιγράψετε όσες φορές τα στοιχεία πρόκειται να εξαγάγετε. Σε αυτήν την περίπτωση έχουμε δημιουργήσει 12 αντίγραφα από το πρωτότυπο και τα έχουμε αποθηκεύσει στον ίδιο φάκελο. Στη συνέχεια, θα μετονομάσετε καθένα από τα αντίγραφα και θα αντιστοιχίσετε σε καθένα από αυτά το όνομα του στοιχείου που περιέχει. Τα 12 αντίγραφά μας θα μετονομαστούν: Λογότυπο, κουμπί μενού 1, κουμπί μενού 2, γραμμή αναζήτησης, επάνω κουμπί 1, επάνω κουμπί 2, επάνω κουμπί 3 και επάνω κουμπί 4. Τα υπόλοιπα τέσσερα θα μετονομαστούν ως: Εικόνα 1, Εικόνα 2, Εικόνα 3 και εικόνα 4.
• Μόλις γίνει αυτό, θα ανοίξουμε το αρχείο με το όνομα του λογότυπου.
• Θα μεταβούμε στην παλέτα επιπέδων μας και θα εντοπίσουμε το επίπεδο που περιέχει το λογότυπό μας. Τότε θα πατήσουμε Ctrl / Cmd ενώ κάνουμε κλικ στη μικρογραφία του εν λόγω επιπέδου. Με αυτόν τον τρόπο, το λογότυπο θα έχει επιλεγεί αυτόματα.
• Το επόμενο βήμα θα είναι να πούμε στο Photoshop ότι θέλουμε να κόψει αυτό το λογότυπο με έναν ακριβή τρόπο. Για αυτό, θα πρέπει να πραγματοποιήσουμε μια κλήση στο εργαλείο περικοπής από το πλήκτρο ή την εντολή C.
• Μόλις το κάνουμε αυτό, θα κάνουμε κλικ στο κουμπί Enter για να επιβεβαιώσουμε την περικοπή.
• Τώρα θα πάμε στο πάνω μενού Αρχείο για να κάνουμε κλικ στο save how. Θα επιλέξουμε το όνομα, το οποίο σε αυτήν την περίπτωση θα είναι «Λογότυπο» και θα του εκχωρήσουμε μια μορφή PNG, επειδή είναι το αρχείο που προσφέρει την υψηλότερη ποιότητα στον Ιστό.
• Θα επαναλάβουμε τη διαδικασία με όλα τα αντίγραφα και τα στοιχεία. Όταν τελειώσετε, βεβαιωθείτε ότι τα υπόλοιπα στρώματα στην παλέτα μας είναι αόρατος ή εξαλειφθεί. Με αυτόν τον τρόπο μπορούμε να αποθηκεύσουμε κάθε στοιχείο με διαφανές φόντο.

Σε αυτήν την περίπτωση επιλέγουμε το κουμπί μενού 2 από την παλέτα επιπέδων. Μπορείτε να δείτε στο στιγμιότυπο οθόνης πώς επιλέχθηκαν αυτόματα τα όρια του κουμπιού μας.

Μόλις επιλέξουμε το εργαλείο περικοπής από το πλήκτρο C, ο καμβάς μας μειώνεται μόνο στις διαστάσεις του κουμπιού μας.

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

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

περίληψη:

1. Σχεδιάστε το δομή του ιστότοπου, δίνοντας ιδιαίτερη προσοχή στο περιεχόμενο που θέλετε να μεταδώσετε και στις ενότητες που πρέπει να δημιουργήσετε στον ιστότοπό σας.
2. Εργαστείτε στον σκελετό σας ή wireframe από το Adobe Photoshop υποδεικνύοντας σε ποιες περιοχές θα εμφανίζονται τα περιεχόμενα και η μορφή τους.
3. Βασιστείτε στα μέτρα και τις μάρκες που έχετε αναπτύξει προηγουμένως σχέδιο την επιφάνεια του ιστού. Περιλαμβάνει όλα τα στοιχεία (και αιωρούμενα και σταθερά). Μην ξεχάσετε να συμπεριλάβετε τα αντίστοιχα κουμπιά, το λογότυπο και τις εικόνες.
4. Κόψτε όλα τα στοιχεία που αποτελούν μέρος του έργου ένα προς ένα. Βεβαιωθείτε ότι έχουν τα σωστά μέτρα και ότι δεν θα σας προκαλέσουν προβλήματα αργότερα.
5. Αποθηκεύστε όλα τα στοιχεία σε μορφή PNG στο φάκελο εικόνων μέσα στο φάκελο έργου HTML.
6. Λάβετε υπόψη ότι αυτό το έργο θα έχει έξοδο στο παράθυρο ιστού, οπότε είναι πολύ σημαντικό να λάβετε υπόψη τη λειτουργία χρώματος και να εφαρμόσετε RGB.
7. Εμπνευστείτε από άλλες ιστοσελίδες που θαυμάζετε πριν πάτε στη δουλειά και μην ξεχάσετε να το συζητήσετε με τα μέλη της ομάδας σας. Σε περίπτωση που πρόκειται για έργο για έναν πελάτη, προσπαθήστε να παραμείνετε στο ενημέρωση όσο πιο μακρυά γίνεται.