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

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

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

Δημιουργήστε την εικόνα σας . Όταν τελειώσετε , χρησιμοποιήστε " Φέτα " εργαλείο του Photoshop για να διαιρέσει την εικόνα σας σε τμήματα . Χρησιμοποιήστε το εργαλείο " Φέτα Επιλογή " για να μετονομάσετε κάθε τμήμα με τα ονόματα που αντιστοιχούν στην οργάνωση του site σας . Για παράδειγμα , αν η εικόνα σας περιλαμβάνει κουμπιά πλοήγησης ιστοσελίδα , τμήματα όνομα σε αυτόν τον τομέα " nav . " Αυτά τα τμήματα θα αντιστοιχεί σε " div " ετικέτες στον κώδικα CSS σας . 2

Στη γραμμή μενού κάντε κλικ "Αρχείο " και στη συνέχεια επιλέξτε "Αποθήκευση για web & συσκευές ". Επιλέξτε " 2 - Up " ή " 4 - Up" από τις καρτέλες πάνω από την περιοχή της εικόνας για μια επιλογή των προεπισκοπήσεις . Επιλέξτε τις επιλογές που θέλετε για την εικόνα σας στο " Preset ενότητα . " Επιλέξτε την προεπισκόπηση της εικόνας που ταιριάζει καλύτερα οπτικά χαρακτηριστικά σας . Κάντε κλικ στο κουμπί "Αποθήκευση".
Εικόνων 3

Πληκτρολογήστε το όνομα του αρχείου στο πεδίο "Όνομα αρχείου" πεδίο . Επιλέξτε " HTML και εικόνες " στο " Αποθήκευση ως τύπου" πεδίο . Επιλέξτε " Άλλο" στο πεδίο Ρυθμίσεις . Θα εμφανιστεί ένα « Ρυθμίσεις εξόδου " παράθυρο διαλόγου . Στο Ρυθμίσεις drop -down , επιλέξτε "Custom ". Επιλέξτε το κουμπί "Next " μέχρι να δείτε την ενότητα " Φέτα Έξοδος " . Επιλέξτε το κουμπί "Δημιουργία CSS " ραδιόφωνο .
Η

4 Επιλέξτε τη μορφή εξόδου του CSS στην Ενδεικτικός μενού . Για ένα εξωτερικό φύλλο στυλ , επιλέξτε " Με ID " ή " Ανά κατηγορία . " CSS σας θα οργανωθεί από ό, τι το στοιχείο που θα επιλέξετε . Αν θέλετε CSS σας να είναι ενσωματωμένο ( περιλαμβάνεται στην κορυφή της σελίδας HTML σας ) επιλέξτε " Inline . "
5

Πλήρης επιλογή άλλες επιλογές στις Ρυθμίσεις εξόδου . Όταν τελειώσετε , κάντε κλικ στο " OK". Στο πεδίο Φέτες επιλέξτε τι φέτες θέλετε να συμπεριληφθούν στην έξοδο CSS . Βεβαιωθείτε ότι έχετε πλοηγηθεί στο σημείο όπου θέλετε το αρχείο να βρίσκεται στο "Save Optimized Ως " διαχειριστής αρχείων περιοχή . Κάντε κλικ στο κουμπί "Αποθήκευση".
Η

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

7 Ανοίξτε το αρχείο στο web browser σας της επιλογής για να δείτε το αρχείο για να ελέγξετε για τυχόν προβλήματα και να βεβαιωθείτε ότι ταιριάζει με την εικόνα που δημιουργήσατε στο Photoshop .
Η
εικόνων