Πόσο δύσκολο νοµίζετε πως είναι το να φτιάξετε το δικό σας site από το µηδέν και µάλιστα σχεδόν δωρεάν; Σε αυτές τις σελίδες θα σχεδιάσουµε µαζί ένα υπερβολικά απλό µεν, πλήρως λειτουργικό site δε, το οποίο θα βασίζεται σχεδόν αποκλειστικά σε εικόνες και γραφικά. Ξεκαθαρίζουµε από την αρχή ότι στόχος µας δεν είναι η δηµιουργία ενός πλήρους προσωπικού site ή blog, αλλά µίας απλής σελίδας, µέσω της οποίας οποιοσδήποτε µπορεί να προβάλλει οτιδήποτε!
Για να το θέσουµε πιο απλά, εµείς στήσαµε για εσάς ένα έτοιµο site, το οποίο µπορεί, απλά, να απεικονίζει εικόνες σε κάθετη σειρά, τη µία µετά την άλλη. Σας παρέχουµε έτοιµο τον απαιτούµενο κώδικα, µαζί µε πρόσθετα αναλυτικά σχόλια, για να µπορείτε να κάνετε µικρές µετατροπές βάσει των αναγκών σας.
Στις σελίδες αυτές θα σας δείξουµε επίσης πώς να ετοιµάζετε τις εικόνες, που θα µπορείτε κυριολεκτικά να “πετάτε” µέσα σε ένα φάκελο για να δηµιουργείτε νέα sites. Όσο για το τι απαιτείται, µάλλον δεν χρειάζεται να ανησυχείτε. Πρώτα απ’ όλα, θα χρειαστείτε ένα πρόγραµµα επεξεργασίας bitmap γραφικών που να µπορεί να αποθηκεύει αρχεία .JPG.
Αν… αγχωθήκατε ακόµη και µε αυτά, ουσιαστικά µιλάµε για σχεδόν οποιοδήποτε σύγχρονο πρόγραµµα επεξεργασίας γραφικών, εµπορικό ή δωρεάν. Μία λίστα µε τις προτάσεις µας θα βρείτε στο πλαίσιο “Με τι να σχεδιάσω;” (στη συγκεκριµένη λύση εµείς χρησιµοποιούµε το Photoshop).
Στη συνέχεια θα χρειαστείτε µία συνδροµή σε µία υπηρεσία φιλοξενίας αρχείων (τους λεγόµενους “web hosts”). Αυτή συνοδεύεται από µεταβαλλόµενο κόστος ανάλογα µε τις απαιτήσεις σας -µπορεί να ξεκινά από €2 το µήνα και να φτάνει στο… άπειρο, ανάλογα µε το πόσο bandwidth, χώρο και δυνατότητες απαιτείτε-, κάτι που δεν χρειάζεται να σας απασχολήσει αρχικά για µία µόνο σελίδα, και µάλιστα δοκιµαστική, όπως αυτή που θα φτιάξουµε µαζί.
Τέλος, θα πρέπει να έχετε τη δική σας διεύθυνση URL (π.χ. όπως το Texnologia έχει τη διεύθυνση URL https://texnologia.net), κάτι που έχει µέσο κόστος γύρω στα €10 το χρόνο. Και εδώ έρχεται το µοναδικό “δύσκολο” τµήµα της διαδικασίας: θα πρέπει επίσης να συνδέσετε τo domain name με ένα πακέτο web hosting για να φιλοξενηθεί στο διαδίκτυο το website σας Το δύσκολο είναι ότι δεν µπορούµε να σας δώσουµε αναλυτικές οδηγίες για τη διαδικασία, αφού τα πράγματα και οι καταστάσεις διαφέρουν υπηρεσία σε υπηρεσία. Ανατρέξτε, ωστόσο, στο πλαίσιο “Αρχεία και ονόµατα”, που µάλλον θα σας βοηθήσει να καταλάβετε τι τρέχει!
Τέλος, να σας παροτρύνουµε µετά από όσα θα δούµε µαζί εδώ να διαβάσετε και τα σχόλια στο αρχείο “index.html”, το οποίο θα βρείτε στο πακέτο αρχείων που σας προσφέρουµε στο Texnologia.Net.
Βήμα 1
Το site που θα σχεδιάσουµε θα έχει οριζόντια ανάλυση 920 pixels, ιδανική για προβολή σε οθόνες µε ανάλυση από 1.024×768 και πάνω (δηλαδή στην πλειονότητα των χρηστών µε πρόσβαση στο Internet). Δεν έχει σηµασία η κάθετη ανάλυση. Δηµιουργήστε, λοιπόν, ένα νέο έγγραφο στην εφαρµογή της προτίµησής σας, δηλώστε ως οριζόντια ανάλυση “920 pixels”, ως κάθετη ό,τι επιθυµείτε (π.χ. “1.000 pixels”) και συνεχίζουµε!
Βήμα 2
Φορτώστε µία αντιπροσωπευτική εικόνα του τι θέλετε να “λέει” το site σας στην εφαρµογή – µέσω drag ‘n’ drop της εικόνας στο περιβάλλον τους ή από το File>Open. Πατήστε το V από το πληκτρολόγιο και φέρτε το layer της εικόνας στο ανώτερο σηµείο του site σας, “τραβώντας” το µε το ποντίκι (κρατώντας πατηµένο το αριστερό πλήκτρο πάνω του). Πατήστε Ctrl+T και, µε πατηµένο το Shift, “τραβήξτε” τις γωνίες της εικόνας σας µέχρι να έχει το µέγεθος που επιθυµείτε – εµείς θέλαµε απλά να καλύπτει το ανώτερο σηµείο του site.
Βήμα 3
Προσθέστε µία µάσκα στο layer της εικόνας σας -κάντε κλικ στο τρίτο εικονίδιο κάτω από το παράθυρο των layers- και πατήστε το D για να επιλέξετε τα προκαθορισµένα χρώµατα “λευκό-µαύρο”. Πατήστε G για να επιλέξετε το εργαλείο γεµίσµατος µε διαβαθµίσεις (µε Shift+G µεταβαίνετε ανάµεσα στο απλό γέµισµα και το εργαλείο γεµίσµατος µε διαβαθµίσεις). Επιλέξτε τη µάσκα µε ένα κλικ στο δεύτερο εικονίδιο του layer και στη συνέχεια “τραβήξτε” µε το mouse το εργαλείο gradient από το ανώτερο προς το κατώτερο τµήµα της, για να προστεθεί διαφάνεια που θα δίνει την εντύπωση πως η εικόνα εξαφανίζεται προς τα κάτω.
Βήμα 4
Επιλέξτε το εργαλείο κειµένου µε T από το πληκτρολόγιο. Κάντε κλικ σε ένα σηµείο του χώρου εργασίας και πληκτρολογήστε το όνοµα του site σας. Να θυµάστε ότι µε Ctrl+T µπορείτε να “αλλοιώνετε” τα layers σας και µε V να τα µετακινείτε όπου επιθυµείτε. Δηµιουργήστε ένα ή περισσότερα layers κειµένου για τον τίτλο του site και µετακινήστε τα στο πάνω αριστερά σηµείο του. Καθώς τα επεξεργάζεστε, µπορείτε να αλλάξετε το χρώµα του καθενός µε ένα κλικ στο σχετικό χρωµατιστό κουτάκι στην οριζόντια γραµµή παραµέτρων. Στη συνέχεια, επιλέξτε ένα από αυτά και διαλέξτε Layer>Layer Style>Outer Glow. Κάντε κλικ στο τετραγωνάκι µε το χρώµα του παραθύρου που θα εµφανιστεί και επιλέξτε ένα από τα χρώµατα της φωτογραφίας σας.
Βήμα 5
Δώστε τις υπόλοιπες τιµές ως εξής: Screen, 75%, 0%, Softer, Spead: 6%, Size: 9 px και αφήστε τις υπόλοιπες ως έχουν. Επικυρώστε τις αλλαγές. Μόλις προσθέσατε ένα εφέ λάµψης στο κείµενό σας, ώστε να ξεχωρίζει ευκολότερα από την πιθανότατα πολύχρωµη εικόνα που επιλέξατε ως background. Αν έχετε περισσότερα από ένα layers κειµένου, δεν χρειάζεται να επαναλάβετε τη διαδικασία – µπορείτε να αντιγράψετε το -έτοιµο πλέον- εφέ λάµψης από το ένα layer στο άλλο. Γι’ αυτό, προσέξτε ότι κάτω από το layer θα αναγράφεται το εφέ που προσθέσατε. “Πιάστε” το, κρατώντας το πλήκτρο Alt πατηµένο, κάνοντας αριστερό κλικ πάνω του και, κρατώντας το πατηµένο, “τραβήξτε” το σε ένα από τα υπόλοιπα layers του τίτλου σας. Επαναλάβετε όσες φορές χρειάζεται.
Βήμα 6
Είναι πιθανό να έχει ήδη δηµιουργηθεί ένα χάος από layers στο χώρο εργασίας σας. Οµαδοποιήστε τα: επιλέξτε όλα τα layers του background σας (αν χρησιµοποιήσατε περισσότερες από µία εικόνες), κρατώντας το Shift πατηµένο και κάνοντας κλικ πάνω τους στο παράθυρο των layers. Πατώντας Ctrl+G οµαδοποιείτε όσα layers είχατε επιλεγµένα. Βάλτε σε φακελάκια µε αυτό τον τρόπο ξεχωριστά τα layers του background και του λογοτύπου σας, ώστε να είναι ευκολότερη η εργασία σας στη συνέχεια.
Βήμα 7
Πατήστε M για να επιλέξετε το εργαλείο επιλογής χώρου (µε Shift+M µεταβαίνετε ανάµεσα στα διαφορετικά modes του – παραλληλόγραµµο, ελλειπτικό κ.λπ.). Επιλέξτε το παραλληλόγραµµο mode επιλογής χώρου και “τραβήξτε” ένα παραλληλόγραµµο σε ένα σηµείο της σελίδας σας, όπως βλέπετε στην εικόνα µας. Δηµιουργήστε ένα νέο layer µε Alt+Ctrl+Shift+N. Αλλάξτε στο εργαλείο “επίπεδου” γεµίσµατος µε G (θυµηθείτε, µε Shift+G αλλάζετε ανάµεσα στα modes του) και γεµίστε µε όποιο χρώµα θέλετε το παραλληλόγραµµό σας. Πατήστε V για να ενεργοποιήσετε το εργαλείο µετακίνησης, 8 για να κάνετε το παραλληλόγραµµο κατά 20% διάφανο και µε τα εργαλεία στοίχισης στη γραµµή παραµέτρων (ακριβώς κάτω από το βασικό µενού της εφαρµογής) “κεντράρετε” οριζόντια το παραλληλόγραµµό σας (µε το 5ο εργαλείο στοίχισης).
Βήμα 8
Δηµιουργήστε µε Alt+Ctrl+Shift+N ένα νέο layer. Αλλάξτε το mode του σε Linear Burn από το σχετικό µενού πάνω αριστερά στο παράθυρο των layers. Πατήστε D (για default χρώµατα), G (για εργαλείο “επίπεδου” γεµίσµατος) και, ενώ έχετε επιλεγµένο το νέο layer, κάντε Ctrl+αριστερό κλικ στην εικόνα του προηγούµενου layer (στο παράθυρο των layers) µε το υπάρχον παραλληλόγραµµό σας, για να επιλεγεί το περίγραµµά του. Διαλέξτε Select>Modify>Expand>5 pixels. Μετά γεµίστε το νέο παραλληλόγραµµο µε µαύρο χρώµα. “Πιάστε” µε αριστερό κλικ και “τραβήξτε” το νέο layer, ώστε να είναι κάτω από το προηγούµενο παραλληλόγραµµο. Πατήστε V και µετά 2 για να το κάνετε διάφανο κατά 80%. Κάντε πάλι Ctrl+αριστερό κλικ στην εικόνα του layer µε το προηγούµενο παραλληλόγραµµο, για να επιλέξετε το περίγραµµά του, και “κόψτε το” από το νέο µε Ctrl+X.
Βήμα 9
Πατήστε T για να επιλέξετε το εργαλείο κειµένου. “Τραβήξτε” ένα παραλληλόγραµµο µέσα στο ήδη υπάρχον και απλά γράψτε ό,τι θέλετε να “λέει” το site σας στους επισκέπτες του. Να θυµάστε: µε V µπορείτε να µετακινήσετε το layer σας, ενώ µε Ctrl+T να το “αλλοιώσετε” (να αλλάξετε µέγεθος στα γράµµατά σας). Επαναλάβετε τα προηγούµενα βήµατα για να δηµιουργήσετε ένα νέο παραλληλόγραµµο κάτω από το υπάρχον. Προτιµήστε να του δώσετε διαφορετικό χρώµα.
Βήμα 10
Αυτό ήταν: Τα δύσκολα τελείωσαν! Όπως και πριν, προσθέστε µε το εργαλείο κειµένου µέσα στο νέο πλαίσιο ένα τηλέφωνο επικοινωνίας ή ό,τι άλλο επιθυµείτε. Τώρα πια δεν χρειάζεται να σας ξαναδώσουµε οδηγίες για το πώς να το µετακινήσετε, να αλλάξετε το µέγεθος ή το χρώµα του, να το “κεντράρετε” στο παραλληλόγραµµο.
Βήμα 11
Εµείς προσθέσαµε ένα ακόµη παραλληλόγραµµο µε µία διεύθυνση e-mail, ώστε ο επισκέπτης να µπορεί -όταν θα έχουµε έτοιµο το site- µε ένα κλικ σε αυτό το σηµείο να µας στείλει ένα µήνυµα µέσω e-mail.
Βήμα 12
Πατήστε C για να διαλέξετε το εργαλείο crop (και εδώ µε Shift+C µεταβαίνετε ανάµεσα στα διαφορετικά modes του εργαλείου). Σηµειώστε στη σελίδα ένα παραλληλόγραµµο που να περιέχει µόνο τα στοιχεία του site σας, και πατήστε Enter ή κάντε διπλό κλικ για να “κόψετε ό,τι προεξέχει” (και είναι περιττό), κρατώντας µόνο ό,τι θέλετε να εµφανίζεται.
Βήμα 13
Αλλάξτε στο εργαλείο ορισµού slices (βρίσκεται στο ίδιο εργαλείο µε το Crop, οπότε πατήστε Shift+C για να µεταβείτε σε αυτό). Χωρίστε µε αυτό, οριζόντια, την εικόνα σας στις διαφορετικές ενότητές της – φανταστείτε, όπως δηλώνει και το όνοµα του εργαλείου, ότι την κόβετε σε “φέτες” ανάλογα µε το θέµα καθεµίας. Όπως βλέπετε, η δική µας εικόνα έχει τέσσερεις “φέτες”: µία για το λογότυπο, µία για το κείµενο και δύο για τα πλαίσια επικοινωνίας. Προσέξτε να ορίσετε κάθε “φέτα” στο πλήρες πλάτος της εικόνας, δηλαδή από τέρµα αριστερά µέχρι τέρµα δεξιά.
Βήμα 14
Πατήστε Alt+Shift+Ctrl+S για να µεταβείτε στο παράθυρο αποθήκευσης εικόνων για χρήση στο Internet. Το Photoshop θα έχει “καταλάβει” πως η εικόνα σας είναι χωρισµένη σε “φέτες” και θα τις αποθηκεύσει σε αυτόνοµα αρχεία. Εσείς απλώς πατήστε Save και επιλέξτε ένα φάκελο όπου θέλετε να αποθηκευτούν. Προτείνουµε να δώσετε ως όνοµα “MySite” για να ταιριάζουν απόλυτα µε τα αρχεία που ήδη έχουµε ετοιµάσει και να µην ταλαιπωρείστε µε µετονοµασίες και επεξεργασία παραµέτρων στη συνέχεια.
