מאז הגעת גרסת CS6 יישום אדובי בפוטושופ אפשרות שימושית מאוד לפריסה ופיתוח עיצובים ברשת. המבצע הוא קל מאוד ומעל לכל מהר. באמצעות היישום נוכל ליצור גליונות סגנון מדורגים תוך התייחסות לצורות ולשכבות הטקסט שלנו. ההליך פשוט כמו פיתוח ה- mockup שלנו, העתקת גרסת הקוד של האלמנטים שלנו והדבקתו על הגיליון שלנו.
זו אפשרות טובה מאוד במיוחד משום שהיא מאפשרת לנו לראות את התפתחות העיצוב שלנו במונחים חזותיים ובזמן אמת. להלן מספר טיפים לשימוש באפשרות זו ולקבל את ביצועים מקסימליים:
נסו לדייק
כדי להשיג תוצאה מקצועית, מומלץ לקחת בחשבון את המידות והפרופורציות של האתר שלך. הגדר את ערכי הרוחב והגובה של התבנית שאתה מעצב והחל אותם על הדגם שלך. כשאתה מעתיק את קוד ה- CSS נניח כל אלמנט תוך התייחסות למרחק בפיקסלים בין כל אלמנט לקצוות היריעה. קח בחשבון גם את הגדלים והסיבות ההיררכיות שאתה מתכוון לכלול בעיצוב שלך, כולל יישור של כל אלמנט והמרווח בין כל אחד מהם כדי לספק קריאות מקסימאלית למשתמשים שלך.
השימוש במדריכים וכללי הממשק יסייעו לך לבנות תבנית מסודרת ונקייה עם כל האלמנטים שלה מיושרים בצורה מושלמת.
הגדר את כל המאפיינים של כל אלמנט
האפשרות להעתיק את קוד CSS נותנת לנו אפשרות לעצב את האתר שלנו בדיוק רב מהשימוש בשכבות טופס וטקסט. התוכן של כל שכבה יועתק ללוח ואנחנו יכולים להדביק אותו במהירות בגיליון הסגנונות שלנו. משכבות הצורה, צלם את הערכים עבור ההגדרות הבאות:
- גודל
- עמדה
- צבע שבץ
- צבע מילוי (כולל שיפועים)
- טיפ צל
משכבות הטקסט אנו יכולים לתפוס את הערכים הבאים:
- משפחת גופן
- גודל גופן
- עובי גופן
- גובה קו
- מודגש
- חוצה דרך
- כתב עליון
- מנוי
- יישור טקסט
זכור זאת והגדר כל אחד מהערכים הללו כדי לספק את הסגנון שאתה מחפש.
עבוד עם קבוצות שכבות
פונקציה זו מתרגמת את העבודה שלנו מאורגנת על ידי שני סוגים של כיתה, אחד לכל קבוצה המאגדת שכבות של צורות או טקסט וכיתה לכל שכבה של אחד מהסוגים הללו. כל כיתת קבוצה תייצג אלמנט מחלק הורה שיכיל אלמנטים של חלוקת ילדים שיתאימו לשכבות המוכנסות בכל קבוצה. באופן זה, הערכים העליונים והשמאליים של מכולות הצאצא ייקבעו בהתייחס למכולה האב. עליך לזכור כי אפשרות זו אינה זמינה עם אובייקטים חכמים והיא לא תחול על יותר משכבה אחת בו זמנית אלא אם כן הם מקובצים.
צעדים להמרה
לאחר שביצעת את הדגם שלך, התאמת אישית כל אלמנט וקיבצת אותם לפי קבוצות, תצטרך רק לבצע את השלבים הבאים:
- עבור אל חלונית השכבות ובחר אחת משתי האפשרויות הבאות:
- לחץ לחיצה ימנית על שכבת צורה או טקסט או על קבוצת שכבות ובחר העתק CSS בתפריט ההקשר.
- בחר שכבת צורות או טקסט או קבוצת שכבות, ואז בחר באפשרות העתק CSS בתפריט החלונית Layers.
-
הדבק את הקוד במסמך גיליון הסגנונות שלך והחל אותו על הדפים שלך באמצעות html5.
