Πώς να μετατρέψετε τη σχεδίαση του Photoshop σε κώδικα CSS σε λιγότερο από ένα λεπτό

css-photoshop

Από την άφιξη της έκδοσης CS6, η Adobe εφάρμοσε στο Photoshop μια πολύ χρήσιμη επιλογή για τη διαμόρφωση και την ανάπτυξη ιστοσελίδων. Η λειτουργία είναι πολύ εύκολο και πάνω απ 'όλα γρήγορα. Μέσω της εφαρμογής θα είμαστε σε θέση να δημιουργήσουμε διαδοχικά φύλλα στυλ λαμβάνοντας ως αναφορά τα σχήματα και τα επίπεδα κειμένου μας. Η διαδικασία είναι τόσο απλή όσο η ανάπτυξη του mockup μας, η αντιγραφή της κωδικής έκδοσης των στοιχείων μας και η επικόλλησή της στο φύλλο μας.

Είναι μια πολύ καλή επιλογή ειδικά επειδή μας επιτρέπει να δούμε την εξέλιξη του σχεδιασμού μας με οπτικούς όρους και σε πραγματικό χρόνο. Ακολουθούν μερικές συμβουλές για να χρησιμοποιήσετε αυτήν την επιλογή και να λάβετε το μέγιστη απόδοση:

Προσπαθήστε να είστε ακριβείς

Για να αποκτήσετε ένα επαγγελματικό αποτέλεσμα, συνιστάται να λάβετε υπόψη τις μετρήσεις και τις αναλογίες του ιστότοπού σας. Ορίστε τις τιμές πλάτους και ύψους του προτύπου που σχεδιάζετε και εφαρμόστε τις στο πρότυπο σας. Όταν αντιγράφετε τον κώδικα CSS, θα τοποθετούμε κάθε στοιχείο λαμβάνοντας ως αναφορά την απόσταση σε pixel μεταξύ κάθε στοιχείου και των άκρων του καμβά. Λάβετε επίσης υπόψη τα μεγέθη και τους ιεραρχικούς λόγους που πρόκειται να συμπεριλάβετε στο σχέδιό σας, συμπεριλαμβανομένης της ευθυγράμμισης κάθε στοιχείου και της απόστασης μεταξύ τους για να παρέχουν τη μέγιστη αναγνωσιμότητα στους χρήστες σας.

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

web-photoshop

Διαμορφώστε όλα τα χαρακτηριστικά κάθε στοιχείου

Η επιλογή αντιγραφής του κώδικα CSS μας δίνει τη δυνατότητα να σχεδιάσουμε τον ιστότοπό μας με μεγάλη ακρίβεια χρησιμοποιώντας στρώματα σχήματος και κειμένου. Το περιεχόμενο κάθε επιπέδου θα αντιγραφεί στο Πρόχειρο και μπορούμε να το επικολλήσουμε γρήγορα στο φύλλο στυλ μας. Από τα επίπεδα σχήματος, καταγράψτε τις τιμές των ακόλουθων ρυθμίσεων:

  • Μέγεθος
  • Θέση
  • Χρώμα περιγράμματος
  • Γεμίστε το χρώμα (συμπεριλαμβανομένων των ντεγκραντέ)
  • Σκίαση

Από τα επίπεδα κειμένου μπορούμε να καταγράψουμε τις ακόλουθες τιμές:

  • Οικογένεια γραμματοσειρών
  • Μέγεθος γραμματοσειράς
  • Πάχος γραμματοσειράς
  • Υψος γραμμής
  • Υπογραμμισμένο
  • Διάλειμμα
  • Υπερκείμενο
  • Υπογεγραμμένος
  • Ευθυγράμμιση κειμένου

Λάβετε υπόψη αυτό και ορίστε καθεμία από αυτές τις τιμές για να παρέχει το στυλ που αναζητάτε.

Εργαστείτε με ομάδες επιπέδων

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

Βήματα για μετατροπή

Μόλις κάνετε το mockup σας, έχετε προσαρμόσει κάθε στοιχείο και τα ομαδοποιήσετε ανά ομάδες, θα πρέπει μόνο να ακολουθήσετε αυτά τα βήματα:

  • Μεταβείτε στον πίνακα επιπέδων και επιλέξτε μία από αυτές τις δύο επιλογές:
    • Κάντε δεξί κλικ σε ένα σχήμα ή ένα επίπεδο κειμένου ή μια ομάδα επιπέδων και επιλέξτε Αντιγραφή CSS στο μενού περιβάλλοντος.
    • Επιλέξτε ένα σχήμα ή επίπεδο κειμένου ή μια ομάδα επιπέδων και, στη συνέχεια, ορίστε την επιλογή Αντιγραφή CSS στο μενού του πίνακα "Επίπεδα".
  • Επικολλήστε τον κώδικα στο έγγραφο του φύλλου στυλ σας και εφαρμόστε τον στις σελίδες σας μέσω html5.

    CSS-Photoshop1

    CSS-Photoshop2


Γίνε ο πρώτος που θα σχολιάσει

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.