نحوه کالیبره کردن رنگ برای وب

وبلاگ طراحی سایت نحوه کالیبره کردن رنگ برای وب

چه زمانی رنگ نارنجی بیشتر شبیه قرمز است؟ طراحان وب، حتی افراد حساس، گاهی اوقات تغییر رنگ در مانیتورها را نادیده می گیرند.

یک طراح وب چگونه می‌تواند رنگ را مدیریت کند وقتی صفحه‌نمایش کاربرانش می‌تواند هر اندازه یا رنگی باشد یا تحت هر شرایط نوری قابل مشاهده باشد؟

برخلاف رفع خطاهای HTML که با بارگیری صفحه بر مرورگرها تأثیر می‌گذارد، دریافت رنگ دقیق بخشی از فرآیند کار طراح است.

حفظ رنگ ها در پروژه ها پس از درک مشکلات امکان پذیر است. چالش‌ها و راه‌حل‌ها برای به دست آوردن رنگ ثابت در وب را بخوانید.

آیا می توانید تفاوت بین عکس های زیر را تشخیص دهید؟

two slightly different photos

یکی از تصاویر کمی آبی تر از دیگری است. این “تغییر رنگ” یا ته رنگ کلی یک رنگ خاص ممکن است توسط ناظر معمولی مورد توجه قرار نگیرد. به هر حال، یک تغییر جزئی در رنگ آن را کمتر از گل نمی کند یا از جزئیات قطره شبنم می کاهد. این یک تغییر تجمعی است.

به مرور زمان، تصاویر JPEG با حداکثر کیفیت و نمادهای PNG 256 رنگ، پهنای باند گرانبهایی را می‌خورند. پیچیدگی در HTML بار کاری مرورگر را با هر بار بارگذاری صفحه افزایش می دهد. بر خلاف این مشکلات، که با مرور بازدیدکنندگان وب‌سایت اضافه می‌شوند، مدیریت رنگ مشکلی در فرایند طراحی است. تصاویر ایجاد شده روی یک مانیتور کالیبره نشده با گذشت زمان ناسازگار می شوند.

تغییر رنگ ممکن است با نام دیگری باشد: بی توجهی.

چه زمانی می توانیم بگوییم که رنگ یک گرافیک به اندازه کافی با صفحه مطابقت دارد؟ در چه نقطه ای رنگ عکس خیلی نادرست است؟ چه جزئیاتی برای کل پروژه مهم نیست؟ هر کسی ممکن است پاسخ های متفاوتی داشته باشد، اما هیچکس که تصاویر دیجیتال را جدی می گیرد، نمی تواند کالیبراسیون رنگ را نادیده بگیرد.

صنعت چاپ برای چندین دهه با دریافت رنگ دقیق با مشکل مواجه بوده است. اطمینان از اینکه دقیقاً همان رنگ‌ها در تمام مراحل تولید ظاهر می‌شوند – از جمله در مانیتورهای مختلف، چاپگرهای اداری و پرس‌های پیشرفته – صنعت دستگاه‌های کالیبراسیون، راه‌حل‌های نرم‌افزاری و حتی استانداردهای ISO را ایجاد کرده است.

جامعه طراحی وب به طور کلی نگران بررسی های مطبوعاتی نیست. اما شاید باید.

 

وب از زمانی که رنگ داشت مشکلات رنگی داشته است

در دهه 1990، دریافت رنگ دقیق در وب به معنای استفاده از پالت 216 رنگ “ایمن برای وب” بود. این رنگ‌ها و سایه‌ها (اغلب) تضمین می‌شوند که هنگام نمایش بر روی مانیتورهایی که نمی‌توانند رنگ‌های بیش از 8 بیت را کنترل کنند، کدر نمی‌شوند.

illustration of a dithered image

