Hernyák Gábor egyéni vállalkozó

hernyak@gmail.com

Keressen e-mailben!

+36 30/319-7449

Hívjon és segítek!

Hernyák Gábor egyéni vállalkozó

hernyak@gmail.com

Keressen e-mailben!

+36 30/319-7449

Hívjon és segítek!

Karate-Do International Magyarország

Karate-Do International Magyarország - Hernyák Gábor e.v.
Karate-Do International Magyarország

Karate-Do International Magyarország

Weboldal, webáruház készítés, felújítás gyorsan és korrekten, megfizethető áron! Reszponzív megjelenés, akár egyedi megoldások, keresőbarát beállítások.

Ha ilyen megoldásokat keres, akkor jó helyen jár!

Karate-Do International Magyarország - Hernyák Gábor e.v.

jellemzők

  • felújított egyesületi weboldal WordPress alapokon (2020)
  • GeneratePress sablon és Elementor Pro
  • WIX-en létrehozott weboldal megújítása és funkcióbővítése
  • fiatalos, modern, reszponzív design
  • eseménynaptár

Megosztás

Kép hátterének eltávolítása, cseréje

Háttérkép eltávolítás - csere

fejkép: remove.bg

Hogyan távolítsd el egy kép hátterét és/vagy cseréld le egy másik háttérre?

Számos alkalommal előfordult már, hogy egy weboldalhoz találtam vagy épp a megrendelőtől kaptam ugyan képet, azonban az színeiben, háttérmegjelenésével nem tudott jól illeszkedni a kialakított design-ba. Ilyenkor mindig eszembe jutott, hogy „miért nem lettem grafikus (is)” ….
Azonban az internet a jóbarátom és a Google is a mondás szerint. Elkezdtem hát kutatni, hogy drága és (számomra) nehezen használható képszerkesztő programok helyett van-e lehetőség szerint ingyenes vagy olcsó online megoldás erre a problémára.

És van! Ezt fogom most bemutatni:

Az oldal, ahol mindezt pár kattintással végre tudod hajtani a https://www.remove.bg

A remove.bg egy ingyenes webes alkalmazás. Akkor működik, ha a téma jól elkülöníthető a háttértől, ha a háttér egyszínű, kevésbé éles.

Előnye: gyors és ingyenes webes alkalmazás

Hátránya: a bonyolultabb képekre nem alkalmas

A lépések:

  1. menj a remove.bg oldalára
  2. a főoldalon található Upload Image gombra kattintva töltsd fel a módosítandó képet
  3. várj pár másodpercet és a kép háttere eltűnik
    remove.bg
  4. Ha átlátszó háttérre volt szükséged, akkor már csak annyi dolgod van, hogy az új képet lementsd
  5. Ha azonban szerettél volna egy új hátteret a kép mögé varázsolna, akkor használd az „edit” gombot – és keress egy számodra szimpatikus hátteret, állítsd be és csak ezután mentsd a képet
    remove.bg

Eredeti kép – háttér nélküli – új háttérrel

Eredeti kép - háttér nélküli - új háttérrel

itt egy videó is, ha úgy könnyebb:

forrás: Technology for Teachers and Student youtube csatornája

Honnan használjak fel ingyenesen jó minőségű képeket?

Monoar Rahman fotója a Pexels oldaláról
fejkép: Monoar Rahman fotója a Pexels oldaláról

 

Az egyik legnehezebb dolog, képeket és illusztrációkat keresni egy adott weboldal/weboldal terv létrehozásához. Még nagyobb a teher, ha blogot vezetsz és az adott írásokhoz nincsenek saját készítésű képeid. Az internet számos lehetőséget kínál képek beszerzéséhez, azonban azzal tisztában kell lenni, hogy nincs minden ingyen és nem minden kép szabad. A fizetős stock oldalak mellett számos olyan oldal található, ahol egy egyszerű linkért cserébe (ld. lap teteje) igen jó minőségű képeket kaphatsz a tartalmaid illusztrálásához.

Ehhez a bejegyzéshez a saját tapasztalataim mellet igénybe vettem a  WP kurzus egy cikkét és a volt cégem (Infoartnet kft.) Cégarculat című blogjának ezt és ezt a bejegyzését.

Ingyenesen letölthető képek

A képek felhasználásának jogi háttere elég bonyolult, lehet hallottál már a Creative Commons joggal felruházott képekről. Ezek a fizetős és az ingyenes között vannak. Nyugodtan használd fel őket, de a forrásukat általában le kell hivatkozni. Ezt megteheted a kép feliratánál vagy a bejegyzésed végén. A szabadon felhasználható képeket ezzel szemben le se kell hivatkoznod (bár én általában leszoktam).

