أفضل الممارسات لإنشاء رسومات الويب

  1. دليل مستخدم Illustrator
  2. التعرف على Illustrator
    1. مقدمة عن Illustrator
      1. الجديد في Illustrator
      2. الأسئلة الشائعة
      3. متطلبات النظام لبرنامج Illustrator
      4. Illustrator لمعالجات Apple Silicon
    2. مساحة العمل
      1. أساسيات مساحات العمل
      2. إنشاء المستندات
      3. الأدواتاختصارات لوحة المفاتيح الافتراضية | Illustrator
      4. تخصيص اختصارات لوحة المفاتيح
      5. Artboards
      6. تخصيص مساحة العمل
      7. لوحة Properties
      8. تعيين التفضيلات
      9. مساحة العمل Touch
      10. دعم Microsoft Surface Dial في Illustrator
      11. الاسترداد والتراجع والتشغيل التلقائي
      12. تدوير العرض
      13. المساطر والشبكات والأدلة
      14. إمكانية الوصول في Illustrator
      15. الوضع الآمن
      16. عرض الأعمال الفنية
      17. استخدام Touch Bar مع Illustrator
      18. الملفات والقوالب
      19. مزامنة الإعدادات باستخدام Adobe Creative Cloud
    3. الأدوات في Illustrator
      1. التحديد
        1. نظرة عامة
        2. التحديد
        3. التحديد المباشر
        4. Lasso
      2. Navigation
        1. نظرة عامة
        2. Zoom
        3. تدوير العرض
      3. Paint
        1. نظرة عامة
        2. تدرج لوني
        3. الأداة Shape Builder
      4. الكتابة
        1. نظرة عامة
        2. الكتابة
        3. الأداة Type On Path
  3. Illustrator على iPad
    1. مقدمة حول Illustrator على iPad
      1. نظرة عامة على Illustrator على iPad
      2. الأسئلة المتداولة عن Illustrator على iPad
      3. متطلبات النظام | Illustrator على iPad
      4. ما يمكن القيام به وما لا يمكن القيام به باستخدام Illustrator على iPad
    2. مساحة العمل
      1. مساحة عمل Illustrator على iPad
      2. اختصارات اللمس والإيماءات ذات الصلة
      3. اختصارات لوحة المفاتيح‬ في Illustrator على iPad
      4. إدارة إعدادات تطبيقك
    3. Documents
      1. العمل باستخدام المستندات في Illustrator على iPad
      2. استيراد مستندات Photoshop وFresco
    4. تحديد الكائنات وترتيبها
      1. إنشاء كائنات تكرار
      2. مزج‬ الكائنات
    5. الرسم
      1. رسم المسارات وتحريرها
      2. رسم الأشكال وتحريرها
    6. الكتابة
      1. العمل باستخدام الكتابة والخطوط
      2. إنشاء تصميمات نصية على طول مسار
      3. إضافة الخطوط الخاصة بك
    7. العمل باستخدام الصور
      1. العمل باستخدام الصور
    8. اللون
      1. تطبيق الألوان والتدرجات اللونية
  4. المستندات السحابية
    1. الأساسيات
      1. العمل باستخدام مستندات Illustrator السحابية
      2. المشاركة والتعاون في مستندات Illustrator السحابية
      3. ترقية التخزين السحابي لبرنامج Adobe Illustrator
      4. مستندات Illustrator السحابية | الأسئلة الشائعة
    2. استكشاف الأخطاء وإصلاحها
      1. استكشاف الأخطاء المتعلقة بإنشاء مستندات Illustrator السحابية أو حفظها وإصلاحها
      2. استكشاف مشكلات مستندات Illustrator السحابية وإصلاحها
  5. إضافة المحتوى وتحريره
    1. الرسم
      1. مبادئ الرسم
      2. تحرير المسارات
      3. إنشاء عمل فني عالي الدقة
      4. الرسم باستخدام الأداة Pen أو Curvature أو Pencil
      5. رسم الخطوط والأشكال البسيطة
      6. تتبع الصور
      7. تبسيط المسار
      8. تعريف شبكات المنظور
      9. أدوات الترميز ومجموعات الرموز
      10. ضبط مقاطع المسار
      11. تصميم زهرة في 5 خطوات سهلة
      12. رسم المنظور
      13. الرموز
      14. رسم مسارات محاذاة البكسل لعمليات سير عمل الويب
    2. التأثيرات ثلاثية الأبعاد على مواد Adobe Substance
      1. حول التأثيرات ثلاثية الأبعاد في Illustrator
      2. إنشاء رسومات ثلاثية الأبعاد
      3. إنشاء الكائنات ثلاثية الأبعاد
      4. إنشاء نص ثلاثي الأبعاد
    3. اللون
      1. حول الألوان
      2. تحديد الألوان
      3. استخدام حوامل العيّنات وإنشاؤها
      4. ضبط الألوان
      5. استخدام لوحة Adobe Color Themes
      6. مجموعات الألوان (الألوان المتناسقة)
      7. لوحة Color Themes
      8. إعادة تلوين عملك الفني
    4. الطلاء
      1. حول الطلاء
      2. التلوين باستخدام التعبئات والحدود
      3. مجموعات Live Paint
      4. Gradients
      5. الفُرش
      6. صيغ الشفافية والمزج
      7. تطبيق الحد على كائن
      8. إنشاء أنماط وتحريرها
      9. الشبكات
      10. Patterns
    5. تحديد الكائنات وترتيبها
      1. تحديد الكائنات
      2. الطبقات
      3. تجميع الكائنات وتوسيعها‬
      4. نقل الكائنات ومحاذاتها وتوزيعها
      5. تكديس الكائنات    
      6. إقفال الكائنات وإخفائها وحذفها
      7. تكرار الكائنات
      8. تدوير الكائنات وعكسها
    6. إعادة تشكيل الكائنات
      1. اقتصاص الصور
      2. تحويل الكائنات
      3. تجميع الكائنات
      4. قص الكائنات واقتطاعها وتقسيمها
      5. أداة Puppet Warp
      6. تحديد حجم الكائنات، وقصها، وتشويهها
      7. مزج‬ الكائنات
      8. إعادة التشكيل باستخدام المظاريف
      9. إعادة تشكيل الكائنات باستخدام التأثيرات
      10. إنشاء أشكال جديدة باستخدام أداتي Shaper وShape Builder
      11. التعامل مع Live Corners
      12. تدفقات عمل تغيير الشكل المحسنة مع دعم اللمس
      13. تحرير أقنعة القطع
      14. الأشكال المباشرة
      15. إنشاء أشكال باستخدام الأداة Shape Builder
      16. التحرير العمومي
    7. الكتابة
      1. إنشاء نص
      2. الخطوط والطباعة
      3. تنسيق الكتابة
      4. استيراد نص وتصديره
      5. تنسيق الفقرات
      6. الحروف الخاصة
      7. إنشاء كتابة على مسار
      8. أنماط الفقرات والحروف
      9. علامات التبويب
      10. النص والكتابة
      11. البحث عن الخطوط المفقودة (سير عمل Typekit)
      12. تحديث نص من Illustrator 10
      13. الكتابة بالعربية والعبرية
      14. الخطوط | الأسئلة المتداولة وتلميحات استكشاف الأخطاء وإصلاحها
      15. إنشاء تأثير نص ثلاثي الأبعاد
      16. التصميمات الطباعية الإبداعية
      17. تغيير حجم الكتابة وتدويرها
      18. المسافات بين الأسطر والحروف
      19. الوصل وفواصل الأسطر
      20. تحسينات النصوص
      21. التدقيق الإملائي وقواميس اللغة
      22. تنسيق الحروف الآسيوية
      23. أدوات التأليف للبرامج النصية الآسيوية
      24. إنشاء التصميمات النصية باستخدام كائنات المزج
      25. إنشاء ملصق نصي باستخدام تتبع الصورة
    8. إنشاء تأثيرات خاصة
      1. استخدام التأثيرات
      2. أنماط الرسوم
      3. إنشاء ظل خلفي
      4. سمات المظهر
      5. إنشاء مخططات رسم وفسيفساء
      6. الظلال الخلفية، والتوهجات، وتدرج الحواف
      7. ملخص التأثيرات
    9. رسومات الويب
      1. أفضل الممارسات لإنشاء رسومات الويب
      2. Graphs
      3. SVG
      4. إنشاء رسوم متحركة
      5. الشرائح وخرائط الصور
  6. الاستيراد، والتصدير، والحفظ
    1. Import
      1. استيراد ملفات عمل فني
      2. استيراد صور نقطية
      3. استيراد عمل فني من Photoshop
      4. وضع ملفات متعددة | Illustrator CC
      5. إلغاء تضمين الصور
      6. استيراد ملفات Adobe PDF
      7. إدراج ملفات EPS، وDCS، وAutoCAD
      8. معلومات الارتباطات
    2. Creative Cloud Libraries في Illustrator 
      1. Creative Cloud Libraries في Illustrator
    3. حفظ
      1. حفظ عمل فني
    4. تصدير
      1. تصدير عمل فني
      2. تجميع الأصول والتصدير في مجموعات
      3. حزم الملفات
      4. إنشاء ملفات Adobe PDF
      5. استخراج CSS‏ | Illustrator CC
      6. خيارات Adobe PDF
      7. معلومات الملف وبيانات التعريف
  7. الطباعة
    1. الإعداد للطباعة
      1. إعداد المستندات للطباعة
      2. تغيير حجم الصفحة واتجاهها
      3. تعيين علامات قطع للقص أو المحاذاة
      4. بدء العمل باستخدام لوحة رسم كبيرة
    2. الطباعة
      1. الطباعة المتراكبة
      2. الطباعة باستخدام إدارة الألوان
      3. طباعة PostScript
      4. الإعدادات المسبقة للطباعة
      5. علامات الطابعة والتسييل
      6. طباعة العمل الفني الشفاف وحفظه
      7. التراكب
      8. طباعة رقائق فصل الألوان
      9. طباعة التدرجات، والشبكات، ومزيج الألوان
      10. الطباعة المتراكبة البيضاء
  8. تشغيل المهام تلقائيًا
    1. دمج البيانات باستخدام لوحة Variables
    2. التشغيل التلقائي باستخدام البرامج النصية
    3. التشغيل التلقائي باستخدام الإجراءات
  9. استكشاف الأخطاء وإصلاحها 
    1. مشكلات التعطل عند بدء التشغيل
    2. استعادة الملفات بعد التعطل
    3. مشكلات الملفات
    4. مشكلات برنامج تشغيل جهاز وحدة معالجة الرسومات‬
    5. مشكلات أجهزة Wacom
    6. مشكلات ملفات DLL
    7. مشكلات الذاكرة
    8. مشكلات ملفات التفضيلات
    9. مشكلات الخطوط
    10. مشكلات الطابعة
    11. مشاركة تقرير الأعطال مع Adobe

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

نبذة عن رسومات الويب

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

لمساعدتك في اتخاذ قرار مبني على معلومات صحيحة حول رسومات الويب، تذكر الإرشادات الثلاثة التالية:

استخدام ألوان آمنة للويب

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

التوازن بين جودة الصورة وحجم الملف.

من الضروري إنشاء ملفات رسومات صغيرة الحجم حتى يصبح في الإمكان توزيع الصور على الويب. باستخدامك لملفات ذات أحجام أصغر، تتمكن خوادم الويب من تخزين وبث الصور بكفاءة أعلى، كما تتمكن برامج العرض من تنزيل الصور بسرعة أكبر. يمكنك عرض الحجم ووقت التنزيل المقدَّر لرسم الويب في مربع الحوار Save For Web & Devices.

اختيار أفضل تنسيق ملف لرسمتك.

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

ملاحظة:

هناك الكثير من قوالب Illustrator تم إنتاجها خصوصًا للويب، متضمنة صفحات ويب وترويسات. اختر File > New From Template، لتحديد قالب.

حول وضع معاينة البكسل

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

للمزيد من المعلومات، راجع رسم مسارات محاذية للبكسل لمهام سير عمل الويب.

عند حفظ العمل الفني باستخدام تنسيق نقطي؛ على سبيل المثال، JPEG أو GIF أو PNG؛ يقوم Illustrator بتنقيط العمل الفني بقيمة 72 بكسل في البوصة. يمكنك معاينة كيف ستبدو الكائنات في الصيغة النقطية عن طريق اختيار View > Pixel Preview. يكون هذا مفيدًا جدًا عندما تريد التحكم في درجة دقة وحجم وصقل حواف الكائنات في الرسم ذي الصيغةالنقطية.

لفهم كيف يقوم Illustrator بتقسيم الكائنات إلى عدد من البكسل، قم بفتح ملف يحتوي على رسومات متجهة ثم اختر View > Pixel Preview، ثم قم بتكبير العمل الفني حتى تتمكن من رؤية البكسل فرادى. يتم تحديد مواضع البكسل عن طريق شبكة البكسل، إذ تقوم الشبكة بتقسيم لوح الرسم بزيادات مقدارها 1‑نقطة (1/72 بوصة). يمكنك عرض شبكة البكسل عند التكبيرإلىالعرض بنسبة 600%. إذا قمت بنقل أو إضافة أو تحويل كائن، فسينجذب الكائن إلى شبكة البكسل. نتيجة لما سبق، يختفي أي صقل حواف لحواف الكائن "المنجذبة" (خاصةً الحواف اليسرى والعلوية). الآن قم بإلغاء تحديد أمر View > Snap To Pixel، وقم بتحريك الكائن. في هذه المرة، سوف يصبح بإمكانك تغيير موضع الكائن بين خطوط الشبكة. لاحظ كيف يؤثر هذا في صقل حواف الكائن. وكما ترى، يمكن أن يؤثر تنفيذتعديلات صغيرةجدًا في كيفية تحويل الكائن إلى الصيغة النقطية.

