Προετοιμάζει Παράσταση για το Web
16 του Ιουνίου του 2008 από chriscoyier · 3 Σχόλια 
Buzz αυτήν την ανάρτηση 
Digg This Post 
Reddit 
Παραπάτημα αυτήν την ανάρτηση
Ενδεικτικά είναι ένα υπέροχο τάση στο web design. Ταιριάζει το μέσο καλά. Μεγάλη εικονογράφοι όμως, συχνά δεν νομίζω ότι όσον αφορά το διαδίκτυο, όταν κάνουν εικονογραφήσεις τους. Ρίξτε μια ματιά σε αυτό το πολύ ωραίο ουρανό / λόφο παράδειγμα cityscape βρήκα στο Shutterstock:
Νομίζω ότι αυτό το παράδειγμα, θα κάνει μια εξαιρετική βάση για ένα web design, αλλά σαφώς δεν είναι έτοιμη για ένα τέτοιο έργο out-of-the-box. Αφήνει να κάνουμε κάποιες χειρισμό και την προετοιμασία της στο διαδίκτυο.
Πάρτε το σε Photoshop
Είναι φανταστικό ότι η εικόνα είναι φορέα. Αυτό σημαίνει ότι μπορούμε να την κάνουμε κάθε μεγέθους που δεν χρειάζεται σε καμία απώλεια ποιότητας. Στόχος μας θα είναι να κάνει αυτή τη σκηνή κάθονται στο κέντρο του πάνω μέρους του προγράμματος περιήγησης, οπότε ας το πάρει στο Photoshop στο μέγιστο με την κύρια περιοχή περιεχόμενο της ιστοσελίδας μας. Πέστε, 960px. Δημιουργήστε ένα νέο έγγραφο Photoshop 960px πλάτος και ψηλότερο από αυτό που πρέπει να είναι να ταιριάζει.
Ανοίξτε εικόνα σας με το Adobe Illustrator και Επιλογή όλων. Αντιγραφή και επικόλληση σε έγγραφο Photoshop σας. Σιγουρευτείτε για να το επικολλήσετε ως Smart Object. Αυτό θα σας επιτρέψει να διατηρήσει τη φύση φορέα είναι, επιτρέποντάς σας πολυτελές αυτό δεν χάνει την ποιότητα. Μπορεί να έρθω ως πολύ μικρή. Δεν ανησυχείτε, υπάρχει κλίμακα ακριβώς μέχρι να ενταχθούν στο ευρύ 960px έγγραφό σας.
Επέκταση του Edges
Browser παράθυρα δεν είναι σταθερό πλάτος περιβάλλοντα όπως το Photoshop έγγραφα. Πρέπει να προετοιμαστούμε εικόνα μας για να δούμε ωραίο όταν το παράθυρο του προγράμματος περιήγησης είναι ευρύτερη από 960px βάση μας. Ας πάμε μπροστά και να αυξάνει το πλάτος καμβά του εγγράφου μας να 1280px ώστε να έχουμε κάποια περιθώρια να εργαστεί με.
Ο στόχος μας εδώ είναι να έχει την άκρη του το σκοπό αυτό, παράδειγμα σε κάτι που θα είναι οριζόντια επαναλήψιμα. Το πρόσωπο σε φέτες μέχρι αυτό το έγγραφο θα χρειαστεί κάτι τέτοιο να γίνει αυτό το έργο του σχεδιασμού για το διαδίκτυο. Σε τελική ανάλυση αυτό το κομμάτι θα είναι το υπόβαθρο για την <body> στοιχείο της ιστοσελίδας, με κύριο παράδειγμα τη συνεδρίασή μας στην κορυφή.
Θα πάρω μια μικρή φέτα από το δεξί άκρο της παρούσας εικονογράφηση και "float" το πάνω πάνω είναι δική νέα στρώση (Command-J).
Τώρα μπορούμε να μετασχηματίσει Δωρεάν αυτό το νέο μικρό κομμάτι (Command-T) και επεκτείνει την οριζόντια από τις δύο πλευρές του εγγράφου. Επειδή δημιουργήθηκαν οι κλίσεις ωραία και κάθετη, αυτή η επέκταση του εργοστασίου όμορφα από την δεξιά πλευρά. Η δεξιά πλευρά όμως, μοιάζει πάρα πολύ απότομη, με το λόφο, ο Μπους και οδικές να διακοπεί ξαφνικά.
Επισκιάζεται η μετάβαση
Αντί να κάνει κάτι πολύ φανταχτερό και να προσπαθήσει να ενώσει τις δύο στρώματα μαζί, ας υποθέσουμε ότι σκοτεινές σκληρή μετάβαση από την τοποθέτηση ενός προσκήνιο αντικείμενο πάνω ακριβώς από πάνω. Αυτή η εικόνα θα μπορούσε να κάνει με λίγο επιπλέον βάθος ούτως ή άλλως.
Αυτό το γραμματοκιβώτιο διάνυσμα θα κάνει ωραία.
Διαγράψτε τα πάντα εκτός από το ίδιο το γραμματοκιβώτιο και επικολλήστε την εικόνα ως ένα Smart Object όπως ακριβώς τοποθετείται η αρχική εικόνα. Μια μικρή αλλαγή μεγέθους και τοποθέτησης και έχουμε το τέλειο στοιχείο για να επισκιάζεται η μετάβαση στο υπόβαθρο.
Το κύριο περιεχόμενο του Χώρου
Ενδεικτικά μας πρόκειται να κάνει για μια υπέροχη κεφαλίδα και το φόντο, αλλά για το πραγματικό περιεχόμενο της ιστοσελίδας, θα χρειαστούμε κάποια μεγάλη κατηγορία των λευκών. Αφήνει να αποβάλετε έναν λευκό στρογγυλοποίηση προς τα δεξιά ορθογώνιο στην κορυφή με λίγη σκιά σταγόνα για να το συμψηφίσει.
Η συμπλήρωση του βυθού
Με την οριζόντια άκρη τώρα όμορφα δυσδιάκριτη, μπορούμε να συμπληρώσετε το χρώμα για το υπόλοιπο της κάτω μέρος της ιστοσελίδας κοροϊδεύω. Δείγμα ένα χρώμα (με το εργαλείο Eyedropper) από το κάτω μέρος τρόπο πιο pixel της εικόνας και στη συνέχεια συμπληρώστε κάτω μας-πιο άδειο στρώμα με αυτό το νέο χρώμα.
Αυτή η κύρια περιοχή περιεχόμενο είναι τώρα πρόκειται να είναι ένα αεράκι για κάθε αξιοπρεπή web designer, την φέτα επάνω.
Ολοκληρώνουν
Ρίξτε μια συμπαθητική μικρή μήνυμα καλωσορίσματος στον ουρανό και να έχουμε ένα ωραίο μέλλον φαίνεται mockup web. Επειδή έχουμε λάβει περίσκεψη φροντίδα των δύο οριζόντια επεκτασιμότητα και κάθετη επεκτασιμότητα, αυτό το παράδειγμα είναι πλέον ιδανικό για μετατροπή σε πραγματικό markup web.
Μείνετε συντονισμένοι για CSS-Κόλπα όπου θα μετατροπή αυτή σε μια πραγματική ιστοσελίδα τις επόμενες εβδομάδες.
Γιατί Photoshop χρήσης για το έργο αυτό σε όλα;
Γιατί να μην χρησιμοποιήσει photoshop; Photoshop είναι ένα καλό εργαλείο για τις εικόνες για το διαδίκτυο, των φορέων που δεν αρέσει αυτή η εικόνα, αλλά καλό για σχεδιαγράμματα (φροντιστήριο ιδέα).
Ευχαριστίες για την άκρη! Photoshop είναι μαγικό!