استوديو العلامة التجارية

استوديو العلامة التجارية على #/start هو المكان الوحيد الذي تُشكّل فيه علامتك التجارية - شعاراتها وألوانها وخطوطها وبقية رموزها والملفات التي تحفظها. اضبطها هنا مرة واحدة، وكل أداة وصفحة وتصدير ستتبعها بحكم البناء، لا بحكم المراجعة.

تُعاين التغييرات حيا عبر التطبيق بأكمله أثناء إجرائها، بحيث ترى أثر لون أو خط في كل مكان قبل أن تُثبّته. كل ذلك يجري على الجهاز: ملفات علامتك التجارية ورموزها لا تغادر جهازك أبدا (اختيار خط من Google Font يجلب تلك العائلة الواحدة من Google، مرة واحدة، بعد مربع حوار موافقة)، وتنتقل العلامة التجارية في ملف حزمة علامة تجارية واحد.

هذا هو المحرر. لوحة القيادة هي المرآة. علامة تبويب نظام العلامة التجارية في لوحة القيادة (#/d) تعرض علامتك التجارية للقراءة فقط؛ أما تحريرها فيتم هنا في #/start. إذا أردت تغيير لون لاحقا، عُد إلى استوديو العلامة التجارية.

الغرف

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

على الهاتف تتحول القائمة نفسها إلى شريط شرائح أفقي مثبَّت تحت الترويسة. تبديل الغرفة لا يُعيد تحميل أي شيء أبدا - يبقي المحرر كل لوحاته مركّبة ويعرض ببساطة ما طلبته.

اربط غرفة برابط مباشر عبر #/start?area=<key>. المفاتيح هي overview، وcolor (لاحظ الإملاء الأمريكي في الرابط)، وtype، وlogos، وtokens، وcatalogue (غرفة الملفات - مفتاح اللوحة عقد دائم، لذا يحتفظ الرابط بالاسم القديم) وversions. ?tab= هو الاسم البديل القديم لنفس الشيء وما زال يعمل، لذا تظل الروابط والإشارات المرجعية القديمة صالحة؛ أي شيء غير معروف يفتح نظرة عامة بدلا من الوصول إلى طريق مسدود.

مثبتة في أسفل الشريط الجانبي الإجراءات التي تخص نظام العلامة التجارية كله لا غرفة واحدة:

شريط غرف الاستوديو - نظرة عامة، الألوان، الخطوط، الشعارات، الرموز والملفاتsigned by Lollyvector SVGتحقق بنفسكGet the signed file20 paths~1.1k nodes37 groups19 KBشريط غرف الاستوديو - نظرة عامة، الألوان، الخطوط، الشعارات، الرموز والملفاتsigned by Lollyvector SVGتحقق بنفسكGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

نظرة عامة

نظرة عامة هي الغرفة التي تصل إليها أولا، ولها وجهان.

عندما لا شيء مُعدّا بعد تعرض بابين - البدء من ملف (رموز تصميم، مشروع Penpot، حزمة نظام تصميم أو SVG) والبدء من الصفر (أضف لونا واحدا، ثم واصل متى شئت) - ومخرجا هادئا استكشاف الأدوات أسفلهما، لأن المغادرة إجابة مشروعة أيضا.

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

الشعارات

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

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

أسفل ذلك تقع الشبكة التي ينتهي فيها كل علامة - فتحات اتجاه × معالجة:

هذه ثماني فتحات اختيارية. انقر على فتحة لإضافة PNG أو SVG أو JPEG أو WebP؛ انقر على فتحة مملوءة لاستبدالها. كل فتحة اختيارية ويبقى كل شيء على هذا الجهاز.

مصفوفة الشعارات - كل اتجاه عبر الأعلى، وكل معالجة كفتحتها المتقطعة الخاصة، وكلها اختياريةsigned by Lollyvector SVGتحقق بنفسكGet the signed file8 paths~4.8k nodes19 groups54 KBمصفوفة الشعارات - كل اتجاه عبر الأعلى، وكل معالجة كفتحتها المتقطعة الخاصة، وكلها اختياريةsigned by Lollyvector SVGتحقق بنفسكGet the signed file8 paths~4.8k nodes19 groups54 KB

الألوان

The Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVGتحقق بنفسكGet the signed file114 paths~26k nodes149 groups4 images523 KBThe Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVGتحقق بنفسكGet the signed file114 paths~26k nodes149 groups4 images523 KB

أغنى غرفة، في جزأين. الجزء الأيسر هو حيث تعمل؛ الأيمن هو لوحتك الحية. اسحب الفاصل بينهما لتغيير الحجم (Enter عليه يطوي اللوحة جانبا).

غرفة الألوان - لون أساسي يشتق تدرجات، بطاقات عينات بنسب تباين ولوحة حيةsigned by Lollyvector SVGتحقق بنفسكGet the signed file61 paths~9.4k nodes77 groups200 KBغرفة الألوان - لون أساسي يشتق تدرجات، بطاقات عينات بنسب تباين ولوحة حيةsigned by Lollyvector SVGتحقق بنفسكGet the signed file61 paths~9.4k nodes77 groups200 KB

أضف لونا، ثم امنحه دورا

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

الأدوار هي الطبقة فوق ذلك - أي لون يؤدي كل دور. الأدوار اختيارية (نظام علامة تجارية من ثلاثة ألوان منفصلة بلا أدوار جيد تماما)، يمكن لأي عينة أن تأخذ دورا، وتُقاس قراءة التباين مقابل السطح، بمعيار APCA أولا.

الأجنحة المتقدمة

أربعة أقسام مطوية تقع تحت هذين. افتح ما تريد؛ كل منها قابل للربط المباشر كـ #/start?area=color&focus=<wing>:

لون واحد، لوحة كاملة

داخل توليد لوحة أولية، اختر لونا أساسيا ويحسب Lolly لوحة كاملة - أسطحا فاتحة وداكنة، نصا، لمسات وتدرجات تظليل/تفتيح كاملة - باستخدام رياضيات اللون الإدراكية نفسها (OKLCH) التي يستخدمها المحرك في كل مكان. اضبط الاشتقاق:

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

أسفل اللون الأساسي سترى تدرجات أساسي / محايد / ثانوي / مزيج حية وبطاقات عينات فاتحة وداكنة، تحمل كل منها قراءة تباين خاصة بها - نسبة WCAG مع رقم Lc الخاص بـ APCA بجانبها. انقر على خطوة في تدرج المحايد أو الثانوي لتثبيت تلك الدرجة بدلا من الافتراضي المشتق.

المدرجات الأربعة مكدسة فوق بطاقات عينات فاتحة وداكنة، كل بطاقة تحمل نسبة تباين WCAG الخاصة بهاsigned by Lollyvector SVGتحقق بنفسكGet the signed file25 paths~4.6k nodes60 groups57 KBالمدرجات الأربعة مكدسة فوق بطاقات عينات فاتحة وداكنة، كل بطاقة تحمل نسبة تباين WCAG الخاصة بهاsigned by Lollyvector SVGتحقق بنفسكGet the signed file25 paths~4.6k nodes60 groups57 KB

ابنِ نطاقك اللوني (مولّد التناغم)

في الجناح نفسه، تُنشئ ابنِ نطاقك اللوني ألوانًا مكمّلة مطابقة من لونك الأساسي. اختر تناغمًا - متكامل، متجاور، ثلاثي، رباعي أو متشابه (الذي يجلب عدد لهجات خاصًا به، من 2 إلى 5، وزاوية تدرّج لوني من 10° إلى 45°) - ويصل كل مرشح باسم مقروء يُولَّد تلقائيًا وزر + إضافة. إضافة أحدها تضع ذلك اللون في نطاقك اللوني فورًا، ضغطة واحدة لرمز واحد. "نطاقك اللوني، مطبَّقًا" يعرض المجموعة كاملة على رسومات حقيقية.

لهجات مولَّدة، لكل منها عيّنة واسم مولَّد تلقائيًا وقيمته السداسية عشرية وزر إضافةsigned by Lollyvector SVGتحقق بنفسكGet the signed file8 paths936 nodes14 groups15 KBلهجات مولَّدة، لكل منها عيّنة واسم مولَّد تلقائيًا وقيمته السداسية عشرية وزر إضافةsigned by Lollyvector SVGتحقق بنفسكGet the signed file8 paths936 nodes14 groups15 KB

اعتماد نطاق لوني مولَّد

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

استبدال النطاق اللوني على تلك البطاقة يعتمدها؛ إلغاء ينسحب دون تغيير أي شيء. بمجرد التنفيذ، تصبح البطاقة "تم استبدال النطاق اللوني." مع زر تراجع واحد مركَّز عليه بالفعل - وتُؤخذ نقطة استعادة لنظام التصميم كاملًا قبل الاستبدال، بحيث تكون "إعادته إلى ما كان عليه" استعادة لا فقدانًا لعصر بأكمله.

النطاق اللوني، والمخطط، وكل عيّنة

تسرد اللوحة اليمنى كل لون يحمله علامتك التجارية، مجمّعًا (أساسي، محايد، ثانوي، طيف، مخصص، أدوار)، وكل مجموعة قابلة للطي ولها زر + إضافة خاص بها. تحتها، تُفتح مخطط الألوان على عرضين للعيّنات نفسها: العجلة (عجلة OKLCH - اسحب نقطة لإعادة تلوينها، انقر نقطة لتحريرها أو انقر مساحة فارغة لإسقاط عيّنة جديدة) ومخطط النطاق اللوني، الذي يُظهر أين ينتهي النطاق القابل للعرض فعليًا. #/start?area=color&focus=chart يفتح البطاقة مباشرة، كما تفعل ?wheel دائمًا.

لوحة النطاق اللوني، كل مجموعة قابلة للطي، مع حبة التنزيل متمركزة عند حافتها السفليةsigned by Lollyvector SVGتحقق بنفسكGet the signed file155 paths~14k nodes199 groups1 image191 KBلوحة النطاق اللوني، كل مجموعة قابلة للطي، مع حبة التنزيل متمركزة عند حافتها السفليةsigned by Lollyvector SVGتحقق بنفسكGet the signed file155 paths~14k nodes199 groups1 image191 KB

عجلة OKLCH - الزاوية هي التدرّج اللوني، والمسافة للخارج هي الإشباع، والرماديات تسير على مسار سطوع على الجانبsigned by Lollyvector SVGتحقق بنفسكGet the signed file274 paths~3.7k nodes67 groups83 KBعجلة OKLCH - الزاوية هي التدرّج اللوني، والمسافة للخارج هي الإشباع، والرماديات تسير على مسار سطوع على الجانبsigned by Lollyvector SVGتحقق بنفسكGet the signed file274 paths~3.7k nodes67 groups83 KB

انقر أي عيّنة لفتح محررها:

أقفال الطباعة هذه هي ما تستخدمه المطبعة عند تصدير PDF أو TIFF بصيغة CMYK - انظر التصدير.

حذف عيّنة آمن: خطوات النطاق المشتقة وأدوار السمة تُخفى (يبقى الرمز الأساسي قابلًا للتحليل، فلا ينكسر شيء في المصب)، بينما الألوان التي أضفتها بنفسك تُزال تمامًا.

التدرّجات

لوحة التدرّجات الاختيارية تبني رموز مزج من نطاقك اللوني للخلفيات واللهجات. تخطَّها كليًا إن كانت علامتك التجارية لا تستخدم التدرّجات. كل تدرّج له معاينة، ونقاط مسمّاة (2-8) وزاوية. السلوك الأساسي: النقطة تشير إلى عيّنة، فإذا أعدت تلوين تلك العيّنة تبعها التدرّج. يجري الاستيفاء في OKLCH لمزج نظيف. احذف نقطة لتقصير المسار.

خذ النطاق اللوني إلى مكان آخر

الحبة العائمة المتمركزة عند الحافة السفلية للوحة النطاق اللوني تنزّل النطاق كاملًا كـرموز تصميم (JSON)، متغيرات CSS، فئات CSS، متغيرات SCSS، نطاق GIMP (.gpl) أو تبادل عيّنات أدوبي (.ase) - بحيث تنتقل العلامة التجارية مباشرة إلى Illustrator أو Figma أو GIMP أو ورقة أنماط. تقع خارج شريط تمرير اللوحة، فتحتفظ بمكانها مهما مرّرت النطاق اللوني. (يمكنك أيضًا تنزيل النطاق اللوني من عرض الكتالوج.)

الخط

The compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVGتحقق بنفسكGet the signed file74 paths~11k nodes99 groups234 KBThe compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVGتحقق بنفسكGet the signed file74 paths~11k nodes99 groups234 KB

تتصدّر الغرفة أربع بطاقات دور - الأوجه الأربعة التي يقرؤها التطبيق وأدواتك وكل تصدير فعليًا. تُظهر كل بطاقة ما يخدم ذلك الدور الآن، مضبوطًا بذلك الوجه، مع سطر من نص حقيقي تحته:

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

غرفة الخط - بطاقات الأدوار وعيّنة حيّة لكل وجه وهو يؤدي عملهsigned by Lollyvector SVGتحقق بنفسكGet the signed file59 paths~9.3k nodes73 groups196 KBغرفة الخط - بطاقات الأدوار وعيّنة حيّة لكل وجه وهو يؤدي عملهsigned by Lollyvector SVGتحقق بنفسكGet the signed file59 paths~9.3k nodes73 groups196 KB

مسرح المقارنة

يُفتح المسرح ضمن الغرفة نفسها، لا في نافذة حوارية، بحيث تبقى البطاقات التي أتيت منها على الشاشة. ابحث عن عائلة من Google Fonts (Inter، Fraunces، Space Grotesk...) أو أسقط ملف خط، اضغط إضافة إلى المقارنة وتقف المرشحات جنبًا إلى جنب بالكلمات نفسها قبل أن يُثبَّت أي منها. زر Escape يلغي ويعيد لوحة المفاتيح إلى البطاقة التي فتحته منها.

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

في كلتا الحالتين يبقى الوجه على هذا الجهاز، يُعرض في التطبيق، وفي أدواتك وفي كل تصدير، دون اتصال إلى الأبد وينتقل ضمن حزمة علامتك التجارية - لا شيء يُجلَب وقت العرض. كل ما على Google Fonts يُشحن بموجب ترخيص مفتوح (OFL/Apache/UFL).

لوحة أدوار الخط في الأسفل تُظهر عيّنة حيّة لكل دور - المحتوى والواجهة بالوجه الأساسي، ووجه عرض اختياري للعناوين العلوية، ومائل للتأكيد، وأحادي المسافة للكود والبيانات - بحيث ترى المجموعة كاملة تعمل معًا.

عيّنة أدوار الخط - العنوان والمحتوى والمائل والكود، كل منها بالوجه الذي يُحلّ إليه ذلك الدور، مع اسم الوجه بجانبهsigned by Lollyvector SVGتحقق بنفسكGet the signed file17 paths~5.6k nodes29 groups68 KBعيّنة أدوار الخط - العنوان والمحتوى والمائل والكود، كل منها بالوجه الذي يُحلّ إليه ذلك الدور، مع اسم الوجه بجانبهsigned by Lollyvector SVGتحقق بنفسكGet the signed file17 paths~5.6k nodes29 groups68 KB

الرموز

بقية نظام التصميم، قابلة للتحرير دون لمس الكود:

غرفة الرموز - منزلق نصف قطر الزوايا بالإضافة إلى المسافات والأحجام والظلال وبقية النظامsigned by Lollyvector SVGتحقق بنفسكGet the signed file73 paths~14k nodes95 groups1 image292 KBغرفة الرموز - منزلق نصف قطر الزوايا بالإضافة إلى المسافات والأحجام والظلال وبقية النظامsigned by Lollyvector SVGتحقق بنفسكGet the signed file73 paths~14k nodes95 groups1 image292 KB

الملفات

أسقط الملفات التي تحتفظ بها علامتك التجارية - بخلاف الشعارات - هنا: أصول متجهة، صور، صوت وحركة (فيديو، Lottie، متحركة). تصل إلى الكتالوج الخاص بك، مرتَّبة في أقسام وجاهزة في منتقي الأصول لكل أداة. يبقى كل شيء على هذا الجهاز. (الشريط الجانبي يسمّي الغرفة الملفات؛ مفتاح الرابط يبقى catalogue، لأن مفتاح اللوحة عقد دائم.)

أدخل علامة تجارية

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

اختر مصدر ملف التصميم وتكون المرحلة الثانية البطاقة أدناه: الصيغ المقبولة تتصدَّر كبلاطات أيقونات بترتيب الأفضلية، والبطاقة كاملة هدف إسقاط واحد - انقر في أي مكان عليها أو اسحب ملفًا إليها. يمكنك أيضًا إسقاط ملف مباشرة على الاستوديو.

بطاقة الاستيراد - الصيغ المقبولة تتصدَّر كبلاطات أيقونات، والبطاقة كاملة هدف إسقاط واحدsigned by Lollyvector SVGتحقق بنفسكGet the signed file19 paths~3.2k nodes35 groups2 images175 KBبطاقة الاستيراد - الصيغ المقبولة تتصدَّر كبلاطات أيقونات، والبطاقة كاملة هدف إسقاط واحدsigned by Lollyvector SVGتحقق بنفسكGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

ما يمنحك إياه كل ملف تصميم:

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

#/start?source=<kind> يفتح المنتقي على مصدر معيّن (file، pdf، image، font، url)، و?import يفتحه على القائمة العادية.

نقل علامة تجارية بين الأجهزة

تصدير أسفل الشريط الجانبي يكتب ملف LollyBrand-…zip واحدًا - رموزك وخطوطك وشعاراتك وتفضيل السمة، مع بيان سلامة يتحقق منه عند العودة. بجانبه، رموز (.json) يكتب مستند رموز التصميم العادي وحده: بلا خطوط ولا شعارات، الرموز فقط، وهو ما يقرؤه فعليًا مستودع أو خطوة CI أو أداة رموز أخرى.

إعادة أحدها هي إضافة من... ← رموز تصميم أو ملف تصميم (أعلاه)، أو سحب وإفلات على الاستوديو. هكذا يسلّمك زميل علامة تجارية، أو تحمل واحدة إلى تثبيت ثانٍ - بلا حساب، بلا سحابة. لإدخال علامة تجارية من سطر الأوامر بدلًا من ذلك، انظر ingest:brand.

الإصدارات

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

ثلاثة أشياء يجب معرفتها قبل الضغط على أي شيء، وتذكر اللوحة الثلاثة جميعها قبل الضغط لا بعده:

يمكنك نشر فقط، أو نشر وتفعيل - والفرق هو ما إذا كانت الأدوات والتطبيق ستتبع ذلك الإصدار من الآن فصاعدًا أو تستمر في متابعة أحدث تعديلاتك. متابعة الأحدث مجددًا تجعل كل تعديل مباشرًا لحظة إجرائه. #/start?area=versions يفتح اللوحة مباشرة.

عندما تكون العلامة ثابتة

بعض الإصدارات المبنية تُشحن بـعلامة مقفلة - ألوانها وخطوطها ورموزها هي ما تستخدمه كل أداة وكل تصدير، ولا شيء قابل للتغيير. في هذه الحالة يُستبدل الاستوديو بملاحظة قصيرة توضح أن هذا الإصدار يُشحن بعلامة ثابتة وأن التحرير معطّل. هذا مقصود: بهذه الطريقة تضمن المؤسسة بقاء كل شيء متوافقًا مع العلامة.

إلى أين تذهب بعد ذلك