Template psd στο photoshop

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

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

Απάντηση
katerina28
Δημοσιεύσεις: 201
Εγγραφή: 16 Δεκ 2007 22:14

Template psd στο photoshop

Δημοσίευση από katerina28 » 22 Νοέμ 2008 14:09

Παιδιά φτιάχνω ενα template στο photoshop πάνω κάτω ξέρω πως θα το κάνω σε slices.
Η μεγάλη μου απορία,υπάρχουν αρκετά σημεία στο template οπου ειναι το χρώμα του backround πχ ασπρο στα slices οταν το κάνω save for web το ασπρο bg το κανει και αυτο μικρα jpg πως το κάνουν στο export να μην βγαζει τo bg σε εικονες αλλα να βάλω χρώμα μετά απο το DWeaver.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Template psd στο photoshop

Δημοσίευση από Basilakis » 22 Νοέμ 2008 14:51

Τελευταία επεξεργασία από το μέλος Basilakis την 22 Νοέμ 2008 15:23, έχει επεξεργασθεί 1 φορά συνολικά.

katerina28
Δημοσιεύσεις: 201
Εγγραφή: 16 Δεκ 2007 22:14

Template psd στο photoshop

Δημοσίευση από katerina28 » 22 Νοέμ 2008 15:12

Δεν δουλεύει τι link http://www.xthmlme.com/

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

Template psd στο photoshop

Δημοσίευση από ALR » 22 Νοέμ 2008 15:20

www.xhtmlme.com ειναι το link.
Σχετικά με τη μεγάλη σου απορία, η δημιουργία μιας σελίδας από μακέτα, δεν γίνεται με τη μέθοδο export slices από το photoshop.

Αφού όμως το κάνεις έτσι, πρέπει αφού κάνεις export τη μακέτα σου, μέσα από το DreamW, να αλλάξεις όλα τα άχρηστα slices, διαγράφοντας τις εικόνες και βάζοντας ότι χρώμα θέλεις εσύ.

Αλλά σου ξαναλέω, ότι αυτό είναι λάθος μέθοδος.

Δες εδώ για τη σωστή: http://nettuts.com/videos/screencasts/h ... -to-xhtml/
Γίνονται πραγματάκια

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Template psd στο photoshop

Δημοσίευση από dimsis » 22 Νοέμ 2008 15:31

Λογικά με το export από το photoshop παίρνεις html με tables, οπότε το μόνο που έχεις να κάνεις για τις εικόνες που αναφέρεις, πας στο κελί που τις έχει βάλει, τις διαγράφεις και βάζεις το αντίστοιχο χρώμα (αν χρειαστεί για να μη χαλάσει το template και width / height) σε αυτό ως background color του td (π.χ. <TD BGCOLOR="#ffffff"> ή <TD style="background-color:#ffffff"> ή κάποιο class / id και έπειτα το χρώμα στο stylesheet.


Tutorials:
http://www.entheosweb.com/photoshop/slice.asp
http://www.youtube.com/watch?v=DVfxe4pqvo8
http://www.celoxdesign.net/free-photosh ... late/id/39
http://www.photoshop-pack.com/details/S ... mplate/380
http://www.webstockbox.com/css/converti ... -tutorial/

Καλύτερα πάντως να το παλέψεις λίγο παραπάνω για να βγάλεις valid XHTML και tabless layout, αν σε παίρνει από χρόνο και έχεις την όρεξη.

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

Template psd στο photoshop

Δημοσίευση από manolism » 22 Νοέμ 2008 17:14

Επίσης εάν χρησιμοποιείς το image ready για slicing υπάρχει μία επιλογή που τα άχρηστα σημεία τα χαρακτηρίζεις ως "no image".

Αυτό έχει ως συνέπεια να τοποθετεί εκεί ένα γραφικό που το ονομάζει spacer και είναι 1ΚΒ. Το γραφικό αυτό επαναλαμβάνεται σε όλα τα κενα σημεία και προσαρμόζει το μέγεθός του σε αυτά χωρίς να επηρεάζει το βάρος της υπόλοιπης σελίδας.

Δες ΕΔΩ και στην 9η φωτογραφία εκεί που λέει type:image υπάρχει το no image

katerina28
Δημοσιεύσεις: 201
Εγγραφή: 16 Δεκ 2007 22:14

Template psd στο photoshop

Δημοσίευση από katerina28 » 22 Νοέμ 2008 19:02

Σχετικά με τη μεγάλη σου απορία, η δημιουργία μιας σελίδας από μακέτα, δεν γίνεται με τη μέθοδο export slices από το photoshop.

Αφού όμως το κάνεις έτσι, πρέπει αφού κάνεις export τη μακέτα σου, μέσα από το DreamW, να αλλάξεις όλα τα άχρηστα slices, διαγράφοντας τις εικόνες και βάζοντας ότι χρώμα θέλεις εσύ.

Αλλά σου ξαναλέω, ότι αυτό είναι λάθος μέθοδος.

Δες εδώ για τη σωστή: http://nettuts.com/videos/screencasts/h ... d-to-xhtml

Για ποιο λογο είναι λάθος μέθοδος η δημιουργία μιας σελίδας σε slices από το photoshop?

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

Template psd στο photoshop

Δημοσίευση από ALR » 22 Νοέμ 2008 21:50

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

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

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

Template psd στο photoshop

Δημοσίευση από manolism » 22 Νοέμ 2008 22:13

Αυτό το έκανα στο photoshop σε λιγότερο από ένα λεπτό.

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

<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices &#40;Untitled-1&#41; -->
<table id="Table_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/index_01.gif" width="400" height="600" alt=""></td>
		<td>
			<img src="images/index_02.gif" width="400" height="600" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Τι κακό έχει ο κώδικας από το image ready;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Template psd στο photoshop

Δημοσίευση από dimsis » 22 Νοέμ 2008 22:59

Δεν έχει κανένα κακό, απλώς δεν παράγει tableless layout κώδικα που είναι της μοδός :)

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

