למד כיצד להפוך במהירות קובצי PSD לעיצובים לאינטרנט המבוססים על HTML ומיועדים למכשירים ניידים ולמחשבים שולחניים. חלץ CSS, תמונות, מידות, גופנים, צבעים, מעברי צבע ועוד מ-Photoshop ישירות לתוך Dreamweaver.

השילוב של Extract ב-Dreamweaver מאפשר למפתחי ומעצבי אתרים להחיל נתוני עיצוב ולחלץ משאבים ממוטבים לאינטרנט ישירות בתוך סביבת כתיבת הקודים. Extract מספק פתרון מקיף ועצמאי לחילוץ נתוני עיצוב ומשאבים מקומפוזיציות PSD ומפחית את הצורך במעברים הלוך ושוב בין Photoshop ל-Dreamweaver‏.

בעזרת החלונית Extract ב-Dreamweaver, תוכל לחלץ CSS, תמונות, גופנים, צבעים, מעברי צבע ומידות ישירות לתוך דף אינטרנט. בנוסף לתכונות עיקריות אלה של Extract, ‏Dreamweaver מספק גם את התכונות הייחודיות הבאות:

extract_logo
  • גישה ישירה לקובצי ה-PSD שלך ב-Creative Cloud ולקובצי ה-PSD המשותפים בתיקיית השיתוף
  • השלמת קודים לפי הקשר המאפשרת להגדיר בקלות גופנים, צבעים ומעברי צבע ב-CSS‏
  • תמיכה בגרירה ושחרור ליצירת תגי תמונות משכבות PSD
  • הדבקת סגנונות הישר ב-Live View‏ (לדוגמה, CSS Designer ו-Element Display‏)

צעדים ראשונים עם Extract‎

Extract‎ ב- Dreamweaver מאפשר לך לגשת לקובצי PSD ישירות מהחלונית Extract ב- Dreamweaver. קרא את הנושאים הבאים לקבלת פרטים נוספים על החלונית וסביבת העבודה Extract ועל טעינת קובצי PSD בחלונית Extract:

החלונית וסביבת העבודה של Extract

סביבת העבודה של Extract תוכננה לסייע לך להשתמש ביעילות ב-Extract עם Dreamweaver‏. בסביבת עבודה זו, החלונית Extract מופיעה בצד שמאל ודף האינטרנט מופיע בצד ימין בתצוגה מפוצלת (התצוגות Live ו-Code). ניתן להתאים אישית את סביבת העבודה על-ידי גרירה, עיגון, צמצום או הרחבה של חלוניות, בהתאם לצרכיך. ניתן גם לשמור את סביבת העבודה המותאמת אישית לשימוש עתידי.

הערה:

אם תסגור בטעות את החלונית Extract, השתמש בקיצור המקשים Ctrl + K ‏(Win); ‏Cmd + K ‏(Mac) או בחר Window ‏> Extract כדי לפתוח שוב את החלונית.

עם ההפעלה הראשונה של Dreamweaver, החלונית Extract מציגה ערכת לימוד אינטראקטיבית שתסייע לך להתחיל לעבוד עם תהליכי העבודה. ניתן להשתמש ברשימה הנפתחת בראש החלונית כדי לעבור בין ערכות לימוד שונות.

לאחר השימוש בערכת הלימוד, תוכל ללחוץ על Get Started כדי להתחיל להשתמש ב-Extract ב-Dreamweaver. החלונית Extract מציגה תצוגת תמונות ממוזערות של תיקיות וקובצי PSD בחשבון Creative Cloud שלך. אלו הם קבצים אשר מועלים או מסונכרנים מהמחשב השולחני, או קבצים אשר אחרים משתפים עמך באמצעות תיקיית שיתוף ב-Creative Cloud‏.

החלונית Extract מציגה קובצי PSD שנשמרו ב-Creative Cloud
החלונית Extract מציגה קובצי PSD שנשמרו ב-Creative Cloud

הערה:

כדי להפעיל מחדש את ערכת הלימוד, לחץ על התפריט הנפתח בפינה הימנית העליונה של החלונית ובחר Launch Tutorial.

העלאת קובצי PSD ל-Creative Cloud

