Hogyan készíts grunge weboldal sablont
február 22nd, 2010A következőkben elárulom, és részletesen bemutatom, hogyan kell készíteni grunge témájú websablont. Elősször is néhány stock textúrára lesz szükségünk. Megmutatom, hogyan kell elkészítened a fejécet, menüsort, a szövegmezőt. Majd később felhasználahtod, akár html, vagy valamilyen blog alapú weboldal motorral.
A végeredmény, egy kis kedvcsinálónak, kb ilyen lesz ha kész lesz, jó ha egy kis kreativitást viszel bele, nem kell feltétlenül így kinéznie, kísérletezz a rétegek elhelyezésével. Megszámlálhatatlan módon tudod elhelyezni, de mégis jól mutat!
1. Lépés
A következőkben, egy teljes grunge weboldal sablont fogunk felépíteni, ezért egy stock képre is lesz szükségünk, ami a fejléc alapját képezi. Itt találod az álltalam használt hozzávalókat.
Elősször is készítsünk egy új dokumentumot 950*800px felbontásban RGB színmódban, 72dpi-vel. Majd show rulers(vonalzó mutatása), és mind a négy sarokba húzunk egy vonalat, ez a későbbiekben nagyon hasznos lesz.
Azután Image > Canvas Size növeljük meg a dokumentum méretét 1200 px * 1000 px -re. Ezután pedig beállítjuk a segédvonalakat, a fejlécnek, menüsornak, és a láblécnek.
2. Lépés
A szövegbox, és a fejléc rétegeket létrehozzuk, külön rétegen #4d2702 színnel a Rectangle Tool használatával. A segédvonalaknak itt van szerepe, ezzel körülbelül el tudod helyezni, hogy milyen magas legyen a boxok mérete. Ne aggódj, ez nem piros, de majd az lesz, az alábbi rétegbeállításokkal amit a szövegbox, és a fejléc réteg is kap. A layer tools segítségével, amit a layeren történő dupla kattintással hívhatunk elő. A Gradient Overlay, és a Pattern Overlay beállításait válltoztatjuk(ezt megtalálod alul a képen).
3. Lépés
A Fejléc réteg felett létrehozunk egy újabb réteged, ide kerül a stock fotó(én egy fém felszínt választottam te választhatsz mást is). A lényeg hogy ezt a réteget Color Dodge módba állítot, majd a felesleges részeket, ami kilóg a fejléc réteg alól azt levágod.
Jöhet a kreatív része most kell elhelyezned a foltokat, és az íveket.
Virágok elhelyezése:
A Set_2_Hand_Drawn_Floral_Sample.abr filet fel kell venned az ecsetek közé, de a vectoros file-al is dolgozhatsz. Három réteget készítünk, a virag reteg1: fehér virágokkal, hard light réteg beállítással. A virag reteg2 70% opacity-vel. A virag reteg3 pedig piros színben.
Foltok elhelyezése:
A foltok mindegyike külön rétegen van, hiszen így külön egyszerűbb gyorsan beállítanunk a pontos helyét. CTRL+T billentyű kombinációval. Csak a bal felső sarokban található folt rétegbeállítását változtattam color overlay-re.
Betűk elhelyezése:
A betűk is külön rétegekre kerülnek, itt is a gyors mozgatás, és forgatás végett. Ez a betűtípus nem tartalmaz ékezetet, de nagyon gyorsan gyárthatunk hozzá.
Ezzel készen is van első grunge layoutunk, amit ízlés szerint formálhatsz. A végén pedig a slice tool segítségével feldarabolhatod.
Hello
Nagyon tetszik ez a sablon nekem!
Nekem magyar PS-em van és sok mindent nem találok meg, illetve a segítséged kérném ahhoz hogy mit hol találok a magyarban.
Üdv: Mira
Szia Köszi:) Hát magyar photoshopot nem használtam, de tanácsolni tudom, hogy próbáld meg az angol verziót. Mivel nagyon sok tutorialt találsz de mindet angol nyelven. Viszont ha végképp nem megy akkor megpróbálok utánanézni mi lehet a magyar Ps-ben.
Hello sikerült megcsinálnom és kreatív is voltam, angol PS-el!
Még annyit, hogy hogyan tudok ékezetet gyártani valamihez amiben nincs?
Ha megvan az ékezet utána az látszik pl akkor is ha az oldal már egy weblap?
Köszönöm a választ
Üdv: Mira
Szia Mira! Örülök, hogy sikerült:) Ha ékezetet szeretnél készíteni, akkor azt abban az esetben megteheted pl.: menük, gombok készítésénél, és természetesen látszani fog ha az képfile. Következő módon: Csinálsz egy új réteget (layert) a betű felett, aztán Rectangle tool (U) majd kb egy ékezet méretű téglalapot rajzolsz, és elforgatod a Ctrl-T segítségével. Arra figyel, hogy ez még nem kész weblap, csak layout tehát weblap alap.