Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από Joakim » 15 Νοέμ 2010 23:50

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή της σελίδας μας σε κομμάτια)

Τι πρέπει να θυμηθούμε

Crop Tool

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

Εξαγωγή εικόνας σε μορφή JPG.

Η διαδικασία που πρέπει να επακολουθήσετε για να αποθηκεύσετε μια εικόνα, γραφικό ως BMP είναι η εξής, File > Save As > Save as type : JPG> ok.

Δημιουργία Νέου Φακέλου

Για να δημιουργήσετε ένα νέο φάκελο στον υπολογιστή σας, απλά πηγαίνετε στην επιφάνεια υπολογιστή desktop κάντε δεξί κλικ και έπειτα New>Folder. Ονομάστε τον νέο φάκελο ‘Website’.

! Τι φτιάξαμε μέχρι τώρα : σημείωση, ο κάθε ένας από εμάς θα έχει διαφορετικό αποτέλεσμα μιας και φτιάξαμε την σελίδα μας, με διαφορετικό χρώμα header, διαφορετικό λογότυπο και διαφορετική φωτογραφία στην περιοχή Slider. Πάραυτα ο βασικός σχεδιασμός πρέπει να είναι ο ίδιος.

Εικόνα

Μάθημα 1β : Κόψιμο σελίδας, τώρα θα κόψουμε την σελίδα μας, σε διάφορα μέρη, τα οποία μετά στο επόμενο κεφάλαιο θα τα ενσωματώσουμε στην ιστοσελίδα μας.

1. Ανοίγουμε το αρχείο του προηγούμενου μαθήματος

2. Παίρνουμε το Crop Tool που βρίσκετε στην αριστερή στήλη μας, εργαλειοθήκη.

3. Crop 1.
Διαστάσεις : W: 20 H: 850
Τοποθέτηση : Χ: 20 Υ: 0
Έπειτα διπλό αριστερό κλικ στο επιλεγόμενο πεδίο που έχει εμφανιστή.
Βλέπουμε στην Οθόνη μας να εμφανίζετε το επιλεγμένο σημείο μόνο.
Ακολουθούμε την διαδικασία αποθήκευσης για αρχείο JPG με ονομασία αρχείου background.
Ακολουθούμε την διαδικασία Edit > Undo ή Ctrl+Z για να μεταφερθούμε πίσω στην κανονική σελίδα μας.
Εικόνα

4. Crop 2.

Διαστάσεις : W: 1000 H: 150
Τοποθέτηση : Χ: 50 Υ: 0
Έπειτα διπλό αριστερό κλικ στο επιλεγόμενο πεδίο που έχει εμφανιστή.
Βλέπουμε στην Οθόνη μας να εμφανίζετε το επιλεγμένο σημείο μόνο.
Ακολουθούμε την διαδικασία αποθήκευσης για αρχείο JPG με ονομασία αρχείου Header.
Ακολουθούμε την διαδικασία Edit > Undo ή Ctrl+Z για να μεταφερθούμε πίσω στην κανονική σελίδα μας.

5. Crop 3.

Διαστάσεις : W: 1000 H: 250
Τοποθέτηση : Χ: 50 Υ:150
Έπειτα διπλό αριστερό κλικ στο επιλεγόμενο πεδίο που έχει εμφανιστή.
Βλέπουμε στην Οθόνη μας να εμφανίζετε το επιλεγμένο σημείο μόνο.
Ακολουθούμε την διαδικασία αποθήκευσης για αρχείο JPG με ονομασία αρχείου Slider.
Ακολουθούμε την διαδικασία Edit > Undo ή Ctrl+Z για να μεταφερθούμε πίσω στην κανονική σελίδα μας.

6. Τέλος μαθήματος.

Τι μάθαμε σήμερα

Ουσιαστικά σήμερα μάθαμε την διαδικασία αποκοπής ενός μέρους της μακέτας μας, και αποθήκευσης της ως ξεχωριστή εικόνα.
Στο επόμενο μάθημα και δεύτερο κεφάλαιο, θα ασχοληθούμε αποκλειστικά με την χρήση της CSS.

Επόμενο μάθημα Τετάρτη 17 Νοε. 2010
Τελευταία επεξεργασία από το μέλος Joakim την 21 Νοέμ 2010 09:57, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από geoki » 16 Νοέμ 2010 02:33

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

