تعرف على كيفية تكامل Photoshop مع Dreamweaver. قم بالعمل باستخدام Smart Objects في عمليات سير عمل Photoshop - Dreamweaver.

حول تكامل Photoshop

يمكنك إدراج ملفات صور Photoshop (التنسيق PSD) في صفحات الويب في Dreamweaver بحيث يمكنك من خلال Dreamweaver تحسينها كصور جاهزة للويب (التنسيقات GIF وJPEG وPNG). عند إجراء ذلك، يقوم Dreamweaver بإدراج الصورة ككائن ذكي Smart Object ويحافظ على الاتصال المباشر بملف PSD الأصلي.

كما يمكنك لصق صور Photoshop متعددة الطبقات أو الشرائح بالكامل أو جزئيًا في صفحة ويب في Dreamweaver. على الرغم من ذلك، فعندما تنسخ وتلصق من Photoshop، فإنه لا يتم الاحتفاظ بوجود اتصال مباشر بالملف الأصلي. لتحديث الصورة، قم بإجراء التغييرات في Photoshop وانسخ والصق مرةً أخرى.

ملاحظة:

إذا كنت تستخدم هذه الميزة الخاصة بالتكامل بشكل متكرر، فمن الأفضل أن تقوم بتخزين ملفات Photoshop في موقع Dreamweaver لتيسير الوصول إليها بصورة أكبر. إذا قمت بذلك، فاحرص على حمايتها تجنبًا لتعرض الأصول الأصلية، بالإضافة إلى جميع عمليات النقل غير الضرورية بين الموقع المحلي والخادم البعيد.

‏‫للحصول على تدريب حول تكامل Dreamweaver مع Photoshop، انظر تكامل Dreamweaver مع Photoshop.

حول عمليات سير عمل Smart Objects وPhotoshop-Dreamweaver

يوجد سيري عمل أساسيين للعمل باستخدام ملفات Photoshop في Dreamweaver: سير عمل copy/paste، وسير عمل Smart Objects.

سير عمل copy/paste

يتيح لك سير عمل copy/paste تحديد الشرائح أو الطبقات في ملف Photoshop، ثم استخدام Dreamweaver لإدراجها كصور جاهزة للويب. إذا كنت تريد تحديث المحتوى لاحقاً، على أي حال، يجب عليك فتح ملف Photoshop الأصلي، وعمل التغييرات، ونسخ شريحتك أو طبقتك إلى الحافظة مرة أخرى، ثم لصق الشريحة أو الطبقة المحدثة في Dreamweaver. ينصح بسير العمل هذا فقط عندما تريد إدراج جزء من ملف Photoshop (على سبيل المثال، قسم من تراكب التصميم) كصورة على صفحة ويب.

سير عمل Smart Objects

عن العمل باستخدام ملفات Photoshop كاملة، تنصح Adobe بسير عمل Smart Objects. الكائن الذكي في Dreamweaver هو أصل صورة موضوعة على صفحة ويب لها اتصال مباشر بملف Photoshop (PSD). في عرض تصميم Dreamweaver، يكون الكائن الذكي مميز بأيقونة في الزاوية العليا اليسرى من الصورة.

كائن ذكي
كائن ذكي

عندما تكون الصورة على الويب (الصورة على صفحة Dreamweaver) خارجة عن التزامن مع ملف Photoshop الأصلي، فإن Dreamweaver يكتشف أن الملف الأصلي تم تحديثه، ويعرض أحد أسهم أيقونة Smart Objects باللون الأحمر. عندما تقوم بتحديد صورة الويب في عرض التصميم ونقر زر تحديث من الأصل في مفتش الخاصية، يتم تحديث الصورة آلياً، عاكسة أي تغيرات تمت على ملف Photoshop الأصلي.

عندما تستخدم سير عمل Smart Objects، لا تحتاج لفتح Photoshop لتحديث صورة الويب. بالإضافة إلى، أي تحديثات تقوم بها على كائن ذكي في Dreamweaver تكون غير مدمرة. ذلك أنك يمكن أن تقوم بتغيير إصدار الويب من الصورة على صفحتك ما إبقاء صورة Photoshop الأصلية بدون تعديل.

