Page 55 - Tomal_Rafal_-_Osnovy_Web-Dizayna_-_2015

... Оно будет выглядеть

более четким, когда вы

будете смотреть на него

в браузере.

Теперь вам необходимо запомнить, что вам необходимо предоставить два набора изображений:
Размер: 1x size (обычные дисплеи) и размер 2x (дисплеи retina).

Это немного усложняет дизайнерскую работу и для того чтобы успевать выполнять проекты вам

нужно будет подготавливать файлы дизайна проекта не только для обычных дисплеев, но и для
дисплеев высокой четкости.

Есть, как минимум два способа как можно создать дизайн в Photoshop и быть уверенным, что твоя

графика может быть экспортирована для дисплеев ретина:

• Создайте начальный дизайн в 1x.

В данном случае размер пикселей на холсте будет соответствовать финальному
размеру в веб-браузере. Вы должны использовать только векторные фигуры и

изображения, которые легко могут быть масштабированы без потери качества до
размеров, которые необходимы дисплеям Retina.

Если вы работаете за дисплеем Retina, вся ваша работа в Photoshop будет размыта. Это
может быть довольно раздражительно, и вы возможно даже не сможете так работать.

• Создайте начальный дизайн в 2x.

В этом случае, размер пикселей на холсте будет в два раза больше, чем он должен
быть в браузере. Вам надо помнить, что все (размер шрифтов, высота строк и все

другие размеры) в 2 раза больше в вашем дизайне.

Вы можете использовать и векторные фигуры,и растровые изображения. Ваши растровые

изображения не потеряют в качестве после уменьшения масштаба перед экспортом. Если
вы работаете за Retina экраном, все в фотошопе будет четким и резким. Вы так же можете
работать за обычными экранами, но вам надо будет уменьшить размер дизайна до 50%.

Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 54

www.trk.kg