Weboldalkészítés Midjourneyvel - második rész

Az előző részben arról volt szó, hogyan csináljuk meg a frontoldalt - vagy legalábbis egy részét. Eljutottunk odáig, hogy van egy nagyon jó dizájnunk de hogyan tovább? Hogy tudunk ugyanolyan stílusú képeket generálni? Mi lesz a többi aloldalllal? Ezekre adok választ ebben a részben.

Illusztrációk DALL-E-vel

A főoldalon négy szolgáltatás szerepel, mind a négynek kell egy olyan illusztráció, ami pontosan utal rá, plusz nem tér el sem színvilágban sem motívumrendszerében az eddigiektől. Ehhez a DALL-E-t használtam, amit legújabban a ChatGPT felületéről lehet elérni a következőképpen. Ha GPT 4-ünk van, akkor kiválasztjuk a menüből a MyGPTs-t, majd innen a Made by OpenAI-ból a DALL-E-t. Az első szolgáltatásom az AI tréning, ehhez kell kitalálni egy jó promptot. Én a következőt használtam:

Make an illustration for an AI training. We are teaching graphics, office solutions, copywriting and coding
Style: 80’s Cartoons Inspired Illustration
Colours: 18 165 188 (RGB); 254 101 87 (RGB); 200 198 247 (RGB); 244 148 21 (RGB)

Első körben megadtam neki mi legyen a téma (AI tréning), másodszor, hogy mivel is foglalkozik a cégem. Ez azért kell, hogy tudja milyen karaktereket, hátteret használjon. Mindig jó, ha adunk némi plusz információt a képről. Harmadjára explicit azt, hogy milyen stílusban szeretném az illusztrációt látni (80-as évek rajzfilmje) majd jön egy érdekes rész, a Colours. Itt RGB kód szerint megadtam neki három olyan jellemző színt, amit a Midjourney-s képemből pipettáztam ki Photoshoppal a lent látható módon. A gép (a legtöbbször) érti ebből, hogy ezeket a színeket kell követnie, ezért is írtam mellé, hogy itt RGB színkódokról van szó.

Az elkészült két kép ez lett:

Látható, hogy stílusban pont az amit szeretnék, viszont túl vibrálóak a színek, és szó szerint vette, hogy mindenről legyen kép amivel foglalkozunk (copywrighting, coding, stb) így négy kis képek generált. Ezért ilyenkor finomítani kell:

Please have it more muted colours. Aspect ratio: 2:1 And more emphasis on the AI part.

Tehát megkértem, hogy fakóbb színekkel dolgozzon (muted colours) legyen inkább 2:1 képarányú a kimenet és koncentráljon csak az AI tréning részre (more emphasis on the AI part). Látható, hogy a DALL-E képes a "beszélgetésre", tehát egyrészről megjegyzi az előzményeket, másrészről kérhetünk igazításokat azokkal a részekkel, amiket nem találunk megfelelőnek. Az eredmény ez lett:

Látható, hogy 2:1 képarányú, megjelenik benne a robot is mint az AI motívum, oktatásról van szó, stb. Ráadásul a képi világ teljesen passzol az oldalunkhoz. Ugyanezzel a módszerrel készült el 2 másik kép is a szolgáltatások részhez. Viszont nemcsak DALL-E segítségével csináltam képet, hanem Midjourney-vel is. Lássuk hogyan.

Kép konzisztencia Midjourneyvel

Ha tökéletesen ugyanolyan stílust szeretnénk akár többször egymás után elérni, akkor lehet alkalmazni a Midjourney Seed funkcióját is. Megmutatom pár példán keresztül hogy működik mindez. Először is keressük ki Midyourneyben az eredeti képet amiről a frontoldal készült. Majd reagáljunk rá borítékkal! :D Mit jelent ez? Jobb katt a képre > Reactions > more reactions - és itt keressünk rá az Envelope szóra, amire kiadja a boríték emojit. Kattintsunk rá.

Ott a boríték!

Ezután ha legörgetünk, jön a Discord-tól egy üzenet ahol megadja a kép seed számát. Mivel a Midjourney minden képet a prompt alapján random képes újragenerálni, így mindegyik job kap egy seed számot, ami ezt azonosítja. Azt kell kimásolnunk és beírni a prompt végére majd így:

--seed 4002758128

Ezzel elérjük, hogy ne térjen el a generálás során a stílustól. A projekt és program vezetés szolgáltatásunkhoz így készült az illusztráció:

Website template for Professional services -  IT network - consulting - project management, cloud computing, 3D on flat, 80’s Cartoons Inspired Illustration, UX/UI, menu --v4 --seed 4002758128

Látható, hogy átalakítottam a promtot úgy, hogy benne legyen a projektvezetés és a Seed szám is. A végeredmény színeiben és stílusában is tökéletesen egyezik a főoldali képpel.

Fontos még megjegyezni, hogy ez még a v4-es Midjourney enginnel készült, ezért ilyen a stílusa. Pro Tipp: Ha mégtöbbet szeretnél variálni az egyes kinézetekkel, akkor változtass néha az engine-en is. Ezt a --v4 paraméterrel tettem meg a fenti példában.

Egy másik példa ugyanerre a Kapcsolat oldalunk, ahol ugyanezt a módszert használtam csak mégjobban finomítva:

Website template::2 IT consulting, IT infrastructure, Agile methodology, Project management::3 Contact Us page::4 3D on flat::1 80’s Cartoons Inspired Illustration::3 --seed 4002758128 

Amit meg lehet még figyelni ebben a promptban, az a súlyozás. Ezt a ::1 ::3 stb. paraméterekkel érem el. Ez azt jelenti a ::2 előtti részt egy teljes egésznek veszi amit meg kell jeleníteni, majd folytatja a ::3 előtti résszel, stb. Ezáltal sokkal pontosabb eredményeket lehet elérni, mert a közhiedelemmel ellentétben a Midjourney nem érti a központozást vagy a mondatokat. Tehát semmit sem érünk el azzal ha egy regényt írunk neki vagy ha felsoroljuk szavakkal egymás után amit szeretnénk. Hogy mit milyen súlyozással vegyen figyelembe, azt jelenti a kettőspont utáni szám. Ha két részből áll a promtunk, akkor a ::1 ::2 és a ::5 ::10 ugyanazt jelenti.

Szolgáltatások szekció - ChatGPT szövegírás

Talán egyszerűbb rész már, hogy szövegekkel töltsük fel a weboldalunkat. Nyilván itt most nincs olyan szövegmennyiség ahol mindenképpen szükség van GPT-re, de egy példán keresztül bemutatom hogyan lehet csinálni.

Például az Agilis tanácsadás részhez kell egy figyelemfelkeltő szöveg. Érdemes használni a Customize ChatGPT beállítást ehhez, ahol minden fontos infót meg tudunk adni a cégünkről, tevékenységi körünkről és az elvárt válasz formátumáról. Érdemes minél több mindent ide felsorolni, hogy később tudjunk ezzel a datasettel dolgozni.

Ezután egy új beszélgetést kell indítani, hogy elmondhatjuk mit szeretnénk:

Az agilis tanácsadás szolgáltatásunkról írj egy figyelemfelkeltő anyagot a weboldalunkhoz

A kimenet pedig:

• Optimalizáld folyamataidat velünk! Az agilis tanácsadásunk segítségével hatékonyabbá teheted projektjeidet, gyorsabban érheted el a céljaidat és növelheted csapatod együttműködését. Tapasztalt szakértőink személyre szabott megoldásokat nyújtanak, hogy a legjobbat hozhassuk ki a vállalkozásodból.

• Szerezd meg a versenyelőnyt! Állítsd át csapatodat az agilis módszertanra, és válj rugalmasabbá és adaptívabbá a gyorsan változó piaci környezetben. Az agilis tanácsadásunkkal növelheted a produktivitást és csökkentheted a fejlesztési ciklusokat.

Lépj velünk kapcsolatba még ma, és fedezd fel, hogyan segíthetünk átalakítani vállalkozásodat az agilis módszertan segítségével!

Természetesen ez csak egy egyszerű példa, ha megadjuk kikkel dolgozunk, mik a munkamódszereink, kinek szóljon a szöveg, pontosabb outputot kapunk a géptől is.

Végszó

Remélem ez a kétrészes összefoglaló hasznos volt és felkeltette az érdeklődésed a GPT-kben lévő potenciál iránt. Természetesen ha van némi programozói tudásod vagy teljesen kötöttségek nélkül szeretnél weboldalt készíteni akkor el tudod kezdeni a Canva (vagy WordPress) + ChatGPT párossal is, ahol teljes egészében a GPT-vel generáltatod le magadnak a felülethez tartozó kódsorokat. Egy későbbi posztomban majd ezt az opciót is kivesézem.