Από PSD σε HTML

[devr]

Καλησπέρα, τα τελευταία 2 χρόνια ασχολούμαι με τον σχεδιασμό σελίδων. Το μόνο που έχω καταφέρει μέχρι στιγμής είναι να μάθω καλά το photoshop. Αυτό που θέλω τώρα να μάθω φυσικά είναι πώς να κάνω σωστά slice το template που έχω σχεδιάσει στο photoshop. Όταν διαβάζω tutorials με μπερδεύουν γιατί το δείχνουν στο δικό τους template. Υπάρχουν κάποια tips; Υπάρχει κάποιος έστω να μου δείξει κάποια βασικά πράγματα; 

 

Το τελευταίο template που σχεδίασα: 

 

 

Ελπίζω να βρεθεί κάποιος να με βοηθήσει.  Σας ευχαριστώ προκαταβολικά.

[SlackulatoR]

Σκέψου πως το κάθε slice που θα κάνεις θα είναι σαν ένα div που θα περιέχει την ανάλογη εικόνα.

π.χ για το menu div θα κάνεις ένα slice όλο το menu χρησιμοποιώντας 2 οριζόντια slice από αριστερά προς τα δεξιά του template και μετά θα χωρίσεις σε κάθετα slices το κάθε button(home,news,articles κτλ).

 

Για κάποια απλά σημεία βέβαια στο παραπάνω template δεν χρειάζεται καν να χρησιμοποιήσεις τις εικόνες του psd αλλά να δουλέψεις απευθείας σε css και να έχεις το ίδιο αποτέλεσμα κάνοντας το πιο ελαφρύ στο φόρτωμα.

[devr]

Δηλαδή το menu div θα το κάνω slice κάπως έτσι;

 

[SlackulatoR]

Ακριβώς, έτσι όταν θα κάνεις save for the web -> html + images θα έχεις έτοιμο το κάθε κουμπί με το κείμενό του. 

Βέβαια αν θες όπως είπα το συγκεκριμένο το κάνεις και με σκέτο css μιας και είναι απλό.

[devr]

Μπα προτιμώ να είναι όπως το έχω κάνει στο photoshop, μην με ρωτήσεις γιατί απλός έτσι νομίζω  

 

Έτσι είναι κομπλέ; 

 

[SlackulatoR]

Δεν είναι θέμα προτίμησης αλλά σωστού-λάθους. Κάνε το save και δες το μέγεθος του φακέλου με τις κομμένες εικόνες πόσο θα είναι π.χ. Εντάξει εφόσον είναι απλό template δεν θα έχεις πρόβλημα αλλά αν θες να μάθεις περισσότερα πρέπει να ακολουθήσεις τον σωστό τρόπο στο μέλλον.

[sougiasdj]

Καλημέρα.

 

Το να περάσεις απο το photoshop σε html είναι κάτι που θέλει μελέτη και σωστή δόμηση.

Πρώτα θα πρέπει να δείς η σελίδα σου τι θέλει να πεί, μετά πόσο περιεχόμενο θα περιέχει και αργότερα πόσο εύκολη θα είναι στο να την διαχειρίζεσαι.

 

Όπως σωστά αναφέρθηκε ουσιαστικά μια html σελίδα αποτελείτε απο πολλά div που έχουν διαφορετικό μέγεθος και πολλές φορές το 1 επικαλύπτει και κάποιο άλλο.

 

Βασική υλοποίηση είναι να σκεφτείς τις περιοχές που θα θές .

Header Navigation/title/Body/Sidebar/footer.

 

Συγκεκριμένα για το theme σου να σου πώ οτι μου αρέσει. (Προϋποθέτω οτι το κείμενο που θα υπάρχει για παράδειγμα για άρθρα(κατηγορία news) είναι κείμενο και όχι και αυτο εικόνα.)

 

 

Αρχικά θα πρέπει να έχεις ενα Div για όλη την σελίδα(wrapper) με ξεχωριστά id ώστε αν θες να μπορείς να τοποθετήσεις και μια εικόνα για το background όπως το έχεις στο photoshop.

 

