Ξεκινώντας: αποσαφήνιση των αποχρώσεων. Αυξημένο επίπεδο ελέγχου και ακρίβειας

Σε αυτή τη σελίδα θα μιλήσω για τεχνικές εργασίας σε ένα διανυσματικό πρόγραμμα επεξεργασίας γραφικών. Corel Draw. Αναπτύχθηκαν μετά από ερωτήσεις πολλών φίλων σχεδιαστών που δεν είχαν εμπειρία στην ανάπτυξη ιστοσελίδων και ανέλαβαν να δημιουργήσουν μόνο μια γραφική διάταξη σελίδας. Οι ερωτήσεις διατυπώθηκαν ως εξής: «Ποιες είναι οι διαστάσεις του πεδίου σχεδίασής μου;» και "Μπορώ να ζωγραφίσω τα πάντα;" Όλα τα βήματα που περιγράφονται παρακάτω θα διαρκέσουν περίπου ένα λεπτό και θα σας επιτρέψουν να καταργήσετε το ζήτημα του μεγέθους μια για πάντα. Η εργασία πραγματοποιήθηκε στο Corel Draw X4, επομένως τα ονόματα ορισμένων μενού ενδέχεται να διαφέρουν από άλλες εκδόσεις του προγράμματος.

Ας ξεκινήσουμε λοιπόν. Πρώτα από όλα, ας ανοίξουμε Internet Explorerκαι επεκτείνετε το σε πλήρη οθόνη. Χωρίς φόρτωση οποιουδήποτε ιστότοπου - το παράθυρο του προγράμματος περιήγησης πρέπει να είναι καθαρό - κάντε κλικ Πλήκτρο εκτύπωσηςΟθόνη. Μερικές φορές μπορεί να χρειαστεί να πατήσετε Εκτύπωση οθόνης 2 φορές στη σειρά. Λαμβάνουμε ένα στιγμιότυπο οθόνης (στιγμιότυπο οθόνης) του προγράμματος περιήγησης, το οποίο βρίσκεται στο πρόχειρο του υπολογιστή. Ανοίξτε το Corel, δημιουργήστε νέο αρχείο. Στη συνέχεια, πρέπει να κάνετε δεξί κλικ 2 φορές στον χάρακα και στο μενού Χάρακας που εμφανίζεται, επιλέξτε Σημεία ως μονάδες μέτρησης. Επικολλήστε την εικόνα μας (Shift+Insert) από το πρόχειρο. Οι διαστάσεις της εισαγόμενης εικόνας, εάν όλα έγιναν σωστά, θα πρέπει να ταιριάζουν με την ανάλυση της οθόνης σας. Κάνουμε τη σελίδα μας στο ίδιο μέγεθος. Επιλέξτε ξανά την εικόνα και ευθυγραμμίστε την στο κέντρο της σελίδας (Ταξινόμηση > Στοίχιση και διανομή > Κέντρο σελίδαςή απλώς πατήστε το πλήκτρο "P"). Χωρίς να αφαιρέσετε την επιλογή, πατήστε δεξί κουμπίποντίκι και κλειδώστε το αντικείμενο (επιλέξτε Κλείδωμα αντικειμένου στο αναπτυσσόμενο μενού). Αντί να κλειδώνετε ένα αντικείμενο, μπορείτε να το τοποθετήσετε επάνω νέο στρώμακαι κλειδώστε το ίδιο το στρώμα - το κύριο πράγμα είναι ότι η εικόνα δεν παρεμβαίνει στην εργασία σας.

