מדריך ליצירת כפתור אינטראקטיבי + קובץ PSD

מדריך ליצירת כפתור כמו בניוזלטר של הבלוג, מצורף תוצאה סופית + קובץ PSD:

תוצאה סופית:

קודם כל נבחר צבע רקע למסמך במקרה שלי הצבע הוא תכלת קוד הצבע: #1fa2e1

1. נבחר בכלי הריבוע עם הפינות המעוגלות (רדיוס 5 פיקסל) ונצייר מלבן, בצבע שחור

2. כעת נלך לכלי  marquee tool ונבחר בכלי העיגול

3. נסמן עיגול על אמצע שטח הכפתור במידה ופיספסתם קצת ניתן להזיז את המיקום באמצעות לחיצה על כפתור הרווח וסידור המיקום עם החיצים במקלדת.

4. נבחר בכלי המילוי ונצבע את העיגול שציירנו בצבע לבן.

5.  לאחר מכן בתפריט נבחר ב- filter>blur>gaussian blur

6. נבחר ברדיוס של 6 פיקסל כפי שתוכלו לראות בתמונה

7. לאחר מכן נמקם את העיגול לפי האפקט הדרוש לנו במקרה שלי הצמדתי אותו לחלק העליון של הכפתור

נבחר בשכבה של הכפתור ( shape2 נלחץ על המסגרת האפורה)  נחזיק את מקש הALT וניצור MASK ל- layer3 כדי שהאפקט הלבן לא יצא לנו מהמסגרת של הכפתור.

8. כמו – כן נשנה את השקיפות של הכפתור ל25%.

הסבר ליצירת הצללה לכפתור

9. נבחר בכלי המברשת העובי תלוי במידת ההצללה שאתם רוצים ליצור במקרה שלי בחרתי ב10.

10. נבחר בצבע אפור כהה / שחור.

11. ניצור שכבה חדשה שממוקמת מתחת לשכבה של הכפתור ונצייר קו שקצת חורג מהרוחב של הכפתור כפי שתוכלו לראות בתמונה.

12. נחזור על הפעולה שביצענו בסעיף 5 רק נבחר ברדיוס קטן יותר של 4 פיקסל

13. לאחר מכן נבחר ב- filter>blur>motion blur

14. שימו לב שה-Angle על 0 כדי שנקבל את אפקט הMOTION בקו ישר לרוחב,  ובמרחק בחרו ב-60 פיקסל.

תוצאה:

להורדת קובץ מקור 

אשמח לתגובות,

והערות לשיפור המדריכים הבאים.

2 תגובות

• 
  מרים 10 בינואר 2011 בשעה 22:22

  מאוד מוצלח!!!!!!

  הגב
• 
  chezki 4 ביוני 2012 בשעה 4:22

  היי אבל איך הופכים את זה ל"לחיץ"….?

  הגב