Hogy egy kép tökéletesen és időtállóan illeszkedjen a háttérre, akkor célszerű ezt úgy megcsinálni, hogy a kép hátterét „átlátszóra” (transparent-ra) állítjuk.
Mi a gond a NEM átlátszó hátterű logóval?
A fő probléma a nem átlátszó hátterű logóval az, hogy csak akkor fog jól mutatni a weboldalon, ha a fejléc háttere pontosan olyan színű, mint a logó. De ha pl. színátmenetes a felső rész háttere (vagy a logó háttere, de nem azonos módon), akkor biztosan el fog ütni egymástól a kettő.
Ha pl. fehér a menüsor teteje, és fehér a logó háttere is, akkor rendben lesz a megjelenés:
De ha a fejléc hátterét zöldre színezzük, akkor már nem szép:
Ezért kell a logót úgy megcsinálni mindig, hogy átlátszó hátterű legyen. Ha a logó átlátszó hátterű, akkor a fejléc színétől függetlenül mindig „beolvad” a weboldalba.
Mutatom átlátszó háttérrel:
Sokkal egyszerűbb és szebb megoldás az átlátszó logó, mintsem emiatt az egész fejléc háttérszínét olyanra állítani, amilyen a logó háttérszíne.
+1 szempont: a logó alakja nagyon fontos!
Bár nem tartozik szorosan a témához, de érdemes észrevenni, hogy a fenti minta logó úgy néz ki, hogy van egy ikon, és mellett egy szöveg. És az egésznek az alakja fektetett téglalap. Érdemes vagy így készíteni logót, vagy csak egy ikont elhelyezni logóként. Miért?
A következő logók a legtöbb esetben használhatatlanok weboldal fejlécében:
- Állított téglalap alakú logó (széttolja magasságban a fejlécet).
- Fix háttérszínű logó (nem „olvad bele” a fejlécbe).
- Túl széles logó (két sorba töri a menüsort).
- Az ikon alatt és/vagy felett elhelyezett szöveget tartalmazó logó (olvashatatlan lesz kicsi verzióban).
- Nagy „ürességben” elhelyezett logó: ha egy nagy vászonként van kiexportálva a logó, azt a forrásfájl nélkül elég körülményes minőségromlás nélkül kivágni, kicsinyíteni. A logót mindig a vektoros verzióból kell akkora méretben exportálni, amekkorában a weboldalon fel lesz használva!
Érdemes tehát logó tervezésekor a fenti hibalehetőségeket elkerülni.
Hogyan lehet átlátszó hátterű logót csinálni?
Készítéskor figyelni arra, hogy a képszerkesztő programban a háttér transparent (átlátszó) legyen. Ehhez megfelelő program kell, sajnos nem minden képszerkesztésre alkalmas programban van erre megoldás. Amiben nincs ilyen opció, azt érdemes inkább mellőzni.
Ha már elkésett, és csak olyan logója van, aminek van háttérszíne, akkor a következő pont fog segíteni.
Hogyan lehet egy nem átlátszó háttérrel készült logó vagy kép hátterét eltüntetni?
Van rá több online eszköz, én a következő kettőt szeretem a legjobban.
Photoroom
Pár kattintással – a https://www.photoroom.com/tools/background-remover alatt – lehet bármilyen kép hátterét eltávolítani, vagy más színre cserélni. Ilyen a felülete:
Remove.bg
A https://www.remove.bg/hu alatt érhető el. Ezt használtam addig, amíg rá nem találtam a Photoroom-ra. Ennek előnye, hogy nem csak sima színek, hanem mintákat, vagy színátmenteket is be lehet állítani a törölt háttér helyére.
Átlátszó logó méretezése:
A Pixlr online képszerkesztőben van egy „Crop” nevű funkció, amivel pontos méretre lehet vágni azokat a logókat, amelyek esetleg a „hasznos tartalmon” kívül tartalmaznak hátteret.
A körbevágást azért kell megcsinálni, hogy a weboldalra a logó helyére csak a logót töltsük fel, és ne a logót egy nagyon nagy üres háttér közepén. Ha nem vágnánk körbe a logót, akkor adott esetben olvashatatlan lenne a weboldalon.
