λογισμικό

* Γνώση Υπολογιστών >> λογισμικό >> Photoshop

Tutorial για περιτύλιγμα Div στο Photoshop

Ένα από τα μεγάλα μυστήρια στο web design είναι το πώς να πάρετε μια επίδραση σκίαση πίσω από την κύρια περιοχή περιεχομένου , η οποία συχνά είναι λευκό ή ανοιχτόχρωμα και αναφέρεται ως το περιτύλιγμα . Δημιουργώντας τη σωστή εικόνα σε ένα πρόγραμμα επεξεργασίας εικόνας , όπως το Photoshop , είναι η μισή μάχη . Χρησιμοποιώντας την εικόνα ως ένα επαναλαμβανόμενο υπόβαθρο σε μια ετικέτα HTML div είναι το άλλο μισό . Η εικόνα βρίσκεται πραγματικά μέσα στο ίδιο του div μέσα στο «περιτύλιγμα» div στη σελίδα. Οδηγίες
Η

1 Δημιουργήστε ένα νέο έγγραφο στο Photoshop , που είναι 840 pixels πλάτος 1.000 pixels βαθιά . Κάντε διπλό κλικ στο επίπεδο φόντου στην παλέτα επιπέδων για να γίνει ένα επεξεργάσιμο στρώμα κάνει . Ο χώρος εργασίας πρέπει να έχουν ένα υπόβαθρο σκακιέρας , υποδεικνύοντας τη διαφάνεια . 2

Δημιουργήστε ένα ορθογώνιο πάνω στη σκηνή με τη χρήση της " Marquis ορθογώνιο " εργαλείο ( διακεκομμένη ορθογώνιο) στην αριστερή γραμμή εργαλείων . Μην ανησυχείτε για το μέγεθος που σχεδιάζετε . Κάντε δεξί κλικ πάνω της και επιλέξτε " Μετατροπή επιλογής . " Κάντε κλικ στην επάνω αριστερή θέση στο " Σημείο Αναφοράς Location" δείκτη στη γραμμή εργαλείων στο πάνω μέρος του χώρου εργασίας . Μοιάζει με ένα Toe σκάφους Tic Tac του είδους . Αυτό προσανατολίζει x σας , y συντεταγμένες στην επάνω αριστερή γωνία της επιφάνειας εργασίας . Στα πεδία της φόρμας αναφορά στο δικαίωμα του δείκτη , που σας x συντονίζει σε 20 pixels και το πλάτος σας σε 800 pixels . Αυτό κέντρα το ορθογώνιο στο χώρο εργασίας σας και αφήνει 20 εικονοστοιχεία σε κάθε πλευρά για τη σκιά . Κάντε διπλό κλικ στο ορθογώνιο σας για να πάτε πίσω στο ορθογώνιο μαρκήσιος σας . Κάντε δεξί κλικ πάνω του, επιλέξτε " Fill" και επιλέξτε " White" από τις επιλογές σας .
Εικόνων 3

Κάντε κλικ στο κουμπί "Προσθήκη στυλ επιπέδου " ( το F ), κατά μήκος του κάτω μέρος του παλέτα επιπέδων και επιλέξτε " Outer Glow . " Κάντε διπλό κλικ στο " Set Χρώμα Glow " πεδίο στο παράθυρο που ανοίγει και πληκτρολογήστε 333333 . Ρυθμίστε το " Αδιαφάνεια " σας σε 100 τοις εκατό και το " Spread" και " Μέγεθος " για 5 . "Noise " και " Jitter " πρέπει να οριστεί σε 0 και " Range" σε 50 , οι προεπιλογές για τις τρεις. Κάντε κλικ στο κουμπί "OK". Το αποτέλεσμα σκιά του τύπου θα πρέπει να εμφανιστεί γύρω από το ορθογώνιο , αν και θα εμφανίζεται λιγότερο έντονη από ό, πώς θα φαίνεται στην ιστοσελίδα σας .
Η

4 Ρυθμίστε το "Crop" εργαλείο έως 840 pixel για το πλάτος και 2 pixels για το βάθος . Σύρετε το "Crop" εργαλείο από τη μία πλευρά του χώρου εργασίας στην άλλη , κόβοντας μια σφήνα 2 pixels βαθιά πέρα από τη μέση του ορθογωνίου σας . Κάντε διπλό κλικ στο "Crop" εργαλείο στη γραμμή εργαλείων για να επιβεβαιώσει την καλλιέργεια ( δεδομένου ότι δεν έχετε καμία θέση για να κάνετε διπλό κλικ πάνω στη λεπτή εικόνα ) . Μια μικρή ποσότητα της λάμψη θα εμφανιστεί και στις δύο πλευρές του περικομμένη εικόνα σας μέσα από τα 20 εικονοστοιχεία διαφανή περιοχή σας αφήσει σε κάθε πλευρά . Αποθηκεύστε το αρχείο σας ως " wrapper.png " σε μορφή PNG στον ίδιο φάκελο με την ιστοσελίδα σας .
5

Ανοίξτε το έγγραφο HTML σας και να δημιουργήσετε ένα div περιτύλιγμα με την ταυτότητα του «περιτύλιγμα» που είναι 840 pixels πλάτος και στο κέντρο της σελίδας . Δημιουργήστε ένα div με την ταυτότητα του «περιεχομένου» που βρίσκεται στο εσωτερικό του div περιτύλιγμα με πλάτος 840 pixels και προσθέστε wrapper.png σας σε αυτό το στρώμα η επαναλαμβανόμενη εικόνα φόντου στον άξονα y , ή κάθετα . Προσθέστε ένα div με την ταυτότητα της " leftSideBar » με κάποιο περιεχόμενο για να δώσει βάθος στο div περιεχόμενό σας , τεντώνοντας το λευκό φόντο ώστε να μπορείτε να δείτε το αποτέλεσμα της σκιάς . Η κωδικοποίηση για τη σελίδα HTML μοιάζει με αυτό :