מאיפה באנו ולאן אנו הולכים
איך הופכים תמונה צבעונית לתמונה מונוכרומטית, באלמנטור, בכמה פעולות פשוטות בלי לעבד את התמונה בפוטושופ ובלי להתקין תוספים שיכבידו סתם על המערכת.
ואם בכל זאת תרצו לדעת איך עושים זאת בפוטושופ, אז פירטנו בחלק השני של הפוסט.
איך מגיעים מזה:
לזה!
אנחנו באלמנטור בווידג'ט תמונה
- בהגדרות התמונה יש להגדיר פילטרים עם רווייה (Saturation) = 0. כך הצבע יבוטל והתמונה תהפוך לתמונת שחור לבן.
- בהגדרות התמונה יש להגדיר תחת מתקדם->רקע את הצבע המונוכרומטי הרצוי.
- חשוב! כדי שצבע הרקע לא יגלוש מגבולות התמונה:
- אם רוצים לקבוע לתמונה שוליים: יש להגדיר את השוליים כשוליים חיצוניים (margin) ולא כשוליים פנימיים (padding).
- אם לא מגדירים רוחב 100% בהגדרות תמונה -> סגנון -> תמונה (ראו תמונה בסעיף 1), יש להגדיר את הרוחב תחת מתקדם -> פריסה כ: בתוך השורה (auto).
- בהגדרות התמונה, תחת מתקדם -> פריסה, יש לציין שם מחלקת CSS בשדה CSS Classes. בדוגמה שלנו img-multi
- יש להוסיף את קוד ה-CSS הבא באחד מהמקומות הבאים:
- בהגדרות התמונה: מתקדם –> CSS מותאם
- בהגדרות עמוד של העמוד/הטמפלט: מתקדם –> CSS מותאם
- בקובץ style.css בתבנית הבת (child theme), למשל hello-elementor-master-child
.img-multi img { mix-blend-mode: multiply; }
אין עושים את זה בפוטושופ
הפיכת התמונה לשחור לבן
- יש להוסיף שכבת adjustment מסוג Hue/Saturation, מהתפריט שנפתח בתחתית החלון (חץ לבן).
- בפאנל ההגדרה של שכבת ה-Hue/Saturation, יש לגרור את מחוון הסטורציה לשמאל, לערך -100. (חץ לבן)
- יש ליצור תלות בין שכבת הסטורציה לשכבת התמונה. לשם כך יש לעמוד על הקו בין השכבות, ללחוץ על Alt ואז כשהסמן ישתנה לחץ פינתי יש ללחוץ עליו, כך שיופיע בפאנל השכבות חץ פינתי בשכבת הסטורציה (קו אדום).
הפיכת התמונה למונוכרומית
- מתחת לשכבת התמונה יש ליצור שכבה עם מלבן בצבע הרצוי.
- יש להגדיר את ה-blending של שכבת התמונה המקורית כ-multiply.
דרך חלופית ליצור תמונה מונוכרומטית
התהליך לעיל יצור תמונה בדיוק כפי שיצרנו באלמנטור. אפשר לחלופין להגדיר גם color overlay בצבע הרצוי ב-blending options, אבל הצבע המתקבל מעט שונה.
