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

حول رسومات الويب

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

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

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

غالباً ما تكون الألوان هي المحور الرئيسي للعمل الفني. مع ذلك، ليس من الضروري أن الألوان التي تراها على لوحتك الفنية هي الألوان التي ستظهر في مستعرض الويب على نظام تشغيل خاص بمستخدم آخر. يمكنك منع التشبيه اللوني (أسلوب محاكاة الألوان غير المتاحة) وبعض مشاكل الألوان الأخرى باتباعك لخطوتين وقائيتين عند إنشاء رسومات الويب. أولاً، اعمل باستخدام صيغة ألوان 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 في تحويل العمل الفني إلى الصورة النقطية.

استخدام Adobe Device Central مع Illustrator

يتيح Device Central لمستخدمي Illustrator أن يقوموا بمعاينة كيف ستبدو وتعمل ملفات Illustrator على أجهزة متنقلة متنوعة.

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

الوصول إلى Illustrator من Adobe Device Central

  1. قم بتشغيل Device Central.
  2. حدد File > New Document In > Illustrator.

    في Device Central، تظهر لوحة New Document مع الخيارات الصحيحة لإنشاء مستند متنقل جديد في التطبيق المحدد.

  3. قم بإجراء أي تغييرات لازمة، مثل تحديد إصدار المشغل أو حجم العرض أو إصدار برنامج Flash أو نوع المحتوى.
  4. قم بتنفيذ أحد الإجراءات التالية:
    • حدد خيار حجم مخصص لكل الأجهزة المحددة وقم بإضافة العرض والطول (بالبكسل).

    • حدد جهازًا أو عدة أجهزة من قائمة Device Sets أو قائمة Available Devices.

  5. إذا قمت بتحديد أجهزة متعددة، فإن Device Central يحدد حجمًا لك. إذا كنت تريد أن تحدد حجمًا مختلفًا، فانقر فوق جهاز مختلف أو مجموعة من الأجهزة.
  6. انقر فوق Create.

    يفتح التطبيق المحدد مع وجود مستند متنقل جديد جاهز للتحرير.

إنشاء محتوى متنقل باستخدام Adobe Device Central وIllustrator

  1. في Illustrator، حدد File > New.
  2. في ملف تخصيص المستند الجديد، حدد Mobile and Devices.
  3. انقر فوق Device Central لإغلاق الشاشة في Illustrator وافتح Device Central.
  4. حدد نوع المحتوى.

    يتم تحديث قائمة الأجهزة المتاحة الموجودة على اليسار وتظهر الأجهزة التي تدعم نوع المحتوى المحدد.

  5. في Device Central، حدد جهازًا، أو عدة أجهزة، أو مجموعة أجهزة.

    بناءً على الجهاز (الأجهزة) المحددة ونوع المحتوى، فإن Device Central يقترح حجمًا أو أحجامًا متعددة للوح الرسم ليتم إنشاؤه. لإنشاء مستند واحد في المرة، حدد حجم مستند مقترحًا (أو حدد الخيار Custom Size for all selected Devices، وقم بإدخال قيم مخصصة للطول والعرض).

  6. انقر فوق Create.

    حينئذٍ، يفتح ملف AI فارغ بالحجم المحدد في Illustrator. الملف الجديد له المعاملات التالية والتي تم ضبطها بشكل افتراضي:

    • صيغة اللون: RGB

    • دقة النقطية: 72 ppi

  7. املأ ملف AI الفارغ بالمحتوى في Illustrator.
  8. عند الانتهاء، حدد File > Save For Web& Devices.
  9. في مربع الحوار Save for Web & Devices، حدد التنسيق المرغوب فيه، وقم بتغيير إعدادات التصدير الأخرى حسب الرغبة.
  10. انقر فوق Device Central.

    يعرض ملف مؤقت بالإعدادات المحددة للتصدير في صفحة محاكي Device Central. لمتابعة الاختبار، انقر نقرًا مزدوجًا فوق اسم الجهاز المختلف في القائمتين Device Sets أوAvailable Devices.

  11. بعد معاينة الملف في Device Central، إذا احتجت للقيام بتغييرات على الملف، فارجع إلى Illustrator.
  12. في مربع الحوار Save for Web & Devices في Illustrator، قم بعمل التعديلات، مثل تحديد تنسيق أو جودة مختلفة للتصدير.
  13. لاختبار الملف مرة أخرى بالإعدادات الجديدة للتصدير، انقر زر Device Central.
  14. عندما ترضى بالنتائج، انقر فوق Save في مربع الحوار Save for Web & Devices في Illustrator.

    ملاحظة:

    لفتح Device Central ببساطة من Illustrator (بدلاً من إنشاء واختبار ملف)، حدد File > Device Central.

تلميحات لإنشاء صور 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.

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

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