To portrætter


Formålet med denne øvelse er at gøre dig fortrolig med Photoshop – og at fremstille to portrætter:

  • Et miniportræt til Fronter (Erhvervsakademiets CMS)
  • Et selvportræt af dig i rollen som multimediedesigner.

Miniportræt til Fronter
Dette billede skal have målene 73×110 pixels. Hverken mere eller mindre. Billedet lægges ud på Fronter ved at klikke på Dagens > DitNavn > Ændre Billede. Når billedet er færdigt skal det omgående uploades.

Tip: I små billeder skal du skære ind til det væsentlige.Vi skal ikke bruge en total af dig og dyrene i fx Ree Dyrepark.

Brug beskæringsværktøjet (Crop) på ansigtet. Billedets størrelse kan herefter ændres til noget, der er en anelse større end 73 i bredden eller 110 i højden. Herefter skal lærredstørrelsen (canvas) ændres til præcis 73×110; men billedets proportioner må ikke forvrænges. Du skal fravælge lænken mellem proportionerne. Ryk til sidst rundt med billedet, så ansigtet står centralt.

Et selvportræt
Med udgangspunkt i de billeder, som du har taget skal du vælge et billede og fremstille et selvportræt med en bevidst valgt komposition. Billedet skal udtrykke dig som multimediedesigner – og du må frit bruge Photoshop til fremstilling af billedet.

Komposition og beskæring

Crop Tool (c)
Med Crop Tool er et område markeret.

En geometrisk komposition
Et professionelt billede er en geometrisk komposition, hvor intet er overladt til tilfældighederne. Selv om billedet måske er godt, så skal det bruges i en sammenhæng. Billeder skal altid efterbehandles.

Komposition hænger sammen med beskæring. En god beskæring fremhæver det som er væsentligt – og fjerner alt overflødigt. Beskæringen giver billedet den form, som det skal have i et lay-out. Beskæring og billedets funktion hænger altså sammen.

Crop Tool (c)
I gamle dage ville man nok beskære billeder med en saks eller en hobbykniv; men det var dengang. I Photoshop beskærer man ved hjælp af Crop Tool, der enten vælges i værktøjskassen – eller ved at taste c. Værktøjet bruges sådan:

  1. Klik og træk musen ned over det område, som skal bruges.
  2. Området kan justeres på firkanterne.
  3. Når du er tilfreds med beskæringen tast ENTER.

Herefter vil Photoshop ændre størrelsen af billedet.

Billedet af de tre figurer på en bro er et scannet farvefoto fra 1960-erne, hvor farverne er falmede. Det kan være charmerende som effekt; men man kan også forsøge at rette farverne.

Beskæring
Skiltet er skåret væk og der er større fokus på broens diagonaler, der skaber dybde i billedet.

Reglen om 1/3
En gammel kunstnerisk tommelfingerregel siger, at man kan opnå en harmonisk komposition ved at placere vigtige elementer 1/3. De tynde streger i billedet markerer tredjedele af billedfladen.

Crop Tool viser altså, hvor 1/3 af billedet er. Crop Tool kan indstilles på flere måder. Øverst på skærmen kan redskabet indstilles til Rule of Thirds, None eller Grid. Sandsynligvis er reglen om tredjedele en grov forenkling af det gyldne snit, der er en mere kompleks geometrisk konstruktion.

Reglen om 1/3 anvendes her.

Resultatet af beskæringen af Mads Clausens kontor på Danfoss ved Nordborg.

Kompositionen er nu klar. 1/3-linjer går gennem stolens ryg, den øverste linje på tegnebordet, hjørnet mellem træ- og bindingsværksmuren. Uret kunne med fordel flyttes lidt til venstre og farverne kunne trænge til et serviceeftersyn – men brugen af 1/3-reglen kan give en bedre komposition, hvis vi sammenligner billedet med det rå billede fra kameraet.

Ovale billeder

Elliptical Marquee tool (M)

