كيف أرسم أشكالا وأصدّر رسومات متجهة (SVG)؟

رسم الأشكال وتصدير SVG في سبع خطوات

1. 1

   أنشئ مستندا جديدا

   انتقل إلى lilcactus.app واختر ملف› ثم جديد… اكتب 800 في الحقل العرض و800 في الارتفاع، وانقر العينة ذات المربعات تحت الخلفية لخلفية شفافة، ثم انقر إنشاء.

   

2. 2

   ارسم دائرة

   اضغط U لاختيار أداة الشكل. في شريط الخيارات (الشريط أسفل القوائم)، اختر بيضاوي من قائمة الشكل؛ ويجب أن يكون الوضع على الشكل. اضغط Shift أو ⇧ باستمرار واسحب عبر معظم لوحة الرسم: تظهر دائرة سوداء على طبقة جديدة اسمها الشكل. تعبأ الأشكال الجديدة بلون المقدمة.

   

3. 3

   اضبط حجمها وموضعها ولونها بدقة

   والدائرة محددة، تعرض لوحة الخصائص إعداداتها الحية. اكتب 100 في X (px) وY (px)، و600 في العرض (px) والارتفاع (px)، واضغط Tab بعد كل قيمة: صارت الدائرة في المنتصف بهامش 100 px.

   وفي الأسفل، تحت التعبئة، انقر عينة اللون واكتب 2E7D5B في حقل الرمز الست عشري وانقر موافق. تصبح الدائرة خضراء.

   

   

4. 4

   ارسم نجمة بيضاء برؤوس مستديرة

   اضغط D ثم X ليصبح الأبيض لون المقدمة. اختر نجمة من قائمة الشكل في شريط الخيارات، واضبط نقاط على 5، ونصف القطر الداخلي على 50، ونصف قطر الزاوية على 24. اضغط Shift أو ⇧ باستمرار واسحب من نحو ربع المسافة داخل الدائرة إلى ثلاثة أرباعها: تظهر نجمة بيضاء برؤوس ناعمة على طبقة مستقلة. ولوضعها بدقة، اكتب 250 في X (px) وY (px) و300 في العرض (px) والارتفاع (px) في لوحة الخصائص.

   

   

5. 5

   غيّر النجمة لاحقا

   تبقى الأشكال حية. وطبقة النجمة محددة، اكتب 6 في نقاط في لوحة الخصائص واضغط Tab: يعاد رسم النجمة بستة رؤوس، بالحجم نفسه والزوايا المستديرة نفسها. ويعمل العرض (px) ونصف القطر (px) (نصف قطر الزاوية) بالطريقة نفسها.

   

6. 6

   أضف حلقة بيضاء

   انقر طبقة الدائرة (الشكل) في لوحة الطبقات. في لوحة الخصائص، تحت حد، اضبط الطلاء على اللون، وانقر العينة واختر الأبيض (FFFFFF). وتحت هندسة الحد، اكتب 16 في العرض (px) واضبط الموضع على داخل، لتبقى الحلقة ضمن الدائرة ذات 600 px.

   

   

7. 7

   صدّر بصيغة SVG واحفظ المشروع

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

   ولإبقاء الأشكال قابلة للتعديل في Lil Cactus، اختر أيضا ملف› ثم حفظ باسم› ثم مشروع Lil Cactus… (Ctrl+Shift+S أو ⇧⌘S)؛ بعد ذلك يحدّث الأمر ملف› ثم حفظ ذلك الملف. ويحفظها الأمر ملف› ثم حفظ باسم› ثم Photoshop (.psd)… طبقات أشكال متجهة، لكن عند فتح ملف PSD مجددا تصبح مسارات قابلة للتحرير دون إعدادات الزوايا والرؤوس الحية.

   

الأشكال وخياراتها

• مستطيل: يدوّر نصف قطر الزاوية في شريط الخيارات زواياه، للأزرار والبطاقات.
• الخط: اسحب من طرف إلى طرف، ثم اضبط لون حده وعرضه وأطراف الخط (مسطحة أو مستديرة أو مربعة) في لوحة الخصائص. يرسم حد الخط الجديد بلون المقدمة؛ وإن لم يظهر، فذلك اللون يطابق المستند: اختر هناك لون حد آخر.
• مضلع ونجمة: الأضلاع أو نقاط، وللنجمة نصف القطر الداخلي الذي يحدد عمق الرؤوس.

يحدد الوضع في شريط الخيارات ما ينتجه السحب: طبقة شكل (الشكل)، أو مسارا يمكنك تحويله إلى تحديد أو حد (المسار)، أو طلاء على الطبقة الحالية (بكسل) لا يعود قابلا للتعديل كشكل.

ادمج الأشكال وأعد تشكيلها

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

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

ما يحفظه تصدير SVG

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

لملف متجه خالص، اقتصر في التصميم على طبقات الأشكال والنص العادي في الوضع عادي، وأخف الطبقات الفارغة.

حل المشكلات الشائعة

ظهر الشكل باللون الأسود

كان لون المقدمة أسود. غيّر التعبئة في لوحة الخصائص، أو اضبط لون المقدمة قبل الرسم.

قصّ شكلي الجديد ثقبا في الشكل القديم

العملية في شريط الخيارات مضبوطة على طرح. تراجع بالأمر تحرير› ثم تراجع (Ctrl+Z أو ⌘Z)، واضبطها على طبقة جديدة وارسم مجددا.

الدائرة بيضاوية

اكتب القيمة نفسها في العرض (px) والارتفاع (px) في لوحة الخصائص.

للقادمين من محررات أخرى

Photoshop

أدوات الأشكال (U) وإعدادات الشكل الحية في لوحة Properties.

الأشكال والرسومات المتجهة: أسئلة وأجوبة