Κυριακή, 19 Δεκεμβρίου 2010

Αναλυτικές οδηγίες για να φτιάξετε banner για τις ιστοσελίδες σας

Καλημέρα σας φίλες και φίλοι μου. Σήμερα θα προσπαθήσω να μεταδώσω τη γνώση μου για την επιτυχημένη κατασκευή ενός απλού μπάνερ για μία ιστοσελίδα. Αυτό είναι κάτι που με «ανάγκασε» η ενασχόληση μου με το blogging να μάθω και θεωρώ πως είναι καλό να το μοιραστώ μαζί σας. Φυσικά δεν διεκδικώ τα πρωτεία σε αυτή την προσπάθεια, αφού και άλλες, αξιόλογες ιστοσελίδες έχουν δώσει τα φώτα τους επάνω στο συγκεκριμένο θέμα, εγώ απλά θα επιχειρήσω να κάνω «φέτες» την όλη διαδικασία ώστε αυτή να γίνει κατανοητή και στους λιγότερο εξοικειωμένους με το ιντερνετ χρήστες με τον τρόπο που την κατανόησα και εγώ.

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

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

Θα μπορούσε
να εμφανίζει τη διεύθυνση της ιστοσελίδας μας ή το όνομα της ιστοσελίδας μας πχ αντί για gorilaki.blogspot.com μόνο το Gorilaki. Θα μπορούσε να έχει κάποιο σλόγκαν πχ στη δική μου περίπτωση έχω βάλλει το «Για όλους τους αναγνώστες της δικής μας ζούγκλας». Σε κάθε περίπτωση μέσα στις δυνατότητες της εικόνας, επιλέγουμε κάτι που είναι σχετικό με την ιστοσελίδα μας. Δεν θα ήταν σωστό ας πούμε να βάλω ένα λιοντάρι ή ένα αμάξι εδώ ως εικόνα.

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

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

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

Παίρνουμε το μπάνερ μας στην τελική του μορφή, το ανεβάζουμε και το αποθηκεύουμε σε μία ιστοσελίδα που φιλοξενεί και διαμοιράζει αρχεία εικόνων στο διαδίκτυο. Τέτοιες ιστοσελίδες είναι το http://photobucket.com ή το http://imageshack.us . Εγώ χρησιμοποιώ το πρώτο. Θα χρειαστεί να εγγραφείτε, η εγγραφή είναι δωρεάν και στο λογαριασμό που θα ανοίξετε θα μπορείτε να φιλοξενείτε τις δικές σας εικόνες. Εκεί αποθηκεύουμε το μπάνερ μας ως εικόνα.

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


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

Το σημείο που είναι χρωματισμένο με μπλε το αντικαθιστούμε με τη διεύθυνση της εικόνας από την ιστοσελίδα φιλοξενίας της. Στο photobucket θα τη βρείτε αντιγράφοντας την από το σημείο που λέει Direct link.

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

Το blogger έχει έτοιμο γκατζετ που δέχεται HTML. Από το μενού σχεδίαση, επιλέγουμε την προσθήκη gadget και από τις επιλογές που θα μας βγάλει επιλέγουμε το HTML/JavaScript εκεί θα βάλουμε τον κώδικα μαζί με κάτι άλλο που θα το εξηγήσω στις επόμενες γραμμές.

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

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


Κάπου εδώ φτάσαμε στο τέλος της διαδικασίας. Καλορίζικο!
Για οποιαδήποτε απορία έχετε μη διστάσετε να επικοινωνήσετε μαζί μου στο gorilaki@windowslive.com.

1 σχόλιο:

mara είπε...

Ευχαριστούμε για την γνωση που προσφερεις στου νεους blogger!!