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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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