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

شماهم اگر برای طراحی وب، گاهی از فوتوشاپ استفاده می‌کنید، حتما به این مشکل برخوردید که هنگام خروجی گرفتن برای وب (Save for web and devices) نتیجه‌ای که از کار حاصل میشه، با چیزی که در فوتوشاپ روش کار می‌کردید اندکی متفاوت هست و این خیلی بده. تصور کنید که ساعت‌ها وقتتون رو صرف پیدا کردن رنگ‌های مناسب کردید و بخاطر این مشکل، کارتون چیزی که میخواستید نشد.

تفاوت رنگ در فوتوشاپ

بعد از کمی گشت و گذار در اینترنت و خرید کتاب Mastering Photoshop for Web Designers به پیشنهاد دوستان، بالاخره راه حل این مشکل رو پیدا کردم که امیدوارم به اشتراک گذاشتنش کمی از دردسرهاتون رو کم کنه.

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

قبل از اینکه راه حل رو بگم، بد نیست که با استاندارد رنگی sRGB IEC61966-2.1 آشنا بشید. این یه استاندارد رنگیه که با توجه به اینکه رنگ‌های خیلی زیادی رو پوشش میده، به عنوان یه استاندارد جهانی تو خیلی از دستگاه‌ها مورد استفاده قرار گرفته. بهتره حتی پروفایل رنگی مونیتورتون رو روی این استاندارد تنظیم کنید (واقع در تنظیمات رنگی سیستم عاملتون).

راه حل

  • بعد از باز کردن فایلتون، از منوی Edit گزینه‌ی Color Settings رو انتخاب کنید. داخل قسمت Working Spaces، بخش RGB روی گزیه sRGB IEC61966-2.1 قرار بدید و در نهایت روی OK کلیک کنید. ‌
  • حالا رنگ‌هاتون تنظیم شده، ولی برای اینکه بتونید رنگ‌هارو درست همونطور که در مرورگر دیده میشن ببینید، از منوی View، گزینه Proof Setup و در نهایت گزینه Monitor RGB رو فعال کنید. سپس از منوی View گزینه‌ی Proof Colorsرو انتخاب کنید. ‌
  • الان چیزی که در محیط فوتوشاپ میبینید دقیقا همون چیزی هست که در محیط وب‌ خواهید دید. ولی یه مرحله‌ی دیگه هم هست. برای خروجی گرفتن از فایل، از منوی File گزینه Save for Web & Devices رو انتخاب کنید، از بعد از انتخاب نوع تصویر و تنظیمات مربوطه، دقت کنید که دو گزینه Embed Color Profile و Convert to sRGB فعال نباشند. فعال نبودن این دو گزینه خیلی مهمه. ‌ توجه کنید که این تنظیمات برای فوتوشاپ در هر دو سیستم عامل ویندوز و مک یکسان هستند.

موفق باشید، سالار.


منتشر شده در: طراحی رابط کاربری ،  آموزش