كيفية إنشاء أزرار ثلاثية الأبعاد باستخدام Adobe Photoshop

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

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

الخطوة 1: قم بإعداد المستند الخاص بك

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

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

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

ارتفاع 900 × 300 بكسل
300 بكسل / بوصة
وضع ألوان RGB

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

الخطوة 2: قم بإعداد المستطيل الخاص بك للزر ثلاثي الأبعاد

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

لإنشاء الزر ثلاثي الأبعاد الخاص بك ، انقر فوق أداة Rounded Rectangle Tool على الجانب الأيسر من شاشتك ، يظهر هنا باللون الأحمر. يمكنك أيضًا استخدام الاختصار يو للوصول إليه.

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

بالنسبة لزرنا ، ذهبنا مع:

عرض 300 بكسل
75 بكسل

تأكدنا أيضًا من تقريب الزوايا بمقدار 10 بكسل. ليس مرتفعًا جدًا وليس منخفضًا جدًا أيضًا. ثم ضغطنا نعم .

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

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

لغرض هذا البرنامج التعليمي - ولتوضيح الشكل الذي قد يبدو عليه الزر 'لأعلى' و 'لأسفل' - سنجعل الزر 'لأسفل' باللون الأحمر.

الخطوة 3: اجعل الزر ثلاثي الأبعاد

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

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

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

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

بنية

أسلوب: شطبة داخلية
تقنية: إزميل ناعم
عمق: 605
اتجاه: فوق
مقاس: 5
تليين: 1

تظليل

زاوية: 90
ارتفاع: 37
وضع تسليط الضوء: لون دودج ، عتامة 55٪
وضعية الظل: متعددة ، عتامة 25٪

الحيلة هي جعل الإعدادات عالية بما يكفي بحيث يمكنك رؤية بعض الاختلاف ، ولكن ليست قوية لدرجة أنها ساحقة.

بعد أن انتهينا من Bevel & Emboss ، ذهبنا إلى محيط شكل وتشغيل ذلك أيضًا. يجعل Contour تعريف Bevel & Emboss أقوى قليلاً ، وفي هذا البرنامج التعليمي اخترنا الإعداد مخروط - مقلوب .

بعد ذلك ، قم بتشغيل تغطية بالتدرج اللوني . هذا هو ما يعطي الزر مظهرًا مستديرًا 'لامعًا' قليلاً. الإعدادات كالتالي:

وضع المزج: تراكب
العتامة: 90
أسلوب: خطي
زاوية: 90
مقياس: 100

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

كيف أجعل جهاز الكمبيوتر الخاص بي يقرأ النص بصوت عالٍ

بنية

وضع المزج: عديد
العتامة: 35
زاوية: 90
مسافة: 2
الانتشار: 6
مقاس: 8

جودة

محيط شكل: خطي
ضوضاء: 0
طبقة تقضي على الظل المسقط: تشغيل

حان الوقت الآن لحفظ هذه المواصفات كنمط طبقة.

الخطوة 4: احفظ كنمط طبقة

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

إليك الطريقة.

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

إذا كنت تستخدم Photoshop CC ، فسيتم حفظ هذا النمط الجديد في ملف مكتبات ، كما ترون أعلاه. إنه سريع جدًا وسهل الوصول إليه.

الخطوة 5: كيفية استخدام نمط الطبقة المحفوظة

الآن بعد أن صممت الزر الخاص بك وقمت بحفظه كنمط طبقة ، دعنا نراه في العمل لحالتك 'up'. لا كلمة كذبة ، هذا سيقطع وقت عملك إلى النصف.

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

التالي - بدلاً من النقر المزدوج على الطبقة نفسها لإحضار ملف أنماط الطبقة مربع الحوار - انقر نقرًا مزدوجًا فوق نمط الطبقة في ملف مكتبات لوجة.

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

الخطوة 6: إضافة نص إلى الزر الخاص بك

بعد ذلك ، سنقوم بإضافة نص إلى الزر.

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

في هذا البرنامج التعليمي ، سنكتب كلمة 'اشتراك' لأنها شيء تراه كثيرًا على مواقع الويب ومنصات التواصل الاجتماعي.

سنستخدم أيضًا خطًا آمنًا للويب من سان سيريف. يعود لك الاختيار النهائي الذي تستخدمه للزر الخاص بك. تعد كل من Montserrat و Proxima Nova و Arial و Verdana بدائل مستخدمة على نطاق واسع وآمنة على الويب.

بعد الانتهاء من ذلك ، لا يزال هناك عدد قليل من التغييرات الدقيقة التي تحتاج إلى إجرائها من أجل جعل هذا النص 'ينبثق'.

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

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

بنية

وضع المزج: تتضاعف
العتامة: 35
زاوية: 90
مسافة: 2
خنق: 4
مقاس: 1

جودة

محيط شكل: خطي
ضوضاء: 0

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

وضع المزج: احتراق الالوان
العتامة: 90
أسلوب: خطي
زاوية: 90
مقياس: 100

الخطوة 7: الانتهاء

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

مع اختتام ذلك ، يمكنك التبديل بسرعة ذهابًا وإيابًا في الرؤية بين طبقتين من الزر ، لترى كيف تبدو حالتي 'لأعلى' و 'لأسفل'.

رائع جدا ، أليس كذلك؟ لحفظ ملفك ، اذهب ملف> حفظ باسم ، واحفظه كتنسيق ملف مناسب لأي مشروع قد تعمل عليه.

قم بتخصيص مدونتك باستخدام الأزرار والأدوات ثلاثية الأبعاد

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

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

يشارك يشارك سقسقة بريد الالكتروني كيفية الوصول إلى مستوى الفقاعة المدمج من Google على Android

إذا احتجت في أي وقت إلى التأكد من أن شيئًا ما مستوي في السؤال ، يمكنك الآن الحصول على مستوى فقاعة على هاتفك في ثوانٍ.

اقرأ التالي مواضيع ذات صلة

خلاق
أدوبي فوتوشوب
نصائح لتحرير الصور
دروس فوتوشوب

نبذة عن الكاتب شيان ايدلماير(تم نشر 136 مقالاً)

شيان حاصلة على درجة البكالوريوس في التصميم وخلفية في البث الصوتي. تعمل الآن كاتبة أولى ورسالة ثنائية الأبعاد. إنها تغطي التكنولوجيا الإبداعية والترفيه والإنتاجية لـ MakeUseOf.

المزيد من Shianne Edelmayer

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك