Tutorial για το πώς να δημιουργήσετε μια ιστοσελίδα με το Adobe Photoshop

Photoshop Ενώ έχει σχεδιαστεί κυρίως για να επεξεργαστείτε και να βελτιώσετε τις φωτογραφίες και να δημιουργήσετε γραφικά , μπορείτε να χρησιμοποιήσετε το " Tool φέτα " του προγράμματος και "Αποθήκευση για web & συσκευές " επιλογές για τη δημιουργία ιστοσελίδων από σας PSD αρχεία εικόνας . Χρησιμοποιήστε το εργαλείο Κόβουμε να μειώσει ( ή « φέτα » ), το PSD σε τμήματα . Κάθε φέτα γίνεται ένα ξεχωριστό στοιχείο ιστού , όπως ένα κουμπί ή πεδίο κειμένου. Photoshop τοποθετεί κάθε φέτα σε δικό του πίνακα του HTML . Μπορείτε να προσθέσετε υπερ-συνδέσεις ή άλλες ετικέτες HTML σε διάφορες τομές και την εξαγωγή του PSD σε μια σελίδα HTML . Τα πράγματα που θα χρειαστείτε
Adobe Photoshop CS3 ή νεότερη έκδοση
Η Εμφάνιση Περισσότερες οδηγίες
Δημιουργώντας μια ιστοσελίδα στο Photoshop

1

Ξεκινήστε μια νέα PSD εικόνα στο Photoshop με τις διαστάσεις που θέλετε για την ιστοσελίδα σας , όπως αυτό : Κάντε κλικ στο " Αρχείο" στη γραμμή μενού και επιλέξτε "New " για να εμφανιστεί το παράθυρο διαλόγου New . Πληκτρολογήστε το πλάτος της σελίδας ( σε pixels ) στο πεδίο " πλάτος " και το ύψος ( σε pixels ) στο "ύψος " πεδίο . 2

Τύπος " 96" στην " Ανάλυση " και κάντε κλικ "OK". Αυτό δημιουργεί ένα κενό καμβά για την ιστοσελίδα σας .
Εικόνων 3

Δημιουργήστε τα γραφικά banner και τα κουμπιά πέρα από την κορυφή της σελίδας . Μπορείτε να εισαγάγετε τις υπάρχουσες εικόνες και να τα τοποθετήσετε όπου θέλετε ή να χρησιμοποιήσετε γραφικά Photoshop και εργαλεία κειμένου για να δημιουργήσετε και να σχεδιάσει το banner.
Η

4 Επιλέξτε το "Slice Tool " ( πέμπτη κουμπί από το πάνω στο Toolbox ) . Αν το εργαλείο Κόβουμε δεν εμφανίζεται αυτή τη στιγμή , κάντε κλικ και κρατήστε πατημένο το κουμπί και επιλέξτε " Tool φέτα " από το fly- out .
5

Σύρετε το δείκτη του ποντικιού γύρω από το πρώτο κουμπί ή περιοχή στο banner, όπου θέλετε να δημιουργήσετε ένα σύνδεσμο . Το Photoshop δημιουργεί ένα κουτί , ή « φέτα », γύρω από το αντικείμενο και το τοποθετεί σε έναν πίνακα . Όταν εξάγετε τη σελίδα , φέτες σας εμφανίζει ως ξεχωριστά αντικείμενα σε επιμέρους πίνακες HTML .
Η

6 Κάντε δεξί κλικ στο κομμάτι και επιλέξτε " Επεξεργασία επιλογών φέτα " από το μενού fly -out για να ανοίξετε τις επιλογές φέτα παράθυρο διαλόγου . Χρησιμοποιήστε αυτό το παράθυρο διαλόγου για να καθορίσετε τις ιδιότητες του κουμπιού σας . Για παράδειγμα , πληκτρολογήστε τη σύνδεση URL στο πεδίο "URL " . Μπείτε στη σελίδα στόχου του προγράμματος περιήγησης , εναλλακτικές ετικέτες , και ούτω καθεξής . Κάντε κλικ στο " OK".
Η

7 Επαναλάβετε αυτά τα βήματα για τη δημιουργία κουμπιά και επιλογές επεξεργασίας φέτα για κάθε περιοχή που θέλετε να κάνετε κλικ .
8

Χρησιμοποιήστε το εργαλείο Κόβουμε να καθορίσουν μια περιοχή στη σελίδα όπου θέλετε να τοποθετήσετε ένα πλαίσιο κειμένου . Κάντε δεξί κλικ στο κομμάτι και επιλέξτε " Επεξεργασία επιλογών φέτα " από το μενού fly -out .
Η

9 Κάντε κλικ στο "Slice τύπου " drop-down και επιλέξτε " No Image . " Το « κείμενο που εμφανίζεται στο Κύτταρο» πεδίο εμφανίζεται . Μπορείτε είτε να πληκτρολογήσετε το κείμενό σας σε αυτόν τον τομέα ή να το αντιγράψετε και να επικολλήσετε από έναν επεξεργαστή κειμένου . Όταν τελειώσετε , κάντε κλικ στο « OK ».
Η 10

Κάντε κλικ στο "Slice τύπου " drop-down και επιλέξτε " No Image . " Το " κείμενο που εμφανίζεται στο Κύτταρο» πεδίο εμφανίζεται . Μπορείτε είτε να πληκτρολογήσετε . . το κείμενό σας σε αυτόν τον τομέα ή να το αντιγράψετε και να επικολλήσετε από έναν επεξεργαστή κειμένου Όταν τελειώσετε , κάντε κλικ στο " OK "

Σημείωση : το πεδίο αυτό υποστηρίζει τις περισσότερες ετικέτες HTML . Για παράδειγμα , για να κάνουν μερικά από τα πλάγια γραφή κειμένου , τοποθετήστε απλά το κείμενο μεταξύ των " το κείμενό σας " ετικέτες . Χρησιμοποιήστε "

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

Σημειώστε, επίσης, ότι το κείμενο σε αυτόν τον πίνακα δεν εμφανίζεται στο εσωτερικό Photoshop --- δεν μπορείτε να το δείτε μέχρι να εξάγετε τη σελίδα .
Η 11

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

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

13 Κάντε κλικ στο κουμπί "Αποθήκευση" για το όνομα και την εξαγωγή της ιστοσελίδας.
Η

Η