Κυριακή, 30 Μαΐου 2010

Print this post

ANIMATED BANNERS ΓΡΗΓΟΡΑ ΚΑΙ ΕΥΚΟΛΑ

Καλημέρα και καλή εβδομάδα σε όλους. Μετά από τρεις εβδομάδες το Locus Blogus είναι και πάλι μαζί σας με συμβουλές, κόλπα και προτάσεις. Σήμερα θα δούμε πως μπορούμε γρήγορα και εύκολα να κάνουμε animation εικόνες και banners μέσω διαδυκτίου και αυτό χάρη στο gifninja.com.
Η παραπάνω ιστοσελίδα μας επιτρέπει να κάνουμε animation μέχρι και πέντε εικόνες, να μετατρέψουμε ένα video σε animated gif, να κάνουμε resize (να αλλάξουμε το μέγεθος) σε μια εικόνα και να χωρίσουμε ένα animated gif αρχείο. Όλα αυτά γίνονται μέσα σε ένα λεπτό. Εμείς θα ασχοληθούμε για το πως μπορούμε να κάνουμε ένα animated banner για το blog μας. Η υπηρεσία μας δίνει επίσης και κώδικα για την προσθήκη αυτού.
Επιλέγουμε από τη δεξιά στήλη το create an animated gif και μεταφερόμαστε στη σελίδα όπου θα ανεβάσουμε τις εικόνες που θέλουμε (κλικ). Σ' αυτή τη σελίδα έχουμε δύο επιλογές: 1) να ανεβάσουμε μόνοι μας τις εικόνες που θέλουμε να απαρτίζουν το banner μας ή 2) να τις στείλουμε σε ένα zip file λέγοντας με ποια σειρά τις θέλουμε για να το κάνει κάποιος άλλος. Εμείς θα ασχοληθούμε με την πρώτη επιλογή.
Διαλέγουμε τις εικόνες που θέλουμε (μέχρι πέντε) και τις επιλέγουμε με το browse για να εμφανιστούνε στα άσπρα πλαίσια. Όταν τελειώσουμε με αυτό επιλέγουμε την ταχύτητα που θέλουμε να εναλλάσονται οι εικόνες στο banner μας σέρνοντας το κουμπί προς τα αριστερά για πιο αργά και προς τα δεξιά για πιο γρήγορα. Όταν τελειώσουμε και με αυτό πατάμε το κουμπί make my gif! Θα ανοίξει μια σελίδα που θα δείχνει σε προεπισκόπηση το banner και έχει τρεις επιλογές: 1)Yes - It's fantastic (το επιλέγουμε αν το αποτέλεσμα μας αρέσει), 2)No - It 's too slow/fast (το επιλέγουμε αν θέλουμε να αλλάξουμε την ταχύτητα με την οποία εναλλάσονται οι εικόνες) και 3)No - Let me start over (το επιλέγουμε αν δε μας αρέσει και θέλουμε να τα κάνουμε όλα από την αρχή). Αν όλα πάνε καλά ακολουθούμε την πρότη επιλογή και θα ανοίξει μαι σελίδα η οποία μας ρωτάει αν θέλουμε το δημιούργημα μας να αξιολογηθεί ή όχι. Επιλέγουμε αυτό που θέλουμε, βάζουμε ένα τίτλο για το banner μας και κάποιες ετικέτες (tags) και πατάμε save gif. Μέσα σε λίγα δευτερόλεπτα θα έχουμε το banner μας και από κάτω θα εμφανίζεται ο κώδικας για την προσθήκη αυτού σε blogs και web sites και από κάτω ένας άλλος κώδικα που χρησιμεύει για την προσθήκη του banner σε forums.
Αν βάλετε τον κώδικα στο ιστολόγιο σας θα εμφανιστεί το banner αλλά αν πάει κάποιος να κάνει κλικ πάνω του τότε θα μεταφερθεί στο gifninja.com. Εμείς θέλουμε όποιος κάνει κλικ στο banner μας να μεταφέρεται στο διαδυκτιακό μας χώρο όταν κάποιος άλλος εκτός από εμάς το έχει προσθέσει στο ιστολόγιο του. Άρα πρέπει να πειράξουμε λιγάκι τον κώδικα. Πάμε να δούμε πως γίνεται αυτό με ένα παράδειγμα.
Δημιούργησα το παρακάτω banner:

gifninja.com Create custom animated gifs at gifninja.com!

Αν κάνετε κλικ πάνω του θα μεταφερθείτε στο gifninja.com καθώς επίσης εμφανίζεται και ένα μύνημα κάτω από το banner μας. Αυτό σίγουρα δε μας αρέσει.
Πάμε να δούμε πως θα φέρουμε τον κώδικα στα μέτρα μας. Ο κώδικας είναι ο παρακάτω:

<a href="http://www.gifninja.com"><img src="http://www.gifninja.com/Workspace/3350cd36-0d07-4fb5-a1fa-73196c239bf6/output.gif" /></a><center>gifninja.com <a href="http://www.gifninja.com">Create custom animated gifs at gifninja.com!</a></center>

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

<a href="http://hackaday-thema.blogspot.com/p/radio.html"><img src="http://www.gifninja.com/Workspace/3350cd36-0d07-4fb5-a1fa-73196c239bf6/output.gif" /></a>

και το banner θα εμφανίζεται ως εξής:



Αν κάνετε κλικ πάνω στο banner που βγαίνει από τον πειραγμένο κώδικα θα δείτε ότι μεταφερόμαστε στη σελίδα που θέλουμε και όχι στο gifninja.com. Σε περίπτωση που θέλουμε το banner να εμφανίζεται πιο κεντραρισμένο απλά βάζουμε τον κώδικα ανάμεσα στο <center> και </center> δηλαδή:

<center> κώδικας </center>

Αν κάνουμε κάτι τέτοιο τότε το banner μας θα εμφανίζεται όπως παρακάτω:



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

26 σχόλια:

  1. Kalo kai aplo einai kai den xriazete na kaneis egkatastasi!
    Egw xrisimopoio kai ena allo 2 xronia tora to exw kanei me egkatastasi omos,
    Easy GIF Animator

    ΑπάντησηΔιαγραφή
  2. @mygreek Ναι όλα γίνονται on line. Δε χρειάζεται πρόγραμμα.

    ΑπάντησηΔιαγραφή
  3. jimmako γεια σου και παλι...χαρηκα που ξαναβλεπω αναρτησεις σου....και μαλιστα πολυ χρησιμη για ολους...ειδικα για βιντεο σε gif που με ενδιαφερει πολυ...θα μπω να το ψαξω!!!!μονο διορθωσε τη σελιδα που παραπεμπει εκει, γιατι εχει προβλημα στη διευθυνση....πολλοι δεν θα μπορεσουν να μπουν...
    (εκει που λεει:και αυτό χάρη στο gifninja.com.)
    χαρηκα που ξαναεπικοινωνησα μαζι σου..:pan de lees

    ΑπάντησηΔιαγραφή
  4. @pan de lees Καλησπέρα. Ευχαριστώ για τη διόρθωση. Η αλήθεια είναι ότι το έγραψα κάπως βιαστικά και δεν ξέρω αν έχει και άλλο λαθάκι αν και δε νομίζω γιατί το τσεκάρισα τρεις φορές. Όντως και τοconvert από video σε GIF είναι πολύ καλό. Αυτό βέβαια γίνεται και με το Format Factory, ένα δωρεάν πρόγραμμα πάρα πολύ καλό. Στο συνιστώ. Με μια αναζήτηση στο Google θα το βρεις.

    ΑπάντησηΔιαγραφή
  5. Φίλε hack συγχαρητήρια για το blog αυτό!!
    Χρειάστηκα να κάνω κάποια πράγματα στο blog μου και βρήκα εδώ τις καλύτερες και πιο έυκολες οδηγίες.

    Έβαλα ως και το "back to top" , απλά μάλλον λόγω του template μου (λέω εγώ) δεν μου παίρνει εικονίδιο, δουλεύει όμως άψογα.

    Καλό μήνα :-)
    Και ακόμη ομορφότερο καλοκαίρι.
    (αν έχω απορίες σχετικά με το blogging μπορώ να απευθυνθώ εδω εε) ;

    Φιλιά

    ΑπάντησηΔιαγραφή
  6. @Βάσσια Ευχαριστώ. Χαίρομαι που βοήθησα. Βεβαίως και μπορείς να ρωτήσεις ότι θέλεις. Απλά στείλε ένα email. Δεν ήξερες ότι έχω και αυτό το ιστολόγιο;

    ΑπάντησηΔιαγραφή
  7. Όχι..... :-( , το κατάλαβες εε;

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

    ΑπάντησηΔιαγραφή
  8. @Βάσσια Δεν είναι τίποτα. Αν κάνεις μια φορά την αρχή μετά θα δεις ότι είναι παιχνιδάκι.

    ΑπάντησηΔιαγραφή
  9. @Ανώνυμος Όντως είναι πολύ καλό.

    ΑπάντησηΔιαγραφή
  10. to banner tou locusblocus apo pou to eftia3es gt me endiaferei na kanw kati paromoio.

    ΑπάντησηΔιαγραφή
  11. @Ανώνυμος Εκεί χρησιμοποιήθηκε photoshop. Απλά μια γραμματοσειρά είναι όπου έβαζα ένα - ένα γράμμα για να το μετακινώ όπου θέλω και τα χρωμάτισα.

    ΑπάντησηΔιαγραφή
  12. kai kati allo.Ti mege8os grammatoseiras xrisimopoiises gt emena m vgainei megalo otan to vazo sto blogg mou.

    ΑπάντησηΔιαγραφή
  13. @Ανώνυμος μήπως σου βγαίνει μεγάλο γιατί το banner το έχεις σε μεγάλο μέγεθος; Η υπηρεσία δεν κάνει σμίκρυνση. Η γραμματοσειρά δεν παίζει ρόλο ή το μέγεθος αυτής.

    ΑπάντησηΔιαγραφή
  14. Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

    ΑπάντησηΔιαγραφή
  15. pws allazw to mege8os tou banner m omws?

    ΑπάντησηΔιαγραφή
  16. @Ανώνυμος Κανονίζεις το μέγεθος των φωτογραφιών που θα απαρτίζουν το banner πριν χρησιμοποιήσεις την υπηρεσία.

    ΑπάντησηΔιαγραφή
  17. Συγχαρητηρια hackaday. Πολύ καλή η ανάρτηση σου.
    Καλή συνέχεια.

    ΑπάντησηΔιαγραφή
  18. @ΚΩΣΤΑΣ....Ο VATOLAKKIOTIS Ευχαριστώ Κώστα. Να 'σαι καλά.

    ΑπάντησηΔιαγραφή
  19. Καρνταση μου τρομερη αναρτηση.
    Σε ευχαριστω

    ΑπάντησηΔιαγραφή
  20. @τηανοςCan Να 'σαι καλά. Προσεχώς! Έρχοντε καλύτερες.

    ΑπάντησηΔιαγραφή
  21. όντως καταπληκτική ανάρτηση φίλε.. Το έψαχνα καιρό αυτό...

    ΑπάντησηΔιαγραφή
  22. @Johnpatra Με μια αναζήτηση στη Google θα βρεις πολλές παρόμοιες λύσεις. Απλά αυτή είναι η πιο γρήγορη και η πιο εύκολη νομίζω.

    ΑπάντησηΔιαγραφή
  23. Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

    ΑπάντησηΔιαγραφή

back to top