Otevřete nový web a na první pohled víte, že mu něco chybí. Text je připravený, tlačítka dávají smysl, nabídka je srozumitelná. Jen v hlavní části stránky zůstalo prázdné místo, protože vhodný obrázek se hledá už třetí den.
Buď je příliš obecný, nebo se nevejde do širokého hero prostoru. Na mobilu zmizí hlavní motiv, v tmavé variantě je obraz příliš těžký a v kartě služby zase vypadá jako zmenšený plakát. Právě tady může AI ušetřit čas. Ne tím, že za vás vyřeší celý design, ale tím, že rychle připraví několik promyšlených variant, ze kterých můžete vybírat.
V tomto díle si projdeme, jak připravovat obrázky pro web a landing page tak, aby měly jasný účel, fungovaly v konkrétním rozměru a podporovaly důvěru návštěvníka.
Obrázek na webu není dekorace
Než otevřete generátor, položte si jednoduchou otázku: co má obrázek na stránce udělat? Může vysvětlit službu, ukázat výsledek, přiblížit atmosféru značky, rozdělit dlouhý text nebo vést pozornost k tlačítku. Jedna fotografie obvykle zvládne jednu hlavní úlohu dobře. Když po ní chceme všechno najednou, vznikne neurčitý vizuál, který je sice hezký, ale návštěvníkovi nepomůže.
Na webu se nejčastěji setkáte s několika typy obrazů:
- Hero obraz: první vizuální signál stránky. Musí snést větší plochu a často ponechat volný prostor pro nadpis nebo tlačítko.
- Obraz služby nebo produktu: má rychle objasnit, co nabízíte. Bývá konkrétnější než hero a dobře funguje v kartě nebo detailu.
- Ilustrace v obsahu: pomáhá vysvětlit postup, srovnání nebo abstraktní myšlenku. Nemusí být fotorealistická.
- Důkaz výsledku: screenshot, ukázka projektu, před a po nebo vizualizace reálného výstupu. Tady je důležitější pravdivost než efektní styl.
- Doplňkový motiv: menší textura, detail nebo ikona, která drží vizuální rytmus stránky.
Než začnete generovat, zapište si u každého plánovaného obrazu jeho roli, umístění a nejdůležitější informaci. Tři minuty přípravy často ušetří desítky nepovedených variant.
Dobré zadání začíná mimo generátor
AI nevidí váš layout, pokud mu ho nepopíšete. Neví, jestli obraz přijde vedle nadpisu, do celé šířky, pod cenu nebo do karty se třemi řádky textu. Neví ani, zda má být obraz klidný, aby nechal vyniknout nabídku, nebo výrazný, protože je hlavním důvodem, proč návštěvník na stránce zůstane.
Praktické zadání si můžete rozdělit do sedmi částí:
- Pro koho obraz je: například majitel malé firmy, zákazník e-shopu nebo účastník kurzu.
- Co má návštěvník pochopit: třeba že služba šetří čas, že produkt je kvalitně zpracovaný nebo že celý proces probíhá jednoduše.
- Kam obraz přijde: hero, karta, článek, detail produktu, pozadí nebo náhled pro sociální síť.
- Jaký bude poměr stran: široký, čtvercový, portrétní nebo více variant pro různé obrazovky.
- Co musí zůstat volné: místo pro text, logo, cenu, tlačítko nebo nástrojovou lištu.
- Jaký má být pocit: klidný, přesný, osobní, odvážný, řemeslný nebo technický.
- Čemu se vyhnout: falešné nápisy, příliš mnoho detailů, rušivé barvy, stereotypní postavy nebo nepravdivé situace.
Prompt pro hero obraz
Jako výchozí šablonu můžete použít následující zadání. Berte ho jako pracovní dokument, ne jako kouzelnou formulku:
Vytvoř široký hero obraz pro webovou stránku služby [doplňte službu]. Obraz je určený pro [doplňte cílového návštěvníka] a má vyvolat pocit [doplňte pocit]. Hlavní motiv je [doplňte motiv]. Na [levé/pravé] straně ponech velký klidný prostor pro nadpis a tlačítko. Kompozice má být čitelná i v menším náhledu, bez drobných důležitých detailů. Použij paletu [doplňte barvy] a styl [doplňte styl]. Nevkládej žádný text, logo ani vymyšlené údaje. Připrav obraz jako širokou kompozici vhodnou pro web a počítej s ořezem na mobilu.
Pokud chcete výsledek posunout, přidejte i to, co nemá být dominantní. Například: „Pozadí má být klidné, hlavní motiv nemá překrývat prostor pro text, žádné rušivé rekvizity, žádné přehnané světelné efekty.“ Negativní požadavky nejsou kouzelná ochrana, ale pomáhají modelu pochopit hranice.
Kompozice pro text a tlačítko
Nejčastější chybou u hero obrazů je objekt přesně uprostřed. Na samostatném plakátu může působit dobře, na webu ale často soupeří s nadpisem. Jestli text leží vlevo, nechte hlavní motiv spíš vpravo a naopak. Volný prostor nemusí být prázdná jednolitá plocha. Může v něm být jemná textura, obloha, stěna nebo rozostřená část scény, která má nízký kontrast.
Pomáhá popsat i hierarchii:
- co návštěvník uvidí jako první,
- kam se má oko přesunout potom,
- co může zůstat jen jako atmosférický detail.
Obraz musí fungovat společně s typografií. Pokud je v něm mnoho výrazných diagonál, obličejů nebo kontrastních ploch, může se nadpis ztratit. Naopak příliš prázdný obraz působí nedokončeně. Cílem není odstranit všechen detail, ale dát mu pořadí.
Desktop, tablet a mobil nejsou tři stejné náhledy
Responzivní web obraz pouze nezmenšuje. Široký desktopový motiv může na mobilu přijít o hlavní postavu, výrobek nebo místo, které vysvětluje scénu. Proto už při generování přemýšlejte o bezpečné oblasti: o části obrazu, která musí zůstat viditelná ve všech důležitých ořezech.
Pro každý důležitý obraz si připravte tři rychlé otázky:
- Co se stane, když se obraz ořízne na úzký portrét?
- Je hlavní motiv stále rozpoznatelný, nebo zůstane jen část pozadí?
- Má mobilní verze dost kontrastu pro text a tlačítko?
Praktická poznámka: responzivní obraz není jen zmenšená desktopová verze. Někdy potřebuje jiný ořez, jinou pozici motivu nebo samostatnou variantu. Proto jej vždy vyzkoušejte přímo v reálném layoutu a na skutečném telefonu.
U důležitého hero obrazu se vyplatí vytvořit více variant. Jedna může být široká pro desktop, druhá kompaktnější pro mobil. Pokud web používá různé zdrojové soubory přes picture nebo responzivní obrázky, nemusíte hledat jeden kompromis, který bude průměrně fungovat všude.
Jak udržet vizuály v jedné značce
Samostatně povedený obraz ještě nevytváří dobrý web. Na jedné stránce může vedle sebe skončit fotorealistický interiér, barevná 3D ilustrace a ruční skica. Každý motiv je možná hezký, ale dohromady značka působí nerozhodně.
Sepište si malý vizuální předpis:
- tři až pět hlavních barev,
- typ osvětlení nebo kontrastu,
- preferovaný typ kompozice,
- pravidla pro prostor kolem motivu,
- materiál a texturu,
- seznam věcí, kterým se vždy vyhnout.
Do dalších promptů potom nepřidávejte jen slovo „stejný styl“. Přenášejte konkrétní pravidla. Například: „jemná papírová textura, tmavě inkoustová linka, jeden bordó akcent, klidná kompozice, žádné neonové barvy, ruční nedokonalost pouze v liniích, nikoli v textu nebo logu.“
AI obraz musí projít i praktickou kontrolou
Generátor může vytvořit obraz, který vypadá působivě v náhledu, ale při skutečném použití selže. Kontrola proto nekončí u otázky, zda se vám líbí.
Obsahová kontrola
Je na obrazu opravdu to, co slibuje stránka? Pokud ukazujete službu pro účetní, náhodný futuristický dashboard může působit zavádějícím dojmem. Pokud prodáváte fyzický výrobek, AI obraz nesmí předstírat přesný detail, který produkt ve skutečnosti nemá.
Kontrola textu a značky
Text v obrazech generovaný AI bývá nespolehlivý. Nadpis, cenu, logo i důležitou informaci vkládejte raději až v HTML nebo v grafickém editoru. U webu je navíc potřeba zajistit, aby informace byla dostupná i pro čtečky obrazovky a vyhledávače.
Kontrola výkonu
Nahraný PNG soubor může mít několik megabajtů a zpomalit první načtení stránky. Pro web proto připravte rozumnou šířku, použijte WebP nebo AVIF podle podpory projektu, nastavte rozměry obrázku a doplňte smysluplný alternativní text. Cover článku a první hero obraz bývají důležitější než dekorace pod přehybem stránky.
Kontrola licence a původu
U každého nástroje si ověřte podmínky komerčního použití, ukládání vstupů a případné omezení pro ochranné známky nebo postavy. Když pracujete s fotografií klienta, zaměstnance nebo konkrétního produktu, potřebujete mít vyřešené právo k použití zdrojového materiálu. AI nástroj tuto odpovědnost nepřebírá.
Co dělat, když první varianta nefunguje
Nepřepisujte celý prompt pokaždé od začátku. Změňte jednu věc a výsledek porovnejte. Pokud je obraz příliš rušný, upravte kompozici. Pokud je motiv špatně umístěný, změňte jeho pozici. Pokud nesedí nálada, popište světlo a materiál. Když měníte všechno najednou, nezjistíte, co pomohlo.
Užitečný pracovní postup vypadá takto:
- Vygenerujte tři až čtyři základní směry.
- Vyberte jeden podle účelu, ne jen podle estetického dojmu.
- Upravte kompozici a množství volného prostoru.
- Připravte ořez pro mobil a vyzkoušejte jej v reálném layoutu.
- Proveďte obsahovou, technickou a licenční kontrolu.
- Uložte finální prompt a poznámku, proč byla varianta vybrána.
Poslední bod je důležitý. Když se k projektu vrátíte za měsíc, nebudete znovu hádat, jak vznikl obrázek a proč se hodí právě tato varianta.
Praktické cvičení: připravte obraz pro jednu stránku
Vyberte jednu skutečnou stránku vašeho webu. Nemusí být nová. Může jít o službu, článek nebo kontaktní formulář.
- Napište jednou větou, co má návštěvník po zhlédnutí obrazu pochopit.
- Určete, kde bude text a kde hlavní motiv.
- Vyberte poměr stran pro desktop a mobil.
- Sepište tři věci, které v obrazu nechcete.
- Vygenerujte tři směry a jeden z nich upravte druhým promptem.
- Vložte obraz do stránky a prohlédněte si jej na skutečném telefonu.
Na konci si odpovězte: pomáhá obraz návštěvníkovi rozhodnout se, nebo jen vyplňuje volné místo?
Rychlý checklist před nahráním
- Má obrázek jasnou úlohu na konkrétní stránce?
- Je hlavní motiv viditelný i po ořezu na mobilu?
- Zůstává prostor pro nadpis, tlačítko nebo cenu?
- Odpovídá vizuál skutečné nabídce a značce?
- Neobsahuje chybné nápisy, falešná loga nebo zavádějící detaily?
- Má web správný formát, velikost, rozměry a alternativní text?
- Máte ověřené podmínky použití a původ vstupních materiálů?
Malý kvíz
1. Co je nejlepší začátek před generováním hero obrazu?
A) Vybrat nejdramatičtější styl. B) Určit účel obrazu, publikum, umístění a volný prostor. C) Přidat co nejvíce detailů.
2. Proč nestačí jen zmenšit desktopový obraz?
A) Mobil má vždy horší barvy. B) Změní se poměr stran a může zmizet hlavní motiv. C) Obrázky se na mobilu nepoužívají.
3. Kam patří důležitý text a logo?
A) Do generovaného obrazu. B) Do HTML nebo spolehlivě kontrolovaného grafického editoru. C) Není potřeba je kontrolovat.
Správné odpovědi: 1B, 2B, 3B.
Závěr: dobrý obraz začíná dobrým rozhodnutím
AI dokáže připravit mnoho vizuálních variant rychleji než dříve. Největší hodnotu ale nepřináší samotná rychlost generování. Přináší ji možnost přemýšlet v kontextu stránky, publika a celé značky, rychle porovnat směry a věnovat více času výběru toho, co skutečně pomůže.
Začněte jedním obrazem. Zapište si jeho účel, připravte bezpečný prostor pro text, ověřte ořez na mobilu a zkontrolujte technické detaily. Když tento postup několikrát zopakujete, vznikne vám vlastní knihovna promptů a rozhodnutí, která se bude hodit pro další stránky i kampaně.
V dalším díle se podíváme na AI a produktovou grafiku: jak připravovat realistické produktové scény, jak pracovat s referenční fotografií a kde končí užitečná vizualizace a začíná zavádějící reklama.