Πώς να δημιουργήσετε ένα πρότυπο Web στο Photoshop

Ένα πρότυπο Web είναι μια βασική διάταξη σελίδας Web --- ή εμπορευματοκιβώτιο --- μπορείτε να χρησιμοποιήσετε ξανά για να δημιουργήσετε πολλές σελίδες . Το πρότυπο παρέχει τη βασική δομή για την ιστοσελίδα σας , επιτρέποντάς σας να διατηρήσει μια συνεπή θέμα και τη διάταξη σε όλη την ιστοσελίδα χωρίς να χρειάζεται να αναδημιουργήσει κάθε σελίδα . Ενώ το Photoshop δεν είναι τεχνικά ένα πρόγραμμα σχεδιασμού ιστοσελίδων , μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε πρότυπα Web, " τεμαχισμό " το PSD εικόνα σε διάφορα τμήματα και στη συνέχεια την εξαγωγή του PSD σε μια σελίδα HTML στο Web . Μπορείτε έπειτα να ανοίξετε το αρχείο προτύπου HTML στο Dreamweaver ή κάποιο άλλο πρόγραμμα σχεδίασης Web και να το χρησιμοποιήσετε για να δημιουργήσετε τις σελίδες για την ιστοσελίδα σας . Τα πράγματα που θα χρειαστείτε
Adobe Photoshop CS3 ή νεότερη έκδοση
Η Εμφάνιση Περισσότερες οδηγίες

1

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

Δημιουργήστε το banner για την ιστοσελίδα σας . Το πανό , βέβαια , είναι το γραφικό ή την εικόνα που εμφανίζει πέρα από την κορυφή της σελίδας . Είναι συνήθως αποτελείται από ένα λογότυπο της εταιρείας και κάποια άλλα γραφικά που σχετίζονται με ένα προϊόν ή υπηρεσία . Μπορείτε είτε να εισάγετε μια υπάρχουσα εικόνα ή να χρησιμοποιήσετε το χρώμα και το κείμενο εργαλεία του Photoshop για να δημιουργήσετε το banner.
Εικόνων 3

Δημιουργήστε τα κουμπιά για την ιστοσελίδα σας . Αυτά θα γίνονται συνδέσεις , ή " hot spots ", που λαμβάνουν στους χρήστες του site σε διαφορετικές σελίδες εντός του τόπου . Είτε για την εισαγωγή υπάρχουσες εικόνες κουμπί και να τα τοποθετήσετε όπου θέλετε στο πρότυπο ή να χρησιμοποιήσετε το χρώμα και το κείμενο εργαλεία του Photoshop για να δημιουργήσετε τα κουμπιά .
Η

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

Σύρετε το εργαλείο Κόβουμε γύρω από το πρώτο κουμπί ή την περιοχή στο πρότυπο όπου θέλετε να δημιουργήσετε μια σύνδεση . Αυτό δημιουργεί ένα " φέτα " κουτί γύρω από το αντικείμενο . Photoshop τοποθετεί αυτό το πλαίσιο σε ένα κελί πίνακα που θα γίνει ένα ξεχωριστό πίνακα HTML όταν εξάγετε το έγγραφο σε HTML .
Η

6 Κάντε δεξί κλικ στο νέο slice και επιλέξτε " Επεξεργασία επιλογών φέτα " από τη μύγα - από το μενού . Αυτό ανοίγει το παράθυρο διαλόγου Επιλογές φέτα .
Η

7 Πληκτρολογήστε τη διεύθυνση URL που θέλετε αυτό το κουμπί για να συνδεθείτε στο πεδίο "URL " . Μπορείτε επίσης να εισάγετε άλλα στοιχεία για το κουμπί , όπως η σελίδα του προγράμματος περιήγησης στόχο , και εναλλακτικές ετικέτες . Εάν θέλετε να επεξεργαστείτε το μέγεθος και τη θέση της φέτας , το κάνουν με τις επιλογές στην ενότητα "Διαστάσεις" του πλαισίου διαλόγου . Κάντε κλικ στο " OK".
8

Επαναλάβετε τα προηγούμενα βήματα για τη δημιουργία φέτες και επιλογές επεξεργασίας φέτα για κάθε κουμπί στο πρότυπο .
Η 9

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

10 Κάντε κλικ στο κουμπί "Αποθήκευση " . Ονομάσετε και να αποθηκεύσετε το αρχείο HTML . Έχετε δημιουργήσει με επιτυχία το πρότυπο Web σας . Τώρα μπορείτε να το ανοίξετε σε ένα πρόγραμμα επεξεργασίας ιστοσελίδων και προσθέστε το περιεχόμενό σας .
Η
εικόνων