كيفية عمل سمات Tumblr مع تصميم PSD

يجمع Tumblr بين التركيز على الإبداع المرئي وطول المنشور الذي يقع بين إيجاز Twitter والطول المفتوح لإدخال المدونة التقليدي. عندما تستخدم سمة Tumblr مخصصة تعمل على توسيع مظهر هويتك داخل وخارج الإنترنت ، فإن tumblelog يتناسب مع إستراتيجية تتضمن وسائل التواصل الاجتماعي الأخرى عبر الإنترنت. غالبًا ما يبدأ مصممو الويب في تطوير سمات مخصصة في Adobe Photoshop ، باستخدام تنسيق ملف PSD ذي طبقات البرنامج كمساحة عمل مرئية.

تحديد الأبعاد

تعمل أدلة مسطرة وإمكانيات الطبقات في Adobe Photoshop على تبسيط مهمة إنشاء أساس سمة Tumblr ، كاملة مع شبكة تخطيط تحدد أبعاد مناطق المحتوى. إذا قمت بإعداد مجموعات طبقات لكل جانب من جوانب تصميمك ، بما في ذلك منطقة المحتوى الرئيسية والشريط الجانبي ، يمكنك وضع جميع الأدلة لكل عنصر في طبقة واحدة داخل كل مجموعة. يمكّنك هذا الترتيب من جعل أدلةك مرئية بشكل انتقائي ، بدلاً من مجرد إظهارها وإخفائها جميعًا باستخدام اختصار لوحة مفاتيح Photoshop أو عنصر قائمة ، والاحتفاظ بعناصر الدليل ذات الصلة معًا. قم بتسمية مجموعاتك وطبقاتك لتحديد وظيفة كل جزء من تصميمك. اللحظات التي تستثمرها في مهام التسمية المتزايدة تؤتي ثمارها في الوقت الذي لا تحتاج إلى إنفاقه في تشغيل وإيقاف الطبقات لتحديد ما تحتويه. للعثور على أبعاد أي عنصر تخطيط بسرعة ، اضغط على "F8" لفتح لوحة المعلومات ، ثم انقر فوق "Ctrl-click" على مصغر لوحة Layers لتحميل تحديد بناءً على وحدات البكسل الموجودة في تلك الطبقة.

اختيار الألوان

سواء كنت تستخدم Color Picker الذي تم اختباره للوقت لتحديد تدرجات لسمك ، أو تحميل خيارات من مكتبة ألوان لمطابقة قطعة أو شعار مطبوع ، أو تعتمد على أداة Eyedropper لأخذ عينات من الظلال من ملف أو رسم آخر ، فإن Adobe Photoshop يقدم مجموعة واسعة مجموعة من الطرق لتحديد ألوان النسق. عندما تقوم بتعبئة طبقة بلون خالص لمحاكاة لون الخلفية لسمة Tumblr أو عناصر أخرى من التصميم الخاص بك ، يمكنك نسخ صيغة اللون كنص من قراءات Color Picker السداسية ولصق تعريف اللون في اسم الطبقة كمرجع سريع. تظهر الأحرف الأبجدية الرقمية الستة باللون السداسي في رمز Tumblr وكذلك في تصميمات الويب للمدونات والتنسيقات الأخرى عبر الإنترنت.

خلق الرسومات

يمكن أن يستخدم الرأس الذي يحدد tumblelog رسمًا نقطيًا كرسم موضوعي. يمكنك إنشاء هذا العنصر الهام باستخدام مجموعة من العناصر النصية والعناصر المستندة إلى البكسل أو المتجهات داخل ملف PSD الخاص بك. إذا كان الرسم يتضمن عناصر قابلة للتخصيص قمت بتنضيدها في Photoshop ، فاتركها كنوع مباشر في ملف النسق المستند إلى PSD وقم بتنقيطها فقط في نسخ من الملف الذي توفره لأشخاص آخرين ليس لديهم ترخيص لملفات الخطوط المطلوبة في موضوعك. عندما تستخدم أدوات المتجه للرسم في Photoshop ، بما في ذلك أدوات القلم والشكل ، ارسم باستخدام قواعد إرشادية تتماشى مع الدقة الأساسية لملف القالب. تساعد هذه التقنية في الحفاظ على عملك الفني حادًا قدر الإمكان عند حفظ أو تصدير النسخ النقطية منه.

الخطوات التالية

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

معلومات الإصدار

تنطبق المعلومات الواردة في هذه المقالة على Adobe Photoshop CC و Adobe Photoshop CS6. قد يختلف قليلاً أو بشكل كبير مع الإصدارات أو المنتجات الأخرى.