1. Καλύτερη και πιο εύκολη πρακτική για το κόψιμο των εικόνων είναι με τη μέθοδο export slices από το photoshop η από το image ready.

2. Προτείνεις να αποθηκεύονται οι εικόνες σε BMP. Τα καθιερωμένα format είναι jpg, png


Ξανακοίταξε τον συγκεκριμένο οδηγό.

Εκτός αν κάτι δε κατάλαβα καλά εγώ.
:roll:

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από Joakim » 16 Νοέμ 2010 03:33

Φίλε geoki , σε ευχαριστώ για την παρατήρηση σου, αλλά στην περιγραφή του μαθήματος έγραψα πως θα δημιουργήσουμε την σελίδα μας (το εικαστικό κομμάτι) δουλεύοντας με το πρόγραμμα Fireworks, άρα η μέθοδος που ακολουθούμε για την αποκοπή είναι αυτή με το CROP tool. Σίγουρα έχεις δίκαιο, πως αυτό θα μπορούσε να γίνει, καλύτερα ίσως και ευκολότερα με άλλο πρόγραμμα, αλλά τώρα σε αυτή την σειρά μαθημάτων δουλεύουμε αποκλειστικά με το συγκεκριμένο πρόγραμμα.

Με αυτό τον τρόπο μαθαίνουμε επιπλέον πληροφορίες για το πώς το χρησιμοποιούμε.

Συμφωνώ απόλυτα μαζί σου στο γεγονός ότι το καθιερωμένο format των γραφικών είναι jpg,png αλλά αυτό δεν παίζει ουσιαστικά ρόλο, ο κάθε ένας από εμάς μπορεί να σώσει τα γραφικά του όπως αυτός θέλει, έτσι με γνώμονα αυτό, στο συγκεκριμένο μάθημα θα δουλέψουμε με
την μορφή bmp.

Τώρα στην πρώτη σου παρατήρηση σχετικά με το μπέρδεμα που μπορεί να προκληθεί από αυτόν τον οδηγό, θα σου πω απλά, πως ‘μαθητής’ μου, είναι η κοπελιά μου που δεν έχει ιδέα από αυτά, μόνο να γράφει στο word και να σερφάρει στο ιντερνέτ ξέρει, και πρέπει να σου πω, πως τα πάει τέλεια, και μάλιστα χωρίς καμία βοήθεια .:D

Ελπίζω να σε κάλυψα, σε ευχαριστώ και πάλη για την σωστή παρατήρηση σου.

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από geoki » 16 Νοέμ 2010 11:10

Joakim για το ζήτημα του τρόπου κοψίματος με το Fireworks, οκ είναι ζήτημα γούστου και με ποιό πρόγραμμα είναι εξοικειωμένος κάποιος. Δεν υπάρχει σωστό/λάθος εφόσον το αποτέλεσμα είναι το ίδιο.
Αλλά το φορματ των εικόνων είναι χοντράδα να είναι bmp.
Joakim έγραψε: Συμφωνώ απόλυτα μαζί σου στο γεγονός ότι το καθιερωμένο format των γραφικών είναι jpg,png αλλά αυτό δεν παίζει ουσιαστικά ρόλο, ο κάθε ένας από εμάς μπορεί να σώσει τα γραφικά του όπως αυτός θέλει, έτσι με γνώμονα αυτό, στο συγκεκριμένο μάθημα θα δουλέψουμε με την μορφή bmp.
Διαφωνώ
Joakim έγραψε: Τώρα στην πρώτη σου παρατήρηση σχετικά με το μπέρδεμα που μπορεί να προκληθεί από αυτόν τον οδηγό, θα σου πω απλά, πως ‘μαθητής’ μου, είναι η κοπελιά μου που δεν έχει ιδέα από αυτά, μόνο να γράφει στο word και να σερφάρει στο ιντερνέτ ξέρει, και πρέπει να σου πω, πως τα πάει τέλεια, και μάλιστα χωρίς καμία βοήθεια .:D
Αν ο οδηγός απευθυνόταν μόνο στην κοπέλα σου δε θα υπήρχε αντίρρηση , αλλά εφόσον τον δημοσίευσες εδώ είναι καλό να δώσεις σωστές αρχές στους "μαθητές" σου

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

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από cordis » 16 Νοέμ 2010 20:23

