Δημιουργία html σελίδας από Photoshop template (.psd)

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από ALR » 26 Απρ 2006 21:53

Καλησπέρα και χρόνια πολλά.

Βλέπω συχνά templates σε μορφή .psd και ήθελα να μάθω πως μπορούμε να τις εξάγουμε σε 1 ή περισσότερες html σελίδες και εικόνες.

Ευχαριστώ πολύ.

Άβαταρ μέλους
geozei
Δημοσιεύσεις: 17
Εγγραφή: 17 Απρ 2006 11:33

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από geozei » 27 Απρ 2006 12:31

Γεια χαρα!

Λοιπον ειχα και εγω τιν ιδια απορια πριν λιγουσ μηνες αλλα βρηκα την ακρη τελικα! Ανοιγεις το .PSD με το Photoshop και αφου παρεισ το "slide tool" και κοψεις τιν εικονα σε περιοχες=πινακες (αν αυτο δεν εχει γινει ιδη πραγμα πολη πιθανο) τοτε πατας go to "image Ready" οποτε μεταφερει το αρχιο στο αλλο προγραμμα και εκει εχει επιλογη αν θημαμε καλα "save for web" h "export as html"

Και μετα δουλευεις με καποιο Html editor

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

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από cdhyper » 27 Απρ 2006 17:33

Σωστά αλλά το θέμα είναι να το έχεις σχεδιάσει έτσι ώστε να μπορείς να βάλεις όσο κείμενο θες στις περιοχές που πρέπει και να μην "σπάει" το design.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από ALR » 19 Μάιος 2006 07:53

Αυτό που κατάλαβα εγώ, αφού σχεδίασα μια δικιά μου template με τη βοήθεια ενός tutorial, είναι ότι μετά, στο Image ready πρέπει να προσέξεις πολύ τα slices ώστε να μην είναι βαρειά η σελίδα.
Πχ, να κρατήσεις σαν εικόνες μόνο τα βασικά(κουμπάκια) και τα υπόλοιπα να είναι έτσι κατανεμημένα με την επιλογή no image , ώστε να μπορέσεις μετά να κόψεις ακριβώς ένα μικρό δείγμα της εικόνας και να το θέσεις ώς background στο κελί που είναι το slice.
Έτσι γλυτώνεις χώρο.
Μπορεί κάποιος να μου εξηγήσει πότε είναι σωστό να χρησιμοποιούμε και την επιλογή table στα silces; Όταν πχ έχουμε ένα μεγάλο σχετικό μέρος της σελίδας και θέλουμε να το χωρίσουμε σε 2 ή 3,4 μέρη για να προσθέσουμε συμμετρικά κείμενο και εικόνα;

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

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από cdhyper » 19 Μάιος 2006 12:09

Μην ψάχνεις να τα κάνεις όλα με το imageerady. Θα σου χρεαστεί απαραίτητα html/css editor, όπου θα βάλεις τα backgrounds που θες και τα styles. Το θέμα είναι όπως σου είπα να το κόψεις κατάλληλα το design και αυτό είναι ανάλογα την περίσταση.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από ALR » 19 Μάιος 2006 22:14

cdhyper έγραψε:Μην ψάχνεις να τα κάνεις όλα με το imageerady. Θα σου χρεαστεί απαραίτητα html/css editor, όπου θα βάλεις τα backgrounds που θες και τα styles. Το θέμα είναι όπως σου είπα να το κόψεις κατάλληλα το design και αυτό είναι ανάλογα την περίσταση.
Καλά ναί, μετά αναλαμβάνει το dreamweaver να στήσει την σελίδα.

Θα μπορούσα να βάλω σε ένα κελί το οποίο έχει δημιουργηθεί από imageready, να βάλω μέσα του με μικρότερες διαστάσεις ένα div ώστε να γίνει ένας κέρσορας και να βάλω κείμενο μέσα;
Αν ναί, με τι κώδικα; Γιατί δοκίμασα να κάνω κάτι τέτοιο και έσπασε η σελίδα σε 100 κομάτια :p

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

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από cdhyper » 19 Μάιος 2006 22:19

Θα μπορούσα να βάλω σε ένα κελί το οποίο έχει δημιουργηθεί από imageready, να βάλω μέσα του με μικρότερες διαστάσεις ένα div ώστε να γίνει ένας κέρσορας και να βάλω κείμενο μέσα;
Αυτό που θες να κάνεις γίνεται με layers είτε με i-frames. Αλλά δεν αποτελεί την καλύτερη λύση το design να περιορίζει το περιεχόμενο. Αντίκειται σε βασικό κανόνα ευχρηστίας. Το καλύτερο όπως είπαμε είναι να είναι ρευστό.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από ALR » 20 Μάιος 2006 14:46