Fontos: Ma már képekre is könnyen rá lehet keresni az interneten! Biztosan te sem akarod, hogy a kép tulajdonosa jogi útra terelje az ügyet, amiért lenyúltad a képét.

Nézzük a leggyakoribb képlelőhelyeket

Pexels.com

Egyszerű működés, rengeteg és nagyon jó minőségű fotó, és sehol sem kell feltüntetni a szerzőket. Erősen ajánlott itt keresni.

Flickr.com / Photopin.com

A Flickr alapvetően egy fotósok számára készült oldal, ahol a művészek megoszthatják alkotásaikat. A képek a Creative Commons licenc alapján vannak megjelölve, vagyis részletesen és könnyen tájékozódhatunk a képek jogvédettségéről. A Photopin alapvetően Flickr adatbázisában keres.

Pixabay

Az egyik kedvencünk, hiszen nem csak fényképek, hanem illusztrációk, vektoros képek, sőt videók között is válogathatunk. Létezik magyar felülete is, sőt ha keresel, akkor is releváns tartalom lesz az eredménye.

Unsplash

Kitűnő képek, akár regisztráció nélkül is, kereshetően. Nagyon pozitív, hogy bizonyos képi kollekciók egy-egy téma köré is épülnek, így például van külön képkollekciója a digitális marketingnek, a fitnesznek, a reggelnek.

PicJumbo

A PicJumbo-nak is egy nagy gyűjteménye van, ahol igazán remekül használható képeket találhatsz.

Freepik.com

Itt már főleg grafikákkal találkozhatunk, és az ingyenes verzió használata során minden esetben fel kell tüntetnünk a készítőket azon az oldalon, ahol felhasználjuk az anyagokat.

A feltörekvők…

Moose – https://icons8.com/

Ez egy nagyon érdekes oldal, sok funkcióval. Fotók, ikonok, zenék, vektoros anyagokon kívül, szerkesztő felületek is helyet kaptak az oldalon. Valójában egy multifunkciós oldal. Rengeteg icon, sok free zene és sok nagyon jó fotó van például emberekről, de úgy, hogy több élethelyzetben vannak lefotózva, tehát nem csak egyetlen beállításban

Generated.photos – https://generated.photos/

Mesterséges Intelligencia által összerakott fotók között lehet válogatni. Nem valóságos modellek fotói, hanem „mesterséges intelligencia” vagy inkább gépi tanulású szoftverek által összerakott fotók között böngészhetsz és módosíthatod is őket.

Free High Resolution Photography – https://www.lifeofpix.com/

Jó minőségű képek lelőhelye. Kitűnő fotósok kitűnő képei, leginkább épületekről, emberekről mindennapi tevékenységük közben, növényekről, állatokról.

BRUST – https://burst.shopify.com/

Egy oldal, ahol olyan fényképek találhatóak, amik szabadon felhasználhatók üzleti és saját célokra is. Sok kép jól kereshetően, kifejezetten jó beállításokkal.

StockSnap – https://stocksnap.io/

A képek CCO licenccel rendelkeznek, tehát szabadon felhasználhatóak. Jó minőségű képeket találsz itt, jól kategorizáltan.

Focastock – https://focastock.com

Ismét egy oldal, ahol a képek szabad felhasználásúak és jó felbontásúak. Jól kereshető, kategorizált. Technológia, város, étel témában egészen erős, de kollekciók is rendelkezésedre állnak. Jól címkézett és az adatbázisban részletesen kereső könnyű munkát ígér.

Magdeleine – https://magdeleine.co/

Egy weboldal nagy felbontású szép képekkel és teljesen ingyenesen. Érdemes ide is benézni, ha természetfotót vagy tárgyfotót keresel. Teljesen ingyenesen használhatóak, akár kereskedelmi célra is. Jól kategorizált, így könnyen kereshető.


A cégarculat oldalán a következő pluszt találtam:

Egy gyűjtőoldalt is ajánlok a figyelmedbe http://allthefreestock.com/#
Egy oldal, ahol az eddigi legátfogóbb ingyenes fotóoldal összeállítást találod meg. Csak linkoldal, nincs külön ismertető az oldalak minőségéről.

Jó válogatást – köszönet a WP kurzusnak és az Infoartnet – Cégarculatnak

Képernyőkép készítés – FireShot

Képernyőkép készítés - FireShot

 

fejkép: saját kép

Számos alkalommal előfordul, hogy a kézenfekvő Print Screen képernyőkép készítés kevésnek bizonyul. Van, amikor kevés az a terület, amit a monitor mutat. Ilyen az amikor egy weboldal teljes képét szeretnénk látni, vagy azért, mert jó lenne egyben látni a szakaszokat és hogy a design homogén-e. Illetve a teljes képernyőképek jól mutatnak a referencia oldalaknál is 🙂

Számos program tud ilyen szolgáltatást, mivel én Mozilla-ban dolgozom így egy ahhoz tartozó beépülő modult kerestem. És meg is találtam – ez a FireShot, mely számos kényelmi szolgáltatást nyújt az ingyenes verzióban is.

Teljes oldalas képernyőkép- FireShot

Mivel ez egy beépülő modul, így első lépésként a Mozilla menüjében a Kiegészítők menüponthoz kell menni, és ott a kereső segítségével megkeresni

FireShot

Ha megtaláltad, akkor a kért lépésekkel telepítsd

A telepítés után a Mozilla eszköztárán megjelenik a FireShot iconja.

A működése roppant egyszerű, az aktuális lapfülön található weboldal tartalmát lehet számos módon menteni

FireShot

Lehetőségek a free verzióban:

  • Teljes oldalas képernyőkép
  • Látható felületről képernyőkép (Print Screen)
  • Kijelölt elemekről képernyőkép (kiválasztása után az egérrel megadható a képernyőterület)

Képernyőmentés utáni lehetőségek:

Képernyőkép készítés - FireShot

Az elkészült képernyőképet (mely egy külön lapfülön jelenik meg)

  • mentheted a számítógépedre képként
  • mentheted a számítógépedre PDF fájlként
  • vágólapra helyezheted (másolás funkció)
  • nyomtathatod

Egy kicsi és nagyon hasznos kis program, még ingyenes verzióban is.

Facebook képméretek

Facebook képméretek

fejkép forrása: ite.hu

Szinte minden alkalommal, amikor az idők során facebook profilt kellett valamelyik megrendelőmnek (vagy éppen magamnak) készítenem, az volt az első, hogy a profil és borítóképek éppen aktuális szabványát leellenőrizzem. Sajnos ezek a méretek folyamatosan változnak – plusz ma már videó is feltehető borítóként – így érdemes ezekkel időről – időre tisztában lenni. A jelenlegi írás a 2020-as szabványokat mutatja be – az ihletet a https://features.hu oldalról merítettem

A platform fejlődésével folyamatos figyelmet kapott a különböző vizuális elemek kiemelése.
Kiemelt jelentőségűvé vált a Facebook képméretek megfelelő megválasztása.

Facebook képméretek

Azonban a Facebook nem könnyíti meg a dolgunkat, minden egyes vizuális elem egyedi paraméterekkel rendelkezik és ezek folyamatosan változnak.

A felbontáson kívül van még néhány kritérium amire érdemes odafigyelni, mint például a képeken megjelenített szöveg aránya, vagy a mobil és asztali nézet közötti különbségek.

Facebook profilkép méret

Facebook profilkép méretKezdjük a legfontosabbal. A profilkép kiemelt jelentőségű, mivel a profil neve mellett ez a másik olyan elem, ami szinte mindenhol feltüntetésre kerül. Minden egyes bejegyzésnél, kommentnél, megosztásnál látni fogják, illetve a keresések eredményei közt is látszik.

Korábban négyzet alakú volt a profilkép, manapság azonban a legtöbb helyen kör alakban jeleníti meg a Facebook. Mindegy milyen formájú képet töltesz fel, a feltöltést követően a Facebook kör alakúra vágja. Annyi beleszólásod van a dologba, hogy kiválaszthatod mi kerüljön a körön belülre, így ügyelhetsz arra, hogy a lényeges elemek levágás után is megjelenjenek, illetve, hogy szimmetrikus maradjon a kép.

A minimális felbontás 180 x 180 pixel. A megjelenített méret ettől eltér attól függően, hogy épp hol jelenik meg a fotó (asztali gépen, vagy mobilon, hírfolyamon, vagy profiloldalon). Érdemes nagyobb méretű (legalább 720 x 720 pixel), részletgazdagabb képet feltölteni, ezek kisebb méretre skálázva is igényesebben fognak kinézni.

Facebook borítókép méret

Megosztott képek és linkek méreteiEz az a nagyméretű kép amely az idővonalad felett helyezkedik el. Már csak a méretéből és központi elhelyezkedéséből kiindulva is sok lehetőséget tartogat.

