Transcript Kersti Laidvee - Disaini algkursus

Expression Design 4
Kersti Laidvee, BCS Koolitus graafikalektor/konsultant/kujundaja
Toetavad õppematerjalid:
• Eestikeelne juhend ja 2 õppevideot: teemal Slice
ja Pen Tool
http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx
– õppevideoid inglise keeles
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=339
http://www.microsoft.com/video/en/us/details/5dc8e043d4f8-4eda-b9df-50e6ec632b06
• Programmi Help
MS Office
WMF
Expression Design 4 uuendused:
• Integreeritus MS Office’i programmidega
Saab lisada oma töösse - Windows Metafile (WMF),
Enhanced Metafile (EMF) vektorgraafikat, mida
Office’i programmid nagu Word, PowerPoint, Visio
pakuvad. Ületoodud objektid/skeemid on MS
Expression Design programmis ka muudetavad. Sisse
saab tuua 3 erineval viisil:
– kopeerides Copy/Paste
– valides File/Import Windows Metafile…
– avades File/Open
Uuendused:
• Täiustatud on värvi pipett omadusi
(Color eyedropper)
– nüüd on võimalik värvi napsata igalt poolt isegi
väljastpoolt programmi.
• Töökeskkonda on võimalik salvestada
Käepäraselt loodud töökeskkonda saab salvestada
läbi menüü valiku Window/Save as New
Worskpace… Töökeskkonda saab taastada
valikuga Window/ Worskpaces/Default.
Veebilehtede loomise etapid
1. lähteülesande loomine sh struktuur
2. disaini loomine ja spetsifitseerimine
3. sisu koostamine
4. kujunduse ja graafika ettevalmistamine
mis on soovitav välja mõelda mitte veebiehituse programmides
(editorides), vaid graafikaprogrammis
5. html lehekülje loomine
6. failide laadimine veebiserverisse
Suurendus/vähendus ja
liikumine
Ctrl+tühik
© BCS Koolitus 2010- Kersti Laidvee
Ctrl+Alt+tühik
tühik
Rastergraafika (bitmap)
Pilt moodustub pixlitest
(punktikestest)
Pildi suuruse muutmisel kahaneb pildi
kvaliteet oluliselt kuna arvuti püüab ise
pixeleid juurde luua või eemaldada.
N: televiisoripilt, arvutiekraanil olev pilt
Pildiformaadid:
Jpeg, Gif, Png, Psd
Info erinevate pilditüüpide kohta: http://www.fileinfo.com/filetypes/image
suurendus
Tasuta allatõmmatavad
pilditöötlusprogrammid


IrfanView (467kb)
GIMP – kuulsaim tasuta pilditöötlusprogramm

Faststone Image Viewer
Põhimõtteliselt on kahte tüüpi valikud: otse veebibrauseris töötavad ja allalaetavad installeeritavad programmid.
Veebibrauseris töötavad on eriti mugavad, sest neid saab kohe kasutama hakata
tasuta veebibrauseris töötavad:

Adobe Photoshop Express – (nõuab
kasutajakonto loomist)

Pixlr – väga hea, kes PhotoShopiga tuttavad

SumoPaint – samuti PhotoShop’ilik

Picnik – hästi lihtne
Tasulised pilditöötlusprogrammid

Maailma tunnustatuim on:
Adobe Photoshop
http://www.adobe.com/products/photoshop/main.html

Photoshop Elements

PaintShop Pro
Tasuta nodi (fotod, fondid, ikoonid ja vektorlogod)




Suur valik tasuta fonte @ DaFont
160 000+ tasuta ikooni @ Iconfinder.com
Ülemaailmne vektorlogopank @
brandsoftheworld.com
Tasuta pildipank @ sxc.hu
Tasuta pildipank

sxc.hu
Tasulised pildipangad


Fotolia.com
iStockphoto
Pildid veebi sobivates mõõtudes alates paarist dollarist tk.
Vektorgraafika (vector)
Objektidele orienteeritud
joonistus.
Pilt moodustub erisuguste joonte
hulgast, kurvidest, millest saab luua
objekte ja neid on võimalik igatüht
eraldi suurema vaevata ümber
kujundada, eemaldada, asukohta
muuta- kaotamata kvaliteeti.
vektorformaadid:
ai, eps, cdr
Color Management
RGB
© BCS Koolitus 2010- Kersti Laidvee
CMYK
Värviruum- RGB
R – red
G – green
B – blue
© BCS Koolitus 2010- Kersti Laidvee
Värviruum - CMYK
C – cyan
M – magenta
Y – yellow
K – key (black)
© BCS Koolitus 2010- Kersti Laidvee
Pildi resolutsioon

KRIITPABER (Coated)

OFFSET PABER (Uncoated)

AJALEHT (Newspaper)
~200 dpi

web
72/96 dpi
300 dpi
~250 dpi
MORE PIXELS = MORE QUALITY
But. . .
MORE PIXELS = BIGGER FILES
Pildi suurendamine/vähendamine
Interpoleeerimine
vähendatud
originaal
suurendatud
Piltide kasutamine

Piltide formaadid:
– JPEG: optimeeritud formaat fotode jaoks
–

GIF: optimeeritud formaat joongraafika ja
animatsioonide jaoks
Piltide linkimine (image map)
Interneti pildid
 suurus
(mida väiksem seda parem)


30/30 (suurus/kiirus)
600 pxl
Soovitus: 100-200kB pilte ühe lehe kohta oleks
mõistliku suuruse ülempiir, v.a juhul, kus on tegemist
spetsiaalselt pildi-orienteeritud lehega, näiteks galerii.
JPEG

JPEG
–
–
–
(Joint Photographic Experts Group (JPEG)
16,777, 256 värvi (24-bit color space)
kadudega
parim täisvärvi piltide puhul
Sobib hästi fotodele
GIF

GIF
–
–
(Graphics Interchange Format (GIF)
max 256 värvi (8-bit color depth)
kadudeta (LZW compresion)
Sobib hästi fotode, ühtlase värviga graafika ja
lihtsate animatsioonide jaoks
Plussid: Toetab animatsiooni ja ka läbipaistvust !!!
PNG

PNG
Sobib hästi mulifunktsionaalse ja läbipaistvusega
graafika kuvamiseks uuemate brauseritega
Puudus: ei ole kõigi tarkavaradega nähtav ja ei
toeta animatsiooni
Pildi lõikamine
Tööriista ekstra ei ole!!!

Object/Image/Greate image Object – lohistada pildi
ala

Taustast objektide eraldamiseks
1.
2.
3.
Luua kujund - N: Pen tööriistaga
Märgistada kujund ja pilt ning valida Object/Clipping
Path/make with top Path (soovitavalt 300 dpi)
File/Export – JPEG, GIF või PNG
Sirg- ja kõverjoonte
joonistamine
Videoõpe
Pen Tool
http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx
Paths ja Anchor points
Pen tööriistaga on võimalik joonistada väga
täpseid ning ilusaid kujundeid
Pilditöötlus

Pildi hele/tumeduse reguleerimine – Effects/Adjust
Colors/Brightness and Contrast
http://www.microsoft.com/video/en/us/details/613d9e52-2076-44ad-9f09-eb30192bb0f4
Veebikujundus -
TEKST
1.
Kirjatüüp
2.
Suurus
Tüpograafia
http://www.typechart.com/
Keskkonnas olevad fontide näidised on koos CSS’iga,
seega rakendamine lihtne.
Artiklid tüpograafia kohta LeMillis, Heiko Unti
diplomimtöö "Digitaalne tüpograafia“
http://www.cirkus.ee/typo/index.htm
Tekstifont

seriifidega e. antiikvakirjad
–

seriifideta e. plokk- kirjad
–

(Times New Roman, Garamond, Bookman)
(Arial, Verdana, Helvetica)
ehiskirjad
Seriif
Web-safe Fonts
• Serif
Bookman
Garamond
Georgia
palatino linotype
Book Antiqua
Times new roman
• San-Serif
Arial
Helvetica
Impact
MS sans serif
Geneva
Teruchet
Verdana
Lucida San Code
Tahoma
Font
36 pt Arial
“turvalised “ ja loetavad fondid:
1.
2.
3.
Verdana
Arial
Helvetica
36 pt Times New Roman
Järgnevad 12 fonti on turvalised, ehk nad on installeeritud nii PC kui ka MAC arvutitele:
arial; arial black; comic sans ms, courier, courier new, georgia, helvetica, impact,
palatino, times new roman, trebuchet ms, verdana.
36 pt French Script MT
Kui tahate olla kindel, et tekst ilmuks ekraanile soovitud viisil, siis
määrake soovitud kirjatüüp ning seejärel ka nimekiri neist, mis on
sellele aktsepteeritavad alternatiivid:
<font face=“Verdana, Aral, Helvetica”>
Kirja suurus

12 pt või 14 pt
8 pt
12 pt
20 pt

10 pt või väiksem - raskesti loetav

16 pt või suurem - pealkirjadel
36 pt
48 pt
60 pt
min suurus 11 pt
Abiks kirjale värvi valimisel

http://www.pagetutor.com/colorpicker/index.html
Kritiseerimiseks mõned näited

http://www.havenworks.com/

http://webpagesthatsuck.smugmug.com/gallery/68
37311_tyvTi#497125770_dDDkt
Veebilehtede põhjad ja kujundusideed

http://www.freewebsitetemplates.com/template2.php

http://www.dreamtemplate.com/index.php?action=view
all
Navigeerimismenüüde näidised

http://www.designload.net/website-interfaces/index.html
Abiks värvide valikul

http://colorschemedesigner.com/
Värvivalik
http://www.microsoft.com/video/en/us/details/5dc8e043-d4f8-4eda-b9df-50e6ec632b06
How To Find The Perfect Colors To Design Beautifully & Communicate Effectively
http://960.gs/
Abivõrgustik
The Ultimate Collection Of Brilliant Web
Design Tutorials

http://www.noupe.com/tutorial/the-ultimatecollection-of-brilliant-web-design-tutorials.html

http://www.grafpedia.com/tutorials/create-grungepersonal-portfolio
Veebisaidi kolm tähtsat küsimust
• Kus ma olen?
• Mis ma siit kasu saan?
• Mis ma teha saan?
5 populaarsemat küsimust:
• Mis suurusega tuleks veebisait luua?
– 800×600? 1024×768?
• Kuidas kujundada?
• Mis on parim navigatsioon?
• Pildi suurused?
• Mis on parim font?
Näited:
© BCS Koolitus 2010- Kersti Laidvee
Näited:
Harjutus: 3-mõõtmelise efekti loomine
Harjutus
Tänan Teid!
[email protected]