A mai webdesign trendekre a minimál stílus jellemző, ami azt jelenti, hogy maga a webhely elemei díszítésektől mentesek, nem tartalmaznak grafikai elemeket. Az egyedi stílus csak egyszerű formai világban jelenik meg, amit olykor egy vezérelem vagy forma határoz meg. A weboldal impresszív hatását viszont a képek adják meg. A mai stílusirányzatok szerint nagy méretű, jó beállítású, beszédes képeket alkalmaznak a weboldalakon, amelyek figyelemfelkeltők, emellett ezen képek színvilága és stílusa teszi teljessé és igazán látványossá a weboldal kinézetét. Ezek a képek lehetnek bannerek, kategória és termék képek vagy egyre gyakoribb az egyszerű, érzelmet kiváltó, hangulatot tükröző illusztrációs kép alkalmazása. A jól megválasztott képekkel és a megjelenéshez illeszkedő módon szerkesztett bannerekkel a design összhatása stílusos és egyedi lesz.
Milyen képek szükségesek a webáruházban?
A webáruházak egyik legfontosabb képi eleme a termékfotó. Sok terméket ez ad el, fokozottan igaz ez a látványosabb termékekre. Ezért érdemes ügyelni arra, hogy termékeink jó minőségű, egységes stílusú fényképekkel jelenjenek meg. Sok gyártó vagy nagykereskedés biztosítani tudja az általa forgalmazott termékekhez a képeket is, ezek az esetek többségében jó minőségű, nagy felbontású, jól beállított és megfelelő megvilágítással készült képek. Ha saját termékképeket kell készítened, mindenképpen törekedj azok jó minőségére, keress fotózási tanácsokat az interneten. Szakember segítségét is igénybe lehet venni, számos fotós vállal manapság kifejezetten termékfotózásokat.
A webáruházban szükséges képi elem lehet még a logó. A logó nem kötelező dolog, kiírhatod szövegesen is az áruház nevét, azonban egy jól megválasztott logót könnyű megjegyezni és beazonosítani. A jó logó ismérve, hogy nem tartalmaz összetett grafikát, sok színt, tehát a logó nem egy fotó vagy rajz. A logó egy stílusjegy, ami formájában visszautalhat a névre vagy a forgalmazott termékfajtákra. A logó mindig jól olvasható - kis méretben is - és a lehető legegyszerűbb megjelenést mutatja. A logó állhat csak szövegből vagy ehhez kapcsolt képi elemből. A képi elem szerepelhet külön, lehet a szöveg része vagy megformázhat abból egy-egy betűt is, de fontos, hogy mindig egyértelmű és kiolvasható legyen a név. Lehet a névtől független, formai logót is tervezni, azonban ennél is fontos törekedni az egyszerűségre. Ilyen esetben a nevet lehet a logó alá vagy mellé írni helytől függően. A logóhoz érdemes meghatározni egy megjelenési szabályt, ez saját magunknak is segít, hogy a saját logónkat miként alkalmazzuk különféle felületeken. Például a logó megjelenhet világos és sötét háttereken egyaránt, de kiköthetjük, hogy csak egy adott háttérszínnel együtt jelenhet meg. Ha a logót fizikailag is szeretnénk megjeleníteni (cégtábla, nyomtatott reklámanyagok, bögre, névjegykártya, bélyegző stb.), akkor arra is gondolni kell, hogy ilyen kritériumoknak is megfelel-e.
A logó különösen fontos lehet azok számára, akik márkát (brand) szeretnének építeni rá, így a logó már a marketing fontos tényezőjévé válik.
A webáruházban ezen felül megjeleníthetők különféle bannerek, ezek fő célja a marketing, ám itt sem szabad megfeledkezni az egységes stílusról. Egy banner esetén is fontos, hogy milyen háttérszínnel (vagy képpel) dolgozik, milyen színű és betűkészletű feliratok kerülnek rá, milyen elrendezéssel, mérettel. A bannerek éppúgy hozzájárulnak a webáruház kinézetéhez, befolyásolják annak stílusát. A mindenféle szedett-vedett képekből készített, tarka bannerek romboló hatásúak lehetnek függetlenül attól, hogy milyen nagyszerű ajánlat szerepel rajtuk. Próbáld meg kerülni a bazári megoldásokat és a főbb pontokban egységes stílusjegyeket alkalmazni a bannereken.
A különböző kinézeteken eltérő számú és méretű bannerek jelennek meg, a kialakításkor ezeket mindig figyelembe kell venni, hogy pontosan hova kerül a banner, milyen képet és szöveget teszel rá, milyen elrendezésben. Mivel ma már reszponzív minden kinézet, érdemes átnézni a kisebb kijelző méreteket is, hogy a banner azokon is olvasható, jól látható-e. Ha nem, akkor ezekre más méretű és akár más oldalarányú, bannereket kell készíteni megfelelő szövegmérettel és elhelyezéssel: az Unas rendszere lehetőséget ad eltérő képek feltöltésére a különféle kijelző méretekhez. Ha megfelelő méretű alapkép áll rendelkezésedre, érdemes a retina, azaz nagy felbontású kijelzőkre is a megfelelő (dupla) méretű banner képeket elkészíteni.
Képfelhasználás jogi háttere
Fontos, hogy a digitális képeknek, fotóknak, rajzoknak is van szerzői joga. Ez a szerzői jog bizonyos esetekben fel van tüntetve a képet tartalmazó webhelyen vagy akár közvetlenül a képfájl metaadataiban is szerepelhet. A szerző azonban akkor is előállhat követeléssel, ha a szerzői jog sehol nincs feltüntetve - amennyiben bizonyítani tudja, hogy ő a kép szerzője.
A gyártóktól vagy nagykereskedésektől kapott termékképek esetén érdemes tájékozódni a felhasználás feltételeiről. Általánosságban azonban elmondható, hogy felhasználhatók a termékek értékesítéséhez és marketing célokra, tehát bannereket és egyéb hirdetéseket is lehet belőlük készíteni.
A szerzői joggal rendelkező képek licenszelhetők, ha erre lehetőséget biztosít a szerző vagy a szerző által megbízott harmadik fél. A licenszelt szerzői joggal rendelkező képek felhasználási feltételeit a szerző vagy a szerző által megbízott harmadik fél határozza meg.
Honnan szerezhetsz be fotókat?
Egy-egy bannerhez, illusztrációhoz nem csak termékfotóra lehet szükség. Egy olyan fotó, ami élethelyzetet vagy a terméket használat közben mutatja be, mindig egy kicsit emberközpontúbb, a látogató jobban bele tudja képzelni magát a fotón látható szituációba. Ilyen, kifejezetten reklámcélú fotókat azonban csak kevés gyártó vagy nagykereskedő tud biztosítani.
Szerencsére erre is van megoldás: az internet tele van képgyűjtemény oldalakkal, ahonnan akár ingyen is letöltheted az áhított képet vagy grafikát. Ezeken az oldalakon (hivatalos) licensszel kapod meg a letöltött képet és az adott oldalon feltüntetett feltételeknek megfelelően használhatod fel. Mindig tájékozódj megfelelően a felhasználási lehetőségekről, korlátokról az adott szolgáltató weboldalán. Van ami ingyenesen letölthető, de például kereskedelmi célra nem használható fel - ebből értelemszerűen nem készíthető banner. A fizetős megoldásoknál is alaposan el kell olvasni, hogy mire terjed ki a licensz, azonban mindenhol lehet találni olyan opciót, ami a kereskedelmi célt is lefedi.
Az ingyenes képgyűjtemények közül kiemelnénk a freepik.com, unsplash.com és pixabay.com oldalakat, azonban figyelni kell, hiszen az ilyen ingyenes oldalakon is találkozhatsz fizetős tartalommal.
További nagyobb képgyűjtemény szolgáltatók például az istockphoto.com, shutterstock.com, 123rf.com. A fizetős szolgáltatásokra jellemző az egyenleg feltöltéses vagy előfizetői csomagos rendszer. Az egyenleg alapú rendszernél a feltöltött összeg alapján meghatározott számú pontot kapsz és a képek felhasználási jogát - azaz letöltését - pontokért vásárolhatod meg. Az előfizetői csomaggal működő rendszerek esetén fix díjas csomagok közül választhatsz és a csomag tartalmának megfelelő mennyiségű képet tölthetsz le az előfizetett időszakban.
Mi a teendő a nyers fotókkal?
Már a letöltésnél figyelj, hogy mekkora méretben töltöd le az adott képet. Mindenképpen legyen legalább akkora, amire szükséged van, de inkább nagyobb. Kicsinyíteni mindig lehet egy képet, nagyítani azonban - minőségromlás nélkül - nem. A letöltött kép formátuma fotók esetén kevésbé érdekes, mivel digitális felhasználásra kell, megfelelő a JPG. Grafikák (vektorgrafikus képek) esetén már nem feltétlenül mindegy, hogy mi a fájl formátuma, itt mindig olyat válassz, amit a képszerkesztő szoftvered képes kezelni.
Ha a képre csak önmagában van szükség, akkor a szerkesztési folyamat kimerül az átméretezésben vagy esetleg a képkivágásban. Fontos, hogy a kívánt méretet kiadja a kép "vászna" és az arányait ne torzítsd, tehát se vízszintesen, se függőlegesen külön ne változtass a kép méretén, mindig aránytartó átméretezést végezz. Ha a képből csak bizonyos részt vágnál ki vagy van olyan része amit levágnál, mindig ügyelj, hogy a letöltött kép akkora legyen, hogy a vágás után is elegendő méretű maradjon a felhasználandó helyre. Soha ne nagyítsd a képeket, azok minden esetben minőségromlást eredményeznek (pixelesedés, homályosság).
Ha a képet egy bannerhez szeretnéd felhasználni, a méretezés és kivágás szabályait ugyanúgy tartsd be. Ha feliratozni is szeretnéd a bannert, érdemes már a kép keresésekor gondolni arra, hogy mennyi szöveget tennél rá és azt el tudod-e helyezni rajta megfelelően. Egy bannert elrendezhetsz úgy, hogy a szöveg ne fedje a képet: tehát egymás mellé teszed a szöveget és a képet és elrendezheted fedésben is, hogy a kép adja a teljes banner hátterét és ezen szerepel a szöveg. Nem ördögtől való, ha a szöveg letakar egy illusztrációs képből. Az illusztráció lényege a hatás kiváltása, amit akkor is elérsz, ha a fotón szereplő alak(ok)ra, tárgyakra rátakar a szöveg, mert nem képen látható személyek és tárgyak a lényeg, hanem amit bemutatnak. A szöveg ráhelyezéskor ügyelj arra, hogy a szöveg olvasható maradjon, a színét is ennek megfelelően válaszd. Széles tónustartományú képek vagy sok színt tartalmazó képek esetén nem biztos, hogy elégséges a szövegszín az olvashatósághoz. Ilyen esetben lehet trükközni a kép sötétítésével, világosításával vagy a szövegek alatt kitöltő háttérszín alkalmazásával. Ez utóbbi ugyan többet takar a képből, de garantáltan olvasható lesz a szöveg.
Ha elkészült a banner, mentsd el a megfelelő formátumban. Ez lehetőleg WEBP legyen. Ha a szoftvered nem tud ilyen formátumot, akkor mentsd el JPG formátumban. Ha a kép tartalmaz "átlátszó" részeket, akkor az szintén WEBP-ként legyen lementve, ha szoftvered nem tud ilyet, akkor PNG-ként. Mentéskor - ha a szoftver lehetővé teszi - eleve sRGB színtérrel mentsd a képet, a felbontásnak digitális megjelenés révén pedig nem kell nagyobbnak lennie mint a szabvány 72 dpi.
Az oldalbetöltési sebesség (Google PageSpeed) miatt optimalizálni is kell a képet. Egy képfájl nem csak magát a képet tartalmazhatja, de meta adatokat, EXIF adatokat, csatolt színprofilokat stb. A képoptimalizálás ezeket eltávolítja, illetve a kép pixeleit optimalizálja bizonyos eljárás alapján. Ezzel a kép elkészült és feltölthető az admin felületen.
Feldolgozáshoz alkalmazható szoftverek
A képek szerkesztéséhez ma már rengeteg szoftver áll rendelkezésre, köztük fizetős, sőt, előfizetős és ingyenes szoftverek is megtalálhatók. Ilyenek például a Photoshop és a Gimp, illetve elérhetőek már online szerkesztők is mint például a Pixlr. Léteznek specifikusabb grafikai szoftverek, például a Creatopy kifejezetten bannerek készítésére helyezi a hangsúlyt, a Canva prezentációs anyagokban nyújt segítséget, az Illustrator vektorgrafikus képek elkészítését támogatja, míg a CorelDRAW kiadványok nyomdakész elkészítésére van kihegyezve.
Az optimalizálási feladatokat bizonyos képszerkesztők maguk is tudják biztosítani, azonban előfordul, hogy régebbi metódusok alapján dolgoznak, ami manapság már nem elegendő. Ezért érdemes külön kép optimalizáló szoftveren is végig futtatni kész képeinket. Ezekből már számos online megoldás is működik, ilyen például a TinyJPG vagy a Compressor.io.
Száz szónak is egy a vége
A vizualitás nagyon fontos volt mindig is, az ember ösztönösen kedveli és vonzódik az esztétikus dolgokhoz, látogatóidat így már az első benyomás alapján maradásra bírhatod. Az esztétikus webáruház professzionalizmus hatását is kelti. A vásárló érzi, hogy üzemeltetője törődik az áruházzal, ez bizalmat gerjeszt, hogy egyéb dolgokhoz is így áll hozzá: mint a megrendelések kezelése, kérdések megválaszolása, esetleges felmerülő problémák megoldása. A bizalom pedig vásárlást és visszatérő vásárlót generálhat.
Ezért érdemes időt és energiát fektetni webáruházad képi elemeibe is. Ha pedig úgy érzed, nem tudod kihozni a lehetőségekben rejlő maximumot, ne habozz szakember segítségét igénybe venni.