يمكنك أيضاً تحديد كائن ذكي بدون تحديد صورة الويب في عرض التصميم. تتيح لك لوحة الأصول تحديث كل الكائنات الذكية، بما في ذلك الصور التي قد لا تكون ممكنة التحديد في نافذة المستند (على سبيل المثال، صور خلفية CSS).

إعدادات تحسين الصورة

لكل من سير عمل copy/paste واSmart Objects يمكنك تعيين إعدادات تحسين في مربع الحوار Image Optimization. يتيح لك مربع الحوار هذا تحدد تنسيق الملف وجودة الصورة. إذا كنت تنسخ شريحة أو طبقة، أو تقوم بإدراج ملف Photoshop ككائن ذكي لأول مرة، يعرض Dreamweaver مربع الحوار هذا بحيث يمكنك إنشاء صورة الويب بسهولة.

إذا قمت بنسخ ولصق تحديث على شريحة أو طبقة معينة، يتذكر Dreamweaver الإعدادات الأصلية ويعيد إنشاء صورة الويب باستخدام تلك الإعدادات. بالمثل، عندما تقوم بتحديث كائن ذكي باستخدام مفتش الخاصية، يستخدم Dreamweaver نفس الإعدادات التي استخدمتها عندما قمت بإدراج الصورة أول مرة. يمكنك تغيير إعدادات الصورة في أي وقت بتحديد صورة الويب في عرض التصميم، ثم النقر فوق الزر Edit Image Settings في عارض الخصائص.

تخزين ملفات Photoshop

إذا قمت بإدراج صورة ويب، ولم تقوم بتخزين ملف Photoshop الأصلي في موقع Dreamweaver الخاص بك، يقوم Dreamweaver بالتعرف على المسار إلى الملف الأصلي على هيئة مسار ملف محلي مطلق. (هذا صحيح لكل من سير عمل النسخ/اللصق والكائن الذكي.) على سبيل المثال، إذا كان المسار في موقعك هو C:\Sites\mySite، وملف Photoshop الخاص بك مخزن في C:\Images\Photoshop، سيتعرف Dreamweaver على الأصل الأصلي كجزء من الموقع المسمى mySite. سيؤدي ذلك لمشاكل إذا كنت تريد أن تشارك ملف Photoshop مع أعضاء آخرين في الفريق لأن Dreamweaver سيتعرف فقط على الملف المتاح على قرص صلب محلي معين.

إذا قمت بتخزين ملف Photoshop في موقعك، على أي حال سيكون Dreamweaver مسار متعلق بالموقع إلى الملف. أي مستخدم لديه إمكانية وصول إلى الموقع سيتمكن أيضاً من بدء المسار الصحيح إلى الملف، مع افتراض أنك قمت أيضاً بتوفير الملف الأصلي لهم ليقوموا بتنزيله.

للحصول على تدريب بالفيديو حول تحرير roundtrip باستخدام Photoshop، انظر ‏‫تحرير Roundtrip باستخدام Photoshop.

إنشاء كائن ذكي

عندما تقوم بإدراج صورة Photoshop (ملف PSD) في صفحتك، فإن Dreamweaver يقوم بإنشاء كائن ذكي. الكائن الذكي عبارة عن صورة جاهزة للويب تحافظ على وجود اتصال مباشر بصورة Photoshop الأصلية. عندما تقوم بتحديث الصورة الأصلية في Photoshop، فإن Dreamweaver يوفر لك خيار تحديث الصورة في Dreamweaver بنقرة فوق زر.

  1. في Dreamweaver (عرض Design أو Code)، ضع نقطة الإدراج على صفحتك حيثما تريد إدراج الصورة.
  2. حدد Insert > Image.

    ملاحظة:

    يمكنك أيضًا سحب ملف PSD إلى الصفحة من لوحة Files إذا كنت تقوم بتخزين ملفات Photoshop في موقع الويب لديك. إذا قمت بذلك، فإنك ستتخطى إلى الخطوة التالية.

  3. حدد ملف صورة Photoshop PSD في مربع الحوار Select Image Source بالنقر فوق الزر Browse والانتقال إليه.

  4. في مربع الحوار Image Optimization الذي يظهر، قم بتعديل إعدادات التحسين على النحو المطلوب وانقر فوق OK.

  5. احفظ ملف الصورة الجاهزة للويب في موقع معين داخل مجلد الجذر لموقع الويب الخاص بك.

