Brug af billeder på hjemmesiden og redigering af billeder i Paint Net Af webmaster Nis Hollesen, sidst redigeret 14.06.16 Fast anvendelse af billeder på norddjurs.dk Husk at kigge på og eventuelt redigere billedets størrelse, inden du oploader det til mediearkivet i Umbraco. Billeder, der ligger direkte på hjemmesiden, skal aldrig være bredere end 1.500 pixel medmindre det er et billede, som du åbner i et nyt vindue, altså som du linker til. Du behøver heller ikke at oploade et fotografi i formatet.png. Png har den bedste opløsning, men fylder også meget mere end.jpg. Jpg er godt nok til at billeder. Du kan overveje at bruge png, når der er tale om grafik som f.eks. et logo eller en tegning. Billedtyper og deres størrelser Topgrafik: Topgrafikken vælger du i Umbraco under fanen Grafik. Topgrafikken skal have formatet 4 i bredden og 1 i højden. 1000 pixel til 250 pixel passer altid til en side på norddjurs.dk, også når der ikke er noget højre og/eller venstre indhold, som man jo kan vælge fra. Topgrafikken tilpasser sig selv sidens format, altså om der er højre - og/eller venstremenu på siden. Karruselbilleder: Vi benytter ofte karruseller (kaldet bannere i Umbraco) på forsiderne af vore hjemmesider. Der ligger f.eks. en på forsiden af norddjurs.dk og en på kampagnesiden triton.norddjurs.dk. Hvis billedet skal i karrusellen på forsiden af norddjurs.dk, skal det være 1120 x 740 pixels. Hvis billedet skal i karrusellen på forsiden af en kampagneside, skal det have størrelsen 940 x 390 pixels. Nyhedsbilleder: På forsiden af norddjurs.dk ligger der tre nyheder i nyhedsmodulet. Billederne til disse nyheder skal have størrelsesforholdet 3 til 2 eller 4 til 3 for at de ser pæne ud på forsiden. Det vil sige f.eks. 1000 pixel i bredden og 750 pixel i højden (4x3) eller f.eks. 600 pixel i bredden og 400 pixel i højden (3x2). Andre billeder: Ofte skal du ligge et billede i brødtekstfeltet i Umbraco. Modsat topgrafikken så tilpasser billeder i brødteksten sig ikke til sidens format, altså om der højre og/eller venstremenu på siden. På langt de fleste sider er der både højre og venstremenu og i de tilfælde passer en bredde på maksimum 400 pixel fint. Er der hverken højre eller venstremenu kan billedet være 900 pixel, hvilket er den maksimale bredde på et billede. 1
Alternativ tekst i billeder Når der anvendes billeder, skal man altid for at forholde sig til begrebet "alternativ tekst". Alt-teksten er den tekst, der kommer frem, når du fører musen henover et billede. En alternativ tekst til et billede har den funktion, at det netop er et alternativ for brugere, som ikke kan se billedet. En alternativ tekst vil derfor afhænge af billedets funktion. Når du skriver en alternativ tekst, skal du derfor spørge dig selv, hvad billedets funktion er. Prøv at sætte dig i modtagerens sted. Hvad, ville du mene, var nødvendigt at få læst op, hvis du ikke kunne se billedet eller billederne? For at tilføje en alt-tekst, markerer du billedet i editoren i Umbraco, klik på billedfeltet og udfyld feltet Navn. Det, du skriver her, bliver så til alt-teksten i billedet. Er et billede dekorativt/til pynt, så skal der ikke stå noget i feltet for alternativ tekst, da det ikke bidrager til en yderligere forståelse af et givent emne. Hvis billedet bærer information, som man går glip af, hvis man ikke kan se det, skal dette beskrives i den alternative tekst. Hvis billedet linker, skal du beskrive destinationen vha. alternativ tekst, som linket fører brugeren videre til, så brugere, som ikke kan se billedet, stadig kan udlede fra alt-teksten, hvad der sker, når de klikker på billedet. Hvis det er væsentligt at beskrive billedet for brugere, som ikke kan se billedet, angives en alternativ tekst, som beskriver billedet i feltet. NB: En skærmlæser fortæller brugere, hvilken type element de støder på, hvis det ikke er ren brødtekst. Det vil sige, at skærmlæseren informerer om, når man støder på et billede. Skærmlæseren siger "grafik" og læser så den alternative tekst. Du behøver således ikke at skrive "Billede af...", når du skriver en alttekst. NB: Man bør ikke anvende billeder, som indeholder tekst, med mindre det er umuligt at anvende andet, f.eks. i forbindelse med et logo. Tekst i billeder kan jo ofte ikke markeres og derfor ikke læses op af en skærmlæser. Hvis billedet indeholder tekst, skal teksten i billedet også fremgå af den alternative tekst til billedet. Colourbox Har du brug for et bestemt motiv, har du mulighed for at bestille et billede via Colourbox. Besøg www.colourbox.dk og se om du kan finde et passende billede. Hvis du finder et billede, kan du bestille det igennem din lokalredaktør eller selv få en bruger på Colourbox, hvis det er noget, du ofte skal gøre. 2
En kort introduktion til Paint Net Paint Net er et billedbehandlingsprogram, som alle har til rådighed i Citrix. Med dette program kan du lave de mest basale ting med billeder, og du er således allerede godt dækket ind. Du tilgår Paint Net ved at åbne startmenuen Kontorprogrammer Paint Net. Hvis du skal have lavet mere kompliceret billedbehandling, kan det være nødvendigt at finde en kollega, der har Photoshop. Du finder det her: Åben Startmenuen Kontorprogrammer Billedbehandling Paint NET. 3
For at ændre størrelse på billedet, vælg Image Resize. 4
Ved tryk på resize åbner der sig et billede, hvor man kan rette på billedets størrelse. Husk at krydse Maintain aspect ratio af, for så holder billedet sig inden for sit oprindelige format og bliver ikke forstrukket eller mast sammen. 5
Vælg rektangelværktøjet ( Rectangle Select ). 6
Vælg Fixed Size og skriv bredde (width) og højde (height). Fixed Size betyder, at billedet bliver klippet i et bestemt størrelsesforhold i højde og bredde. Topgrafikken (det øverste, aflange billede på hjemmesiden) har f.eks. forholdet 4 i bredden og 1 i højden, så det klipper vi i det forhold. 7
Markér området, der skal klippes ud og tryk på knappen Crop, når du er tilfreds. Har du spørgsmål eller problemer med at redigere billeder, kan du henvende dig til Webmaster Nis Hollesen på nih@norddjurs.dk. 8