Vienetas 7 / 11

Išdėstymas ir sudėtis: išdėstymas, tinklelis ir vizualinė hierarchija

Pelnas:

  • Gebėjimas sukurti naudingą maketą su vaizdine hierarchija, lygiavimu, tinkleliu, tarpais ir židinio taško principais
  • Vaizdinių elementų su tarpais tekstu kūrimas ir redaguojamo teksto bei tikslios išdėstymo projektavimo programoje kūrimas
  • Galimybė apsisaugoti nuo nukirpimo ir laužo rizikos taikant formato taisykles, tokias kaip saugi zona ir spausdinimo nutekėjimas

Skirtumas tarp gražaus vaizdo ir veikiančio dizaino dažnai yra išdėstymas: elementų išdėstymas puslapyje. Išdėstymas lemia, kur plakate pirmiausia krypsta akis, ar tekstas kvėpuoja socialinės žiniasklaidos kortelėje ir kaip informacija sklinda brošiūroje. Šiame skyriuje sužinosime kompozicijos (elementų išdėstymo į visumą) principus ir sužinosime, kur AI yra naudingas ir ribojamas šiame procese. Svarbus faktas: AI sukuria vaizdinius elementus, tačiau tikslus išdėstymas yra dizainerio rankose, projektavimo programoje.

Kodėl AI negali vienas maketuoti?

AI sukuria holistinį „gerai atrodantį“ vaizdą; tačiau dizaino išdėstymas reikalauja pikselių tikslumo, redaguojamo teksto, lygiavimo ir nuoseklaus tarpų. Negalite perkelti teksto, tiksliai sulygiuoti logotipo ar išmatuoti AI sukurto vaizdo paraštės. Taigi profesionalus srautas yra toks: su AI generuokite fono/vaizdinius elementus, projektavimo programoje nustatykite maketą (tekstą, logotipą, lygiavimą). AI suteikia jums žaliavos ir kompozicijos idėją; Tiksli vieta yra jūsų sprendimas.

Pagrindiniai kompozicijos principai

  • Vizualinė hierarchija: elementų išdėstymas pagal svarbą. Akis pirmiausia kreipiasi į didžiausią / kontrastingą elementą. Nustatyta antraštės > paantraštė > tekstas > detalės tvarka.
  • Lygiavimas: elementų išdėstymas pagal nematomas linijas; Tai apsaugo nuo netvarkos ir suteikia tvarkos jausmą.
  • Tinklelis: sistema, dalijanti puslapį į nematomus stulpelius ir eilutes; Užtikrina nuoseklų daiktų išdėstymą.
  • Tarpas tarp elementų (neigiamas tarpas): tuščia erdvė tarp elementų; Tai leidžia dizainui „kvėpuoti“ ir būti skaitomam. Mažai vietos = ankšta ir mėgėjiška.
  • Pusiausvyra: vizualinio svorio pasiskirstymas; Jis gali būti simetriškas (tylus) arba asimetriškas (dinamiškas).
  • Kontrastas: nukreipia dėmesį pagal dydį, spalvą ar storį.
  • Židinio taškas: pirmoje vietoje, kur akis eina; turi būti sukurtas sąmoningai.
Patarimas: kurdami vaizdus ragindami pasakykite „palik vietos tekstui“ (pvz., „viršutinis trečdalis tuščias, paprastas“). Taip vėliau neįstrigsite pridėdami teksto prie AI vizualinio vaizdo ir galėsite nustatyti hierarchiją.

Žingsnis po žingsnio nustatykite išdėstymą

  1. Nustatykite tikslą: ką turėtų daryti šis dizainas? (skelbimas, pardavimas, informacija). Nustato prioritetų eiliškumą.
  2. Turinio inventorius: kas yra pavadinimas, alternatyvus tekstas, vaizdas, logotipas, skambutis (mygtukas / raginimas veikti)?
  3. Sukurkite hierarchiją: įdėkite svarbiausią elementą į stipriausią padėtį ir dydį.
  4. Pasirinkite tinklelį: nustatykite stulpelio struktūrą, kurioje lygiuosite elementus.
  5. Sukurkite vaizdą naudodami AI: sukurkite atitinkamų proporcijų foną / elementą, palikdami vietą tekstui.
  6. Lygiuoti projektavimo programoje: Lygiuoti tekstą, logotipą, skambutį; nustatyti erdves.
  7. Testas: priartinkite, pažiūrėkite iš toli, patikrinkite, kur akis krypsta pirmiausia.

