استخدام ملفات Photoshop في Dreamweaver

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

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

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

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

يوجد سيري عمل أساسيين للعمل باستخدام ملفات Photoshop في Dreamweaver: سير عمل نسخ/لصق، وسير عمل الكائنات الذكية.

سير عمل نسخ/لصق

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

سير عمل الكائنات الذكية

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

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

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

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

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

لكل من سير عمل النسخ/اللصق والكائنات الذكية، يمكنك تعيين إعدادات تحسين في مربع الحوار 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 بنقرة فوق زر.

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

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

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

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

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

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

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

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

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

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

حالات الكائن الذكي

يسرد الجدول التالي قائمة بالحالات المتنوعة للكائنات الذكية.

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

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

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

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

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

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

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

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

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

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

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

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