מדריך למשתמש ביטול

שימוש בקובצי Photoshop ב-Dreamweaver

חפש

עודכן לאחרונה בתאריך 20 במאי 2021

Dreamweaver

פתח אפליקציה

למד כיצד Photoshop משולב עם Dreamweaver. עבוד עם אובייקטים חכמים בזרימות עבודה של Photoshop ו-Dreamweaver.

אודות שילוב עם Photoshop

הערה:

תהליכי העבודה של Photoshop Integration יופסקו ב-Dreamweaver 21.0 ואילך.

ניתן להוסיף קובצי תמונה של Photoshop (תבנית PSD) לדפי אינטרנט ב-Dreamweaver ולהניח ל-Dreamweaver למטב אותם כתמונות המוכנות לאינטרנט (תבניות GIF, ‏JPEG ו-PNG). בעת ביצוע הפעולה, Dreamweaver מוסיף את התמונה כאובייקט חכם ושומר על חיבור חי לקובץ ה- PSD המקורי.

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

הערה:

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

לעיון בערכת לימוד בנושא שילוב של Photoshop עם Dreamweaver, ראה שילוב של Dreamweaver עם Photoshop.

אודות אובייקטים חכמים ותהליכי עבודה של Photoshop ו-Dreamweaver

קיימים שני תהליכי עבודה עיקריים לעבודה עם קובצי Photoshop ב- Dreamweaver: תהליך עבודה של העתקה והדבקה ותהליך עבודה של אובייקטים חכמים.

תהליך עבודה של העתקה והדבקה

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

תהליך עבודה של אובייקטים חכמים

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

כשתמונת האינטרנט (כלומר התמונה בדף של Dreamweaver) אינה מסונכרנת עם קובץ Photoshop המקורי, Dreamweaver מאתר שהקובץ המקורי עודכן ומציג אחד מהחצים של סמל העצם החכם באדום. אם תבחר בתמונת האינטרנט בתצוגת Design ותלחץ על הלחצן Update from Original במפקח התכונות, התמונה תתעדכן אוטומטית ותשקף את השינויים שהוכנסו בקובץ Photoshop המקורי.

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

ניתן גם לעדכן עצם חכם מבלי לבחור בתמונת האינטרנט בתצוגת Design. החלונית Assets מאפשרת לעדכן את כל העצמים החכמים, כולל תמונות שייתכן כי לא ניתן לבחור בהן בחלון המסמך (לדוגמה תמונות רקע מסוג CSS).

הגדרות מיטוב תמונה

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

אם אתה מעתיק ומדביק עדכון לפרוסה או לשכבה מסוימת, Dreameaver זוכר את ההגדרות ויוצר מחדש את תמונת האינטרנט עם הגדרות אלה. באופן דומה, כשמעדכנים עצם חכם במפקח התכונות, Dreamweaver משתמש באותן הגדרות שהשתמשת בהן כשהוספת בפעם הראשונה את התמונה. ניתן לשנות הגדרות תמונה בכל עת על-ידי בחירת תמונת האינטרנט בתצוגת Design ולחיצה על הלחצן Edit Image Settings במפקח התכונות.

אחסון קובצי Photoshop

אם הוספת תמונת אינטרנט ולא שמרת את קובץ Photoshop המקורי באתר של Dreamweaver‏, Dreamweaver יזהה את הנתיב לקובץ המקורי כנתיב קובץ מקומי מוחלט. ‏(הדבר נכון לתהליך עבודה של העתקה והדבקה ולתהליך עבודה עם עצמים חכמים). לדוגמה, אם הנתיב לאתר Dreamweaver הוא C:\Sites\mySite, וקובץ Photoshop מאוחסן ב: C:\Images\Photoshop‏, Dreameaver לא יזהה את המשאב המקורי כחלק מהאתר הנקרא mySite. הדבר עלול לגרום לבעיות אם תרצה לשתף חברים בצוות בקובץ Photoshop, משום ש- Dreamweaver יזהה רק קובץ הזמין בכונן קשיח מקומי מסוים.

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

לעיון בערכת לימוד בנושא ביצוע עריכה דו-כיוונית בעזרת Photoshop, ראה ביצוע עריכה דו-כיוונית בעזרת Photoshop.

יצירת אובייקט חכם

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

ב- Dreamweaver (בתצוגת Design או Code), הצב את נקודת ההכנסה בעמוד במקום שבו תרצה להוסיף את התמונה.
בחר Insert >‏ Image.

הערה:

אם תאחסן קובצי Photoshop באתר שלך, תוכל גם לגרור קובץ PSD מהחלונית Files לעמוד. במקרה כזה, דלג על השלב הבא.
אתר את קובץ PSD של תמונת Photoshop בתיבת הדו-שיח Select Image Source על-ידי לחיצה על הלחצן Browse וניווט לקובץ.
בתיבת הדו-שיח Image Optimization שמופיעה, התאם את הגדרות המיטוב לפי הצורך ולחץ על OK.
שמור את קובץ התמונה המוכנה לאינטרנט במיקום כלשהו בתוך תיקיית השורש של האתר.

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

הערה:

אם תחליט מאוחר יותר לשנות את הגדרות המיטוב של תמונה הממוקמת בדפים שלך, תוכל לבחור את התמונה, ללחוץ על הלחצן Edit Image Settings ב-Property inspector ולבצע שינויים בתיבת הדו-שיח Image Optimization. השינויים המבוצעים בתיבת הדו-שיח Image Optimization הפיכים. Dreamweaver לעולם לא ישנה את קובץ Photoshop המקורי, אלא תמיד ייצור תמונת אינטרנט חדשה המבוססת על הנתונים המקוריים.

לעיון בערכת לימוד בנושא ביצוע עריכה דו-כיוונית בעזרת Photoshop, ראה ביצוע עריכה דו-כיוונית בעזרת Photoshop.

עדכון אובייקט חכם

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

כדי לעדכן אובייקט חכם בתוכן העדכני של קובץ Photoshop המקורי, בחר את האובייקט החכם בחלון Document ולאחר מכן לחץ על הלחצן Update from Original במפקח המאפיינים.

הערה:

אין צורך בהתקנת Photoshop כדי לבצע את העדכון מתוך Dreamweaver.

עדכון אובייקטים חכמים מרובים

ניתן לעדכן מספר אובייקטים חכמים בבת אחת מתוך החלונית Assets. החלונית Assets מאפשרת גם לראות את כל האובייקטים החכמים שייתכן כי לא ניתן לבחור בהם בחלון המסמך (לדוגמה, תמונות רקע של CSS).

בחלונית Files, לחץ על הכרטיסייה Assets כדי להציג את משאבי האתר.
הקפד לבחור בתצוגת Images. אם היא לא נבחרה, לחץ על הלחצן Images.
בחר בכל משאב תמונה בחלונית Assets. בבחירת אובייקט חכם, סמל האובייקט החכם יופיע בפינה השמאלית העליונה של התמונה. סמל זה לא מופיע בתמונות רגילות.
לכל אובייקט חכם שתרצה לעדכן, לחץ לחיצה ימנית על שם הקובץ שלו ובחר Update from Original. ניתן גם להקיש Control תוך כדי הלחיצה, על מנת לבחור במספר שמות קובץ ולעדכן את כולם בבת אחת.

הערה:

אין צורך בהתקנת Photoshop כדי לבצע את העדכון מתוך Dreamweaver.

שינוי גודל של אובייקט חכם

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

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

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

עריכת קובץ Photoshop מקורי של אובייקט חכם

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

הערה:

ודא ש- Photoshop מוגדר כעורך התמונות החיצוני העיקרי שלך.

בחר את האובייקט החכם בחלון המסמך.
לחץ על הלחצן Edit במפקח המאפיינים.
בצע את השינויים הרצויים ב- Photoshop ושמור את קובץ PSD החדש.
ב-Dreamweaver, בחר שוב את האובייקט החכם ולחץ על הלחצן Update from Original.

הערה:

אם שינית את גודל התמונה ב-Photoshop, עליך להגדיר מחדש את גודל תמונת האינטרנט ב-Dreamweaver.‏ Dreamweaver מעדכן אובייקט חכם רק לפי התוכן של קובץ Photoshop המקורי, ולא לפי גודלו. כדי לסנכרן את גודל תמונת האינטרנט עם הגודל של קובץ Photoshop המקורי, לחץ לחיצה ימנית על התמונה ובחר Reset Size To Original.

מצבים של אובייקטים חכמים

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

מצב אובייקט חכם	תיאור	פעולה מומלצת
תמונות מסונכרנות	תמונת האינטרנט מסונכרנת עם התוכן הנוכחי של קובץ Photoshop המקורי. תכונות הרוחב והגובה בקוד HTML תואמות למידות של תמונת האינטרנט.	None
המשאב המקורי השתנה	קובץ Photoshop המקורי השתנה לאחר יצירתה של תמונת האינטרנט ב- Dreamweaver.	השתמש בלחצן Update From Original במפקח המאפיינים כדי לסנכרן בין שתי התמונות.
המידות של תמונת האינטרנט שונות מהרוחב ומהגובה שנבחרו בקוד HTML	תכונות הרוחב והגובה בקוד HTML שונות ממידות הרוחב והגובה של תמונת האינטרנט ש- Dreamweaver יצר בשעת ההוספה. אם המידות של תמונת האינטרנט קטנות מערכי הרוחב והגובה בקוד HTML, תמונת האינטרנט עלולה להופיע כמפוקסלת.	השתמש בלחצן Update From Original במפקח המאפיינים כדי ליצור מחדש את תמונת האינטרנט מקובץ Photoshop המקורי. בשעת היצירה מחדש של התמונה, Dreamweaver משתמש במידות הרוחב והגובה הנוכחיות, כפי שצוינו בקוד HTML.
המידות של המשאב המקורי קטנות מדי לרוחב ולגובה שנבחרו בקוד HTML	תכונות הרוחב והגובה בקוד HTML גדולות ממידות הרוחב והגובה של קובץ Photoshop המקורי. תמונת האינטרנט עלולה להופיע כמפוקסלת.	אין ליצור תמונות אינטרנט הגדולות יותר ממידותיו של קובץ Photoshop המקורי.
המשאב המקורי לא נמצא	Dreamweaver לא מוצא את קובץ Photoshop המקורי שצוין בתיבת הטקסט Original של מפקח המאפיינים.	תקן את הנתיב בתיבת הטקסט Original של מפקח המאפיינים או העבר את קובץ Photoshop למיקום המוגדר כעת.

העתקה והדבקה של בחירה מתוך Photoshop

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

הערה:

בעוד שהפונקציונליות של האפשרות Update from Original אינה זמינה לתמונות מודבקות, ניתן עדיין לפתוח ולערוך את קובץ Photoshop המקורי על-ידי בחירת התמונה המודבקת ולחיצה על הלחצן Edit במפקח המאפיינים.

ב- Photoshop, בצע אחת מהפעולות הבאות:
- העתק שכבה אחת במלואה או בחלקה באמצעות הכלי Marquee לבחירת המקטע שברצונך להעתיק, ולאחר מכן בחר Edit ‏> Copy. פעולה זו מעתיקה אל הלוח רק את השכבה הפעילה של האזור הנבחר. אם קיימים בתמונה אפקטים מבוססי שכבה, הם לא יועתקו.
- העתק ומזג שכבות מרובות באמצעות הכלי Marquee לבחירת המקטע שברצונך להעתיק, ולאחר מכן בחר Edit ‏> Copy Merged. פעולה זו משטחת ומעתיקה אל הלוח את השכבה הפעילה ואת כל השכבות הנמוכות של האזור הנבחר. אם קיימים בתמונה אפקטים מבוססי שכבה המשויכים לאחת משכבות אלה, הם יועתקו.
- העתק פרוסה באמצעות הכלי Slice Select לבחירת הפרוסה, ולאחר מכן בחר Edit ‏> Copy. פעולה זו משטחת ומעתיקה ללוח את כל השכבות הפעילות והתחתונות של הפרוסה.
הערה:

ניתן לבחור Select ‏> All כדי להעתיק במהירות תמונה במלואה.
ב- Dreamweaver (בתצוגת Design או Code), הצב את נקודת ההכנסה בעמוד במקום שבו תרצה להוסיף את התמונה.
בחר Edit >‏ Paste.
בתיבת הדו-שיח Image Optimization, התאם את הגדרות המיטוב לפי הצורך ולחץ על OK.
שמור את קובץ התמונה המוכנה לאינטרנט במיקום כלשהו בתוך תיקיית השורש של האתר.

