Adobe Illustrator CC لورقة الغش في LuckyTemplates

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

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

كيفية تطبيق مرشحات SVG في Illustrator

عندما تقوم بإنشاء ملفات SVG للشاشات في Illustrator وتريد تطبيق تأثيرات (مثل الظلال المسقطة) ، يجب أن تقوم بتطبيقها كمرشحات SVG. بهذه الطريقة ، تحتفظ ملفات SVG بقابلية التوسع اللانهائية دون تشويه.

ترشدك الخطوات التالية خلال تطبيق مرشح SVG على الرسومات في Illustrator:

حدد الكائن (الكائنات) الذي تقوم بتطبيق المرشح عليه.

اختر Effect → SVG Filters.

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

لتغيير عامل التصفية المحدد:

• احتفظ بالكائن الذي تم تطبيق المرشح عليه محددًا ، وافتح لوحة Appearance باختيار Window → Appearance.
• في لوحة Appearance ، انقر فوق مرشح SVG الذي يظهر في قسم Fill باللوحة. تفتح لوحة Apply SVG Filter.
• في لوحة Apply SVG Filter ، قم بتغيير المرشح المطبق.
• لمعرفة كيف سيبدو المرشح ، حدد خانة الاختيار معاينة ، كما هو موضح في الشكل.
  

بعد أن تستقر على مرشح ، انقر فوق OK في لوحة Apply SVG Filter.

كيفية إضافة مرشحات SVG إلى Illustrator

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

بعد شراء أو إنشاء عوامل تصفية SVG الخاصة بك ، إليك كيفية تثبيتها في Illustrator:

اختر Effect → SVG Filters → Import SVG Filter.

في مربع الحوار الذي يفتح ، انتقل إلى ملف عوامل تصفية SVG الذي أنشأته أو نزّلته مجانًا وانقر فوقه نقرًا مزدوجًا.
يجب أن يكون الملف الذي تبحث عنه ملف SVG (يتم تجميع عوامل تصفية متعددة في ملف SVG واحد).
تتوفر عوامل التصفية الجديدة الخاصة بك الآن في القائمة الفرعية لفلاتر SVG.

اختر Effect → SVG Filters لتطبيق مرشحاتك الجديدة على الكائنات المحددة.

كيفية تسليم كود SVG من Illustrator إلى مطور

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

يتم تشغيل مسار تصدير رسومات SVG كرمز من خلال وظائف الحفظ في Illustrator. تحتوي قائمة حفظ على خيارات (ليس من السهل العثور عليها) تقوم بتصدير ملفك كرمز SVG. من المحتمل أن تكون على اتصال في الوقت الفعلي مع مطور الشاشة أثناء قيامك بإنشاء هذا الرمز لأن العديد من الخيارات يتم تحديدها من خلال كيفية استخدام هذا الرمز:

اختر ملف ← حفظ (أو حفظ باسم إذا كنت تعيد حفظ ملف).

في مربع الحوار الذي يفتح ، حدد SVG من قائمة التنسيق.
تجاهل خيار ملف SVGZ ، وهو ملف مضغوط لا يتم عرضه في المستعرضات.

انقر فوق حفظ لفتح مربع حوار خيارات SVG.

اختر دائمًا SVG 1.1 في القائمة المنسدلة لملفات تعريف SVG. الإصدارات الأخرى عفا عليها الزمن.

إذا كان لديك صور مضمنة أو مرتبطة في ملف SVG ، فاختر Embed من القائمة المنسدلة Image Locations. ومع ذلك ، استشر مطور الويب الخاص بك حول هذا الخيار أولاً.

حدد الاحتفاظ بإمكانيات التحرير في Illustrator لتجعل الملف قابلاً للتحرير في Illustrator.
يزيد هذا الاختيار من حجم الملف ولكنه يسمح لك بالعمل مع ملف SVG واحد يمكنك تحريره وتحديثه ومشاركته مع مطوري الويب.

إذا تم عرض الزر "المزيد من الخيارات" ، فانقر فوقه للوصول إلى الخيارات المتقدمة. وحدد اختياراتك.
بشكل أساسي ، تنشئ الخيارات المختلفة CSS بملفك الذي يحدد الخصائص بالطرق التالية. استشر زميلك في فريق مطور الويب حول كيفية تحديد خصائص CSS هذه:

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

قم بإلغاء تحديد خانات الاختيار الخمسة الموجودة أسفل مربع حوار خيارات SVG ، إلا إذا طلب منك المطور - الشريك أن تقوم بتحديدها.
هذه الخيارات للتطبيقات المتخصصة للغاية.

لإنشاء رمز SVG استنادًا إلى التحديدات التي تقوم بها في مربع الحوار SVG Option ، انقر فوق الزر SVG Code .
يتم عرض كود SVG الذي تم إنشاؤه في محرر نصوص نظام التشغيل الخاص بك. يمكنك حفظ هذا الرمز كملف نصي باستخدام محرر نصوص نظام التشغيل الخاص بك ، وتسليم الملف إلى مطور.

بعد إنشاء الرمز ، انقر فوق "موافق" لحفظ ملفك.
يمكنك إعادة فتح هذا الملف وتحريره في Illustrator.