בתוך שלנו , למדנו את היישום שלנו לעבוד עם הפרוייקטים והפלטות.כעת הגיע הזמן להוסיף אפשרויות נוספות עבור התאמה מעולה של צבע ואפקטים חזותיים. Tutorial הקודם בנוסף, אנו נחקור מודל צבע חדש, HSV, אשר עובד עם צבעים באופן שונה מאשר RGB ו- LAB. מודל זה מקל על מניפולציה של מאפיינים כגון צבע, רוויות וקלות, מה שהופך אותו שימושי במיוחד עבור התאמת צבעים בתמונות. קוד הפרויקט המלא זמין ב → הקישור הזה הקישור הזה Adjusting the Number of Colors in the Extracted Palette כבר ראינו כיצד הגבלת פלטה יכולה לשנות את המראה של תמונה. כדי להגדיל את גמישות הפילטר וההתאמה לעיבוד התמונה, נוסיף את היכולת לשלוט במספר הצבעים שהוצאו מהתמונה.כעת, אתה יכול להגדיר בדיוק כמה צבעים מונחים בתמונה, המאפשר שליטה טובה יותר על אפקטים חזותיים.תכונה זו שימושית במיוחד בעת עבודה עם פלטות ליצירת מסננים, שכן שינוי מספר הצבעים חל על מגוון רחב של משימות עיצוב. האפליקציה מכילה כעת מנוף המאפשר לך לבחור את מספר הצבעים שנלקחו מהתמונה (מ 10 עד 20). <div style={{ marginBottom: 12 }}>
  <label>Number of Colors</label>
  <input
    type="range"
    min="10"
    max="20"
    value={colorCount}
    onChange={(e) => setColorCount(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>
 אנחנו ניסוי עם התמונה המדהימה של סו סאסקי עבור הוא מציע מגוון רחב של צבעים וצבעים, מה שהופך אותו לנושא המושלם לחקרנו. טוקיו טוקיו למטה אתה יכול להשוות איך התמונה נראית עם פלטה של גדלים שונים. Filter Intensity Slider כדי להפוך את תהליך הפילטר גמיש יותר, אנו נוסיף מנוף כדי לשלוט באינטנסיביות של יישום הפאלטה לתמונה. פשוט בחר את עוצמת המסנן הרצויה ולחץ על "יישום מסנן". <div style={{ marginBottom: 16 }}>
  <label style={{ display: "block", marginBottom: 6 }}>Filter Intensity</label>
  <input
    type="range"
    min="0"
    max="100"
    value={intensity}
    onChange={(e) => setIntensity(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>
 How does it work? כאשר רמת האינטנסיביות מוגדרת ל-100%, התמונה תשתנה לחלוטין באמצעות הצבעים מהפלטה שנבחרה.ככל שערך האינטנסיביות יהיה נמוך יותר, כך הפלטה תהיה בעלת השפעה נמוכה יותר על התמונה, ומאפשרת לך לשמור יותר צבעים מקוריים. HSV Color Model HSV (Hue, Saturation, Value) הוא אחד המודלים הצבעוניים הפופולריים ביותר, אשר משמשים לעתים קרובות לייצג צבע במונחים של צבע, רוויות ובהירות. → → → → צבע (צבע): זה מייצג את הצבע העיקרי (כגון אדום, ירוק, כחול, וכו '), נמדד בדרגות מ 0 עד 360. סיבולת: זה מציין את עוצמת הצבע.סיבולת מושפעת מהכמות של אפור בצבע: 100% הוא צבע רווי לחלוטין, ו 0% הוא אפור. ערך (בהירות): זה מייצג כמה בהיר הצבע הוא. ערך של 0% נותן שחור, בעוד 100% הוא הגרסה בהירה ביותר של הצבע. • : Differences from RGB and LAB → → → שלא כמו RGB, שבו צבעים משולבים בהתבסס על האינטנסיביות של אדום, ירוק וכחול, HSV מבוסס על תפיסה חזותית אנושית. בהשוואה ל-LAB, אשר משתמש במודל מתמטי מורכב יותר לייצוג מדויק של צבעים בתנאים שונים של תאורה, HSV הוא אינטואיטיבי יותר ויעיל יותר לשימוש. דוגמה לקוד כדי להמיר RGB ל HSV: function rgbToHsv(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h = 0, s = 0, v = max;

  if (delta !== 0) {
    s = delta / max;
    if (r === max) {
      h = (g - b) / delta;
    } else if (g === max) {
      h = 2 + (b - r) / delta;
    } else {
      h = 4 + (r - g) / delta;
    }
    h *= 60;
    if (h < 0) h += 360;
  }

  return [h, s * 100, v * 100];
}
 להלן דוגמאות לתמונות באותה פלטה, אך במודלים בצבעים שונים. Contrast Slider התנגדות מתייחסת להבדל בין נקודות האור והחושך ביותר בתמונה.התאמה של התנגדות מאפשרת לך להגדיל או להפחית את ההבדל.ככל שההתנגדות גבוהה יותר, אזורים האור והחושך יהיו ברורים יותר. How does contrast adjustment work? כאשר ניגודיות מוגברת, האזורים האפלים של התמונה הופכים עוד יותר כהים, והאזורים הקלים הופכים אפילו בהירים יותר. דוגמה לקוד לשינוי ניגודיות: const applyContrast = (r, g, b, contrast) => {
  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
  r = contrastFactor * (r - 128) + 128;
  g = contrastFactor * (g - 128) + 128;
  b = contrastFactor * (b - 128) + 128;
  return [r, g, b];
};
 • : Algorithm Description אלגוריתם התנגדות משתמש בגורם תלוי הערך הנוכחי של התנגדות, הגורם זה משמש לכל רכיב צבע (אדום, ירוק וכחול), התאמת בהירות שלהם בהתבסס על רמת התנגדות. Noise Slider עבור אלה שרוצים ליהנות קצת, הוספנו מנוף רעש.הוספת רעש לתמונה מסייעת ליצור אפקט צילום עתיק או לגרום לתמונה להרגיש יותר "חיה".אפקט זה משמש כדי להסתיר חסרונות או להוסיף מגע אמנותי לתמונה. How does the noise work? תנועת הרעש מאפשרת לך לשלוט בכמות של שינויים אקראיים החלים על הצבע של כל פיקסל בתמונה.ככל שהערך הרעש גבוה יותר, כך עולה כמות השינויים האקראיים החלים על התמונה. כאשר רעש מוסיפים לתמונה, שינויים קטנים, אקראיים מועברים לערכים RGB של כל פיקסל, וכתוצאה מכך אפקט זרע. אפקט זה יכול להיות עדין או מובהק, בהתאם לכמות הרעש המשמש. const applyNoise = (r, g, b, noise) => {
  r += Math.random() * noise - noise / 2;
  g += Math.random() * noise - noise / 2;
  b += Math.random() * noise - noise / 2;
  return [r, g, b];
};
 • : Algorithm Description ערך אקראי מוסיף לכל פיקסל בטווח מסוים. זה יוצר את ההשפעה של שינויים אקראיים בצבע, נותן לתמונה מראה רעש או זרע. במקרה שלנו, אנחנו פשוט סימולציה של הפרעות, אשר אין שום קשר לזרם סרט אמיתי או רעש. ) עבד על אותו עיקרון. סוני אריקסון W810 על ידי שליטה על כמות הרעש, משתמשים יכולים להתנסות ברמות אינטנסיביות שונות כדי להשיג אפקטים יצירתיים שונים או לדמות חוסר שלמות בתמונה. וכמובן, הוספנו לחצן Reset Settings כדי לנקות את כל המסננים ולחזור לתמונה המקורית. במהלך המאמרים שלנו, חקרנו את היסודות של תיקון צבעים וחקרנו כלים וטכניקות שונות ליישם אותו.הבדקנו כיצד לחלץ ולהתאים פלטות צבעים, את ההשפעות של ניגודיות, רוויות ורעש, וכיצד לעבוד עם מודלים צבעים שונים - RGB, LAB, ו- HSV. תיקון צבעים הוא היבט קריטי של עיבוד התמונה, המאפשר לנו לשפר את התפיסה החזותית, להדגיש אלמנטים מסוימים ולהשיג הרמוניה בין צבעים. חשוב לציין כי התאמות צבע וניגודות לא רק להשפיע על המראה של תמונה אלא גם להשפיע על האופן שבו היא נתפסת.

Read My Stories

האודיו הזה מופק בשפת המקור של הסיפור!

יותר מדי זמן; לקרוא

Make resilience your competitive advantage

יישום אינטרנט זה הופך כל תמונה לחלום רטרו חום - אין Photoshop נדרש

About Author

הערות

תלו תגים

מאמר זה הוצג ב

Related Stories

The TechBeat: To Focus or Not Focus: How to Find the Right Product-Market Fit (3/14/2024)

The TechBeat: Investigating Internet Freedom: Unseen Aspects of Our Online Existence (1/20/2024)

100 Days of AI, Day 13: How Instruction Finetuning Improves a Pre-trained LLM

The TechBeat: To Focus or Not Focus: How to Find the Right Product-Market Fit (3/10/2024)

The TechBeat: To Focus or Not Focus: How to Find the Right Product-Market Fit (3/14/2024)

The TechBeat: Investigating Internet Freedom: Unseen Aspects of Our Online Existence (1/20/2024)

100 Days of AI, Day 13: How Instruction Finetuning Improves a Pre-trained LLM

The TechBeat: To Focus or Not Focus: How to Find the Right Product-Market Fit (3/10/2024)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps