code

איך יוצרים כפתור בפוטושופ

אז לא.. אני לא מדבר על להקת aqua עם השיר Barbie girl אני מדבר על אקווה סטייל (Aqua Style) שמאפיינת את הערכות הויזואליות של ממשקי מקינטוש. פירוש המילה אקווה בלטינית הוא מים ולכן הסטייל הזה בעל אפקטים של שקיפות חלקית והשתקפויות.

כפתורי אקווה מעבירים תחושה של "סוכריות טעימות" שאי אפשר להתאפק מללחוץ עליהם.

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

בפעמים הראשונות שניסיתי לייצר כפתור אקווה התוצאה שיצאה לי הייתה בין "המגעיל" ל-"בסדר…" במקום כפתור "טעים" יצא לי משהו על סף הפג תוקף. : ) אבל מה לעשות הניסיון עושה את זה שלו וכעת אני גאה להציג דרך פשוטה להגיע לסטייל הזה.

שלב 01.

אז נתחיל ביצירת קובץ פוטושופ חדש, אני פתחתי קובץ במידות של  500 פיקסל רוחב ו 180 פיקסל גובה. עכשיו ניקח את הכלי של הריבוע עם הפינות המעוגלות או באנגלית (Rounded Rectangle Tool) שנמצא בסרגל הכלים:

שיעור פוטושופ - יצירת כפתור

שלב 02.

עכשיו צריך לשנות את הרדיוס ל- 30. אם אתם לא יודעים איפה זה נמצא תסתכלו בדוגמה הבאה:

שיעור פוטושופ - יצירת כפתור

שלב 03.

במשטח העבודה נצייר מלבן עם המידות החדשות וזה אמור להיות משהו כזה:

שיעור פוטושופ - יצירת כפתור

שלב 04.

ברגע שציירנו את המלבן פוטושופ שם אותו אוטומטית על שכבה חדשה. עכשיו נלחץ פעמיים מהר על השכבה הזאת בצד ימין (ליד שם השכבה) כדי לפתוח את חלון "סטייל השכבות". נתחיל בהוספת צל למלבן שהרגע ציירנו (Drop Shadow). שימו לב לפרמטרים שאני הכנסתי. אתם יכולים לשים פרמטרים שונים אם אתם רוצים להגיע לתוצאה אחרת.

שיעור פוטושופ - יצירת כפתור

שלב 05.

עכשיו נכניס צל פנימי עם הפרמטרים האלה (Inner Shadow)

שיעור פוטושופ - יצירת כפתור

שלב 06.

ודבר אחרון נכניס הברקה בפנים (Inner Glow)

שיעור פוטושופ - יצירת כפתור

שלב 07.

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

שיעור פוטושופ - יצירת כפתור

שלב 08.

עכשיו ליצירת החלק הזוהר בתחתית הכפתור. שכפלו את השכבה של המלבן. כדי לעשות את זה נעשה לחיצה ימנית עם העכבר על השכבה ו"שכפול שכבה" (Duplicate Layer).

שיעור פוטושופ - יצירת כפתור

שלב 09.

השכבה שוכפלה וכך גם האפקטים שעשינו לשכבה. מפני שאנחנו לא צריכים את האפקטים נבטל אותם. כדי לבטל עמדו עם העכבר על השכבה החדשה, לחצו לחצן ימני ו .Clear Layer Style

שיעור פוטושופ - יצירת כפתור

שלב 10.

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

לחצו במרכז הריבוע הצהוב של השכבה כדי לאפשר שינוי צבע, בחרו לבן ותעשו Ok.

שיעור פוטושופ - יצירת כפתור

שלב 11.

לחצו עכשיו במקלדת על Ctrl+T כדי לאפשר שינוי גודל של החלק. הקטינו את החלק ושימו אותו בתחתית כמו בדוגמה הזאת:

שיעור פוטושופ - יצירת כפתור

 

שלב 12.

עכשיו צריך לטשטש את גבולות החלק כדי לגרום מראה של השתקפות. כדי לעשות את זה נרים את העיניים למעלה אל שורת התפריט ומבחר ב:
Filter>Blur>Gaussian Blur
נלחץ Ok  להודעה שהוא פתח לנו וניתן שם רדיוס של 9 ונאשר את האפקט.

שיעור פוטושופ - יצירת כפתור

13.

שנו את מצב השכבה ל- אוברליי (Overlay)

שיעור פוטושופ - יצירת כפתור

14.

עכשיו צריך ליצור שכפול נוסף שאותו נמקם בחלק העליון של הכפתור. חזרו על סעיפים 7 עד 9. אחרי שהקטנתם אותו, מקמו אותו בחלק העליון של הכפתור.

שיעור פוטושופ - יצירת כפתור

15.

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

שיעור פוטושופ - יצירת כפתור

16.

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

שיעור פוטושופ - יצירת כפתור

icon_download

7 תגובות

  1. סליחה… אבל לא הבנתי את החלק האחרון.. מה זה אומר להוסיף גרדיאנט למסכה כדי לטשטש את החלק התחתון.. איך עושים את זה? ממש תודה על המדריך עד השלב הזה זה נראה מעולה..

  2. היי,
    שים לב בשלב 14 יצרנו שכפול של המלבן הלבן הזה. בשלב 15 החלק התחתון של המלבן הזה נעלם בטשטוש כזה.
    כדי לעשות את הדבר הזה צריך ליצור מסכה לשכבה של המלבן ואז לבחור בכלי הגראדיאנט (G במקלדת) ולטשטש את החלק התחתון.
    עכשיו אני באמת שם לב שהשלב האחרון לא כזה ברור. אני אצטרף לתת הסבר טוב יותר במדריך אחר..מקווה שתסתדר וגם אם לא השלב הזה לא קריטי כל כך :) כבר עשית את הרוב

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *