Η αρχή του «χαιρετισμού από ρούχα» ισχύει όχι μόνο για τους ανθρώπους, αλλά και για τους ιστότοπους. Το φόρεμα της ιστοσελίδας είναι το σχέδιό του. Και είναι ο σχεδιασμός που καθορίζει την εντύπωση που έχει ο επισκέπτης στα πρώτα δευτερόλεπτα της προβολής του πόρου. Αυτή η εντύπωση είναι ιδιαίτερα σημαντική γιατί καθορίζει τη μελλοντική του συμπεριφορά. Το πρώτο στοιχείο σχεδίασης που βλέπει κάθε χρήστης που επισκέπτεται τον ιστότοπο είναι η "κεφαλίδα" του. Το όριο είναι το πρόσωπο του διαδικτυακού πόρου. Επομένως, κάθε αρχάριος σχεδιαστής ιστοσελίδων θέλει καταρχάς να μάθει πώς να κάνει κεφαλίδες για ιστότοπους.
Απαραίτητη
- - πρόσβαση στο Διαδίκτυο ·
- - σύγχρονο πρόγραμμα περιήγησης
- - raster πρόγραμμα επεξεργασίας γραφικών (GIMP, Photoshop).
- - προαιρετικό: πρόγραμμα επεξεργασίας διανυσματικών γραφικών (CorelDraw).
- - προαιρετικό: περιβάλλον μοντελοποίησης 3D (Blender, 3DStudio).
- - προαιρετικό: φύλλο χαρτιού, μολύβι ή στυλό.
Οδηγίες
Βήμα 1
Αναπτύξτε μια ιδέα για τη μελλοντική κεφαλίδα ιστότοπου. Στην ιδανική περίπτωση, η ιδέα πρέπει να βασίζεται στην αρχική ιδέα. Όταν λείπουν ιδέες, η έμπνευση μπορεί να αποκτηθεί αναλύοντας τις υπάρχουσες καλές λύσεις. Αντανακλά το αποτέλεσμα της δημιουργικής έρευνας με τη μορφή ενός σκίτσου σε ένα κομμάτι χαρτί. Το σκίτσο θα πρέπει να αντικατοπτρίζει τη δομή της μελλοντικής κεφαλίδας του ιστότοπου με την ένδειξη θέσεων "καουτσούκ" και περιοχών γεμάτων με εικόνες. Σε αυτό το στάδιο, είναι καλή ιδέα να σκεφτείτε έναν κατά προσέγγιση χρωματικό συνδυασμό για το σχεδιασμό της κεφαλίδας.
Βήμα 2
Επιλέξτε το μέγεθος της κεφαλίδας. Στην πραγματικότητα, αξίζει να ορίσετε με σαφήνεια μόνο μία από τις παραμέτρους της - το ύψος. Κατά κανόνα, το ύψος των κεφαλίδων του ιστότοπου είναι σταθερό και δεν εξαρτάται από τη λογική ανάλυση που επηρεάζει τις παραμέτρους εμφάνισης των γραμματοσειρών. Με άλλα λόγια, θα πρέπει να επιλέξετε μια τιμή για το ύψος της κεφαλίδας σε pixel. Σε αυτήν την περίπτωση, είναι λογικό να λαμβάνουμε υπόψη τη δυνατότητα τοποθέτησης banner ή μπλοκ διαφημίσεων με βάση τα συμφραζόμενα στην κεφαλίδα. Όσον αφορά το πλάτος, θα πρέπει να καθορίσετε την ελάχιστη τιμή, επισημαίνοντας τουλάχιστον μία περιοχή "καουτσούκ" που επιτρέπει στην κεφαλίδα να προσαρμόζεται σε διαφορετικά μεγέθη της ιστοσελίδας.
Βήμα 3
Δημιουργήστε ένα πρότυπο κεφαλίδας σε έναν επεξεργαστή γραφικών. Σε ένα νέο έγγραφο, προσθέστε ένα διαφανές επίπεδο στο οποίο θα σύρετε το σκίτσο σύμφωνα με τις επιλεγμένες γεωμετρικές παραμέτρους. Το ύψος του επιπέδου πρέπει να ταιριάζει με το ύψος της κεφαλίδας. Το πλάτος μπορεί να ληφθεί ως αυθαίρετο, αλλά μεγαλύτερο από το ελάχιστο μέγεθος, αφήνοντας χώρο για οριζόντιες περιοχές «καουτσούκ». »Στο πρότυπο, ορίστε ζώνες σταθερών και μεταβλητών μεγεθών, ζώνες που προορίζονται να γεμίσουν με στατικές εικόνες, εικόνες φόντου.
Βήμα 4
Αναζήτηση ή δημιουργία στατικών εικόνων για τοποθέτηση στο πρότυπο κεφαλίδας. Το λογότυπο και ορισμένα μοναδικά στοιχεία μπορούν να δημιουργηθούν σε περιβάλλον επεξεργασίας διανύσματος ή 3D μοντελοποίησης. Είναι πολύ εύκολο να βρείτε θεματικές εικόνες σε δωρεάν τράπεζες στο Διαδίκτυο.
Βήμα 5
Εισαγάγετε το φόντο, το λογότυπο και τις στατικές εικόνες στο πρότυπο κεφαλίδας ιστότοπου σε έναν επεξεργαστή γραφικών. Προσθέστε το φόντο και κάθε εικόνα σε ένα ξεχωριστό διαφανές επίπεδο. Τακτοποιήστε τα στρώματα με τον καλύτερο τρόπο. Μετακινώντας εικόνες σε επίπεδα, επιτύχετε την τέλεια διάταξή τους, που αντιστοιχεί στο πρότυπο που δημιουργήθηκε προηγουμένως.
Βήμα 6
Αποθηκεύστε την εικόνα κεφαλίδας που προκύπτει. Αποθηκεύστε το έργο εργασίας στη μητρική μορφή του επεξεργαστή γραφικών. Στη συνέχεια, αποθηκεύστε την επίπεδη εικόνα κεφαλίδας σε μορφή χωρίς απώλειες (για παράδειγμα, PNG).
Βήμα 7
Δημιουργήστε ένα πρότυπο κεφαλίδας HTML εάν χρειάζεται. Ανοίξτε την επίπεδη εικόνα στο πρόγραμμα επεξεργασίας. Κόψτε εικόνες από αυτό που αντιστοιχούν σε περιοχές σταθερού μεγέθους. Από τα μέρη που αντιστοιχούν στις περιοχές "καουτσούκ", κόψτε τις εικόνες πλάτους 1 εικονοστοιχείου. Αποθηκεύστε όλες τις εικόνες στο δίσκο. Διάταξη της κεφαλίδας HTML χρησιμοποιώντας τις αποθηκευμένες εικόνες.
