HTML

Vedd fel RSS feedjeid közé!

Forrás keresés (angolul)

Utolsó kommentek

3d hatású kép kivágás

2007.10.25. 17:40 fajtbros


Tedd ezt a cikket a kedvencekbe!

Következzen egy érdekes 3d hatású effekt, amely remekül néz ki, és kivitelezni sem nehéz.




















Ebből a képből indítunk, talán a legjobb nektek is ezzel kezdeni, később sajátra is átültethető.
Az effekt a következőképp működik: kivágjuk a kép azon részeit amik kilógnak a keretből, a maradékot pedig bekeretezzük.
Kezdjük az elején!








Nyissuk meg a képünket, kattintsunk a background layerre duplán (rétegek eszköztáron), ezzel réteggé alakítjuk a képünket. A kép menü, keret mérete paranccsal (image/canvas size) adjunk 100 pixelt a képünkhöz mindkét tengelyen (kép)







Nevezzük el a réteget "lepkének". Készítsünk egy másolatot belőle, a neve legyen "kilóg". Szükségünk lesz még egy háttér rétegre is (kép).








A "lepke" rétegen készítsünk egy kissé döntött téglalap alakú kijelölést a polygon lasszóval (polygonal lasso), ez lesz a keretezett képünk. Figyeljünk arra hogy ami a kijelölésen kívülre esik, ki fog lógni a keretből (kép).











Ha kész a kijelölés, nyomjuk meg a rétegek eszköztáron, a rétegmaszk hozzáadása (add layer mask) gombot (kép).
Ezáltal egy átlátszósági maszkot kapunk, ami elfedi a képünk azon részét, ami a kijelölésen kívül volt.









A "lepke" réteghez adjunk hozzá két effektet (dupla katt a rétegen). Először is fehér körvonalat (stroke), ez lesz a képünk kerete (kép).
A vetett árnyék (drop shadow) pedig azért kell, hogy a képet kiemeljük a háttérből (kép).










Jöhet a legnehezebb rész. Kikell jelölnünk a lepkétől balra lévő hátteret, a "kilóg" rétegünkön. Sok kijelölés technika létezik, ezekbe most nem megyek bele, szerintem az megér egy másik cikket. A mágneses lasszót (magnetic lasso) fogjuk használni, ez elég jó eredményeket ér el ha a háttér eléggé elkülönül az előtértől. Váltsunk rá (kép), és egy pontból indulva, szépen lassan húzzuk az egeret végig a háttér és a lepke határán. A mágneses lasszó követi a határvonalat, de ha szeretnénk megerősíteni néhány pontot, nyomjuk meg az egér bal gombját, és folytassuk a kijelölést. Az olyan helyekre amiket a kijelölő nem jelöl ki elég pontosan, hagyjunk rá a lasszóval, radírral majd igazítunk rajta. Természetesen bármilyen technikát alkalmazhatun, a lényeg hogy tüntessük el a kép bal oldalát (kép).

Ha sikeresen kijelöltük, váltsunk a radírra, és töröljük a felesleges részt (kép).
Ha lenagyoltuk, szüntessük meg a kijelölést, és radírral igazítsunk a képen. Különösen figyeljünk a farok részre, ott kis méretű radírral töröljünk.









Adjunk árnyékot a lepke kilógó részének. A legegyszerűbb az lenne ha réteg effektként hozzá adnánk a "kilóg" réteghez, csak az a baj hogy nem csak a kilógó rész vetne árnyékot, hanem a kép maradék része is. Éppen ezért más technikát használunk: készítsünk egy másolatot (duplicate layer) a "kilóg" rétegről, adjunk rá színátfedés (color overlay) effektet, fekete színnel, és tegyük a "kilóg" réteg alá, kilóg árnyék néven (kép).






Alkalmazzuk rajta a szűrők/életlenítés menü, gauss életlenítés parancsát (filters/blur/gaussian blur) (kép).












Kész az árnyék, de mint mondtam rossz helyeken is árnyékot vet. Annyi a dolgunk hogy a radírral kitöröljük a kereten belülre vetülő árnyékokat (kép), és már készen is van a képünk!

A példafájl letölthető innen, psd formátumban.




1 komment

Címkék: photoshop tutorial

Csillogó gomb készítése

2007.10.15. 12:55 fajtbros


Tedd ezt a cikket a kedvencekbe!

A most következő tutorial olyanoknak szól akik tisztában vannak a photoshop alap szintű kezelésével. Azért megpróbálom úgy bemutatni hogy bárki megértse, képekkel illusztrálva. Angol nyelvű programot használok, de magyarul is leírom az eszközök neveit. Lássuk hát az első tutorialt az oldalon!



Ezt a gombot fogjuk elkészíteni, elég divatosak mostanában az ilyenek az ún. "webkettes" oldalakon, és egész egyszerűen kivitelezhetőek. Készítsünk egy 500x500-as, fehér hátterű dokumentumot. A meglévő background layerhez adjunk hozzá egy újat, nevezzük gombnak, és váltsunk rá.



Válasszuk ki az eszköztárból a lekerekített téglalap eszközt (rounded rectangle) (1), a lekerekítés radius-át állítsuk 30 pixelre (2). Készítsünk vele egy 200x200 pixel méretű téglalapot. Nyomjuk meg rajta az egér jobb gombját, és válasszuk a görbe kitöltését (fill path) (3). Itt bármilyen színt adhatunk neki. Ha kész, válasszuk a szerkesztés menü törlés almenüjét (edit/clear), így törlődik a téglalapunk, de a kitöltés megmarad.






Akkor alakítsunk a téglalapunkon. Kattintsunk duplán a gomb nevű rétegünkre (a rétegek eszköztáron), így megnyílik a rétegstílus ablak. Itt 3 dolgot kapcsolunk be, a belső árnyékot (inner shadow), a bevésés és domborítást (bevel and emboss), és a színátfedést (color overlay). Állítsuk őket a képen látható értékekre (kép). A színátfedés adja meg a gombunk színét, én sötét szürkét választottam (színkód: 505050), de bármire állíthatjuk. A belső árnyékkal belső mélységet adunk a gombunknak, ezáltal üveglap hatása lesz. A domborítás pedig 3d hatást ad a gombnak.




Most így néz ki a gombunk. Mi hiányzik a valódi üveg hatáshoz? A csillogás. Segítsünk rajta:

Készítsünk egy újabb réteget, a neve legyen csillogás, váltsunk rá. Rajzoljunk a téglalapunk felső harmadába egy újabb lekerekített téglalapot (kicsi peremet hagyjunk), a radius maradjon 30-on (1). Válasszuk a toll eszköz szerkesztőpont hozzáadását (add anchor point) (2), és a téglalapunk alső vonalán, középen, adjunk hozzá egy pontot (3). Most válasszuk a görbe választó eszközből a közvetlen kijelölést (direct selection tool) (4). Fogjuk az alulra hozzáadott szerkesztőpontunkat, és húzzuk kb. a téglalap negyedével nagyobbra (5). A két oldalán lévő szomszéd pontok iránypontját pedig alakítsuk úgy, hogy szép ívet kapjunk (5). A kész formán nyomjunk jobb gombot, és válasszuk a kijelölés létrehozása almenüt (make selection). Ezáltal kijelöléssé alakult a görbénk. Vigyázzunk hogy ne nyomjunk rá újra a képre, mert akkor elveszik a kijelölésünk! Ha mégis megtörténne, válasszuk a szerkesztés menü visszavonás parancsát (edit/undo).

Válasszuk ki a színátmenet eszközt (gradient tool) (1), állítsuk a színét fehérre (a kép tetején lévő menüben), a másik végét pedig átlátszóra. Ezután nyomjunk rá egyet, így szerkeszthetjük a színátmenetet (2). Nyomjunk bal gombbal a színátmenet felső peremére, így létrehozunk egy újabb színt az átmenetben. Hagyjuk fehéren, a hely (location) rublikába írjunk 21-et (2). Ezáltal a színátmenetünk eleje tömör marad, és csak utána kezd halványodni.
Menjünk az egérrel kicsivel a kijelölésünk felső pereme alá, nyomjuk le a bal gombot, és húzzuk az egeret egyenesen lefelé, a nagy téglalapunk közepéig (3), és engedjük fel a gombot. Így a kijelölésen belülre került a színátmenet (4). A réteg átlátszóságát (layer opacity)  állítsuk 85-re (a rétegek eszköztáron találjuk).

Kész a felső csillanás, tegyünk egyet az aljára is, de ezúttal másmilyet készítünk:
Új réteget készítünk alsó csillogás néven. Rajzoljunk 2 téglalapot a gombunk bal alsó harmadában (1). Válasszuk az előzőekben már használt görbe kitöltése (fill path) parancsot (2), töröljük ki a görbét (szerkesztés/törlés - edit/clear) és vágjuk le a a létrehozott forma felesleges részét a polygon kijelölővel (polygonal lasso) (3). Ezután radírral halványítsuk és vékonyítsuk el a vonal széleit (4). Homályosítsunk kicsit a rétegen, a szűrők menüben lévő életlenítés almenü, gauss életlenítés parancsával, az értéke 0.7 legyen (filters/blur/gaussian blur).







Készen is vagyunk a csillogással, finomítsunk a gombunkon.

Ehhez 2 újabb réteg stílust adunk a gomb rétegünkhöz: a vetett árnyék (drop shadow) térbeli mélységet ad a gombnak (1), a belső ragyogás (inner glow) pedig fényessé teszi (2).





Befejezésül töltsük meg a gombunkat tartalommal:
Készítsünk egy új réteget, belső néven. Tegyük a gomb és a csillogás rétegek közé, így olyan hatást kapunk, mintha a gomb belsejében lenne a tartalom. Az alakzat (custom shape) menüből válasszunk egy nekünk tetsző formát, tegyük a gomb közepébe, és használjuk újra a görbe kitöltést (fill path), a görbét törölhetjük utána. A réteg átlátszóságát (opacity) állítsuk 80-ra, és adjunk egy kis árnyékot (drop shadow) neki (kép). Ezzel a forma picit beleolvad a gombunkba.

Ha mindent jól csináltunk, ezt az eredményt kapjuk. A gomb réteg színátfedését  (color overlay) állítgatva, bármilyen színű gomb készíthető. Használhatunk színátmenetet (gradient overlay) is (4. példa).










Remélem érthető volt a leírás, segítségül itt letölthetitek a kész psd fájlt. Ha kérdésetek van írjatok bátran.

Szólj hozzá!

Címkék: photoshop tutorial

Weboldal készítés - Első lépések 1. rész

2007.10.07. 13:05 fajtbros


Tedd ezt a cikket a kedvencekbe!

A bevezetőmben azt írtam 2 szoftverre lesz szükségünk, nos ez nem igaz. Egy harmadiknak is sok feladat jut, a neve: AGY. Azt hiszem feltételezhetjük hogy ez mindenkinek megvan, és ne felejtsük el hogy ingyenes!


A viccet félretéve, a munka nagy része abból áll hogy kitaláljuk mit is szeretnénk. A megvalósítással is sok időt kell töltenünk, de ha nincs ötlet, a legprofibb grafikus se tud dolgozni. Az agynak csak 1 dologra van szüksége a működéshez, ez pedig az inspiráció. Sok olyan tehetséggel megáldott ember van aki önmagától hoz létre új dolgokat, de ilyen kevés van, és mit tegyünk ha mi nem tartozunk közéjük? Szerencsére az internet segítségünkre van, nem kell sehová elmennünk ahhoz hogy fejlesszük magunkat.
Természetesen az inspiráció nem azt jelenti hogy lemásolunk egy oldalt, ezt sokan lopásnak hívják, de ne legyenek illúzióink: minden területen másolják egymást az emberek legyen szó zenéről vagy bármilyen művészetről. Másolás alatt azt értem hogy kölcsönveszünk ötleteket, hiszen befolyásol minket minden ami körülvesz. Szóval csak nyugodtan tegyük amit csak szeretnénk, akár “lophatunk” is. Aki ráérez a webdizájn izgalmára, úgyis késztetést fog érezni hogy sajátot alkosson.
Az inspirációs oldalakon remek példákat láthatunk, ezeket kombinálhatjuk egymással és saját ötleteinkkel. Lássunk hát néhány lelőhelyet!

Nézzük először a komplett weboldalakat. Kismillió galériát találhatunk, megpróbálom a legjobbakat bemutatni.

css beauty Kezdjük a (talán) legjobbal. A css beauty-n kereshetünk tag-ok szerint, de kategóriákba rendezve is böngészhetjük őket.

css mania Szintén rengeteg oldal közül választhatunk. Legnagyobb előnye hogy megnézhetjük az oldalak domináns szineit.

web creme Kisebb adatbázis, viszont színek szerint csoportosítva is nézegethetjük az oldalakat, ez nagyon jól jöhet.

Mint mondtam rengeteg van belőlük, nem is sorolom tovább. Azért itt még keregélhettek tovább, a legjobb 60 oldal között:

60 best CSS directories you would die to watch!

A színek is remek inspirációs források, meg aztán nem árt a megfelelőket egymás mellé tenni. A következő oldalak ebben sokat segíthetnek, így talán elkerülhetjük a piros alapon kék írást. Tudom, ez nekem is fáj.

http://www.colourlovers.com

http://colorblender.com
http://www.colorschemer.com
http://www.color-inspirator.com
http://www.colorcombos.com

Ezen kívül találhatunk a neten különböző médiákból válogató oldalakat is, a teljesség igénye nélkül bemutatok kettőt közülük:

Ads of the world
The Serif

Persze még rengeteg forrást találhatunk máshol is. Például a Flickr-en, ami egy képmegosztó közösségi oldal. Itt találhatunk un. "poolokat", ezekben témák szerint összeválogatva találhatunk képeket. 2 példa: itt és itt.

Összefoglalva, az egész netet használhatjuk inspirációhoz, sőt a világot. Az utcára lépve bármi adhat ötletet a munkához, csak nyitott szemmel kell járni. És használni az agyat, ez a legfontosabb!

A következő részben megpróbálom bemutatni hogyan tegyük a meglévő ötleteinket vizuálisan láthatóvá, ehhez vázlatot készítünk.

2 komment

Címkék: dizájn web tanfolyam inspiráció

Üdvözlök mindenkit az fb multimédia blogon

2007.10.07. 13:00 fajtbros


Kiknek írom ezt a blogot? Bárkinek aki nem csak olvasni és nézni szeretné a webet, hanem használni és csinálni. Legfőképp web dizájn lesz a téma, na és minden ami web kettő. Megpróbálok bemutatni olyan oldalakat amik segíthetik egy dizájner munkáját, és persze bárkiét aki szeretné üzlete működését megkönnyíteni.


A web dizájn főleg 2 programról fog szólni:

  • Photoshop
  • Dreamweaver

Minden magára valamit is adó dizájner eszköztárában kötelező darab. Ezekhez fogok tutorialokat írni, mind grafikáról, mind webszerkesztésről. Programozást hagyjuk, csak annyit foglalkozom vele amennyit muszáj. Én úgy gondolom az egy tévhit hogy a weboldal készítést az alapoknál, html programozással kell kezdeni, bárki remek oldalt készíthet mindenféle programozói tudás nélkül. Legalábbis megpróbálom ezt bebizonyítani.

A tutorialok kétfélék lesznek. Az egyik típus az indulástól a kész weboldalig halad, szépen sorjában:

  • oldal tervezése
  • grafikai megvalósítás
  • átültetés dreamweaverbe
  • weboldal szerkesztése
  • tárhely és domain regisztrálás, oldal feltöltése, kezelése.

Mint látható ez főleg kezdőknek szól majd, amolyan tanfolyam jelleggel.

A másik csoportban lesz minden más tutorial, rendszer nélkül. Remélem mindenki talál majd köztük használhatót.

Akkor hát munkára!

Szólj hozzá!

Címkék: dizájn web

süti beállítások módosítása