ניתן להעלות קובץ PSD ל-Creative Cloud על-ידי לחיצה על סמל Upload PSD בחלונית Extract. אם קומפוזיציות ה-PSD פותחו על-ידי אדם או קבוצה אחרים, תוכל לשתף אותן ב-Creative Cloud. לאחר מכן, תוכל להוריד את הקבצים ולהעלות אותם לחשבון שלך ישירות על-ידי התחברות ל-Creative Cloud או דרך החלונית Extract ב-Dreamweaver.

פתיחת קובצי PSD בחלונית Extract

לחץ על התמונה הממוזערת של קובץ ה-PSD הדרוש בחלונית Extract. אם גרסה מעודכנת של קובץ ה-PSD זמינה ב-Creative Cloud לאחר פתיחת הקובץ, טען מחדש את קובץ ה-PSD בחלונית Extract. לשם כך, לחץ על השם של קובץ ה-PSD או לחץ על Reload PSD בתפריט הנפתח בפינה הימנית העליונה. כדי לחזור לתצוגת התמונות הממוזערות ולבחור קובץ אחר, לחץ על סמל Creative Cloud בפינה השמאלית העליונה של החלונית.

כדי להגדיל את התצוגה ולהתבונן מקרוב בעיצוב, שנה את רמת ההגדלה בראש החלונית Extract או השתמש בקיצור המקשים Alt +/-‎. השתמש בכרטיסייה Layers או ברשימה הנפתחת Layer Comp כדי להציג או להסתיר רכיבים בקובץ ה-PSD.

כעת אתה מוכן לתרגם את קומפוזיציית ה-PSD לאתר אינטרנט. 

הגדרת העדפות Extract

באמצעות העדפות Extract, ניתן לציין את תבנית הקובץ המוגדרת כברירת מחדל שבה יש לחלץ את התמונות וכן את יחידות הגופן המוגדרות כברירת מחדל שיוצגו בחלונית Extract‏.

  1. בחר Edit‏ >‏ Preferences ‏(Win) או Dreamweaver‏ >‏ Preferences‏ (Mac).

  2. בחר Extract ברשימה Category.

  3. (אופציונלי) שינוי תבנית ברירת המחדל שבה יחולצו תמונות.

    תבנית תמונה שחולצה ב-Dreamweaver CC
    תבנית תמונה שחולצה
  4. (אופציונלי) במקטע Extract For Devices, בחר את הפתרונות הנדרשים. כאשר אתה בוחר לשמור תמונה בגרסאות מרובות של רזולוציה, ייעשה שימוש בהגדרות אלה.

    • כדי לשמור את הגרסאות עם סיומות, לחץ על השורה המתאימה תחת העמודה Suffix, והקלד את הטקסט.
    • כדי לשמור את הגרסאות המרובות של רזולוציה בתיקיות פלט נפרדות, לחץ על השורה המתאימה תחת העמודה Folder, וציין את הנתיב היחסי.
    Extract for devices
    Extract for devices
  5. (אופציונלי) לחץ על Clear Cache כדי למחוק את הנתונים המאוחסנים בזיכרון המטמון שקשורים לשימוש ב-Extract.

  6. לחץ על Apply ולאחר מכן סגור את תיבת הדו-שיח Preferences‏.

  7. כדי לראות את השינויים בחלונית Extract, טען מחדש את קובץ ה-PSD (תפריט נפתח >‏ Reload PSD).

    האפשרות Reload PSD בחלונית Extract
    האפשרות Reload PSD בחלונית Extract

חילוץ CSS מקובצי PSD

ניתן להעתיק את כל מאפייני ה-CSS, או חלק מהם, של רכיבים בקומפוזיציית PSD ולהדביק את הסגנונות ישירות ב-CSS Designer, ב-Element Display ב-Live View או בתוך הקוד (מקור CSS או מסמך HTML‏).

בנוסף, אפשרויות להשלמת קוד מכילות באופן אוטומטי את מאפייני ה-CSS של הרכיב שבחרת בקומפוזיציית ה-PSD. אם אתה מעדיף לכתוב קוד, תוכל להשתמש באפשרויות השלמת קוד אלה כדי לחלץ את מאפייני ה-CSS לתוך הקוד.

  1. בחלונית Extract ‏(Window ‏> Extract), לחץ על קובץ ה-PSD הדרוש. תצוגת התמונות הממוזערות של ה-PSD תתרחב ותאפשר לך להציג את הקומפוזיציה באופן ברור.

  2. בקובץ ה-PSD, לחץ על הרכיב או המשאב הדרוש. מופיע תפריט נפתח עם רשימה של מאפייני ה-CSS של הרכיב, אשר מספק לך את האפשרות לבחור ולהעתיק אותם. באפשרותך להציג את הרוחב והגובה של הרכיב שנבחר בפיקסלים או באחוזים.

    הערה: אם תבחר אחוז כאן, גם המידות יוצגו ביחידות אחוז.

    האפשרות Copy CSS בחלונית Extract
    האפשרות Copy CSS בחלונית Extract

    כדי להעתיק CSS, בחר את המאפיינים שברצונך להעתיק ולחץ על Copy CSS. 

  3. הדבק את ה-CSS במסמך באמצעות אחת מהשיטות הבאות:

    • כדי להדביק את ה-CSS ב-CSS Designer, לחץ לחיצה ימנית על הבורר הדרוש ולאחר מכן לחץ על Paste Styles.
    • כדי להדביק את ה-CSS באמצעות Element Display, לחץ לחיצה ימנית על בורר ולאחר מכן לחץ על Paste Styles.
    • כדי להדביק את ה-CSS בקוד, מקם את נקודת ההכנסה במיקום הדרוש, לחץ לחיצה ימנית ולחץ על Paste.

כדי להשתמש באפשרויות להשלמת קוד לצורך חילוץ CSS, בצע את השלבים הבאים:

  1. פתח מקור CSS המצורף למסמך או עבור ל-Code View של מסמך HTML.

  2. בחלונית Extract, לחץ על קובץ ה-PSD הדרוש ולאחר מכן לחץ על הרכיב הדרוש בקומפוזיציה.

  3. במסמך, הצב את נקודת ההכנסה במיקום הדרוש בקוד. ‎

  4. התחל להקליד את השם של מאפיין CSS כדי לראות את האפשרויות להשלמת קוד המכילות את מאפייני ה-CSS של הרכיב הנבחר בקומפוזיציית ה-PSD. לחץ על מאפיין ה-CSS הדרוש כדי להוסיף אותו לקוד.

    אפשרויות להשלמת קוד עם מאפיין CSS של רכיב בקובץ PSD
    אפשרויות להשלמת קוד עם מאפיין CSS של רכיב בקובץ PSD
  5. כדי לחלץ מאפייני CSS מרובים, בחר את המאפיינים הדרושים בחלונית Extract המוקפצת. לאחר מכן, באפשרויות השלמת הקוד, לחץ על Insert Selected‏.

    ‏‫הוספת מאפייני CSS באצווה‬ ב-Dreamweaver CC
    הוספת מאפייני CSS באצווה

העתקת טקסט מקובצי PSD

ניתן להוסיף טקסט או תוכן בקומפוזיציות PSD לתוך דף אינטרנט בלחיצה אחת. כדי להעתיק טקסט מקומפוזיציית PSD בחלונית Extract, בחר רכיב טקסט ולחץ על Copy Text. הטקסט יועתק ללוח שלך. לאחר מכן, תוכל להדביק את הטקסט בכל מקום שיידרש.

האפשרות Copy Text בחלונית Extract
האפשרות Copy Text בחלונית Extract

הערה:

לאחר חילוץ הטקסט, ניתן לחלץ מאפיינים, כגון גופנים וצבעים, המשויכים לטקסט. לקבלת מידע נוסף, ראה חילוץ גופנים, צבעים ומעברי צבע מקובצי PSD‏.

חילוץ תמונות מקובצי PSD

ניתן לגרור כל שכבה בקומפוזיציות PSD מהחלונית Extract לתוך ה-Live View של דף האינטרנט. כלים חזותיים ב-Live View, כגון הסמלים Live Guides ו-DOM, עוזרים לך לגרור ולמקם רכיבים. כשאתה משתהה לזמן מה לפני שחרור רכיב, מופיע הסמל של DOM‏ (</>). מבנה ה-DOM מוצג כאשר אתה מרחף עם סמן העכבר מעל הסמל </>, ובאפשרותך לשחרר את הרכיב בתוך המבנה. אם אתה מעדיף לכתוב קוד, תוכל להשתמש באפשרויות תלויות הקשר להשלמת קוד לצורך חילוץ תמונות. אפשרויות השלמת קוד מאפשרות לך לחלץ צבעים ומעברי צבע כתמונות.

הערה:

