Τα εργαλεία των Graphic Designers μας

Οι γραφίστες μας είναι σίγουρα οι πιο υπομονετικοί συνεργάτες: “μεγάλωσε αυτό 2px”, “κάνε λίγο πιο μπλε αυτή την απόχρωση”, “κόψε εδώ”, “πρόσθεσε λίγη σκιά εκεί”. Ακούνε προσεκτικά και πραγματοποιούν όλες μας τις επιθυμίες μας, μέχρι να πάρουμε το αποτέλεσμα που φανταστήκαμε, ακόμη καλύτερο! Και το σπουδαιότερο; Όταν κολλήσουμε σε ένα σημείο και νιώθουμε ότι κάτι λείπει από την εικόνα ή δεν μπορούμε να εξηγήσουμε πώς θέλουμε ακριβώς να γίνει, διαβάζουν τις σκέψεις μας, μπαίνουν σε instant mood έμπνευσης και απλά δημιουργούν!

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

Adobe Illustrator

Είναι η αρχή των πάντων! Σχεδόν όλα τα γραφιστικά μας projects, ξεκινάνε με χρήση του Illustrator. Από την πιο απλή εικόνα που θα χρειαστεί ένα blog post, μέχρι το redesign ολόκληρων σελίδων, όλα τα designs έχουν τη βάση τους στο συγκεκριμένο πρόγραμμα. Οι γραφίστες μας το χρησιμοποιούν είτε για να επεξεργαστούν κάποιο vector γραφικό (logo, icon κλπ), είτε για να ξεκινήσουν από το μηδέν τη σχεδίαση.

Το γεγονός ότι τα vector γραφικά βασίζονται σε μαθηματικές εκφράσεις, επιτρέπουν στον designer να προβεί σε πολλές επεμβάσεις της εικόνας ευκολότερα, αλλά και σε αλλαγές μεγέθους, που δεν επηρεάζουν το τελικό αποτέλεσμα ως προς την ανάλυση ή την ποιότητα. Με τη μετάβαση του internet σε ένα πιο responsive περιβάλλον, τα γραφικά είναι απαραίτητο να προσαρμόζονται πλέον στις διάφορες πλατφόρμες και μεγέθη, με την καλύτερη δυνατή ποιότητα. Το Illustrator είναι ιδανικό γι αυτόν τον σκοπό, καθώς οτιδήποτε έχει σχεδιαστεί με τη χρήση του, μπορεί να αυξομειωθεί επ’ άπειρον χωρίς την ελάχιστη παραμόρφωση!

Adobe Photoshop

Το Photoshop είναι το πλέον γνωστό σχεδιαστικό εργαλείο, κυρίως λόγω της εκτεταμένης λήψης ψηφιακών φωτογραφιών με διάφορα μέσα (tablets, smartphones, ψηφιακές φωτογραφικές μηχανές κ.λπ.) και της δυνατότητας που έχουν στη συνέχεια οι χρήστες, ώστε να τις επεξεργαστούν ψηφιακά. Στην TopHost, το Photoshop χρησιμεύει σε δύο επίπεδα: στην επεξεργασία των φωτογραφιών αλλά και των εικόνων που έρχονται από το Illustrator.

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

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

Τα pixels, που αποτελούν μια εικόνα στο Photoshop, μπορεί να υστερούν απέναντι στα vectors του Illustrator, η σύνθεση της εικόνας, όμως, γίνεται αρκετά ευκολότερα και με πολύ μεγαλύτερη λεπτομέρεια εδώ. Το ιδανικό; Δημιουργείς τα vectors που επιθυμείς στο Illustrator και τα μεταφέρεις σαν smart object στο Photoshop, ώστε να δημιουργήσεις ένα πιο σύνθετο αποτέλεσμα!

Adobe Flash Professional

Το Adobe Flash Professional είναι το πρόγραμμα στο οποίο δημιουργούνται όλα τα banners και τα animations που θα δεις στο site της TopHost ή στις διαφημίσεις της. Πρόκειται για ένα πρόγραμμα εύχρηστο για τους designers, αφού το γραφιστικό του περιβάλλον παρέχει πολλές έτοιμες επιλογές (σχήματα, πινέλα κ.λπ.) χωρίς την άμεση χρήση κώδικα, καθιστώντας το πολύ βοηθητικό στον σχεδιασμό. Αν παρόλα αυτά επιθυμείς να γράψεις εσύ τον κώδικα, σου παρέχει και αυτήν τη δυνατότητα.

Παράλληλα, παραθέτει ένα timeline με όλα τα καρέ που έχεις χρησιμοποιήσει, ενώ ταυτόχρονα σε ενημερώνει για τη διάρκεια του animation, ανάλογα με τον αριθμό των καρέ. Μπορείς να κάνεις συνεχείς live δοκιμές μέχρι να πετύχεις το αποτέλεσμα που θέλεις.

Θα θυμάσαι ότι στα post για τα 100 SEO tips αναφέραμε πώς είναι προτιμότερο να χρησιμοποιείς πια HTML5 στο site σου και όχι Flash (tip #67). Η Adobe, δεν θα μπορούσε φυσικά παρά να προσαρμοστεί στις εξελίξεις, και να δώσει τη δυνατότητα στους designers να κάνουν export τα αρχεία που δημιουργούν σε HTML5, ώστε να λειτουργούν παντού χωρίς πρόβλημα!

Windows Movie Maker / Audacity

Τον τελευταίο καιρό έχουμε ξεκινήσει να ετοιμάζουμε μερικά videos μέσα από τα γραφεία της TopHost, σαν έναν ακόμη τρόπο επικοινωνίας με τους followers και τους fans μας στα social media. Μέσα από τα συγκεκριμένα videos, θέλουμε να μεταφέρουμε το κλίμα της εταιρίας και γι’ αυτόν τον λόγο δεν αναζητήσαμε τη βοήθεια κάποιου εξωτερικού συνεργάτη, αλλά προτιμήσαμε να κρατήσουμε τον ερασιτεχνικό χαρακτήρα της δικής μας δημιουργίας.

Βέβαια, ακόμη και ένα ερασιτεχνικό video απαιτεί στη συνέχεια ένα μικρό editing, για την επιδιόρθωση κάποιων πλάνων ή του ήχου. Σε αυτές τις περιπτώσεις έχουμε επιλέξει δύο πολύ απλά, εύχρηστα και δωρεάν εργαλεία, το Windows Movie Maker για την εικόνα και το Audacity για τον ήχο. Με το Windows Media Player έχεις τη δυνατότητα να επεξεργαστείς σε βασικό επίπεδο την εικόνα του video, αλλά και να προσθέσεις τα εφέ που επιθυμείς σε αυτό. Το Audacity αναλαμβάνει να τελειοποιήσει τον ήχο σου: μπορείς να κόψεις τα κομμάτια που δεν σου αρέσουν, να μειώσεις το θόρυβο του περιβάλλοντος ή ακόμα και να προσθέσεις άλλους ήχους και ηχητικά εφέ.

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

Online Free Tools

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

Wordmark

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

CSS Gradient Button

Αν χρειάζεσαι κάποιο κουμπί στο site σου ή σε κάποιο newsletter, το CSS Gradient Button θα σου λύσει τα χέρια. Μπορείς να κάνει όποια αλλαγή θέλεις σε χρώμα, σχήμα, κείμενο, γραμματοσειρά κ.λπ. χωρίς να χρειαστεί να γράψεις ούτε μία γραμμή κώδικα! Αντίθετα, όταν έχεις καταλήξει στην τελική μορφή του button, σου παρέχει έτοιμο το CSS, ώστε να το τοποθετήσεις όπου επιθυμείς.

CSS Sprites Generator

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

Ο γραφίστας, αφού επιλέξει τις εικόνες που θέλει να εισάγει σε μια σελίδα, τις ανεβάζει στο CSS Sprites Generator κι εκείνο τις τοποθετεί συνολικά σε μία εικόνα, η οποία ονομάζεται sprite. Παράλληλα, παράγεται το CSS που θα χρειαστεί ο προγραμματιστής, για να διαχειριστεί τις εικόνες μέσα στο sprite και χρησιμοποιώντας τον κώδικα που του δίνει ο generator, μπορεί να απομονώσει κάθε μια από τις εικόνες του sprite και να τις τοποθετήσει σε όποιο σημείο της σελίδας επιθυμεί.

Με αυτόν τον τρόπο, κάθε φορά που ανοίγει το site, φορτώνεται ουσιαστικά μόνο μία εικόνα, το sprite, εξασφαλίζοντας τα λιγότερα αιτήματα στον server και έτσι το μικρότερο δυνατό loading time.

Για παράδειγμα, οι τρόποι πληρωμής στο cart της TopHost, που εμφανίζονται σε όλους με αυτόν τον τρόπο:

Είχαν δημιουργηθεί αρχικά στο παρακάτω sprite:

Color Combos
Σε περίπτωση που βρίσκεσαι σε αναζήτηση χρωματικής παλέτας ή έχεις βρει κάποιο χρώμα που θέλεις να χρησιμοποιήσεις και ψάχνεις ιδέες για να το συνδυάσεις, τo Color Combos είναι ό,τι πρέπει για να πάρεις έμπνευση! Εκεί μπορείς να βρεις πολλές προτάσεις συνδυασμών ή ακόμα και τυχαία χρώματα για να διαλέξεις. Αν βρίσκεσαι στο στάδιο αναζήτησης της παλέτας για το site σου, μια βόλτα προς τα εκεί, σίγουρα θα σε βοηθήσει!

Αν χρησιμοποιείς κι εσύ κάποιο γραφιστικό εργαλείο για τα δικά σου designs, μοιράσου το μαζί μας με ένα σχόλιο!