Brielle
Brielle
2015. aug 10

Szintén sok idő telt el a LookBook sorozat előző része óta, és mivel nem is kétséges ezeknek a tutorial cikkeknek a sikere, ezért gondoltam, éppen ideje folytatni. A mostani rész egy folytatásos rész első fele lesz, melyben egy fejlécet fogunk készíteni. Úgy gondoltam, az első részben magát a fejlécet fogjuk elkészíteni Photoshopban, a másodikban pedig be is kódoljuk, ami szintén hasznos tipp lehet.

Kezdés – a munka megalapozása

Először is, el kell terveznünk, milyen fejlécet szeretnénk. Fontos persze, hogy milyen oldalunk van, mivel mindenféle oldal típusnál különböző szempontokat kell figyelembe vennünk fejléc készítésnél. Most úgy gondoltam, egy képzeletbeli rajongói oldalam lesz, és ahhoz szeretnék valami egyszerű, de mégis összetett fejlécet készíteni.

Gondoljuk át, mit is jelent az összetett fejléc. Egy fejlécen általában megjelenik egy kép az adott hírességről, akivel oldalunk foglalkozik, e mellett pedig még rendkívül sok különböző ötlet, dobozka, gomb jelenhet meg, melyekről még az elején döntenünk kell, hogy szerepeljenek-e a fejlécen. Most összegyűjtöttem néhány dolgot, amit rápakolhatunk a munkánkra:

  • Szlogen: ezzel az egymondatos, lényegre törő szöveggel bemutatjuk oldalunkat, és témáját a látogatónak.
  • Weboldal címe: mindenképpen meg kell jeleníteni oldalunk URL-jét, címét a fejlécen, hiszen ezzel tudja a látogató, hogy hova tévedt, és kivel is foglalkozik oldalunk.
  • Menüsor: egy vízszintes menüsor segítségével navigálhat a látogató a főbb oldalak között.
  • Üdvözlő szöveg: a legtöbb fejlécen megjelenik egy rövidebb üzenet, mely a frissen oldalra tévedőknek szól. Ez összefoglalja az oldal témáját, tartalmát, illetve kedvesen marasztalja a látogatót.
  • Híresség bemutatása: egy szintén rövid, de mindenre kitérő kis szöveggel bemutatjuk azt az illetőt, akivel rajongói oldalunk foglalkozik.
  • Szociális média ikonok: ha weboldalunkhoz tartozik kapcsolódó Facebook vagy Twitter rajongói oldal, akkor azokat is érdemes megjeleníteni a fejlécen.
  • Legfrissebb galéria képek: az oldalunkhoz tartozó galériából általában hasznos dolog megjeleníteni a legfrissebben feltöltött képeket, hiszen a látogatók ebből értesülhetnek róla először, hogy kedvencükről vannak-e új képek.
  • Legfrissebb bejegyzések: általában érdemes megjeleníteni a fejlécen a legújabb frisseket, így a látogató egyből megtekintheti a legújabb cikkeket, mely kedvencükről szól, és egy kattintással oda is vezérelheti magát.

A fejléc elkészítése lépésről lépésre

Ha eldöntöttük, mi minden fog szerepelni a fentiek közül fejlécünkön, akkor bele is kezdhetünk a valódi munkába, vagyis a fejléc elkészítésébe. Nyissuk meg a Photoshopot, és kezdjünk egy új fájlt. A kép méretei a következők legyenek: 1920×1000. Szélességnek ez a legmegfelelőbb méret, ugyanis ritka az ennél szélesebb képernyő, így a fejlécünk minden méreten szuperálhat. A magasság kicsit soknak tűnhet, de idővel megláthatod, hogy kelleni fog ekkora.

Ezután oldalunk szélességét is meg kell határoznunk. Nálam az 1100 pixel széles oldal válik be a legjobban, de azoknak szétcsúszhat az oldal, akiknek csak 1024 pixel széles a képernyőjük (gondoljunk itt a netbookos felhasználókra). Ezért most mi is 1024-es szélességben fogunk gondolkodni.

Mivel most be fogjuk segédvonalazni a munkánkat, ezért a Kép » Rajzvászon mérete opcióval le kell kicsinyítenünk képünket 1024×480 pixelre. A kép alapján állítsuk be a nyilas dobozt is (!).

Majd Nézet » Új segédvonal opcióval helyezzünk el két függőleges, és egy vízszintes segédvonalat. A két függőleges kerüljön a képünk két szélére, a vízszintes pedig az aljára. A kép segít ebben:

Ez a lépés azért volt fontos, mert ki kellett jelölnünk a területet, ahol dolgozni fogunk, és ezen nem szabad túllépnünk. Ráadásul a kódolásban is segíteni fognak ezek a vonalak a későbbiekben. Most pedig Kép » Rajzvászon mérete opcióval alakítsuk vissza a méretet 1920×1000 pixelre. A nyilas dobozra most is ügyeljünk, hogy úgy nézzen ki, ahogy a képen:

Most, hogy készen van a fejlécünk alapja, végre elkezdhetünk dolgozni a tényleges fejlécen. Válasszunk ki egy PNG-t az adott hírességről, akiről weboldalunk szól (magunk is kivághatjuk a PNG-t, de le is tölthetjük. A lényeg, hogy elég jó minőségű legyen.) Helyezzük el a fejléc közepén, ne méretezzük túl kicsire.

Ha megtaláltuk a tökéletes pozíciót neki, akkor hozzunk létre egy téglalapot a téglalap alakzat eszközzel. Kattintsunk az eszközzel a képen, majd adjuk meg az 1920×480 méreteket.

Ha létrehoztuk, akkor helyezzük pontosan a vízszintes segédvonal fölé, ügyeljünk rá, hogy oldalt a képünk mindkét széléhez is pontosan illeszkedjen.

Ezután végre foglalkozhatunk magával a téglalap színével is. A Réteg » Rétegstílus » Keverési beállítások opcióra kattintva (vagy a réteg nevén kétszer kattintva) behozhatjuk a rétegstílusokat. Most háttérnek egy klassz színátmenetet fogunk készíteni.

Hozzunk létre valamilyen kellemes színkompozíciót, ne használjunk túl sok és túl élénk színt, csak pont annyit, amennyi még kellemes hatást kelt. Ha készen vagyunk a stílussal, akkor okézzuk le. Ezután egy fehér téglalapra lesz szükségünk, mely a fejlécünk legtetején fog elhelyezkedni. A mérete legyen 1920×80 pixel.

Ha hozzáadtuk, akkor válasszuk ki a hírességünk rétegét, és a Kép » Korrekciók » Szintek lehetőséggel adjunk hozzá egy kis hatást. A kép mutatja, nagyjából hogy kell elhelyezni a csúszkákat, de ez minden képnél különböző lehet. Szemmértékre úgyis be tudod állítani, hogyan tetszik jobban.

Ezután az eddigiek tetszőleges módon díszítsük feliratokkal, még több PNG-vel, csak arra ügyeljünk, hogy ne vigyük túlzásba. A fejlécünk egyszerűsége maradjon meg.

Én a fejlécemen elhelyeztem még egy legújabb galéria képek dobozt is, amit azért fontos megjegyeznem, mert ugye a kódolás elkészítésénél még fontos szerepe lesz, valamint az alaphátteret beszíneztem világos szürkére. Egyelőre készítsd el a fejléced hasonlóan, legyen készen az 1920×480-as rész, mivel ezek után fogjuk elkészíteni a többi dobozt, melybe a legfölül említett fejléces tartalmaink fognak kerülni.

Most a vízszintes segédvonalunk alatt fogunk dolgozni.

1, Először egy menücsíkot kell beillesztenünk, ami 1024×80 pixel nagyságú lesz. Ezt színezzük be egyszínűre valami olyan színnel, amit a fejlécen is használtunk.

2, Adjunk hozzá egy 728×90 pixel nagyságú tetszőleges színű dobozt. Ebbe fog kerülni a hoszt reklámja (ha nem fanhosztingnál vagy, akkor természetesen ezt a lépést kihagyhatod.)

3, Innentől kezdve pedig annyi, és olyan méretű dobozt adunk hozzá, amennyit szeretnénk. Természetesen mindegyiknek legyen valamilyen előre eltervezett funkciója, ami bele fog kerülni.

Ha ezzel meg is volnánk, akkor a dobozokat kedvünk szerint díszítsük, adjuk hozzá az üdvözlő szöveget, a dobozok címeit, stb. Ez már csak a saját fantáziánkon múlik. A lényeg az, ne felejtsük el, mi az, amit majd kóddal adunk hozzá. Nálam ezek a következők:

  • Legújabb galéria képek
  • Navigációs menü
  • Szponzor reklám
  • Legfrissebb hírek

Ennyi lenne az összetett fejléc készítésének első része, melyben létrehoztuk magát a fejlécet. A következő részben, melyre valószínűleg nem kell sokat várni, pedig be fogjuk kódolni azt, amit feljebb felsoroltam. Remélem, hasznos volt a segítség, alább megtekinthetitek a kész verzióját, illetve le is tölthetitek PSD-ben.


Komment részleg
2015/08/13 05:34

woww you make the layout-making looks so easy! but I’m sure even if i follow your look book, it will not be as good as you! ahhaha~

Brielle
2015/08/13 08:37

Thank you :D

2015/08/13 21:47

Szia Brielle! Jó leírás. Látom, hogy guide-okat is használsz, ajánlanám figyelmedbe a GuideGuide Photoshop plugint, amivel egy álom dolgozni. Ha nem photoshop CC 2014+-on vagy, akkor mindenképp a 2-es verziót használd ;)
http://guideguide.me/

Brielle
2015/08/14 21:49

Ó, nagyon köszönöm, hogy ajánlottad, majd mindenképpen kipróbálom :)

Brielle
2015/08/18 12:25

Igen, persze :D Majd a következő részben elkészítem hozzá a kódolást, és akkor majd meglátod, hogy el lehet. Csak nyilván vannak olyan részletek, amiket GPortálon nem lehet megcsinálni, mint például a legfrissebb hírek fejlécen való elhelyezése (nem tudom, ez lehetséges-e), valamint GP-n a reklám mezőre sincs szükség :)

2016/04/02 10:29

Szia Brielle! :) Mindent a pontok szerint készítettem, és minden sikerült is. Csak lenne egy aprócska kérdésem. Itt van a másik oldalad is, amit szintén követek rendszeresen, és azt szeretném kérdezni, hogy itt is a fejléc, (bocsi, nem tudom a szakszavakat,) ugyanakkor méretű, mint itt a Nickisnél? Csak mert én nagyobb méretben látom,lehet, hogy csak nekem rossz a szemem. Tehát ez is 1920×1000-s méret?
-> http://kitharingtonfans.com/

Brielle
2016/04/02 17:21

Szia Linda! Mindig 1920×1000-res méretből indulok ki, a szélesség mindig ugyanekkora, csupán a hosszúságot szoktam változtatni, így igen, a Kit Haringtonos oldalamon is ekkora a fejléc. :)

2016/04/03 10:58

Ja, értem! Akkor csak elnéztem. Lenne még egy kérdésem. Én amikor készítem a fejlécet, és berakom a függőleges és a vízszintes vonalat is, (ahogy kell) alig marad helyem a dolgokra. Mármint nem is fér már rá az üdvözlő üzenet, meg ilyesmik. Mert a vízszintes és a függőlegesen kívül nem lehet kilógni, nem de?

Brielle
2016/04/04 12:04

Hát, nincs megszabva, hogy nem lehet, ha nem férsz el, akkor maximum inkább lefelé legyen hosszabb a fejléced. De akár lehet gondolkodni 1100 pixel széles fejlécben is, abba már bele kell, hogy férjél, csak bele kell kalkulálni azt is, hogy a kisebb képernyős gépeken kicsit elcsúszhat a design.

Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *