PSD Template σε HTML πως;

Καλησπέρα σας

 

Θα μπω κατευθείαν στο θέμα. Γνωρίζοντας καλά Photoshop, μπορώ να φτιάχνω ιστοσελίδες (σχεδιαστικά). Αυτό που θέλω να μάθω είναι πως ένα PSD Template που έφτιαξα στο Photoshop, να το μετατρέψω σε "ζωντανό" website, είτε είναι σελίδα .html είτε είναι για Wordpress template. Κάτι έχει πάρει το αυτί μου ότι αυτό γίνεται με το Dreamweaver. Ισχύει; Και αν ναι, είναι εύκολη η διαδικασία ή θέλει τρομερές ικανότητες για να το κάνεις; Επίσης υπάρχουν άλλοι τρόποι;

 

Σας ευχαριστώ και περιμένω τις απαντήσεις σας!

Θα με βοηθήσετε πολύ.

Ένα πολύ καλό βιβλίο είναι αυτό

http://rockablepress.com/books/photoshop-to-html/

Έγινε φίλε μου, ευχαριστώ. Θα το κοιτάξω!

ο συγγραφέας του παραπάνω βιβλίου εχει δημιουργήσει το παρακάτω δωρεαν course που ισως να σ'αρέσει

http://learncss.tutsplus.com/

Πολύ καλό! Σ'ευχαριστώ για την ενημέρωση

(άργησα λίγο αλλά δεν πειράζει)

μα template (εννοώντας ένα απλό δείγμα με τις ελάχιστες html λειτουργίες για να δεις αυτό που έφτιαξες μέσα από ένα browser) μπορείς να φτιάξεις απευθείας μέσα από το ps

αυτό ρωτάς ή μιλάς για web development (μιας και ανέφερες το dreamweaver)?

 

τα προγράμματα σαν το dreamweaver χρησιμοποιούνται για το 'προγραμματισμό' ιστοσελίδων - αυτό λέγεται web developing

για να δουλέψεις το dreamweaver πρώτα από όλα θα πρέπει να γνωρίζεις τις γλώσσες, ξεκινώντας από την html, css πχ

 

αν θέλεις απλώς να φτιάξεις ένα δείγμα για να το δεις σε ένα browser τότε κόβεις σε slices τη σελίδα σου (αν δεν ξέρεις για τι μιλάω διαβάσεις το help του ps ή ψάχνεις στο internet), πας στο imageready (για παλιές εκδόσεις) ή απευθείας στο file > save for web (για τις νεότερες) και κάνεις export αφού ψάξεις και κάνεις τις ρυθμίσεις που επιθυμείς

μετά παράγονται τα αρχεία που ζητάς στο φάκελο που έχεις επιλέξει και μπορείς να ανοίξεις το html να το δεις σε ένα browser

 

αν θέλεις απλώς να το δεις λοιπόν κάνεις αυτά που έγραψα

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

η διαφορά των δύο παραπάνω είναι προφανώς οι δυνατότητες, στην μια περίπτωση μιλάμε για αυτοκίνητο και στην άλλη για παιδικό αυτοκινητάκι-ποδήλατο

αν όμως αυτό που θέλουμε να κάνουμε είναι πχ να αναρτήσουμε ένα ξερό κείμενο το οποίο δεν αλλάζει, τότε μας κάνει και το παιδικό

αυτά

ο συγγραφέας του παραπάνω βιβλίου εχει δημιουργήσει το παρακάτω δωρεαν course που ισως να σ'αρέσει

http://learncss.tutsplus.com/

 

Το course είναι φανταστικό, σε ευχαριστώ που το μοιράστηκες

Σε γενικές γραμμές αυτό που κάνουμε είναι να κροπάρουμε κομμάτια σε Photoshop και να τα πετάξουμε στο Dreamweaver είτε σε πίνακα είτε σε divs... άλλα θέλει ολίγον ψάξιμο... νομίζω τα βιβλία που ανέφεραν παραπάνω θα σε καλύψουν...

Ευχαριστώ για τις απαντήσεις σας παιδιά!

 

@zuratharamon & @aghahowa

 

Φοβερά τα links παίδες! Με βοήθησαν στο μέγιστο! Σας ευχαριστώ!

 

@oneofthem

 

Φίλε μου δεν εννοούσαν απλώς την εικόνα του Photoshop να την κόψω και να την κάνω site μόνο με εικόνες. Εννοούσα πως να κόψω και να μετατρέψω σε κώδικα όλο αυτό το template έτσι ώστε να γίνει site. Νομίζω πως το ανέφερα εν μέρη με το Wordpress template που είπα.

 

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

 

Λογικά μόλις εξοικειωθώ με αυτό θα χρειαστεί και λίγο Javascript, έτσι δεν είναι; Όσον αφορά για το άλλο βήμα, δηλαδή από html/css να γίνει wordpress θέλω ψωμιά ακόμα να το κάνω..

 

Και πάλι σας ευχαριστώ όλους.

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

με τον τρόπο που έγραψα μπορείς να παράγεις με αυτόματο τρόπο html, css, με τις βασικές λειτουργίες, δλδ hyperlink, mouseover κτλ, δλδ ένα λειτουργικό δείγμα και όχι ένα site μόνο με εικόνες (δλδ να βλέπεις απλώς ένα νεκρό γραφικό στον browser, αν αυτό εννοούσες) οπότε σε καλύπτει αν αυτές οι λειτουργίες είναι όντως αυτό που ήθελες (επαναλαμβάνω δεν ξέρω τι εννοείς όταν γράφεις 'ώστε να γίνει site' - εγώ χρησιμοποιώ τη λέξη site και εννοώ συνήθως html, css, cms, βάσεις δεδομένων κτλ μαζί)

αν θες κάτι παραπάνω τότε τα ξεχνάς αυτά και πας με τον ορθόδοξο τρόπο αλλά μέχρι στιγμής δεν βλέπω να ζητάς κάτι παραπάνω αφού γράφεις για html και css και στο δεύτερο δεν έχεις φτάσει ακόμη απ'ότι γράφεις

με αυτή τη λογική λοιπόν, μπορείς να κάνεις κάποια πράγματα με το ps που ξέρεις ότι θα παίξουν στο browser και μετά να πιάσεις αυτό τον χαζό κώδικα και να αρχίσεις να το σκαλίζεις ξεφεύγοντας από το ps και πηγαίνοντας στο dw ή οτιδήποτε άλλο

ο άλλος δρόμος είναι αυτός που λένε τα παιδιά φυσικά

αυτά, καλό δρόμο

Κάτι σε ποιο αυτόματο π.χ κάποια εφαρμογή που να μπορεί να κάνει την διαδικασία αυτόματα γνωρίζεται αν υπάρχει?

Εχω βρει κάποιο templates σε μορφή CSS Full Site Flash 10 αυτό πως μπορώ να το μετατρέψω και το διαχειριστώ σε html?

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

με τον τρόπο που έγραψα μπορείς να παράγεις με αυτόματο τρόπο html, css, με τις βασικές λειτουργίες, δλδ hyperlink, mouseover κτλ, δλδ ένα λειτουργικό δείγμα και όχι ένα site μόνο με εικόνες (δλδ να βλέπεις απλώς ένα νεκρό γραφικό στον browser, αν αυτό εννοούσες) οπότε σε καλύπτει αν αυτές οι λειτουργίες είναι όντως αυτό που ήθελες (επαναλαμβάνω δεν ξέρω τι εννοείς όταν γράφεις 'ώστε να γίνει site' - εγώ χρησιμοποιώ τη λέξη site και εννοώ συνήθως html, css, cms, βάσεις δεδομένων κτλ μαζί)

αν θες κάτι παραπάνω τότε τα ξεχνάς αυτά και πας με τον ορθόδοξο τρόπο αλλά μέχρι στιγμής δεν βλέπω να ζητάς κάτι παραπάνω αφού γράφεις για html και css και στο δεύτερο δεν έχεις φτάσει ακόμη απ'ότι γράφεις

με αυτή τη λογική λοιπόν, μπορείς να κάνεις κάποια πράγματα με το ps που ξέρεις ότι θα παίξουν στο browser και μετά να πιάσεις αυτό τον χαζό κώδικα και να αρχίσεις να το σκαλίζεις ξεφεύγοντας από το ps και πηγαίνοντας στο dw ή οτιδήποτε άλλο

ο άλλος δρόμος είναι αυτός που λένε τα παιδιά φυσικά

αυτά, καλό δρόμο

 

Μάλλον λέμε τα ίδια αλλά με διαφορετικές λέξεις..

 

Για να ξεκαθαρίσω το θέμα και για να καταλάβουν πιθανόν καλύτερα και άλλα παιδιά, το ερώτημά μου ήταν πώς ένα PSD Template που φτιάχτηκε με το Photoshop να μετατραπεί σε ένα στατικό (αρχικά) website. Τι θα χρειαστώ;

 

Μετά απ' όλα αυτά που συζητήσαμε, καταλήξαμε ότι χρειάζεται:

 

1. HTML

2. CSS

3. Javascript (λίγο)

 

Πιστεύω πως το βοήθημα (το οποίο αγόρασα) θα βοηθήσει πολλούς να καταφέρουν κάτι παρόμοιο, σε συνδυασμό με κάποιες βασικές γνώσεις HTML & CSS.

 

Έπειτα εντάξει μπορούμε να προχωρήσουμε από τις στατικές σελίδες και σε δυναμικές όπως είπες με βάσεις δεδομένων κλπ. Α επίσης το CMS τι είναι; Δεν γνωρίζω...

 

Σας ευχαριστώ και πάλι.

Φιλικά πάντα.