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

وها هو نفس الزر اللامع الذي سنحصل عليه في النهاية:

الآن افتح Photoshop واستعد للانطلاق!

زر جميل للموقع

قم بإنشاء مستند جديد بحجم 800 × 500 بكسل.

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

حسنًا، الفصل الأول مخصص لأولئك الذين يريدون تعلم شيء جديد.

الفصل 1. إنشاء شكل زر باستخدام أداة القلم

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

1. كفى ثرثرة. هيا بنا نبدأ. خذ أداة القلم وأنشئ شكلاً مثل هذا:

2. تبين أن شكل الزر الخاص بنا ملتوي وتقريبي للغاية. الآن سوف نتطرق إلى موضوع مهم للغاية - العمل مع الأدلة. تساعد الأدلة بشكل كبير في عمل المصمم. أنها مريحة لقياس المسافات. الآن سوف تفهم كل شيء بنفسك. في البداية، من الأفضل ملء الخلفية بلون آخر غير الأبيض. فليكن باللون الرمادي (#d9d9d9). خذ أداة Paint Bucket Tool وانتقل إلى طبقة الخلفية، ثم املأها باللون المحدد:

3. حسنًا، لنقم الآن بتعيين الأدلة ثم محاذاة شكل الزر معها. لتعيين دليل، انتقل إلى القائمة عرض -> دليل جديد. حدد مربع الاختيار Vertical وأدخل قيمة 200 بكسل:

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

5. قم بتعيين دليل آخر على Vertical 600px:

6. ستحتاج إلى 4 أدلة إضافية في المواضع الرأسية 160 و640 بكسل، وكذلك الأفقي 150 و350 بكسل. يجب أن يبدو مثل هذا:

7. حان الوقت لتسوية الشكل. للقيام بذلك، استخدم أداة التحديد المباشر:

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

لذا، يجب أن تحصل على شيء كهذا لزر جميل في المستقبل:

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

الفصل 2. تشكيل زر باستخدام وسائل بسيطة.

8. كما وعدتك، سأخبرك الآن بكيفية صنع شكل زر في 20 ثانية حرفيًا. حدد أداة المستطيل المدور:

اضبط نصف القطر المائل على 90 بكسل:

هذا كل شيء، النموذج جاهز :)

الفصل 3. زر لامع

9. الآن نصل إلى إنشاء تأثيرات الزر. لا يهم كيف صنعت قاعدة الزر (النموذج)، المبدأ هو نفسه. لنبدأ بإضافة بعض النص إلى الزر. أنشئ طبقة جديدة (Shift+Ctrl+N) واكتب أي نص:

اجعل النص أغمق من لون الزر نفسه. بالمناسبة، بالنسبة للشكل، استخدمت اللون #3e7bab، للزر #183e5b.

10. قم بعمل نسخة من طبقة الشكل (Ctrl+J). قم بتغيير اللون إلى اللون الأبيض، ثم اضغط على Ctrl+T (Free Warp)، وقم بتصغير الشكل كما يلي:

11. قم بتخفيض عتامة الطبقة إلى 35%:

كما خمنت على الأرجح، فقد أنشأنا للتو ميزة مميزة لزرنا الجميل.

12. قم بإنشاء قناع طبقة للإبراز:

13. الآن خذ فرشاة سوداء ناعمة بحجم 400 بكسل:

استخدمي هذه الفرشاة لتمرير الجزء السفلي من الهايلايت. يجب أن تبدو هذه:

14. قم بإنشاء نسخة من الإبراز، وعلى قناع الطبقة، "امسح" بفرشاة سوداء المساحة بأكملها داخل الإبراز، مع ترك الجزء العلوي فقط. وضع المزج Soft Light (ضوء ناعم)، واضبط العتامة على 100%:

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

16. قم بإنشاء قناع لهذه الطبقة ومسح حواف الشريط:

17. قم بتكرار الطبقة مع الشريط وقم بتطبيق Filter (Filter) -> Blur (Blur) -> Gaussian Blur (Gaussian)، بنصف قطر 4.6 بكسل:

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

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

19. نفعل الشيء نفسه بالنسبة لمخطط الشكل. اضغط على Ctrl + انقر على المخطط الرئيسي للزر، ثم Ctrl + Shift + I لعكس التحديد، واضغط على حذف على كلتا الطبقتين مع الشريط. الآن يجب أن يبدو الزر هكذا:

20. الآن يمكن دمج الطبقات ذات الخطوط (Ctrl+E) وضبط العتامة على 80% لإعطاء تسليط الضوء الطبيعي.

21. نواصل العمل بالوهج والضوء. أنشئ طبقة جديدة واستخدم فرشاة بيضاء ناعمة لرسم نقطة مثل هذه:

22. العملية المألوفة الآن هي تحديد الخطوط العريضة للزر (Ctrl + النقر على شكل الزر في لوحة الطبقات)، ثم عكس Shift + Ctrl + I وDelete. وضع المزج: ضوء ناعم، درجة العتامة 70%:

23. انسخ طبقة النص، وضعها أسفل الطبقة الرئيسية، واضبط اللون أفتح قليلاً من الزر (لدي #79afdb) وحرك هذه الطبقة بمقدار 1 بكسل لأسفل. نحصل على تأثير النقش:

24. باستخدام أداة القلم، قم بإنشاء بعض الإبرازات على جانبي الزر وقلل التعتيم إلى 10-20%:

25. بدا لي هذا الزر طويلًا جدًا، لذلك قمت بتحديد جميع الطبقات باستثناء النص، وضغطت على Ctrl+T وقمت بتقليل ارتفاع الزر:

26. يمكنك إضافة تسليط الضوء صغير آخر في الأسفل. أنت تعرف بالفعل كيفية القيام بذلك. الآن يبدو الزر هكذا:

27. لقد انتهينا تقريبًا. يبقى لإضافة بعض التأثيرات. دعونا نجعل التفكير. انسخ جميع الطبقات (حددها واضغط على Ctrl+J). انقر بزر الماوس الأيمن على أي من الطبقات المنسوخة وحدد تحويل إلى كائن ذكي. بعد ذلك، انتقل إلى تحرير -> تحويل -> انعكاس عمودي. خفض التعتيم إلى 52٪:

استخدم الآن قناع الطبقة لمسح الجزء السفلي من الانعكاس:

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

29. قم بتطبيق تمويه Gaussian بنصف قطر 8 بكسل، وعتامة الطبقة 46 بكسل. اضبط الظل حتى تصبح سعيدًا به:

30. في الواقع، هذا كل شيء، الزر الاحترافي اللامع جاهز. يمكنك الآن إزالة الخلفية وتغيير الحجم إلى ما تحتاجه على الموقع (الصورة -> حجم الصورة) واستخدامها لإسعاد نفسك والمستخدمين.

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

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

إنشاء مستند جديد. الحجم ليس مهمًا جدًا هنا، الشيء الرئيسي هو أنه يناسب ثلاثة خيارات لزرنا.

قم الآن بإنشاء مجموعة طبقات من خلال النقر على أيقونة المجلد في لوحة الطبقات وقم بتسميتها زر(مثل الزر).

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

انقر في أي مكان في المستند لإنشاء الأساس للزر.

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

هذا ما كان يجب أن تحصل عليه:

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

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

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

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

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

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

وبذلك تكون قد اكتملت المرحلة الأولى. لقد أنشأنا ثلاثة خيارات للأزرار ونحن على استعداد للانتقال إلى الحفظ المناسب.

حفظ الصورة

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

انقر السيطرة + Cلنسخ الصورة وإنشاء مستند جديد:

يرجى ملاحظة أنه تم إنشاء المستند بأبعاد تتضمن جميع الأجزاء المرئية من الصورة المنسوخة. بعد إنشاء الصورة، انقر فوق السيطرة+Vلإدراج الأزرار لدينا. اجعل طبقة الخلفية غير مرئية وانطلق حفظ للويب. احفظ الملف بالاسم Buttons.png.

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

تخطيط الزر باستخدام أنماط CSS

افتح لغة البرمجة-ملف. أولاً، لنقم بإنشاء رابط:

اضغط علي!

إليك ما يحدث:

A (display: block; /*اطلب من المتصفح عرض الرابط كعنصر كتلة*/ width:202px; /*تحديد عرض الكتلة*/ height:47px; /*تحديد ارتفاع الكتلة*/ text -indent: -9999px; /*مسافة بادئة للسطر الأول*/ موقف الخلفية: الجزء العلوي الأيسر /*محاذاة الخلفية إلى الزاوية اليسرى (X) العلوية (Y)*/ تكرار الخلفية: عدم التكرار /* لا "تضاعف" الصورة*/ الخلفية: url(buttons.png); /*Sprite*/ )

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

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

لقد أنشأنا زرًا بارتفاع 45 بكسل. بعد تطبيق النمط سكتة دماغيةوفقًا للمعلمات، أضفنا 1 بكسل على كل جانب من الزر. في المجمل، اتضح أن ارتفاع الزر أصبح 47 بكسل. إذا أخذنا في الاعتبار أن إزاحة الخلفية الأولية هي 0، فعندما نحرك الماوس فوق الزر، نحتاج إلى تحريك الخلفية بمقدار 47 بكسل لأعلى، أي. استبدال في القيمة ي، وهو المسؤول عن الإزاحة الرأسية للمعلمة موقف الخلفية-47 بكسل. الأمر نفسه ينطبق على النقر على الزر، فقط نحركه ليس بمقدار 47 بكسل، ولكن بمقدار 47 بكسل + 47 بكسل = 94 بكسل.

A:تحويم (موضع الخلفية: يسار -47 بكسل؛) أ:نشط (موضع الخلفية: يسار -94 بكسل؛)

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

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

رسم زر في إنكسكيب

أولاً، لنرسم دائرة ستكون أساس الزر. أرسم دائرة بأبعاد العرض والارتفاع 900x900 بكسل. من المهم أن تكون الدائرة متساوية. املأها بتدرج شعاعي، مع وضع التدرج كما في الصورة. النقطة المركزية للتدرج ستكون 10% رمادي، والنقطتان الجانبيتان ستكونان 70% رمادي.

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

إضافي ارسم زرًاوتنفيذ نفس العملية مع تكرار الدائرة. تكرار الدائرة الداخلية وتقليل حجمها 670x670 بكسل. باستخدام التدرج الشعاعي، أعطيه اللون الأخضر، بدءًا من الفاتح إلى الغامق. النقطة المركزية للتدرج هي اللون #aaffaa، ولون النقاط الجانبية هو #00aa00.

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

يجب أن تعطى كل نقطة لونها وشفافيتها. لذلك ستكون النقطة المركزية شفافة بنسبة 100%، ونعطي نقاط الربط لونًا رماديًا بنسبة 40% ونحدد أيضًا الشفافية المطلقة، والنقاط الجانبية ليس لها شفافية ويكون اللون رماديًا بنسبة 90%. نقوم بتحريك نقاط الربط، كما في الشكل، ببساطة عن طريق سحبها بالماوس.

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

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

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

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

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

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

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

الخطوة 1. قم بإنشاء مستند.

أولاً، قم بإنشاء مستند. اختر المقاسات حسب ذوقك الذي قمت بعمله 400x400بحيث لا يكون حجم الصور كبير جداً.

الخطوة 2: إنشاء شكل زر

للقيام بذلك، حدد الأداة من شريط الأدوات مستطيل مع تقريبزوايا.

وقم بضبط الإعدادات التالية:

ثم نقوم بإنشاء هذا الشكل لزرنا:

التوهج الداخلي:

الخطوة 3. الجزء الخفيف

للقيام بذلك، نأخذ أداة مستطيل مستدير الزوايابهذه الإعدادات:

ونقوم بإنشاء هذا الشكل:

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

بعد ذلك، البقاء على طبقتنا والضغط باستمرار على المفتاح كنترولانقر على الطبقة التي تحتوي على خلفية الزر الخاص بنا:

لقد حصلنا على الزر المحدد، والآن اضغط على مجموعة المفاتيح CTRL+SHIFT+I(نحصل على عكس التحديد) ثم المفتاح يمسح. نحن نقطع كل شيء بشكل صحيح.

والآن قم بالتحديد على شكلنا الأبيض من خلال الضغط باستمرار السيطرة + النقرعلى طبقتنا.

ثم في شريط الأدوات حدد اللون الرئيسي وقم بتعيينه على هذا النحو اللون: #fbdf76.

الآن اضغط على المجموعة ألت + مسافة للخلفوملء الرقم لدينا.

وكدت أنسى أن التأثير سيبدو أفضل من استخدام الشكل المملوء حديثًا التحول الحرتقليل على الجانبين بواسطة 1 بيكسل. وخفض الشفافية إلى 70% .

نتيجة:

الخطوة 4. هل الضوء والتغميق.

1. تفتيح الجزء السفلي من الزر.

خذ الأداة فرشاة.

قمنا بضبط الإعدادات التالية:

أنشئ طبقة جديدة وارسم فرشاة على طول الجزء السفلي من الزر:

لقد قمنا بقطع الفائض كما فعلنا أعلاه، أي حدد طبقة الزر وعكسها وحذفها.
اجعلها شفافة 40% .

2. تفتيح الزر العلوي.

افعل نفس الشيء، فقط لون الفرشاة سيكون هكذا: #fdefaa. نتيجتي:

3. سواد الوسط.

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

الزر جاهز، ولكن بدون الظلال لا يبدو جميلًا جدًا، لذا الآن سنصنع هذا الظل!

الخطوة 5: إنشاء الظلال

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

1. الظل الخلفي

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

قم بإنشاء شكل مثل هذا:

املأها بمجموعة مفاتيح ألت + باكسبيس.

إزالة التحديد السيطرة + د.

تطبيق مرشح التمويه الضبابي.

ثم نقوم بتحويل ظلنا مع المجموعة CTRL+T.

ومن ثم استخدام مساحة مستطيلة لإزالة الجزء السفلي:

كما لاحظت، تبين أن الجزء السفلي من الظل، بعبارة ملطفة، سخيف. للقيام بذلك، نأخذ أداة طمسوطمس الزوايا.

2. الظل السفلي.

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

وطمس بواسطة غاوسي.

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

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

الخطوة 1

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

الآن نتبع التعليمات. لنقم بتصغير المستند بحيث لا يكون في وضع ملء الشاشة.

سيتم تقليص المستند وضبط حجمه بحيث يشغل نصف الشاشة تقريبًا.

الآن نقوم بذلك كما هو موضح في لقطة الشاشة أدناه، وبالتالي سيكون لدينا شاشة ثانية مع المستند الخاص بنا. أهم ما يميز هذه الطريقة هو أنه يمكن عمل أحد المستندات على نطاق واسع، على سبيل المثال 200-500٪، وبالتالي سيكون العمل مع التفاصيل أكثر ملاءمة، وفي الثانية يمكنك رؤية كل شيء التغييرات على نطاق 100٪.

سوف تمر مرحلة التحضير، وحان الوقت للبدء في رسم الزر نفسه.

الخطوة 2

أنشئ طبقة جديدة، وحدد اللون الذي سيكون اللون الرئيسي للزر، وفضلت هذا اللون: #8cb314، وحدد أداة Rounded Rectangle Tool (يمكنك رؤية إعدادات الأداة في لقطة الشاشة أدناه) وارسم الشكل المستقبلي زر.

الخطوه 3

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

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

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

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

الآن يتطابق التدرج مع شكل الزر، ولكن حدوده صعبة للغاية ولا يوجد انتقال سلس، ويمكن حل ذلك باستخدام عامل التصفية؟ طمس؟ Gaussian Blur والعب باستخدام شريط التمرير حتى تصبح حواف التدرج ناعمة.

نحن الآن بحاجة إلى إضافة الضوء إلى أسفل وأعلى الزر، وإنشاء تحديد في الأعلى.

حدد لونًا فاتحًا (أفتح من الجزء العلوي للزر)، وحدد أداة التدرج وقم بتكوينها كما في لقطة الشاشة أدناه.

الآن قم بإنشاء طبقة جديدة (ملاحظة: يتم نقل جميع الطبقات التي قمنا بتراكبها أعلى الزر على الفور إلى قناع القطع؛ ويعمل السهم الأسود الصغير الموجود على يسار صورة الطبقة كدليل على أن الطبقة قد تم نقلها).

على طبقة جديدة، قم بتطبيق التدرج اللوني وقم بتمديده من الأعلى إلى الأسفل.

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

الخطوة 4

تم ضبط الحجم الإجمالي. ستكون الإضافة اللطيفة عبارة عن توضيح أكثر شمولاً لحدود الأزرار. باستخدام أداة Rectangular Marquee Tool، أنشئ تحديدًا مستطيلًا بارتفاع بكسل واحد.

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

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

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

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

املأ التحديد الناتج باللون الأبيض وقلل من عتامة الطبقة. لقد خفضتها إلى 12٪.

الخطوة 5

إضافة نص إلى الزر.

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

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

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

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

الزر جاهز، حظا سعيدا.

شارك الدرس

المعلومات القانونية