Έχεις ήδη περιοχές για το header(logo) Navigation bar Sponsors. Μπορείς όλες τις πιο πάνω περιοχές να τις βάλεις σε ακόμα ένα div που θα ονομάζεται πχ(id=header).

 

Τώρα στα αριστερά έχεις μια sidebar με 5 div .

Στο κεντρικό έχεις ενα slideshow και απο κάτω είναι τα άρθρα σου. Μετά έχεις 2 περιοχές για να σηκώσεις και εκεί περιεχόμενο και τέλος το footer σου.

 

Τα div είναι φίλος σου και μπορείς να έχεις πολλά div το ένα μέσα στο άλλο. Με λίγη προσπάθεια και σφάλματα θα καταφέρεις σύντομα να έχεις ενα εντυπωσιακό site.

 

Δεν αναφέρθηκα καθόλου σε απόδοση ταχύτητα κλπ.

[sonyxp]

@ts

 

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

 

Προσωπικά είμαι του προγραμματισμού αλλά χωρίς τα σωστά γραφικά ο προγραμματισμός δεν έχει ιδιαίτερο νόημα (και αντίστοιχα)

 

Αχτύπητο δίδυμο (programmer, designer).

 

Αν έχετε φίλο που σας συμπληρώνει (δηλαδή εσύ prog αυτός designer ή ανάποδα), είστε μια χαρά!

[alexitsios]

@devr πολύ καλή δουλειά.

 

Με γενικές οδηγίες δυστυχώς δεν θα βγάλεις και πολύ άκρη. Χρειάζεται να επενδύσεις λίγο χρόνο για να μάθεις πως να κάνεις html slicing. Αρχικά θα σου πρότεινα να εκπαιδευτείς λιγάκι στην HTML και έπειτα στο πως λειτουργούν τα css frameworks. Έτσι θα καταφέρεις να έχεις το αποτέλεσμα που θέλεις. Έχω φτιάξει κάποια εκπαιδευτικά html video εδώ: http://www.supremohosting.com/html/

Θα σου πρότεινα να ξεκινήσεις από το πρώτο βίντεο και να δεις και τα css frameworks, πως γίνεται το slicing, γιατί τα προτιμούμε κλπ. Αν χρειαστείς κάποια συγκεκριμένη βοήθεια, εδώ θα είμαστε να σε βοηθήσουμε 

[Xvipes]

 

 

 

 

 

Αδερφέ αυτή την φώτο την έχεις σε μεγάλο μέγεθος?

Mε reverse image search δεν βρηκές κάτι το google(πέρα από το post σου )

[sougiasdj]

Αδερφέ αυτή την φώτο την έχεις σε μεγάλο μέγεθος?

Mε reverse image search δεν βρηκές κάτι το google(πέρα από το post σου )

 

Τι ανάλυση θες να σου φτιάξω μία από το τελευταίο κώδικα που αναπτύσσω. Αμα θες να αυτοσχεδιάσω με καμιά 20 custom tpl αρχεία(Drupal FTW) XD

[Xvipes]

Τι ανάλυση θες να σου φτιάξω μία από το τελευταίο κώδικα που αναπτύσσω. Αμα θες να αυτοσχεδιάσω με καμιά 20 custom tpl αρχεία(Drupal FTW) XD

χαχα.θέλω μια 1920x1080 και μια 720 x 1280 για το κινητο

 

μάρεσε για καποιο λόγο.Αν δε βαρεθείς σε ευχαριστώ πολυ

[devr]

Παιδιά σας ευχαριστώ πολύ για τα καλά σας λόγια! Θα αρχίσω τις προσπάθειες πάλι αύριο γιατί γενικός δεν είχα χρόνο. Σας ευχαριστώ όλους για την βοήθεια σας, αν χρειαστώ βοήθεια ( που θα χρειαστώ σίγουρα ) θα σας γράψω εδώ.. Και πάλι ευχαριστώ