Вітаю, дорогі друзі. В ефірі автор блогу zaurmag.ru - Заур Магомедов, верстальник з чотирьох річним досвідом роботи на момент написання статті. Чому я це виділив? Та тому, що весь цей час я тісно працював з популярним графічним редактором фотошоп.
Схема така - дизайнер малює дизайн сайту в фотошопі, далі передає його мені, верстальщику. Ось тут, коли я його відкриваю в своєму редакторі відбувалися незрозумілі речі (принаймні я тоді не розумів в чому справа) - при відкритті макета змінювалися кольори, теж саме і при збереженні картинок. З'являвся якийсь відтінок і в підсумку загальна картинка дизайну за кольором сильно відрізнялася від оригіналу. Виною тому було неправильно встановлений колірний профіль в фотошоп.
Так ось, якщо у вас виникла подібна ситуація, то в даній статті я поясню як налаштувати колірний профіль в фотошопі, щоб наша картинка не відрізнялася від оригіналу дизайнера. Я вже як то писав правила для верстальника , Де в одному з пунктів зазначалося, що верстка повинна строго відповідати дизайну. Як вже було сказано вище, виною тому було неправильний налаштований колірний профіль в фотошопі, тобто у дизайнера один колірний профіль, а у вас інший.
Щоб вирішити це завдання, відкриваємо фотошоп і йдемо в меню Редагування -> Налаштування кольорів або натискаємо на комбінацію клавіш Shift + Ctrl + K. У вікні налаштувань кольорів встановлюємо такі параметри:
- RGB: RGB монітора (Monitor RGB) - «тут профіль вашого монітора» (в лапках повинен бути ваш профіль монітора)
- CMYK: US Web Coated (SWOP) v2
- Градації сірого (Gray): Dot Gain 20%
- Плашка (Spot): Dot Gain 20%
- Виставляємо все три галочки на пунктах: Розбіжність профілів (Profile Mismatches), Відсутність профілів (Missing Profiles). Це потрібно для того, щоб картинкам присвоювався профіль вашого дисплея.
Якщо що то незрозуміло дивимося скріншот.
Тепер якщо ви хочете оптимізувавши зберегти картинку для сайту, то йдемо в меню Файл -> Зберегти для Web ... У вікні, знаходимо пункт «Перетворити в sRGB» та знімаємо з нього галочку. Це робиться для того, щоб зображення взагалі не надавався ніякої профіль. Далі, вибираємо потрібний формат - jpg, gif або png і зберігаємо.
Тепер наші картинки будуть відповідати макету дизайнера і виглядати однаково в усіх браузерах.
На цьому статтю завершую. Сподіваюся кому то вона допоможе вирішити проблему. Мені ось допомогло. До зустрічі. Поки що!
Перевірка орфографії
Чому я це виділив?