Praktiniai akių nukreipimo būdai

Kompozicija iš tikrųjų yra menas nukreipti akį. Žiūrovo žvilgsnis neklysta atsitiktinai; Jis vadovaujasi tam tikrais ženklais, o geras dizaineris juos sąmoningai naudoja. Pirma, dydis ir kontrastas: didžiausias ir kontrastingiausias elementas pirmiausia patraukia akį, todėl ten pateikite svarbiausią žinią. Antroji – pirmaujančios linijos: natūralios vaizdo linijos (takas, rankos siekimas, stalo kraštas) nukreipia akį į tam tikrą tašką; Produkto ar pavadinimo įdėjimas ten, kur baigiasi šios eilutės, padidina efektą. Trečia, pabrėžkite erdvę: didelė tuščia erdvė aplink elementą išskiria tą elementą – vienas žodis sausakimšame puslapyje yra galingas. Ketvirta, skaitymo kryptis: daugumoje kultūrų akis juda „Z“ arba „F“ modeliu iš viršutinės kairės į apatinę dešinę; todėl logotipą įdėjus viršuje kairėje ir skambutį (mygtuką) apačioje dešinėje sukuriamas intuityvus srautas. Kurdami foną su AI galite pritaikyti šiuos metodus: „kompozicija, nukreipianti iš apačios kairės į viršų dešinę“ arba „vienas elementas centre, plati erdvė aplink jį“ ir tt Taip vaizdas tampa ne tik gražus, bet ir įrankiu, perteikiančiu žinią tinkama tvarka.

Formatas – ypatingas dėmesys

Kiekviena laikmena turi savo taisyklę: Instagram įrašas 1:1 arba 4:5, istorija 9:16, žiniatinklio reklamjuostė 16:9. Saugios zonos koncepcija yra svarbi: svarbius elementus laikykite viduje nuo krašto, kad jie nebūtų nukirpti arba po sąsajos elementais (profilis istorijoje, mygtukai). Spausdinant būtinas nubrėžimas: šiek tiek pailginti dizainą nuo krašto, kad pjovimo paraštėje nebūtų baltų linijų.

trys mini dėklai

1 atvejis – kvėpuojantis dizainas. Vieno dizainerio kampanijos kortelė buvo ankšta; pavadinimas, tekstas ir logotipas buvo sumaišyti. Jis atkūrė vaizdą su „viršutiniu trečdaliu tuščiu“ ir įdėjo tekstą toje erdvėje hierarchija. Bandomojoje grupėje labai padidėjo paspaudimų rodiklis; atėjo „įskaitomi“ atsiliepimai.

2 atvejis – saugios zonos klaida. Istorijos dizaine svarbus šūkis buvo apačioje; Jis buvo paslėptas po „slinkties“ mygtuku transliacijoje ir nepasirodė. Taikant saugios zonos taisyklę šūkis buvo dedamas į viršų ir per vidurį. Vėlesnėje kampanijoje žinia buvo aiški ir perdaryti nereikėjo.

3 atvejis. Spaudinio nutekėjimas. Brošiūra buvo išspausdinta be nutekėjimo; ant kraštų atsirado plonos baltos linijos ir 300 vnt. Kitas darbas papildė dizainą 3 mm nuolydžiu; Pjūvis išėjo švarus.

Kopijuojami šablonai

1) Sukurkite atskirą foną tekstui:

Sugeneruokite [medijos] dizaino fono vaizdą. Santykis: [1:1 / 9:16 / 16:9]. Viršutinį trečdalį palikite paprastą ir tuščią (pavadinimui). Prekės ženklo tonas: [būdvardžiai]. Įskaitomo teksto/logotipo uždėjimas. Spalvos atitinka paletę: [spalvos].

2) Hierarchijos planas:

Sukurkite vaizdinį hierarchijos planą šiam dizainui. Paskirtis: [skelbimas/pardavimas/informacija]. Elementai: [pavadinimas, alternatyvus tekstas, vaizdas, logotipas, figūrinė išnaša]. Suteikite kiekvienam elementui svarbos tvarką, siūlomą vietą ir santykinį dydį. Apibūdinkite kelią, kuriuo eis akis (židininis → antrinis).

3) Tinklelio ir išlyginimo rekomendacija:

Pasiūlykite paprastą tinklelį ir lygiavimo schemą tokiam turiniui: [turinio sąrašas], santykis [x]. Kiek stulpelių naudoti, kaip išlygiuoti elementus, kiek vietos (paraštės) palikti? Laikykite tai paprasta ir subalansuota.

4) Išdėstymo valdymas:

Įvertinkite šį dizaino teiginį kompozicijos požiūriu: ar hierarchija aiški, ar lygiavimas nuoseklus, ar yra pakankamai baltos erdvės, ar ji telpa saugioje erdvėje, ar aiškus židinio taškas? Atsakykite kaip pasiūlymą. Aprašymas: [įklijuoti]

Silpnas raginimas / Stiprus raginimas

Silpna: Padarykite nuolaidos reklamjuostės vaizdą ir pasakykite 50%.

Rezultatas: AI rašo sugadintą "50%", elementai išdėstyti atsitiktinai, negalite redaguoti teksto; negalima naudoti.

Galingas: sukurkite išpardavimo kampanijos fono vaizdą: 4:5 santykis, šilti energingi tonai, didelė erdvė tekstui viršuje kairėje, produktas apačioje dešinėje. Skaitomo teksto įdėjimas; Dizaino programoje sulygiuosiu pavadinimą, "50%" informaciją ir mygtuką.

Rezultatas: redaguojamas, hierarchinis fonas, paliekantis vietos tekstui.

Skirtumas: stiprus požiūris atskiria tekstą nuo AI, suplanuoja tarpus ir proporcijas, o išdėstymą palieka dizaineriui.

Kompozicijos principų lentelė

principu

Kas suteikia

Praktinis patarimas

hierarchija

Skaitymo tvarka

Padarykite svarbiausią didžiausią / kontrastingą

lygiavimas

tvarkos jausmas

Sureguliuokite nematomas linijas

tinklelis

Nuoseklumas

Naudokite kolonų sistemą

erdvė

Skaitomumas

Suspaudimas, atpalaiduotas kvėpavimas

saugi zona

nekarpymas

Laikykite daiktus nuo krašto

Kraujuoti

švarus spaudinys

Jis neša kraštą 3 mm

Dažnos klaidos

  • Teksto spausdinimas į AI: sugadintas, neredaguojamas tekstas; Įtraukite tekstą į projektavimo programą.
  • Nepaliekant vietos: ankštas, mėgėjiškai atrodantis dizainas.
  • Nėra hierarchijos: viskas vienodo dydžio; Akys nežino, kur dėtis.
  • Saugios zonos pamiršimas: svarbus elementas įstringa po sąsaja arba iškirpimu.
  • Praleidžiamas nutekėjimas: kraštas baltas ir spausdinimo likučiai.

Apibendrinant

Išdėstymas – tai apgalvotas elementų išdėstymas ir vaizdas paverčia veiksmingu dizainu. Hierarchija, lygiavimas, tinklelis, erdvė, balansas ir kontrastas yra pagrindiniai principai. AI gamina foninius ir vaizdinius elementus, suteikia kompozicijos idėjų; bet pikselių tikslumo išdėstymas, redaguojamas tekstas ir lygiavimas yra projektuotojo rankose projektavimo programoje. Vietos leidimas tekstui, saugi erdvė ir spausdinimo nutekėjimas yra paprastos taisyklės, lemiančios išvesties tinkamumą naudoti.

Taikymo užduotis

Pasirinkite terpę ir tikslą (pvz., „Instagram“ išpardavimo įrašas). Atlikite turinio inventorizaciją, sudarykite hierarchijos planą. Su AI sukurkite tinkamos proporcijos foną su vietos tekstui. Tada sulygiuokite ir įdėkite pavadinimą, alternatyvųjį tekstą, logotipą ir figūrinę išnašą projektavimo programoje (arba kaip eskizą ant popieriaus). Išbandykite, kur akis krypsta pirmiausia, priartindami ir žiūrėdami iš tolo, ir pasižymėkite tai.

kontrolinis sąrašas

  • [ ] Nustačiau paskirties ir turinio inventorių.
  • [ ] Sudariau vizualinį hierarchijos planą.
  • [ ] Padariau vaizdą su vietos tekstu ir teisinga proporcija.
  • [ ] Sulygiavau tekstą ir elementus projektavimo programoje.
  • [ ] Stebėjau saugią zoną ir nutekėjimo ribą (jei buvo spausdinama).
  • [ ] Sumažinau jį ir išbandžiau fokusavimo tašką.