Tumblr عبارة عن نظام تدوين مصغر يسمح للمستخدمين بسهولة نشر مقتطفات من المعلومات على الويب ، مثل مجموعة الصور الفوتوغرافية أو الصور الفوتوغرافية أو الفيديو أو الاقتباس أو مجرد فقرة.

وغالبًا ما يتم استخدامه كمفكرة عبر الإنترنت بسبب سهولة استخدامه مقارنة بمنصات التدوين الأخرى مثل WordPress.

وهناك الكثير من المواضيع Tumblr هناك ، على حد سواء مجانا ومتميزة ، ولكن هل سبق لك أن تساءلت عن كيفية الذهاب عن تصميم بنفسك؟

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

ما نحن في طريقنا لتصميم

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

الخطوة 1

الخطوة الأولى ، كما ينبغي أن تكون مع كل ما تقوم بتصميمه ، هي مرحلة الرسم. باستخدام لوح رسوم Wacom Bamboo والرسومات الفارغة في Photoshop ، رسمت التصميم التالي ، مع بعض العناصر الكبيرة ، فقط لأحصل على أفكاري على ورق (رقمي).

الخطوة 2

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

الخطوه 3

المرحلة التالية هي وضع بعض الأدلة على اللوحة. سيساعدك ذلك في الحفاظ على بنية المظهر الأنيق أثناء تصميمه. أريد أن يكون الشريط الجانبي الأيسر 200 بكسل ، وأن تكون مساحة المحتوى الرئيسية 600 بكسل وأن يكون الشريط الجانبي الأيسر 160 بكسل ، مما يتيح لنا عرض 960 بكسل.

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

وضعت أيضا أدلة 200 بكسل تحت الجزء العلوي من قماش و 200 بكسل فوق الجزء السفلي من اللوحة. هذه هي الطريقة التي يبدو بها المستند حاليًا:

الخطوة 4

دعونا الآن إضافة بعض نمط لخلفيتنا. انتقل إلى File → New ، وأنشئ مستندًا جديدًا بحجم 8 × 8 بكسل. ارسم بعض الخطوط الرأسية بعرض 2 بكسل. يجب أن تكون لوحة رسوماتك الآن 2 بكسل أسود ، 2 بكسل أبيض ، 2 بكسل أسود ، 2 بكسل أبيض. انتقل إلى Edit → Define Pattern. احفظ النمط كـ "Vertical Lines 2px."

في المستند الأصلي ، انتقل إلى Layer → New Fill Layer → Pattern. حدد النمط الذي أنشأته للتو ، وانقر فوق OK. أسقط عتامة الطبقة حتى تبدو كالتالي:

قم بدمج النمط مع طبقة الخلفية الخاصة بك ، ويقوم بتنقيطها تلقائيًا في العملية. اذهب إلى Filter ← Noise ← Add Noise. غيّر القيمة إلى 5٪ وانقر فوق موافق. سيضيف هذا بعض الملمس الدقيق إلى الخلفية:

قم بإنشاء طبقة جديدة ، واملأها باللون الأبيض. ضعه أسفل طبقة الخلفية الأصلية. قم بخفض عتامة نمط الطبقة المحكم الخاصة بك إلى حوالي 40٪ ، ثم قم بدمجها مع طبقة الخلفية من خلال الانتقال إلى Layer → Merge Layers.

الخطوة 5

حدد أداة Rectangle ، ورسم شكل عرضه 200 بكسل.

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

ضع الشكل في منطقة الشريط الجانبي الأيسر والتي قمنا بتمييزها باستخدام أدلةنا.

أنشئ مجموعة مختارة من الجزء العلوي من الشكل ، وانتقل إلى Edit → Free Transform. تمديد الشكل بحيث يتراكب مع السطر العلوي من اللوحة.

الخطوة 6

حدد أداة Ellipse Shape ، وأمسك مفتاح Shift للحفاظ عليه دائريًا ، ارسم دائرة ، مملوءة باللون الأبيض. ضعه في أعلى الشريط الجانبي ، وأعد تسمية الطبقة إلى "Portrait".

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

حدد صورة لنفسك (أو أيا كان موقع الويب الخاص بك) وقم بنسخها. عد إلى Photoshop ، ومع استمرار اختيار الدائرة ، انتقل إلى Edit → Paste Into. سيؤدي هذا إلى لصق الكائن في تحديد دائرة الخاص بك.

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

الخطوة 7

حدد أداة الكتابة ، وقم بإنشاء مربع نص في منطقة الرأس. لقد أعطيت موضوعي اسمًا عشوائيًا تمامًا: "Kabooom". استخدمت خطًا باسم Reklame Script. يمكنك تنزيل عرض توضيحي للخط أو شرائه مقابل 30 دولارًا من MyFonts .

انقر بزر الماوس الأيمن على طبقة الكتابة الخاصة بك ، واختر "Blending Options". قم بتطبيق تراكب الألوان على النص. لقد استخدمت رمادي فاتح أكثر قتامة من الخلفية ، مع الرمز السداسي # D6D6D6.

تطبيق ظل داخلي على النوع ، باستخدام عتامة 10٪ ، ومسافة 2 بكسل وحجم 1 بكسل. اترك كل شيء آخر عند 0. سيؤدي ذلك إلى جعل النوع يبدو وكأنه محفورًا في الخلفية.

لإكمال التأثير المحفور ، سنقوم بإضافة ظل مسقط إلى النوع ، باستخدام اللون الأبيض مع وضع المزج العادي. امنح الظل مسافة 2 بكسل وحجمه 1 بيكسل. ستجعل هذه الإعدادات الظلال تظهر كتمييز في الجزء السفلي من الكتابة ، مما يؤدي إلى إضافة مزيد من العمق إلى النوع وتعزيز الظل الداخلي.

الخطوة 8

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

حدد عنوان الفئة ، وقم بتغيير الخط إلى واحد من اختيارك. اعتدت Minion برو. تجربة مع الخطوط الفرعية (غامق ، مائل ، الخ) وأحجام نقطة.

تغيير الخط للفئات ("الأخبار" ، "أيام الخروج" ، "التصوير الفوتوغرافي" ، إلخ.) لقد استخدمت Myriad Pro. قم بتخفيض حجم النقطة من النوع ، واضبط المسافة بين السطور (أي المسافة بين أسطر النص) ، بحيث يكون السطر العلوي أقل من المكان الافتراضي.

انسخ العنوان الأول والروابط ولصقها أدناه في نفس مربع النص. تغيير العنوان والفئات. لقد استخدمت عناوين "مشروعاتي" و "أصدقائي". استخدم كل ما يتعلق بموقعك على الويب بالطبع.

الخطوة 9

سنجعل الآن النص في الشريط الجانبي الأيمن أكثر جاذبية. حدد النص الخاص بالفئات الفرعية (أي ليس العناوين) ، وقم بتغيير اللون من الأسود إلى الرمادي الداكن. لقد استخدمت # 333333. انقر فوق موافق.

انقر بزر الماوس الأيمن على طبقة الكتابة ، واختر "Blending options" (خيارات المزج). قم بتطبيق ظل مسقط أبيض مع وضع المزج العادي. غيّر الزاوية إلى 120 درجة والمسافة والحجم إلى 1 بكسل. اترك كل شيء آخر مضبوطًا على 0 بكسل. سيضيف هذا تسليط الضوء على الجزء السفلي من النص ، تمامًا كما فعلنا مع العنوان.

الخطوة 10

حدد أداة الخط ، وأثناء الضغط على مفتاح Shift لإبقائها مستقيمة ، ارسم خطًا تحت عنوان "الفئات".

انقر بزر الماوس الأيمن على طبقة الخط ، وحدد "Blending options". تطبيق ظل قطرة بيضاء مع وضع مزج عادي. اضبط الزاوية على 90 درجة والمسافة إلى 1 بكسل. ضبط كل شيء آخر على 0 بكسل.

قم بتكرار طبقة الخط ، ضعها أسفل كل عنوان من العناوين.

الخطوة 11

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

الخطوة 12

اسحب أداة Rectangle Shape ، وارسم مستطيلاً مماثلاً لما هو موجود أدناه. اجعل المستطيل بعرض 570 بكسل بالضبط. سيسمح ذلك بوجود فجوة بمقدار 10 بكسل بين الشريط الجانبي الأيسر وحافة المستطيل الجديد وفجوة تبلغ 20 بكسل بين الشريط الجانبي الأيمن وحافة المستطيل الجديد ، كما هو موضح في لقطة الشاشة المشروحة أدناه:

الخطوة 13

أعد تحديد أداة Rectangle Shape وأنشئ مستطيلاً رماديًا أصغر بكثير ، مثل المستطيل أدناه. ضعه في أعلى يمين المستطيل الكبير ، إزاحة من المستطيل الكبير بمقدار 10 بكسل. ضع الشكل 30 بكسل بعيدًا عن الجزء العلوي من المستطيل.

الخطوة 14

قم بتكرار طبقة الكتابة في الشريط الجانبي الأيمن ، وباستخدام تركيبة مفتاح Shift ومفتاح المؤشر ، قم بإزاحة طبقة الكتابة المكررة فوق منطقة المحتوى الرئيسية. افعل نفس الشيء مع طبقتين الخط لعنوان "الفئات".

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

الخطوة 15

انتقل إلى File → Place ، وحدد موقع الصورة الفوتوغرافية في المستند كعنصر نائب. يعد استخدام الصور الحقيقية هنا دائمًا أفضل لأنها تجعل النموذج يبدو أكثر واقعية وجاذبية. اعتدت صورة أختي .

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

الخطوة 16

افتح خيارات المزج للمستطيل الأسود الكبير. تطبيق تراكب لون أبيض وقطرة مسقط مع عتامة 10٪ وحجم 3 بكسل.

الخطوة 17

حدد أداة Rectangle Shape مرة أخرى ، وارسم شكلًا طويلاً أسفل شكل خلفية الصورة البيضاء. تأكد من أنه نفس العرض. املأها بلون رمادي فاتح.

افتح خيارات Blending للمستطيل الرمادي الجديد ، وقم بتطبيق ظل مسقط. اضبط اللون على الأبيض ، مع وضع المزج العادي ، وعتامة إلى 100٪ والمسافة إلى 1 بكسل. اترك كل شيء آخر مضبوطًا على 0 بكسل.

أيضًا ، ضع ظلًا داخليًا ، باستخدام اللون الأسود ، مع عتامة 10٪. تغيير الحجم إلى 13 بكسل ، وترك كل شيء آخر مضبوطًا على 0 بكسل. ستجعل أنماط الطبقة الثانية هذه الشكل الجديد يبدو وكأنه محفوراً في الخلفية ، مثل طباعتنا:

الخطوة 18

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

بمجرد تثبيت الأنماط في Photoshop (عن طريق فتح كل صورة وتحديدها كنمط) ، حدد الشريط الجانبي في مستند Photoshop. انتقل إلى طبقة → نمط تعبئة جديد ← نمط. حدد أحد زخارف الخشب (اخترت الإصدار المتوسط) ، وانقر فوق موافق. بتحديد الشريط الجانبي أولاً ، يجب أن يملأ النموذج هذه المنطقة فقط.

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

غيّر عتامة تراكب الانحدار إلى 10٪ وأعطها زاوية 0 درجة. سيضيف هذا ظلالًا خفية إلى الشريط الجانبي ، مما يجعلها تبدو أكثر واقعية وأقل ثباتًا.

أيضا ، تطبيق الظل المسقط على الشريط الجانبي. خفض الشفافية إلى 30٪ وتغيير الزاوية إلى 180 درجة. تغيير المسافة إلى 1 بكسل والحجم إلى 5 بكسل ، وترك كل شيء آخر تعيينه إلى 0 بكسل. هذا سيضيف الظل صغير ودقيق إلى الشريط الجانبي.

الخطوة 19

افتح "خيارات المزج" لعنصر الدائرة الذي أنشأناه بالقرب من بداية هذا البرنامج التعليمي. تطبيق ظل قطرة بيضاء باستخدام الإعدادات أدناه:

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

الخطوة 20

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

افتح "خيارات المزج" لطبقة الكتابة الجديدة ، وقم بتغيير إعدادات drop-shadow إلى:

أضف بعض النص إلى قسم "نبذة عني" ، باستخدام نفس الخط والحجم اللذين استخدمناهما في نص الشريط الجانبي الأيمن. افتح "خيارات المزج" لهذا النص الجديد ، وانقر فوق علامة التبويب "توهج خارجي" لتطبيق وهج خارجي ؛ قم بتغيير العتامة إلى 30٪ ، اللون إلى الأبيض والحجم إلى 18 بكسل.

هذا سيجعل النص أكثر قابلية للقراءة على خلفية خشبية.

العب حول حجم الخط لجعل النص أسهل في المسح.

الخطوة 21

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

هذا ما يبدو عليه تصميمي حتى الآن:

الخطوة 22

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

باستخدام تركيبة مفتاح Shift و Cursor ، قم بتحريك المحتوى الخاص بك ، مما يجعل الثغرات 40 بكسل بدلاً من 10. وهذا سيجعل التصميم أكثر سهولة وجاذبية.

الخطوة 23

وقررت أيضًا تغيير نمط رأس الموضوع.

قم بتغيير اللون (باستخدام تراكب لون في نافذة "خيارات Blending") إلى واحد محدد من صورة الدائرة. اخترت اللون الأخضر الغامق.

أزلت أيضًا الظل الداخلي وغيرت إعدادات ظل الظل ، مما جعلها تبدو وكأنها رأس يجلس فوق الخلفية بدلاً من وضعها في داخلها.

الخطوة 24

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

انتقل إلى Layer → New Fill Layer → Pattern ، وحدد نفس الملمس الذي استخدمته للشريط الجانبي.

انقر بزر الماوس الأيمن على طبقة تعبئة النمط ، وحدد خيار "طبقة Rasterize". باستخدام أدوات Dodge and Burn ، أضف الإبرازات إلى اليسار وأعلى الشكل والظلال إلى يمين وأسفل الشكل.

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

حدد أداة Polygonal Lasso. حدد شكلًا مشابهًا للشكل الوارد أدناه ، واملأه باللون البني الداكن ، المحدد من نسيجك.

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

الخطوة 25

انتزاع الخاصة بنا مجموعة الرموز الحصرية يسمى "انعكاس". سوف نستخدم العديد من هذه الرموز في تصميمنا.

أدرج الرموز التي تحتاجها في المستند بالانتقال إلى File → Place. اخترت الكاميرا والقلب وإعادة تحميل وتحرير وإيقونات على مدار الساعة ، والتي ستكون بمثابة صورتي ، مثل ، تدوين الملاحظات والملاحظات والرموز الزمنية في الموضوع.

الخطوة 26

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

أضف بعض الطباعة إلى شريط نوع المشاركة. استخدمت نفس Reklame Script التي استخدمناها في العنوان ونفس خيارات المزج التي استخدمناها لعناوين الشريط الجانبي الأيسر.

الخطوة 27

حدد طبقات الرمز الأربعة الأخرى. انقر بزر الماوس الأيمن واختر "Rasterize layers" لتحويلها من كائنات ذكية إلى كائنات بكسل.

استخدم أداة Rectangular Marquee لتحديد كل انعكاسات الرمز.

اضغط مفتاح Delete على كل طبقة من الأيقونات لإزالة انعكاسها.

الخطوة 28

أعد تحديد كل طبقات الرموز الأربعة. انتقل إلى Edit (تحرير) ← Free Transform (تحويل مجاني) ، مع الاستمرار في الضغط على مفتاح Shift للحفاظ على الرموز بشكل متناسب وتقليل حجمها ووضعها على الشريط أسفل منطقة المحتوى الرئيسية التي أنشأناها مسبقًا.

الفضاء خارج الرموز بالتساوي باستخدام مفاتيح المؤشر.

الخطوة 29

انقر بزر الماوس الأيمن على طبقة رمز القلب ، وحدد "Blending options" من القائمة. تغيير اللون إلى اللون الرمادي الفاتح باستخدام تراكب الألوان ، وتطبيق ظل داخلي باستخدام الإعدادات التالية:

الآن تطبيق الظل المسقط ، باستخدام هذه الإعدادات:

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

الخطوة 30

حدد أداة الكتابة ، وقم بإنشاء مربع نص صغير بجانب رمز القلب. اكتب "مثل هذه المشاركة." تطبيق الظل الداخلي والظل المسقط باستخدام إعدادات مشابهة لتلك التي كنا نستخدمها خلال هذا البرنامج التعليمي.

كرر الخطوة السابقة للرموز المتبقية ، باستخدام العبارات التالية: "Reblog this post،" “1052 notes” and “Posted on 19/03/2011.” تأكد من نسخ ولصق نفس نمط الطبقة على كل طبقة كتابة.

قد ترغب أيضًا في إعادة وضع بعض الرموز مع النص الجديد ، مع التأكد من أن الفجوة بين النص والرموز متناسقة ؛ بسبب أطوال النص المختلفة ، قد يكون هذا قد تغير.

الخطوة 31

تكرار كل الطبقات في منطقة المحتوى الرئيسية ، ووضعها أسفل النص الأصلي. تغيير العنوان والصورة ونوع ما بعد المستطيل. كما ذكرنا ، كلما كان النموذج أكثر واقعية ، كان ذلك أفضل.

الخطوة 32

قم بتكرار العنوان والنص في الشريط الجانبي ، وأدخل بعض الرموز. لقد استخدمت الرموز الاجتماعية الممتازة المعروفة باسم Buddycons ، مجموعة أخرى حصرية لمخزن Webdesigner.

المنتج النهائي

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


تم وضع هذا البرنامج التعليمي بشكل حصري من أجل Webdesigner Depot بواسطة Callum Chapman ، مصمم واجهة المستخدم لحسابهم الخاص التداول تحت الاسم إبداعية سيركل بوكس . Callum تعمل أيضا على معرض الإلهام مشروع يسمى Vinspires.

هل ترغب في مشاهدة برنامج تعليمي آخر حول كيفية تقسيم هذا الرمز وترميزه إلى سمة Tumblr كاملة العمل؟