تسهّل أدوات ويب لبرنامج Photoshop عملية إنشاء أجزاء المكونات لصفحات الويب أو إخراج صفحات ويب كاملة في تنسيقات سابقة الإعداد أو مخصصة.

  • استخدم الطبقات والشرائح لتصميم صفحات الويب وعناصر واجهة صفحات الويب. (راجع صفحات ويب Layers وSlicing.)

  • استخدم تركيبات الطبقات لاختبار تركيبات صفحات مختلفة أو لتصدير أشكال مختلفة للصفحة. (راجع تركيبات الطبقات.)

  • أنشئ نصًا أو زر رسومات لعنصر متغيّر للاستيراد إلى Dreamweaver أو Flash.

  • أنشئ رسومات ويب متحركة باستخدام لوحة Animation ثم صدّرها كصور GIF متحركة أو ملفات QuickTime. راجع إنشاء رسوم متحركة للإطارات.

  • استخدم Adobe Bridge لإنشاء معرض صور ويب لتحويل مجموعة من الصور إلى موقع ويب تفاعلي بسرعة، باستخدام مجموعة من القوالب الاحترافية المظهر.

للحصول على فيديو حول تصميم مواقع الويب باستخدام Photoshop وDreamweaver، راجع الوصول إلى Photoshop من Dreamweaver لتحسين صورة الويب.

إنشاء صور عناصر متغيّرة

إن العنصر المتغيّر هو زر أو صورة على صفحة ويب يتغير عند مرور الماوس فوقه. لإنشاء عنصر متغيّر، تحتاج إلى صورتين على الأقل؛ صورة أساسية للحالة العادية وصورة ثانوية للحالة المتغيّرة.

يوفر Photoshop عددًا من الأدوات لإنشاء صور عناصر متغيّرة:

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

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

  • استخدم أنماط الأزرار السابقة الإعداد من لوحة Styles لإنشاء أزرار عناصر متغيرة بسرعة مع حالات عادية ومرور الماوس وضغط الماوس. ارسم شكلاً أساسيًا باستخدام أداة المستطيل وقم بتطبيق نمط ما، مثل Beveled Normal، لتحويل المستطيل بشكل آلي إلى زر. ثم انسخ الطبقة وطبّق أنماطًا أخرى سابقة الإعداد، مثل Beveled Mouseover، لإنشاء حالات أزرار إضافية. احفظ كل طبقة على هيئة صورة منفصلة لإنشاء مجموعة أزرار عناصر متغيّرة.

  • استخدم شاشة Save For Web & Devices لحفظ صور العناصر المتغيّرة بتنسيق متوافق مع الويب وبحجم محسن للملف. راجع تحسين الصور.

ملاحظة:

عندما تقوم بحفظ صور العناصر المتغيّرة، استخدم اصطلاح التسمية لتمييز الصورة الأساسية (حالة غير متغيّرة) عن الصورة الثانوية (حالة متغيّرة).

بعد إنشاء مجموعة صور عناصر متغيّرة في Photoshop، استخدم Dreamweaver لوضع الصور على صفحة ويب وإضافة شفرة JavaScript آلياً لعملية التغيير.

Export to Zoomify

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

  1. اختر File >‏ Export >‏ Zoomify، وعيّن خيارات التصدير.

    Template

    يعيّن الخلفية والتصفح للصورة المعروضة في المتصفح.

    Output Location

    يحدد موقع الملف واسمه.

    Image Tile Options

    يحدد جودة الصورة.

    Browser Options

    يعيّن عرض وحدات البكسل وارتفاعها للصورة الأساسية في متصفح المستخدم.

  2. حمّل ملفات HTML وملفات الصور إلى خادم الويب.

العمل ضمن القيم السداسية العشرية للألوان

يمكن أن يعرض Photoshop القيم السداسية العشرية لألوان الصور أو ينسخ قيمة اللون السداسية العشرية ليتم استخدامها في ملف HTML.

عرض قيم الألوان السداسية العشرية في لوحة Info

  1. اختر Window >‏ Info أو انقر لوحة Info لعرض اللوحة.
  2. اختر Panel Options من قائمة اللوحة. تحت First Color Readout أو Second Color Readout، اختر Web Color من قائمة Mode وانقر فوق OK.
  3. ضع المؤشر فوق اللون الذي تريد عرض قيمه السداسية العشرية.

نسخ لون كقيمة سداسية عشرية

يقوم Photoshop بنسخ الألوان سواء كسمة HTML COLOR التي تحتوي على قيمة سداسية عشرية (color=#xxyyzz) أو كقيمة سداسية عشرية فقط.

  1. قم بأحد الأمور التالية:
    • باستخدام أداة Eyedropper، حرك المؤشر فوق اللون المراد نسخه. انقر بزر الماوس الأيمن (في Windows) أو انقر مع الضغط على المفتاح Control (في Mac OS)، واختر Copy Color As HTML أو Copy Color’s Hex Code.

    • عيّن لون المقدمة باستخدام لوحة Color أو لوحة Swatches أو Adobe Color Picker. من قائمة لوحة Control، اختر Copy Color As HTML أو Copy Color’s Hex Code.

    • في شاشة Save For Web، انقر فوق المربع اللوني أو اختر Matte‏ > Other. في Adobe Color Picker، انقر بزر الماوس الأيمن فوق قيمة سداسية عشرية واختر Copy.

  2. افتح الملف المطلوب في تطبيق تحرير HTML واختر Edit‏ > Paste.

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

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