Template psd στο photoshop

Δημοσίευση από korgr » 22 Νοέμ 2008 23:09

Εεεεε ένσταση!
Πώς δεν έχει τίποτα κακό?
Έχει layout definitions στην html και δεν έχει DOCTYPE!!!
Είναι άδικο εσείς να μπορείτε να δημοσιεύετε τέτοιο κώδικα και να βάζει μόνο σε μένα χέρι ο Χερουβείμ :lol:
(πλάκα κάνω)

Πάντως επί του θέματος, είμαι κατά οποιασδήποτε αυτοματοποιημένης διαδικασίας slicing από το Photoshop! Βάζεις guides, snap to guides, κάνεις τα selections στις περιοχές που χρειάζεσαι τα images, ανάλογα τον τύπο του region σώζεις jpg ή gif ή png και φυσικά δίνεις filenames κατανοητά (πχ btn1ON_gr.gif, btn1OFF_gr.gif που αντίστοιχα παραπέμπουν στο 1ο button με ελληνική περιγραφή και mouseover active status και το αντίστοιχο button σε normal state).
Ok, ναι την html την δημιουργούμε μόνοι μας στο DreamWeaver...
Λατρεύω τον απόλυτο έλεγχο 8)

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

Template psd στο photoshop

Δημοσίευση από tsiger » 22 Νοέμ 2008 23:15

lunarmedia έγραψε:Αυτό το έκανα στο photoshop σε λιγότερο από ένα λεπτό.
Τωρα που ειναι απλα τα πραγματα σου παιρνει ενα λεπτο. Αργοτερα που ισως δυσκολεψουν τα πραγματα απο αποψη ογκου του κωδικα, τοτε μαλλον θα υπαρχει προβλημα. Δε λεω, μου εδωσε αρκετα μεροκαματα αυτη η μεθοδος τον παλιο καλο καιρο παρεα με τους πινακες, απλα πλεον με xhtml/css η συντηρηση - προσθηκη - αλλαγη ενος template ειναι παιχνιδι.

Αλλα οπως παντα ειναι το τι ζηταμε :D

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

Template psd στο photoshop

Δημοσίευση από manolism » 22 Νοέμ 2008 23:17

Εννοείται ότι είναι έτσι όπως τα λες.

Απλά απάντησα ότι αν δεν ξέρει ο άλλος από κώδικα το DW με το Photoshop μια χαρ΄λα την κάνει την δουλειά του.

Εξάλλου έχω πάψει να ασχολούμε με tables εδώ και πολυυυυυυυυύ καιρό.

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

Template psd στο photoshop

Δημοσίευση από tsiger » 22 Νοέμ 2008 23:26

Δεν εχεις αδικο. Οντως μια χαρα θα κανει τη δουλεια του. Απλα αυτο το μαλλιοτραβηγμα του μετα θυμαμαι και.. ας αναψω ενα τσιγαρο.. αγχωθηκα χεχε

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Template psd στο photoshop

Δημοσίευση από dimsis » 22 Νοέμ 2008 23:37

Απορώ πως και δεν βγήκε ακόμα κανένα προγραμματάκι που να κάνει σωστό slicing εικόνας σε valid XHTML και tableless layouts... δεν το κόβω να είναι ΤΟΣΟ ζόρι για adobe, ms, corel κλπ...

Απάντηση

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

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

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