Dreamweaver מגדיר את התמונה לפי הגדרות המיטוב שלך וממקם בדף גרסה מוכנה לאינטרנט של התמונה. מידע על התמונה, כגון מיקומו של קובץ PSD המקורי, נשמר ב-Design Note גם אם בחרת שלא לשמור Design Notes לאתר שלך. Design Note זה מאפשר לך לשוב ולערוך את קובץ Photoshop המקורי מתוך Dreamweaver.

עריכת תמונות מודבקות

לאחר הדבקה של תמונות Photoshop בדפי Dreamweaver, ניתן לערוך את קובץ PSD המקורי ב-Photoshop. בעת השימוש בתהליך עבודה של העתקה/הדבקה, Adobe ממליצה לבצע תמיד שינויי עריכה בקובץ PSD המקורי (ולא בתמונה המוכנה לאינטרנט) ולאחר מכן להדביק אותו שוב על מנת לשמור על מקור יחיד.

הערה:

ודא ש- Photoshop מוגדר כעורך התמונות החיצוני העיקרי לקבצים מהסוג שברצונך לערוך.

ב- Dreamweaver, בחר תמונה מוכנה לאינטרנט שנוצרה במקור ב- Photoshop, ובצע אחת מהפעולות הבאות:
- לחץ על הלחצן Edit במפקח המאפיינים של התמונה.
- הקש Control ‏(Windows) או Command ‏(Macintosh) ולחץ פעמיים על הקובץ.
- לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) על תמונה, בחר Edit Original With מתוך התפריט תלוי-ההקשר ולאחר מכן בחר Photoshop.
הערה:

זאת בהנחה ש- Photoshop הוא עורך החיצוני העיקרי של קובצי תמונה בתבנית PSD. ייתכן גם שתרצה להגדיר את Photoshop כעורך ברירת המחדל לקבצים מסוג JPEG, ‏GIF ו- PNG.
ערוך את הקובץ ב- Photoshop.
חזור אל Dreamweaver והדבק בדף את התמונה המעודכנת או את מה שבחרת.

אם בשלב כלשהו תרצה למטב את התמונה מחדש, תוכל לבחור את התמונה וללחוץ על הלחצן Edit Image Settings ב-Property inspector.

הגדרת אפשרויות בתיבת הדו-שיח Image Optimization

בעת יצירת אובייקט חכם או הדבקת בחירה מתוך Photoshop, ‏Dreamweaver מציג את תיבת הדו-שיח Image Optimization.‏ (Dreamweaver מציג תיבת דו-שיח זו גם לסוגים אחרים של תמונות אם תבחר את התמונה ותלחץ על הלחצן Edit Image Settings ב-Property inspector.) תיבת דו-שיח זו מאפשרת לך להגדיר ולהציג הגדרות של תמונות מוכנות לאינטרנט בעירוב הנכון של צבע, דחיסה ואיכות.

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

הערה:

ההגדרות שתבחר משפיעות רק על הגרסה המיובאת של קובץ התמונה. קובץ PSD המקורי של Photoshop או קובץ PNG המקורי של Fireworks נשארים תמיד ללא שינוי.

Preset

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

לדוגמה, עבור תמונות הדורשות תצוגה ברורה ביותר, בחר PNG24 for Photos (Sharp Details)‎. בחר GIF For Background Images (Patterns)‎ אם אתה מוסיף דוגמה שתשמש כרקע של הדף.

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

קבל עזרה במהירות ובקלות

משתמש חדש?

שימוש בקובצי Photoshop ב-Dreamweaver

אודות שילוב עם Photoshop

אודות אובייקטים חכמים ותהליכי עבודה של Photoshop ו-Dreamweaver

יצירת אובייקט חכם

עדכון אובייקט חכם

עדכון אובייקטים חכמים מרובים

שינוי גודל של אובייקט חכם

עריכת קובץ Photoshop מקורי של אובייקט חכם

מצבים של אובייקטים חכמים

העתקה והדבקה של בחירה מתוך Photoshop

עריכת תמונות מודבקות

הגדרת אפשרויות בתיבת הדו-שיח Image Optimization

קבל עזרה במהירות ובקלות

שאל את הקהילה

איך פונים אלינו