دليل المستخدم إلغاء

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

  1. دليل مستخدم Illustrator
  2. التعرف على Illustrator
    1. مقدمة عن Illustrator
      1. الجديد في Illustrator
      2. الأسئلة الشائعة
      3. متطلبات النظام لبرنامج Illustrator
      4. Illustrator لمعالجات Apple Silicon
    2. مساحة العمل
      1. أساسيات مساحة العمل
      2. تعلّم أسرع في لوحة Discover في Illustrator
      3. إنشاء المستندات
      4. شريط الأدوات
      5. اختصارات لوحة المفاتيح الافتراضية
      6. تخصيص اختصارات لوحة المفاتيح
      7. مقدمة حول اللوحات الفنية
      8. إدارة اللوحات الفنية
      9. تخصيص مساحة العمل
      10. اللوحة Properties
      11. تعيين التفضيلات
      12. مساحة العمل Touch
      13. دعم Microsoft Surface Dial في Illustrator
      14. التراجع عن عمليات التحرير وإدارة محفوظات التصميم
      15. Rotate view
      16. المساطر والشبكات والأدلة
      17. إمكانية الوصول في Illustrator
      18. الوضع الآمن
      19. عرض الأعمال الفنية
      20. استخدام Touch Bar مع Illustrator
      21. الملفات والقوالب
    3. الأدوات في Illustrator
      1. لمحة عامة عن الأدوات
      2. تحديد الأدوات
        1. Selection
        2. التحديد المباشر
        3. تحديد مجموعة
        4. Magic Wand
        5. Lasso
        6. Artboard
      3. أدوات التصفح
        1. Hand
        2. Rotate View
        3. Zoom
      4. أدوات الطلاء
        1. Gradient
        2. Mesh
        3. Shape Builder
      5. أدوات النص
        1. Type
        2. Type on a Path
        3. Vertical Type
      6. أدوات الرسم
        1. Pen
        2. Add Anchor Point
        3. Delete Anchor Point
        4. نقطة الإرساء
        5. Curvature
        6. مقطع الخط
        7. مستطيل
        8. Rounded Rectangle
        9. الشكل البيضاوي
        10. المضلع
        11. نجمة
        12. Paintbrush
        13. Blob Brush
        14. قلم رصاص
        15. Shaper
        16. Slice
      7. أدوات التعديل
        1. التدوير
        2. Reflect
        3. Scale
        4. Shear
        5. العرض
        6. Free Transform
        7. قطارة اللون
        8. Blend
        9. Eraser
        10. Scissors
    4. الإجراءات السريعة
      1. النص القديم
      2. نص توهج نيون
      3. القديم نص
      4. إعادة التلوين
      5. تحويل الرسم إلى متجه
  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. مشاركة المستندات للمراجعة
      4. ترقية التخزين السحابي لبرنامج Adobe Illustrator
      5. مستندات 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. الكائنات ثلاثية الأبعاد والمواد
      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. تدوير الكائنات وعكسها
      9. تشابك الكائنات
    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. Type
      1. إضافة النص والعمل على كائنات الكتابة
      2. إنشاء قوائم ذات تعداد نقطي ورقمي
      3. إدارة منطقة النص
      4. الخطوط والطباعة
      5. تنسيق الكتابة
      6. استيراد نص وتصديره
      7. تنسيق الفقرات
      8. الحروف الخاصة
      9. إنشاء كتابة على مسار
      10. أنماط الفقرات والحروف
      11. علامات التبويب
      12. النص والكتابة
      13. البحث عن الخطوط المفقودة (سير عمل Typekit)
      14. تحديث نص من Illustrator 10
      15. الكتابة بالعربية والعبرية
      16. الخطوط | الأسئلة المتداولة وتلميحات استكشاف الأخطاء وإصلاحها
      17. إنشاء تأثير نص ثلاثي الأبعاد
      18. التصميمات الطباعية الإبداعية
      19. تغيير حجم الكتابة وتدويرها
      20. المسافات بين الأسطر والحروف
      21. الوصل وفواصل الأسطر
      22. تحسينات النصوص
      23. التدقيق الإملائي وقواميس اللغة
      24. تنسيق الحروف الآسيوية
      25. أدوات التأليف للبرامج النصية الآسيوية
      26. إنشاء التصميمات النصية باستخدام كائنات المزج
      27. إنشاء ملصق نصي باستخدام تتبع الصورة
    8. إنشاء تأثيرات خاصة
      1. استخدام التأثيرات
      2. أنماط الرسوم
      3. إنشاء ظل خلفي
      4. سمات المظهر
      5. إنشاء مخططات رسم وفسيفساء
      6. الظلال الخلفية، والتوهجات، وتدرج الحواف
      7. ملخص التأثيرات
    9. رسومات الويب
      1. أفضل الممارسات لإنشاء رسومات الويب
      2. Graphs
      3. SVG
      4. إنشاء رسوم متحركة
      5. الشرائح وخرائط الصور
  6. الاستيراد، والتصدير، والحفظ
    1. Import
      1. وضع ملفات متعددة
      2. إدارة الملفات المرتبطة والمضمنة
      3. معلومات الارتباطات
      4. إلغاء تضمين الصور
      5. استيراد عمل فني من Photoshop
      6. استيراد صور نقطية
      7. استيراد ملفات Adobe PDF
      8. إدراج ملفات EPS، وDCS، وAutoCAD
    2. Creative Cloud Libraries في Illustrator 
      1. Creative Cloud Libraries في Illustrator
    3. حفظ
      1. حفظ عمل فني
    4. تصدير
      1. استخدام عمل Illustrator الفني في Photoshop
      2. تصدير العمل الفني
      3. تجميع الأصول والتصدير في مجموعات
      4. حزم الملفات
      5. إنشاء ملفات Adobe PDF
      6. استخراج CSS‏ | Illustrator CC
      7. خيارات Adobe PDF
      8. معلومات الملف وبيانات التعريف
  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. مشكلات برنامج تشغيل جهاز وحدة معالجة الرسومات‬
    6. مشكلات أجهزة Wacom
    7. مشكلات ملفات DLL
    8. مشكلات الذاكرة
    9. مشكلات ملفات التفضيلات
    10. مشكلات الخطوط
    11. مشكلات الطابعة
    12. مشاركة تقرير الأعطال مع Adobe
    13. تحسين أداء Illustrator

يقدم 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

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