Πώς να κάνω μια Διάταξη Website Χρησιμοποιώντας Photoshop

Η οικοδόμηση ενός ιστοσελίδα διάταξη είναι ένα δύσκολο έργο που αναλαμβάνει σχεδιαστές γραφικών χρόνια να κυριαρχήσει . Τόσο για τους έμπειρους και άπειρους , Photoshop της Adobe προσφέρει μια σειρά από εργαλεία που βοηθούν στην διαδικασία της δημιουργίας μιας ιστοσελίδας διάταξης . Πριν ξεκινήσετε, θα πρέπει να έχετε μια καλή ιδέα για το πώς θέλετε τον ιστοχώρο σας για να δείτε . Σχεδιάστε μερικά δείγματα σε χαρτί πριν από την έναρξη έτσι ώστε να έχετε ήδη ένα σταθερό σημείο εκκίνησης . Ξεκινώντας με ένα λογότυπο που έχουν ήδη σχεδιαστεί , θα πρέπει επίσης να επιταχύνει τη δημιουργία διάταξή σας . Οδηγίες
Η

1 Δημιουργήστε ένα νέο αρχείο στο Photoshop κάνοντας κλικ στο μενού "Αρχείο" και επιλέγοντας " Νέο ". Το μέγεθος της εικόνας σας θα καθορίσει το τελικό μέγεθος της ιστοσελίδας σας , έτσι ώστε να επιλέξουν ένα πλάτος που είναι κατάλληλη για τις περισσότερες οθόνες . Ένα πλάτος 750 pixels θα διασφαλίσει ότι η ιστοσελίδα σας είναι ορατό από οποιονδήποτε χρησιμοποιεί μια ανάλυση οθόνης ίση ή μεγαλύτερη από 800 -by - 600 . Εισάγετε μια τιμή για το ύψος των περίπου 500 pixels . Αυτό μπορεί να ρυθμιστεί αργότερα. Πατήστε το πλήκτρο " OK". 2

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

Δημιουργήστε μια γραμμή πλοήγησης στο πλαίσιο κεφαλίδα σας που είναι περίπου 50 pixels ύψος . Επιλέξτε το "Τύπος κειμένου" εργαλείο από τη γραμμή εργαλείων στο αριστερό , και κάντε κλικ στην εικόνα για να πληκτρολογήσετε . Πληκτρολογήστε τα ονόματα των διαφόρων κύριες σελίδες του site σας ( όπως "Home ", "About Us ", " Επικοινωνία ", " Προϊόντα ", κλπ. ) .
Η 4

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

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

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

συνεχίσουν να εργάζονται σε όλες τις πτυχές της ιστοσελίδας διάταξης μέχρι να είστε ικανοποιημένοι με την εμφάνιση της . Αποθηκεύστε το αρχείο κάνοντας κλικ στο μενού "Αρχείο" και επιλέγοντας "Αποθήκευση". Αποθηκεύστε την εικόνα σε μορφή Adobe Photoshop ( * . Psd ), έτσι ώστε να μπορείτε αργότερα να επιστρέψετε σε αυτό και να προβούν σε πρόσθετες αλλαγές χωρίς καμία απώλεια στην ποιότητα .
8

Επιλέξτε το " Φέτα " εργαλείο από τη γραμμή εργαλείων για αριστερά , και σύρετε επιλογές γύρω από τις διάφορες περιοχές της εικόνας σας . Εάν χρησιμοποιείτε μόνο μια κεφαλίδα , στην περιοχή κειμένου και υποσέλιδου , ​​κάνει τρεις επιλογές γύρω από αυτούς τους τρεις τομείς . Εάν περιλαμβάνονται πλαϊνές μπάρες , δημιουργούν πρόσθετες φέτες γύρω από τις περιοχές αυτές . Σύροντας ένα πλαίσιο επιλογής γύρω από μια περιοχή με το εργαλείο slice που επιλέγεται είναι το μόνο που χρειάζεται για να δημιουργηθεί μια φέτα .
Η

9 Κάντε κλικ στο "Αρχείο" και επιλέξτε "Αποθήκευση για το Web . " Photoshop θα ζητήσει τα ονόματα αρχείων για κάθε μία από τις φέτες που δημιουργήσατε , και θα δημιουργήσει μια ξεχωριστή εικόνα για κάθε μία από τις φέτες . Οι φέτες μπορούν στη συνέχεια να επανασυνδεθούν για layout της ιστοσελίδας σας χρησιμοποιώντας ένα πρόγραμμα σχεδίασης ιστοσελίδα, όπως το FrontPage ή Dreamweaver , ή με το χέρι χρησιμοποιώντας κώδικα HTML .
Η
εικόνων