Enota 7 / 11

Postavitev in sestava: postavitev, mreža in vizualna hierarhija

Dobički:

  • Sposobnost ustvarjanja uporabne postavitve z načeli vizualne hierarhije, poravnave, mreže, razmika in žariščne točke
  • Izdelava vizualnih elementov s prostori za besedilo in izdelava besedila, ki ga je mogoče urejati, in natančna umestitev v program za oblikovanje
  • Sposobnost preprečevanja tveganja izrezovanja in ostankov z uporabo pravil formata, kot sta varno območje in prestopanje pri tiskanju

Razlika med lepo sliko in dizajnom, ki deluje, je pogosto postavitev: postavitev elementov na strani. Postavitev določa, kam na plakatu najprej usmeri oko, ali besedilo diha na kartici družbenih medijev in kako se informacije pretakajo v brošuri. V tej enoti se bomo naučili principov kompozicije (razporeditev elementov v celoto) in kje je umetna inteligenca v tem procesu koristna in omejena. Ključno dejstvo: umetna inteligenca proizvaja vizualne elemente, vendar je natančna postavitev v rokah oblikovalca v oblikovalskem programu.

Zakaj AI ne more narediti postavitve sam?

Umetna inteligenca ustvari celostno »dobro« podobo; vendar postavitev dizajna zahteva natančnost slikovnih pik, besedilo, ki ga je mogoče urejati, poravnavo in dosleden razmik. Ne morete premakniti besedila, natančno poravnati logotipa ali izmeriti roba na sliki, ki jo ustvari AI. Profesionalni potek je torej naslednji: ustvarite ozadje/vizualne elemente z AI, nastavite postavitev (besedilo, logotip, poravnava) v programu za oblikovanje. AI vam da idejo o surovinah in sestavi; Natančna postavitev je vaša odločitev.

Osnovna načela kompozicije

  • Vizualna hierarhija: Razvrščanje elementov po pomembnosti. Oko se najprej osredotoči na največji/kontrastni element. Vzpostavljen je vrstni red naslov > podnaslov > telo > podrobnost.
  • Poravnava: Razporejanje elementov po nevidnih linijah; Preprečuje nered in daje občutek reda.
  • Mreža: sistem, ki razdeli stran na nevidne stolpce in vrstice; Zagotavlja dosledno postavitev predmetov.
  • Prazen prostor (negativni prostor): prazen prostor med elementi; Omogoča, da dizajn "diha" in je berljiv. Malo prostora = utesnjeno in amatersko.
  • Ravnovesje: Porazdelitev vizualne teže; Lahko je simetrična (tiha) ali asimetrična (dinamična).
  • Kontrast: usmerjanje pozornosti z razliko v velikosti, barvi ali debelini.
  • Osrednja točka: prvo mesto, kamor pride oko; mora biti oblikovan zavestno.
Namig: Ko ustvarjate slike, na poziv recite "pusti prostor za besedilo" (npr. "zgornja tretjina je prazna, navadna"). Tako se ne boste zataknili pri kasnejšem dodajanju besedila vizualnemu elementu umetne inteligence in lahko vzpostavite hierarhijo.

Nastavite postavitev korak za korakom

  1. Določite namen: Kaj naj ta zasnova počne? (oglas, prodaja, informacije). Določa prednostni vrstni red.
  2. Popis vsebine: Kaj so naslov, nadomestno besedilo, slika, logotip, klic (gumb/CTA)?
  3. Vzpostavite hierarhijo: Postavite najpomembnejši element na najmočnejši položaj in velikost.
  4. Izberite mrežo: Določite strukturo stolpcev, v katerih boste poravnali elemente.
  5. Ustvarite sliko z AI: ustvarite ozadje/element z ustreznimi razmerji, s prostorom za besedilo.
  6. Poravnaj v programu za oblikovanje: Poravnaj besedilo, logotip, klic; nastavite prostore.
  7. Test: Povečajte, poglejte od daleč, preverite, kam najprej usmeri pogled.

Praktične tehnike za usmerjanje očesa

Kompozicija je pravzaprav umetnost usmerjanja pogleda. Gledalčev pogled ne bega naključno; Sledi določenim znakom in dober oblikovalec jih zavestno uporablja. Prva sta velikost in kontrast: največji in najbolj kontrastni element najprej pritegne pogled, zato tja postavite najpomembnejše sporočilo. Drugo so vodilne črte: naravne črte na sliki (pot, izteg roke, rob mize) popeljejo oko na določeno točko; Umestitev izdelka ali naslova, kjer se te vrstice končajo, poveča učinek. Tretjič, poudarek s presledkom: zaradi velikega praznega prostora okoli elementa ta element izstopa - beseda, ki stoji sama na natrpani strani, je močna. Četrtič, smer branja: v večini kultur oko potuje v vzorcu "Z" ali "F" od zgornje leve proti spodnji desni; Če logotip postavite zgoraj levo in klic (gumb) spodaj desno, ustvarite intuitiven tok. Pri izdelavi ozadja z AI lahko te tehnike vključite v svoj poziv: »kompozicija, ki usmerja od spodnjega levega proti zgornjemu desnemu« ali »posamezen element v sredini, širok prostor okoli njega« itd. Tako slika postane ne le lepa, ampak tudi orodje, ki posreduje sporočilo v pravilnem vrstnem redu.

Oblika - posebna pozornost

Vsak medij ima svoje pravilo: Instagram objava 1:1 ali 4:5, zgodba 9:16, spletna pasica 16:9. Pomemben je koncept varne cone: pomembni elementi naj bodo noter z roba, da niso obrezani ali pod elementi vmesnika (profil v zgodbi, gumbi). Pri tiskanju je potreben prerez: da se dizajn nekoliko razširi od roba, da se izognete belim črtam na robu rezanja.

trije mini kovčki

Primer 1 – Dizajn, ki diha. Kartica ene oblikovalske kampanje je bila utesnjena; naslov, besedilo in logotip so bili pomešani. Reproduciral je sliko s »zgornjo tretjino prazno« in v ta prostor v hierarhiji postavil besedilo. Razmerje med prikazi in kliki se je v testni skupini znatno povečalo; prišla je "čitljiva" povratna informacija.

2. primer – napaka varnega območja. V zasnovi zgodbe je bil pomemben slogan na dnu; V oddaji je bil skrit pod gumbom "scroll" in se ni prikazal. S pravilom varnega območja je bil slogan postavljen navzgor in na sredino. V naslednji kampanji je bilo sporočilo jasno in preoblikovanje ni bilo potrebno.

3. primer — Prerez tiskanja. Brošura je bila natisnjena brez prereza; na robovih so se pojavile tanke bele črte in 300 kosov je bilo zavrženih (približno 1200 TL izgubljenih). Naslednje opravilo je dizajnu dodalo 3 mm zareze; Rez je prišel čist.

Kopirane predloge

1) Ustvarjanje razmaknjenega ozadja za besedilo:

Ustvarite sliko ozadja za [medijski] dizajn. Razmerje: [1:1 / 9:16 / 16:9]. Naj bo zgornja tretjina čista in prazna (za naslov). Ton znamke: [pridevniki]. Namestitev čitljivega besedila/logotipa. Barve se ujemajo s paleto: [barve].

2) Hierarhični načrt:

Ustvarite načrt vizualne hierarhije za naslednji dizajn. Namen: [oglas/prodaja/informacije]. Elementi: [naslov, nadomestno besedilo, slika, logotip, oblaček]. Vsakemu elementu dodelite vrstni red po pomembnosti, predlagani položaj in relativno velikost. Opišite pot, ki ji bo sledilo oko (fokalno → sekundarno).

3) Priporočilo za mrežo in poravnavo:

Predlagajte preprosto mrežo in shemo poravnave za naslednjo vsebino: [seznam vsebine], razmerje [x]. Koliko stolpcev naj uporabim, kako naj poravnam elemente, koliko prostora (roba) naj pustim? Naj bo preprosto in uravnoteženo.

4) Nadzor postavitve:

Ocenite naslednjo oblikovalsko izjavo v smislu sestave: ali je hierarhija jasna, ali je poravnava dosledna, ali je dovolj praznega prostora, ali se prilega varnemu prostoru, ali je žariščna točka jasna? Odgovori kot predlog. Opis: [prilepi]

Šibek poziv/močan poziv

Slabo: naredite sliko pasice s popustom in recite 50 %.

Rezultat: AI zapiše poškodovanih "50%", elementi so razporejeni naključno, besedila ne morete urejati; ni mogoče uporabiti.

Zmogljivo: ustvarite sliko ozadja za prodajno akcijo: razmerje 4:5, topli energični toni, velik prazen prostor za besedilo zgoraj levo, izdelek spodaj desno. Postavljanje berljivega besedila; Poravnal bom naslov, informacijo "50%" in gumb v programu za oblikovanje.

Rezultat: hierarhično ozadje, ki ga je mogoče urejati in pušča prostor za besedilo.

Razlika: Močan pristop loči besedilo od umetne inteligence, načrtuje razmik in razmerje ter prepušča postavitev oblikovalcu.

Tabela načel sestave

načelo

Kaj zagotavlja

Praktičen nasvet

hierarhija

Vrstni red branja

Najpomembnejše naj bo največje/kontrast

poravnava

občutek za red

Poravnajte nevidne črte

mreža

Doslednost

Uporabite sistem stolpcev

prostora

Berljivost

Stiskanje, sproščanje dihanja

varno območje

ne striženje

Držite predmete od roba

Krvavi

čisti tisk

Nosi rob za 3 mm

Pogoste napake

  • Tiskanje besedila v AI: poškodovano besedilo, ki ga ni mogoče urejati; Dodajte besedilo v program za oblikovanje.
  • Ne pušča prostora: utesnjen dizajn amaterskega videza.
  • Brez hierarhije: vse je enake velikosti; Oko ne ve, kam bi šlo.
  • Pozabljeno varno območje: Pomemben element se zatakne pod vmesnikom ali izrezkom.
  • Preskok prereza: bel rob in ostanki pri tiskanju.

Če povzamem

Postavitev je premišljena postavitev elementov in preoblikovanje slike v uporabno zasnovo. Hierarhija, poravnava, mreža, prostor, ravnotežje in kontrast so osnovna načela. AI proizvaja ozadje in vizualne elemente, daje ideje za kompozicijo; toda do pikslov natančna postavitev, besedilo, ki ga je mogoče urejati, in poravnava so v rokah oblikovalca v programu za oblikovanje. Omogočanje prostora za besedilo, varen prostor in prestop pri tiskanju so osnovna pravila, ki določajo uporabnost izpisa.

Aplikacijska naloga

Izberite medij in namen (npr. objava o prodaji na Instagramu). Naredite popis vsebine, naredite načrt hierarhije. Ustvarite pravilno proporcionalno ozadje s prostorom za besedilo z AI. Nato poravnajte in postavite naslov, nadomestno besedilo, logotip in oblaček v oblikovalski program (ali kot skico na papirju). Preizkusite, kam najprej usmeri oko, tako da približate in pogledate od daleč, ter si zabeležite.

kontrolni seznam

  • [ ] Določil sem namen in vsebinski popis.
  • [ ] Postavil sem vizualni načrt hierarhije.
  • [ ] Izdelal sem sliko s prostorom za besedilo in pravilnim razmerjem.
  • [ ] Tekst in elemente sem poravnal v programu za oblikovanje.
  • [ ] Opazoval sem varno območje in rob za prerez (če se je tiskalo).
  • [ ] Pomanjšal sem ga in preizkusil točko ostrenja.