() translation by (you can also view the original English article)
في هذا البرنامج التعليمي السريع ، سأوضح لك كيفية إنشاء رسم سهم جاهز لـ SVG باستخدام Adobe XD.
شاهد مقطع الفيديو
سأستخدم تصميم موقع الويب الذي يعد جزءًا من دورة تدريبية جديدة تسمى "تصميم متوافق مع الأكواد مع Adobe XD". يحتوي على منطقة المحتوى الرئيسية في أعلى الصفحة بالفعل ، والآن أريد إضافة زر يحتوي على سهم والذي سيشجع المستخدمين على التمرير لأسفل لعرض المزيد من المحتوى.
لا يعد "Adobe XD" برنامج تحرير متجه بالكامل ولكن لا يزال هناك بعض الشيء الذي يمكنك فعله به. باستخدام أدوات مكافحة ناقلات XD في أي مكان يمكنك ، بدلاً من الصور النقطية المسطحة (مثل JPG و PNG وما إلى ذلك) عند تسليم التصميم إلى مطور ، سيكون بإمكانهم التقاط تلك الرسومات المتجهة وتحويلها مباشرة إلى رمز SVG.
تصميم أيقونة سهم
سنبدأ باستخدام أداة "Ellipse " واستخدمها لرسم دائرة بعرض 85 بكسل تقريبًا. سنقوم بإزالة الحد عن طريق تغيير الإعدادات في لوحة خصائص جهة اليمين ، ثم تغيير التعبئة إلى شيء مناسب.
سنستخدم بعد ذلك أداة المستطيل لإنشاء شكل يتداخل مع الجزء العلوي من الدائرة. عند تغيير حجمها ، ستلاحظ أنها تستقر بدقة في منتصف الطريق على الدائرة. يمكننا بعد ذلك تحديد كلا الشكلين ، وباستخدام العوامل المنطقية في لوحة الخصائص ، يمكننا طرح النصف العلوي من الدائرة.
لإنشاء السهم ، سنطرح شكلاً آخر من هذه الدائرة النصفية. سيكون الأمر أكثر ضجيجًا مما فعلناه حتى الآن ، لأن Adobe XD مصمم ليكون تطبيقًا للنماذج الأولية ، وليس برنامج تصميم مخصص لمكافحة ناقلات الأمراض. ومع ذلك ، يمكننا بالتأكيد العمل مع ما لدينا. أختار أداة Pen بالاشتراك مع أداة Rectangle.
نصيحة:
احصل على مزيد من التحكم في المسارات في أشكالك عن طريق النقر بزر الماوس الأيمن على الشكل الذي تريد تحريره ، ثم الانتقال إلى مسار> تحويل إلى مسار. سيؤدي ذلك إلى تغيير الكائن من شكل محدد مسبقًا إلى مجموعة مسارات عملية. لتحرير العقد على هذا المسار ، انقر نقرًا مزدوجًا فوق الكائن.
والأمر متروك لكيفية إنشاء رمز السهم ، ولكن بمجرد الانتهاء من ذلك ، ضعه أعلى الكائن شبه الدائري ، وحدد كليهما ، ثم اطرح السهم باستخدام الأدوات المنطقية كما فعلنا من قبل. يجب أن ينتهي بك الأمر بشيء مثل هذا:
لقد أكملت الآن رمز السهم الجاهز لـ SVG باستخدام أدوات بسيطة في "Adobe XD"! للحصول على تفاصيل حول ما يمكنك القيام به بعد ذلك ، ابق مستعداً للدورة القادمة.
