Enhet 4 / 11

Bilddesign och visuell produktion: layout, färg, ikon och artificiell intelligens

Vinster:

  • Möjlighet att skapa läsbara bilder med layout, kontrast, typografi och färgprinciper och ta emot tillgängliga palett- och designförslag från artificiell intelligens
  • Förmåga att producera lämpliga bakgrunder, illustrationer och konsekventa ikoner med visuellt genererande artificiell intelligens och tillämpa praktiska begränsningar som att "inte skriva ut text på bilden"
  • Att inte representera falska bilder som äkta, och att kunna respektera designetik och tillgänglighetsgränser som upphovsrätt/varumärke och färgblindhet.

Rätt innehåll försvinner i fel design. Litet teckensnitt, krockande färger, rörig justering; Det försvagar även det bästa budskapet. I den här enheten kommer vi att använda artificiell intelligens i två jobb: (1) som rådgivare vid beslut om bildlayout, färg och typografi; (2) producera bilder, ikoner och bakgrunder du behöver med visuellt genererande artificiell intelligens. Målet är att producera konsekventa och läsbara bilder, även utan en designer.

Tre pelare av design: layout, färg, typografi

Några få begrepp. Layout är arrangemanget av element på bilden. Typografi är valet av teckensnitt och storlekar. Kontrast är skillnaden mellan text och bakgrund; låg kontrast är inte läsbar. Vitt utrymme är andrum mellan element; Var inte rädd för tomheten, den ger klarhet.

Praktiska startregler:

  • Justering: Justera element i ett virtuellt rutnät; Låt den inte svänga åt vänster eller höger.
  • Kontrast: Mörk text på ljus bakgrund eller vice versa. Det finns inget grått på grått.
  • Typografi: Upp till 2 typsnitt; titeln är stor och djärv, kroppen har en läsbar storlek (≥24 poäng är en bra bas i en salong).
  • Färg: 1 huvudfärg + 1-2 högdagrar + neutrala färger. Om du har en märkesfärg, håll dig till den.
  • Upprepning: Samma element på samma plats och i samma format på varje bild.

princip

Felanvändning

Rätt tillämpning

kontrast

Vit text på en ljusgrå bakgrund

Vit text på mörkblå bakgrund

Antal färger

7 olika livfulla färger

1 huvud + 2 högdagrar + gråtoner

typografi

4 olika typsnitt

1 rubrik + 1 texttypsnitt

utrymme

Full glidning från kant till kant

Marginaler och andningsrum

Varning: Färgblindhet är vanligt (cirka 8 % av männen). Separera inte bara information i rött/grönt; Lägg även till former, etiketter eller texturer.

Designkonsultverksamhet med artificiell intelligens

Modellen är inte ett designprogram, men det är en bra designkonsult. Färgpaletten, layoutidén och typografimatchningen föreslår:

Din roll: konsult för presentationsdesign. Varumärkes primärfärg: [#hex eller "mörk marin"]. Sektor: [ ... ]. Ton: [företag / varm / teknologisk]. Uppgift:1) Föreslå en tillgänglig färgpalett: 1 huvud, 2 accent, 2 neutral (hex-kod för varje och var den ska användas).2) Föreslå 2 kompatibla typsnitt för titel + brödtext (gemensamt, gratis).3) Beskriv en enkel layout för en "innehållsbild" (var är titeln, var är bilden, var är texten). Se till att kontrastförhållandena är läsbara.

För att kritisera en färdig bild (genom att ladda upp en skärmdump):

Kritisera denna bildbild genom ögonen på en designredigerare. Skriv ner problemen när det gäller kontrast, justering, textdensitet, antal färger och läsbarhet och föreslå en konkret lösning för varje. Jag strävar efter tydlighet, inte utsmyckning.

Bildgenererande artificiell intelligens: för vad, hur?

Bildgenererande artificiell intelligens (t.ex. verktyg som genererar bilder från text) gör receptet du skriver till en visuell. Det fungerar bra för bakgrund, konceptuell bild, illustration och ikonidé i presentationen. En bra bilduppmaning inkluderar: motiv + stil + komposition + färg + proportion + avsedd användning.

Skapa en presentationsomslagsbild. Ämne: teknik i hållbart jordbruk. Stil: enkel, modern, platt illustration, inte realistisk fotografering. Komposition: lämna tomt utrymme på höger sida (titeltexten kommer att hamna där). Färg: grön och jordtoner, lugn. Förhållande: 16:9 horisontellt. LÄGG TILL text/text (jag lägger texten).

För ikonuppsättningen:

Skapa en sammanhängande ikonuppsättningsidé för en presentation. Behov: snabbhet, säkerhet, besparingar, team, automation (5 koncept). Beskriv en enkel, linjestil, monokrom ikon för varje. Låt dem alla vara i samma visuella språk och tjocklek.

Tips: Lägg inte text på bilden. Texten i de bilder som produceras är ofta förvrängd/felaktig. Du lägger till texten i bildprogrammet.

Gränserna och etiken för visuell produktion

  • Fake looking real: Att presentera en tillverkad bild som en "riktig foto/verklig person" är missvisande. Nyheter ersätter inte bevis eller vittnesmål.
  • Upphovsrätt och varumärke: Att säga "imitera" ett befintligt varumärkes logotyp, karaktär eller stilen hos en viss artist kan leda till upphovsrätts- och varumärkesproblem.
  • Personbild: Det är oetiskt att ta fram en bild som liknar en verklig person och låta honom säga något från hans mun.
  • Noggrannhet: Den "datavisuella" som produceras är inte faktiska data; Det ersätter inte grafik. För grafen, använd plotten producerad med verkliga data (nästa enheter).

tre minifodral

Fall 1 — Kontrastkorrigering. En lärares bilder förbereddes i ljusblå text på ljusgrå bakgrund; Eleverna på bakre raden kunde inte läsa. AI föreslog mörk bakgrund + vit text och teckenstorleksökning. Läsbarhetsklagomålet från kulisserna är helt över.

Fall 2 — Konsekventa ikoner. Ett produktteam använde 9 olika stilar av ikoner i presentationen (några fyllda, några raderade). Han fick AI att beskriva en uppsättning i en stil; alla förs till linje stil. Presentationen fick feedbacken "det ser proffsigt ut", trots att ingen designer anställdes.

Fall 3 — Återgå från falsk bild. En marknadsförare skulle placera ett genererat AI-porträtt med titeln "vår nöjda kund" som en riktig kund. Teamet insåg att detta var missvisande; använde istället ett riktigt, auktoriserat kundfoto eller valde en abstrakt illustration. Därmed eliminerades förtroenderisken.

Svag prompt / Stark prompt

Svag:

Skapa en vacker presentationsbakgrund.

Ingen stil, ingen proportion, ingen färg, inget utrymme, inget syfte; Resultatet är slumpmässigt och ofta värdelöst.

Stark:

Skapa 16:9 presentationsbakgrund. Ämne: ekonomisk tillväxt. Stil: minimal, abstrakt geometrisk, enfärgad. Färg: mörk marinblå, guldaccenter, väldigt få detaljer. Lämna den vänstra tredjedelen tom (texten kommer dit). Lägger till text/siffror. Få en textläsbar bakgrund med hög kontrast.

Den andra ger kritiska detaljer som förhållande, ledigt utrymme, färg och "textinfogning"; Utgången kan användas direkt.

Vanliga misstag

  • Överdrivna färger och teckensnitt: Att förvandla bilden till en regnbåge är distraherande.
  • Låg kontrast: Lätt på ljus, oläsbar text.
  • Skriva ut text på en bild: Texten som produceras är förvrängd; lägg till texten i bildprogrammet.
  • Presentera det falska som verkligt: ​​Att använda den producerade personen/fotot som om det vore verkligt.
  • Särskiljning med enbart färg: Utesluter den färgblinda tittaren; Lägg även till former/etiketter.
  • Imiterar varumärkesstilen: Det skapar upphovsrätts- och varumärkesrisker.

Sammanfattningsvis

Designens tre pelare är layout, färg och typografi; Justering, kontrast, låg färg/typsnitt och mellanrum avgör läsbarheten. AI är en bra rådgivare när det gäller att rekommendera färgpalett, layout och typografi; Artificiell intelligens som producerar bilder producerar bakgrunds-, illustrations- och ikonidéer. Men skriv inte på bilden, framställ inte det falska som äkta och var försiktig med upphovsrätt/varumärke och färgblindhet. Den står i tjänst för estetisk ärlighet och läsbarhet.

Applikationsuppgift

Välj en av dina bilder. (1) Låt AI skapa en tillgänglig färgpalett (1 huvud + 2 högdagrar + neutrala) och 2 typsnitt. (2) Skärmbilda bilden, kritisera kontrast/justering och tillämpa minst 2 korrigeringar. (3) Generera en konceptuell bild med bildgenererande AI; Sätt regler för hastighet och "lägg till text" i prompten.

checklista

  • [ ] Jag använder högst 2 typsnitt och en begränsad färgpalett.
  • [ ] Text-bakgrundskontrasten är hög; Den läses från bakre raden.
  • [ ] Jag separerade informationen inte bara efter färg utan också efter form/etikett.
  • [ ] Jag skrev inte ut någon text på den genererade bilden; Jag lade till texten.
  • [ ] Jag presenterar inte den falska bilden som verklig; Jag kontrollerade risken för upphovsrätt/varumärke.
  • [ ] Objekt är justerade i ett rutnät, det finns tillräckligt med utrymme.