Firkantede billeder er ikke altid interessante. I visse tilfælde kan en oval beskæring være at foretrække. Sådan kan du lave et ovalt billede:

  1. Klik på Elliptical Marquee Tool (eller tast M)
  2. Marker et område ved at klikke og trække med musen som før.
  3. Nu skal det markerede område kopieres, tast CTRL + C.
  4. Klik på File > New.
  5. I fanebladet Background Contents kan du vælge om baggrunden skal være transparent eller om der skal være en dækkende farve. Normalt vælger Photoshop en hvid baggrund.
  6. Nu kan det markerede område indsættes, tast CTRL + V.
  7. Gem filen. Hvis du har en transparent baggrund skal filformatet være .png eller .gif, da .jpg ikke kan håndtere alpha-kanaler.

Skovparti fra Als.

Snydetransparens
Om billedet skal være transparent eller ej er et spørgsmål om den baggrund, som skal vises. I visse tilfælde dannes rædselsfulde hvide eller sorte skygger. I sådanne tilfælde kan man lave “snydetransparens”. Derfor har jeg i billedet herover valgt at bruge snydetransparens.

Her skal indstillingerne i Background Contents ændres, så den passer med websidens baggrund. Vælg en baggrundsfarve i værktøjskassen. Klik på File > New. I fanebladet Background Contents vælges “Background Color”. Baggrunden får nu den farve, som du valgte i værktøjskassen.

Statisk kontra dynamisk komposition
En statisk komposition betoner de lodrette og vandrette linjer. Statiske billeder kan udstråle ro og harmoni – især hvis de er symmetriske; men en statisk komposition kan blive så rolig, at den er kedelig. Nogle stilarter, som fx nyklassik, foretrækker et roligt og statisk udtryk.

Statisk komposition – Stanford University, 2010.

Den dynamiske komposition bruger diagonalerne. Et dynamisk billede virker som om det er i bevægelse. Stærkt ekspressive stilarter, som f.eks. Cobra-malerne, bruger gerne en dynamisk komposition.

Palmen ved universitetet er ikke nødvendigvis det mest dynamiske motiv, man kan forestille sig. Men, hvis kameraet vendes ca. 45 grader kan man få en dynamisk effekt. Prøv i øvrigt det samme med et portræt.

Palmen fotograferet med kamera på skrå giver en dynamisk effekt.

Grafiske virkemidler på nettet

På nettet kan man – som så mange andre steder – sondre mellem grafiske elementer og illustrationer til brug for layout. Grafiske elementer kan være små billeder, der bruges som baggrunde, streger, knapper eller andre virkemidler. Illustrationer kan være fotos, tegninger, grafer og lignende.

Som regel er et lay-out på nettet en komposition, hvor streger, kasser, farvekontraster, grafiske elementer mv. skal styre blikket således at indholdet præsenteres på en overskuelig måde. Der skal være en tydelig angivelse af, hvad der er menuer og knapper – således at navigationen kan foregå relativt intuitivt.

Når du skal lave et nyt weblayout er det lettest at begynde med en håndtegnet skitse, der i store træk viser, hvordan din webside skal se ud. Skitsen kan være en wireframe – eller en mockup. Nogle multimediedesignere tegner simpelt hen deres layout i et grafisk program, som GIMP, Inkscape, Photoshop eller Illustrator – alt efter smag og behag.

Baggrunde
En vellykket webside må ikke være for “tung”. Ikke alle har en god webforbindelse, og derfor er det designerens opgave at tænke sig grundigt om, når skitserne skal omsættes til billeder. Hvert billede tæller, og hvert eneste billede skal optimeres til det medie, som du skal bruge.

Det gælder om at holde grafikken på et minimum. Ikke sådan at forstå, at du ikke skal bruge grafik – eller forfalde til klicheen om minimalisme. Tvært imod! Du skal bare tænke dig om.

Opløsning
Der er ingen grund til at vise billeder i en højere opløsning end skærmen kan magte. Lige nu er en passende billedopløsning til skærmen 72dpi. Billeder med en højere opløsning bliver ikke bedre på skærmen, de fylder bare mere.Hvis du har taget fotos med et digitalkamera, så er det en god ide at tjekke opløsningen i Photoshop eller GIMP. Sæt den til 72dpi.

Hvis denne indstilling gør billedet lidt sløret, så prøv med et “sharpen” filter. Hvis dine billeder skal bruges i en tryksag, så skal opløsningen naturligvis være meget bedre. Som regel er 300dpi passende til tryksager.

Eftersom billedkvalitet og medie hænger sammen, så er det en god idé at arbejde med nogle “råfiler”. Råfilerne kan da bearbejdes og gemmes under andre navne – for man kan jo aldrig vide om man får brug for et billede i høj kvalitet på et tidspunkt!

Xhtml og CSS
Store ensartede flader farvesættes lettest ved hjælp af CSS. Browserens baggrundsfarve kan sættes i “body”:

body {
	background-image:url('../images/bg_footer2.jpg');
        background-color:#ba5b22; //#ffb93e;
	font-family: Sans-serif;
	background-repeat:repeat-x;
	background-position:top;
}

I denne body er en lang række grafiske valg defineret. Første linje definerer et baggrundsbillede. Længere nede kan man se, at baggrunden gentages på x-aksen, eller vandret om du vil. Background-position: top betyder, at baggrundsgrafikken er placeret øverst i billedet. Det kan være praktisk, hvis man ønsker en effekt med en farveovergang.

Baggrundsfil

Billedet herover ser ikke ud af meget; men hvis det anvendes som en baggrund, der gentages på x-aksen, så kan resultatet blive noget i stil med dette:

Websiden
Baggrundsgrafik gentages på x-aksen.

Den hvide tekst og logoet er et gennemsigtigt billede, der er lagt ind i en selvstændig div-fil. Man kan altså anvende en baggrund og kigge ned gennem flere lag af billeder med transparens.

Hvis koden er skrevet fornuftigt, så behøver man ikke at lave kæmpestore grafiske filer som baggrund. Som multimediedesigner skal du kunne vurdere, hvilke elementer, der vinder ved gentagelse.

På nettet er det lettest at læse en sans-serif skrift. Derfor er font-family “sans-serif”.

En grafisk baggrund sættes som regel ind i div-tags i din html via CSS; men man kan også definere en grafisk baggrund til body-taggen. Dygtige kan sammensætte grafiske flader ved hjælp af små grafiske elementer, der nærmest ligner brikkerne til et puslespil; men når elementerne samles via Xhtml og CSS – så lever hele den grafiske flade.

Ved hjælp af CSS kan du også sætte baggrund på en div-tag. I dette tilfælde er #Info et selvstændigt afsnit i koden, og .dekoration er en klasse (class). Xhtml koden kan se sådan ud:

#info {
	font-family:Sans-serif;
	font-size:8pt;
	height:25px;
	width:960px;
	}
.dekoration {
       border:1px solid #000;
       height:125px;
       background:#db913c;
}

Og Xhtml koden ser måske sådan ud:

<div id="info" class="dekoration">

Forskellen på id og class er at class kan bruges på mange forskellige elementer; mens id henviser til en navngivet tag.

Koden skal bare virke
Som multimediedesigner skal du forene en lang række teknikker. På nettet kan du ikke helt vide om din modtager har en god netforbindelse eller ej. Derfor skal grafikken optimeres. En fornuftig grafik kræver planlægning – og indsigt i mere end Photoshop og GIMP. Hvis en farveflade kan sættes med en hexkode, så er der ingen grund til at lave en stor baggrundsfil.

Paletten
Når de grafiske flader skal farvesættes, så kan det være en fordel at anvende en palette. Hvis alle farver anvendes ukritisk, så vil den grafiske flade fremstå rodet og kikset. Derfor prøver designere at bruge farvepaletter.

Det er ikke en dårlig idé at skele til klassikere, som:

  • Ittens Farvelære
  • Goethes Farvelære
  • Feng Shui

Eller andre, der har tænkt over farvernes betydning. Der findes en række programmer, der kan bruges til udvikling af paletten. Når jeg arbejder med layout på linux, så bruger jeg som regel Agave. Programmet findes i Ubuntus repositories, og installeres enten via Synaptic eller i en terminal: # sudo apt-get install agave -y

Der findes lignende programmer til Mac og Windows.

Agave
Agave – kan lave paletter. Her vises en triade med hexkoder – hvilket er praktisk når der skal designes.

På nettet findes også en række nyttige sites til farvesætning. Kuler anbefales varmt.

Metode
Nu har jeg vist lidt om de elementer, der skal til for at skabe en god webside; men hvordan angribes opgaven så. Til mindre opgaver vil jeg anbefale denne metode:

  1. Lav en række grove skitser.
  2. Tegn designet i Photoshop eller GIMP eller et andet program.
  3. Vælg en farvepalette, der passer til opgaven. (Tandpastafarver til tandlæger og bankfarver til banker, etc.)
  4. Print designet ud – og beslut, hvad der skal laves via grafik, og hvad man kan lave ved hjælp af html, css og farvekoder.

Foto og i gang med billedbehandling


Denne artikel er ment som den første introduktion til pixelbaseret billedbehandling på multimediedesigneruddannelsen

Det er en almindelig misforståelse, at et billede er færdigt, når man har knipset med kameraet. Det er yderst sjældent, at fotografen er så heldig. Som regel skal billedet en tur gennem en billedbehandler.

Her findes mange programmer og applikationer. Nogle programmer henvender sig til den glade amatør. Andre er specialiserede, og henvender sig til professionelle. På multimediedesigneruddannelsen bruger vi som regel den nyeste version af Adobe Photoshop. Programmet ligger på den disk, som du fik udleveret.

Men Photoshop er ikke det eneste ene program til formålet. I virkeligheden findes der en lang række programmer, som lige så godt kunne bruges. Fx kunne du med lige så gode resultater disse fremragende open source programmer, når grafikken skal fremstilles til multimedieprogrammer:

Men de fleste bureauer bruger altså Photoshop. Derfor underviser vi i Photoshop på multimediedesigner uddannelsen.

Filformater
Filer fra digitalcameraet er som regel i .jpg eller .raw format. Photoshop åbner filerne; men gemmer som regel i formatet .psd. Hvorfor nu det?

.psd filer kan med lidt god vilje kaldes en slags arbejdsfiler. De gemmer dine indstillinger, filtre etc.. Som regel er arbejdsfilerne opbygget af en række lag, der kan manipuleres på forskellige måder. Men disse lag kan en browser ikke nødvendigvis forstå. Derfor skal Photoshop-filerne eksporteres til et format, som browseren kan forstå.

Der findes et hav af browsere – ud over Internet Explorer, der beklageligvis nok er den mest almindelige browser: Firefox, Opera, Chrome, Safari etc. Browserens opgaver er at give en grafisk flade, hvor man kan læse tekst, se billeder, høre lyd eller se video.

Browseren kan ikke læse Photoshops arbejdsfiler, og det er mærkeligt nok en fordel. Photoshops arbejdsfiler kan være meget store; men på nettet har vi brug for mere kompakte filer, der ikke fylder for meget. Derfor skal billederne eksporteres til et filformat, som browserne kan vise. De almindeligste filformater er:

  • JPG: det almindeligste fotoformat; men .jpg har ingen alpha-kanaler (transparens, gennemsigtighed)
  • GIF: kan kun vise ca. 250 farver; men formatet er fremragende til tegneserier eller billeder med store ensartede flader.
  • PNG: minder om .jpg; men dette format kan håndtere alpha-kanaler.
  • SVG: vektorgrafik (vektorer behandles ikke i denne artikel; men browseren kan vise formatet).

Produktionsfilerne
Eftersom Photoshop gemmer i .PSD skal de filer, som du bruger på nettet eksporteres til et format som browseren kan forstå. Du han enten > Filer > Gem Som eller du kan vælge at åbne billedet i Image Ready.

AppStores – skidt eller kanel?


Alle vil have en
Microsoft vil ha’ en. Apple har en. Ubuntu prøver også at udvikle en AppStore. Men er det nu skidt eller kanel for os som brugere, når softwaren kan hentes via nettet. Umiddelbart er fordelene indlysende:

  • Det er nemt og effektivt
  • Hos Apple er det billigt
  • Microsofts AppStore er på vej – den bliver nok dyr
  • Ubuntus programmer er gratis

Hvorfor er man så interesseret i AppStores på alle platforme for tiden? Det er naivt at tro, at modellen udelukkende handler om brugervenlighed. Softwareproducenterne ønsker at kontrollere programmerne.

Ubuntus Softwarecenter

Shareware
Under windows har man altid kunnet hente shareware. Problemet ved shareware er, at selv uskyldigt udseende programmer kan være en virusfælde. Sharewareprogrammerne har i årevis kostet noget i stil med 29.95$.

Hvis man ikke betaler det, så kommer en række irriterende skilte på skærmen, der kræver betaling, hvis skiltet skal fjernes. Nogen gange hjælper det ikke at betale, så kommer skiltet bare med tilbud om flere programmmer…

Hvis man – som jeg – bruger en lang række kreative programmer, så risikerer man, at systemet bliver ustabilt. Og derfor kan det være ganske fornuftigt at lave nogle faste rammer for udvikling af software.

Apples økonomiske fidus
Apples iPad kræver at man installerer programmer fra AppStore. Den økonomiske ide er enkel – hver gang du køber et program, så ryger der nogle $ til udviklere og naturligvis Apple. Hvis du vil læse avisen på en iPad, så har aviserne muligheden for at udvikle applikationer, der kræver et abonnement.

For aviserne ligner det den løsning, de længe har søgt. Men folk vil sikkert heller ikke betale for nyheder på nettet… måske ligger vi som vi har redt, når vi ikke vil betale for nyhederne, så må vi tage til takke med discount.

13. Bud: “Du må ikke skrive programmer”
AppStores løser en lang række problemer; men de skaber altså også nogle nye. Som windows og linuxbruger er jeg vant til at lave nogle scripts og programmer, som løser små daglige problemer. Ikke det vilde, jeg programmerer sådan til husbehov.

Da jeg fik min iPad ville jeg lige prøve at lave et program, bare for at se, hvordan sagerne virker. Her kom overraskelsen: man skal lade sig registrere og betale 99$ pr. år – bare for at skrive programmerne. Hvis programmerne finder vej til AppStore og bliver populære, så er det nok en potentiel guldgrube; men det er jo ikke alle programmer, der skal ud i skyen. Koden bliver mere og mere lukket. Brugeren har end ikke adgang til filsystemet (med mindre man bruger Dropbox som erstatning).

Prinsessen i tårnet
Ulempen ved AppStores er at softwareproducenterne kan lukke sig helt ind i elfenbenstårnet. Som eventyrets prinsesse i tårnet smider softwareproducenterne kun rottehalen ned til passende prinser, der så kan kravle op til damen mod en passende betaling.

Så kommer monopolerne.

Hesteskoen stikker allerede frem. Apple har vist nogle grumme eksempler. Softwareproducenterne i Amerika er umådeligt bornerte efter dansk målestok. En dansk avis måtte ikke udvikle “Apps”, fordi en ungmø viser sine ynder på side 9. Ok, vi kunne måske leve uden disse billeder; men det viser, at softwareproducenterne udøver cencur.

Softwarecenteret – AppStore i linux
Ubuntu prøver også at lave Apps. Ubuntu fungerer rigtig godt på Netbooks, og en AppStore giver unægteligt et professionelt indtryk – ind til man finder ud af at Softwarecenteret aldeles ikke rummer alle programmer. Synaptic er et bedre valg for den avancerede bruger.

Men for den almindelige bruger kan Softwarecenteret være en hjælp, ikke mindst fordi programmerne præsenteres visuelt lækkert og med gode beskrivelser. Synaptic minder mere om en lukket fest for Feinschmekkere eller smånørder. Rigtige nørder henter programmer via en terminal (sudo apt-get install vlc).

Cencur
Apple har netop blokeret for VLC – et fantastisk program, der kan afspille videoer og streame video over et netværk. VLC kan afspille mange kryptiske videoformater, og derfor kom brugeren uden om at skulle konvertere videoer til Apples MP4 format. Tilsyneladende handler konflikten om at Apples meget lukkede licens og GPLv3 ikke passer sammen.

Så trak Apple stikket ud.

Problemet er helt præcist, at softwareproducenterne kan trække stikket ud. I de kommende år vil vi se en række monopolitiske AppStores. Giganterne vil nok have én hver.

Og ytringsfriheden? Tjah … vi får se.