Πώς να κάνω μια Div διάταξης στο Photoshop

Div διατάξεις είναι τα σχέδια για τις ιστοσελίδες που περιλαμβάνουν δοχεία για το περιεχόμενο Web , όπως εικόνες , κείμενο και συνδέσμους . Θα βοηθήσει να διατηρήσει μια ομοιόμορφη εμφάνιση για τις σελίδες web . Adobe Photoshop είναι " Tool φέτα " και " Αποθήκευση για web & συσκευές " εντολές, επιτρέπουν στους χρήστες να δημιουργήσουν ένα σχεδιάγραμμα Div οπτικά με την προσθήκη στοιχείων σελίδας και , στη συνέχεια, τη δημιουργία εμπορευματοκιβωτίων απευθείας στο τραπέζι , αντί να χρησιμοποιούν HTML και CSS κώδικα ή βασίζονται σε προ-made σχεδιαγράμματα div , που απαιτούν επίσης τη γνώση του κώδικα για να προσαρμόσετε . Τα πράγματα που θα χρειαστείτε
λογισμικό Adobe Photoshop

Παρουσίαση Περισσότερες οδηγίες
Η

1 Ανοίξτε το Photoshop και να δημιουργήσετε ένα νέο έγγραφο Web επιλέγοντας " File > New " από το μενού της εφαρμογής και τον καθορισμό της "Preset " drop-down στο "Web ". Ρυθμίστε επιθυμητές διαστάσεις σας για τη διάταξη σας στο " Πλάτος " και " Ύψος " πεδία , ή επιλέξτε ένα από τα τυπικά μεγέθη διάταξης Web από το " μέγεθος " drop-down . 2

Προσθέστε επιθυμητό οπτικό σας εικόνων στη διάταξή σας . Αυτά μπορεί να περιλαμβάνουν εικόνες που εισάγονται με την εντολή " File > Place" , τα σχήματα , τα κουμπιά ή κείμενο που δημιουργήθηκε με το "Εργαλείο Τύπος . "
Εικόνων 3

Επιλέξτε το " Tool φέτα " από τα εργαλεία πάνελ και κόβουμε κάθε στοιχείο της διάταξης σας κάνοντας κλικ και σύροντας πάνω με το " Tool φέτα " επιλεγμένο . Δημιουργία μεμονωμένες φέτες για κάθε στοιχείο κειμένου , κουμπί , εικόνα ή γραμμή . Αυτά τα κομμάτια θα χρησιμεύσει ως τα στοιχεία Div σε διάταξης Web σας .
Η

4 Κάντε κλικ στο μενού "Αρχείο" και επιλέξτε " Αποθήκευση για web & συσκευές " για να εμφανιστεί το παράθυρο διαλόγου βελτιστοποίησης , η οποία θα επιτρέψει μπορείτε να ρυθμίσετε κάθε στοιχείο της διάταξης σας , έτσι ώστε να μπορεί καλύτερα να εμφανίζεται στο διαδίκτυο . Προσαρμόστε τις ρυθμίσεις για κάθε slice που δημιουργήσατε κάνοντας κλικ σε κάθε ξεχωριστά χρησιμοποιώντας την " Φέτα Select Tool " στο άνω αριστερό μέρος του πλαισίου διαλόγου , και την αλλαγή των ρυθμίσεων αναλόγως τη μορφή , την ποιότητα και το χρώμα στα δεξιά του πλαισίου . Κάντε κλικ στο κουμπί "Αποθήκευση " όταν έχετε βελτιστοποιημένη κάθε φέτα με τις προτιμήσεις σας .
5

Ονομάστε το αρχείο διάταξή σας και επιλέξτε μια θέση για το κατά τις αναφερόμενες στους τομείς της " Εκτός Optimized As" παράθυρο διαλόγου . Αλλάξτε το "Format " drop-down " HTML και εικόνες " και βεβαιωθείτε ότι οι "Ρυθμίσεις" και " Slices " drop- downs έχουν οριστεί σε " Default Settings" και " Όλες οι Slices " αντίστοιχα . Κάντε κλικ στο κουμπί "Αποθήκευση". Διάταξή σας είναι τώρα έτοιμο να ανοίξει σε ένα Web -editor , όπως το Dreamweaver , όπου μπορείτε να προσθέσετε συνδέσεις και συμπεριφορές στα τμήματα Div που δημιουργήσατε με το "Εργαλείο Φέτα ».

Η