Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Flat Design
Design

10 галоўных прыёмаў па стварэнні плоскай графікі

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Top Design Tips.
10 Tips for Designing High-Impact Magazines
10 Design Tips to Make a Professional Business Flyer

Belarusian (беларуская мова) translation by Olya Misuragina (you can also view the original English article)

Flat design movie icons

У гэтым артыкуле мы пагаворым пра плоскі дызайн.  Вы напэўна ўжо чулі пра яго як пра адзiн з галоўных трэндаў у дызайне на працягу некалькіх гадоў.  Давайце лепей даведаемся пра гэты трэнд - што гэта, адкуль прыйшло і што трэба для стварэння акуратнага, яркага і адаптыўнага плоскага дызайну! 

Вы можаце знайсці мноства выдатных прыкладаў разметкі вэб-старонак у плоскім стылі, плоскіх абразкоў, шаблонаў і іншых матэрыялаў на Envato Market.  Зірніце на іх, каб мець дакладнае ўяўленне пра тое, як выглядае сучасны плоскі дызайн! 

1. Што такое плоскі дызайн? 

Плоскі дызайн - гэта модны мінімалістычны стыль карыстальнiцкага інтэрфейсу і графічнага дызайну, у якім выкарыстоўваецца мінімум элементаў і выключаны складаныя колеры, градыенты, блікі і іншыя зіхатлівыя, тэкстурныя, ценявыя эфекты. 

flat movie icons
Набор плоскіх абразкоў у тэматыцы кіно і тэатра 

Плоскі дызайн прама процілеглы скевамарфiзму і насычанаму дызайну.  Аднак, магу адзначыць, што плоскі дызайн не такі просты, якім можа здацца.  У ім могуць прысутнічаць некаторыя прыкметы скевамарфiзма, але мы пагаворым пра гэта пазней. 

skeumorphic movie icons
Скеваморфныя абразкі ў тэматыцы кіно з кіраўніцтва «Як стварыць гламурны кіна-постэр у Adobe Illustrator» 

У цэлым, плоскі дызайн дапамагае сканцэнтравацца на змесце без адцягнення ўвагi вiзуальнымі эфектамі.  Ён падкрэслівае прастату элементаў і ў той жа час робіць інтэрфейс больш аператыўным, хуткім і простым ў выкарыстанні. 

2. Трохі гісторыі 

Плоскі дызайн вядомы тым, што выкарыстоўваўся задоўга да таго, як стаў вялікім трэндам у дызайнерскай супольнасці.  Ён быў шырока распаўсюджаны ў 80-я дзякуючы тэхналогіям, якія не маглі ствараць і падтрымліваць складаныя эфекты, тэкстуры і формы.  Аднак нават у тыя гады дызайн атрымаў свае першыя найпростыя скеваморфныя характэрныя рысы ў спробах выглядаць больш набліжаным да рэальнасці. 

Плоскі дызайн, якім мы бачым яго цяпер, пачаў набіраць папулярнасць пасля таго, як Microsoft пачала выпускаць прадукцыю ў так званым стылі Metro.  Metro - гэта мова канструявання карыстацльнiцкага інтэрфейсу, створаная Microsoft, і яна прастая, акуратная і сучасная. 

У 2010 годзе Microsoft выпусціў Windows Phone 7, у якім выкарыстоўваўся просты карыстальнiцкі інтэрфейс у плоскім стылі з вострымі бакамі і зразумелай графікай, успадкаванай ад аднаго з ранніх Microsoft (Zune).  Пазней, натхніўшыся поспехам, Microsoft выпусціў Windows 8 OS, заснаваную на той жа плоскай графіцы ў стылі Metro

microsoft metro design
Прыклад дызайну Microsoft Metro у Windows 8

Нарэшце, плоскі дызайн дасягнуў піка папулярнасці ў 2013 годзе, калі Apple прадставілі iOS 7, прэзентаваўшы яе новы дызайн і абсалютна змяніўшы ўсе папярэднія элементы карыстацльнiцкага інтэрфейсу, уключаючы абразкі і шрыфты.  Яны стварылі вельмі падрабязныя кіраўніцтвы па дызайне карыстацльнiцкага інтэрфейсу і абразкоў

apple flat design
Apple iOS 7 з абразкамі ў плоскім стылі 

Неўзабаве пасля гэтага Google таксама памяняла стыль сваіх вэб-старонак і прыкладанняў на плоскі дызайн, назваўшы яго матэрыяльным дызайнам.  У Google ёсць цэлы раздзел, прысвечаны матэрыяльнаму дызайну, у тым ліку яго мэты, прынцыпы і выдатныя кіраўніцтвы па стварэнні матэрыяльных абразкоў, карыстацльнiцкага інтэрфейсу, макетаў старонак і г.д.

material design google
Некаторыя прыклады падзелу матэрыяльнага дызайну 

Google З тых часоў плоскі дызайн стаў галоўным кірункам у дызайне на працягу апошніх некалькіх гадоў, зрабіўшы вэбсайты, прыкладаннi і элементы дызайну элегантнымі, акуратнымі і стыльнымі. 

Падводзячы вынік, можна казаць пра тры глабальныя прыклады плоскага дызайну, якія можна згадаць у свеце сучаснага медыя: 

  • Дызайн Microsoft Metro 
  • Дызайн Apple iOS 7 
  • Матэрыяльны дызайн Google 

3. Прытрымлівайцеся прастаты 

Плоскі дызайн відавочна названы плоскім з-за адсутнасці трохмерных элементаў і эфектаў, такіх як градыенты, тэкстуры, блікі, залішнія адценні і цені.  Плоскі стыль - гэта двухмерны спосаб візуалізацыі аб'екта.  Акрамя гэтага, складаныя аб'екты вельмі спрошчаныя і стылізаваныя.  Часам мы малявалі толькі сілуэты або контуры, якія робяць аб'ект вядомым без другарадных дэталяў. 

simple flat icons
Плоскія абразкі 

У цяперашні час мінімалізм - гэта сусветны трэнд, і такая прастата формаў і выкарыстанне вострых краёў падкрэслівае акуратны і візуальна прыемны дызайн.  Простыя формы больш даступныя і лёгкія ва ўспрыманні.  Яны сапраўды робяць дызайн мінімалістычным і акуратным, пазбягаючы перагружанага і бязладнага выгляду.

4. Ствараем ідэальнасць

Калі гаворка заходзіць пра плоскія абразкі і элементы карыстацльнiцкага інтэрфейсу, неабходна зрабіць іх як мага больш акрэсленымі, дакладнымі і ідэальнымі ў піксельным стаўленні. Гэта важна і для растравай, і для вектарнай графікі. 

У гэтым выпадку ўсё зразумела ў Adobe Photoshop, бо яна працуе з растравай графікай, якая відавочна піксельная. 

flat icons in photoshop
Як стварыць стыльныя плоскія абразкі ў тэматыцы космасу ў Adobe Photoshop 

Adobe Illustrator - вектарная графічная праграма, якая працуе з лініямі і крывымі, званымі вектарамі, якія малююцца матэматычна.  Нейкі час таму Adobe Illustrator яшчэ не была асабліва зручная ў працы з піксельнай графікай.  Добрая навіна - апошнія версіі Adobe Illustrator сталі выдатным інструментам для дызайнераў, якія працуюць з піксельнай графікай. 

Акрамя гэтага, вектарная графіка першапачаткова мае на ўвазе працу з плоскімі, простымі фігурамі з выразнымі колерамі і сеткамі.  Adobe Illustrator вельмі лёгка наладжваецца і дазваляе вам змяняць адзінкі вымярэння, накіравальныя лініі і сеткі пад вашыя патрэбы, выраўноўваць аб'екты і адчувальна выкарыстоўваць розныя віды.  Усё гэта дазваляе значна лягчэй ствараць піксельны дызайн, які застаецца выразным і акуратным на любым маніторы.  Калі вам патрэбная графіка адзін-у-адзін строга да пікселя, зірніце на гэта выдатнае кіраўніцтва па стварэнні ідэальных піксельных работ у Adobe Illustrator

The pixel grid in Adobe Illustrator
Як стварыць ідэальную піксельную графiку ў Adobe Illustrator 

5. Адметныя колеры і трэнды 

Адной з самых спецыфічных рысаў плоскага дызайну, акрамя фігур, з'яўляецца выкарыстанне колеру.  Большасць каляровых палітраў для плоскіх элементаў складаецца з некалькіх базавых колераў.  Яркія, глыбокія, інтэнсіўныя, насычаныя колеры ўласцівыя плоскаму дызайну.

Каляровая схема ў плоскім дызайне не абмежаваная некалькімі пэўнымі колерамі.  Яна ўключае ў сябе некалькі розных адценняў і паўтонаў і залежыць ад таго, што вы адлюстроўваеце - няхай гэта будуць яркія цукерачныя абразкі або аб'екты ў рэтра-стылі ў мяккай каляровай палітры. 

flat retro funfair
Выява з рэтра-кірмашом у плоскім стылі 

Калі вы - дасведчаны дызайнер і валодаеце пачуццём колеру, можаце паэксперыментаваць з панэллю Колеру ў Photoshop або Illustrator, абіраючы колеры па здагадцы.  Аднак для гэтага працэсу патрэбная інтуіцыя, практыка і добрыя навыкі.  Ёсць некалькі інструментаў, якія могуць спатрэбіцца для стварэння патрэбнай палітры. 

Некаторыя з іх падыходзяць для ўсіх відаў дызайну і ілюстрацый, не толькі для плоскага дызайну.  Гэта такія сэрвісы, як Adobe Color CC, раней вядомы як Kuler.  Цяпер вы можаце ўвайсці ў яго праз сайт або наўпрост з прадуктаў Adobe.  Гэта вельмі гнуткі інструмент, які дазволіць вам стварыць сваю палітру або выкарыстоўваць шырокі выбар створаных карыстальнікамі палітраў з бібліятэкі.

Яшчэ адзін просты і зручны генератар палітраў - Coolors.  Проста націскайце на прабел і змяняйце колеры сваёй палітры, якую можна наладзіць і экспартаваць. 

Ёсць яшчэ некалькі падобных сэрвісаў са стандартнымі палітрамi, якія могуць спатрэбіцца.  Аднак ёсць адзін сэрвіс, створаны спецыяльна для плоскага дызайну.  FlatUIColors.com, створаны Designmodo, - гэта серыя ўзораў плоскіх колераў з шаснаццатковымi кодамі, з якой вельмі зручна працаваць.  Гэты сэрвіс вельмі папулярны сярод дызайнераў, якія шукаюць колер для ідэальнага піксельнага дызайну.  Паспрабуйце! 

Вы таксама можаце знайсці вялікую разнастайнасць каляровых узораў і палітраў ў кіраўніцтве да матэрыяльнага дызайну Google

6. Доўгія цені 

Як згадвалася вышэй, плоскі дызайн просты і ўсёабдымны, таму ў ім не вітаецца выкарыстанне эфектаў любога выгляду.  Аднак ёсць адзін эфект, які выйшаў з плоскага дызайну.  Ён стаў трэндам і адной з характэрных рысаў. 

Мы гаворым пра эфект доўгага ценю.  У яго ёсць некаторыя тыповыя характарыстыкі, якія робяць гэты эфект вядомым.  Гэта кут 45 градусаў і вялікі памер (цень павінны быць у два разы больш за аб'ект).  У выніку доўгія цені дадаюць істотную глыбіню плоскаму дызайну. 

using long shadows in flat design
Плоскi абразок з доўгiм ценем 

Такі эфект робіць аб'ект больш трохмерным і ў той жа час захоўвае плоскі выгляд. 

7. Працуем са шрыфтам 

Шрыфт грае вялікую ролю ў плоскім дызайне.  Вельмі часта тэкст становіцца галоўным элементам кампазіцыі, у той час як плоскія элементы не адцягваюць гледача. 

У плоскім дызайне звычайна выкарыстоўваюцца простыя тыпы шрыфту, робячы ўсю карцінку акуратнай і чытэльнай.  Вы можаце знайсці мноства бясплатных шрыфтоў у Adobe Typekit, калі карыстаецеся прадуктамі Adobe.  Альбо можаце скарыстацца выдатнай крыніцай бясплатных шрыфтоў на любы густ - Font Squirrel.  Спачатку прачытайце ліцэнзійнае пагадненне, калі хочаце выкарыстоўваць шрыфт у камерцыйных мэтах. 

У большасці плоскіх дызайнаў выкарыстоўваецца надпіс у верхнім рэгістры і кантрасныя колеры, робячы тэкст больш лёгка чытэльным. 

using fonts in flat design
Простая і элегантная шматмэтавая тэма для HTML 

З асцярожнасцю абірайце шрыфт.  Ён павінны падкрэсліваць усю карцінку, адпавядаць ёй і не выглядаць староннім аб'ектам.  Гэта не значыць, што вы не можаце выкарыстоўваць шрыфты Serif ці нейкія складаныя рукапісныя шрыфты з завітушкамі і дадатковымі элементамі.  Проста прытрымвайцеся мінімалістычнага выгляду і захоўвайце баланс.  У большасці паспяховых плоскіх дызайнаў часта выкарыстоўваюцца шрыфты Sans Serif, бо ў іх прамая абза і яны строгія, як і ўсе элементы ілюстрацый ў плоскім стылі. 

8. Перавагі і недахопы плоскага стылю 

Хоць плоскі стыль і стаў такім папулярным з-за шматлікіх пераваг, у яго ўсё яшчэ ёсць недахопы, з якімі сутыкаюцца дызайнеры, якія працуюць у гэтым стылі.  Давайце пералічым перавагі і недахопы плоскага дызайну. 

Flat Space Exploration Banners
Плоскія банеры на тэму даследавання космасу

Перавагі

Гэта трэнд 

Плоскі дызайн развіўся ў трэнд, прыцягваючы шмат пазітыўнай увагі сярод дызайнераў і вэб-дызайнераў, і не падобна, што ён збіраецца здаваць пазіцыі.  Наадварот, ён распаўсюджваецца ўсё больш і больш, прымаючы новыя формы і прыкметы, i паступова трансфармуецца ў нешта больш крэатыўнае. 

Прастата 

Плоскі дызайн просты, мінімалістычны і акуратны.  Калі справа тычыцца сайтаў, плоскі дызайн сапраўды дапамагае вам засяродзіцца больш на змесце, а не на адцягваючых візуальных эфектах.  Ён таксама добра падыходзіць для інтэрфейсаў мабільных прыкладанняў: зразумелы дызайн з вялікімі плоскімі кнопкамі робіць яго ідэальным для працы на мабільных прыладах. 

Яркасць 

Выкарыстанне колеру - яшчэ адзін вялікі плюс плоскага дызайну.  Яркія, глыбокія колеры выглядаюць прывабна і акуратна, а недахоп градыентаў робіць дызайн сучасным.  Больш за тое, такія чыстыя колеры ствараюць пазітыў і ўцягванне, ствараючы патрэбны настрой. 

Недахопы 

Ёсць шмат іншых пераваг плоскага дызайну, але ніякi дызайн не дасканалы, і мы не можам ідэалізаваць яго.  Ёсць недахопы, якія трэба адзначыць: 

Нягнуткасць 

Часам недахоп дадатковых дэталяў або візуальных эфектаў выклікае складанасць у стварэнні зручнага і прыязнага інтэрфейсу, што робіць увесь дызайн нягнуткімі.  Не ўсім карыстальнікам зручны такі дызайн, бо iм можа быць складана знайсцi клікабельныя элементы на старонцы або ў мабільным дадатку, бо яны неінтэрактыўныя. 

Праблемы са шрыфтамi 

Як згадвалася раней, не кожны шрыфт падыходзіць да плоскага дызайну.  Часам выява з яркімі прамымi шрыфтамі выглядае вельмі збалансаванай і стыльнай.  Аднак няправільна абраны шрыфт можа разбурыць створаны дызайн.  Вам сапраўды трэба адчуваць, якія шрыфты падыходзяць для плоскага дызайну, а якія - не.  З-за слабых навыкаў складана абраць прыдатны шрыфт. 

Слабая графіка

З-за абмежаванняў у выкарыстанні эфектаў, колераў і шрыфтоў плоскі дызайн можа выглядаць занадта проста і несамавіта.  Яго мінімалізм таксама можа стаць вялікім недахопам - усе гэтыя дызайны ў канчатковым выніку становяцца вельмі падобнымі.  Даволі складана зрабіць так, каб вашы абразкі або вэб-старонкі адрозніваліся па дызайне ад чыіхсьцi яшчэ, бо мы выкарыстоўваем тыя ж спрошчаныя фігуры, абмежаваныя каляровыя палітры і падобныя шрыфты.  У выніку з цягам часу плоскі дызайн можа стаць сумным. 

9. Будучыя трэнды ў плоскім дызайне 

Плоскі дызайн нельга назваць цалкам сфармаваным і развітым.  Магчыма, з-за недахопаў, апісаных вышэй, ён трансфармуецца і развіваецца, набываючы новыя рысы і візуальныя дапрацоўкі. 

Калі вы прыгледзіцеся да апошніх прыкладаў плоскага дызайну, то заўважыце, што ён на самай справе мае адступленнi ад строгіх правілаў, і пачынаюць дадавацца лёгкія эфекты, такія як градыенты (з малым кантрастам), цені, блікі і іншыя візуальныя паляпшэнні. 

complex flat design
Набор вектарных плоскіх банэраў на тэму паходаў 

Гэтыя ўпрыгажэнні сапраўды надаюць дызайну глыбіню, не робячы яго перагружаным дэталямі, як часам здараецца з скеваморфнымi малюнкамі.  Гэтыя нязначныя паляпшэнні робяць плоскі дызайн больш адаптыўным і зручным, а таксама прыўносяць свежыя ідэі, робячы яго больш разнастайным. 

У выніку плоскі дызайн не губляе сваіх характарыстык, наадварот, ён становіцца больш цікавым і гнуткім, што робіць яго лепш. 

10. Як пачаць? 

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

Flat Business Concept Banners
Плоскія банэры бізнес-канцэпцыі 

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

Вось некаторыя кіраўніцтвы, якія могуць быць вам карысныя. 

Калі вы працуеце ў Adobe Illustrator, зірніце на гэтыя кіраўніцтвы па стварэнні плоскіх абразкоў: 

Паспрабуйце стварыць больш дэталяў, такіх як градыенты, блікі і тэкстуры, дадаўшы глыбіні і рэалізму:

Паспрабуйце адлюстраваць больш плоскіх аб'ектаў, каб стварыць плоскую сцэну: 

Паспрабуйце стварыць больш дэталёвы гарадскі пейзаж: 

Можа, вы працуеце ў Affinity Designer?  Вось некалькі карысных кіраўніцтваў і для вас! Пачніце з стварэння аднаго простага абразка: 

Затым стварыце цэлы набор абразкоў: 

Рухайцеся далей і стварыце постэр з элементамі ў плоскім стылі! 

Як я казала, растравая графіка заснаваная на пікселях, таму выдатна падыходзіць для дызайну абразкоў.  Калі вам зручней працаваць у Adobe Photoshop, спакойна выкарыстоўвайце яе і для стварэння плоскага дызайну! 

Нарэшце, калі хочаце палепшыць свае навыкі і дадаць больш складаныя дэталі і эфекты свайму дызайну, паглядзіце гэты відэакурс па стварэнні плоскіх элементаў для працоўнай вобласці ў рэкламе з дэталёвым апісаннем і пакрокавым працэсам малявання кожнага аб'екта з самага пачатку да канца. 

Creating Flat Workspace Elements for Advertisements
Ствараем плоскія элементы для працоўнай вобласці ў рэкламе

Давайце падвядзем вынікі 

Мы раскрылі некаторыя факты з гісторыі плоскага дызайну і пагаварылі пра колеры, формы і шрыфты.  Мы разгледзелі плоскі дызайн з розных бакоў, абмеркавалі яго перавагі і недахопы, а таксама пералічылі некаторыя асноўныя моманты, неабходныя для стварэння добрага дызайну. 

Спадзяюся, вы запазычылі новую інфармацыю з гэтага артыкула ці хаця б палічылі яе цікавай і натхняльнай.  Вам сапраўды варта паспрабаваць сябе ў стварэнні карцінкі ў плоскім стылі, калі вы яшчэ не спрабавалі. 

У цэлым, што яшчэ можна адзначыць, кажучы пра плоскі дызайн? 

Калі вам сапраўды падабаецца плоскі дызайн, яго прамыя формы, яркія колеры, выразныя шрыфты і ў цэлым яго акуратны і мінімалістычны выгляд, наперад! 

Ён папулярны, але як і ў іншых відах графічных стыляў, не варта абмяжоўваць сваю крэатыўнасць адным і тым жа наборам тэхнік і візуальных элементаў.  Бягучыя трэнды не азначаюць, што вы не можаце абраць любы іншы стыль дызайну для свайго праекту.  Скевамарфiзм выглядае складаным, але няма прычын перастаць маляваць рэалістычныя аб'екты з наборам дробных дэталяў і тэкстур.  Проста памятайце, што ваш дызайн павінны падыходзіць пэўнаму праекту, адлюстроўваючы адчуванні і выгляд, захоўваючы зручнасць прымянення і функцыі.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.