Professional Documents
Culture Documents
Webdesignsuli Ingyenes Leckék - Profi Otthoni Webdesign Tanfolyam
Webdesignsuli Ingyenes Leckék - Profi Otthoni Webdesign Tanfolyam
Webdesignsuli Ingyenes Leckék - Profi Otthoni Webdesign Tanfolyam
leszek!
Gyere s
tarts velem!
Konkrt gyakorlati feladatokon keresztl
bepillanthatsz a webdesign alapjaiba.
Webdesignerleszek!
www.webdesignsuli.hu
Lemsolhatom valakinek?
Erre a kiadvnyra a Creative Commons Nevezd meg! - Ne add el! - Ne vltoztasd!
(CC BY-NCND) licence vnyes. Szabadon terjeszthet, msolhat, de csakis a
forrs (www.webdesignsuli.hu) megjellsvel. A kiadvnyt mdostani, vagy
feldolgozni tilos.
A kiadvny szerzje s tulajdonosa Czirki Barbara webdesigner oktat s a
FreshWeb Solutions Kft.
t
h
g
i
r
y
p
Co
A Creative Commons (kreatv kzjavak) egy nonprofit szervezet, melynek clja az olyan kreatv mvek
mennyisgnek nvelse, melyeket
msok jogszeren megoszthatnak
egymssal vagy felhasznlhatnak a
sajt mveikhez.
Forrs: Wikipdia
Webdesignerleszek!
www.webdesignsuli.hu
Webdesignerleszek!
www.webdesignsuli.hu
Webdesignerleszek!
www.webdesignsuli.hu
Ki vagyok n, s
mirt hallgass rm?
Hello!
Czirki Barbara vagyok,
a Webdesignsuli alaptja s vezet
oktatja 2011 ta. Azokat oktatom a
webdesigner szakmra, akik kreatv
munkt s jobb letet szeretnnek.
n magam hogyan lettem
webdesigner?
Itt rtam le a trtnetemet:
www.webdesignsuli.hu/kitol-fogok-tanulnicziraki-barbara-webdesigner
!
s
i
tt
i
s
s
e
Kv
Katt ide:
www.pinterest.com/czirakib
Webdesign vllalkozsomat s
honlapomat rekord id alatt futtattam fel. Mra jval tbb megrendelst
kapok, mint amennyire kapacitsunk
van. Ilyenkor szvesen passzolok t munkt a legjobb hallgatimnak. Cgem, a
FreshWeb Solutions honlapja:
www.freshweb.hu
2011 nyarn indult az els Profi
Otthoni Webdesign Tanfolyam. Azta
tbb szz hallgatm vgzett s
kezdett nll vllalkozsba, vagy
helyezkedett el a szakmban.
Nzd meg a hallgati munkkat:
www.webdesignsuli.hu/munkaink
Hobbi fotsknt nhny kpemet a www.czirakib.photo
oldalon tekintheted meg.
A www.ideabot.hu tletgazdja
vagyok. A projekt mg fejleszts
alatt, de annyit elrulhatok, hogy
a webdesignerek s ms kreatv
szakmk munkjt megknnyt
jdonsgrl van sz.
Webdesignerleszek!
www.webdesignsuli.hu
A webdesign alfja
1.
SZNEK
Figyelj csak!
Webdesignerleszek!
www.webdesignsuli.hu
Sznek
jelentse
Sznek
jelentse
a kultrkban
a kultrkban
Tudtad?
A klnbz szneknek ms- ms
jelentsget tulajdontanak a vilg
klnbz tjain. Az egyes kultrkban
az adott szneknek teljesen eltr jelentsk is lehet.
Nzznk nhny pldt:
A vrs szmunkra, a nyugati kultra
npeinek a szerelem, a szenvedly vagy
ppen a tilts s a veszly szne. Keleti
kultrkban azonban a jszerencse, a
menyasszonyi viselet vagy
az nnep szne.
Mg nlunk a fehr a bke, a tisztasg,
az rtatlansg szne, addig keletebbre a
hall s a gysz szne.
A feketvel tulajdonkppen pontosan
ellenttesen mkdik a dolog, mint a
fehrrel.
Webdesignerleszek!
www.webdesignsuli.hu
Sznkr
A sznkr nem ms, mint a szivrvny
sznei sorrendbe rendezve :) Tartalmazza az n. elsdleges-, msodlagos- s harmadlagos szneket is. A
sznkrn egymssal szembenll
sznek az n. komplementer sznek,
egyms kiegszt sznei, jellemzen
ers kontrasztot alkotnak.
Sznharmnia:
Jellemzen a harmonizl sznek a
sznkrn mindig egyms mellett helyezkednek el. Lehetnek egy
azonos szn klnbz rnyalatai.
Btran hasznljuk pl. a zldet a zlddel, de figyeljnk a megfelel
kontraszt- klnbsgre, hogy jl
lthatk legyenek a krvonalak.
Bvebben a kvetkez oldalon...
Kontraszt:
s
ert egye
m
,
k
n
u
k,
Vigyzz
sznpro
r
e
t
n
e
m
ld
komple
s s a z
v
a
ez
ashatat
mint pl.
v
l
o
y
g
o
t, h
veget,
amellet
z
s
a
k
i
sz
met s
lann te
e
z
s
a
k
atj
fraszth thatnak a szp
ha
bntan knkre is.
rz
Brrr...
micsoda botrnyos
sznellentt!
Webdesignerleszek!
www.webdesignsuli.hu
Sznharmnia
Javaslat
Ugye, milyen csodsan harmonikus
sznkombincikban pompznak ezek
a palettk?
Legyen sz hideg, vagy ppen meleg
sznekrl, a sznharmnia kiegyenslyozottsgot, kiszmthatsgot
tkrz, biztonsgrzetet kelt.
Kezdknek javaslom:
Ha tutira akarsz menni, nem akarsz
mellfogni egy mersz kontraszttal, vlaszd inkbb a harmonikus
sznkombincikat.
Webdesignerleszek!
www.webdesignsuli.hu
FELADAT
Sznpaletta ksztse
tta
e
l
a
p
n
z
s
A
de
i
v
s
i
c
e
r
k
et:
h
t
n
i
k
e
t
g
e
m
www.youtube.com/watch?v=4vkVq99Ylwc
Feladatok:
1. Kszts egy sznpalettt kpzeletbeli megrendelnknek, a
Happy Day letmd magazinnak.
ld bele magad a tmba, kpzeld el, hogy az letmd magazin
az egszsgrl, fittsgrl, testilelki egyenslyrl szl s ehhez
vlogass szneket.
10
Webdesignerleszek!
www.webdesignsuli.hu
Tervezs a betkkel
2. TIPOGRFIA
A sznek csak a kezdet volt. jabb izgalmaknak nznk elbe. Az egyik kedvenc tmm
a tipogrfia. Nem kell defincikat ismerned ahhoz, hogy tudd, a tipogrfia az a csodlatos tudomny, vagy mvszeti g, ami segti az informci kzlst s megrtst
a betk s kpek sszhangja ltal. Gynyr tipograflt elrendezsek s grafikk
hozhatk ltre egy kis fantzival. Kzben persze szmos rott- s ratlan tipogrfiai
trvnyszersgre kell odafigyelnnk, de errl majd bvebben a webdesign tanfolyam
sorn tanulunk.
11
Webdesignerleszek!
www.webdesignsuli.hu
A tipogrfia ptelemei:
bet (tpus, mret, kiemelsek, egalizls, ligatra);
sor (kzpre, tompn, ill. sorkizrtan
szedett, szkz);
szvegtmb (szkzk, behzskimenet, sorkzk, soregyen);
sorcsoport (aszimmetrikus/szimmetrikus, lipcsei soress, tpus);
dsztelem (leggyakoribb a lnia);
illusztrci (mvszi, fotillusztrci,
grafikai alkots, mszaki bra).
Forrs:
www.akg.hu/dtp/tetelek/4a_tipo.html
12
Webdesignerleszek!
www.webdesignsuli.hu
Betkevers
A betkeversnek szmos
szablyszersgt fogjuk
megtanulni a Profi Otthoni
Webdesign Tanfolyamon.
Azonban az egyik leglnyegesebb a talpasat a
talpatlannal szably, mely
szerint az n. talpas fontok
(betk) keverhetk a talpatlan
fontokkal. rott bettpussal
mindegyik keverhet, de a
hrom egytt nem.
Talpas font pldul:
Arial, Verdana
Tipp
Klassz tipogrfiai elrendezsekrt s gynyr,
sokszor
ingyenes
fontkszletekrt
ltogass
el
a
www.myfonts.com
weboldalra.
Ha
regisztrlsz, idnknt hrlevelet
is kldenek, amikben az j
fontkszletekbl sszelltott
tipogrfiai elrendezsek is
tallhatk. tletes, ignyes,
sokszor ingyenes s jogtiszta
betforrs :)
13
Webdesignerleszek!
www.webdesignsuli.hu
FELADAT
Fontkszletek
beszerzse
Betkbl sohasem lehet elg!
A webdesigner mr- mr megszllottan gyjti a fontokat. s milyen jl teszi! Egy- egy tletszeren
elmentett, mg j lesz valamire
bettpus lehetsges, hogy a
kvetkez munkd alapkve lesz.
Tipp
gyelj arra, hogy a kivlasztott fontkszlet biztosan tartalmazza a magyar hossz kezetes karaktereket is,
mint pl. az , , , , , stb
Feladatok:
1. Bngssz a kvetkez
weboldalakon s btran mentsd
el a szmodra szimpatikus
fontkszleteket. Legalbb 10- 20
bett vlassz ki, hogy legyen egy
kezd kszleted.
www.dafont.com
www.google.com/fonts
www.webdesignsuli.hu/webdesigner_blog/betutipusok-beszerzese-es-telepitese
14
Webdesignerleszek!
www.webdesignsuli.hu
3.
A WEBDESIGNER
ELKSZL
Jellemzen sohasem res kzzel lnk le egy munkt megcsinlni, nem az res monitorral szemezve llunk neki egy feladatnak.
Minden munkt rkszls, anyaggyjts elz meg, hogy
amikor eljn az alkots ideje, legyen mibl/mivel dolgozni.
Az anyaggyjts a kvetkezkre terjed ki:
kpi anyag (fotk, stock fotk, rajzok, skiccek, illusztrcik...)
fontok (betk)
inspirci (ha szksges)
szerzi jogok ismerete
specifikus ismeretek (informcik konkrtan az adott tmval
kapcsolatban, hogy rltsod legyen)
A kvetkezkben sorra vesszk az elkszletek teendit s
konkrt tippeket is adok, honnan tudsz tuti s sokszor teljesen
ingyenes, jogtiszta anyagokat begyjteni.
15
Webdesignerleszek!
www.webdesignsuli.hu
Kpek gyjtse
Az interneten sok helyrl tudsz
kpeket letlteni, azonban nem
mindegyik leglis, teht a jogtiszta forrs, ami gond. A kpek,
fotk, illusztrcik, stb... szerzi
jogvdelem alatt llhatnak. Ebben az esetben letltsk csnyn
fogalmazva lopsnak szmt, ami
nem tl dvs sem szmodra,
sem a megrendeld szmra. Az
ilyen kellemetlensgek elkerlse
rdekben mindig ellenrizd,
hogy az ingyenesen letlthet
anyagok valban jogtisztk- e.
Errl ltalban az adott kpgyjtemny, vagy kpgynksg oldaln
tallsz informcit.
Msik lehetsgknt biztosra
is mehetsz s vsrolhatsz n.
stock fotkat a kpgynksgektl. Ez biztos, hogy leglis, ltalban bankkrtyval vagy
PayPal- lal tudsz fizetni s szmlt
is kapsz rla.
Ingyenes kplelhelyek:
www.sxc.hu
www.everystockphoto.com
www.openphoto.net
www.stockvault.net
Fizets kpgynksgek:
Kpek forrsa:
www.sxc.hu
16
www.depositphotos.com
www.istockphoto.com
Webdesignerleszek!
www.webdesignsuli.hu
Fontok gyjtse
Font lelhelyek:
www.myfonts.com
www.google.com/fonts
www.dafont.com
www.1001fonts.com
17
Webdesignerleszek!
www.webdesignsuli.hu
Inspirci gyjtse
Ha nem jn knnyen az ihlet, vagy
egyltaln nem rint meg a tma,
ezrt nehz belelned magad,
nyugodtan inspirldj s merts
tletet n. inspircis galrikbl.
A neten nagyon sok ilyen galrit
tallsz, klnbz tmakrkben,
amik ms designerek munkit mutatjk be. Azonban vigyzz, mert
inspirldni nem egyenl a
lopssal. tletet merteni msok
munkibl s azt jragondolni
a sajt zlsednek megfelelen szabad. De nagyon vkony a
hatrvonal a lops s az inspirci
kztt, ezrt lgy mindig figyelmes
s tedd bele a munkdba magadat, a sajt stlusodat.
Log galrik:
www.logospire.com
www.logogallery.net
www.logogala.com
www.logooftheday.com
Webdesign galrik:
www.bestwebgallery.com
www.designfridge.co.uk
www.webcreme.com
www.designbombs.com
18
Webdesignerleszek!
www.webdesignsuli.hu
instant tipp
Tipp1
19
Webdesignerleszek!
www.webdesignsuli.hu
Kreatv plyzatok
Tipp2
Tbb klfldi s magyar weboldal is ltrejtt mr azzal a cllal, hogy kreatv szakembereknek,
grafikusoknak, webdesignereknek plyzatokat rjanak ki. Ezek rendszerint fizets plyzatok,
mghozz sokszor nem is kis pnzrt lehet ringbe szllni. gy mkdik egy- egy ilyen plyzati kirs, hogy vagyon ugyebr a megrendel, akinek szksge van X munkra. Ezrt cserbe X sszeget knl. Ezt kirjk plyzatra s a legjobb plyz zsebeli be a djat.
Jtancsok, ha plyzol:
Olyan kirst plyzz meg, ami valban megri Neked s abba aztn adj bele apait- anyait! mmel- mmal ksztett, sszecsapott mveket felesleges is beadnod, gysem arathatsz
sikert a gyorsan sszedobott munkval.
Jl olvasd el a kirst s igyekezz maximlisan megfelelni a megrendel ltal lertaknak. Ha
valami nem vilgos, krdezz!
Alkots kzben ld bele magad a megrendel cljaiba, amit a Te munkd ltal kvn elrni.
Maximlisan ignyes munkt adj be, hiszen ez minst Tged s gyis azt vlasztjk, aki
a legjobban, legignyesebben kidolgozta a tmt.
Tipp3
Ez a mdszer nem kzvetlenl, hanem inkbb kzvetve fog megtrlni szmodra. Kezdknek
gyakran problmt okoz, hogy mg nem rendelkeznek elg referencia munkval s
ebbl kifolylag nem veszik ket annyira komolyan. Menj elbe a dolgoknak s ha rrs
idd akad, tervezz kpzeletbeli megrendelknek logt, webdesign- t, plaktot, stb...
Ismersz olyan cget, akiknek csapnival a logjuk, vagy weboldaluk? Kszts nekik jat s aztn ajnld fel kedvezmnyesen megvtelre. Lgy lelmes s talpraesett! :)
20
Webdesignerleszek!
www.webdesignsuli.hu
traval
J TANCS Neked
Sose hagyd abba
a tanulst s nmagad kpzst. A j pap is holtig tanul, gy tartja a monds, s taln mg
Te is. Az informatika vilgban ez hatvnyozottan igaz. Az j technolgik, trendek jnnekmennek, olyan gyorsan, hogy kvetni is alig brod. Ezrt folyton kpezned kell magad, ha
lpst akarsz tartani. Elvgeztl egy webdesigner tanfolyamot valamikor? Ha nem kpzed
tovbb magad, a tudsod hamarosan nem sok mindenre lesz j. A folyamatos fejlds a
kulcsa a sikernek. A webdesign s weblap kszts egy nagyon komplex szakma. Sok tren s
sokat vrnak el a szakembertl, ezrt elengedhetetlen, hogy Te is befektess idnknt a sajt
tudsodba. n magam gy csinlom, hogy negyedvente a profitom 10%- t visszaforgatom
sajt magam kpzsbe. Rendelek valamilyen oktat DVD- t az internetrl, rszt veszek egy
tovbbkpzsen, vagy egy szakmai konferencin. Hidd el, ez tbbszrsen megtrl.
21
Webdesignerleszek!
www.webdesignsuli.hu
Szvvel- llekkel
Pr ve lttam egy tv- riportot az egyik leggazdagabb magyarral. Arrl krdezte a riporter,
hogy vlemnye szerint mi a siker titka. Az idsebb riember egyszeren, mgis nagyszeren
felelt meg a krdsre: Mindenkinek, aki nem azt csinlja, amit szeret, azt javaslom,
azonnal hagyja abba.
s valban, sikeres csakis akkor lehetsz, ha szved, lelked beleteszed a munkdba. Ha szereted, amit csinlsz, szmodra nem fog a sz szoros relmben munknak tnni. Nem is azt
mondom, hogy mka-kacags lesz minden pillanat, amikor dolgozol. De megtallod majd az
egyenslyt s alapveten rmdet leled majd a munkdban. Rrzel, hogy hol kthet
kompromisszumot a szrnyal fantzid a lehetsgekkel s hol ll meg a mrleg nyelve
a megrendelkkel val kapcsolattarts s az alkots kreativitsa kztt. Ha szvvel- llekkel
dolgozol, az els sikerekre nem kell sokig vrnod.
22
Webdesignerleszek!
www.webdesignsuli.hu
23
Webdesignerleszek!
www.webdesignsuli.hu
24
Webdesignerleszek!
www.webdesignsuli.hu
Czirki Barbara
www.webdesignsuli.hu
25
www.webdesignsuli.hu