כיצד ליצור לחצני תלת מימד באמצעות Adobe Photoshop

כיצד ליצור לחצני תלת מימד באמצעות Adobe Photoshop

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





במאמר זה נראה לכם כיצד ליצור לחצני תלת מימד באמצעות פוטושופ, יחד עם מצבי 'למעלה' ומטה 'ויזואליים, כך שתוכלו להנפיש אותם. (לא נעסוק באנימציה עצמה במאמר זה.)





שלב 1: הכינו את המסמך שלכם

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





כדי ליצור כפתור תלת מימד בפוטושופ, יהיה עליך ליצור מסמך מותאם אישית עבורו. לשם כך, פתח את Photoshop ולחץ על צור חדש> מותאם אישית . התחל להקליד את הערכים שלך.

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



  • בגובה 900 על 300 פיקסלים
  • 300 פיקסלים/אינץ '
  • מצב צבע RGB

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

שלב 2: הגדר את המלבן שלך לכפתור התלת מימד שלך

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





כדי לבנות את כפתור התלת מימד שלך, לחץ על כלי מלבן מעוגל בצד שמאל של המסך שלך, נראה כאן באדום. תוכל גם להשתמש בקיצור הדרך U כדי לגשת אליו.

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





לכפתור שלנו, הלכנו עם:

  • 300 פיקסלים ברוחב
  • גובה 75 פיקסלים

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

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

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

לצורך הדרכה זו --- וכדי להמחיש כיצד עשוי להיראות כפתור 'למעלה' ומטה '--- אנו הופכים את כפתור ה'מטה' לאדום.

שלב 3: הפוך את הכפתור שלך לתלת מימד

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

כדי לגשת ל- סגנון שכבות תיבת דו -שיח, אתה יכול ללכת שכבה> סגנון שכבה מהתפריט העליון. תוכל גם ללחוץ פעמיים על השכבה המכילה את הלחצן שלך, כדי להעלות אותו אוטומטית. הדרך הזו הרבה יותר מהירה ואנו אישית מעדיפים אותה.

ברגע שהתיבה Layer Style שלך ​​למעלה, עבור לאפשרות שיפוע והבלטה . הפעל אותו.

זוהי דרך קלה ומהירה להעניק לקצוות הכפתור מראה '3D' מוגבה יותר. להדרכה זו, אלו ההגדרות בהן השתמשנו:

מִבְנֶה

  • סִגְנוֹן: שפוע פנימי
  • טֶכנִיקָה: אזמל רך
  • עוֹמֶק: 605
  • כיוון: לְמַעלָה
  • גודל: 5
  • לְרַכֵּך: 1

הצללה

  • זָוִית: 90
  • גוֹבַה: 37
  • מצב הדגשה: דודג 'צבע, 55% אטימות
  • מצב צל: אטימות מרובה, 25%

הטריק הוא להפוך את ההגדרות גבוהות מספיק כדי שתוכל לראות הבדל כלשהו, ​​אבל לא כל כך חזק שזה מכריע.

לאחר שסיימנו עם Bevel & Emboss, הלכנו אל קווי המתאר והדליק גם את זה. קונטור הופך את ההגדרה של Bevel & Emboss למעט חזקה יותר, ולמדריך זה בחרנו את ההגדרה חרוט - הפוך .

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

  • מצב מיזוג: כיסוי
  • אֲטִימוּת: 90
  • סִגְנוֹן: לינארית
  • זָוִית: 90
  • סוּלָם: 100

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

כיצד למחוק את החברים הכי טובים ב- snapchat

מִבְנֶה

  • מצב מיזוג: מרובות
  • אֲטִימוּת: 35
  • זָוִית: 90
  • מֶרְחָק: 2
  • התפשטות: 6
  • גודל: 8

איכות

  • קווי המתאר: לינארית
  • רַעַשׁ: 0
  • שכבה דופקת צל ירידה: עַל

עכשיו הגיע הזמן לשמור את המפרט הזה כסגנון שכבה.

שלב 4: שמור כסגנון שכבה

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

הנה איך.

לפני לחיצה בסדר בתוך ה סגנון שכבות תיבת דו -שיח, לחץ על סטייל חדש . כשתעשה זאת, Photoshop תשמור את סגנון השכבה הזה שיצרת לכפתור שלך.

אם אתה משתמש ב- Photoshop CC, סגנון חדש זה יישמר ב ספריות סעיף, כפי שאתה יכול לראות למעלה. זה מאוד מהיר וקל לגישה.

שלב 5: כיצד להשתמש בסגנון שכבה שמורה

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

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

הבא --- במקום לחיצה כפולה על השכבה עצמה כדי להעלות את סגנונות שכבה תיבת דו-שיח --- לחץ פעמיים על סגנון השכבה שלך ספריות לוּחַ.

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

שלב 6: הוסף טקסט לכפתור שלך

לאחר מכן, אנו הולכים להוסיף טקסט ללחצן.

כדי להוסיף טקסט, צור שכבה חדשה מעל שתי שכבות הכפתורים שלך. לחץ על כלי הקלדה כדי להתחיל להקליד.

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

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

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

ראשית, לחץ פעמיים על השכבה המכילה את הטקסט שלך, כך שתוכל להעלות אותו ב- סגנון שכבות תיבת דיאלוג.

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

מִבְנֶה

  • מצב מיזוג: לְהַכפִּיל
  • אֲטִימוּת: 35
  • זָוִית: 90
  • מֶרְחָק: 2
  • לַחֲנוֹק: 4
  • גודל: 1

איכות

  • קווי המתאר: לינארית
  • רַעַשׁ: 0

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

  • מצב מיזוג: צריבת צבע
  • אֲטִימוּת: 90
  • סִגְנוֹן: לינארית
  • זָוִית: 90
  • סוּלָם: 100

שלב 7: סיום

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

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

די מגניב, הא? כדי לשמור את הקובץ שלך, עבור קובץ> שמור בשם , ושמור אותו כפורמט הקובץ המתאים לכל פרויקט שאתה עשוי לעבוד עליו.

התאם אישית את הבלוג שלך באמצעות לחצנים ווידג'טים תלת -ממדיים

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד לגשת לרמת הבועה המובנית של Google באנדרואיד

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

קרא הבא
נושאים קשורים
  • יְצִירָתִי
  • אדוב פוטושופ
  • טיפים לעריכת תמונות
  • מדריך פוטושופ
על הסופר שיאן אדלמייר(136 מאמרים פורסמו)

לשיאן תואר ראשון בעיצוב ורקע לפודקאסטים. כעת, היא עובדת ככותבת בכירה ומאיירת דו ממדית. היא מכסה טק יצירתי, בידור ופרודוקטיביות עבור MakeUseOf.

עוד מאת שיאן אדלמייר

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה