Egyedi, stilizált vállalati dokumentumok küldése ügyfeleid részére nagyszerű első benyomást kelthet.
Levél fejléc sablonjainkat profi grafikusok készítették, hogy segítsék vállalkozásodat kitűnni a tömegből!
Ha egyedi fejlécet kell létrehoznod vállalkozásod számára, de nem tudod, hogyan fogj hozzá, ne aggódj, segítünk.
Miért kezdenéd a tervezést a nulláról, ha választhatsz a sablonjaink közül, amelyekkel gyorsabban végezhetsz a munkával.
Adj hozzá saját logót, betűtípust, színeket, hogy egységesítsd vállalkozásod megjelenését.
Ha elégedett vagy az általad készített fejléccel, nem kell mást tenned, mint elmented, majd letöltöd az elkészült munkát PDF, JPG vagy PNG formátumban.
Mindössze annyit kell tenned, hogy egy kattintással elkezded a fejléc létrehozását.
Egy vállalkozás levél fejléce egyedi tervezésű kell legyen, amely egy ikonikus betűtípus kiválasztásával könnyedén elérhetővé válik.
Modern, színes és merész ikonok és formák hozzáadásával tedd üzleti levél fejlécedet egyedivé.
Meríts ihletet a fejléc sablonjainkból, majd egy drag and drop segítségével add hozzá a márkád egyedi design elemeit.
Szerkeszd meg a levelet, majd adj hozzá egy professzionális, egyedi fejlécet.
Álmodd meg.
A Photoshop és a fejléc készítés
A Photoshop kiváló program grafikusok, designerek, webdesignerek számára.
A Photoshop bétaverziója tesztelés és visszajelzés céljára használható.
A Műveletek panelen a művelet lejátszása és dokumentumelőzményekben való véglegesítése előtt megtekintheted annak előnézetét.
Keresd meg a listában szereplő műveletek melletti előnézeti ikont, és az egérrel mutass a műveletre a listában, hogy megjelenjen az előnézet.
A Műveletek panelen található keresőmezővel egyszerűen megtalálhatod a Photoshopban elérhető számos művelet bármelyikét, illetve a saját magad által létrehozott vagy telepített egyéni műveleteket.
Az Ablak > Műveletek menüből elérhető Klasszikus műveletek segítségével műveleteket rögzíthetsz, lejátszhatsz, szerkeszthetsz és törölhetsz.
Egy adott készletben lévő művelet, illetve adott műveletben lévő összes parancs kibontásához és összecsukásához válaszd a készlet, művelet vagy parancs melletti háromszög ikont.
A műveletek előre definiált feladatokból állnak, amelyekkel automatizálható az ismétlődő munka egy fájlon vagy fájlkötegen belül.
A műveletek menüparancsokat, panelbeállításokat és eszközműveleteket tartalmazhatnak.
A műveletekkel átméretezheted a képeket, effekteket alkalmazhatsz, vagy fájlokat menthetsz a kívánt formátumban.
Nyomdai követelmények és Photoshop
A Photoshopban is gyakran készítünk olyan munkát, melyet aztán nyomtatásra szánunk - legyen az például egy szórólap vagy egy névjegykártya.
A Photoshop-ot azonban nem ilyen jellegű munkák készítésére találták ki - már ami a nyomdai vágójelek, kifutók, regisztrációs jelek, színellenőrző csíkok, stb. megadását, beállítását illeti.
Vágójeleket nyomtat oda, ahol a papírt vágni kell.
Nyomtathatsz vágójeleket a sarkokba.
Passzer jeleket nyomtat a képre (többek között koncentrikus köröket és csillag alakú céljeleket).
Kinyomtatja a Fájlinformációk párbeszédpanelen megadott tetszőleges szöveget. A szöveg körülbelül 300 karakter hosszú lehet.
Kinyomtatja a fájl nevét a kép fölé.
A képen belülre, nem pedig azon kívülre nyomtat vágójeleket. Ezt a beállítást akkor használja, ha a képet a grafikán belül kívánja körülvágni.
Ha esetleg erre nincs lehetőségünk vagy a nyomda nem elég készséges, segítőkész, és pl. a kifutót, illetve a vágójeleket a Vonal eszköz, azaz vízszintes vonalak segítségével meghúzzuk.
Tehát ha A4-es oldallal (210×297 mm) dolgozunk, és ehhez az előző lépésben mind a négy oldalhoz adtunk 5-5 mm-et, akkor most 220×307 mm méretű a munkaterületünk.
Végül a munkát PDF-ként mentjük, [kiváló minőségű nyomtatás] beállítással.
A PDF-et tehát így ki tudja nyomtatni a nyomda, majd szükség szerint levágni, kivágni.
Nem profi megoldás, de ha minden kötél szakad, akkor így tudjuk kifutóval és vágójelekkel ellátni a munkánkat.
Előtte mindenképpen egyeztessünk az adott nyomdával, hogy elfogadják-e ezt a megoldást!
Alternatívák és kiegészítő programok
Az Illustrator vektorgrafikus képszerkesztő program, elsősorban logókészítésre használjuk.
Ha olyan munkáról (legyen az névjegykártya, hirdetési kreatív) van szó, mely során sok vektorgrafikus alapanyaggal kell dolgoznunk (pl. logók).
Már az új dokumentum megnyitása során is megadhatjuk a kifutókat, de a munka pl.
Profi kiadványszerkesztő program az InDesign.
Az InDesignban megnyitható a Photoshopból mentett JPG/PNG fájl, és a szükséges nyomdai jelekkel ki tudjuk exportálni PDF fájlként.
Ehhez azonban arra van szükség, hogy a Photoshopban már eleve számoljunk a kifutóval, a munkaterület méretéhez adjuk hozzá a kifutó méretét is, azaz a kifutó méretével növelt munkaterületet nyissunk meg és azon készítsük el az adott munkát.
Ha nincsenek is a munka szélére és ezzel kifutóra eső elemek, akkor is legyen egy “fehér keret”, azaz mindig legyen kifutó a munka körül.
Az InDesignban pedig akkora méretű munkaterületet kell nyitnunk, mely a végeredmény lesz (pl. egy névjegykártya esetén 9 x 5 cm, tehát ez a nyomtatott méret).
A munkaterületet célszerű rögtön kifutóval (pl. 3-5 mm) megnyitnunk.
A kifutót piros vonalak jelzik a programban, ezek abban lesznek a segítségünkre, hogy ezek mentén pontosan ekkora méretű Téglalapkeretet nyissunk, melybe a fotót, azaz a munkát be tudjuk illeszteni.
Ezt követően a munkát a szükséges nyomdai jelekkel és kifutóval ki tudjuk exportálni PDF fájlként.
Ha esetleg előzetesen nem adtuk meg a kifutót, mely a Téglalapkeret méretezésében a segítségünkre lenne, akkor a Téglalapkeret eszköz kiválasztása után egyszerűen kattintsunk a munkaterületre és meg tudjuk adni, hogy pontosan mekkora méretű Téglalapkeretet szeretnénk létrehozni: munka méretének kifutóval növelt mérete; pl. 90 x 50 mm méretű névjegy és a két-két oldalon 5-5 mm-es kifutó esetén 100 x 60 mm méretű Téglalapkeretre lesz szükség.
Az Illustratorban megnyitható maga a Photoshopból mentett PSD fájl, mely a szükséges jelekkel és kifutókkal elmenthető PDF fájlként.
Ehhez arra van szükség, mint az InDesign program esetében, annyi különbséggel, hogy itt nem áll rendelkezésre Téglalapkeret, melyben egyszerűen el tudjuk helyezni a munkát, hanem a megadott területre kell beigazítanunk a fotót, a munkát.
Az Illustrator programban kifutóval kell megnyitnunk az adott munkaterületet (= munka nyomtatott mérete), és a piros kifutó által jelölt területre kell pontosan beillesztenünk a munkát.
Amennyiben kétoldalas munkáról (pl. kétoldalas névjegy, szórólap, stb.) van szó, mindenképpen célszerű egyeztetni az adott nyomdával, hogy azt hogyan kérik: egy PDF-ben a két oldalát vagy oldalanként külön-külön PDF-ként.
Utóbbi a jellemző, így egy kétoldalas munka esetén külön el tudjuk készíteni annak előlapját és hátlapját is a Photoshop programban, és mind az előlap, mind a hátlap esetében el tudjuk végezni a PDF-ként való kimentést/kiexportálást.
Weboldal grafika készítése Photoshopban
A fórumokon gyakran belefutni abba a kérdésbe, hogy hogy lehet Adobe Photoshop segítségével honlapot (illetve annak grafikáját) elkészíteni, hogy lesz ebből az egészből (mármint ha már van egy kész grafika) egy böngészhető, tartalommal feltölthető site?
Mivel legjobb tudomásom szerint ilyen jellegű képes/szöveges leírás még nincs magyar nyelven, így hát nekiállok és igyekszem elmagyarázni.
A leírás előtt fontosnak tartom megjegyezni, hogy a honlap kinézete teljes mértékben alapszintű lesz (header, tartalom, footer), ennél természetesen lehet sokkal bonyolultabb, szebb, színesebb csilivili grafikát is készíteni.
A Dreamweaver-es résznél táblázatok segítségével fogom felépíteni a lapot, viszont ettől eltérő módon ezt meg lehet oldani csupán CSS (stíluslapok) használatával is.
A Photoshop-os résznél a grafika elkészítésére nem térek ki, ehhez segítséget nyújt a tutorial.hu-n található számtalan tutorial, a linkek résznél is van egy gyűjtemény ami megfelelő kiindulási pontként szolgálhat, illetve a google-ba írt "photoshop tutorial" találatok között is lesz elég anyag.
A honlap webszerkesztés részében található tutorial-ok alapján a lap elkészítéséhez is bőven találsz segítséget.
Első körben rajzold meg a kívánt honlapgrafikát.
A grafika egy header-t (fejléc), egy tartalmi részt illetve egy footer-t (lábléc) tartalmaz.
A gombokat jelenleg kihagytam hogy a minnél egyszerűbb legyen a módszer ismertetése, de ha neked (és végül is erre igen nagy az esély :)) a későbbiekben igényed lesz rájuk, az itt leírtak alapján remélem már simán meg tudod oldani a feladatot.
A grafika elkészítésekor célszerű figyelembe venni, hogy ha 800×600-as felbontáshoz szeretnéd elkészíteni, akkor ne 800px széles legyen a kép, mert a honlapot majd oldalirányba gördíteni kell (ennek oka, hogy a 800×600 a monitor felbontása, ebből még helyet foglal a böngészőprogram kerete, a gördítőmenük stb.)
Maradj meg a kb 770px széles grafikánál, az még "biztonságos" szélesség.
A grafika elkészítésekor próbáld meg úgy elkészíteni az egészet, hogy a lehető legtöbb helyen majd a későbbiekben háttérképeket tudj definiálni a gyorsabb megjelenés/lapletöltés érdekében.
A Photoshop-ban célszerű a grafikát nagyobb egységekre felbontani "guides" (segédvonalak) segítségével.
Ezeket a vonalakat úgy tudod létrehozni, hogy az egérmutatóval az ablak bal oldalán és fenti részén látható vonalzóra állsz, majd az egeret nyomva tartva "belehúzod" a segédvonalat a képbe.
Ha nem jelenik meg, akkor a "view > show > guides" részen lehet a megjelenését ki-/bekapcsolni.
Miután megvannak a segédvonalak, következzen a kép feldarabolása.
Az eszköznek 2 állása van (ezek között a gombon nyomva tartott egérrel tudsz váltani).
A slice-oknak célszerű beszédes nevet adni, ezzel a későbbiekben biztos egyszerűbb lesz a dolgod.
Macerás tud lenni mikor pl. 20-30 "kepneve01, kepneve02 stb..
A slice-ok tulajdonságait úgy tudod módosítani, hogy a slice-t kijelölve nyomsz egy jobbegérgombot, és a megjelenő menüben kiválasztod az "edit slice options.."-t.
Először is mentsd el (ha még eddig nem tetted volna meg) a grafikádat, lehetőleg PSD formátumban, hogy minden beállításod és layer-ed megmaradjon.
Az ablak bal oldalán látható (és piros körrel jelzett) "slice select tool"-lal tudod kiválasztani, hogy épp melyik szelet legyen az aktuális.
Erre azért van szükség, mert minden egyes szelet tulajdonságait egyesével be lehet állítani (minőség, fájltípus stb.).
Több szeletet a SHIFT gomb nyomvatartásával tudsz kijelölni.
Persze az ablak azért ennél több infót is tartalmaz, de adják magukat a dolgok (aktuális RGB stb.. lent, vagy hogy a "preset: [unnamed]" részen a kis nyílra kattintva el lehet menteni az aktuális beállításokat) és perpillanat a fent leírtak szükségesek a feladathoz.
Miután beállítottál mindent, válaszd ki a "Save" gombot, és megjelenő ablakban megadhatod, hogy a képeket hova és hogy mentse el.
Elsőre szerintem célszerű "slices"-nál az "all user slices"-t beállítani, így a képből az összes - általad jelölt - slice-t el fogja menteni.
HTML és CSS alapok a weboldal felépítéséhez
Nyiss egy új HTML lapot a "file > new" (CTRL+N)-ra kattintva.
Szúrj be egy táblázatot, mely nálam most 3×3 lett.
A 3 sorra azért van szükség, mert van header, tartalom, footer.
Mielőtt még tovább haladnál, kattints a lapon bárhol egy jobbegérgombot, majd válaszd ki a "properties"-t.
Beállíthatod továbbá hogy milyen legyen a betűk színe, mekkorák legyenek a "margin"-ok (margók), a linkek színei, illetve hogy mi legyen a háttérkép (de ez jelenleg nem fontos, inkább egy színkódot adtam meg).
Megjegyzés: ez a megoldás közel sem a legjobb, hisz ezeket a tulajdonságokat sokkal jobb ha CSS-ből szabályozod.
A lap immár szép mélykék színben pompázik.
Állítsd be a táblázat celláinak méretét.
Ehhez a lenti "properties" ablakban a cellákat kijelölve írd be a "W" (width = szélesség) mellé a "20"-t.
Következő lépésként állítsd be a felső sor (header) háttérképét.
Ezt megcsinálhatod úgy is, hogy nem az egész sornak állítod be, csak a középső cellának, mert a 2 szélső cella úgyis teljesen ki lett töltve a 2db kerekítéssel.
A 3. maradt a középső sor …ennek 3 celláját olvaszd össze oly módon, hogy kijelölöd mindhárom cellát, majd a lenti "properties" ablakban megkeresed a "merges selected cells using spans" gombot és rákattintasz.
Itt most megint egy olyan megoldás következik, amire több megoldás is lehetséges (pl.
A 2. sorban a háttérkép teljesen "faltól-falig" tart, ha ide bármilyen szöveget beteszel, az rálóg a honlap falára, csúnya lesz.
Ezért vhogy távolságot kell tartani a falaktól, amire egyik lehetséges módszer egy újabb táblázat beillesztése (de ez már csak 1×1-es lesz).
Az újonnan beillesztett cellát igazítom középre.
Így megvan a 10-10 px távolságtartás a falaktól.
Íme a kész honlap böngészőbeli kinézete.
A fenti grafikát nagyon egyszerűen akár rugalmas honlapszerkezethez is fel lehet használni, minimális módosítással.
A feladat mindössze annyi, hogy a középső (tartalmi rész) terület háttérképét 3 részre kell szétszedni, hogy a lap jobb és bal széléhez a "fehér csíkos" képrészletet be tudd állítani mint háttérkép.
A táblázat fix 509px széles beállítását töröld, illetve helyette állítsd be pl. 90% szélességet.
A szélső cellának (tartalmi rész sora) pedig illeszd be háttérképként az előzőekben mentett "tartalom-bal.jpg" és "tartalom-jobb.jpg" képeket.
FotoJet: Egyszerű képszerkesztő és kollázs készítő
Vannak esetek, amikor úgy alakulnak a dolgok, hogy gyorsan szükség lenne valamiféle fénykép kezelő alkalmazásra, de épp nincs kéznél ilyen.
Mielőtt nagyon mélyen a dolgok elejébe szaladnék, azt el kell, hogy mondjam, hogy a FotoJet, bár vannak szuper szerkesztő funkciói, alapvetően egy fotókollázs összeállító eszközként definiálható - és így is épül fel, alapvetően kijelölve ezzel egy meghatározott célcsoportot.
A konkrét template kiválasztása után szerkesztői módba válthatunk, ami ez esetben három (azaz 3) db menüpontot takar.
Fura, de elég ez, és ezen a szinten nem hiányzik sem a rétegkezelés, sem az eszköztár mindenféle - más programokban uralkodó - elemei.
Egy szó mint száz, itt is igaz a mondás, hogy az egyszerűség gyönyörködtet.
A megnyitott témának egy legördülő menü alapján választható háttérkitöltés, színek és minták alapján.
Ezután a Clippart menüben egy kitűnően katalogizált “könyvtárba” léphetünk, ahol többszáz kitűnő minőségű, előre eltárolt mintából választhatunk díszítőelemeket.
A szöveget szövegdobozokban lehet elhelyezni, és ugyanúgy méretezhetőek, szerkeszthetőek, mint a clipartok.
A betűtípus választék gazdag (gyakorlatilag a Google Fonts teljes kínálata) a szövegkezelés pedig egészen egyszerű.
Amire sajnos nincs lehetőség (legalábbis én nem találtam meg) az a szöveg vonalhoz igazítása (torzítása).
Ezt az utolsó, “Edit” menüpontban lehet elérni, és ahhoz képest, hogy mennyire egyszerűre sikerült ez is, kifejezetten gazdag.
Ezek a funkciók ugyan csupán egy alapszintű képszerkesztő funkcionalitását nyújtják, és ezek a funkciók nagyrészt elérhetőek a fényképezőgép (vagy a mobil) képkezelés menüjében is, így könnyedén legyinthetünk rájuk, ugyanakkor mégsem lehet szó nélkül elmenni a funkciók mellett, ennek oka pedig az (mármint azon kívül, hogy még véletlenül sem mindegy, hogy mekkora képernyőn dolgozunk) - hogy a Fotojet kiválóan teszi a dolgát.
Ezek a szerkesztési funkciók és filterek működnek.
Hazudnék, ha azt mondanám, hogy sokat vártam ezektől az effektektől, de annyira “adják” magukat, annyira kézre állnak, hogy csak dicsérni tudom a FotoJet fejlesztőit, akiknek Effektek tekintetében sem kell szégyenkezniük.
Az “Effect” menüpontra kattintva a ClipArtoknál már látott, logikus bontásba szedve úgy 40 különböző hatást érhetünk el a képeinken.
Kifejezetten tetszett például az, hogy ezek a szűrők a Photoshop alapfiltereivel ellentétben inkább amolyan all-in-one szűrők, például az elhomályosított képre ráeresztett “old photo 5” össze is karcolta az amúgy tényleg korhűre barnított fényképemet.
A FotoJet alapverziója ingyenes, cserében van némi korlátozás, és a képernyő egy részét reklámok foglalják el.
Weboldal tervezés és kivitelezés Photoshopból
Kap az ember egy design tervet, ami egy rajzot, egy Photoshop vagy egy Gimp fájlt jelent.
Vagy esetleg nem kapja, hanem saját maga készíti el.
Nagyon szép és csiribiri, de hogy lesz ebből egy weblap?
Egyáltalán megvalósítható teljes pontossággal egy design terv?
Első lépésként térképezzük fel, hogy milyen főbb elemekből épül fel az oldal.
Ez valami olyasmi, mint egy építkezésen az alaprajz.
Ilyenkor ha nem mi magunk készítettük el a tervet, illetve ha nem tudjuk, hogy az oldalnak milyen funkciói vannak (vagy hogy melyik mit csinál), mindenképpen konzultálni kell a tervezővel / megrendelővel.
Elemek:
- Legfelül van a kép ami az oldal fejléc grafikája.
- Közvetlenül ez alatt van egy csík, amin mindenféle információ látható (névnapok, napkelte, stb).
- Ezután jön a legnagyobb rész, a közép.
- A bal oldali oszlopot elneveztem balsávnak, itt van a menü, a hírlevél feliratkozás, a vaisnava naptár és a friss blogok.
- A középső oszlopba kerül majd mindig a megjelenítendő tartalom.
- A jobb oldali oszlopot jobbsávnak neveztem el, ez ad helyet a keresésnek, a darshan képeknek, a hirdetésnek, az apróhirdetéseknek és a recepteknek.
- Végül legalul van egy kis rész ami a lent nevet kapta.
Tervrajz:
Ezek alapján már megrajzolhatunk egy kis tervrajzot magunknak, ami jó segítség lesz az oldalunk felépítésében.
Csupaszítsuk le az oldalunkat minden első körben felesleges sallangtól (színektől, tartalomtól), és koncentráljunk csak az oldalunk vizuális felépítésére, vázára.
Valami ilyesmit kellene kapnunk:
A kódolás előtt
Mielőtt az ember nekiugrik a kódolásnak nem árt pár dolgot szemügyre venni a design tervben, van ugyanis pár érzékeny pont, amit jó ha az elején tisztázunk.
Ehhez megnyitottam a Photoshop fájlt és elkezdtem írni egy listát.
A magam részéről nem tartom túl jó ötletnek a kék alapon fehér betűket, mert hosszabb szövegeket nehéz így olvasni.
A megrendelő azt mondta, hogy nem baj, neki tetszik.
A fejléc Flash fájl még nem volt kész, írtam a designernek, hogy úgy dolgozzon rajta, hogy a jelenlegi magassága és szélessége ne változzon, se a Flash kiindulási állapotában, se annak bármelyik fázisában.
A Flash-t a magam részéről egyébként sem kedvelem, mert még gyorsabb internet esetében is sokszor lassacskán töltődnek be.
Az oldalt várhatóan modemes emberkék is nézni fogják, akiknek meg nagyon sokáig is eltarthat míg letöltődik a Flash.
Az eredeti design terv 900 px széles volt a narancs háttér nélkül.
Ez 800*600-as felbontásnál azt jelenti, hogy a usernek vízszintes irányban is scrolloznia kell, hogy elérje a jobbsávot.
A felhasználók kb. 10%-a 800*600 alatt nézte az oldal elődjét.
Infopanel
Az infópanelen az adott napra vonatkozó vaisnava esemény (a példában: Srila Prabhupada elindul az USA-ba) változó hosszúságú, illetve ha nincs az adott napon ilyen esemény akkor üres.
Betűtípusok.
Ez általában érzékeny pont szokott lenni, jobb előre tisztázni.
A weben ugye a sans és a sans-serif a két olvasható szabványos font család.
Azt, hogy ezen a családon belül konkrétan milyen betűtípussal fogja a böngészőprogram az oldalunkat megjeleníteni csak hellyel-közzel tudjuk alakítani, mert különböző operációs rendszerek különböző betűtípusokat használnak.
Ezért ha szétnézünk a neten azt fogjuk látni, hogy az Arial / Helvetica párost használják döntő többségben.
Miért?
A vaisnava naptár, a friss blogok, a darshan és a receptek a design tervben egy DauphinPlain nevű betűtípussal szerepeltek.
Ez még az én gépemen sem volt telepítve (pedig van egy rakás betűtípusom), tehát könnyen megsaccoltam, hogy a potenciális látogatók közül hánynak lehet meg a gépén.
A címeket (mint pl. vaisnava naptár) megoldhattam volna képek elhelyezésével, de ezt semmiféleképpen sem akartam, mert ezen elemek tartalmát a működő oldalon egy PHP program fogja generálni, szóval ott biztos, hogy normál szöveget kell alkalmazni.
A tartalmi rész, a lent, az apróhirdetés és a receptek a design tervben Tahoma betűtípussal szerepeltek.
Ez egy alap windows font, de linux alatt biztos nincs és gyanítom, hogy Macintosh alatt sincs.
A designer pár percnyi pislogás után azt javasolta, hogy ha van a usernek akkor legyen Tahoma, ha nincs akkor legyen ez is Arial.
Darshan
A darshan képek mögött látható egy szép design elem, egy árnyék.
Ezzel az volt a bajom, hogy várhatóan a thumbnail-ek nem lesznek ugyanakkorák minden esetben, ami azt jelenti, hogy vagy több méretben kell elkészíteni az árnyékot és gondoskodni arról, hogy mindig a jó méret kerüljön alkalmazásra, vagy pedig elfelejtjük az árnyékokat.
A tartalmi részen a képek meletti szöveg a tervben mindig pontosan a kép alsó szélének a vonalában fejeződött be.
Ez az éles oldalnál valószínűleg nem így fog történni, a tartalom felelős nagy nagy valószínűséggel néha rövidebb, néha hoszabb bevezető szövegeket fog írni.
Bíztattam a tartalmi felelőst, hogy ismerkedjen meg az XHTML szabvánnyal és próbálja majd azt alkalmazni a feltöltött cikkekben.
Beszéljünk számítógépül
Akkor kezdhetjük az építkezést!
A böngészőablak felső széléhez nem ér hozzá a lapunk, hanem a kettő között van egy kis rész (10 px).
A bal sáv
A balsáv és a jobbsáv szélességét úgy kaptam meg, hogy fogtam a Photoshop fájlt és lemértem, hogy a bal és a jobb oldalon milyen szélesen tart a más színű oszlop.
Magyarul a bal oldalon a bal szélen lévő kékség kezdetétől a tartalmi rész kékjéig, a jobb oldalon a tartalmi rész kékjétől a jobb legszél kékjéig mértem.
Infopanel méret
Az infópanel magasságát úgy határoztam meg, hogy a fejléc aljától (vagyis ahol elkezdődik a kékség) a tartalmi rész kékségének a tetejéig mértem.
Megvallom őszintén, hogy nem véletlen, hogy pont addig, de ennek megindoklását későbbre halasztom.
Megjegyzés: eredetileg ez a magasság csak 56 px magas volt, ennyi szerepelt a design terven.
Menet közben derült ki, hogy ekkora helyen sehogy sem fog elférni normálisan az oda tervezett tartalom, így megnagyítottuk 65 px-re.
A probléma az volt, hogy a különböző betűkészletekkel dolgozó különböző operációs rendszerű gépek nem azonos méretet foglaltak el.
Az IE-n kívül mindegyik rávehető volt, hogy olvashatóan férjen el 3 sornyi adat ezen a helyen, de ez IE nem.
Bevezettünk egy fent nevezetű divet, ami összefogja a fejlécet és az infópanelt.
Nincs rá feltétlenül szükség, de mivel a következő részeket floatolni fogjuk, jobb ha ezek ketten ott fenn egy csoportba vannak, ha már úgy is egyforma szélesek és egymás alatt vannak.
Másrészről meg szerintem így a forráskód is követhetőbb, mert van egy fent, egy közép és egy lent elemünk.
A 3 oszlopos kialakításra azt a módszert választottam, hogy mindhárom oszlopnak megadtam a szélességét és balra floatoltam őket.
Mivel az oldal egy fix grafikára épül, a méreteket végig pixelben fogom megadni.
A végeredmény:
- Betettük a háttérképet (amit az eredeti Photoshop fájlból szeltem ki úgy, hogy varratmentesen lehessen mind vízszintesen mind függőlegesen egymás mellé pakolni, ez a hatter.jpg), az alapértelmezett betűszínt fehérre állítottuk, és megadtuk, hogy Arial (sans-serif) 12 px nagy legyen.
- A fejléc képünk nem fog az ablak tetejéhez ragadni, mert már az előzőekben megadtuk a legkülső lap nevű divünknek a 10 px-es felső margint, valamint az oldalsó margin-ok autora állításával gondoskodtunk az egész oldal középre igazításáról.
- A lenti részbe a szövegeket helyeztük el, amikből valamikor majd linkeket fogunk csinálni.
- A CSS-ünkben megadtuk a lent háttérképét (amit szintén a Photoshop fájlból szeltem ki). Ez a háttérkép 61 px magas.
A menü
A menühöz egy egyszerű unordered list-et (ul) használunk, a menüpontokhoz pedig hozzárendeljük a megfelelő linkeket.
A balsáv felső paddingját 15 px-re állítottuk, hogy a menü ne rögtön a tetején kezdődjön, hanem kicsit lentebb, valamint az ul elemnek 0-ra vettük a marginját és a paddingját, tiltva ezzel minden behúzást a listában.
Aztán a balsáv teljes terjedelmében minden listaelemnél tiltottuk az elem előtt megjelenő kis gombócot, mivel erre nekünk egyiknél sem lesz szükségünk.
Ezután következhet a menünk összerakása.
Ehhez a menü gombjaként szolgáló képecskét szintén ki kellett szelni az eredeti Photoshop fájlból, ez lett a menugomb.jpg.
Azért nem csak a kerek szélű kis csíkoskát használtam itt a képként, mert a balsáv, tartalom és jobbsáv hátterét egy csapásra akartam megoldani, de erről majd később.
Szóval a menugomb.jpg egy 161*25 px nagyságú kép, amit a listaelemek háttereként használunk.
Mivel nem akarjuk, hogy a menü felirata a háttérként használt kép tetejére ragadjon adunk neki egy 5 px-es felső paddingot.
Be kell állítanunk bal oldali paddingot is, mert a menüelemek feliratait középre igazítjuk, de a középre igazítás tengelye a balsáv 161 px széles sávjának a közepe lesz, és ehhez képest a mi menugomb.jpg képünk ténylegesen a gombot ábrázoló része 3 px-lel beljebb kezdődik.
Hírlevél
Ez egy egyszerü picike form egyetlen felirattal és egyetlen input mezővel.
Annyi a különleges benne, hogy az input mezőnek be kell tennünk egy háttérképet.
Az ehhez tartozó CSS is pont ilyen egyszerű.
Kiszeleteltem a Photoshop fájlban lévő input mezőt ábrázoló részből egy szeletkét (input-bg-nagy.jpg), és ezt használtam az input mező háttéképeként.
Ez pont olyan magas mint az input boxom, és vízszintesen ismételhető, így kitölti a rendelkezésére álló helyet.
Elég világos is, így látszani fog amit a user belegépel.
Részemről úgy gondoltam, hogy nem ártana mellé valami gomb amire a user rá tud kattintani, ha fel akar íratkozni a hírlevélre, de a megrendelő azt mondta, hogy nem kell.
Így úgy tud feliratkozni, hogy beírja a címét és üt egy entert.
Vaisnava naptár, Friss blogok
Ezzel a résszel foglalkozunk következő lépésként.
5. Beállítunk a két elemnek közös margin és padding értékeket.
Azzal, hogy ezt együtt adjuk meg, azt érjük el, hogy nem fognak elcsúszni egymáshoz képest.
A margin értékek teljesen önkényesek, mivel a designer azt mondta, hogy csak odacsapta ezeket az elemeket oldalra, nem fontos, hogy milyen távolság van közöttük.
A padding értékekkel gondoskodunk arról, hogy ha majd a balsáv alá kerül a háttér, akkor a szövegek nehogy lelógjanak a nekik szánt helyről.
Beállítjuk a vaisnava naptár eseményeit elválasztó vonalak típusait is (szaggatott, vékony vonal).
Ez a design tervben folytonos vonal volt, de a designer menet közben meggondolta magát, így szaggatott lett.
Mindkét elemnél ugyanaz a háttér kép (cimhatter.jpg), amit szintén az eredeti Photoshop fájlból szeltem ki.
Emlékezzünk arra, hogy megállapodtunk a designerrel, hogy a menük címsorának megjelenése annyiban fog változni, hogy a cím nem az eredetileg tervezett DauphinPlain betűtípussal lesz kiírva (mert ebben az esetben csak képként lehetne megoldani) hanem Ariallal.
A cimhatter.jpg 130 px széles, vagyis jóval kisebb mint a rendelkezésre álló 161 px hely.
A kettő közötti különbséget 1 px híjján lefedi a 10 px-es jobb és a 20px-es bal padding.
Azt az 1 px-et meg meghagytam, hagy kezdjen vele mindegyik böngésző amit akar.
A balsávban egyetlen dolog maradt még hátra (a hátter beillesztésén kívül), az pedig az alsó emberke beillesztése.
Ezt az emberkét úgy szeretnénk elhelyezni, hogy mindig a bal sáv legaljára kerüljön.
Ez nem is olyan egyszerű feladat, mint első olvasásra gondolnánk, emiatt most lépjünk át a tartalmi részre, és majd alkalomadtán visszatérünk ide.
A balsáv alsó emberkéje
Ennek beillesztését későbbre halasztottam lásd lentebb, hogy miért.
Tartalom
Pakoljuk be a szükséges tartalmat a tartalmi részbe, majd adjunk meg hozzá minden CSS információt.
Azt hiszem itt semmi sem szorul magyarázatra, hiszen csak betűtípusokat állítgatunk meg padding és margin értékeket.
Talán csak annyi, hogy minden elemet elneveztünk a HTML-ben amihez várhatóan fog valami formázási utasítás (CSS definíció) tartozni.
Ha megnézzük az oldalunkat most látni is fogjuk mi a problémás a balsávban az emberke elhelyezésével.
A balsáv nem lóg le a lent-ig, hanem csak addig ér ameddig tartalom van benne.
Ha a jelenlegi tartalom végére betennénk az emberke képét, akkor ha a tartalmi részen több szöveg van, akkor az emberünk lebegne a levegőben.
Ezt most még nem oldjuk meg, de legalább megállapítjuk, hogy ezzel még lesz dolgunk.
A közös háttér
Akkor most elérkeztünk arra a pontra, hogy bepakoljuk a hátteret oda, ahova illik.
Bevallom őszintén előszőr azzal próbálkoztam, hogy mind a balsávnak, mind a jobbsávnak, mind pedig a tartalomnak külön külön háttérképet illesztek be.
Ezzel az elgondolással az volt a baj, hogy a tartalmi rész tetjén van egy kis boltív.
Ez kissé megbonyolította ezt a módszert.
Végül úgy döntöttem, hogy egy hátteret adok meg, ami lefedi mindhárom oszlop igényét.
Első nekirugaszkodásra kiollóztam az eredeti Photoshop fájlból egy csíkot ami a bal legszélső kékségtől a jobb legszélső kékségig tartott, és így persze 770 px széles lett (khatter.jpg).
Előszőr beállítottam a közép div háttereként, de nem működött, mivel ebben a div-ben nincs semmi tartalom mint más div-ek.
Persze ahhoz, hogy lássuk a változást a fenti három CSS definíciót ki kell törölnünk.
Egy kattintás éééés láss csodát mindenhova odakerült a háttér ahova kell.
Ha megnézzük az előző fázis és a jelenlegi közötti különbséget akkor már azt hiszem mindenkinek világossá válik, hogy a lenti részt miért pont ott vágtuk el ahol.
Ha majd feltesszük az infópanelt akkor az is egyértelmű lesz.
Lényeg, hogy ott vágtam el ahonnan kezdve a tartalom rész háttere (beleértve az oldalsávokat is) egymás alá illeszthető folytonos grafika.
Ezzel az ügyes kis CSS trükkel most elértük, hogy az oldalunk egyre jobban kezd hasonlítani ahhoz amit akarunk.
A tartalom rész tető grafikája
Ha jól megnézzük a tartalom részt az eredti design-tervben észre fogjuk venni, hogy a tartalom rész teteje nem a jelenlegi állapot szerint néz ki, ugyanis egy kis boltív zárja felülről.
Kiszeltem a design tervből ezt a kis részt, és a tartalom-teto.jpg fájlként elmentettem.
Ezt a képet kell beillesztenünk, mint a tartalom div háttérképe, letiltanunk, hogy a háttérkép ismétlődjön, és top-ra pozícionálnunk.
Mivel ennek a képnek a jobb és bal felső sarka olyan színű mint a jobbsáv, illetve a balsáv szélén található vékony csík vizuálisan össze fog ezekkel olvadni.
A nyil.gif képecskét kellett elkészíteni.
Ez egy átlátszó hátterű gif kép, amit az eredeti design tervből vágtam ki és azt a célt szolgálja, hogy elküldje vele a user a formot.
A CSS-ünket egy kicsit azonban módosítanunk kell, mivel a jobbsávnak egyelőre nem adtunk meg padding értéket, és így minden benne lévő elem a széléhez ragadna.
Nem akarunk mindennek külön-külön padding értékeket rendelni, ezért a jobbsávra meghatározunk egy 4 p...