Medieteknik Del1 Färger, teckensnitt och bildformat

Slides:



Advertisements
Liknande presentationer
Atomer, molekyler och kemiska reaktioner
Advertisements

Handledning för innehavare och kontaktpersoner i JPBS.
Talföljder formler och summor
Anpassning i Windows och Word utan hjälpmedel med tangentbordet
Namn på tillfället (kan skrivas på två rader) Namn på den som presenterar Datum för tillfället.
INTRODUKTION TILL LOGOTYPEN Greppa Näringen logotypen är den officiella avsändaren och vårt viktigaste verktyg. Logotypen har en klar och tydlig form.
Typografi Krav eller hjälp?.
Grunder i PowerPoint 2000 Skapa en ny presentation Rita egna objekt
HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska.
PowerPoint 2007 Lathund.
II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
Flexicon – Din systempartner
Producerad av Publiciteta&Co Sundsbussarna Förslag på ny design av hemsida Publiciteta&Co 2006.
FTP, HTTP, HTML, XML och XHTML
1 MSPEL Föreläsning 1 DSV Peter Mozelius XML, XHTML, CSS och Java applets.
Om text, bild, ljud och video
Frågor Allmän IT-kunskap avsnitt 1 kapitel 1 Repetition 4
”Internet anpassa” bilder
Grafisk design av tryckt reklam
Enkel dator teknik Tips och tricks.
Sidbeskrivningsprogram
Arbeta med bilder Bengt Kjöllerström Att bearbeta bilder och lägga in dem i Disgen Bengt Kjöllerström.
Skyltning var och hur? Skyltningen utgår från varje lokals speciella förutsättningar och de behov besökarna kan tänkas ha. Skyltar behövs i regel på följande.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
Färg.
FÄRGLÄRA Kap 9.4. FÄRGLÄRA Kap 9.4 Vitt ljus består av många färger Med t.ex. ett PRISMA kan man spjälka upp det vita ljuset i dessa färger. Den färgskala.
Grundläggande kunskaper om färg och färgblandning
©storm.
2. Utveckla en presentation
Datakomprimering a) Komprimering för att spara lagringsutrymme.
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
Digitala bilder. Elektroniska bilder VH Digitala bilder Datorskärmen visar bild m.h.a. pixlar.
Digitalisering av text och bild - teori och praktik
PIRATPARTIET Rubriksnitt: Impact, vanlig text Arial Här kan man lägga en lite ingressbetonad text på ett par tre meningar (men funkar även utan). Vill.
Att göra en modern släktbok för CD och webb med Disgen
Digitalisering av kulturarvet
1 MSPEL Föreläsning 3 DSV Peter Mozelius Färgmodeller och digitala bildformat.
Daniel Cronholm biblios.se/data © Powerpoint - Övning 3 Formatera text och ändra formgivningsmallar.
1 ITK:P2 F2 Stilsättning av XHTML DSV Peter Mozelius.
IT för personligt arbete F9 Datalogi, en sammanfattning DSV Peter Mozelius.
Tillgänglig information och kommunikation
1. Var förberedd och ha ett tydligt budskap!
Knappar i artikelredaktionen som formaterar texten:
Prepress/premedia På prepress skapas ett tryckfärdigt original –Levererar: film, plåt eller digital fil Anpassning för tryckmetod och efterbearbetning.
XHTML & CSS Introduktion Erik Nahkala
Vittert vetande om webbdesign
INT 3 F4 Medieteknik Del2 Komprimering, ljud och rörliga bilder DSV Peter Mozelius.
Anslutningar till/från systemenheten?
Välkommen till årets andra nätverksträff Sundsvall 30 maj, 2006 Funda Denizhan och Magnus Burell Verva, Nätverket 24-timmarswebben.
KÄLLKRITIK & INFORMATIONSSÖKNING
© Björn Lindell, Datapedagogiskt Forum, SLU Hur kommer jag i gång med att göra web-sidor? Länkar “on line” på URL:
1 Synchronized Multimedia Integration Language DSV Peter Mozelius Resurssnålt och plattformsoberoende.
Multimedia och Pedagogik
2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
1 Programhantering – Pass 9 Presentation Fortsättningskurs MS PowerPoint 2003 Del 1/2 Formatera Grafik och diagram.
Optik.
Enkel dator teknik Tips och tricks. Välja storlek och radavstånd Här väljer du storlek på texten vi vill att ni använder 14 p till rubriker och 12 p till.
På vissa datorer behöver du trycka på F5 för att starta bildspelet.
Visuell perception. Ljus är vågrörelser Vitt ljus innehåller alla färger Olika färger har olika våglängd Rött ljus har tätast våglängd.
R EDOVISNINGS AFFISCH V ETENSKAPLIG POSTER. A FFISCHEN Affischen är en sammanfattning av en kurs eller projekt för att väcka intresse och ge en snabb.
Anslutningar till/från systemenheten? Vad är inkopplat till datorn? Vilka övriga kontakter finns det?
GRAFISK FORM Ann Lundqvist Typografi. GRAFISK FORM Ann Lundqvist Typografi – Läran om bokstavsformerna och dess användning Teckensnitt – typsnitt - font.
Adobe Illustrator.
MÅNGA olika TYPSNITT kan ge ett
FÄRGLÄRA. Ljusets färgblandning Färgcirkel med tre grundfärger GRUNDFÄRGER (RENA FÄRGER, FÄRGTRIANGEL)  gult  röt  blått.
Olika funktioner och tips till PowerPoint
Att redigera en bild för publicering på webben
Medicinska webbapplikationer
Presentationens avskrift:

Medieteknik Del1 Färger, teckensnitt och bildformat INT 3 F3 Medieteknik Del1 Färger, teckensnitt och bildformat DSV Peter Mozelius

En texts läsbarhet Teckensnitt Teckengrad Radlängd Radavstånd Papper/Skärm Bakgrundsfärg

Teckensnitt Teckensnitt kan delas in i två huvudgrupper: Antikva, med anor från renässansen MED serifer som i denna föreläsnings rubriker Några av de antikva-teckensnitt som framtogs under 1400- och 1500-talet anses allmänt ge mycket god läsbarhet när det gäller löpande text (brödtext) på papper.

En antikva från 1500-talet Garamond skuren av Claude Garamond

Teckensnitt Sanserif, utvecklades under 1800-talet utan serifer som i texten på denna rad Andra benämningar för sanserif: Grotesk, linjär, gothic, egyptian … Exempel på sanserifer: Arial, Helvetica, Franklin Gothic och Verdana

Sanserif Grekisk ursanserif från 500 f Kr. Ett bustrofedon med växlande skrivriktning för varannan rad.

Verdana En modern sanserif Designad för datorskärm Skuren av Matthew Carter Beställd av Microsoft Hela denna bild är Verdana En intervju med Carter finns på: http://www.webreview.com/1997/11_07/webauthors/11_07_97_10.shtml

Teckengrad/radlängd Radlängd = antal tecken per rad Teckengrad = bokstävernas storlek För god läsbarhet i löpande text: 10 –12 punkter Radlängd = antal tecken per rad En ideal rad i en brödtext innehåller 55 – 65 tecken.

Radavstånd Avståndet mellan rader kallas även kägel. Kägeln ska vara minst lika stor som textens teckengrad och gärna lite större. Olika radavstånd för olika teckensnitt. Ibland anges teckensnitt – kägel enligt 10/12 med betydelsen: 10 punkters teckengrad / 12 punkters radavstånd

Papper / skärm En grundregel för brödtext kan vara: Antikva för papperspublikationer Sanserif för det som ska läsas på en skärm Olika @media i Cascading Style Sheets Paus 15 min

Ljus och våglängder Det synliga spektrumet ca 400-800 nm Ultraviolett - Synligt ljus - Infrarött Violett 390 - 430 nm Blått 430 - 500 nm Grönt 500 - 580 nm Gult 580 - 600 nm Rött 600 - 750 nm

Färgcirkeln Red Green Blue Yellow Magenta Cyan Komplementfärger är två färger mitt emot varandra i en färgcirkel och om de adderas ger de upphov till vitt ljus.

Färgmodeller RGB-modellen, ett sätt att härma ögat Färgkänsliga tappar i näthinnan Stavarna registrerar ljusstyrkan RGB för dataskärmar, scanners mm CMYK för tryckprocesser Additiv och Subtraktiv färgblandning HSB för digital bildbehandling mm

FÄRGMODELLER - RGB RGB - modell för ljus Standard för skärmar Standard för scanners Standard i HTML Standard i Javascript En färgmodell i Java En färgmodell i PhotoShop

Färgmodeller - CMYK K = Key color

Färg – designregler Färguppfattningen är individuell MEN Undvik komplementfärger på samma sida om det inte finns en klar anledning. Genomgående i Microsoftprodukter Undvik även att blanda alltför många färger på samma sida om det finns viktig information att läsa.

Färgkombinationer Hur påverkas färger av omgivande färger ? Finns det färger på denna sida som INTE harmonierar ?

Bilders färgdjup Varje pixel i en punktuppbyggd bild innehåller information om sin färg Hur många bitar som går åt till detta kallas för bildens färgdjup 1 bit, 0 eller 1för en s/v bild (streckteckning) 4 bitars = 2*2*2*2 = 16 färger 8 bitar ger 256 färger 16 bitar ger High Color 24|32 bitar ger True Color

Färgkalibrering Bildskärm - Skrivare RGB - CMYK Bildskärmen kan återge fler färger än skrivaren Olika färggamuter Perceptuell matchning Kolometrisk matchning

Webbpalett 216 Plattformsoberoende med 216 säkra färger som återges likadant oavsett om det är på en PC, en Mac eller en UNIX-dator Mindre färger, snabbare att ladda sidan 24-bitars färgdjup ger distorsion på datorer med dåliga grafikkort PAUS 15 min ??

Bilder och bildformat Vektorgrafik eller punktgrafik Vektorgrafik: grafiken beskrivs med formler och noder (Bézierkurvor) Framställs i t ex Adobe Illustrator Skalbart och utrymmessnålt Fungerar ej för fotografier SVG Scalable Vector Graphics

Bilder och bildformat Punktgrafik innebär att bilderna är uppbyggda av pixlar (bitmapping) Filstorlek = antalet pixlar x färgdjupet Utskriftsstorlek = pixlar / upplösningen Resampling: Upsampling-Downsampling Uppsampling = interpolering Jämna multiplar vid inscanning-uppsampling

Bilder och bildformat Bitmappade bildformat som t ex: bildfil.bmp bildfil.tiff bildfil.psd Hög kvalitet och metainformation ger stora filer som tar tid att ladda via nätet

Digitala bilder Då datorskärmarnas upplösning fortfarande är så låg som 96 dpi så kan vi på datorn ändå inte tillgodagöra oss den höga kvaliteten. Det är också nödvändigt att minska bildstorleken vid internetpublicering. Stora filer ger lång nedladdningstid. Lösningen är komprimeringsalgoritmer. Ett exempel är GIF-bildens LZW-komprimering.

Bildformat för Internet GIF, en gammal trotjänare GIF87a och den uppdaterade GIF89a 8 bitars färgdjup - 256 färger Transparens för 1 färg Interlace (sammanflätning) Animering genom en serie av GIF-bilder Passar bra för diagram, ikoner och teckningar

Bildformat för Internet JPEG-formatet Framtaget av Joint Photographic Experts Group 24-bitars färgdjup för fotorealistiska bilder Förstörande irreversibel kompression Passar för fotografier, målningar och liknande Progressiva JPEG-bilder i stil med GIF-interlace Stödjs precis som GIF av de flesta webb-läsare

Bildformat för Internet PNG-bilder Portable Network Graphics PNG = GIF + JPEG + lite till Icke-förstörande kompression utan ägare med bättre packratio än GIF/LZW 16-bitars alfa-kanal för transparens Framtidens bildformat?

Framtidens format Det har i flera år talats om att PNG ska ta över Det har gått lite trögt Nu finns också JPEG2000 En vidareutveckling av JPEG Förbättrad komprimering: högre packratio – mindre filer högre kvalitet vid kraftig komprimering

Bildformat i Authorware Stödjer internetformaten jpg gif png Men även ”Windowsformatet” .bmp Och Photoshops .psd MEN då måste först eventuella lager ha plattats ihop till ett enda Animerade gif-bilder går också bra

Aliasing I bilder < 500KB Ögat kan se pixeluppbyggnaden Framför allt problem med nästan horisontella eller nästan vertikala linjer Syns extra tydligt vid skarpa linjer och detaljer med hög kontrast mot bakgrunden Som motmedel finns tekniken: anti-aliasing

För dig som vill läsa mera Delar av materialet till denna föreläsning är hämtat från följande litteratur: Christer Hellmark, Typografisk handbok Astrid Haugland, Digital bildbehandling Jennifer Niederst, Web design in a nutshell Chapman & Chapman, Digital multimedia Lon Barfield, Design for new media Finns på välsorterade bibliotek.

Länkar till övningar Tack för idag! Hemsida med kursmaterial: http://dsv.su.se/~mozelius/INT3/ Photoshopövningar: http://www.dsv.su.se/~mozelius/photoshop/ Tack för idag!