bmp στο web είναι ψάρι του γλυκού νερού στην θάλασσα :) βασικά είχα ξεχάσει ότι υπάρχουν ακόμα αυτά τα αρχεία. :)

στο web δουλεύουμε με gif, jpg και png :)

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

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

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από manolism » 16 Νοέμ 2010 20:27

Το fireworks είναι μανούλα στα png.

Μόλις ακούω bmp μου θυμίζει το paint των windows. :P

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

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από cordis » 16 Νοέμ 2010 21:20

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

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από korgr » 16 Νοέμ 2010 22:14

Επίσης να τονίσω πως η εύκολη μέθοδος δεν σημαίνει πως είναι η πιο ενδεδειγμένη!
Το να κάνεις auto slicing για μένα είναι απαράδεκτο κυρίως για δύο λόγους:

1. Κάθε τμήμα του layout όταν κόβεται περιέχει διαφορετική πληροφορία και πρέπει να εξάγεται σε διαφορετικούς τύπους αρχείου και με διαφορετικές παραμέτρους. Για παράδειγμα ίσως πρέπει να έχουμε 1 jpg με ποιότητα συμπίεσης 60, 1 png 24bit με transparency, 1 gif 64 χρωμάτων, 1 gif 4 χρωμάτων κλπ κλπ

2. Αν εξάγεις με crop (ή ακόμα καλύτερα με selection via new) έχεις την δυνατότητα να αποθηκεύσεις τις εικόνες με συγκεκριμένα ονόματα ώστε να βοηθηθείς κατά την δημιουργία του xhtml/css

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από Khronos » 16 Νοέμ 2010 22:28

korgr έγραψε:Επίσης να τονίσω πως η εύκολη μέθοδος δεν σημαίνει πως είναι η πιο ενδεδειγμένη!
Το να κάνεις auto slicing για μένα είναι απαράδεκτο κυρίως για δύο λόγους:

1. Κάθε τμήμα του layout όταν κόβεται περιέχει διαφορετική πληροφορία και πρέπει να εξάγεται σε διαφορετικούς τύπους αρχείου και με διαφορετικές παραμέτρους. Για παράδειγμα ίσως πρέπει να έχουμε 1 jpg με ποιότητα συμπίεσης 60, 1 png 24bit με transparency, 1 gif 64 χρωμάτων, 1 gif 4 χρωμάτων κλπ κλπ

2. Αν εξάγεις με crop (ή ακόμα καλύτερα με selection via new) έχεις την δυνατότητα να αποθηκεύσεις τις εικόνες με συγκεκριμένα ονόματα ώστε να βοηθηθείς κατά την δημιουργία του xhtml/css
+1

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από Joakim » 16 Νοέμ 2010 22:41

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

Το φόρματ των φωτογραφιών δεν παίζει ουσιαστικό ρόλο στο μάθημα, όταν τελειώσει, τότε αυτός που θα το διαβάσει θα είναι σε θέση να δημιουργήσει την δική του ιστοσελίδα όπως αυτός θέλει με ότι φόρματ γραφικών επιθυμεί, στους αρχάριους η πλέων διαδεδομένη μορφή γραφικού είναι αυτή του bmp,και gif. Άρα, με αυτή την λογική χρησιμοποίησα αυτό το φόρματ.

Και μια διευκρίνιση, ο οδηγός αυτός δεν θα επικεντρωθεί στην γραφή κώδικα, απλά θα επεξηγήσει τις μεταβλητές αυτής. Έτσι ώστε ο μαθητής να είναι σε θέση να κατανοεί αυτό που διαβάζει και να μπορεί να το επεξεργαστεί.

Παράλληλα θα δημιουργήσουμε τα αρχεία που είναι απαραίτητα για την συμπλήρωση αυτού του βοηθήματος .

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

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από cordis » 17 Νοέμ 2010 00:27

κάνε μου την χάρη και άλλαξε το bmp με png τουλάχιστον. βγάζω σπυράκια όταν το βλέπω, δε παίζει ούτε έπαιζε πουθενά στο web το bmp. :p

ένας μαθητής, ένας που ξεκινάει τώρα καλό είναι να πάρει και τις σωστές βάσεις. να μη πάει στο 25ο (λέω τώρα) μάθημα και του πούμε "Ναι, αλλά το bmp που χρησιμοποιούσαμε έως τώρα να μη το χρησιμοποιήσεις ποτέ πουθενά!" :)

μου θυμίζει το goto στην basic, που ναι υπήρχε, αλλά μας απαγόρευαν οι καθηγητές να το χρησιμοποιούμε για να μάθουμε σωστό προγραμματισμό :)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από cpulse » 17 Νοέμ 2010 00:54

Joakim μπράβο για τον κόπο σου να γράψεις ένα τέτοιο tutorial, αλλά συμφωνώ με τους άλλους. Στο web παλεύουμε για ταχύτητες και καλύτερες συμπιέσεις.

Για να προσθέσω κι εγώ κάτι λίγο στο βοήθημα σου.. υπάρχουν πολλά format για εικόνες. Χωρίζονται σε δύο μεγάλες κατηγορίες, τα loss-less και τα lossy. Δηλαδή σε αυτά που θέλουν την καλύτερη ποιότητα κι ας είναι το μέγεθος μεγάλο, και αυτά που θέλουν μικρότερο μέγεθος αλλά χάνουν σε χρώματα και ποιότητα.

- GIF, PNG: Επιλέγουμε αυτά όταν έχουμε εικόνες με λίγα και πολύ συγκεκριμένα χρώματα, γιατί αυτά τα format δουλεύουν με παλλέτα. Ειδικά τα PNG είναι η εξέλιξη των GIF, αλλά δυστυχώς βγάζουν μερικά προβλήματα στους Internet Explorers. Τα προτιμάμε όμως κυρίως επειδή υποστηρίζουν διαφάνεια (transparency) και ημι-διαφάνεια (translucency ή alpha level). Και τα GIF υποστηρίζουν διαφάνεια αλλά επιτρέπουν είτε 100% transparent είτε 100% opaque, όχι ενδιάμεσα στάδια.

- JPG: Τα επιλέγουμε όταν έχουμε εικόνες με πολλά χρώματα, όπως ντεγκραντέ/gradients

- BMP, TIFF: Είναι formats στην κατηγορία lossless. Δεν τα χρησιμοποιούμε στο web γιατί βγάζουν τεράστια μεγέθη. Αυτά τα formats κάνουν για άλλες δουλειές.

- PICT: (Το βάζω επειδή υπάρχει στο Fireworks) Υποστηρίζει vectors και άλλα τέτοια ωραία τα οποία είναι άχρηστα στο web. Στο web το μόνο format με vectors (διανύσματα) είναι το SVG, αλλά δεν έχει καθιερωθεί ακόμα.

- WebP: Αυτό είναι ένα νέο format που ανακοίνωσε πρόσφατα η Google και συγκρίνεται με το JPG. Αναμένεται να γίνει must, αλλά ακόμα δεν το βλέπουμε σε Photoshop και Fireworks. Επειδή θα αργήσει να υποστηριχθεί ευρέως από τους browsers, το προορίζουν για κινητές συσκευές ή έστω για ιστοσελίδες που θα τις βλέπουμε από κινητά.

deletakis48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από deletakis48 » 17 Νοέμ 2010 01:02

na kapia pragmata pou den eiksera gia tin kataskeuei istoselidas
epidi blepw ena mikro 8emataki panw panw me to PNG egw xrisimopio mono PNG gia megisti eikona ala otan bgazw poli megales PNG o server ta paizi einai pio argos :\
kai episis to GIF den exei polla xromata JPEG exw diafora? tomono pou kserw oti den bgazei backround

euxaristw :)

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από cpulse » 17 Νοέμ 2010 01:57

Το gif αποκλείεται να μη στο βγάζει. Μάλλον έχεις κάποιο λάθος που δεν το χεις προσέξει.

Κάνε export σε jpg να δεις αν το μέγεθος σου βγαίνει μικρότερο. Στο photoshop όταν χρησιμοποιείς το "save for web & devices" που κάνει την αντίστοιχη δουλειά που εξειγεί ο Joakim για το fireworks, σου βγάζει και το μέγεθος πριν το σώσεις. Απορώ γιατί δεν έχει ανάλογη υπηρεσία και το Fireworks.

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1β : Εξαγωγή)

Δημοσίευση από dva_dev » 17 Νοέμ 2010 02:40

Εχει στο export preview.
Επίσης έχει alpha transparency και για τα png 8bit (περιορισμένο βέβαια αλλά λογικό) που λείπει από τα περισσότερα γνωστά προγράμματα.

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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