Pixlr - vejledning Udarbejdet februar 2014

Transkript

1 Pixlr - vejledning Udarbejdet februar

2 2.1 Billedbehandlingsprogrammet Pixlr.com Til redigering af et billede kan du med fordel benytte webtjenesten Pixlr, som du kan tilgå fra hvilken som helst PC, bærbar eller tynd klient via din browser. Har oplevet få have problemer med tjenesten i Chrome, så vælg evt. Internet Explorer Adgang Det er gratis at benytte tjenesten og den kræver ikke at du er logget på. Du skal blot åbne din browser (internet) og taste følgende streng ind i URL en: pixlr.com/editor Pixlr Express og Pixlr O-matic henvender sig til mobilbrugere (tablets, smartphones mv) [ 2 ] ski ve. dk

3 Editoren Når du har tastet Pixlr.com/editor ind i din internet-browser, kommer du ind i redigerings-interfacet, hvor du bliver mødt af dette startbillede: Vælg: Åben billede fra computeren Find dit billede på harddisken Klik på Computer, og find derfra hen til den mappe og filpacering billedet ligger på. Klik Åbn. Umbraco // Appendix: Fotos og billeder [ 3 ]

4 Skift evt. visningstilstand for nemmere at navigere rundt blandt mange fotos Beskæringsfunktionen Vi bør altid huske på, at brugerne af Skive.dk skal hente indhold ned via en netforbindelse, som kan være mere eller mindre hurtig. For at højne oplevelsen af skive.dk, er det derfor vigtigt at media bliver reduceret og optimeret til brug på internettet - der er ingen grund til at lægge billeder ud, som er meget større end f.eks. folks computerskærme. Så for at reducere størrelsen på filerne, kan man dels beskære overflødige elementer i billedet væk og dels skalere billedet ned til det tænkte formål. Man bør beskære billedet før man skalerer billedet! Optimale breddemål for billeder på skive.dk: Topbanner i headeren: 1920px (højde 480px - men det kan nemmere justeres i Umbraco) Billede indsat i teksteditor: 650 px For at beskære et foto, vælger man Beskæringsfunktion (C), som er valgt som default. Du kan nu ved at klikke med venstre museknap og holde den inde, trække et areal ud på billedet - se illustration på næste side. Det gyldne snit Bemærk at det beskårne område bliver inddelt i 9 felter. Grunden til dette er at man allerede i beskæringen kan tage højde for det gyldne snit, hvor man billedanalytisk som udgangspunkt får den bedste oplevelse af et billede, hvis billedets elementer befinder sig i et af disse skærepunkter - se orange cirkel i motivet på næste side! [ 4 ] ski ve. dk

5 Klik på den sorte pil i værktøjspaletten i venstre side, når du er tilfreds med din beskæring. Vælg Ja for at bekræfte... Optimering af billedet Du kan herefter foretage nogle yderligere optimeringer af dit foto ved at bruge nogle af de mange justeringsmuligheder, filtre, lag og andre muligheder, som programmet tilbyder. Nogle enkelte, der kan give en god effekt på nettet er at tilføje et billede: mere Kontrast (justering af toneområdet) justering Niveauer (korrigere toneområdet og farvebalancen) ændret mætning (justere hvor farverig billedet skal være) Programmet har mange avancerede muligheder som jeg kun kan anbefale at du prøver dig lidt frem i. Du kan altid fortryde nogle utilsigtede ændringer ved at klikke et niveau eller to op i historikfeltet. Umbraco // Appendix: Fotos og billeder [ 5 ]

6 Billedstørrelse Til sidst skal vi have billedets pixelformat til at passe med det formål vi har tiltænkt det på skive.dk Vælg fanen Billede i topmenuen og vælg derefter Billedestørrelse. Denne popup kommer frem: Hvis billedet er tiltænkt en plads som topbanner i headeren, skal bredden optimalt set være 1920px. Bemærk at højden automatisk følger højde-bredde-forholdet, idet du har valgt Tilpas proportioner. Hvis billedet er tiltænkt en plads i teksteditoren, skal bredden optimalt set være 650px. Bemærk at højden automatisk følger højde-bredde-forholdet, idet du har valgt Tilpas proportioner. Optimale breddemål for billeder på skive.dk: Topbanner i headeren: 1920px (højde 480px) Billede indsat i teksteditor: 650 px [ 6 ] ski ve. dk

7 Resultat efter skalering: billedet fylder nu 1920px i bredden Nu er billedet skaleret i bredden så det kan bruges som topbanner i headeren, idet det nu er 1920px bredt. Gem billedet Til sidst skal filen gemmes - og helst i et nyt navn for ikke at overskrive originalbilledet. Klik på fanen Filer og vælg Gem (Ctrl+S) Juster kvaliteten for at få en god balance mellem kvalitet og filstørrelse. Jpeg-formatet kan komprimeres ret kraftigt før der sker synlige kvalitetstab. Dog bør du nok holde kvaliteten over de 50. I Navn kan du f.eks. tilføje et suffix med pixelstørrelsen (her: _1920px). Klik så OK. Umbraco // Appendix: Fotos og billeder [ 7 ]

8 Vælg hvor filen skal gemmes. Pixlr vil som udgangspunkt gemme samme sted som du importerede filen fra, men måske er det en fordel at oprette en undermappe eller placere redigerede billeder et bestemt sted på din harddisk!? Herunder ser du den gemte fil på harddisken, hvorfra den nu kan uploades til mediearkivet i Umbraco. [ 8 ] ski ve. dk

9 Notat: valg af billede til topbanner i headeren - bredformat 1920px Da designet på skive.dk er responsivt (i modsætning til et fikseret pixelmål), vil fotos og grafikker tilpasse sig brugerens skærmforhold. Et topbanner på Skive.dk er som udgangspunkt 1920 x 480px, men dette skalerer sig når skærmen bliver mindre end de 1920px i bredden - som i øvrigt er det der svarer til full-hd. Det korte af det lange er: du kan ikke vide hvordan et topbanner tager sig ud på alle skærmstørrelser og du bør derfor vælge et relativt abstrakt motiv der mere understreger en stemning, en farveholdning eller følelse end f.eks. et personbillede, hvor hovedmotivet risikerer at blive skjult bag topmenu eller vandre helt ud af skærmen på en mindre skærmopløsning. Et billede siger mere end 100 ord For at illustrere hvordan billeder tager sig ud på forskellige platforme, har jeg oprettet et par eksempler nedenfor, og giver et bud på gode billeder til topbanner: De gode eksempler Her virker billedet fint både i bred og smal-format Screendumb af 1920px skærm Screendumb fra mobilskærm, Iphone 5 Ligesådan her. Billedet kan illustrere sommer, høst, varme, fødevarer, energi mm. Screendumb af 1920px skærm Screendumb fra mobilskærm, Iphone 5 Umbraco // Appendix: Fotos og billeder [ 9 ]

10 De gode eksempler - fortsat Et traditionelt billede af den Blå Diamant ville ikke virke i en responsiv bredformat som topbanner på skive.dk. Men her er der fokuseret på en genkendelig detalje af Den Blå Diamant, nemlig det blå, som sammen med den grønne fører til grønne tanker om miljømæssig hensyn. Da det er farven og formen mere end arkitekturen, fungerer det også fint på mobilenhedens begrænsede skærmstørrelse Screendumb af 1920px skærm Screendumb fra mobilskærm, Iphone 5 Den lange lukkertid giver bevægelse i billedet. God til at illustrere: bevægelse, sundhed, motion, glæde, frihed, velvære mm, og kan pga den relative abstrakthed bruges til flere emner... Screendumb af 1920px skærm Screendumb fra mobilskærm, Iphone 5 [ 1 0 ] ski ve. dk

11 Et uheldigt eksempel Et billede fra en reception hvor en person bliver fejret. Oplagt til topbanner? Som man kan se, forsvinder hovedpersonen bag de faste sorte halvgennemsigtige bokse i topbanneret - og i den smalle udgave giver det endnu mindre mening... Et sådant billede kan istedet med fordel indsættes via Media Picker i teksteditoren som almindeligt foto i normalformat 3/2 Screendumb af 1920px skærm Screendumb fra mobilskærm, Iphone 5 Umbraco // Appendix: Fotos og billeder [ 1 1 ]

12 [ 12 ] skive.dk