Εννοώ κάτι τέτοιο σαν κώδικα.

Κώδικας: Επιλογή όλων

...
<tr>

<td align="right">

<center>

<div id="adresses" style="position&#58;absolute; width&#58;436px; height&#58;260px; z-index&#58;121; left&#58; 256px; top&#58; 340px; overflow&#58; auto; background-color&#58; white; layer-background-color&#58; #FFFFFF; border&#58; 1px none  #FFFFFF; visibility&#58; visible">
<font face="Times new roman"font size="3">


MPLA MPLA MPLA.....


 </div>
</center>
</td>
</tr>
....
Αυτό δημιουργεί ακριβώς όπου του λέω ένα πλαίσιο, σαν και αυτό που γράφουμε όταν ποστάρουμε, με έναν κέρσορα στα δεξια και σαν περιεχόμενο το κείμενο. Η απορία μου βρίσκεται στο αν μπορώ να βγάλω τις absolute τιμές, και μόνο να το βάλω μέσα σε ένα συγκεκριμένο κελί. Θα μείνει εκει ή θα σπάσει όλη η σελίδα;

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

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

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από cdhyper » 20 Μάιος 2006 14:56

Αντί για fixed τιμές, βάλε επί τοις εκατό.

width:100%; height:100%;
αλλά για μένα σου είπα δεν αποτελεί λύση αυτό.
κάποιες φορές, όταν έχεις μελετήσει από πρίν το design και γνωρίζεις ακριβώς τι θα υπάρχει και πού, τότε ίσως κάποια πράγματα που σε άλλη περίπτωση περιορίζουν, να λειτουργούν αντίθετα.
Αυτό ακριβώς σου λέω. Όταν φτιάχνεις το design πρέπει να το φτιάχνεις με το σκεπτικό της ευελιξίας.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από ALR » 21 Μάιος 2006 03:17

Πχ θα προτιμούσες να σκρολάρει η σελίδα προς τα κάτω αλλά όχι το div κάπου μέσα σ'αυτήν;
Αυτό δεν λές;

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

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από cdhyper » 21 Μάιος 2006 14:23

Φυσικά. Πρέπει να δίνεις χώρο στο περιεχόμενο.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από ALR » 02 Ιουν 2006 22:09

Επανέρχομαι στο θέμα ζητώντας και πάλι την βοήθεια σας.
Κάθε template που σχεδιάζω στο photoshop έχει την λογική του κλειστού σχήματος. Δηλαδή ένα τετράγωνο ή ένα ορθογώνιο , άσχετα από τα σχέδια στις γωνίες κτλ..
Θέλω να πώ ότι χωρά περιορισμένο κείμενο.
Πως μπορώ να σχεδιάσω μια template στο photoshop η οποία να μην σταματάει στο heght ώστε να χωρά πολύ κείμενο και εικόνες γενικότερα; Πώς να ξεκινήσω; Δεν μπορώ να σκεφτώ κάποιον τρόπο γιατί ότι και να σχεδιάσω θα είναι σε περιορισμένο widhth & height.

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

Παρακαλώ ,τα φώτα σας :)

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Δημιουργία html σελίδας από Photoshop template (.psd)

Δημοσίευση από ALR » 20 Ιούλ 2006 17:13

Ακόμη μια απορία ( κλασσικά ) .
Στο slicing, όταν επιλέγουμε "no image" ώστε να κόψουμε ένα μικρό μέρος εικόνας και να το βάλουμε background στο κελί σε παράθεση, πως πρέπει να γίνει , ώστε αργότερα με κάποιον editor να μπορούμε να γράψουμε μέσα σ'αυτό το κελί χωρίς να σπάει ;
Σχεδίασα κάτι, το έκοψα στο imageready και όρισα τα μέρη που θέλω να έχει κείμενο , ώς No image, έκανα την παραπάνω διαδικασία με την εικόνα αλλά κάθε φορά που πάω να προσθέσω κείμενο , το σχέδιο σπάει και δεν μου δίνει περιθώρια να προσθέσω ένα <p> tag , παρα μόνο να συνεχίσω να γράφω στην ευθεία..
Μπορεί κάποιος να βοηθήσει ;
Ευχαριστώ.

Συγνώμη.. Μάλλον από την πολύ βιασύνη δεν κατάλαβα ότι δεν φαίνεται καλά στο dreamweaver, γιατί όταν γίνεται export η σελίδα είναι μια χαρά!! :)

Ούφ..Τσάμπα αγχώθηκα :D
Γίνονται πραγματάκια

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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