מדריך – עיצוב דף גלריה עם הצללה מגניבה

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

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

שנתחיל?

1. פתחו מסמך חדש בגודל 1024X768  ובחרו צבע רקע (רצוי בהיר), במקרה שלי בחרתי בצבע זהב קוד הצבע: #ffbe2c

2. ציירו מלבן לבן באופן הבא בחלק העליון של המסמך כ-90% מרוחב המסמך

3.צרו שכבה (layer) חדשה ומקמו את השכבה שיצרתם מתחת לשכבה של המלבן הלבן ולאחר מכן בחרו בכלי המברשת ובחרו בהגדרות הבאות:

גודל מברשת: 40PX

Hardness: 0%

בחרו במברשת עגולה הראשונה משמאל מתאימה.

4.ציירו קו ישר עד אמצע המלבן בערך(כאשר אתם מציירים את הקו לחצו על מקש SHIFT על מנת שהקו יצא ישר) .

5. לחצו על ctrl+t במקלדת או לחילופין כנסו ל- edit>free transform והטו את הצורה באלכסון כפי שמופיע בתמונה.

6.  לאחר שאישרתם את ההטייה שיצרתם תלחצו על אנטר או V שכפלו את השכבה של ההצללה (או לחצו במקלדת על ctrl+j לשכפול השכבה).

7. כעת כנסו בתפריט edit>transform ובחרו  ב- flip horizontal כפי שמופיע בתמונה

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

8.   אחדו את 2 השכבות באמצעות בחירת השכבות בעזרת לחיצה ממושכת על ctrl ובחירת השכבות הרצויות כפי שמופיע בתמונה

9. לאחר בחירת השכבות לחצו במקלדת על ctrl+e לאיחוד השכבות ותקבלו תוצאה דומה לזו:

10. כעת תחת הopacity בחרו ב50% וזהו סיימנו.

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

לאחר מכן הוסיפו תמונה והשתמשו בשכבה האפורה בתור MASK ותקבלו תוצאה כפי שמופיע בתמונה הבאה:

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

בהצלחה לכולם!

אודות הכותב:

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

פוסטים נוספים - אתר אישי

אנשים שקראו כתבה זו התעניינו גם ב:



5 תגובות

  • מדליק
    כ"כ פשוט, אב עושה המון.
    תודה.

  • בהחלט חלי,
    הדברים הקטנים הם שעושים את ההבדל…

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

  • יותר פשוט, לדעתי, לקחת את ה-Marquee tool במקום מברשת ולהשים 3-4 פיקסלים של Feather. (:

    • מסכים איתך אנטון, אבל לא לכולם זה נוח וזה לא נותן אותה תחושה…

הגב

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

אוגוסט 2017
א ב ג ד ה ו ש
« אוגוסט    
 12345
6789101112
13141516171819
20212223242526
2728293031