מדריך ליצירת כפתור לאתר בפוטושופ

מדריך ליצירת כפתור לאתר בפוטושופ
במדריך זה תלמדו איך ליצור כפתור איכותי לאתר האינטרנט שלך


ליצור מסמך חדש בגודל של 120 * 50.

ולמלא את צבע הרקע של המסמך  838383 # כעת השתמש בהגדרות שבתמונה:



כעת צייר צורה זהה במראה לזו שבתמונה ובכל גודל שתרצה . עבור מדריך זה, אני משאיר שטח בתחתית

כדי ליצור אפקט אחר אחר כך, כעת צבע את הרקע ל- 111111 #





2: קליק ימני על שכבת הצורה שלך וללכת "Blending options".והוסף הגדרות אלה:











והתוצאה:



3:צור שכבה חדשה (shift + ctrl + N ). 'כעת עם הכלי עיפרון ומברשת בגודל של 2px.

הגדר את צבע החזית ל-(eee1cd #). לעשות קו אופקי על פני הצורה מלבנית שלך כמו זו:



לחץ לחיצה ימנית על השכבה שיצרנו עם העיפרון

ללכת ל- 'Blending Options' ולהזין את ההגדרות האלה:





זו התוצאה:



4: ודא שאתה עדיין על שכבת העיפרון.

ועבור אל layer > Layer Mask> Reveal All. הגדר את ה- 'Gradient Tool' עם הגדרות אלה:



צור את ה- gradient כמו בתמונה:





5: כעת ליצור צורה כמו זו:



עבור אל- Filter> Blur> Guassian Blur.

זה ישאל אותך אם אתה רוצה rasterize את השכבה. לחץ על אישור, והגדר טשטוש ל-0.6

6: חזור לצורה המקורית שלך ולסמן את הצורה.



לחץ CTRL והחזק אותו לחוץ על מסכת וקטור כדי לבחור את השכבה



הפוך בחירה. (Select> Inverse) חזור לשכבה הקודמת (זו עם שכבת העיפרון) ולמחוק אותה (ctrl + D)

זו התוצאה לעכשיו:



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



8: חזור לצורה המקורית שלך וסמן את הצורה. צור שכבה חדשה (shift + ctrl + N ) וללכת ל- Edit> Stroke.

והגדר את ההגדרות אלה ולחץ על אישור.



לחץ (ctrl + D) . אתה עכשיו הולך להשתמש באותה הטכניקה משלב 4 על שכבה זו.

עבור Layer> Layer Mask> Reveal All. 'וצור עם- Gradient Tool' עם אותן הגדרות שהשתמשנו,ליצור gradient.



התוצאה (לאחר הורדה של האטימות ל -75%):



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

הפונט הוא'Franklin Gothic Medium ) צבע הטקסט  E7E7E7 #.



לחיצה ימנית על השכבה וללכת ל- "Blending Options". ולהזין את ההגדרות האלה:





והתוצאה הסופית היא:



2 תגובות:

  1. עודד אמר/ה...

    כשאת/ה אומר "לחץ CTRL והחזק אותו לחוץ על מסכת וקטור כדי לבחור את השכבה"
    מה הכוונה???
    תרחיב בבקשה

  2. עיכ אמר/ה...

    ואיך בדיוק מוסיפים את הכפתור לאתר? ואיך נותנים לו קישור?

הוסף רשומת תגובה

תודה על התגובה.