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

ינואר 9, 2011   //   על ידי אבי כהן   //   מדריכים, עיצוב, פוטושופ, שימושון  //  2 תגובות

מדריך ליצירת כפתור כמו בניוזלטר של הבלוג, מצורף תוצאה סופית + קובץ 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 תגובות

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

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

הגב

שוחחו איתי אונליין

אפריל 2017
א ב ג ד ה ו ש
« אוגוסט    
 1
2345678
9101112131415
16171819202122
23242526272829
30