Πώς να σχεδιάσει μια ιστοσελίδα στο Photoshop για το Dreamweaver

Photoshop είναι ένα μεγάλο εργαλείο για όσους θέλουν να πάρουν μια οπτική προσέγγιση στο Web design ή που είναι εκφοβίζονται από την ιδέα της που ασχολούνται με κώδικα HTML . Έχει όλα τα εργαλεία που χρειάζεστε για να ενσωματώσουν τις εικόνες , το κείμενο και τα γραφικά σε μια διάταξη σελίδας Web , και όλα όσα χρειάζονται για τη βελτιστοποίηση αυτών των στοιχείων για το Web , και το Adobe Dreamweaver ειδικότερα. Τα πράγματα που θα χρειαστείτε
Υπολογιστών
Adobe Photoshop λογισμικό (κατά προτίμηση CS3 ή νεότερη έκδοση) Στοκ Εικόνες και περιεχομένου για μια ιστοσελίδα ( ή εικονική περιεχόμενο)
Η Εμφάνιση Περισσότερες οδηγίες
Αρχική Ρύθμιση
Η 1

ξεκινήσει Photoshop και επιλέξτε Αρχείο > Νέα από το μενού της εφαρμογής . Κάντε κλικ στο Preset drop-down μενού και επιλέξτε Ιστός . Ρυθμίστε το μέγεθος drop-down σε ένα στάνταρ μέγεθος Web που θα θέλατε σελίδα σας να είναι . 2

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

Επιλέξτε το Marquee Tool Ορθογώνια από τον πίνακα εργαλείων στα αριστερά του καμβά σας . Ρυθμίστε το drop-down μενού Style για Σταθερό μέγεθος στον πίνακα Επιλογές εργαλείου πάνω από καμβά σας και να ορίσετε το πλάτος ίσο με το πλάτος της σελίδας που δημιουργήσατε στο Βήμα 1 . Το ύψος μπορεί να είναι ψηλός ή κοντός , όπως θα θέλατε το header εικόνα να εμφανίζεται στην ιστοσελίδα σας .
Η

4 Επιλέξτε το εργαλείο Μετακίνηση από τον πίνακα εργαλείων και να μετακινήσετε το ορθογώνιο πάνω από την περιοχή της εικόνας θέλετε ως εικόνα κεφαλίδα σας . Επιλέξτε Εικόνα > Περικοπή από το μενού της εφαρμογής .
5

Επιλέξτε Επεξεργασία > Αντιγραφή για να αντιγράψετε την περικομμένη εικόνα κεφαλίδας . Επιστρέψτε στην καρτέλα ή ένα παράθυρο που περιέχει ιστοσελίδας καμβά σας . Επιλέξτε Επεξεργασία > Επικόλληση για να επικολλήσετε την κεφαλίδα στη σελίδα Web . Χρησιμοποιώντας το εργαλείο Move , μετακινήσετε την εικόνα κεφαλίδας , έτσι ώστε επάνω γωνίες του συμφωνούν με τις επάνω γωνίες της ιστοσελίδας σας .
Εικόνων Σχεδιάζοντας σελίδα σας και Δημιουργώντας Slices
Η 6

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

Λάβετε υπόψη τη θεμελιώδη ιδέα των πινάκων στην ιστοσελίδα του σχεδιασμού , όταν τον έξω τη σελίδα σας στο Photoshop .
8

Επιλέξτε Προβολή> Προσκόλληση από το μενού της εφαρμογής και επιλέξτε το εργαλείο φέτα , φωλιασμένα κάτω από το εργαλείο Crop σε ο πίνακας Tools . Κάντε κλικ και σύρετε το πλαίσιο με το εργαλείο γύρω από το σύνολο της σελίδας σας για να ξεκινήσετε .
Η 9

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

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

πρόσβαση στην επιφάνεια εργασίας του υπολογιστή σας και να δημιουργήσετε ένα νέο φάκελο για την ιστοσελίδα σας . Οι χρήστες Mac θα επιλέξετε Finder > Νέος φάκελος . Οι χρήστες των Windows θα δεξί κλικ στην επιφάνεια εργασίας και επιλέξτε New > Folder . Δημιουργήστε ένα πρόσθετο φάκελο μέσα σε αυτό το ένα με τίτλο « εικόνες ».

12

Επιστροφή στο Photoshop και επιλέξτε Αρχείο > Αποθήκευση για το Web ( ή Αποθήκευση για web & συσκευές για τους χρήστες CS4 ) . Αυτό φέρνει επάνω ένα παράθυρο διαλόγου , όπου θα βελτιστοποιήσει φέτες φωτογραφίες σας για το Web και το Dreamweaver .
Η 13

Κάντε τύπο αρχείου , την ποιότητα και το χρώμα σε κάθε μία από τις φέτες σας στη δεξιά στήλη του πλαίσιο διαλόγου . Επιλέξτε μια φέτα κάνοντας κλικ στο παράθυρο της οθόνης του πλαισίου διαλόγου . Φωτογραφικές εικόνες θα πρέπει να αποθηκεύονται ως αρχεία JPEG στο drop -down ακριβώς κάτω Preset και στερεάς έγχρωμες εικόνες όπως τα λογότυπα ή κουμπιά του μενού μπορούν να αποθηκευτούν σε μορφή GIF για βέλτιστη απόδοση στο Web . Οι διορθώσεις της ποιότητας μπορεί να γίνει σε δύο βολικά drop-down κάτω . Οι περισσότερες εικόνες μπορούν να έχουν την ποιότητα τους να μειώνεται , ενώ εξακολουθούν να αναζητούν πρόστιμο στην ιστοσελίδα σας , έτσι ώστε να μειώσει την ποιότητα μέχρι να δείτε μια αξιοσημείωτη διαφορά . Το γεγονός αυτό καθιστά το φορτίο σελίδα σας πιο γρήγορα .
Η 14

Κάντε κλικ στο Αποθήκευση φορά κάθε φέτα έχει προσαρμοστεί. Επιλέξτε HTML & Εικόνες στο αναπτυσσόμενο Format του πλαισίου διαλόγου που εμφανίζεται . Αλλάξτε το φάκελο προορισμού στο φάκελο εικόνες μέσα στο φάκελο ιστοσελίδα που έχει δημιουργηθεί στην επιφάνεια εργασίας σας . Διάταξή σας είναι πλέον βελτιστοποιηθεί και είναι έτοιμο για χρήση στο Dreamweaver . Τα στοιχεία της σελίδας σας μπορεί να βρεθεί στην παλέτα αρχεία στο Dreamweaver , στα δεξιά του παραθύρου site σας . Μπορείτε να πάρετε μια ματιά σε ολόκληρη τη διάταξη σας σε φέτες και να βελτιστοποιηθεί για το Web και διατηρείται όπως το σχεδίασε στο Photoshop ανοίγοντας το αρχείο html . Δημιουργείται στο φάκελο εικόνων σας, όταν ολοκληρωθεί το Αποθήκευση για το Web στο Photoshop .
Η
εικόνων