Expression Design 4

1. ExpressionDesign 4 Kersti Laidvee, BCS Koolitus graafikalektor/konsultant/kujundaja

2. Soovitan lisaks kuulata! 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=339http://www.microsoft.com/video/en/us/details/5dc8e043-d4f8-4eda-b9df-50e6ec632b06 • Programmi Help

3. MS Office WMF

4. ExpressionDesign 4 uuendused: • Integreeritus MS Office’i programmidega Saab lisada oma töösse - Windows Metafile (WMF), EnhancedMetafile (EMF) vektorgraafikat, mida Office’i programmid nagu Word, PowerPoint, Visio pakuvad. Ületoodud objektid/skeemid on MS ExpressionDesign programmis ka muudetavad. Sisse saab tuua 3 erineval viisil: • kopeerides Copy/Paste • valides File/Import Windows Metafile… • avades File/Open

5. Uuendused: • Täiustatud on värvi pipettomadusi(Coloreyedropper) – 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/SaveasNewWorskpace… Töökeskkonda saab taastada valikuga Window/ Worskpaces/Default.

6. Veebilehtede loomise etapid • lähteülesande loomine sh struktuur • disaini loomine ja spetsifitseerimine • sisu koostamine • kujunduse ja graafika ettevalmistamine mis on soovitav välja mõelda mitte veebiehituse programmides (editorides), vaid graafikaprogrammis • html lehekülje loomine • failide laadimine veebiserverisse

7. Ctrl+tühik Ctrl+Alt+tühik tühik Suurendus/vähendus ja liikumine

8. Rastergraafika(bitmap) Pilt moodustub pixlitest (punktikestest) Pildi suurusemuutmisel 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

9. suurendus

10. Tasuta allatõmmatavad pilditöötlusprogrammid • IrfanView(467kb) • GIMP – kuulsaimtasuta pilditöötlusprogramm • Faststone Image Viewer Põhimõtteliselt on kahte tüüpi valikud: otseveebibrauseris töötavad ja allalaetavad installeeritavadprogrammid. Veebibrauseris töötavad on eriti mugavad, sest neid saab kohe kasutama hakata

11. 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

12. Tasulised pilditöötlusprogrammid • Maailma tunnustatuim on:Adobe Photoshop http://www.adobe.com/products/photoshop/main.html • PhotoshopElements • PaintShopPro

13. 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

14. Tasuta pildipank • sxc.hu

15. Tasulised pildipangad • Fotolia.com • iStockphoto Pildid veebi sobivates mõõtudes alates paarist dollarist tk.

16. 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

17. Color Management CMYK RGB

18. Värviruum- RGB R – red G – green B – blue

19. Värviruum - CMYK C – cyan M – magenta Y – yellow K – key (black)

20. Pildi resolutsioon • KRIITPABER (Coated) 300 dpi • OFFSET PABER (Uncoated) ~250 dpi • AJALEHT (Newspaper) ~200 dpi • web 72/96 dpi

21. MORE PIXELS = MORE QUALITY But. . . MORE PIXELS = BIGGER FILES

22. Pildi suurendamine/vähendamine Interpoleeerimine vähendatud originaal suurendatud

23. Piltide kasutamine • Piltide formaadid: • JPEG: optimeeritud formaat fotode jaoks • GIF: optimeeritud formaat joongraafika ja animatsioonide jaoks • Piltide linkimine (image map)

24. 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.

25. 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

26. 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 !!!

27. 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

28. Pildi lõikamine Tööriista ekstra ei ole!!! • Object/Image/Greate image Object – lohistada pildi ala • Taustast objektide eraldamiseks • Luua kujund - N: Pen tööriistaga • Märgistada kujund ja pilt ning valida Object/ClippingPath/makewithtopPath(soovitavalt 300 dpi) • File/Export – JPEG, GIF või PNG

29. Sirg- ja kõverjoonte joonistamine Videoõpe Pen Tool http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx

30. Paths ja Anchorpoints Pentööriistaga on võimalik joonistada väga täpseid ning ilusaid kujundeid

31. 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

32. Veebikujundus - TEKST Kirjatüüp Suurus

33. Tüpograafia http://www.typechart.com/ Keskkonnasolevadfontide näidised on koosCSS’iga, seegarakendaminelihtne. Artiklid tüpograafia kohta LeMillis, Heiko Unti diplomimtöö"Digitaalne tüpograafia“http://www.cirkus.ee/typo/index.htm

34. Seriif Tekstifont • seriifidega e. antiikvakirjad • (Times New Roman, Garamond, Bookman) • seriifideta e. plokk- kirjad • (Arial, Verdana, Helvetica) • ehiskirjad

35. Web-safeFonts • Serif Bookman Garamond Georgia palatinolinotype BookAntiqua Times newroman • San-Serif Arial Helvetica Impact MS sansserif Geneva Teruchet Verdana LucidaSanCode Tahoma

36. 36 pt Arial 36 pt Times New Roman 36 pt French Script MT Font “turvalised “ ja loetavad fondid: • Verdana • Arial • Helvetica 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. 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”>

37. Kirja suurus 8 pt 12 pt 20 pt 36 pt 48 pt 60 pt • 12 pt või 14 pt • 10 pt või väiksem - raskesti loetav • 16 pt või suurem - pealkirjadel min suurus 11 pt

38. Abiks kirjale värvi valimisel • http://www.pagetutor.com/colorpicker/index.html

39. Kritiseerimiseks mõned näited • http://www.havenworks.com/ • http://webpagesthatsuck.smugmug.com/gallery/6837311_tyvTi#497125770_dDDkt

40. Veebilehtede põhjad ja kujundusideed • http://www.freewebsitetemplates.com/template2.php • http://www.dreamtemplate.com/index.php?action=viewall

41. Navigeerimismenüüde näidised Soovitan ! • http://www.designload.net/website-interfaces/index.html

42. Abiks värvide valikul • http://colorschemedesigner.com/

43. Värvivalikhttp://www.microsoft.com/video/en/us/details/5dc8e043-d4f8-4eda-b9df-50e6ec632b06 How To Find The Perfect Colors To Design Beautifully & Communicate Effectively

44. http://960.gs/ Abivõrgustik

45. The Ultimate Collection Of Brilliant Web Design Tutorials • http://www.noupe.com/tutorial/the-ultimate-collection-of-brilliant-web-design-tutorials.html • http://www.grafpedia.com/tutorials/create-grunge-personal-portfolio

47. Veebisaidi kolm tähtsat küsimust • Kus ma olen? • Mis ma siit kasu saan? • Mis ma teha saan?

48. 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?

49. Näited:

50. Näited: Harjutus: 3-mõõtmelise efekti loomine