يقوم Dreamweaver بإنشاء Smart Object استنادًا إلى إعدادات التحسين المحددة ويجلب إصدارًا جاهزًا للويب من الصورة إلى الصفحة. يحافظ الكائن الذكي على وجود ارتباط مباشر بالصورة الأصلية ويسمح لك بمعرفة وقت وجود عدم مزامنة بينهما.

ملاحظة:

عند تقرير تغيير إعدادات التحسين للصورة المجلوبة في الصفحات لاحقًا، يمكنك تحدي الصورة والنقر فوق الزر Edit Image Settings في عارض الخصائص وإجراء التغييرات في مربع الحوار Image Optimization. يتم تطبيق التغييرات التي أجريت في مربع الحوار Image Optimization على نحو لا يتلف الصورة. لا يعدل Dreamweaver مطلقًا ملف Photoshop الأصلي ويقوم دائمًا بإعادة إنشاء صورة الويب بناءً على البيانات الأصلية.

‏‫للحصول على تدريب بالفيديو حول تحرير roundtrip باستخدام Photoshop، انظر ‏‫تحرير Roundtrip باستخدام Photoshop.

تحديث كائن ذكي

إذا قمت بتغيير ملف Photoshop المرتبط به الكائن الذكي لديك، فإن Dreamweaver يعلمك بأن الصورة الجاهزة للويب غير متزامنة مع الملف الأصلي. في Dreamweaver، تتم الإشارة إلى الكائنات الذكية برمز في الركن الأيسر العلوي من الصورة. عندما تكون الصورة الجاهزة للويب في Dreamweaver متزامنة مع ملف Photoshop الأصلي، يكون كلا السهمين الموجودين في الرمز باللون الأخضر. عندما تكون الصورة الجاهزة للويب غير متزامنة مع ملف Photoshop الأصلي، يتحول أحد سهمي الرمز إلى اللون الأحمر.

  1. لتحديث Smart Object بالمحتويات الحالية لملف Photoshop الأصلي، حدد Smart Object في الإطار Document ثم انقر فوق الزر Update from Original بعارض الخصائص.

ملاحظة:

لست في حاجة لتثبيت Photoshop لإجراء التحديث من Dreamweaver.

تحديث كائنات ذكية متعددة

يمكنك تحديث كائنات ذكية متعددة دفعة واحدة باستخدام لوحة Assets. تتيح لك لوحة Assets رؤية الكائنات الذكية التي ربما تكون غير قابلة للتحديد في نافذة Document (على سبيل المثال، صور خلفية CSS).

  1. في لوحة Files، انقر فوق علامة التبويب Assets لعرض أصول الموقع.
  2. تأكد من تحديد عرض Images. إن لم يكن كذلك، انقر فوق الزر Images.

  3. حدد كل أصل صورة في لوحة Assets. عندما تحدد كائنًا ذكيًا، سترى رمز Smart Object في الركن الأيسر العلوي من الصورة. لا تحتوي الصور العادية على هذا الرمز.
  4. وبالنسبة لكل كائن ذكي تريد تحديثه، انقر بزر الماوس الأيمن فوق اسم الملف وحدد Update from Original. يمكنك أيضًا الضغط على Control-النقر بالماوس لتحديد أسماء ملفات متعددة وتحديثها جميعًا دفعة واحدة.

ملاحظة:

لست في حاجة لتثبيت Photoshop لإجراء التحديث من Dreamweaver.

تغيير حجم كائن ذكي

يمكنك تغيير حجم كائن ذكي في نافذة Document تمامًا مثلما تفعل مع أي صورة أخرى.

  1. حدد الكائن الذكي في نافذة Document واسحب مقابض تغيير الحجم لتغيير حجم الصورة. يمكنك الحفاظ على نسب العرض والارتفاع من خلال الضغط باستمرار على مفتاح Shift أثناء السحب.
  2. انقر فوق الزر Update from Original بعارض الخصائص.

    عندما تقوم بتحديث الكائن الذكي، تتم إعادة عرض صورة الويب بالحجم الجديد بشكل غير هدام، بناءً على المحتويات الحالية للملف الأصلي وإعدادات التحسين الأصلية.

تحرير ملف Photoshop الأصلي لكائن ذكي