در بالا یک گرادیان با و بدون پراکندگی وجود دارد. امروزه، اکثریت قریب به اتفاق رایانه‌ها می‌توانند رنگ 24 بیتی یا بهتر را نشان دهند (طبق این مرورگرها آمار و ردیابی Google Analytics از وب سایت ها، از جمله Webdesigner Depot را نمایش می دهند. یعنی هر پیکسل می‌تواند یکی از میلیون‌ها رنگ را نشان دهد و کالیبراسیون را پیچیده‌تر و حیاتی‌تر کند.

وب مدت‌هاست که برای تعریف رنگ‌ها به کدهای هگزیدسیمال مانند #F35C23 متکی بوده است. این رشته های شش کاراکتری می توانند طیف گسترده ای از رنگ ها و مقادیر را با دقت بسیار زیادی نشان دهند. تصویری که دارای #F35C23 و پس‌زمینه CSS در #F35C23 باشد، کاملاً مطابقت دارد.

مشکل این است که کد ترکیبی از قرمز، سبز و آبی را تعریف می‌کند اما همیشه منجر به رنگ ثابت نمی‌شود. صفحه‌های نمایش نشان دهنده تفاوت هستند.

 

سفید سفید است، مگر زمانی که نباشد

عوامل بسیاری بر دقت رنگ هنگام ایجاد و ویرایش تصاویر دیجیتال تأثیر می‌گذارند. مانند چاپ، رنگ در وب به محیطی که تصویر در آن ایجاد می شود بستگی دارد. برخلاف چاپ، تصاویر مبتنی بر وب می‌توانند هر بار که نمایش داده می‌شوند تغییر کنند، زیرا مانیتورهای کاربران متفاوت خواهند بود و هیچ بررسی فشاری نمی‌تواند مشکلاتی را که ظاهر می‌شوند، پیدا کند.

اگرچه بسیاری از مرورگرهای وب مدرن می‌توانند تصاویر CMYK را نمایش دهند، اکثر تصاویر وب بر اساس افزودنی RGB. این مدل ترکیبی از قرمز، سبز و آبی را برای هر پیکسل اعمال می کند.

اما همه مانیتورها یکسان ساخته نمی‌شوند، بنابراین یک رنگ نارنجی خاص ممکن است در صفحه‌های مختلف ناسازگار باشد. در اینجا برخی از دلایل تغییر رنگ آمده است:

  • تغییرات جزئی بین سازنده‌ها و مدل‌ها دلیل عدم دقت جزئی در سایه و رنگ است.
  • بسیاری از صفحه‌نمایش‌ها (مخصوصاً نمایشگرهای CRT) در طول سال‌ها و حتی با گرم شدن آنها در طول روز تغییر رنگ می‌دهند.
  • تا همین اواخر، Mac OS X و Windows از دو «گاما» متفاوت استفاده می‌کردند، به این معنی که تصاویر در Mac روشن‌تر از تصاویر روی رایانه شخصی به نظر می‌رسیدند. Mac OS X 10.6 (Snow Leopard) از گامای رایج 2.2 استفاده می کند، که همان ویندوز و بسیاری از تلویزیون ها و دوربین های فیلمبرداری است.
  • افراد از مکان های مختلف و در شرایط نوری مختلف وب را مرور می کنند. تأثیر نورهای بالای سر و میزان و رنگ نور طبیعی همگی بر ظاهر رنگ روی صفحه تأثیر می‌گذارند.
simulated color shift across different displays

در بالا، کالیبراسیون های مختلف نشان می دهد که “سفید” اغلب یک رنگ فرضی است:

  1. تصویر اصلی، که در زیر نور فلورسنت با دوربین نقطه‌ای عکس گرفته شده است.
  2. تغییر رنگ تقریبی در Mac قبل از Snow Leopard.
  3. تغییر رنگ تقریبی در مانیتور CRT قدیمی.
  4. نزدیک به رنگ واقعی، همانطور که در لپ تاپی که عکس روی آن پردازش شده است.

یک مانیتور کمی قرمز ممکن است آبی کامل را به رنگ بنفش کمی نشان دهد یا سبز را با رنگ زرد نشان دهد. مانیتورهایی که خیلی روشن هستند، سایه ها و هایلایت ها را پاک می کنند. مانیتورهایی که خیلی تاریک هستند، سایه ها را گل آلود می کند و احتمال تغییر رنگ در هایلایت ها را افزایش می دهد. برای طراحانی که به این جزئیات اهمیت می دهند، کنترل کیفیت قطعا یک چالش است.

 

PNG تغییر رنگ

به بیان ساده، مقدار گاما درخشندگی تصویر نمایش داده شده را تغییر می دهد. فرمت تصویر PNG که برای نمایش دیجیتال طراحی شده است، به طراحان امکان می دهد تصحیح گاما را به هر تصویر اضافه کنند. اما بدون اطلاع از درخشندگی دستگاه خروجی (یعنی بدون دانستن نوع مانیتوری که تصویر روی آن ظاهر می شود)، طراحان برای افزودن تصحیح گامای دقیق مشکل دارند.

این مشخصه به بدنام ترین مشکل PNG تبدیل شده است. در وب، یک تصویر گاهی اوقات با رنگ‌های هگزا مشخص شده در CSS مطابقت می‌کند، و در موارد دیگر اینطور نیست – حتی اگر با رنگ درست ایجاد شده باشد.

برنامه هایی مانند PNGCrush (Windows) و PNGenie (Mac) می تواند اطلاعات اضافی را از فایل های PNG حذف کند، از جمله تنظیمات گاما، که رنگ را قابل اطمینان تر می کند. .

 

مشکلات دیگر

جلوگیری از تغییر رنگ می‌تواند نیازمند تغییراتی در نحوه کار طراحان باشد. کالیبراسیون رنگ ضعیف به مرور زمان برجسته می شود. این یکی از آن جزئیات طراحی است که در مورد آن صحبت نمی شود و نباید مورد توجه قرار گیرد.

 

راه حل های صنعتی

راه‌حل‌های مختلف بسیاری از حدس‌ها را از مدیریت رنگ و جلوگیری از تغییر رنگ حذف کرده‌اند.

کنسرسیوم بین المللی رنگ (ICC ) در سال 1993 برای ایجاد یک استاندارد مستقل از پلت فرم برای مدیریت رنگ ایجاد شد. هدف، اطمینان از رنگ ثابت در همه دستگاه‌ها، از جمله نمایشگر، اسکنر و چاپگر بود.

نمایه‌های ICC فایل‌هایی هستند که حاوی اطلاعاتی درباره نحوه نمایش رنگ دستگاه‌های مختلف هستند. چاپگرها و اکثر رایانه ها با پروفایل های ICC داخلی عرضه می شوند، زیرا سازندگان آنها دقیقاً می دانند که چگونه کار می کنند. اما نمایه‌های سفارشی ICC می‌توانند یک دستگاه خاص را با شرایط خاصی تطبیق دهند – مثلاً زمانی که یک مانیتور در زیر نورهای فلورسنت استفاده می‌شود، نه در کنار یک پنجره بزرگ.

علاوه بر تطبیق رنگ‌ها در صفحه‌های نمایش (و در حالت چاپ)، Adobe Flash Player 10 از نمایه های ICC پشتیبانی می کند، مدیریت رنگ را بین Flash و چاپگرها امکان پذیر می کند (با فرض اینکه چاپگر کاربر نهایی از نمایه ICC استفاده می کند).

در سال 1996، هیولت پاکارد و مایکروسافت فضای رنگی استاندارد قرمز، سبز، آبی (sRGB) را به عنوان یک استاندارد مناسب تعریف کردند. برای دستگاه هایی که از مدل های رنگی افزودنی استفاده می کنند. اگرچه محدودتر از سایر اشکال RGB است (برای مثال، رنگ‌های آن نمی‌توانند به اندازه Adobe RGB اشباع شوند)، محبوبیت آن با استفاده از مانیتورها، اسکنرها، دوربین‌ها و دوربین‌های فیلم‌برداری افزایش یافت.

این راه‌حل‌های فنی پاسخ‌هایی در سطح صنعت از سوی سازمان‌های حرفه‌ای هستند. اما طراحان همچنین می توانند اقداماتی را انجام دهند تا کار خود را در طول زمان ثابت نگه دارند.

 

نکاتی برای آماده کردن اتاق برای کار رنگی

در حال حاضر از چه نوع نوری استفاده می کنید؟ اگر این را در فضای کاری اصلی خود می خوانید، و اگر رنگ دقیق برای شما مهم است، می توانید همین الان برای بهبود فضای کاری خود قدم بردارید.

  • ده ثانیه در هر نیم ساعت
    کمی استراحت کنید و به یک 18% کارت خاکستری. نگاه کردن به کارت یکسان در شرایط نوری یکسان راه خوبی برای “تنظیم مجدد” چشمان شما است. (توجه: خالص‌ها کارت‌های خاکستری 12% را توصیه می‌کنند. آنها نیز خوب هستند، به شرطی که هر بار از یک کارت استفاده کنید. نکته این است که به چیزی ثابت و خنثی نگاه کنید.)
  • ده دقیقه
    مانیتور خود را از نور مستقیم خارج کنید. هرگز اجازه ندهید منبع نور مستقیماً به صفحه نمایش برخورد کند.
  • پانزده دقیقه
    لوازم میز رنگی (تقویم، نشانگر، عکس، پوشه – هر چیزی که خاکستری نباشد) را از دید خود حذف کنید. اگر مانیتور شما منعکس کننده است، اقلام رنگارنگ را مستقیماً پشت سر خود قرار ندهید.
  • ده دقیقه در روز
    به چشمانتان اجازه دهید قبل از شروع کار با محیط سازگار شوند. به چشمان خود زمان دهید تا با فضای کار سازگار شوند، به خصوص اگر به تازگی از نور خورشید یا نور شب بیرون آمده اید. در صورت لزوم، از یک تایمر استفاده کنید.
  • ده دقیقه در هفته
    مانیتور خود را تمیز کنید. از یک پارچه بدون پرز برای پاک کردن آرام گرد و غبار و لکه های اثر انگشت، یا برای دستورالعمل های تمیز کردن به دفترچه راهنمای مالک خود مراجعه کنید. در صورت استفاده از عینک خود نیز همین کار را انجام دهید.
  • یک روز یا بیشتر
    پنجره های اطراف را با پرده ها یا صفحه های ضخیم بپوشانید. مزایای اصلی نور طبیعی دقت است – طبیعی‌تر از نور خورشید سخت است – و در دسترس بودن. اما نور طبیعی متفاوت است. در طول روز، با آب و هوا و فصل تغییر می کند.
  • یک آخر هفته
    فضای کاری خود را با خاکستری خنثی احاطه کنید. دیوارها را رنگ کنید و مبلمان تیره را با چیزهای ملایم جایگزین کنید. در حالت ایده آل، دسکتاپ شما باید تنها حدود 60 درصد از نوری را که به آن برخورد می کند منعکس کند. رنگ خاکستری خنثی GTI Munsell برای ایجاد پس‌زمینه‌های خنثی در میان عکاسان محبوب است.
  • آخر هفته یا زمان ارسال
    اگر نمی‌توانید نور دفتر خود را تنظیم کنید، /a> برای جلوگیری از تابش خیره کننده و تغییر شرایط.
illustration of a workspace ready for accurate color work

 

نکاتی برای کالیبره کردن مانیتور

هدف از کالیبراسیون حذف تغییر رنگ و بهینه سازی محدوده تونال مانیتور شما است. سایه ها باید غنی باشند اما همچنان جزئیات را نشان دهند. روشن ترین هایلایت ها نباید نه خیلی گرم و نه خیلی سرد باشند. در درازمدت، این باعث می شود رنگ دقیق و ثابتی داشته باشید.

در اینجا مراحل کلی آمده است:

  1. مانیتور خود را حداقل 30 دقیقه گرم کنید.
  2. گاما (5000–9500 درجه K، گاما 1.8–2.2) را انتخاب کنید.
  3. بهترین نقاط سفید و سیاه را بیابید.
  4. قرمز، سبز و آبی را متعادل کنید تا از پخش شدن رنگ جلوگیری کنید.
  5. این روند را هر ماه تکرار کنید.

بسیاری از برنامه ها شما را در این فرآیند راهنمایی می کنند. Adobe Gamma یک راه حل سریع محبوب برای کالیبره کردن نمایشگرهای CRT است. علاوه بر آسان بودن استفاده، با خرید فتوشاپ یا عناصر فتوشاپ رایگان است. راه حل های دیگر QuickGamma (Windows) وکالیبراتور سخت افزاری Datacolor’s Spyder.

 

من را انتخاب کن

رنگ دقیق و ثابت یکی از آن جزئیات جزئی است که اکثر مردم – از جمله طراحان وب – در مواجهه با خطاهای تجزیه، استانداردهای وب، اطلاعات نادرست مشتری و فشار مهلت خوب، آن را نادیده می گیرند.

اما این یکی از آن عناصری است که تجربه کلی بهتری را ایجاد می کند. هنگامی که طراحان متوجه انحراف در رنگ و سایه های گل آلود شوند، نداشتن انجام کار بهتر غیرعادی خواهد شد.

نوشته شده به طور انحصاری برای Webdesigner Depot توسط Ben Gremillion. بن یک طراح وب آزاد است که مشکلات ارتباطی را با طراحی بهتر حل می کند. .

Webrash

طراحی سایت

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *