MSPEL Frelsning 3

DSV Peter MozeliusFrgmodeller och digitala bildformat

Ljus och vglngderDet synliga spektrumet ca 400-800 nm

Ultraviolett - Synligt ljus - Infrartt Violett 390 - 430 nm Bltt 430 - 500 nmGrnt 500 - 580 nm Gult 580 - 600 nmRtt 600 - 750 nm

Frgcirkeln Komplementfrger r tv frger mitt emot varandra i en frgcirkel och om de adderas ger de upphov till vitt ljusRedGreenBlueYellowMagenta Cyan

FrgmodellerRGB-modellen, ett stt att hrma gatFrgknsliga tappar i nthinnan Stavarna registrerar ljusstyrkanRGB fr dataskrmar, scanners mmCMYK fr tryckprocesserAdditiv och Subtraktiv frgblandningHSB fr digital bildbehandling mm

Frgmodeller - RGBRGB - modell fr ljusStandard fr skrmarStandard fr scannersStandard i HTMLStandard i JavascriptEn frgmodell i Java En frgmodell i PhotoShop

Frgmodeller - CMYKK = Key color

Frg designreglerFrguppfattningen r individuell MENUndvik komplementfrger p samma sida om det inte finns en klar anledningGenomgende i Microsoftprodukter

Undvik ven att blanda alltfr mnga frger p samma sida om det finns viktig information att lsa

FrgkombinationerHur pverkas frger av omgivande frger ?

Finns det frger p denna sida som INTEharmonierar ?

Bilders frgdjupVarje pixel i en punktuppbyggd bild innehller information om sin frgHur mnga bitar som gr t till detta kallas fr bildens frgdjup1 bit, 0 eller 1fr en s/v bild (streckteckning) 4 bitars = 2*2*2*2 = 16 frger8 bitar ger 256 frger16 bitar ger High Color24|32 bitar ger True Color

FrgkalibreringBildskrm - SkrivareRGB - CMYKBildskrmen kan terge fler frger n skrivaren Olika frggamuterPerceptuell matchningKolometrisk matchning

Webbpalett 216Plattformsoberoende med 216 skra frger som terges likadant oavsett om det r p en PC, en Mac eller en UNIX-dator

Mindre frger, snabbare att ladda sidan

24-bitars frgdjup ger distorsion p datorer med dliga (frldrade) grafikkort PAUS 15 min

Bilder och bildformatVektorgrafik eller punktgrafikVektorgrafik: grafiken beskrivs med formler och noder (Bzierkurvor)Framstlls i t ex Adobe IllustratorSkalbart och utrymmessnltFungerar ej fr fotografierSVG eller SWF? http://www.sitepoint.com/article/v-svg-which-should-choose

Bilder och bildformatPunktgrafik innebr att bilderna r uppbyggda av pixlar (bitmapping)Filstorlek = antalet pixlar x frgdjupetUtskriftsstorlek = pixlar / upplsningenResampling: Upsampling-DownsamplingUppsampling = interpoleringJmna multiplar vid inscanning-uppsampling

Bilder och bildformatBitmappade bildformat som t ex:bildfil.bmpbildfil.tiffbildfil.psd

Hg kvalitet och metainformation ger stora filer som tar tid att ladda via ntet

Digitala bilderD datorskrmarnas upplsning fortfarande r s lg som 96 dpi s kan vi p datorn nd inte tillgodagra oss den hga kvaliteten.Det r ocks ndvndigt att minska bildstorleken vid internetpublicering.Stora filer ger lng nedladdningstid.

Lsningen r komprimeringsalgoritmer.Ett exempel r GIF-bildens LZW-komprimering.

Bildformat fr InternetGIF, en gammal trotjnareGIF87a och den uppdaterade GIF89a8 bitars frgdjup - 256 frgerTransparens fr 1 frg

Interlace (sammanfltning)Animering genom en serie av GIF-bilderPassar bra fr diagram, ikoner och teckningar

Bildformat fr InternetJPEG-formatetFramtaget av Joint Photographic Experts Group24-bitars frgdjup fr fotorealistiska bilderFrstrande irreversibel kompressionPassar fr fotografier, mlningar och liknandeProgressiva JPEG-bilder i stil med GIF-interlaceStdjs precis som GIF av nstan alla webb-lsare

Bildformat fr InternetPNG-bilderPortable Network GraphicsPNG = GIF + JPEG + lite tillIcke-frstrande kompression utan gare med bttre packratio n GIF/LZW16-bitars alfa-kanal fr transparensFramtidens bildformat?

Framtidens formatDet har i flera r talats om att PNG ska ta verDet har gtt lite trgt

Nu finns ocks JPEG2000En vidareutveckling av JPEGFrbttrad komprimering:hgre packratio mindre filerhgre kvalitet vid kraftig komprimering

RLE - en gammal algoritmRun Lenght Encoding

I en bitmappad bild r frgen p varje enskild pixel representerad med ett visst bitmnsterOm detta bitmnster upprepar sig t ex 224 ggr kan RLE-kodningen bli: 11001000 (x) 11100000Detta minskar i princip storleken frn 224 bytes till 2 bytes

Ett (fr mig) nytt problem Vilket r nsta tal i fljande talserie: 1, 11, 21, 1211, 111221, 312211, 13112221 ...

PAUS 15 min

Var kan man hitta bilder?http://www.flickr.com/2000 nya bilder/min

2 miljoner geotaggadefotografier

Flickr - geotagginghttp://www.flickr.com/map/+ 20 000 bilder frn Sri Lanka22 stycken underUrban Photos

Aliasing

AliasingI bilder < 500KBgat kan se pixeluppbyggnadenFramfr allt problem med nstan horisontella eller nstan vertikala linjerSyns tydligt vid skarpa linjer och detaljer med hg kontrast mot bakgrundenSom motmedel finns : anti-aliasing

Bilder i Javajavax.swing.ImageIcon Ls mera p: http://java.sun.com/docs/books/tutorial/uiswing/misc/icon.html

java.awt.Image Ls mera p:http://www.particle.kth.se/~lindsey/JavaCourse/Book/Part1/Java/Chapter06/images.html

Java 2D APIEtt senare tillkommet klassbibliotek fr mer avancerad grafikFlera former som kan ritas utDe kan ritas ut p olika sttDet som ritas ut kan transformerasDet gr att stta rendering hints

Att sl p/av rendering hints pverkar motsttningen mellan kvalitet och snabbhet

Java 2D APIFr att kunna f tillgng till geometriska figurer och rittekniker i Java 2D API s krvs fljande typomvandling:

public void paintComponent(Graphics g){ super.paintComponent(g); Graphics2D g2D = (Graphics2D)g; g2D

Java 2D APIFr att kunna styra utritningen nr det gller motsttningen mellan kvalitet och snabbhet s finns en klass som heter RenderingHints

RenderingHints hints = new RenderingHints(null); hints.put(key, value); g2D.setRenderingHints(hints);

Bildhantering p ntetAdobe PhotoShop Express2 GB gratis lagringsutrymme

https://www.photoshop.com/express/

www.photoshopexpresstechniques.com/

Bildhantering i JavaJava Image EditorAllt r skrivet i JavaBara att ladda hem frn http://www.jhlabs.com/ie/index.html

Att skriva egna bildfilter i JavaUppgift3eUppgift3f

Bildhantering i Javaimport java.applet.*;import java.awt.*;import javax.swing.*;

public class Frelsning3 extends JApplet { private Image bild; private BildPanel bildPanel; public void init(){ setSize(300,300); bild = getImage(getDocumentBase(), minbild.typ"));

Bildhantering i Java MediaTracker mt = new MediaTracker(this); mt.addImage(bild,1); try{ mt.waitForAll(); }catch(Exception e){ System.out.println("BILDPROBLEM:" + e); System.exit(1); } bildPanel = new BildPanel(bild); this.getContentPane().add(bildPanel); }//init

}//Frelsning3

Bildhantering i Javapublic class BildPanel extends JPanel{ private Image bild;

public BildPanel(Image bild){ super(); this.bild = bild; this.setBackground(new Color(0,0,0)); }

public void paintComponent(Graphics g){ super.paintComponent(g); g.drawImage(bild,10,30,this); }}//BildPanel

Allt fr idagMissa inte morgondagens lektion!

Ska vi bjuda hit ngon frn Adobe?