Retina графика в макетах PSD

Мини пост о том как готовить retina графику в ваших макетах.

Часто встречаю вопросы о том, как передавать верстальщику свои макеты и он из них мог сделать сайт с новомодной ретиной и ваши дизайны, логотипы, иконки не смотрелись бы расплывчатыми на экранах с поддержкой Retina. Секрет прост.

Начнем с того, что кнопки и многие другие элементы на сайте можно реализовывать путем CSS, их каким-то особым способом подготавливать не надо, также это касается и бэкграунд картинок в шапке или любом другом блоке на странице, они и так будут выглядеть достойно.

Что делать с иконками, небольшими иллюстрациями, логотипами? Просто они у вас должны быть в оригинале (в исходнике) в 2x раза больше, чем те какие в конечном счете на макете. Для этого вставлять в макет их нужно как Smart Objects, и уже их уменьшать до нужного размера в макете. Верстальщики сами отмасштабируют графику в размере 2x.

Еще для мелочей и одноцветных пиктограмм можно использовать иконочные шрифты. Могу порекомендовать сервис по созданию таких шрифтов — fantastic.me Теперь иконки с соцсетями, будут идеально выглядеть на ретине в любом размере и легко средствами CSS менять свой цвет, например, при наведении на них курсора.