Ved at indstille billeder i type kan du udtrykke mere end ord eller billeder kan alene.

Effekten packer meget information i et stramt rum. Men det kan blive grimt, hvis teksten og billederne er i modstrid med hinanden.

Designere kan fjerne katastrofer ved at holde deres mening i tankerne: at udtrykke ideen klart bør trodse "wow" -faktoren i teknikken.

Indstilling af billeder direkte i tekst blander ligefrem kommunikation af ord med den følelsesmæssige virkning af fotos.

Ord state, og fotos udtrykke. Men når billeder går tabt eller tekst bliver forvirret, eller begge, får vi konflikt. Billeder og tekst kan harmoniseres problemfrit, men kun hvis vi følger nogle retningslinjer, der balancerer læsbarheden af ​​begge. Læs videre for at finde ud af, hvordan du effektivt kan blande tekst og billeder.

Afbalancering af tekst og billedlæsbarhed

Tænk på brevformularer som billedrammer ... omend usædvanlige. Indstilling af et billede i tekst kræver, at du fjerner klumper fra billedet. For at bevare billedets læsbarhed skal du bestemme hvilke dele af billedet der er tale om. Det er bedst, hvis brevformularerne ikke trænger for meget på billedet.

Eksempel på hvordan breve skæres i billeder

Ovenfor skæres to trekanter ind i billedet fra toppen og bunden. Det er godt for teksten, som nu er en genkendelig "N", men dårlig for billedet, fordi nogle detaljer er fjernet fra billedets fokuspunkt (dvs. blomsten).

For at finde ud af, hvordan billeder og tekst kan (og ikke kan) blandes, begynder vi med bogstavformularerne. Det indlysende udgangspunkt er at vælge den rigtige type vægt.

Eksempel på tekst for tynd til billedet indenfor

Myriad Pro Light er læseligt ved punktstørrelsen vist ovenfor. Kanten af ​​bogstaverne er klare, og de fleste af farverne kontraster godt mod baggrunden. Men billedet er reduceret til en abstrakt tekstur.

tykkere tekst viser mere billede

Ændring af skrifttypen til Myriad Pro Black afslører mere af billedet. Teksten er sværere at læse, fordi der er flere detaljer at fange øjet, men ordet "forår" er læseligt.

At vælge et tykt skrifttype er ikke nok. Vi kan forbedre billedlæsbarheden et andet trin ved at spore ordet og således anvende Gestalt principper -Specifikt "reification", et udtryk fra Gestaltpsykologi, der beskriver, hvordan vi laver hele billeder og figurer med vores sind selv når vores øjne kun gives stykker eller hints.

bedre kerning hjælper billedet

Ovenfor er bogstaverne kernet sammen for at skabe en mere sammenhængende "scene", hvor billedet kan vises.

I detaljer 1 overlappes brevformerne bevidst til at vise hele former inden for billedet - men ikke så meget, at de skjuler ordet.

I detaljer 2 er tre bogstaver med lodrette sider adskilt langt nok fra hinanden, så du kan genkende dem som bogstaver, men er tæt nok til at lade blomsternes kronblade "hoppe" over de hvide huller. De sorte linjer viser implicitte linjer, som folk forbinder ubevidst med. Mindst en Gestalt-synslinie hopper over bogstaverne i ordet ovenfor. Hvis du ser det, Efterlad en kommentar nedenfor .

Stram kerning har tendens til at skabe faste blokke, som ser interessant ud, men kan være besværlige. Løsningen er at forlade huller mellem matchende (eller parallelle) linjer, men at stramme områder, som ikke passer naturligt sammen.

forsigtig kerning holder bogstaver læsbare

Her er bogstaver med tilsvarende linjer (som de lodrette sider af "r," "i" og "n") ikke så let at læse, når de trykkes sammen. Det åbne rum er godt for billeder, men dårligt for bogstaver. Selvfølgelig er vedhæftede bogstaver, hvis figurer passer, ikke altid en dårlig ide, men de skal være så læsbare som muligt.

Mo 'Photos, Mo' problemer

Et billede og et kort ord er let. Flere fotos på tværs af to linjer kræver mere indsats.

prøve med tolv bogstaver med mange forskellige billeder

"Aktiv sommer" fremkalder en vis slags billedsprog. Sammensætningen ovenfor har nogle fordele. Det viser en række billeder: portrætter, makroer, landskaber. Teksten sættes i en lige blok. Og skrifttykket er tykt nok til at vise det meste af billedet. Men der er problemer.

diagram af problemerne

Mens nogle få ting fungerer godt, er sammensætningen riddled med problemer. Specifikationer er mærket i diagrammet ovenfor, men de fleste har samme årsag: bogstaverne og billederne forstyrrer hinanden. Vi kan løse problemerne ved at foretage små ændringer.

forbedret sammensætning med fotos

Vores store ændringer her omfatter:

  • Personens billede i "S" flyttes til "e" i "aktivt".
  • Nye billeder er angivet i "m", "e" og "r" i "sommer".
  • Billedet af personen i "e" i "sommer" flyttes til "u".
  • Flodbilledet flyttes fra "i" til "S" om sommeren og er krympet for at afsløre dets kilde.
  • Dykbrættet flyttes til "jeg", og dykkeren passer ind i prikken ovenfor.
diagram over løsninger og resterende problemer

Det er bedre, men ikke perfekt. Den anden "m" er stadig tabt i baggrunden. Ved at tilføje fotos med levende farver udvides farvepaletten, hvilket kan være et problem. Lad os prøve igen.

resterende løsninger

Vi kan give tynde grænser til "e" i "aktiv" og den anden "m" i "sommer". Grænserne her bliver bevidst holdet svage (45% opacitet) for ikke at gøre opmærksom på sig selv. Vi kan også give "S" i "sommer" en grænse, men kun når det er nødvendigt (på hvidvandet). Grænser er kun nødvendige, hvor lyselementer møder den hvide baggrund.

"R" i "sommer" indeholder hvide skyer, der blander sig i baggrunden. Men designeren besluttede at "r" -formen stadig var læselig, så en kant var unødvendig.

Nogle gange vises løsninger, når du leder efter problemer. Under vores tredje runde af ændringer ovenfor, isolerede designeren f.eks. Kanonkuglens dykker fra baggrunden, hvilket skaber en mere direkte interaktion mellem billedet og teksten.

Det sidste er at blande farverne. Dette forener hvert ord.

fotos i tekst, tonet

Fra små skift i nuance til direkte monotoner modtager hvert ord ovennævnte varierende grad af farvetone. På trods af de mange forskellige emner, skalaer og vinkler, hjælper lignende farver hver ordstand alene. Er det nødvendigt? Det afhænger af ens mål.

Hvis bindingen af ​​ordene sammen er vigtigere end at have realistisk farve, kan teknikken ovenfor fungere. Men farvning er en løsning, der kun bør anvendes, hvis der er et problem - det vil sige kun hvis den tilsigtede betydning går tabt.

Reducer, genbrug og genbrug fotos

Et sidste problem med denne sammensætning er det rene antal billeder, der bruges. Hvert brev synes at indeholde et særskilt billede; Hvis der købes som lager kunst, kan 12 billeder løbe op en stor fane.

Faktisk blev kun syv billeder brugt i denne sammensætning. To af de syv blev kun brugt én gang. Den ene blev brugt tre gange. Tag et kig:

syv billeder brugt over tolv bogstaver

Indstilling af billeder i bogstavformularer kræver altid beskæring, så optaget billeder - som fotografiet af de fire personer - kan klippes på forskellige måder og genbruges mange gange.

Ændring af tekst til at tilpasse billeder

De to ord, vi lige har behandlet, "Aktiv sommer" er sat i samme skrifttype, men i forskellige punktstørrelser for at holde deres kanter konsekvente. Ved brug af et bogstav pr. Billede er designbeslutningen vilkårlig. Når man beskæftiger sig med et enkelt billede, er formen på teksten imidlertid kritisk; Det er bedst at holde den samlede tekstform så tæt på billedets proportioner som muligt. For eksempel:

prøver af tekstformer

"Espresso House" er en lang sætning, dårlig egnet til et 4 × 3 billede. Løsningen er at tilpasse teksten til at passe til billedet:

  • Ordene er stablet for at oprette en blok.
  • Ordet "hus" er forstørret, så dets venstre og højre kanter matcher "espresso".
  • "H" i "hus" er stor, men krympet for at matche højden af ​​"ouse". Der er så lidt plads som muligt mellem de to ord.
  • Selvom det ikke altid er ønskeligt, her er nedgangen i "espresso" tilladt at møde "o" i "hus".

Læsbarhed er vigtig, men til en vis grad subjektiv. Visse teknikker favoriserer billedet, og andre favoriserer teksten. Dette samspil er overladt til designeren, der forstår opgavens mål.

Eksempler på vægt på teksten vs billede

Vi kan fremhæve teksten ved at øge kontrast omkring kanterne af bogstaverne (til venstre). For at fremhæve billedet viser vi det falmede billede i det hvide mellemrum mellem bogstaverne (højre). "Ghosting" forvirrer teksten, men viser billedet som helhed.

Sådan indstilles billeder i tekst med Photoshop

Der er mange måder at overlejre billeder på tekst, men disse eksempler blev oprettet med en opskrift udviklet af forsøg og fejl.

teknik, trin 1

Indstil først teksten i et Photoshop-dokument. Denne sammensætning er 615 pixel bred, fordi den passer til Webdesigner Depots specifikationer. Når du opretter din egen, skal du tilpasse størrelsen til dit projekt.

For at se kanterne af bogstaverne tydeligt, start med sort tekst på en hvid baggrund. Når du er færdig, skal du indstille tekstlagets opacitet til 20%.

palette, trin 1

Oven, Photoshop lagpaletten i det første trin.

teknik, trin 2

For det andet skal du flette ordet i baggrunden for at skabe grå bogstaver på solid hvid. Skriv derefter bogstaverne igen, en pr. Lag, ved hjælp af baggrunden som vejledning.

palette, trin 2

Ovenfor, Photoshop lagpaletten i andet trin.

teknik, trin 3

For det tredje, tilføj fotos eller dele af fotos til sammensætningen som separate lag. "Clipping" lagene (Lag → Opret Clipping Mask) lader det øverste lag (i dette tilfælde hvert billede) kun vises, hvor det underliggende lag (hvert bogstav) vises.

paletten, trin 3

Ovenfor, Photoshop-lagpaletten, som vi tilføjer fotos.

teknik, trin 4

Gentag efter behov.

Tilpasning af ideen

Ethvert billede, illustration eller tekstur kan arbejde med tekst på denne måde. Nøglen er at finde den rette balance af klarhed mellem tekst og billedsprog.

sammensætning der blander ikke-billedbilleder med tekst


Skrevet udelukkende til Webdesigner Depot af Ben Gremillion . Ben er en freelance webdesigner der løser kommunikationsproblemer med bedre design.

Hvordan klarer du kollisionen af ​​type og billedsprog? Venligst del dine tanker nedenfor ...