بعد إنشاء Smart Object بصفحة Dreamweaver، يمكنك تحرير ملف PSD الأصلي في Photoshop. بعد أن تقوم بإجراء التغييرات في Photoshop، يمكنك حينها تحديث صورة الويب بسهولة في Dreamweaver.

ملاحظة:

تأكد من تعيين Photoshop لديك بمثابة محرر الصور الخارجي الأساسي.

  1. حدد الكائن الذكي في نافذة Document.
  2. انقر فوق الزر Edit في عارض الخصائص.

  3. قم بإجراء التغييرات التي تريدها في Photoshop واحفظ ملف PSD الجديد.
  4. في Dreamweaver، حدد Smart Object مرة أخرى وانقر فوق الزر 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 في Property inspector لإعادة إنشاء صفحة الويب من ملف Photoshop الأصلي. يستخدم Dreamweaver بعدي العرض والارتفاع المحددين حاليًا في HTML عندما يقوم بإعادة إنشاء الصورة.

بعدا الأصل الأصلي صغيرين جدًا بالنسبة لبعدي العرض والارتفاع المحددين في HTML

تكون سمتا العرض والارتفاع في تعليمات HTML البرمجية أكبر من بعدي العرض والارتفاع لملف Photoshop الأصلي. من الممكن أن يظهر تقطيع في صورة الويب.

لا تقم بإنشاء صور الويب باستخدام أبعاد أكبر من أبعاد ملف Photoshop الأصلي.

الأصل الأصلي غير موجود

تعذر على Dreamweaver إيجاد ملف Photoshop الأصلي المحدد في مربع النص Original من Property inspector.

قم بتصحيح مسار الملف في مربع النص Original من Property inspector أو انقل ملف Photoshop إلى الموقع المحدد حاليًا.

نسخ تحديد ولصقه من Photoshop

يمكنك نسخ صورة Photoshop بشكل كلي أو جزئي ولصق التحديد في صفحة Dreamweaver الخاصة بك بمثابة صورة جاهزة للويب. يمكنك نسخ طبقة واحدة أو مجموعة من الطبقات لمساحة محددة من الصورة أو نسخ شريحة من الصورة. عندما تقوم بهذا، على الرغم من ذلك، فإن Dreamweaver لا يقوم بإنشاء كائن ذكي.

ملاحظة:

مع أن التحديث من الوظيفة الأصلية غير متوفر للصورة التي يتم لصقها، يمكنك فتح ملف Photoshop الأصلي وتحريره بتحديد الصورة التي تم لصقها والنقر فوق الزر Edit في عارض الخصائص.

  1. في Photoshop، قم بأحد الإجراءات التالية:
    • انسخ طبقة فردية بكاملها أو جزء منها باستخدام الأداة Marquee لتحديد الجزء المطلوب نسخه ثم اختر Edit > Copy. يؤدي هذا إلى نسخ الطبقة النشطة فقط من المساحة المحددة في الحافظة. إذا كان لديك تأثيرات معتمدة على الطبقات، فإنه لا يتم نسخها.
    • انسخ طبقات متعددة وادمجها باستخدام الأداة Marquee لتحديد الجزء المطلوب نسخه ثم اختر Edit > Copy Merged. يؤدي هذا إلى تسوية جميع طبقات المساحة المحددة النشطة والسفلى ونسخها في الحافظة. إذا كان لديك تأثيرات معتمدة على الطبقات مقترنة بأي من هذه الطبقات، فإنه يتم نسخها.
    • انسخ إحدى الشرائح باستخدام الأداة Slice لتحديد الجزء المطلوب نسخه ثم اختر Edit > Copy. يؤدي هذا إلى تسوية جميع طبقات الشريحة النشطة والسفلى ونسخها في الحافظة.

    ملاحظة:

    يمكنك اختيار Select > All لتحديد صورة بكاملها سريعًا لنسخها.

  2. في Dreamweaver (عرض Design أو Code)، ضع نقطة الإدراج على صفحتك حيثما تريد إدراج الصورة.
  3. حدد Edit > Paste.

  4. في مربع الحوار Image Optimization، قم بتعديل إعدادات التحسين على النحو المطلوب وانقر فوق OK.

  5. احفظ ملف الصورة الجاهزة للويب في موقع معين داخل مجلد الجذر لموقع الويب الخاص بك.

يحدد Dreamweaver الصورة وفقًا لإعدادات التحسين ويجلب إصدارًا منها جاهز للاستخدام على الويب في صفحتك. يتم حفظ معلومات حول الصورة، مثل موقع ملف PSD المصدر الأصلي، في Design Note بغض النظر عما إذا كنت قد قمت بتمكين سمة Design Notes لموقعك أم لا. تسمح Design Note لك بالعودة لتحرير ملف Photoshop الأصلي من Dreamweaver.

تحرير الصور الملصوقة

بعد لصق صور Photoshop بصفحات Dreamweaver، يمكنك تحرير ملف PSD الأصلي في Photoshop. عند استخدام سير عمل النسخ/اللصق، توصي Adobe بأن تقوم دائمًا بإجراء عمليات التحرير لملف PSD الأصلي (بدلاً من تحرير الصورة الجاهزة للويب)، ثم إعادة لصق الصورة للاحتفاظ بمصدر واحد.

ملاحظة:

تأكد من أنك قمت بتعيين Photoshop بمثابة محرر الصور الخارجي الأساسي لديك بالنسبة لنوع الملفات الذي تريد تحريره.

  1. في Dreamweaver، حدد الصورة الجاهزة للويب التي تم إنشاؤها أصليًا في Photoshop وقم بأي مما يلي:
    • انقر فوق الزر Edit في عارض خصائص الصورة.
    • اضغط على Control (Windows) أو Command (Macintosh) أثناء النقر نقرًا مزدوجًا فوق الملف.
    • انقر بزر الماوس الأيمن (Windows) أو اضغط على Control - انقر بالماوس (Macintosh) فوق صورة، واختر Edit Original With من قائمة السياق، ثم اختر Photoshop.

    ملاحظة:

    يفترض هذا الإجراء أنه تم تعيين Photoshop بمثابة محرر الصور الخارجي الأساسي لملفات PSD الخاصة بالصورة. يمكنك أيضًا تعيين Photoshop بمثابة المحرر الافتراضي لأنواع الملفات JPEG وGIF وPNG.

  2. قم بتحرير الملف في Photoshop.
  3. عد إلى Dreamweaver والصق الصورة المحدثة أو التحديد المحدث في صفحتك.

عند الرغبة في إعادة تحسين الصورة في أي وقت، يمكنك تحديد الصورة والنقر فوق الزر Edit Image Settings في عارض الخصائص.

تعيين خيارات مربع الحوار Image Optimization

عند إنشاء Smart Object أو لصق تحديدًا من Photoshop، يعرض Dreamweaver مربع الحوار Image Optimization . (كما يعرض Dreamweaver مربع الحوار هذا لأي من أنواع الصور عند تحديد الصورة والنقر فوق الزر Edit Image Settings في عارض الخصائص.) يسمح لك مربع الحوار هذا بتحديد إعدادات الصور الجاهزة للويب ومعاينتها باستخدام المصفوفة الصحيحة من اللون والضغط والجودة.

الصورة الجاهزة للويب هي تلك الصورة التي يمكن لجميع مستعرضات الويب الحديثة عرضها وتبدو بشكل مماثل بغض النظر عن النظام أو المستعرض الذي يستخدمه المشاهد. بصفة عامة، تؤدي النتائج إلى حدوث مقايضة بين الجودة وحجم الملف.

ملاحظة:

تؤثر الإعدادات التي تحددها أي ما كانت فقط على الصورة المستوردة من ملف الصورة. ويظل ملف Photoshop PSD أو Fireworks PNG الأصلي سليمًا دائمًا.

الإعداد المسبق

اختر إعدادًا مسبقًا يناسب متطلباتك بأفضل شكل. يتغير حجم ملف الصورة بحسب الإعداد المسبق الذي تختاره. يتم عرض معاينة فورية للصورة مع تطبيق الإعداد في الخلفية.

على سبيل المثال، بالنسبة إلى الصور إلي يتم عرضها بدرجة وضوح عالية، اختر PNG24 for Photos (Sharp Details).  حدد GIF For Background Images (Patterns) عند إدراج نقش سيعمل كخلفية للصفحة.

عند تحديد إعدادًا مسبقًا، يتم عرض خيارات الإعداد المسبق القابلة للتكوين.  عند الرغبة في إجراء المزيد من التخصيصات على إعدادات التحسين، قم بتعديل قيم هذه الخيارات.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت