Kép a betűkben Photoshop Effekt

Kép a betűkben Photoshop Effekt

Rendkívül népszerű Photoshop effekt amikor egy szöveg valamilyen képet tartalmaz. Ebben a tutorialban ezt fogjuk megtanulni. Először is nyisd meg a képet amelyet beszeretnél illeszteni a szövegedbe. Ebben a példában egy trópusi sziget képét használjuk. Ezután jobb klikk a rétegen és duplikáljuk (CTRL+J). A duplikált réteget én elnevezem sziget-nek, te olyan nevet használhatsz ami neked megfelel. Hozz létre egy új réteget és mozgasd az előző két réteg közé. Az új réteget töltsd ki fehér színnel, Edit => Fill – a “Contents” opcióból válaszd ki a “White”-ot. Elvileg nem kell történnie semminek, hiszen a ‘sziget’ réteg takarja az új fehér réteget. Jelöljük ki a ‘sziget’ réteget, majd válasszuk ki a szöveg eszközt. Válassz ki egy tetszőleges betűtípust. Ahhoz, hogy a kép effekt hatásos legyen, érdemes egy picit vastagabb, teltebb betűtípust választani. Foreground Colornak válaszd a fehéret. Itt a szín nem igazán számít, hiszen a betűk a kép részeit fogják tartalmazni és nem lesz színük. Írd rá a szöveget a képre. Méretezd át a szöveget, ha szükséges és állítsd be ahová szeretnéd. Módosíthatod a betűméretet, vagy használhatod a Free Transform opciót. Az új szöveg réteget húzzuk le a ‘sziget’ réteg alá. Ezután hozzunk létre egy Clipping maskot. A ‘sziget’ réteg legyen kijelölve és ezután válasszuk a menüből a Layer => Create Clipping Mask opciót. Ha mindent jól csináltunk a képnek a szöveg belsejében kell megjelennie. Ha nem vagy elégedett a szöveggel, tovább formázhatod, adhatsz hozzá drop shadowt, outer glowt...
Kép elforgatása CSS effektel

Kép elforgatása CSS effektel

CSS használatával látványos effekteket adhatunk (többek között) a weboldalainkon használt képekhez. Ebben a rövid tutorialban leírom, hogyan lehet néhány egyszerű css kóddal olyan effektet adni egy képhez, hogy az elforogjon, ha fölé visszük az egeret. Először is néhány általános css kóddal megformázzuk a képet, melyhez az effektet akarjuk rendelni: body { background: #979696; } .kep { border: 5px solid #fff; float: left; height: 186px; width: 200px; margin: 20px; overflow: hidden; -webkit-box-shadow: 3px 3px 3px #5a5a5b; box-shadow: 3px 3px 3px #5a5a5b; } Nem fogok belemenni részletesen, hogy melyik rész pontosan mit jelent, feltételezem, hogy minimális css ismereteid vannak. OK, ezután a kép elforgatását kell meghatározni: .forgat { -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; -ms-transition: all 0.9s ease; transition: all 0.9s ease; } .forgat:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } A .forgat meghatározza, hogy milyen gyorsan forogjon el a kép, a .forgat:hover pedig, hogy milyen szögben. Ezután már csak a html kódban kell...

Google Font WordPress-be építése

A Google Web Fonts nagyon hasznos és egyben fontos szolgáltatás webmesterek számára, mely lehetővé teszi, hogy különféle betűtípusokat építsünk be a weboldalainkba. Ezzel régen az volt a probléma, hogy ha a weboldalra látogatónak a számítógépén nem volt telepítve az adott betűtípus akkor az automatikusan le lett cserélve egy másikra. Ez nyilván problémát jelentett a weboldal tulajdonosoknak, mivel a tartalom nem úgy jelent meg a látogatók számára ahogyan azt ők szerették volna. Ez a Google szolgáltatás erre a problémára ad megoldást. A betűtípusok könnyen hozzáadhatók a weboldalhoz, és így már nem jelent problémát, ha az nincs telepítve a látogató számítógépén. Az adatbázisukban jelenleg több mint 600 betűtípus található, melyek ingyen felhasználhatók weboldalakon. Természetesen a WordPresshez is hozzá lehet adni Google Web Fontot, készült is erre a feladatra számtalan plugin, de ebben a tutorialban megnézzük, hogyan lehet manuálisan beépíteni Google Web Fontot WordPress oldalunkba. Először is látogass el a Google Web Font oldalára. Itt válaszd ki a betűtípust amelyik tetszik. A “Preview Text” mezőbe írj be egy teszt szöveget, hogy lásd, hogyan néz ki az adott betűtípus. Érdemes beírni az összes magyar ékezetes betűt, mivel nem minden betűtípusban találhatók meg. Ha kiválasztottad a betűtípust, kattints az “Add to Collection” vagy a “Quick-use” gombra. Kiválaszthatsz és használhatsz több betűtípust is az oldaladon, de érdemes mindig csak azt telepíteni amelyiket használod, mert több betűtípus lelassíthatja az oldalt. Ezután kapsz egy kódot, amelyet be kell illesztened az aktív WordPress theme header.php fájljába a tag elé. Google azt ajánlja, hogy ez legyen az első elem a részben. Háromféle képpen lehet elhelyezni a kódot a weboldalon, a “Standard”, vagyis a szokásos stíluslap beillesztéssel, @import vagy Javascript...