Τώρα ας αποφασίσουμε για το πεδίο σχεδίασης. Παρά το γεγονός ότι φαίνεται να υποδεικνύεται ξεκάθαρα από το λευκό πεδίο του προγράμματος περιήγησης της φωτογραφίας μας, θα πρέπει να θυμάστε ότι ένας πιθανός επισκέπτης στον μελλοντικό σας ιστότοπο μπορεί να έχει μια οθόνη με διαφορετικά μεγέθη - μεγαλύτερη ή μικρότερη. Εάν εργάζεστε σε μια οθόνη 21 ιντσών και γεμίστε ολόκληρο το χώρο του στιγμιότυπου οθόνης του προγράμματος περιήγησης χωρίς να φύγετε επιπλέον χώρουςκατά μήκος των άκρων, τότε ένας χρήστης με οθόνη 17 ιντσών δεν θα δει τα πάντα - μέρος του ιστότοπου θα αποκοπεί και θα εμφανιστούν γραμμές κύλισης. Αν είναι κάθετα, κανένα πρόβλημα. Αλλά η εμφάνιση οριζόντιων δεν θα ήταν επιθυμητή. Πρέπει να αναζητήσετε ένα συμβιβαστικό μέγεθος. Λαμβάνοντας υπόψη ότι υπάρχουν όλο και λιγότερες οθόνες 17 ιντσών, θα έπαιρνα ως βάση το μέγεθος του πεδίου σχεδίασης τυπικός ορισμόςΟθόνη 19 ιντσών - 1280x1024 pixel μείον τις διαστάσεις της γραμμής εργασιών της επιφάνειας εργασίας και όλων των πλαισίων του προγράμματος περιήγησης. Είναι αδύνατο να επιλέξετε τις ακριβείς διαστάσεις - ένας χρήστης έχει τη γραμμή εργασιών στο πλάι, ενώ ένας άλλος την έχει στο επάνω μέρος. Και ο αριθμός των σειρών των εικονιδίων ποικίλλει. Διαστάσεις διάφορα πάνελκαι κουμπιά διαφορετικά προγράμματα περιήγησηςεπίσης διαφορετικό... Στη δουλειά μου εστιάζω στις ακόλουθες διαστάσεις του πεδίου σχεδίασης: πλάτος - 1280 μείον 30 pixel που αφαιρούνται από τη γραμμή κύλισης. ύψος - 1024 μείον 132 εικονοστοιχεία της γραμμής εργασιών και των διαφόρων πλαισίων του προγράμματος περιήγησης και μείον 32 εικονοστοιχεία που αφαιρούνται από τη γραμμή κατάστασης στο κάτω μέρος. Το σύνολο είναι 1250x860. Τι μας λένε αυτοί οι αριθμοί; Ότι όλα δεν χωρούν σε μια οθόνη 17 ιντσών - θα εμφανιστούν οριζόντιες γραμμές κύλισης και σε μια οθόνη 21 ιντσών ή μεγαλύτερη θα εμφανίζονται στις άκρες ελεύθερους χώρους. Επομένως, εάν έχετε οθόνη 19 ιντσών και στοχεύετε τον ιστότοπό σας ειδικά σε τέτοιες οθόνες, μη διστάσετε να εργαστείτε σε ολόκληρο το λευκό πεδίο του προγράμματος περιήγησης. Εάν η οθόνη σας είναι μεγαλύτερη, σχεδιάστε ένα ορθογώνιο με διαστάσεις 1250x860 pixel και τοποθετήστε το στο κέντρο του λευκού πεδίου του στιγμιότυπου του προγράμματος περιήγησης. Αυτά τα κενά διαστήματα θα εμφανιστούν αμέσως στα πλαϊνά, τα οποία μπορεί κάλλιστα να είναι βαμμένα με χρώμα ή φόντο, αλλά στα οποία δεν πρέπει να υπάρχουν κείμενα, banner, πίνακες και άλλα στοιχεία σελίδας. Στη συνέχεια, πρέπει να ευθυγραμμίσετε το επάνω περίγραμμα του ορθογωνίου με το άνω όριο του λευκού πεδίου και, επεκτείνοντας 3 γραμμές οδηγού, να τις ευθυγραμμίσετε με τις πλευρές του ορθογωνίου (τις δύο πλευρές και το κάτω μέρος) και το ίδιο το ορθογώνιο μπορεί να σβηστεί. Αυτοί οι οδηγοί περιορίζουν το πεδίο σχεδίασης. Επαναλαμβάνω ότι το μέγεθος του πεδίου σχεδίασης είναι σχετικό και μπορεί να είναι μικρότερο εάν ο χρήστης, για παράδειγμα, έχει 4 σειρές εικονιδίων στη γραμμή εργασιών και όχι μία, όπως η δική μου. Ας υποθέσουμε ότι έχουμε πεδίο εργασίας, μπορούμε να δουλέψουμε. Συνιστάται να αποθηκεύσετε ένα τέτοιο αρχείο ως πρότυπο - όταν ξεκινήσετε να δημιουργείτε έναν νέο ιστότοπο, ανοίξτε τον και εργαστείτε αμέσως χωρίς να υπολογίσετε διαστάσεις.

Τώρα για ένα ενδιαφέρουσα ευκαιρία Corel Draw. Πριν από αυτό, πρέπει να βεβαιωθείτε ότι δεν υπάρχουν αντικείμενα που προεξέχουν ή βρίσκονται έξω από την περιοχή εργασίας της σελίδας και να ανοίξετε πρόσθετους πίνακες βάσης. Πατήστε F4 (ή επιλέξτε To Fit στο αναπτυσσόμενο παράθυρο Επίπεδο ζουμ).

Στη συνέχεια F9 (προβολή πλήρους οθόνης). Λάβαμε μια ελαφρώς μεγεθυσμένη εικόνα του προγράμματος περιήγησής μας. Το επόμενο βήμα είναι να εισαγάγετε μια νέα τιμή κλίμακας στο Επίπεδο Ζουμ - ελαφρώς μεγαλύτερη από την προηγούμενη, και αφού την αλλάξετε, πατήστε ξανά το F9. Αυτό πρέπει να γίνει αρκετές φορές και αλλάζοντας την κλίμακα, βεβαιωθείτε ότι το στιγμιότυπο οθόνης αφού πατήσετε το πλήκτρο F9 καταλαμβάνει ολόκληρη την οθόνη, δηλαδή οπτικά το στιγμιότυπο οθόνης μοιάζει με το ανοιχτό πρόγραμμα περιήγησής μας. Όταν συμβεί αυτό, πρέπει να θυμάστε την τιμή της κλίμακας. Για τι είναι όλο αυτό; Αργά ή γρήγορα θα χρειαστεί να δείξετε σε κάποιον μια σχεδιασμένη διάταξη χωρίς εξήγηση, όπως: "Εδώ θα είναι έτσι, αλλά ολόκληρος ο ιστότοπος θα μοιάζει με αυτό" κ.λπ. Αντί για αυτές τις επεξηγήσεις, πατήστε F4, ορίστε την τιμή κλίμακας που απομνημονεύσατε προηγουμένως στο Επίπεδο Ζουμ, πατήστε F9 και δείτε μπροστά μας τη διάταξή μας, που δεν διακρίνεται από την πραγματικήανοίξτε το πρόγραμμα περιήγησης , και το τελικό αποτέλεσμα θα φαίνεται ακριβώς όπως το βλέπετε τώρα. Τέλεια, έτσι δεν είναι! Προσέξτε τα αντικείμενα που προεξέχουν και τις βάσεις σύνδεσης, διαφορετικά η εικόνα σε προβολή πλήρους οθόνης θα μετατοπιστεί στο πλάι. Έτσι, μπορέσαμε να δείξουμε ανά πάσα στιγμήπραγματική σελίδα

site, παρακάμπτοντας τα επόμενα στάδια έντασης εργασίας - επεξεργασία γραφικών, κοπή με βελτιστοποίηση και κωδικοποίηση html. Όταν εργάζεστε σε μια διάταξη στο Corel Draw, πρέπει να είστε σίγουροι ότι εργάζεστεχρωματικό μοντέλο Το RGB, δηλαδή, όλα τα χρώματα πρέπει να είναι σε αυτό, και όχι στο SMYK ή στο LAB. Διαφορετικά, κατά την περαιτέρω μετατροπή σε RGB, τα χρώματα που δεν υπήρχαν σε αυτό το μοντέλο θα αλλάξουν. Από σχεδιαστική άποψη, η εργασία δεν περιορίζεται από τίποτα - μπορείτε να σχεδιάσετε ό,τι θέλετε και να εφαρμόσετε όλα τα εφέ που είναι διαθέσιμα σε αυτό το πρόγραμμα. Ο συνδυασμός ράστερ και διανυσματικών γραφικών φαίνεται πολύ εντυπωσιακός. Λαμβάνοντας υπόψη ότι η Corel μπορεί να εισάγει αρχεία Photoshop και υποστηρίζει επίπεδα, αυτό δεν είναι δύσκολο να γίνει. Για αυτό κάνουμε τα πάντα στο Photoshopαπαραίτητες ενέργειες , για παράδειγμα, κάνουμε μια περίπλοκη σγουρή αποκοπή μέσω της οποίας θα διαφανούν διανυσματικά γραφικά που σχεδιάζονται στο Corel και αποθηκεύουμε το αρχείο με την επέκταση .psd. Στη συνέχεια στο Corel το εισάγουμε (Αρχείο > Εισαγωγή), όπου το απόκομμά μας θα παρουσιαστεί ξεχωριστά, και αν υπήρχαν πολλά επίπεδα στο Photoshop, τότε με τη μορφή μιας ομάδας αντικειμένων. Εάν σκοπεύετε να καταχωρήσετε τον ιστότοπό σας σε δίκτυα banner, θα ήταν καλή ιδέα να σκεφτείτε να τοποθετήσετε banner εκ των προτέρων και να αφήσετε χώρο για αυτά. Η καλύτερη επιλογή- συνδεθείτε στο διαδίκτυο και αποθηκεύστε ένα ζευγάρι στο δίσκο σας και, στη συνέχεια, τοποθετήστε το στη διάταξή σας στο σωστό μέρος. Εάν προορίζεται η τοποθέτηση συμφραζόμενη διαφήμιση, τότε είναι επίσης απαραίτητο να παρασχεθεί ένα μέρος για αυτό.

Το κύριο κριτήριο για το έργο είναι η αίσθηση της αναλογίας - κάθε γραφικό στοιχείο επιβραδύνει τη φόρτωση της σελίδας ανάλογα με το μέγεθός του. Είναι δύσκολο να υπολογίσει κανείς το κατά προσέγγιση μέγεθος μιας ολόκληρης σελίδας, οπότε κατά τη γνώμη μου είναι καλύτερο να σχεδιάσετε λίγο λιγότερο από λίγο περισσότερο. Στη δουλειά μου, προσπαθώ πάντα να διασφαλίζω ότι το μέγεθος των γραφικών της κύριας σελίδας δεν ξεπερνά τα 40-50 kilobyte, εκτός από τις περιπτώσεις που ο πελάτης προβάλλει τις απαιτήσεις του.

Παρά το γεγονός ότι η Corel έχει τα δικά της μέσα για τη βελτιστοποίηση των εικόνων, θα εκτελέσουμε περαιτέρω επεξεργασία με το Photoshop Για να γίνει αυτό, εξάγουμε τη διάταξή μας στο Μορφή Tiff Bitmap. Η διαδικασία είναι η εξής: (Αρχείο > Εξαγωγή), στα Αρχεία του τύπου επιλέξτε «Tiff Bitmap», στο «Όνομα αρχείου» πληκτρολογήστε το όνομα αρχείου και κάντε κλικ στο «Εξαγωγή». Στο παράθυρο «Μετατροπή σε Bitmap» που ανοίγει, επιλέξτε:

Οι διαστάσεις της εικόνας (Μέγεθος εικόνας) πρέπει να αντιστοιχούν σε pixel στις διαστάσεις του στιγμιότυπου οθόνης ή, με άλλα λόγια, στην ανάλυση της οθόνης σας (στο σχήμα, τις διαστάσεις μιας οθόνης 19 ιντσών). Κατά συνέπεια, σε ποσοστό - όλα είναι 100%. Κάντε κλικ στο OK. Ολόκληρη η διάταξη, συμπεριλαμβανομένου του στιγμιότυπου οθόνης, εξάγεται στο Tiff Bitmap. Εάν χρειάζεται να κάνετε μετατροπή σε Tiff χωρίς στιγμιότυπο οθόνης και με διάφανο φόντο, τότε πρέπει να το ξεκλειδώσετε και να το διαγράψετε (αν το στιγμιότυπο οθόνης είναι ενεργοποιημένο ξεχωριστό στρώμα- απλώς κάντε το επίπεδο αόρατο) και στις επιλογές μετατροπής, επιλέξτε το πλαίσιο ελέγχου "Διαφανές φόντο". Στα πεδία μεγέθους, οι τιμές των pixel θα αλλάξουν, αλλά οι ποσοστιαίες τιμές για το πλάτος και το ύψος θα πρέπει να εξακολουθούν να είναι 100%. Ολα. Η έξοδος είναι ένα Tiff Bitmap με ανάλυση 72 ppi σε RGB, έτοιμο για βελτιστοποίηση και κοπή.

Από εκπληκτικά έργα τέχνης και εντυπωσιακά γραφικά ιστού έως εντυπωσιακά στοιχεία εκτύπωσης, τα εργαλεία μας σάς βοηθούν να εκφράσετε το μοναδικό δημιουργικό σας όραμα και να παράγετε αποτελέσματα για τα οποία μπορείτε να είστε περήφανοι.

Τι νέο υπάρχει στην έκδοση 2019;

Αυξημένο επίπεδο ελέγχου και ακρίβειας

Περισσότερες ευκαιρίες για δημιουργική εξερεύνηση και πειραματισμό

Περισσότερες βελτιώσεις με βάση τα αιτήματα των χρηστών

Η φαντασία δεν πρέπει να περιορίζεται στον χώρο εργασίας σας!

Σύλληψη καλή ιδέαακριβώς τη στιγμή της έμπνευσης και μετατρέψτε το σε υπέροχο σχέδιο χρησιμοποιώντας το CorelDRAW.app. Νέος ισχυρή εφαρμογή, το οποίο αποτελεί μέρος του CorelDRAW Graphics Suite 2019, παρέχει συνεπή απομακρυσμένη πρόσβασησε όλα τα έργα σας. Τώρα μπορείτε να συνεχίσετε να εργάζεστε οπουδήποτε! Για παράδειγμα, χρησιμοποιώντας μια συσκευή «2 σε 1» ή άλλη κινητή συσκευήΓια να δείξετε την εργασία σας στον πελάτη, χρειάζεται απλώς να συνδεθείτε στον λογαριασμό σας CorelDRAW.app.

Εργασία εξ αποστάσεως

Το πακέτο παρέχει πρόσβαση στα αρχεία CorelDRAW ακόμα και όταν δεν έχετε τον υπολογιστή σας στο χέρι.

Αποθήκευση στο σύννεφο

Το πρόγραμμα περιλαμβάνει τη δυνατότητα αποθήκευσης έργων στο cloud, η οποία παρέχει πρόσβαση στα υλικά σας από οποιοδήποτε σύστημα και ανά πάσα στιγμή.

Βολική διαδικασία εισαγωγής/εξαγωγής

Υποστηρίζει μορφές εισαγωγής/εξαγωγής CDR, PDF, PNG, JPEG και SVG.

Για να συνδεθείτε στο coreldraw.app, επισκεφτείτε το www.coreldraw.app και εισαγάγετε το όνομα χρήστη και τον κωδικό πρόσβασης που χρησιμοποιήσατε κατά την εγγραφή του αντιγράφου του CorelDRAW Graphics Suite 2019.

Χαρακτηριστικά που δεν μπορούν να βρεθούν σε άλλα προϊόντα

Το CorelDRAW Graphics Suite προσφέρει εργαλεία βελτίωσης της παραγωγικότητας που δεν υπάρχουν σε άλλα προγράμματα γραφικώνή απαιτούν ξεχωριστό πρόσθετο για να τα εγκαταστήσετε. Εξερευνήστε χαρακτηριστικά μοναδικά για το CorelDRAW.

Αυτή η λειτουργία όχι μόνο σας επιτρέπει να δημιουργήσετε διάφορα συμμετρικά μοτίβα - από απλά αντικείμενασε πολύπλοκα καλειδοσκοπικά εφέ - σε πραγματικό χρόνο, αλλά παρέχει επίσης την ευκαιρία να αυξηθεί η παραγωγικότητα αυτοματοποιώντας αυτή τη διαδικασία έντασης εργασίας.

Το φαινόμενο Pointillizer σάς επιτρέπει να δημιουργείτε γρήγορα υψηλής ποιότητας διανυσματικά μωσαϊκά με βάση οποιονδήποτε αριθμό επιλεγμένων ράστερ και διανυσματικές εικόνες. Βασισμένο σε καλλιτεχνικές τεχνικές pointillist, αυτό το εφέ είναι τέλειο για το σχεδιασμό αυτοκόλλητων αυτοκινήτων, καθώς και υλικών διακόσμησης παραθύρων και βιτρινών.

Σχεδιάστε οπουδήποτε και οποτεδήποτε! Επαναστατικό LiveSketch™, που υποστηρίζεται από την τεχνολογία τεχνητή νοημοσύνηΚαι μηχανική μάθηση, μετατρέπει τα σκίτσα σε ακριβείς διανυσματικές καμπύλες απευθείας σε συσκευές με οθόνη αφής.

Η δυνατότητα χειρισμού σκιών χρησιμοποιώντας τον κέρσορα του εργαλείου Shadow σε πραγματικό χρόνο σας επιτρέπει να αποφύγετε τη μονότονη κίνηση των σκιών στο πλαίσιο διαλόγου. Το box shadow που εισάγεται στο CorelDRAW είναι ιδανικό για όσους εργάζονται σε plotters και συσκευές κοπής. Αυτή η μοναδική δυνατότητα προσθέτει συμπαγείς σκιές σε αντικείμενα και κείμενο και επιταχύνει δραματικά τη ροή εργασίας σας μειώνοντας τον αριθμό των γραμμών και των κόμβων που υπάρχουν σε ένα σκιερό αντικείμενο.

Δημιουργικά εργαλεία για δημιουργικούς ανθρώπους

Διανυσματικά γραφικά

Με τα ισχυρά εργαλεία διανυσματικής εικονογράφησης του CorelDRAW, μπορείτε να μετατρέψετε πρωτόγονα σχήματα και γραμμές σε πολύπλοκα, πολύπλευρα έργα τέχνης. Τα ευέλικτα εργαλεία σχήματος και σχεδίασης σάς βοηθούν να σχεδιάζετε μια ποικιλία καμπυλών, ενώ τα εργαλεία περιγράμματος, κελύφους, ανάμειξης και πλέγματος σάς επιτρέπουν να προσθέτετε δημιουργικά εφέ σε διανυσματικές εικόνες.

• Διάταξη σελίδας

  Εδώ θα βρείτε όλα όσα χρειάζεστε για να δημιουργήσετε φυλλάδια, πολυσέλιδα έγγραφακαι άλλα υλικά. Εκμεταλλευτείτε την ευκαιρία να κρατήσετε χώρο για κείμενο ή γραφικά. Με τη μοντελοποίηση της διάταξης της σελίδας, το εργαλείο Template Text μπορεί να σας βοηθήσει να πάρετε μια ιδέα για το πώς θα μοιάζει το έγγραφό σας.

• ΕΠΕΞΕΡΓΑΣΙΑ ΦΩΤΟΓΡΑΦΙΑΣ

  Το PHOTO-PAINT περιέχει στρώματα ισχυρά εργαλείαΕπεξεργαστείτε, ρετουσάρετε και βελτιώστε τις εικόνες σας, ώστε να μπορείτε να προσαρμόσετε εύκολα το χρώμα και τον τόνο, να αφαιρέσετε ατέλειες, να διορθώσετε την προοπτική και πολλά άλλα Χρησιμοποιήστε το AfterShot Pro HDR για να δημιουργήσετε εκπληκτικές φωτογραφίες HDR από εικόνες RAW.

• Τυπογραφία

  Τα εξαιρετικά αποτελέσματα κατά την εργασία με κείμενο είναι εγγυημένα! Ένα πλήρες σύνολο εργαλείων τυπογραφίας σάς επιτρέπει να προσθέτετε εφέ σκιών και περιγράμματος, να τοποθετείτε κείμενο κατά μήκος των διαδρομών, να εφαρμόζετε εφέ αναδίπλωσης κειμένου και πολλά άλλα όμορφες επιγραφέςχρησιμοποιώντας τυπογραφικά εργαλεία OpenType - απολινώσεις, στολίδια, κεφαλαία και εγκεφαλικά επεισόδια.

• Χρώμα, γέμισμα και διαφάνεια

  Τα χρωματικά δείγματα σάς επιτρέπουν να εφαρμόζετε εύκολα χρώμα σε γεμίσματα και περιγράμματα και οι χρωματικές αρμονίες σας επιτρέπουν να δημιουργείτε χρωματικούς συνδυασμούς. Παρέχονται επίσης εργαλεία για τη ρύθμιση της διαφάνειας ενός αντικειμένου και το γέμισμα του αντικειμένου με μοτίβα, διαβαθμίσεις, γεμίσματα πλέγματος κ.λπ.

• Στυλ και σετ στυλ

  Η βάση σύνδεσης στυλ αντικειμένων διευκολύνει την εφαρμογή στυλ και συνόλων στυλ για γρήγορη και συνεπή διαμόρφωση ολόκληρων εγγράφων και πολλαπλών αντικειμένων και διευκολύνει τη δημιουργία πολλαπλών παραλλαγών του ίδιου σχεδίου

Σχεδιασμός για εκτύπωση και web

Μια συλλογή προεπιλογών και εργαλείων γραφικών Ιστού που θα σας βοηθήσουν να δημιουργήσετε ελκυστικό περιεχόμενο ιστού. Η δυνατότητα Μεταφόρτωση σε WordPress σχεδιάστηκε για να δημοσιεύει απευθείας μορφές εικόνας σε έναν ιστότοπο WordPress.

Το CorelDRAW κάνει την προετοιμασία εγγράφων για εκτύπωση όσο το δυνατόν πιο εύκολη. Ισχυρό σύστημαΗ διαχείριση χρωμάτων παρέχει έλεγχο συνέπειας χρωματικές παραμέτρουςεπί διάφορα μέσακαι εγγυάται την ακριβή αντιστοίχιση χρωμάτων πριν από την έναρξη της εκτύπωσης.

Υποστήριξη πάνω από 100 μορφές γραφικών, οι μορφές εικόνας, καθώς και οι μορφές δημοσίευσης, συμπεριλαμβανομένων των AI, PSD, PDF, JPG, PNG, SVG, DWG, DXF, EPS, TIFF κ.λπ., διευκολύνουν σημαντικά την εργασία με οποιοδήποτε στοιχείο του έργου.

Υψηλής ποιότητας περιεχόμενο χωρίς δικαιώματα

Δώστε τα έργα σας μοναδική εμφάνισημε μια εκτενή συλλογή περιεχομένου που περιλαμβάνει 7.000 εικόνες χωρίς δικαιώματα και πρότυπα σχεδίασης Οχημα, 1000 φωτογραφίες σε υψηλής ανάλυσης, 1000 Γραμματοσειρές TrueTypeκαι/ή OpenType, 150 επαγγελματικά πρότυπα, περισσότερα από 600 σιντριβάνια, διανυσματικά και ράστερ γεμίσματα κ.λπ. Όλα αυτά τα υλικά περιλαμβάνονται στο πακέτο γραφικών μας.

Αποτελεσματική διαδικασία ανάπτυξης σχεδιασμού

Πάρτε τον έλεγχο κάθε στοιχείου του εγγράφου σας! Ένα πρακτικό Docker Αντικειμένων σάς επιτρέπει να κάνετε αναζήτηση, απόκρυψη, εμφάνιση και μετονομασία αντικειμένων, καθώς και να αλλάξετε τη σειρά τους στη στοίβα. Μπορείτε να χρησιμοποιήσετε το docker Ιδιότητες αντικειμένου για να μορφοποιήσετε και να ελέγξετε τα χαρακτηριστικά αντικειμένων όπως το fill.

Οι άνθρωποι μερικές φορές με ρωτούν: "Πώς και σε ποιο πρόγραμμα δημιουργείται ο σχεδιασμός ιστοτόπων;" Είναι δύσκολο να απαντήσω σε αυτήν την ερώτηση ξεκάθαρα, γιατί κατά τη δημιουργία ενός σχεδίου ιστότοπου, προσωπικά χρησιμοποιώ πολλά διάφορες τεχνικέςκαι προγράμματα. Επί του παρόντος, η συντριπτική πλειοψηφία των σχεδιαστών ιστοσελίδων εργάζεται με διατάξεις που δημιουργούνται στο Photoshop. Αρχικά δημιουργήθηκε και προοριζόταν για επεξεργασία φωτογραφιών, αυτό το πρόγραμμα έχει πλέον συγκεντρώσει τόσα πολλά διάφορες λειτουργίες(συμπεριλαμβανομένης της εργασίας με διανυσματικά γραφικά), το οποίο χρησιμοποιείται οπουδήποτε, συμπεριλαμβανομένου του σχεδιασμού ιστοσελίδων. Αλλά όταν σχεδιάζετε μια διάταξη ιστότοπου, μερικές φορές χρειάζεστε άλλες λειτουργίες που ακόμη και το πανίσχυρο Photoshop δεν μπορεί να προσφέρει. Μιλάμε για διάνυσμα.

Ξεκινώντας: να ανακαλύψετε τις αποχρώσεις

Η σχεδίαση ενός ιστότοπου ξεκινά με την αποσαφήνιση και τη συμφωνία σχετικά με τις αποχρώσεις. Η τοποθεσία μπορεί να είναι "λάστιχο", ή μπορεί να είναι σταθερού πλάτους. Αυτό μπορεί να εξαρτάται, για παράδειγμα, εμφάνισηκεφαλίδες ιστότοπου - κεφαλίδα, ή στήλες - πλαϊνές γραμμές. Ανάλογα με το σκοπό του ιστότοπου, εξετάζεται η δομή της διεπαφής ιστού. Για παράδειγμα, τα ηλεκτρονικά καταστήματα φαίνονται πολύ καλύτερα σε σταθερό σχεδιασμό πλάτους έως 1000 pixel με μία πλαϊνή γραμμή στα αριστερά. Η πλαϊνή γραμμή περιέχει το μενού καταλόγου προϊόντων. Αυτή η επιλογήέχει εδραιωθεί σταθερά στο Διαδίκτυο και τώρα είναι αρκετά δύσκολο να βρεθεί ένα κατάστημα που να διαφέρει από αυτήν τη διάταξη στοιχείων. Η κατάσταση είναι διαφορετική για τους ιστότοπους πληροφοριών με τόνους πληροφορίες κειμένου. Εάν υπάρχει περισσότερο κείμενο στον ιστότοπο από γραφικά, τότε με σταθερό πλάτος τοποθεσίας ευρεία οθόνη άδεια πεδίαστα πλάγια θα είναι παράλογο. Με σχέδιο από καουτσούκ, το κείμενο θα γεμίσει ομοιόμορφα ολόκληρη την οθόνη, κάτι που θα αποφύγει τις συχνές κάθετη κύλιση(παντός είδους Wikipedia και παρόμοιες εγκυκλοπαίδειες).

Ας υποθέσουμε ότι πρέπει να αναπτύξουμε ένα σχέδιο για έναν εταιρικό ιστότοπο για μια εταιρεία που πωλεί ηλεκτρονικά είδη, με μια ενότητα "διαδικτυακό κατάστημα". Δηλώνουμε αμέσως:

1. σταθερό σχέδιο 1000 px.
2. μορφές αρχείων – psd (για τον προγραμματιστή-σχεδιαστή διάταξης) και jpg (για συμφωνία με τον πελάτη).
3. στυλ σχεδίασης (για παράδειγμα, "μινιμαλισμός" - λευκό φόντο, ελάχιστο χρώμα παρεμβατικό γραφικά στοιχεία, ή σύμφωνα με τις απαιτήσεις του εταιρικού στυλ).
4. Χρειάζομαι ένα λογότυπο σε διανυσματική μορφή.

Εάν επιτευχθεί συμφωνία με τον πελάτη σε αυτά τα θέματα, τότε μπορείτε να προχωρήσετε σε σκίτσα. Αν επιτευχθεί σε όλα εκτός από το σημείο 1 , τότε μπορείτε να διαφωνήσετε με κάτι όπως:

«Η σταθερή σχεδίαση σας επιτρέπει να δημιουργήσετε ομοιομορφία στην εμφάνιση του ιστότοπου. Σε οποιαδήποτε ανάλυση, όλα τα στοιχεία θα παραμείνουν στις θέσεις τους, όπου τα έθεσε ο προγραμματιστής, ενώ με σχέδια "καουτσούκ" διαφορετικές αναλύσειςΤα στοιχεία μετακινούνται και απομακρύνονται, γεγονός που, με περαιτέρω ανεξάρτητη πλήρωση του ιστότοπου από τον πελάτη, μπορεί να οδηγήσει σε επιλογές εμφάνισης που δεν προβλέπονταν κατά την αρχική ανάπτυξη. Μια σταθερή σχεδίαση 1000 px (από 920 έως 1000 px) θεωρείται σήμερα το πρότυπο για εταιρικούς ιστότοπους και ηλεκτρονικά καταστήματα, που υπαγορεύεται από στατιστικά στοιχεία (καθώς σύμφωνα με στατιστικά στοιχεία, ο αριθμός των χρηστών με οθόνες άνω των 1000 px σε πλάτος είναι η πλειοψηφία).

Δημιουργία διάταξης

Τώρα είναι η ώρα να αρχίσετε να σχεδιάζετε τη διάταξη. Δεδομένου ότι αυτό το άρθρο δεν είναι μάθημα, εδώ περιγράφω μόνο τις βασικές αρχές της δημιουργίας σχεδιασμού ιστοσελίδων. Στο CorelDraw το κάνω χώρο εργασίαςμε πλάτος 1920 px, το ύψος δεν είναι μικρότερο, μπορεί να ρυθμιστεί κατά τη διαδικασία ανάπτυξης. Ακολουθεί η δημιουργική φαντασία, περιορισμένη μόνο από τα όρια ΚΟΙΝΗ ΛΟΓΙΚΗκαι κατανόηση τεχνικές δυνατότητεςδιατάξεις. Σχεδιάζω μια κεφαλίδα, μια πλαϊνή γραμμή, μια περιοχή περιεχομένου και ένα υποσέλιδο, όλα εντός του πλάτους του ιστότοπου - 1000 px. Για ένα ηλεκτρονικό κατάστημα, είναι καλή ιδέα να σχεδιάσετε μερικές διαφάνειες για ένα ρυθμιστικό εικόνας. Συνήθως, τέτοιες διαφάνειες ενημερώνουν τους επισκέπτες για νέες συλλογές, αφίξεις προϊόντων ή μεγάλες εκπτώσεις. Αλλά προς το παρόν, στο στάδιο της σκιαγράφησης, σχεδιάζω απλώς την περιοχή του ολισθητήρα και τα χειριστήρια του.

Για το άρθρο, χωρίς ιδιαίτερες περικοπές, σκιαγράφησα ένα σκίτσο της διάταξης:

Στη συνέχεια, πρέπει να συμπληρώσετε αυτήν τη διάταξη με πληροφορίες. Προσθέτω αμέσως ένα λογότυπο, μενού και πεδίο εισαγωγής αναζήτησης. Συμπληρώνω αυθαίρετα τα στοιχεία μενού και το κείμενο της κύριας σελίδας, μπορείτε να το πάρετε από τον ιστότοπο που ο πελάτης υπέδειξε ως "Θέλω καλύτερα". Το κύριο πράγμα είναι να εμφανιστεί η σελίδα όπως μπορεί να φαίνεται στην πραγματικότητα. πειραματίζομαι χρωματικό σχέδιο, δηλώνω συνδέσμους μέσα στο κείμενο και στις τρεις καταστάσεις - σύνδεσμος, σύνδεσμος που τοποθετήθηκε, σύνδεσμος επίσκεψης. Το ίδιο πράγμα με τα στοιχεία μενού: Σχεδιάζω όλες τις καταστάσεις των στοιχείων μενού - ένα στοιχείο, ένα στοιχείο που τοποθετείται στο δείκτη του ποντικιού, ένα διευρυμένο μενού, στοιχεία υπομενού κ.λπ. Δεν μου λείπει ούτε μια λεπτομέρεια, καθώς η τελική εμφάνιση του ιστότοπου εξαρτάται από το πόσο λεπτομερής σχεδιάζω το σχέδιο.

Αυτή είναι η εμφάνιση μιας σελίδας, γεμάτη με πληροφορίες και στοιχεία διεπαφής, τα οποία μπορούν τώρα να σταλούν στον πελάτη για έγκριση:

Όταν συμφωνείτε για μια διάταξη, υπάρχουν πολλές επεξεργασίες στον πελάτη μπορεί να μην αρέσει το σχέδιο χρώματος ή η διάταξη των στοιχείων διεπαφής στη σελίδα. Κατά την ανάπτυξη στο CorelDraw, όλες αυτές οι διορθώσεις γίνονται πολύ γρήγορα. Κατ 'αρχήν, ο στόχος μας τώρα είναι να λάβουμε τη συγκατάθεση του πελάτη για την εμφάνιση της σελίδας και όλες οι τεχνικές αποχρώσεις της προετοιμασίας αρχείων για διάταξη μπορούν να αφεθούν για αργότερα.

Υπάρχουν πολλά κύρια σημεία στα οποία πρέπει να προσέξετε Ιδιαίτερη προσοχήκατά την ανάπτυξη σχεδίασης ιστότοπου στο CorelDraw:

Τυπογραφία ιστότοπου

Κατά τη δημιουργία μιας διάταξης, πρέπει να επιλέξετε αμέσως τη γραμματοσειρά που θα χρησιμοποιηθεί στον ιστότοπο. Το παράδειγμά μου χρησιμοποιεί Arial, αλλά υπάρχουν πολλές άλλες γραμματοσειρές που μπορούν να χρησιμοποιηθούν κατά τη δημιουργία ενός ιστότοπου. Κατά την υποβολή της διάταξης στον σχεδιαστή διάταξης, φροντίστε να τον ενημερώσετε για το επιλεγμένο και συμφωνημένο σύνολο γραμματοσειρών, καθώς και τα μεγέθη, τα χρώματα, τις επιλογές στυλ κ.λπ. Αυτό είναι απαραίτητο γιατί κατά τη δημιουργία γραφική διάταξηΕίναι εύκολο να αγνοήσετε εντελώς μια τόσο σημαντική πτυχή του σχεδιασμού ιστοσελίδων όπως η τυπογραφία. Επιπλέον, υπάρχουν πελάτες που έχουν εταιρικό στυλΗ εταιρεία διαθέτει εταιρική γραμματοσειρά. Είναι καλό αν αυτή η γραμματοσειρά είναι τυπική (το ίδιο Arial, για παράδειγμα), εάν όχι, τότε πρέπει να μάθετε από τον πελάτη (ή να μελετήσετε το βιβλίο επωνυμίας) εάν υπάρχει μια επιλογή εταιρικής γραμματοσειράς για τη δημιουργία εταιρικών ιστότοπων. Εάν όχι, τότε είναι αρμόδιο να εξηγήσει στον πελάτη ότι η ενσωμάτωση προσαρμοσμένες γραμματοσειρέςο ιστότοπος είναι γεμάτος μεγάλες δυσκολίες. Επομένως, το βιβλίο επωνυμίας θα πρέπει να περιέχει το όνομα της γραμματοσειράς, η οποία θα είναι όσο το δυνατόν πιο κοντά στην εμφάνιση στην εταιρική, αλλά θα εξακολουθεί να είναι τυπική. Μόνο σε αυτή την περίπτωση μπορούμε να διασφαλίσουμε τη μέγιστη ομοιομορφία στην εμφάνιση του ιστότοπου στις συσκευές των χρηστών.

Σχεδιάστε τον ιστότοπο "σε εικονοστοιχεία"

Η διάταξη πρέπει να σχεδιάζεται απευθείας σε pixel, χωρίς χιλιοστά, ίντσες ή γιάρδες. Ό,τι κάνουμε στον σχεδιασμό ιστοσελίδων υπολογίζεται σε pixel ή αν μιλάμε γιασχετικά με το σχέδιο "καουτσούκ" - ως ποσοστό, σε σχέση με το πλάτος ή το ύψος της οθόνης του χρήστη. Η διάταξη που στέλνουμε στον πελάτη πρέπει να έχει το αρχικό μέγεθος. Ξεδιπλώνοντάς το σε ΠΛΗΡΗΣ ΟΘΟΝΗ, ο πελάτης θα μπορεί να αξιολογήσει σωστά την εμφάνιση του μελλοντικού ιστότοπου.

