Асаблівасці І Сакрэты Вэб-Дызайну Для дысплея 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К, але прынцып заўсёды адзін - свае выявы для кожнага дазволу. Для зручнасці захоўваць іх зручней у асобных татачка на сэрвэры. Гэта зручна для ўсіх карыстальнікаў і карэктна ў адносінах да будучых наведвальнікам. А што тычыцца вялікага памеру файла, то існуюць розныя спосабы дадатковага сціску.