ما الذي يجعل الأيقونات تبدو مجموعة واحدة؟
تنتمي الأيقونات إلى بعضها عندما تشترك في شبكة واحدة، وسُمك خط واحد، وطريقة واحدة في معالجة الزوايا، ومستوى تفاصيل واحد، ولوحة ألوان واحدة. خلط أيقونات من حزم مختلفة، أو إنشاؤها بأمر نصي منفصل لكل أيقونة، يكسر عادةً واحدًا من هذه على الأقل. يرسم مولد مجموعات الأيقونات كل أيقونات المجموعة في ورقة واحدة، من وصف واحد للنمط، فتُتخذ قرارات الرسم مرة واحدة لها جميعًا. ثم تُقص كل أيقونة وتُتتبّع إلى ملف SVG خاص بها.
ثلاث من مجموعاتنا النموذجية، كل منها من قائمة واحدة: تطبيق مقهى بنمط «خطي»، وتطبيق لياقة بنمط «مملوء» بزوايا حادة، وتطبيق سفر بنمط «ألوان مسطحة» بثلاثة ألوان.
كيف أصنع مجموعة؟
افتح مولد الشعارات بالذكاء الاصطناعي واختر الأيقونات. يتغير عنوان الاستوديو إلى مولد مجموعات الأيقونات.
- اكتب الأيقونات. اكتب الأشياء التي تحتاجها، مفصولة بفواصل أو كل واحد في سطر:
كوب قهوة، كرواسون، دبوس خريطة، بطاقة ولاء. يصبح كل منها شريحة. تتسع المجموعة لما يصل إلى 25 أيقونة. - اختر طريقة الرسم. خطي حدود بسُمك واحد، ومملوء أشكال مصمتة بلون واحد، وألوان مسطحة أشكال مصمتة بما يصل إلى ثلاثة ألوان، ومثل هذه الصورة يتبع مظهر صورة ترفعها (بعد تسجيل الدخول) أو مظهر شعار أو مجموعة أيقونات صنعتها من قبل.
- اختر الزوايا. «مستديرة» أو «حادة».
- صِف النمط بالكلمات، إن أردت. حتى 300 حرف، مثلًا: «ودود وبسيط، أطراف مستديرة، ولمسة دافئة كأنها مرسومة باليد». تدخل هذه الجملة في رسم كل أيقونة في المجموعة.
- أرسل. تعرض كل خانة أيقونتها أثناء تتبّعها، ثم ملف SVG النهائي.
سعر المجموعة الجديدة مكتوب على الزر قبل أن ترسلها؛ ولا يُخصم أي شيء مقابل مجموعة تفشل.
كيف أصلح أيقونة واحدة دون إعادة رسم الباقي؟
استخدم جولة. في الجولة يمكنك إعادة أيقونات مع ملاحظة («حصيرة ملفوفة بسيطة، بلا ملمس») وإضافة أيقونات جديدة، حتى تسعة تغييرات في المرة الواحدة. تُرسم الأيقونات المُعادة والمضافة بنمط المجموعة، فتبقى متناسقة معها. الجولات الأولى من كل مجموعة مشمولة؛ وعندما تكلّف الجولة أرصدة، يذكر زرها ذلك قبل أن تبدأها.
إذا كان هناك تفصيل واحد غير صحيح وكانت إعادة الرسم مبالغة، فافتح الأيقونة في محرر SVG وغيّر المسار أو اللون مباشرة.
ماذا يحتوي التنزيل؟
يتكون ملف ZIP من ثلاثة أجزاء:
| المجلد | ما يحتويه |
|---|---|
svg/ |
ملف SVG لكل أيقونة، viewBox="0 0 24 24" مع هامش 2 بكسل |
png/ |
كل أيقونة كصورة PNG شفافة بأحجام 16 و24 و32 و48 و64 و128 و256 و512 بكسل |
sprite.svg |
كل أيقونة كعنصر <symbol> بالمعرّف icon-NAME |
صور PNG الصغيرة (حتى 48 بكسل) تُرسم بحجمها الخاص، فتقع الخطوط على بكسلات كاملة بدلًا من أن تُصغَّر من صورة كبيرة. أما الأحجام الأكبر فتُكبَّر من 512 بكسل.
كيف أستخدم الأيقونات في موقع؟
في مجموعة خطي أو مملوء، تُرسم ملفات SVG بـcurrentColor، فتأخذ الأيقونة لون النص المحيط بها. وتعيد تلوينها بـCSS بدلًا من تعديل الملفات:
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cup-of-coffee"/></svg>
Order
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
اختر كما صُممت في نافذة التنزيل إذا كنت تفضّل أن يُكتب اللون داخل كل ملف. أما مجموعة ألوان مسطحة فتحتفظ دائمًا بألوانها الخاصة. ضع على الأيقونات الزخرفية aria-hidden="true"، وامنح الأيقونة التي تقوم وحدها مقام الزر اسمًا يمكن الوصول إليه.
ما القوائم التي تعمل بأفضل شكل؟
الأسماء الملموسة التي يمكن رسمها تعمل بأفضل شكل: «دراجة»، «ساعة إيقاف»، «قفل باب». أما الكلمات المجردة («نمو»، «ثقة») فلا تعطي المولد شيئًا محددًا لرسمه، لذا حوّلها إلى شيء ملموس أولًا («برعم»، «مصافحة»). حافظ على مستوى تفاصيل واحد عبر القائمة. فالمجموعة التي تخلط «نقطة» مع «أفق مدينة» ستبدو غير متوازنة مهما كانت طريقة رسمها.
قبل النشر، تحقّق من كل أيقونة بحجم 16 و24 بكسل بجانب النص، وتحقّق من التباين مع خلفياتك، وتأكد من أن الأيقونات المتشابهة تبقى مميزة. المولد لا يتحقق مما إذا كانت الأيقونة تشبه علامة شخص آخر، لذا راجع أي أيقونة تنوي تسجيلها كعلامة تجارية.