Δημιουργήστε πολλαπλές διατάξεις ιστότοπου

Λίγοι σύγχρονοι ιστότοποι έχουν πανομοιότυπες εσωτερικές σελίδες. αρχική σελίδα. Και επομένως είναι λάθος να σχεδιάζουμε μόνο μία σελίδα. Επιπλέον, στις εσωτερικές σελίδεςεμφανίζονται στοιχεία που δεν βρίσκονται στην κύρια σελίδα. Για παράδειγμα " τριμμένη φρυγανιά”, επιπλέον μενού, έναν κατάλογο προϊόντων και πολλά στοιχεία που σχετίζονται με τον κατάλογο (κουμπιά «αγορά», «σύγκριση» κ.λπ.). Επομένως, εάν παίρνετε τη δουλειά σας στα σοβαρά, πρέπει να δώσετε στον πελάτη τουλάχιστον 3-5 σελίδες του ιστότοπου.

Μάθετε εκ των προτέρων σε ποιο CMS θα κατασκευαστεί ο ιστότοπος

Πολύ σημαντικό σημείο! Η δουλειά του σχεδιαστή εξαρτάται από το CMS πάνω στο οποίο θα κατασκευαστεί ο ιστότοπος. Καλός σχεδιαστής είναι αυτός που γνωρίζει τουλάχιστον κατά προσέγγιση δημοφιλή συστήματαελέγχου και τα κύρια χαρακτηριστικά αυτών των συστημάτων. Επομένως, θα είναι ευκολότερο και πιο γρήγορο να σχεδιάσετε ένα σχέδιο για ένα συγκεκριμένο CMS από το να λάβετε αργότερα ερωτήσεις από τον σχεδιαστή διάταξης όπως "σχεδίασες για Bitrix ή WordPress;" Καθόλου επαγγελματική ανάπτυξηΟι διεπαφές ιστού, όπου εξετάζεται η δράση κάθε στοιχείου, απαιτεί άριστη γνώση συγκεκριμένο σύστημαδιαχείριση ιστοσελίδας. Επομένως, η εκμάθηση του CMS είναι απαραίτητη και σημαντική.

Προετοιμασία αρχείων για διάταξη

Όταν η διάταξη εγκρίνεται από τον πελάτη, έρχεται μια σημαντική στιγμή για την προετοιμασία αρχείων για διάταξη. Το πόσο γρήγορα δημιουργείται το πρότυπο από τον σχεδιαστή διάταξης εξαρτάται από το πόσο καλά προετοιμάζονται τα αρχεία.

Οι σχεδιαστές διάταξης εργάζονται με αρχεία .psd, που σημαίνει ότι θα μεταφέρουμε ολόκληρο το σχέδιο στο Το πρόγραμμα Photoshop. Κάθε στοιχείο της διάταξης, είτε πρόκειται για λογότυπο είτε Γραμμή οριοθέτησηςστο μενού, θα πρέπει να βρίσκεται σε ξεχωριστό στρώμα. Τα στρώματα πρέπει να συνδυάζονται σε ομάδες.

Όχι όμως μόνο το αρχείο .psdπου χρειάζεται ο σχεδιαστής διάταξης. Για παράδειγμα, τα sprites μπορούν να κατασκευαστούν εκ των προτέρων και τα ίδια τα στοιχεία σχεδίασης, εάν βρίσκονται στα αρχεία και είναι ήδη κατάλληλα για τοποθέτηση στο πρότυπο, αυτό διευκολύνει μόνο τον σχεδιαστή διάταξης. Επομένως, αποθηκεύω πρώτα όλα τα στοιχεία σε αρχεία .pngκαι τοποθετήστε τα σε θεματικούς φακέλους. Συνήθως καταλήγω σε 5 κύριους φακέλους με το όνομα:

"HEADER", "SLIDER", "SIDEBAR", "CONTENT" και "FOOTER".

Μέσα σε αυτούς τους φακέλους υπάρχουν άλλοι φάκελοι που ονομάζονται ανάλογα με το σκοπό τους. Για παράδειγμα, στο φάκελο “HEADER” υπάρχουν φάκελοι όπως “Search” (αναζήτηση) με στοιχεία που σχετίζονται μόνο με το μπλοκ αναζήτησης, “Top-menu” ( Κορυφαίο μενού) με στοιχεία μενού, "Λογότυπο" - με λογότυπο. Τα στοιχεία μέσα σε αυτούς τους φακέλους ονομάζονται έτσι ώστε ο σχεδιαστής διάταξης να κατανοεί αμέσως σε τι προορίζεται ένα συγκεκριμένο στοιχείο. Για παράδειγμα, για τη λωρίδα μενού θα υπάρχουν πολλά αρχεία με τα ονόματα:

top-menu-bg.png (φόντο μενού), top-menu-shadow.png (σκιά μενού), top-menu-separator.png (γραμμή διαχωρισμού μενού), top-menu-hover-active (στοιχείο μενού , αλλάζει όταν αιωρείται ή βρίσκεται σε ενεργή κατάσταση).

Έχοντας λάβει ένα τέτοιο σετ έτοιμα αρχεία, οι σχεδιαστές διάταξης μπορούν να συνεργαστούν μόνο με αυτό. Αλλά για κάθε περίπτωση, μπορείτε να κάνετε τα συνηθισμένα .psd shku. Για να γίνει αυτό, πρέπει απλώς να δημιουργήσετε ομάδες και επίπεδα με τα ίδια ονόματα και να τακτοποιήσετε τα πάντα σύμφωνα με τη διάταξη.