אם קובץ ה-PSD מכיל כמה משטחי יצירה, כל אחד מהם מוצג כתיקייה בחלונית השכבות. באפשרותך להרחיב או לצמצם את התיקייה כדי לראות או להסתיר את התוכן שלה. כדי להגדיל משטח יצירה ספציפי, הקש בפשטות על שם משטח היצירה. כדי להקטין את התצוגה, לחץ במקום כלשהו מחוץ למשטח היצירה ולחץ על FIT.

לפני הוספת התמונה שחולצה, Dreamweaver מציג את שם התמונה, הניתן לעריכה. כברירת מחדל, התמונה נשמרת בתיקיית השורש של האתר. אם ברצונך לשמור את התמונה במיקום מותאם אישית, תוכל לכלול את נתיב הספרייה המלא יחד עם שם הקובץ.

הערה: אם אתה מחלץ תמונה לתוך מסמך שאינו שייך לאתר מוגדר, התמונה תחולץ לתוך הספרייה שבה קיים המסמך. עבור מסמכים שלא נשמרו, תתבקש לשמור תחילה את המסמך.

באפשרותך גם לשמור את התמונה בדיסק המקומי ולהעביר אותה לדף האינטרנט שלך במועד מאוחר יותר. כמו כן, אם אתה מעצב אתר אינטרנט מהיר תגובה, באפשרותך לשמור גרסאות מרובות של רזולוציה של תמונה עבור התקנים באמצעות לחיצה בודדת.

  1. בחלונית Extract, לחץ על קובץ ה-PSD שממנו ברצונך להוריד את התמונות.

  2. לחץ על התמונה הנדרשת בקובץ ה-PSD.

    הערה:

    השתמש בכרטיסייה Layers וברשימה הנפתחת Layer Comps בחלונית Extract כדי להציג או להסתיר תמונות בקומפוזיציית ה-PSD. אם תמונה מורכבת משכבות מרובות, ניתן לבחור שכבה בודדת של התמונה לחילוץ.

    שים לב שהשלמות הקוד קופצות בתצוגה Code שנמצאת בחלקה הימני של סביבת העבודה. 

  3. כדי לייבא תמונות מרובות, החזק את מקש Shift או Command ולחץ על התמונות הנדרשות. התמונות שנבחרו מחולצות כתמונה בודדת.

  4. בצע אחת מהפעולות הבאות:

    • בתפריט הנפתח שמופיע בעת לחיצה על התמונה, לחץ על . ‏ ציין את הנתיב, שם הקובץ, תבנית הקובץ ומקדם שינוי הגודל (אם נדרש). לאחר מכן, בצע אחת מהפעולות הבאות:
      • לחץ על Save כדי לשמור את התמונה ברזולוציית 1x. לשינוי גודל התמונה, בחר Scale At, וציין את מקדם שינוי הגודל.
      • לחץ על Save Multiple כדי לשמור גרסאות מרובות של רזולוציית התמונה. קובץ PSD לא חייב בהכרח לכלול גרסאות אלה; Dreamweaver יכול לשמור את התמונה ברזולוציות מרובות במהלך החילוץ.

    באפשרותך לציין את גרסאות הרזולוציה הנדרשת ואת תיקיית הפלט המתאימה ב-Preferences.

    חילוץ תמונה באמצעות סמל Extract Asset
    חילוץ תמונה באמצעות סמל Extract Asset
    • גרור את התמונה לתצוגת Live של המסמך. מחווני Live Guides מופיעים בתצוגת Live כדי לסייע לך למקם את התמונה.

    בעת שחרור התמונה, Dreamweaver מציג את שם התמונה. תוכל לערוך את שם התמונה וכן את הסיומת. הקש Enter כדי לשמור את התמונה. כברירת מחדל, התמונה נשמרת בתיקיית השורש של האתר. כדי לשמור את התמונה במיקום מותאם אישית, הזן את הנתיב יחד עם שם הקובץ.

    אפשרות עריכת שם הקובץ והסיומת בעת שחרור תמונה מהחלונית Extract
    אפשרות עריכת שם הקובץ והסיומת בעת שחרור תמונה מהחלונית Extract
    • בעת לחיצה על התמונה, כלולות אפשרויות תלויות הקשר להשלמת קוד ב-Dreamweaver. בתצוגת Code של מסמך HTML או במסמך CSS, הצב את הסמן בנקודת ההכנסה. לאחר שתקליד את שם מאפיין תמונת הרקע או את התג <img>, שם התמונה שנבחרה יופיע באפשרויות להשלמת קוד. בחר את התמונה, שנה את השם והסיומת, במידת הצורך, והקש Enter.

    כברירת מחדל, התמונה נשמרת בתיקיית השורש של האתר. כדי לשמור את התמונה במיקום מותאם אישית, הזן את נתיב הקובץ המותאם אישית יחד עם שם הקובץ.

    חילוץ תמונות באמצעות אפשרויות להשלמת קוד
    חילוץ תמונות באמצעות אפשרויות להשלמת קוד

חילוץ מידות מקובצי PSD

באמצעות החלונית Extract, ניתן להציג ולחלץ בקלות את ערך המידה בין שני רכיבים בקומפוזיציית ה-PSD. 

  1. בקובץ ה-PSD, בחלונית Extract, לחץ על הרכיבים הדרושים על-ידי הקשה ממושכת על המקש Shift או Command.

    החלונית Extract מציגה את המרחק האופקי והאנכי בין שני הרכיבים.

    מידות בחלונית Extract
    מידות בחלונית Extract

    הערה:

    כדי להציג את המידות ביחידות אחוז, לחץ על רכיב כלשהו ולאחר מכן לחץ על percentage.

  2. לחץ על הערך הדרוש והעתק אותו ללוח.

  3. הדבק את הערך במקום הדרוש; לדוגמה, במאפייני ה-CSS של CSS Designer או בקוד.

חילוץ גופנים, צבעים ומעברי צבע מקובצי PSD

באמצעות החלונית Extract, ניתן לחלץ את מאפייני ה-CSS של גופנים, צבעים או מעברי צבע שנעשה בהם שימוש בקומפוזיציית ה-PSD.

  1. בחלונית Extract, לחץ על Styles.

  2. כדי לחלץ גופנים, בצע את הפעולות הבאות במקטע Fonts.

    1. הרחב את סוג הגופן הדרוש.

      לקבלת פרטים נוספים על הגופן, לחץ על סמל Adobe Fonts ‏().

    2. לחץ על התבנית והגודל שברצונך להעתיק ולאחר מכן, בתפריט הנפתח שמופיע, לחץ על Copy CSS. ‏ ‏Extract מוסיף תגים לרכיבי הטקסט שמשתמשים בגופן, בתבנית ובגודל שעליהם לחצת.

      הערה:

      ניתן לשנות את יחידת הגופן ל-'em' או ל-'rem' בהעדפות Extract ‏(Preferences ‏> Extract). לחץ על Reload PSD בתפריט הנפתח בפינה הימנית העליונה של החלונית Extract כדי לראות את השינויים.

      חילוץ גופנים
      חילוץ גופנים
    3. הדבק את ה-CSS במקום הדרוש; לדוגמה, בקוד או ב-CSS Designer.

    כדי לחלץ צבעים, בצע את הפעולות הבאות במקטע Colors:

    1. ‏‫לחץ על דוגמית הצבע הדרושה. Extract מוסיף תגים לרכיבים שמשתמשים בצבע שנבחר.

      הערה: ניתן גם לבחור צבע אחר מקומפוזיציית ה-PSD באמצעות דוגם הצבע.

    2. בתפריט הנפתח שמופיע בעת לחיצה על דוגמית הצבע, בחר את מודל הצבע הדרוש (RGB, ‏Hex או HSL) ולאחר מכן העתק (Ctrl+c;‏ Cmd+c) את ערך הצבע.

      חילוץ צבעים
      חילוץ צבעים
    3. הדבק את ערך הצבע במקום הדרוש; לדוגמה, בקוד או ב-CSS Designer.

  3. כדי לחלץ מעברי צבע, לחץ על דוגמית מעבר צבע במקטע Gradients. בתפריט הנפתח שמופיע, לחץ על Copy CSS. הדבק את ה-CSS במקום הדרוש, לדוגמה, בקוד או ב-CSS Designer.

    קידומות הספקים שנבחרו בהעדפות (Preferences‏ >‏ CSS Styles) מודבקות גם הן יחד עם מעברי הצבע. אם אתה מחלץ מעבר צבע רדיאלי, ה-CSS המתאים מתווסף ללא קידומת ספק מאחר שמעברי צבע רדיאליים אינם נתמכים.

    חילוץ מעבר צבע
    חילוץ מעבר צבע

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת