Ένα ιδιαίτερο κεφάλαιο στην επεξεργασία εικόνας είναι και ο συγκερασμός του web design με το image editing. Ο σχεδιασμός ενός web site αποτελεί μία λεπτή διαδικασία που συνδυάζει το προσωπικό γούστο, την ολοκληρωμένη κατάρτιση και γνώση και βέβαια τα κατάλληλα μέσα για να δημιουργηθεί ένα ικανοποιητικό τελικό αποτέλεσμα.
Η σωστή αντιμετώπιση του web design
Ο σχεδιασμός ενός web site μπορεί να χαρακτηριστεί μία διαδικασία που στηρίζεται κατά ένα μεγάλο μέρος στο προσωπικό γούστο. Ωστόσο, δεν πρέπει να παραβλεφθούν παράγοντες όπως η συμπερίληψη σε αυτό αξιόλογων πληροφοριών και γραφικών. Παράλληλα, θα πρέπει να διατηρηθεί ο σχεδιασμός και το περίγραμμά του με έξυπνο περιεχόμενο, “καθαρό”, απλό κι επαγγελματικό.
Ίσως δεν υπάρχει τίποτα χειρότερο από ένα web site που είναι κατάμεστο από links που μπερδεύουν τον επισκέπτη, ή ένα web site με πάρα πολλά γραφικά που δεν μας επιτρέπουν να έχουμε ένα γρήγορο download. Αυτό έχει πολύ μεγάλη σημασία, γιατί συνήθως οι χρήστες του ίντερνετ δεν διαθέτουν την υπομονή να ασχοληθούν με ένα δύσκολο site.
Αυτό οφείλεται στην πληθώρα επιλογών που υπάρχουν και επιτρέπουν στο χρήστη να μετακινηθεί από site σε site γρήγορα, μέχρι να βρει αυτό που τον ενδιαφέρει, ή αυτό που αναζητά. Αυτό που πρέπει να λάβουν σοβαρά υπόψη τους οι web designers, είναι ότι πρέπει το web site που σχεδιάζουν να βοηθά τον επισκέπτη να προσανατολίζεται μέσα σε αυτό, και να του παρέχει την πληροφόρηση που απαιτεί με ξεκάθαρο τρόπο.
Βασικές αρχές του web design
Υπάρχουν δύο βασικές μέθοδοι προβολής των web pages. Είναι η μέθοδος table based και η μέθοδος frame based. Τα table sites χρησιμοποιούν μία σελίδα κάθε φορά. Αντίθετα τα frame sites είναι περισσότερο πολύπλοκα, αλλά παρέχουν μεγαλύτερη ποιότητα στην ευκολία χρήσης και στο χρόνο download. Στα frame sites η σελίδα χωρίζεται σε τομείς. Σε κάθε τομέα είναι δυνατή η προβολή διαφορετικών web pages.
Αυτή η διαδικασία βοηθά στη μείωση του χρόνου download για νέες σελίδες, γιατί περιέχει αντικείμενα όπως navigation bars, λογότυπα και “μπάρες”, που παραμένουν σταθερά σε όλη την έκταση του site. Έτσι δεν χρειάζεται να “ξαναφορτωθούν” όταν μία νέα σελίδα προβάλλεται στην οθόνη. Πλέον σήμερα σχεδόν όλα τα web sites σχεδιάζονται με βάση αυτή τη συγκεκριμένη μέθοδο. Για τις ανάγκες σχεδιασμού ενός web site χρησιμοποιούνται μια σειρά από εφαρμογές οι οποίες συνήθως συνδυάζονται μεταξύ τους.
Σε αυτές τις εφαρμογές περιλαμβάνονται τα Macromedia Flash, Fireworks, Dreamweaver Ultra Dev, Authorware, Freehand, Adobe Photoshop και Xara 3D, οι οποίες χρησιμοποιούνται για την παραγωγή μίας μεγάλης γκάμας σχεδίων, που καλύπτουν τις ανάγκες από το επίπεδο των μεγάλων εταιρικών sites έως και των flash animation sites. Μία συμπληρωματική παράμετρος στον σχεδιασμό ενός site, που ενσωματώνεται όλο και περισσότερο τα τελευταία χρόνια, είναι και η δυνατότητα επιλογής της γλώσσας που θα χρησιμοποιεί ο επισκέπτης.
Web design και image editing
Ένας σημαντικός παράγοντας για να κάνουμε πιο ελκυστικό ένα web site, είναι η ενσωμάτωση σε αυτό προηγμένων γραφικών και εικόνες υψηλής ποιότητας. Για να το επιτύχουμε, θα χρειαστούμε τα κατάλληλα εργαλεία ώστε να είμαστε σε θέση να επεξεργαστούμε εικόνες που προέρχονται είτε από μια αναλογική φωτογραφική κάμερα, είτε (το πιο συνηθισμένο) από μια ψηφιακή φωτογραφική κάμερα.
Παράλληλα κρίνεται απαραίτητη η χρήση των κατάλληλων εργαλείων για τη δημιουργία εταιρικών λογότυπων και γενικότερα για να προσδώσουμε επαγγελματική υφή στην εμφάνιση του web site. Μία σταθερή αξία στο χώρο της επεξεργασίας εικόνας δεν είναι άλλη από το Adobe PhotoShop, που επιτρέπει την καλύτερη απόδοση μιας φωτογραφίας, ενώ παράλληλα έχει τη δυνατότητα να επεξεργαστεί animation products και java rollovers. Σαν εναλλακτική λύση, θα μπορούσε να χρησιμοποιηθεί και το Macromedia Dream Weaver, το οποίο έχει παρόμοιες δυνατότητες με το Adobe Photoshop αλλά είναι κατασκευασμένο πάνω σε web page design software.
Μία τρίτη εναλλακτική λύση είναι η χρήση του Jasc Paint Shop, το οποίο μπορεί να επεξεργαστεί μια εικόνα σχεδόν στα ίδια επίπεδα με το Adobe Photo Shop, αλλά με ενσωματωμένο ένα ιδιαίτερα αποτελεσματικό studio επεξεργασίας animated gif. Ωστόσο η Adobe προσφέρει στην αγορά και μια σειρά από απόλυτα εξειδικευμένα πακέτα εφαρμογών, που καλύπτουν τις ανάγκες του web design και της επεξεργασίας εικόνας.
Το πρώτο πακέτο είναι το Adobe Web Collection, το οποίο περιλαμβάνει 4 συνολικά εφαρμογές σε μία αναβαθμισμένη σουίτα (Go Live, PhotoShop, Illustrator και LiveMotion). Με αυτό το πακέτο, ο σχεδιαστής ενός web site είναι σε θέση να υλοποιήσει τις δημιουργικές του ιδέες και να προχωρήσει στη δημιουργία δυναμικών λύσεων στον ιδιαίτερα ανταγωνιστικό χώρο του interactive Internet. Το δεύτερο πακέτο της Adobe είναι το Go Live6.
Με αυτό το πακέτο μάς δίνεται η δυνατότητα για γρήγορο σχεδιασμό, κτίσιμο και διαχείριση του περιεχομένου ενός web site. Στο πακέτο περιλαμβάνεται και το νέο Adobe Web Workgroup Server, το οποίο προσφέρει προηγμένα χαρακτηριστικά διαχείρισης. Ένα τρίτο πακέτο είναι το Adobe Live Motion, το οποίο προσφέρεται για ανθρώπους που ασχολούνται επαγγελματικά με το σχεδιασμό και την ανάπτυξη ενός web site. Δίνει τη δυνατότητα χειρισμού μιας ποικιλίας από formats συμπεριλαμβανομένων των Macromedia Flash και Quick Time.
Σμίκρυνση φωτογραφίας για χρήση σε website
Σε αυτό το θέμα χρησιμοποιούμε το Photoshop προκειμένου να μικρύνουμε το μέγεθος μιας φωτογραφίας που θέλουμε να συμπεριλάβουμε σε ένα web site, αφού έτσι διευκολύνουμε κατά πολύ τους “ψηφιακούς επισκέπτες” μας.
“Μικρότερες” φωτογραφίες
Βήμα 1
Ας υποθέσουμε ότι έχουμε στην κατοχή σας μια πολύ ωραία φωτογραφία που επιθυμείτε να τη συμπεριλάβετε σε ένα web site. Ωστόσο το μέγεθός της είναι περίπου 1.4 Mbytes, λίγο μεγάλη δηλαδή για μια τέτοια δουλειά. Αυτός είναι και ο μόνιμος πονοκέφαλος όσων ασχολούνται με τη σχεδίαση web sites. Να κερδίσουν δηλαδή χρόνο ανοίγματος του site βάζοντας μικρότερες φωτογραφίες. Τώρα μπορείτε με το Photoshop να έχετε μεγάλες φωτογραφίες με μικρό μέγεθος.
Βήμα 2
Για να το κάνετε αυτό επιλέξτε File – Save for Web ή το shortcut Ctrl-Alt-Shift-S. Ανοίγει το πρόγραμμα που όπως λέει και το όνομα του είναι ειδικό για αποθήκευση για το Internet. Επιλέξτε την καρτέλα 2-up και στα settings επιλέξτε GIF 32 No Dither. Tο GIF είναι ένα πολύ διαδεδομένο format γιατί δημιουργεί από μόνο του μικρού μεγέθους φωτογραφίες. Στο δεξιά μέρος της οθόνης βλέπετε τη φωτογραφία ως GIF. Όπως μπορείτε να παρατηρήσετε το μέγεθος της φωτογραφίας έχει κατευθείαν μειωθεί στα 196.1Kbytes.
Βήμα 3
Καλά μέχρι εδώ, αλλά για να δούμε τι καλύτερο μπορούμε να κάνουμε. Μπορούμε να αφαιρέσουμε κάποιες αποχρώσεις χρωμάτων χωρίς να αλλοιωθεί πολύ η φωτογραφία μας. Στην καρτέλα των χρωμάτων επιλέξτε short by hue για να ομαδοποιηθούν τα χρώματα σύμφωνα με την απόχρωσή τους. Στο παράδειγμά μας υπάρχουν πολλές αποχρώσεις του μπλε αλλά και του γκρι. Το άσπρο είναι μάλλον απαραίτητο για τα χιονισμένα φύλα και έτσι δεν πρέπει να το αφαιρέσουμε από την παλέτα των χρωμάτων.
Βήμα 4
Προκειμένου να προφυλάξετε ένα χρώμα πρέπει να το “κλειδώσετε”. Για να το κάνετε αυτό επιλέξτε το συγκεκριμένο χρώμα από την παλέτα και κάντε κλικ στο κουμπί padlock, που βρίσκεται στο κάτω μέρος της παλέτας χρωμάτων. Εάν το χρώμα κλειδωθεί θα εμφανίζεται στην παλέτα με μια κουκίδα, που σημαίνει ότι δεν μπορείτε να το αφαιρέσετε από τη φωτογραφία. Κάντε zoom για να μεγαλώσετε τη φωτογραφία και να επιλέξετε προσεκτικά ποια χρώματα μπορούν να φύγουν και ποια πρέπει απαραίτητα να υπάρχουν.
Βήμα 5
Για να αφαιρέσετε ένα χρώμα επιλέξτε το από την παλέτα και πατήστε το κουμπί του κάδου που εμφανίζεται στο κάτω δεξιά μέρος της. Το χρώμα φεύγει από τη φωτογραφία και βέβαια η αλλαγή της ποιότητάς της είναι εμφανής. Για να μπορείτε να ξαναφέρετε πίσω ένα χρώμα που δεν έπρεπε τελικά να βγάλετε, πατήστε το Alt και κάντε κλικ στο Remember. Έτσι αν αφαιρέσετε ένα χρώμα και η φωτογραφία σας χαλάσει πάρα πολύ, επιλέξτε Reset για να το επαναφέρετε.
Βήμα 6
Όπως βλέπετε έχουμε μειώσει τον αριθμό των χρωμάτων σε 22 και το μέγεθος του αρχείου σε 154.1Kbytes, μια μείωση της τάξης του 20 τις εκατό, καθόλου άσχημα δηλαδή. Το μόνο άσχημο είναι πως το δάσος δεν είναι και τόσο όμορφο όπως πριν, αφού έχει χάσει πολλά από τα χρώματά του. Για να ξαναδώσουμε λεπτομέρεια στη φωτογραφία μας θα χρησιμοποιήσουμε το Dither option. Συνήθως η πιο καλή επιλογή είναι το Diffusion, αλλά το Noise δουλεύει εξίσου καλά. Μην παραξενευτείτε που το μέγεθος του αρχείου θα μεγαλώσει, είναι λογικό αφού θέλουμε περισσότερη λεπτομέρεια.
Βήμα 7
Ίσως το πιο χρήσιμο εργαλείο για τη συμπίεση είναι το Lossy. Επιλέξτε την καρτέλα 4-up για να δείτε το αποτέλεσμα με το επίπεδο συμπίεσης που επιλέγουμε στο Loosy. Πάνω αριστερά είναι η αυθεντική μας φωτογραφία. Δίπλα της αυτή χωρίς το Lossy ενεργοποιημένο. Κάτω αριστερά το Lossy έχει τιμή 30 δεξιά 50. Όπως μπορείτε να δείτε το μέγεθος της φωτογραφίας έχει μειωθεί πολύ περισσότερο. Στην αριστερή, το μέγεθος του αρχείου είναι κάτω από 100Kbytes χωρίς ιδιαίτερες απώλειες από τη φωτογραφία έτσι όπως τη διαμορφώσαμε προηγουμένως, ενώ η τελευταία έχει μέγεθος 77.5Kbytes, αλλά σίγουρα έχει χάσει αρκετά.
Βήμα 8
Εδώ κάναμε fit to screen, για να δούμε τη διαφορά που έχουν οι τέσσερις εκδόσεις της φωτογραφίας μας συνολικά. Όπως μπορείτε να παρατηρήσετε η διαφορά είναι ελάχιστη. Αν λοιπόν έχετε σκοπό να χρησιμοποιήσετε αυτό τη φωτογραφία σε ένα τέτοιο μέγεθος, μπορείτε χωρίς να ανησυχείτε να βάλετε και την τελευταία έκδοσή της στο web αφού δεν θα καταλάβει κανείς τη διαφορά. Μπορείτε να προχωρήσετε ακόμη περισσότερο αφαιρώντας κι άλλα χρώματα, και αυξάνοντας το επίπεδο του Lossy, φτάνει να μην το παρακάνετε και καταστρέψετε τη φωτογραφία.
