نادرًا ما يتم تسليم رسومات SVG من Adobe Illustrator CC إلى المصممين الرقميين ذوي الخلفيات. عادةً ما تطفو الرسومات فوق أي خلفية موجودة في موقع الويب أو التطبيق أو الرسوم المتحركة أو السياق التفاعلي.
قبل مناقشة ما الذي ينطوي عليه إزالة الخلفية خلف عمل SVG الفني ، ركز على تطبيق الشفافية على رسومات SVG. تحتاج إلى تعريف عتامة العمل الفني باستخدام لوحة Transparency. على سبيل المثال ، تم تطبيق شفافية بنسبة 50 بالمائة على الشكل الأصفر في الشكل ، ويمكنك رؤية الشفافية قيد التأثير. ونعم ، هذه الصورة عبارة عن ملف SVG ، مع كل الميزات خفيفة الوزن وسريعة التحميل والقابلة للتطوير بشكل لا نهائي المضمنة في SVG.
شكل SVG شبه معتم أعلى خلفية ملونة.
اعتاد المصممون على التفكير في الخلفيات التي إما أن تكون شفافة أو تظل مرئية. نفكر في التخلص من الخلفية. تعمل صور PNG وصور GIF على هذا النحو - إما أن تنشئ بخلفية أو تختار خلفية شفافة في برنامج مثل Illustrator أو Photoshop لإخراج تلك الخلفية.
باستخدام ملفات GIF و PNG ، يمكنك الحصول على لون شفاف واحد يسمح لألوان الخلفية أو الصور بالظهور في صفحات الويب. لكن منطق إلغاء الخلفية يختلف في ملف SVG عنه في ملفات PNG و GIF. بشكل أساسي ، لا يوجد شيء اسمه رسم SVG له خلفية غير شفافة لأنه لا توجد خلفية. بمعنى آخر: بشكل افتراضي ، تحفظ رسومات SVG وتصديرها بدون خلفية.
إذا ما هي المشكلة؟ حسنًا ، من السهل أن ينتهي الأمر بطريق الخطأ بخلفية شفافة عند حفظ أو تصدير ملفات SVG! قد يكون للشكل التالي خلفية بيضاء أو خلفية شفافة. لا يمكنك معرفة ذلك بمجرد النظر إلى شاشة Illustrator ؛ عليك أن تختار عرض ← إظهار شبكة الشفافية.
قد يكون لهذا الرسم خلفية بيضاء أو قد لا يكون له خلفية.
مع تمكين شبكة الشفافية ، كما هو موضح ، يمكنك أن ترى أن الطائر له مستطيل أبيض خلفه ، وأن هذه الخلفية البيضاء سوف "تتماشى" مع الرسم إذا قمت بحفظ الملف كملف SVG أو قمت بتصديره كملف SVG.
يكشف عرض شبكة الشفافية عن مستطيل أبيض خلف الرسم.
اسمحوا لي أن أؤكد وأسلط الضوء على هذا من زاوية أخرى. عندما أذهب لتصدير هذه الصورة كملف SVG ، لا يحتوي مربع الحوار Export for Screens ، المعروض ، على خيار لتحديد لون الشفافية.
لا يمكنك اختيار لون شفاف في SVG لأنه لا يوجد لون للخلفية.
غالبًا ما أصادف المصممين الذين يصرون على وضع مستطيل في الخلفية خلف أعمالهم الفنية الموجهة إلى SVG حتى يتمكنوا من رؤية كيف سيبدو الرسم عند الخلفية بلون في الوسط المستهدف (مثل صفحة ويب أو تطبيق). لا بأس ، أحذرهم ، طالما أنك تتذكر إزالة مستطيل الخلفية هذا عند حفظ أو تصدير SVG. وفي عالم اليوم الذي يتسم بالضغوط العالية ، والإنتاجية العالية ، وسريع التحول ، من يحتاج إلى شيء آخر ليتذكره؟
الحل الأفضل هو تحديد "شبكة" شفافية بلون واحد يتوافق مع البيئة التي سيتم وضع الرسم فيها. لماذا أضع الشبكة في علامات الاقتباس؟ لأن هذه التقنية تغش: باستخدامها ، يمكنك تحديد كل من ألوان الشبكة بنفس اللون ، مما يؤدي إلى محاكاة صفحة الويب أو لون خلفية التطبيق بشكل فعال.
لاستخدام هذه التقنية لإنشاء خلفية مخصصة أثناء قيامك بتطوير عمل SVG الفني ، اتبع الخطوات التالية:
اختر ملف ← إعداد المستند.
في علامة التبويب عام ، ابحث عن قسم خيارات الشفافية والطباعة الفوقية.
يتم التحكم في التغييرات التي تريدها في هذا القسم من مربع الحوار.
لا تقلق بشأن تحديد حجم الشبكة لأنك تستغني بشكل فعال عن الشبكة.
في قسم شبكة الشفافية من مربع الحوار ، انقر فوق أول لوحتي ألوان الشبكة واختر لون الخلفية باستخدام إحدى لوحات الألوان المختلفة في نافذة الألوان المنبثقة الموضحة في الشكل التالي.
بالمناسبة ، لا يوجد أي من لوحات الألوان هذه صديقًا رقميًا بشكل خاص. لا توجد لوحة ألوان RGBA أو سداسية عشرية أو غيرها من تنسيقات ألوان الويب القياسية ، ولكن يمكن أن تساعدك قطارة منتقي الألوان في الحصول على لون الخلفية الذي تهدف إلى مطابقته.
تحديد معاينة لون الخلفية بشبكة الشفافية.
حدد الثانية من لوحين لون الشبكة ، وقم بتعيين نفس اللون لها.
تذكر أنه يمكنك استخدام قطارة منتقي الألوان لالتقاط هذا اللون.
انقر فوق "موافق" في مربع الحوار "إعداد المستند".
كل ما قمت به في مجموعة الخطوات السابقة هو تحديد كيفية عرض شبكة الشفافية عند تمكينها . لذلك ، إذا لم يتم تمكين شبكة الشفافية الخاصة بك ، فاختر عرض ← شبكة الشفافية.
في هذا الشكل ، قمت بتحديد لوح الرسم بالرسم ، وأنا أقوم بمعاينة المشروع مقابل لون الخلفية المحاكى.
معاينة لون الخلفية الناتج باستخدام شبكة شفافية مخصصة.
عند تطبيق الشفافية (مثل عتامة 50 بالمائة) أو تأثيرات الشفافية مثل احتراق اللون أو التعتيم أو الضرب على رسومات SVG ، فإن تلك التأثيرات تحافظ على قابلية توسيع SVG.
يعرض هذا الشكل نفس الرسم - ثلاثة مستطيلات برتقالية شبه شفافة - تم تصديرها كملف PNG (أعلى) و SVG. يمكنك أن ترى كيف تتدهور جودة ملف PNG عندما أقوم بتكبيره في المتصفح. ما لا يمكنك رؤيته هو أن ملف PNG يكاد يكون ضعف حجم ملف SVG.
مقارنة إخراج PNG (أعلى) مع SVG عند تطبيق الشفافية
فيما يلي ملخص لمزايا استخدام SVG لتأثيرات الشفافية:
بالمناسبة ، إذا كنت مهتمًا بالشكل الذي يبدو عليه رمز SVG الذي تم إنشاؤه لهذه المجموعة من المستطيلات ، ومدى سهولة تعامل مطور الويب أو التطبيق معها ، فإليك رمز أول مربعات SVG الثلاثة ، مع تطبيق عتامة بنسبة 60 بالمائة:
<= "" code = "">
أخيرًا، إذا كنت تريد تعبئة لون خلفية SVG الخاصة بك، فيمكن تحقيق ذلك أيضًا عبر خصائص المستند قائمة طعام. ما عليك سوى النقر على الشريط الأبيض الموجود بجوار المكان المذكور لون الخلفية. سينبثق محدد الألوان على شاشتك.
من المهم ملاحظة أن خلفية SVG الخاصة بك ستظل شفافة على الرغم من تعبئة الألوان طالما أن عمود (الذي يمثل شفافية اللون) تظل عند 0. إذا كنت تريد أن يكون للمستند لون الخلفية هذا بالفعل (حتى في عمليات التصدير)، فيمكنك رفع هذا العمود من 0 إلى 100.
وهذا يجب أن ينطبق على العمل مع الخلفيات في Inkscape. إذا كانت لديك أي أسئلة لم يتم تناولها في هذا المنشور، فما عليك سوى ترك تعليق أدناه وسأرد عليك إذا كان بإمكاني المساعدة.
يمكنك استخدام أداة Snapshot في Adobe Acrobat CS5 لتحديد كل من النص والصور وإنشاء صورة لمنطقة معينة داخل ملف PDF. يُشار إلى النتيجة عمومًا على أنها لقطة شاشة لقسم داخل ملف PDF. النتيجة صورة والنص لا [...]
تُعد إمكانات القياس في Photoshop CC ، المصممة للباحثين والعلماء ، قوية جدًا. يمكنك قياس أي شيء تقريبًا وإحصاء عدد العناصر الموجودة في صورة تقنية ، ربما من خلال مجهر أو تلسكوب. إذا كنت تعرف الحجم الدقيق لأي عنصر في الصورة ، فيمكنك حينئذٍ اكتشاف أي شيء تقريبًا [...]
عند استخدام أدوات Liquify في Adobe Creative Suite 5 (Adobe CS5) Illustrator ، يمكنك ثني الكائنات - اجعلها متموجة أو لزجة أو شائكة - عن طريق إنشاء تشوهات بسيطة إلى معقدة. يمكن لأدوات Liquify إنجاز جميع أنواع التشوهات الإبداعية أو الأحمق (اعتمادًا على الطريقة التي تنظر إليها) في الكائنات الخاصة بك. أنت […]
عندما يكون لديك نص في مشروع Adobe XD الخاص بك ، يمكنك البدء في تغيير خصائص النص. تتضمن هذه الخصائص مجموعة الخط وحجم الخط وسمك الخط والمحاذاة وتباعد الأحرف (تقنين الأحرف والتعقب) وتباعد الأسطر (المسافة بين السطور) والتعبئة والحدود (الحد) والظل (الظل المسقط) وتمويه الخلفية. لذلك دعونا نراجع كيفية تطبيق هذه الخصائص. حول سهولة القراءة والخط [...]
يمكنك استخدام InDesign لإنشاء رسومات رمز QR وتعديلها. أكواد QR هي شكل من أشكال الباركود الذي يمكنه تخزين معلومات مثل الكلمات والأرقام وعناوين URL أو أشكال أخرى من البيانات. يمسح المستخدم رمز الاستجابة السريعة باستخدام الكاميرا والبرامج الموجودة على جهاز ، مثل الهاتف الذكي ، ويستخدم البرنامج [...]
تمامًا كما هو الحال في Adobe Illustrator ، توفر اللوحات الفنية في Photoshop القدرة على إنشاء صفحات أو شاشات منفصلة داخل مستند واحد. يمكن أن يكون هذا مفيدًا بشكل خاص إذا كنت تقوم بإنشاء شاشات لتطبيق جوال أو كتيب صغير. يمكنك التفكير في لوح الرسم كنوع خاص من مجموعة الطبقات التي تم إنشاؤها باستخدام لوحة Layers. إنه […]
لا يتشابه التفاف النص في Adobe Illustrator CC تمامًا مع تغليف هدية - إنه أسهل! يجبر التفاف النص النص على الالتفاف حول رسم ، كما هو موضح في هذا الشكل. يمكن لهذه الميزة أن تضيف القليل من الإبداع إلى أي قطعة. الرسم يجبر النص على الالتفاف حوله. أولاً ، قم بإنشاء [...]
عند التصميم في Adobe Illustrator CC ، غالبًا ما تحتاج إلى شكل ليكون بالحجم الدقيق (على سبيل المثال ، 2 × 3 بوصات). بعد إنشاء شكل ، فإن أفضل طريقة لتغيير حجمه وفقًا للقياسات الدقيقة هي استخدام لوحة التحويل ، الموضحة في هذا الشكل. حدد الكائن ثم اختر Window → Transform to […]
تعرف على كيفية تطبيق الشفافية على رسومات SVG في Illustrator. اكتشف كيفية إخراج صور SVG بخلفيات شفافة وتطبيق تأثيرات الشفافية.
بعد قيامك باستيراد صورك إلى Adobe XD ، ليس لديك قدر كبير من التحكم في التحرير ، ولكن يمكنك تغيير حجم الصور وتدويرها تمامًا كما تفعل مع أي شكل آخر. يمكنك أيضًا تقريب زوايا صورة مستوردة بسهولة باستخدام أدوات الزاوية. إخفاء صورك عن طريق تحديد شكل مغلق [...]
