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

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

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

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

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

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

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

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

لإنشاء زر ثلاثي الأبعاد ، ستحتاج إلى مستند أفقي. بالنسبة لنا ، استخدمنا:
900 × 300 بكسل
300 بكسل / بوصة
وضع لون RGB
على الرغم من أن هذه المواصفات ليست بالتأكيد قاعدة صارمة وسريعة ، فإن هذا سيضمن أن لديك مساحة كافية للعمل بها ، والقدرة على تكبير حجم الزر لأعلى ولأسفل حسب الحاجة.

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

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

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

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

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

عرض 300 بكسل
ارتفاع 75 بكسل
لقد حرصنا أيضًا على تقريب الزوايا بمقدار 10 بكسل. ليست عالية جدا ، وليس منخفضة جدا ، إما. ثم ضغطنا  حسنا .

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

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

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

الخطوة 3: جعل زر 3D الخاص بك

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

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

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

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

بناء

نمط: الداخلية شطبة
تقنية: إزميل لينة
العمق: 605
الاتجاه: أعلى
الحجم: 5
تليين: 1
تظليل

الزاوية: 90
الارتفاع: 37
تسليط الضوء على الوضع: لون دودج ، 55 ٪ التعتيم
وضع الظل: متعددة ، 25 ٪ التعتيم
الحيلة هي جعل الإعدادات عالية بما يكفي بحيث يمكنك رؤية بعض الاختلافات ، ولكنها ليست قوية لدرجة أنها غامرة.

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

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

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

أخيرًا ، قمنا بتشغيل  Drop Shadow ، لجعل الزر يبدو قليلاً "مرفوعًا" من الخلفية البيضاء لموقع ويب أو مدونة. مرة أخرى ، إليك الإعدادات:

بناء

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

كفاف: الخطي
الضوضاء: 0
طبقة تقرع خارج إسقاط الظل: في
حان الوقت الآن لحفظ هذه المواصفات كنمط طبقة.

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

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

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

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

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

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

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

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

بعد ذلك - بدلاً من النقر المزدوج فوق الطبقة نفسها لإظهار  مربع الحوار Layer Styles - انقر نقرًا مزدوجًا على نمط الطبقة في  لوحة Libraries .

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

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

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

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

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

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

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

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

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

بناء

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

كفاف: الخطي
الضوضاء: 0

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

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

الخطوة 7: الانتهاء من الأعلى

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

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

تخصيص بلوق الخاص بك مع أزرار 3D والحاجيات

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

تعرف ايضا على :-

كيفية تسليط الضوء على اللون مع فوتوشوب Photoshop

كيفية امالة صورة مع فوتوشوب Photoshop

كيفية التعامل مع فوتوشوب Photoshop

كيفية دمج صورتين مع فوتوشوب

كيفية انشاء لوحة الوان مخصصة في Adobe Photoshop