Animation - Δώστε κίνηση στην εικόνα σας

Βοήθεια και προτάσεις για το καλύτερο πρόγραμμα επεξεργασίας εικόνας, και γραφικών.

Συντονιστές: Super-Moderators, Graphics Moderators

Απάντηση
Άβαταρ μέλους
goofakos
Δημοσιεύσεις: 494
Εγγραφή: 18 Απρ 2005 00:05
Τοποθεσία: Somewhere between that riff and the other one.

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από goofakos » 07 Αύγ 2005 18:37

Εργαλεία: Photoshop, Imageready

Εάν θέλετε να φτιάξετε ένα banner που θα τραβήξει την προσοχή των επισκεπτών ενος website, δείχνοντας τους το περιεχόμενο της σελίδας σας, θα πρέπει να προσθέσετε κίνηση(animation) σε αυτό. Αυτή τη δουλειά μπορούν να την κάνουν πολλά προγράμματα (εγώ επέλεξα το Imageready). Είναι πολύ εύκολο να φτιάξετε animated εικόνες (.gif) με αλλαγές εικόνων/κειμένων/εφέ με το Imageready, αλλά και σε πιο "προχωρημένο" επίπεδο θα μπορείτε να κάνετε ρεαλιστικά εφε βροχής/χιονιού/"matrix" κ.ά. :)

Είναι το πρώτο μου tutorial εδώ και προσπάθησα να είμαι όσο πιο κατανοητός γίνεται. Το tutorial χωρίζεται σε 7 βήματα.

1) Ανοίγουμε στο photoshop μία εικόνα η οποία θα είναι το background του banner. Εγώ επέλεξα αυτήν:
Εικόνα

2) Επιλέγουμε απτο photoshop όλη την εικόνα (CTRL+A ή με το Rectangular Marquee Tool[M]), κάνουμε αντιγραφή (CTRL+C) και ανοίγουμε το Imageready. Εκεί ανοίγουμε ένα νέο αρχείο (CTRL+N) και στις διαστάσεις βάζουμε τις διαστάσεις που έχει και η εικόνα μας στο Photoshop (λογικά, απτην στιγμή που κάναμε την αντιγραφη στο Photoshop, πήρε απο μόνο του τις διαστάσεις), αν διαλέξατε την εικόνα που έχω και εγώ, οι διαστάσεις είναι w 247 h 86. Μόλις το ανοίξετε, κάντε επικόλληση την εικόνα(CTRL+V) [αυτήν που είχαμε πάρει απτο Photoshop].

3) Τώρα πάμε πίσω στο Photoshop. Εγώ πρόσθεσα το κείμενο Animation Tutorial στο κέντρο της εικόνας(με το Type Tool[T]). Πατάμε CTRL+E (Layer -> Merge Down). Ξανα επιλέγουμε όλη την εικόνα (CTRL+A), κάνουμε αντιγραφή (CTRL+C), πάμε στο ImageReady και κάνουμε επικόλληση (CTRL+V).
Εικόνα

4) Πάμε στο Photoshop, και στο παράθυρο "History" πατάμε δεξιό κλικ πάνω απο το "Merge Down" και μετά Delete(αν δεν έχετε το παράθυρο History, εμφανίστε το μέσω του menu, Window -> History).
Εικόνα
Έτσι βλέπουμε ότι στα Layers ξαναεμφανίζεται το "Animation Tutorial" (ή ότι άλλο κείμενο βάλατε εσείς).

5) Τώρα θα βάλουμε ένα μικρό εφέ στο κείμενο. Πάμε Filter -> Stylize -> Wind [Method: Wind // Direction: From the right]. Πατήστε CTRL+E (merge down), επιλέξτε την εικόνα (CTRL+A) -> αντιγραφή(CTRL+C) -> πάμε στο Imageready και κάνουμε επικόλληση (CTRL+V).
Εικόνα

6) Επαναλαμβάνουμε το βήμα 4. Όταν σβήσουμε τo "Merge Down" απτο History, αμέσως μετά σβήνουμε και το "Wind". Επαναλαμβάνουμε το βήμα 5, αλλά στις ρυθμίσεις του Wind, αντι για "Direction: From the right" βάζουμε "Direction: From the left".
Εικόνα

7) Απτο Photoshop τελειώσαμε. Τώρα το animation είναι δουλειά του Imageready. Κάτω αριστέρα(συνήθως) έχετε έναν πίνακα με τα menu "Animation - Image Map - Slice". Εσείς επιλέξτε το Animation(Window -> Animation). Σαυτό τον πίνακα, πάνω δεξιά υπάρχει ένα βελάκι. Πατήστε σε αυτο και θα βγεί ένα menu. Επιλέξτε "Make Frames from Layers". Αυτό που έχουμε στον πίνακα τώρα:
Εικόνα
Από εκεί που λέει "0 sec." και έχει ένα βελάκι στην κάθε εικόνα, ρυθμίζουμε την χρονική απόσταση απο την εξαφάνιση της μιας εικόνας και της εμφάνισης της επόμενης. Εγώ έβαλα "0,1 sec" - "1 sec" - "0,5 sec" - "1 sec". Για να δείτε αν σας αρέσει ή οχι, μπορείτε να "παίξετε" το animation με το κουμπί PLAY που υπάρχει κάτω απο τις εικόνες (για να σταματήσετε πατάτε το ίδιο κουμπί). Εφόσον έχετε τελειώσει και θέλετε να δημιουργήσετε την εικόνα (.gif), πατάτε CTRL+SHIFT+ALT+S (File -> Save Optimized As) και είστε έτοιμοι :)