إيقاف معاينة البكسل (أعلى) مقارنة بمعاينة البكسل في وضع التشغيل (أسفل)
إيقاف معاينة البكسل (أعلى) مقارنة بمعاينة البكسل في وضع التشغيل (أسفل)

ملاحظة:

هناك ربط تفاعلي بين شبكة البكسل ونقطة أصل المسطرة (0,0). سيؤدي تغيير نقطة أصل المسطرة إلى تغيير الأسلوب الذي يتبعه Illustrator في تحويل العمل الفني إلى الصورة النقطية.

تلميحات لإنشاء صور Illustrator للأجهزة المتنقلة

لتحسين المحتوى الرسومي للأجهزة المتنقلة، احفظ العمل الفني الذي تم إنشاؤه في Illustrator بأي تنسيق SVG، بما في ذلك SVG-t، والذي تم تصميمه خصوصًا للأجهزة المتنقلة.

استخدم التلميحات التالية لضمان أن الصور التي تم إنشاؤها في Illustrator تعرض بالشكل الصحيح على الأجهزة المتنقلة:

  • استخدم SVG القياسي لإنشاء محتوى. باستخدام SVG لنشر الرسومات المتجهة على الأجهزة المتنقلة ينتج حجم ملف صغير، وعرض بشكل مستقل، وتحكم فائق في اللون، وإمكانية التكبير/التصغير، ونص يمكن تحريره (من خلال التعليمة البرمجية الأصلية). أيضًا؛ لأن SVG مبني على أساس XML، فإنه يمكنك تضمين التفاعلية في الصور، مثل الإبراز، وتلميحات الأداة، والتأثيرات الخاصة، والصوت، والرسوم المتحركة.

  • اعمل من خلال الأبعاد النهائية لجهازك المتنقل المستهدف من البداية. بالرغم أن SVG يمكن تحديد حجمه، إلا أن العمل بالحجم الصحيح سيضمن أن الرسومات النهائية محسنة في الجودة والحجم للأجهزة المستهدفة.

  • اضبط صيغة لون Illustrator على RGB. يتم عرض SVG على أجهزة عرض RGB نقطية مثل الشاشة.

  • لتقليل حجم الملف، حاول تقليل عدد الكائنات (بما في ذلك المجموعات) أو جعلها أقل تعقيدًا (نقاط أقل). باستخدام نقاط أقل سيقلل مقدار المعلومات النصية المطلوبة لوصف العمل الفني في ملف SVG. لتقليل النقاط، حدد Object > Path > Simplify، وجرّب تراكبات مختلفة للعثور على توازن بين الجودة وعدد النقاط.

  • استخدم الرموز عندما يكون ذلك ممكنًا. الرموز تعرّف المتجهات التي تصف كائنًا مرة واحدة، بدلاً من مرات عديدة. يفيد ذلك إذا كان العمل الفني يحتوي على كائنات مثل خلفيات الأزرار التي يعاد استخدامها.

  • عند تحريك رسوم، قلل عدد الكائنات التي يتم استخدامها وحاول إعادة استخدام الكائنات كلما كان ذلك ممكنًا لتقليل حجم الملف. قم بتطبيق الرسومات المتحركة لمجموعات من الكائنات بدلاً من كائنات منفردة لتتجنب تكرار التعليمة البرمجية.

  • ضع في حسبانك استخدام SVGZ، الإصدار المضغوط من SVG. يمكن أن يقلل الضغط من حجم الملف بشكل كبير، حسب المحتوى. يضغط النص بشكل كبير، لكن المحتوى الثنائي التشفيري مثل الرسومات النقطية المدمجة (ملفات JPEG، أو PNG، أو GIF)، يمكن أن تضغط بشكل ملحوظ. يمكن فك ضغط ملفات SVGZ من قبل أي تطبيق يوسع الملفات المضغوطة باستخدام gzip. لاستخدام SGVZ بشكل ناجح، تأكد من أن جهازك المتنقل المستهدف يمكنه فك ضغط ملفات gzip.

شعار Adobe

تسجيل الدخول إلى حسابك