fbpx

איך הופכים תמונת צבע למונוכרומטית באלמנטור בלי פוטושופ ובלי תוסף

מאיפה באנו ולאן אנו הולכים

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

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

איך מגיעים מזה:

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

לזה!

תמונה שהפכה למונוכרומטית באמצעות פילטרים של אלמנטור

אנחנו באלמנטור בווידג'ט תמונה

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

אין עושים את זה בפוטושופ

הפיכת התמונה לשחור לבן
  1. יש להוסיף שכבת adjustment מסוג Hue/Saturation, מהתפריט שנפתח בתחתית החלון (חץ לבן).
  2. בפאנל ההגדרה של שכבת ה-Hue/Saturation, יש לגרור את מחוון הסטורציה לשמאל, לערך ‎-100. (חץ לבן)
  3. יש ליצור תלות בין שכבת הסטורציה לשכבת התמונה. לשם כך יש לעמוד על הקו בין השכבות, ללחוץ על Alt ואז כשהסמן ישתנה לחץ פינתי יש ללחוץ עליו, כך שיופיע בפאנל השכבות חץ פינתי בשכבת הסטורציה (קו אדום).
פוטושופ - הפיכת תמונת צבע למונוכרומטית - הוספת שכבה תלויה - Hue/Saturation והגדרתה.
הפיכת התמונה למונוכרומית
  1. מתחת לשכבת התמונה יש ליצור שכבה עם מלבן בצבע הרצוי.
  2. יש להגדיר את ה-blending של שכבת התמונה המקורית כ-multiply.
פוטושופ - הפיכת תמונת צבע למונוכרומטית - בחירה באפשרות ה-Blending המתאימה - multiply
דרך חלופית ליצור תמונה מונוכרומטית

התהליך לעיל יצור תמונה בדיוק כפי שיצרנו באלמנטור. אפשר לחלופין להגדיר גם color overlay בצבע הרצוי ב-blending options, אבל הצבע המתקבל מעט שונה.

פוטושופ - הפיכת תמונת צבע למונוכרומטית עם blending options

כתיבת תגובה

האימייל לא יוצג באתר.