Το αποτέλεσμα:
Εικόνα


(Images hosted by ImageShack®)
He who asks is a fool for five minutes, but he who does not ask remains a fool forever.

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από cordis » 08 Αύγ 2005 01:49

ωραίος! έτσι να ανεβαίνουν τα γραφικά!
..τις εικόνες τις μετέφερα στο freestuff ;)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
MichalisS
Honorary Member
Δημοσιεύσεις: 2372
Εγγραφή: 03 Ιαν 2005 23:50

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από MichalisS » 08 Αύγ 2005 01:54

Θα ήταν καλύτερο πιστεύω, αν στο Imageready, έκανες διπλό το κάθε layer. Για παράδειγμα, το 4 να είναι και 5, το 3 να είναι 6, το 2 να είναι 7 και το 1 να είναι 8, για να μη δείχνει ότι διακόπτεται!
Κατα τα άλλα, πολύ καλή δουλεία! :)

BobirasGR
Δημοσιεύσεις: 58
Εγγραφή: 05 Ιουν 2005 15:51

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από BobirasGR » 10 Αύγ 2005 01:59

Φιλε πολη ....γα**το :D :D :D

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από cordis » 10 Αύγ 2005 12:33

Πιο ωραίες εκφράσεις παρακαλώ!
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από cdhyper » 10 Αύγ 2005 15:55

Δε νομίζω ότι είναι καλή ιδέα να πηγαίνεις κάθε τόσο στο photoshop και να κάνεις copy paste στο imageready. Φτιάχνεις από την αρχή τα layers που θες στο photoshop, μετά πατάς το κουμπάκι "jump to imageready" που βρίσκεται στην μπάρα εργαλείων κάτω κάτω και στα μεταφέρει όλα. Μετά φτιάχνεις το animation που θες και σε κάθε frame του ενεργοποιείς το ανάλογο layer (με το ματάκι που υπάρχει δίπλα σε κάθε layer you know). Πιο εύκολο και πιο πρακτικό.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από Cmg__ » 11 Αύγ 2005 03:43

akrivws. Kai den einai aparaithto na to kaneis se photoshop. Doyleveis kathe frame ksexwrista se oti prog thes , tto vazeis se ena file kai to kaneis ena Importaki!

Άβαταρ μέλους
MichalisS
Honorary Member
Δημοσιεύσεις: 2372
Εγγραφή: 03 Ιαν 2005 23:50

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από MichalisS » 11 Αύγ 2005 04:16

Τότε δεν είναι απαραίτητο να γίνει ούτε σε Imageready, cmg! Ένα απλό gif animator και κάνεις τη δουλειά σου! ;)

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από cordis » 11 Αύγ 2005 12:28

Και γιατί να χρησιμοποιήσεις gif animator; Πας στο http://www.animationfactory.com/ και κατεβάζεις ότι θέλεις.. ;) :lol: :lol:
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από Cmg__ » 12 Αύγ 2005 02:48

MatrozoC έγραψε:Τότε δεν είναι απαραίτητο να γίνει ούτε σε Imageready, cmg! Ένα απλό gif animator και κάνεις τη δουλειά σου! ;)

Ναι, μιλώντας πάντα για Imageready :)

Άβαταρ μέλους
MichalisS
Honorary Member
Δημοσιεύσεις: 2372
Εγγραφή: 03 Ιαν 2005 23:50

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από MichalisS » 12 Αύγ 2005 02:59

Ε και ο goofakos μιλά πάντα για Photoshop! :P

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από Cmg__ » 12 Αύγ 2005 17:57

xexexe :P
alla milame gia kati pio grhgoro.tespa

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από emphasy » 12 Αύγ 2005 18:04

Wraio goofakos :)

stml
Δημοσιεύσεις: 13
Εγγραφή: 09 Μάιος 2005 02:02

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από stml » 26 Σεπ 2005 16:03

...θα ήθελα να με διαφωτίσει κάποιος αν μπορώ και πως να αλάξω size ή να cropαρω ένα animation αρχείο... ευχαριστω

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Animation - Δώστε κίνηση στην εικόνα σας

Δημοσίευση από manolism » 26 Σεπ 2005 16:23

Στο Photoshop όχι, γιατί ανοίγει μόνο ένα frame του animation.

Μπορείς όμως να το ανοίξεις στο Image Ready και να τα κάνεις και τα δύο.

Απάντηση

Επιστροφή στο “Adobe Photoshop, illustrator”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης