Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
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
15 Design Tips to Make Professional Business Flyers in 2020 (With Great Designs)

Belarusian (беларуская мова) translation by Olya Misuraghina (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
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.