Υπάρχει ένας τεράστιος αριθμός προτύπων ιστότοπων στον Ιστό, αλλά έχουν ένα μειονέκτημα - δεν είναι μοναδικά. Εάν ο κάτοχος του ιστότοπου δεν θέλει να επαναληφθεί ο σχεδιασμός του ιστότοπού του αλλού, μπορεί να παραγγείλει ένα πρότυπο από έναν επαγγελματία σχεδιαστή ή να προσπαθήσει να το δημιουργήσει μόνος του.
Είναι απαραίτητο
Πρόγραμμα Adobe Photoshop
Οδηγίες
Βήμα 1
Η δημιουργία του δικού σας προτύπου δεν είναι τόσο δύσκολη, όσο φαίνεται με την πρώτη ματιά. Για να εργαστείτε, χρειάζεστε το Adobe Photoshop - φυσικά, πρέπει να έχετε τουλάχιστον μια βασική κατανόηση της εργασίας με αυτό. Αλλά προτού ξεκινήσετε το πρόγραμμα και αρχίσετε να δημιουργείτε, πρέπει να σκεφτείτε εκ των προτέρων τον μελλοντικό σχεδιασμό. Ο πιο βολικός τρόπος για να γίνει αυτό είναι πρώτα να εξοικειωθείτε με τουλάχιστον εκατό έτοιμα πρότυπα, να αξιολογήσετε τα πλεονεκτήματα και τα μειονεκτήματά τους. Δώστε προσοχή στις επιτυχημένες λύσεις ορισμένων σχεδιαστικών στοιχείων. Αυτό δεν σημαίνει ότι θα τα αντιγράψετε, αλλά είναι πολύ λογικό να λάβετε ως βάση κάποιες όμορφες και βολικές λύσεις.
Βήμα 2
Με βάση την ανάλυση των προτύπων άλλων ατόμων και τη δική σας δημιουργικότητα, θα πρέπει να έχετε μια ιδέα για το πώς θα φαίνεται ο ιστότοπός σας. Είναι καλύτερο να κάνετε τραχιά σκίτσα του μελλοντικού σχεδιασμού με χρωματιστά μολύβια σε συνηθισμένα φύλλα Α4. Θα πρέπει να ξεκινήσετε να εργάζεστε με το Photoshop μόνο αφού έχετε σαφή ιδέα για το τι ακριβώς σχεδιάζετε.
Βήμα 3
Ξεκινήστε το Photoshop, δημιουργήστε ένα νέο έργο 1200x1600, ορίστε ένα διαφανές φόντο. Ενεργοποιήστε το εργαλείο χάρακα, εάν δεν είναι ήδη ενεργοποιημένο, για να το κάνετε αυτό πατήστε το συνδυασμό πλήκτρων Ctrl + R. Ενεργοποίηση απόσπασης: Προβολή - Συρραφή.
Βήμα 4
Τώρα πρέπει να διαιρέσουμε το πρότυπο με οδηγούς που θα δείχνουν τα όρια των στοιχείων του - πλευρές, στήλες κ.λπ. Για παράδειγμα, θέλετε να διαχωρίσετε το πρότυπο έτσι ώστε να υπάρχει μια στενή στήλη στα αριστερά, μια μεγάλη στήλη στα δεξιά προς τα δεξιά του προτύπου και υπάρχει χώρος στην κορυφή για μια κεφαλίδα. Αυτό σημαίνει ότι χρειάζεστε τρεις κατακόρυφες γραμμές (το αριστερό περίγραμμα του προτύπου, το δεξί και τη γραμμή μεταξύ τους) και μια οριζόντια, που δείχνει το κάτω περίγραμμα της κεφαλίδας. Για να ορίσετε μια κατακόρυφη γραμμή, μετακινήστε τον κέρσορα στον αριστερό χάρακα στην αριστερή πλευρά, πατήστε το V και, ενώ κρατάτε πατημένο το πλήκτρο, σύρετε τη γραμμή στην επιθυμητή θέση. Κάντε το ίδιο με τις άλλες δύο κατακόρυφες γραμμές. Οι οριζόντιες κατασκευάζονται με τον ίδιο τρόπο, χρησιμοποιείται μόνο το άνω χάρακα
Βήμα 5
Βρείτε ένα φόντο για το πρότυπό σας, θα πρέπει να είναι ένα μικρό, επαναλαμβανόμενο μοτίβο. Ανοίξτε το στο Photoshop, επιλέξτε, αντιγράψτε. Στη συνέχεια, επικολλήστε στο πρότυπο όσες φορές χρειάζεται για να το γεμίσετε με το φόντο. Η επικόλληση γίνεται ως εξής: "Επεξεργασία" - "Επικόλληση" και, στη συνέχεια, σύρετε την περιοχή φόντου στην επιθυμητή θέση. Είναι ακόμη πιο γρήγορο να εισαγάγετε μια εικόνα χρησιμοποιώντας την εντολή Ctrl + V. Προσθέστε ένα φόντο για την κεφαλίδα του ιστότοπου με τον ίδιο τρόπο. Μπορείτε να χρησιμοποιήσετε διάφορα γεμίσματα ντεγκραντέ για να δημιουργήσετε ένα φόντο.
Βήμα 6
Χρησιμοποιώντας το εργαλείο μολυβιού, σχεδιάστε τα όρια του προτύπου, εστιάζοντας στις γραμμές που έχουν ήδη σχεδιαστεί (δηλαδή πάνω από αυτές). Έχετε λάβει τη βάση του απλούστερου προτύπου, τώρα πρέπει να το συμπληρώσετε με τις απαραίτητες λεπτομέρειες - κουμπιά πλοήγησης, γραμμές μενού, διάφορα διακοσμητικά στοιχεία κ.λπ. Για περισσότερες πληροφορίες σχετικά με τον τρόπο δημιουργίας κουμπιών και άλλων στοιχείων, διαβάστε τα αντίστοιχα άρθρα σχετικά με την εργασία με το Adobe Photoshop.
Βήμα 7
Το πρότυπο δημιουργήθηκε, τώρα πρέπει να το κόψετε σε κομμάτια για να τα εισαγάγετε στη σελίδα html. Χρησιμοποιήστε το Slice Tool για κοπή. Για να το βρείτε, κάντε δεξί κλικ στο εργαλείο Frame και επιλέξτε Cutout από το μενού που ανοίγει. Τώρα μπορείτε να τοποθετήσετε το πρότυπο όπως θέλετε και, στη συνέχεια, να αποθηκεύσετε: "Αρχείο" - "Αποθήκευση για Web". Στο παράθυρο που ανοίγει, επιλέξτε τον τύπο αρχείου: HTML & εικόνες, καθορίστε το όνομα αρχείου: index.htm και αποθηκεύστε το. Θα έχετε ένα αρχείο index.htm και έναν φάκελο εικόνων με φέτες εικόνων.
