AFMETINGEN VAN FOTO S

Transcriptie

1 AFMETINGEN VAN FOTO S Hieronder worden per template de relevante afmetingen genoemd, indien mogelijk ook met een aantal gerelateerde tips. De volgende website-templates worden onderscheiden: 1. Website-design 2016: nieuwe standaard-template, in gebruik sinds 2016 (afgekort WS 2016 ) 2. Witte oude template 2009: (witte) standaard-template, wordt in de loop van 2016 uitgefaseerd ( dottwente ) 3. Institutentemplate: afgeleid van 2), maar met extra kleuren voor de instituten die een eigen huisstijl-kleur hebben volgens de merkarchitectuur van de UT ( instituten ) 4. Studenten/medewerkersporatl: my.utwente.nl en employees.utwente.nl 5. Social media LET OP: Hieronder worden de exacte afmetingen aangegeven. Dit zijn in het algemeen minimale afmetingen. Het is ook mogelijk grotere plaatjes te uploaden, die ongeveer dezelfde lengte/breedte-verhouding hebben. WebHare zal deze foto s zelf bijsnijden op het benodigde formaat. De WS2016-sites bieden op de meeste upload-plekken ook een editor aan, zodat je je foto na het uploaden nog kan bijsnijden. Juiste bestandstype: plaatjes met tekst erop moeten als.png worden opgeslagen. Anders is de kwaliteit te laag en het plaatje niet scherp. Voor foto s is.jpg gebruikelijk, wat veel kleinere bestanden oplevert dan.png. Als je een doorzichtige achtergrond nodig hebt (vaak achter een logo), dan kan dat met.gif,.eps en.png. Een.jpg kan geen doorzichtige achtergrond hebben. Voorkom dit soort witte kaders achter een logo, alle logo s zijn ook altijd met doorzichtige achtergrond beschikbaar. Op donker papier/achtergrond is het logo wit, op licht papier/achtergrond is het logo zwart. Hier had een logo met witte letters moeten staan: 1. STANDAARD WEBSITE-TEMPLATE GEBOUWD IN 2016 (WS2016) De website uit 2013, kort WS2013 kent een aantal sub-templates. Deze worden indien nodig apart hieronder besproken. ALGEMENE ELEMENTEN UIT WS2016 HEADER-FOTO AFMETING VAN TE PLAATSEN AFBEELDING: 1660X640 Afwijkende afmetingen op andere apparaten: De foto wordt altijd liggend weergegeven, maar hoe kleiner het scherm wordt, hoe meer vierkant de foto zal worden. Op een kleine telefoon zelfs vierkant 320/320. Zet geen tekst op je foto. Bij kleinere schermen zou een deel eraf vallen of worden de letters te klein. Bovendien zet kop van je pagina altijd automatisch op de header-foto. Indien je via het tabblad CTA een actie-knop of andere tekst toevoegt, dan wordt de foto maar 300 pixels hoog weergegeven Tip: na het uploaden van de foto kun je via de WebHare foto editor nog de uitsnede kiezen en een focuspunt vastleggen dat centraal moet staan (zoals een hoofd van een persoon)

2 Header foto zonder CTA (actieknop) op desktop, tablet en mobiel Header foto met CTA (actieknop) op desktop, tablet en mobiel BEELD IN LOPENDE TEKST Afmeting van te plaatsen afbeelding: 620 pix breed (breedte van de tekst), en bij voorkeur liggend formaat Gebruik idealiter voor pasfoto s etc de contactwidgets (inline component of widget) Foto s kunnen wel indien geen andere oplossing beschikbar is klein in de lopende tekst worden geplaatst. Via de fotoeigenschappen (dubbelklik op foto) kun je de afmetingen verkleinen door het aantal pixels kleiner te maken. Vergeet niet aan te vinken dat je de lengte/breedte verhouding wil houden. Je kan een foto in de lopende tekst ook als inline component plaatsen, dan wordt de foto veel breder dan de tekst en zal de foto rond de 1500 pixels breed moeten zijn WIDGETS: FOTOWIDGET Afmeting van te plaatsen afbeelding: Eenkoloms liggend: minimaal 300 x 222 pix, bij voorkeur heel groot (gebruiker kan foto downloaden via knop) Tweekoloms liggend: minimaal 620 x 465 pix, bij voorkeur heel groot (gebruiker kan foto downloaden via knop) Eenkoloms staand: minmaal 300 x 465 pix, bij voorkeur heel groot (gebruiker kan foto downloaden via knop) Afwijkende afmetingen op andere apparaten: n.v.t De drie foto-widgets in de volgorde zoals boven omschreven.

3 OVERIGE WIDGET: MEDIA, QUOTE, INSTITUTEN Afmeting van te plaatsen afbeelding: 300 x 170 pix Drie mediawidgets INLINE COMPONENT: FOTO-CAROUSSEL (NOG NIET GEUPDATED) Afmeting van te plaatsen afbeelding: xxxxxxxxxxxxxxxxxxxxxxxx FOOTER De footer toont standaard een deel uit de kaart van maps.utwente.nl. De centrale redactie kan de uitsnede van de kaart per site aanpassen. Afmeting: 1660 x 300 pix. Op kleine apparaten wordt de footer bijna vierkant. (320 x 300). BIJZONDERHEDEN HOMEPAGE UTWENTE.NL (NOG NIET GEUPDATED) HEADER-RUIMTE/VIDEO Afmeting van te plaatsen afbeelding: voor desktop geen plaatje nodig Afwijkende afmetingen op andere apparaten: staand plaatje voor t/m 320 pixels, liggend plaatje voor 321 t/m 960 pix. ipad toont screenshots uit de video s. Video heeft afmetingen van 1400x470 pix

4 Links: De header ruimte op desktop-formaat: CTA-tekst op de video-achtergronden Rechts: De header ruimte op een kleiner scherm: een plaatje met CTA-knop onderin. CAROUSSEL MET FEATURED ITEMS (NOG NIET GEUPDATED) Afmeting van te plaatsen afbeelding: 600x860 Plaatjes moeten groter worden geupload i.v.m. afmetingen op tablet Geen tekst op te uploaden plaatje, staat onrustig (niet in lijn met de rest; tekst wordt in WebHare ingevoerd) NIEUWS EN EVENTS OP HOMEPAGINA Afmeting van te plaatsen afbeelding: grootste nieuwsitem en grootste event nemen eerste foto uit bericht over Eventueel focuspunt van de foto kiezen voor een andere uitsnede (via photo editor in WebHare, met name bij event-foto) Iconen op nieuws-/eventoverzichten worden automatisch gegenereerd. Hiervoor kan indien gewenst een aparte foto worden geupload. Voor berichten die geen foto bevatten is er een automatische placeholder voor de homepage en voor overzichtspagina s. Nieuws (links) en events (rechts) op de homepage NIEUWS/EVENT-PAGINA Afmeting van te plaatsen afbeelding: minimaal 1500 x 640 (zelfde als normale website header)

5 Geen tekst op de foto (de titel van het bericht wordt als tekst automatisch op de foto gezet) Meerdere foto s uploaden genereert slider Vierkante of staande foto s: kunnen ook mits minimaal 640 pix hoog; geef dit aan (vinkje), dan worden deze met een wazige achtergrond alsnog mooi in de header gezet. Kleinere foto s kunnen in het tekstvlak worden geplaatst 2) WITTE OUDE TEMPLATE In het hoofdscherm kunnen plaatjes in elk gewenst formaat worden geplaatst. Webhare verkleind deze automatisch naar de maximale breedte van de pagina. De header wordt centraal te beschikking gesteld. Je kan bij de eigenschappen uit een tiental opties kiezen (header 1 header 10). BANNERS Afmeting van te plaatsen afbeelding: 200 pix breed (onder menu) en 150 pix breed (kolom rechts) Banners (en andere blokken) worden standaard aan de rechter kant geplaatst Gebruik hiervoor de template die door de centrale redactie beschikbaar is gemaakt 3) INSTITUTEN Voor alle elementen op de instituten-template geldt dat de afmetingen die op de site zichtbaar zijn ook de minimale afmetingen zijn die in het systeem geupload moeten worden. Het systeem past te grote plaatjes zelf aan. Wat de benodigde afmetingen zijn zie je op de website. Open deze in Internet Explorer, klik met de rechter muis op een plaatje en dan op properties/eigenschappen om de afmetingen te zien. 4) STUDENTEN-/MEDEWERKERSPORTAL MY.UTWENTE.NL STUDENTENPORTAL Liggende foto s voor news/events (worden bij de twee meest recente items getoond). Staande foto s kunnen uitsluitend in de lopende tekst worden geplaatst, niet in het event/nieuwsoverzicht. EMPLOYEES.UTWENTE.NL Foto in de header is 840x348 (zie hieronder) en schaalt mee op kleine apparaten. Let op: hetzelfde bericht wordt mogelijk ook op een openbare nieuwspagina getoond. In dat geval wordt de foto minder breed genoond: 620x348. 5) SOCIAL MEDIA Voor de afmetingen van plaatjes op social media als Twitter/Facebook worden omschreven in deze blogpost, waarvan de schrijver beloofd heeft deze altijd up to date te houden:

6 Op deze pagina staan de totale afmetingen, maar let wel op: op sommige plekken schuift er andere tekst overheen. Voor de header bijvoorbeeld moet je ruimte houden op de locatie van de profielfoto, maar ook voor de bovenbalk die naar beneden klapt.