— Valiko

Безопасные цвета в дизайне

При разработке и вёрстке дизайна чего-либо (в моём случае сайта) всегда важен цвет, цвет всего: шрифта, графических элементов и т.д. В таком деле случаются и казусы: на Вашем экране всё смотрится безукоризненно, а показав другому человеку (или начальству) на их экране Вы замечаете что-то не то, как было у Вас.

И вот существует такое понятие как «безопасные» цвета. При создании изображения для публикации в сети главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает похожий или смешивает несколько соседних цветов (dithering). Иногда первоначальный цвет может быть заменен на что-то совершенно неподходящее. Поэтому и существует палитра (таблица) таких вот безопасных цветов, которые везде будут отображаться правильным образом и без искажений.

Подобные палитры бывают доступны в сети Интернет. Здесь Вам и сам цвет, и значения RGB (для создания цвета в графическом редакторе), и значения HEX (для обозначения цвета в HTML). В статье «В помощь дизайнеру\вебмастеру» имеются для подобных целей вот такие онлайн сервисы: Таблица «безопасных» цветов от студии Артемия Лебедева, Kuler от Adobe,The Color Wizard, COLOURlovers.

Это конечно замечательно и хорошее подмастерье на первых парах, но я люблю работать по-другому. Так как я всё чаще сижу за Adobe Photoshop CS3, то и использовать его надо как можно ширше. Спасибо Сане Т. за вот такую удобную наводку в своё время. Итак, для всей нижеописанной хитрожопости нам потребуется:

• Главное: установленный и готовый к работе Adobe Photoshop CS3 (где я брал, описано в статье «Мой первый серьёзный фотомонтаж»);
• Условие: немного Вашей соображалки, усидчивости и внимания.

Запускаем Adobe Photoshop CS3 и чтобы получить палитру безопасных цветов, о которой шла речь выше, на панели инструментов выбираем цвет в палитре. В появившемся окне ставим галочку напротив строки Только Web-цвета и получаем такую вот удобную таблицу, а передвигая ползунок изменяем градации (смотрим рисунок). Но это еще не всё. Нам же надо посмотреть как что будет сочетаться: открываем графический элемент Вашего дизайна сайта и проверяем цвет того же шрифта сразу на деле. Выбрав то, что Вам подходит, можете смело вносить изменения в Ваш файл style.css . И дальше тестируйте всё как Вам угодно. Вот так я работаю над дизайном – всё в одной программе, хотя конечно и на локальной машине всё тестирую сперва .

Вот и всё. Думаю, Вам пригодится подобная хитрость-совет ещё не раз в создании Ваших дизайнерских идей.