Javasolt minimum 820 x 312 pixeles képet feltölteni, ami ez alatt van az torzítottan fog megjelenni. Asztali gépen ezen a felbontáson fog megjelenni a borítóképed, mobilon 640 x 360 pixeles méretben.

Van egy zóna a képen ami mind mobilon, mind asztali böngészőn mindenképp megjelenik. Érdemes a borítókép lényegesebb elemeit ide központosítani, például, ha egy csoportképet állítanál be, figyelj rá, hogy minden személy ezen a zónán belül legyen. Feliratnál ugyanígy, fontos hogy ne maradjanak le betűk, vagy egész szavak.

Megosztott képek méretei

Alapvető funkció a képek hírfolyamon történő megosztása. Természetesen itt is van optimálisabb megoldás annál, minthogy előzetes mérlegelés nélkül töltögesd a képeket.

Jelen esetben az ajánlott méret (főleg ha a Yoast SEo plugint is felhasználod erre a célra) az 1200 x 630 pixel.
E mellett jó még az 1200 x 1200 pixel. Ez nyilván egy 1:1 méretarányú képet jelent. Emellett lehetőség van 1080 x 1350 pixel felbontású képek megosztására is. Az 1:1-es arányú kép mennyivel magasabb és mennyivel nagyobb esélye van így arra, hogy megragadja a felhasználó figyelmét.

Nekem ezek a legfontosabbak, ha többet is szeretnél megtudni, akkor a teljes cikket elolvashatod itt ezekkel a témakörökkel:

Esemény borítóképének mérete, Csoportok borítóképének mérete, Facebook képméretek hirdetések esetén stb.

Ha a megosztáskor a facebookon nem azt a képet látod, amit szerettél volna, annak is van megoldása – itt leírtam Neked

Egyéni kép beállítása facebook bejegyzéshez

Egyéni kép megjelenítése Facebook megosztás során

kiemelt kép: saját szerkesztés

Ez a probléma nagyon sok gondot okozott nekem. Hiába kerestem rá különböző csatornákon a megoldásra, számomra nem volt megoldható – mert nem foglalkoztam az OpenGraph Image beállítással. Majd ahogy elkezdtem keresőoptimalizálással is foglalkozni megismertem a Yoast SEO plugint. Azóta ez a probléma már nem probléma… Ne legyen neked sem.

Aki először megpróbált facebook hirdetést feladni, bizonyára szembesült már az alábbi problémával: bejegyzés kiemelésénél, ha esetleg 1-nél több kép van a cikkünkben, nem biztos, hogy megosztásnál az a kép fog megjelenni, amit mi szeretnénk. Ezt ugyan a facebook felületén tudjuk léptetni és ki tudjuk keresni, de ha valaki más osztja meg a gondosan megírt tartalmunkat, nem biztos, hogy veszi majd erre a fáradságot. Ebben az esetben nem releváns kép fog megjelenni a megosztásunk mellett.

Yoast SEO plugin

Erre a problémára kínál megoldást a SEO by Yoast WordPress plugin, melynek segítségével tetszőleges képet tudunk beállítani a postunkhoz. (OpenGraph Image)

Ha sikerült letölteni és feltelepíteni a SEO plugin-t, nyiss meg WordPress adminban a cikket, amihez egyéni képet szeretnél feltölteni. Ha az oldal aljára görgetsz, megtalálod a Yoast beállítási lehetőségeit.
Fontos: Az egyéni kép mellett megadhatsz külön címet és leírást, ami csak a facebook megosztásaidban fog megjelenni.
A facebookra szánt képek mérete 1200 x 630 px legyen, különben bizonyos területek, esetleg szövegek le lesznek vágna a képről.

YOAST SEO

Ha ezzel megvagyunk, hiába próbáljuk megosztani a cikket, a képünknek még nyoma sincs. Ahhoz, hogy működjön a fenti beállítás, futtassuk a böngészőnkben a Developer.Facebook alkalmazást.

Developer.Facebook

Írd be a bejegyzésed URL-jét, majd kattints a debug gombra.

Facebook Debugger

Kattints a DEBUG gombra és nézd meg az eredményt:

Facebook Debugger

Ha az eredmény az amit szerettél volna (cím, szöveg, kép), akkor rendben vagy,
ha nem akkor javítsd a Yoast SEO pluginban a tartalmakat,
majd a „Scrape Again” gombbal frissítsd a developert.

Fontos: Gondolom rájöttél, hogy ezzel a megoldással régi, vagy eddig nem is kezelt oldalak facebook-os megjelenését is bármikor tudod korrigálni