Особливості І Секрети Веб-Дизайну Для Дисплеїв Retina І Дозволів 4К І 5К

1. Технології великих дозволів
2. Використання SVG
3. CSS
4. скрипт
5. Іконки і шрифти
6. Adobe Generator в Photoshop
7. операції Photoshop
8. Сценарій експорту макета
9. висновок

На ринку смартфонів, ноутбуків і PC частка пристроїв з дозволом екранів в 2К, 4К і 5К неухильно зростає і з кожним роком такої продукції стає все більше і більше. Відповідно, розвиток цифрової графіки, відео, веб-дизайну, анімації теж не стоїть на місці і має бути їм до пари, щоб на великих дозволах якісно і красиво все виглядало. Наприклад, той же сервіс YouTube вже має підтримку відео в 2К і 4К, Apple веде з 2014 року продажі iMac з дисплеями Retina 4К / 5К.

Для веб-дизайнерів і розробників такий розвиток технологій означає, що приходить час вести не просто оптимізацію сайту і робити його адаптивним, а й приділяти велике значення графіку, щоб вона бездоганно відображалася при великій якості. Щоб розібратися в "накочується" на людство прогрес, ми в цьому матеріалі розглянемо особливості великих дозволів дисплеїв Retina і користь Photoshop для веб-дизайнера в цьому питанні. Справа в тому, що екрани Retina встановлюються і на iPad / iPhone / iMac / MacBook і інші пристрої Apple, а оскільки частка користувачів цією технікою зростає в світі, то і сайти повинні вже мати підтримку даної технології.

Технології великих дозволів

У чому полягає різниця між 4K, 5K, Retina? Все зводиться до пікселів і багато хто знає це майже напам'ять. Але нагадаємо.

• HD має дозвіл 720 px.
• Full HD - 1920 px по горизонталі.
• QHD або 2К - 2048 px по горизонталі і 1080 по вертикалі.
• Quarter High Definition (не плутати з попереднім) - чверть Full HD, 960x540 px, воно переважно для мобільних пристроїв.
• Ultra HD або 4К має роздільну здатність 3840 X 2160 px (для споживчої техніки, моніторів, наприклад) і 4096 x 2160 px - для цифрових кінотеатрів.
• Retina 4K має здатність 4096 х 2304 px.
• Retina 5K у Apple iMac має роздільну здатність 5120 x 2880.

Apple, представляючи нову власну технологію Retina, розповіла і запевнила всіх, що людське око здатне сприймати набагато більшу кількість пікселів, тому, якщо матриця стандартного екрану в 15 дюймів і разрешеніі1440x 900 складається з пікселів того ж кількості (1440x900), то на Retina-екранах дозвіл при 15 дюймах одно 2880 x 1800 (рівно в два рази). Тобто, весь сенс технологією Retina - збільшення кількості пікселів на кадр.

Ніхто не сперечається, якість картинки при такій кількості пікселів неймовірно високо і зображення виглядає, як в глянцевих журналах або на фотографіях. Якщо ж сайти мають векторну графіку, то, зрозуміло, теж все відмінно виглядає. Але ж майже завжди веб-дизайн використовує растрову графіку і тут вже починаються проблеми з відображенням. І неважливо, iMac у замовника / відвідувача або iPhone / iPad. Проблема стосується самої технології Retina.

А виглядає вона так: якщо у нас є зображення 600 x 400 px, то на Retina-екрані якість помітно погіршиться, буде розмитим, нечітким і ін., Бо сам дозвіл має бути великим в два рази (для 2К) або чотири рази (для 4К), з великою кількістю пікселів. Початкова картинка самостійно збільшується в процентах і відбувається спотворення.

Так, зрозуміло, можна відразу створювати тільки файли великого дозволу і через код CSS / HTML прописати, як відображати кожну картинку (img src = "logo.png" height = "150" width = "150").

Але, оскільки не всі користувачі мають пристрої Apple (Retina тільки на них), то відвідувачам зі звичайними екранами моніторів доведеться жертвувати трафіком інтернету, щоб прогрузити високоякісні зображення, а потім чекати, коли вони зменшаться. На таке не всі можуть піти, а тому відвідувачам простіше буде покинути сайт і знайти йому альтернативу.

Зручне рішення проблем з графікою для всіх одночасно - мати кілька зображень для проекту, щоб кожен користувач бачив те, що для нього призначене. Прийнято, що дозволу екранів Retina позначаються @ 2x, @ 3x, @ 4х, а збільшення здійснюється у відсотках - 100, 200 і так далі.

Використання SVG

Всі зображення можна зберігати в форматі масштабованої векторної графіки або SVG. Це дуже зручний і незвичайний формат. Він зберігає дані зображення не в пікселях, як растрових форматів, а в текстовому XML, де описується геометрія картинки і являє собою векторний формат. Він зручний, оскільки зображення легко масштабуються і зберігають свою якість. Photoshop не може з ним працювати, але існують скрипти і розширення для експорту в даний формат.

Але SVG не підтримує роботу з фотографіями або артами. Для цих цілей все одно доведеться створювати растрові файли з різним дозволом. Зате SVG зручний для логотипів, іконок, графіків, діаграм. Альтернативою йому може стати PNG, втім, на сьогоднішній момент практично всі браузери підтримують даний формат.

CSS

Деякі окремі тіні, градієнти, кути, заголовки замість зображень можуть бути описані за допомогою CSS . Це зручно, оскільки запитів по http буде менше, трафік знизиться, і обробка відображення на екрані буде відбуватися швидше.

скрипт

Можна використовувати скрипт Retina.js . Вельми зручна річ. Як тільки користувач відкриває сторінку сайту, скрипт автоматично перевіряє який дозвіл у екрану і яка матриця пікселів. Потім, в разі наявності Retina, він шукає на сервері необхідні файли зображень і замінює їх на більш якісні. Умова така: зображення для Retina-пристроїв повинні мати в назвах приписку @ 2x, @ 3х, @ 4х.

Наприклад: [email protected].

Уже в такому варіанті, формати файлів зображень можуть бути різними: JPEG, PNG, GIF. Як працювати зі скриптом описано на сторінці проекту і це найпростіший сценарій, який існує на просторах інтернету.

Іконки і шрифти

Багато написів і букви можна замінити іконками, точніше іконочние шрифтом, за допомогою правила CSS - @ font-face. Їм можна замінити написи e-mail, телефонів, назви полів в формах, заголовки віджетів. Знайти їх можна на сервісах We love icon fonts , Font awesome , Icomoon . В останньому є система генерації PNG / SVG або Font і необхідного CSS коду.

Іконочние шрифт можна масштабувати, вони підтримуються всіма браузерами і вони часто зручніше, ніж зображення.

Adobe Generator в Photoshop

Зрозуміло, що створюючи макет сайту і адаптуючи його для пристроїв з Retina-дисплеями, виникає питання, чим може допомогти Photoshop. Відповідь: для створення зображень в різних дозволах. І в самому додатку Adobe вже ввела зручну функцію, яка дозволяє відразу ставити розширення файлів зображення і його необхідний розмір для Retina-дисплеїв.

В результаті не буде потрібно копіювати шари, вирізати їх, експортувати і зберігати потрібну. Більш того, додавши до назви файлу тільки коефіцієнт масштабування, файл створюється автоматично.

Працює це в Photoshop CC. Під час роботи з PSD відкрийте Файл -> Генерувати -> Набір зображень. У вас зовсім нічого не з'явиться, ніякого повідомлення або вікна. Але саме тепер можна задати ім'я шару і бажане розширення, а потім побачити в Провіднику Windows створену папку з файлом або, в нашому випадку, з файлами зображень.

Теги в назвах можуть бути:

• Розширення png - стандартне png32 з прозорим альфа-каналом.
• Розширення .png8 / .png24 / .png32
• Розширення .jpg - стандарт при якості стиснення 9
• Розширення .jpg (1-10) або .jpg (1-100%) - аналогічний вибір якості в цифрах або відсотках
• розширення .gif
• N-% або Npx X Npx - вказівка ​​масштабування і розміру нового зображення.

Наприклад, 200% logo.png - масштабується вихідне зображення на 200% і зберігається в файл logo.png. Інший варіант: logo.jpg5 - зображення зберігає з якістю стиснення 5.

Якщо потрібно створити два файли, один для Retina-пристроїв, інший для звичайних, то пишемо: 200% logo.png, logo.png

операції Photoshop

Ще один варіант автоматичного збереження в різних дозволах - це використання Action для Photoshop, який іменується як Retinize It . Про нього ми розповідали вже раніше, але нагадаємо, що працює він аналогічним способом, але додатково подає дизайнеру вікно з варіантом збереження зображення.

Сценарій експорту макета

Коли майстер працює над дизайном, то йому доводиться постійно збільшувати вихідний документ до 200% або 400%, щоб дізнатися, як оне буде відображатися на Retina-дисплеях. Можна зробити набагато простіше за допомогою сценарію psd-export-document-retina-png .

Завантажити його можна з GitHub і скопіювати в \ Adobe \ Adobe Photoshop (ваша версія) \ Presets \ Scripts \

Після цього, працюючи над дизайном макета в дозволі 1х, відкрийте Файл -> Сценарії -> ExportDocument2xPNG (або 3х). Процес не дуже миттєвий, але в папці з файлом PSD з'явиться татко Retina з файлом png. Це буде той самий макет, з яким ви працюєте, зі зведеними шарами і збільшений на 200%. При цьому всі зображення будуть відповідне оптимізовані, що головне, а не просто збільшені. Що і видно скріншоті. Логотип, наприклад, не спотворився, як це було представлено на скріншотах на початку статті при звичайному масштабуванні.

Це зручно, в цілому, для того, щоб бачити, що саме ще вам потрібно поліпшити для великих дозволів. Потім вже можна виділити потрібні шари і зберегти в необхідному розмірі та форматі.

висновок

Адаптуючи макет сайту для пристроїв Apple з Retina-дисплеями необхідно, звичайно, враховувати специфіку технології. Чи варто робити оптимізацію за замовчуванням? Залежить від замовника, але - бажано, бо ті ж iPhone / iPad є у багатьох. Що ж стосується дорогих iMac і пристроїв з 4К і 5К, то рідко, але і ними користуються. З іншого боку, на стандартному 4К вирішенні стандартні зображення будуть виглядати непоказно.

Зрозуміло, залишається ще багато питань про те, як попрацювати зі шрифтами і замінити іконками, що вибрати svg або png і багато іншого. Але це вже не для даного матеріалу.

Ми розглянули тільки частина і постаралися систематизувати, що ж таке Retina 4К / 5К, в чому сенс технології і як під неї «підлаштувати» веб-дизайн з тим, щоб сайт однаково добре виглядав на всіх пристроях. І головне, як обробити зображення, як запобігти спотворення. Адаптуєте ви дизайн сайту для 2К або 5К, але принцип завжди один - свої зображення для кожного дозволу. Для зручності зберігати їх зручніше в окремих папочках на сервері. Це зручно для всіх користувачів і коректно по відношенню до майбутніх відвідувачам. А що стосується великого розміру файлу, то існують різні способи додаткового стиснення.