In hoofdstuk 3 hebben we het gehad over hoe

WEB DESIGN

HOOFDSTUK 11 Afbeeldingsformaten & Optimalisatie

11.0 Aan de slag gaan

I

n hoofdstuk 3 hebben we het gehad over hoe de grafische vormgeving die gecreëerd wordt, in een programma zoals Photoshop, slechts een glimp is van wat er nog moet komen, sinds deze nog niet werkzaam zijn. Als we beginnen te optimaliseren en beelden te exporteren, moet de structuur kompleet zijn en alle aspecten moeten de juiste grootte hebben. Dit betekent dat als we van plan zijn een beeld van een webpagina te gebruiken van 300px bij 300px, het precies van dezelfde grootte moet zijn in het grafische document (in Photoshop of in een ander grafisch programma). Bijvoorbeeld, figuur 11-1 heeft een kopstuk afbeelding voor de website van een school ontworpen met Wordpress. Het model van Wordpress heeft een kopstuk afbeelding van 920 pixels breed en 175 pixels lengte nodig. Om deze te ontwerpen hebben we Photoshop gebruikt, om ons ervan te hebben verzekerd dat we, vanaf het begin, de juiste

Figuur 11-1:: Website kopstuk afbeelding in Photoshop

Figuur 11-2: Kopstuk afbeelding van een website in Photoshop

de afbeelding te behouden, druk op shift tijdens het meeslepen. Druk Return/Enter om de veranderingen te voltooien. • Om een hele afbeelding te veranderen zonder Photoshop, bezoek http://www.resize.it en volg de aanwijzingen.

Stukjes van de puzzel Om de op maat gemaakte ontwerpen te veranderen in volledig werkende webpagina´s, moeten we nog een aantal beslissingen nemen hoe we het kunnen optimaliseren en uitvoeren. Webpagina´s zijn net als puzzels die klaar zijn: als je een webpagina bekijkt, kun je de stukjes niet van het geheel onderscheiden. Om te laten zien wat we bedoelen vergelijk figuren

afmetingen hebben ingegeven (zie figuur 11-2).Wat te doen als je de verkeerde grootte hebt ontworpen? Elk van de volgende opties maakt het mogelijk om de grootte te veranderen voor het te versturen: • Om een hele afbeelding te veranderen in Photoshop, kies > Image Size en volg de aanwijzingen. • Om een gedeelte van een afbeelding in Photoshop te veranderen, ga naar de juiste afbeelding, gebruik dan Control-t (Command-t op de Mac) of kies Edit > Transform > Resize. Sleep de omranden naar de gewenste grootte. Om de originele afmetingen van Figuur 11-3: De website van Hershey Park

83

© 2012 Excel With Business

WEB DESIGN


11-1 and 11-2.

identificeren, die uitgevoerd moeten worden.

Bekijk Hershey Park’s website (Figuur 11-3). Kan je makkelijk de individuele afbeeldingen identificeren, die gebruikt zijn om de hele pagina te maken? Als we nog een keer kijken naar de website zonder

11.1 Stukken of sprites? Als we alle pagina elementen apart in een ontwerp document creëren- zoals veel ontwerpers doenhebben we een paar mogelijkheden, om de uiteindelijke afbeeldingen bij de gebruikers te laten komen. De beproefde en eigenlijke methode is om op elk gedeelte van de puzzel een individueel element van de pagina te plaatsen. Elk gedeelte wordt dan bewaart op een webvriendelijke afbeelding met verwijzing naar de code.

Figuur 11-5:Een blok sprites gebruikt in Facebook

afbeeldingen, kunnen we daar aanwijzingen vinden (Figure 11-4). Misschien had je al geraden dat de foto’s, afbeeldingen waren en de tekst niet en zag je dat de voettekst gebaseerd is op afbeeldingen? ( En met het zoekvak rechts bovenaan? Ze zijn allebei afwezig in Figuur 11-4.) Bepaalde elementen zoals, teksten, achtergronden, en patronen, moeten ook als kleine afbeeldingen bewaart worden, in veel gevallen en daarna toegevoegd worden in HTML en/of CSS. Met dit in gedachte is onze eerste stap, om een webpagina te ontwerpen, dat we de individuele stukjes moeten

84

Figure 11-5: Un bloc d’objetsimages utilisés sur Facebook

Maar vele moderne ontwerpers gebruiken een andere methode, door gedeelten die bij elkaar horen te groeperen op een enkele afbeelding. Deze grotere afbeelding wordt verwezen naar zijn code, met bijkomende bits met informatie: coördineert het gedeelte dat we op elk moment willen laten zien. Waarschijnlijk heb je dat wel eens aangetroffen, zonder het te realiseren, vooral als je een Facebookgebruiker bent. Facebook heeft vele iconen op de navigatiebalk en elders op de webpagina. In plaats van ze te bewaren als individuele kleine afbeeldingen, bewaren de ontwerpers ze in blokken, genaamd sprites. Figuur 11-5 geeft een voorbeeld van een blok sprites, die zich allemaal in dezelfde afbeelding bevinden.


WEB DESIGN


Wanneer een van deze sprites een referentie heeft in de pagina, wordt de coördinatie van dit stuk afbeelding gespecificeerd in het stijlblad, om de achtergrond eigenschappen te gebruiken. De afmetingen van de sprite worden bepaald door zijn breedte en lengte eigenschappen, zodat de zoekmachine precies weet hoeveel van de hele afbeelding te laten zien, in elk apart geval. Hier is een voorbeeld hoe dat er uit zou zien op een stylesheet: #likeButton { width: 18px; height: 17px; background:url(‘icons

sprites.png’) 238 102;

Spritebox (http://www.spritebox.net) is gratis online die al deze codes snel en eenvoudig voor ons berekent.

Gedeelten ontwerpen Een alternatief voor de sprites is om elk gedeelte van de puzzel te bewaren als zijn eigen afbeelding. Voordat Photoshop de snij optie had, moesten de ontwerpers eerst het ontwerp knippen en deze als unieke bestanden bewaren. Dit proces was niet alleen saai en tijdrovend het was ook een uitdaging voor het onderhoud van de afbeeldingen.

Gelukkig versnelt de slice optie het hele proces en het laat het gehele ontwerp intact, waardoor onderhoud makkelijker is. Sterker nog, Photoshop heeft verschillende ingebouwde gereedschappen voor het maken van gedeeltes en blokken.

}

In dit geval, de hoogte en lengte bepalen de grootte van het venster en de afmetingen aan het einde van de achtergrond, identificeren de locatie v.d. startpunten v.d. x-en y-assen. Figuur 11-6 laat zien welke portie van de Facebook sprite afbeelding, wordt getoond als we deze code gebruiken. Als alleen al de gedachte om al deze afmetingen en coördinaties, voor ieder sprite te maken je afschrikt, wees maar niet bang, er is een app die dat allemaal voor ons doet!

Tenslotte, het gereedschap dat we gebruiken, hangt af van hoe we ons ontwerp maken. Als ieder voorlopige afbeelding op een eigen laag is, kiezen we Layer > New Layer Based Slice en laten we Photoshop een slice creëren van de inhoud van de gekozen laag. Als ons ontwerp een aardig netwerk heeft dan kunnen we wat aanwijzingen tekenen, kies het slice gereedschap en kies ‘gids over het slicen’ in de optiebalk, zoals in figuur 11-7. Als geen van deze automatische toepassingen geschikt is, dan kunnen we onze eigen slices opstellen. Selecteer gewoon de slice optie, klik en sleep rond de buitenkant van de afbeelding die we willen slicen. In figuur 11-8, tekenen we slices rond elk element die we als individuele afbeelding willen bewaren. (De enige uitzondering is de achtergrond afbeelding, die apart bewaart moet worden, omdat Photoshop geen overlappende slices toestaat.)

11.2 Het kiezen van het beste bestandsformaat voor dit werk Nadat het ontwerp is gesneden, is het tijd om de beste bestandsformaat te bepalen voor elk beeld. Om dit te doen, laten we eens kijken naar de drie meest voorkomende webvriendelijke bestandsformaten voor afbeeldingen.

GIF Figure 11-6: De rode buitenlijn bepaalt de grootte van de afbeelding, die we eerder in de code als voorbeeld hebben gegeven.

85

GIF, wat staat voor Graphic Interchange Format, werd voor het eerst geïntroduceerd in 1987 als een nieuw bestandsformaat, ontwikkeld voor grafische © 2012 Excel With Business

WEB DESIGN


webpagina’s. Zijn kenmerken maken het, het meest geschikt voor het opslaan van op tekst gebaseerde beelden, lijntekeningen, tekeningen en effen kleur beelden. Tabel 11-1 schetst GIF’s kenmerken en vergelijkt deze met die van de andere twee bestandsformaten hier besproken.

JPG Het JPEGbestandsformaat is gemaakt door de Joint Photographic Experts Group (vandaar de afkorting), die werd belast met het ontwikkelen van nieuwe maatstaven voor een fotografische webbestand formaat. De eerste publieke uitgave van de JPEG-standaard was in 1992. (Opmerking:

Figure 11-7: Slices gemaakt met hulp van gidsen

omdat veel computers alleen kunnen omgaan met bestanden met drie letters, kreeg het JPEG-formaat een verkort JPG achtervoegsel.) Beelden van een fotografische aard, zoals die met een

Figure 11-8: Slices die zijn gemaakt met het gereedschap Slice

86



WEB DESIGN Eigenschappen

GIF

JPG

Kleur modus

8-bit( niet meer dan 256 kleuren

24-bit (miljoenen kleuren)

Compressie methode

Verliesvrije

Verlies( hoe groter de compressie, hoe lager de beeldkwaliteit)

Animatie ondersteuning

Ja

Nee

Transparentie ondersteuning

Ja (alleen enkele kleur)

Nee

Interlacing ondersteuning

Ja (eendimensionale)

Ja (eendimensionale)

Het best geschikt voor:

Simpele graphics met beperkte kleuren, waarbij de GIF-versie kleiner is in bestandsgrootte dan de PNG versie

Fotografische beelden met miljoenen kleuren, waar de JPG versie kleiner is in bestandsgrootte dan de PNG versie

PNG Kan 8-bit, 24-bit, of32-bit zijn Verliesvrije

Nee

Ja (meerdere mogenlijkheden beschikbaar) Ja (tweedimensionale)

Elke web afbeelding waar de GIF-of JPG-versie niet kleiner is in bestandsgrootte, elke afbeelding die meer transparantie mogelijkheden nodig hebben

Tabel 11-1:Vergelijking van de bestandsgrootte van web afbeeldingen

aanzienlijke kleurvariatie, zijn zeer geschikt voor het JPG-bestandsformaat. Bekijk Tabel 11-1 voor meer informatie over de kenmerken.

PNG Portable Network Graphics, of PNG, is de nieuwste van de drie formaten hier besproken. Het werd oorspronkelijk ontwikkeld, om het verouderde GIF-formaat te vervangen, maar het duurde langer dan verwacht, om op grote schaal te worden overgenomen. Het heeft nu volledige ondersteuning onder de moderne browsers en er is geen reden om niet te profiteren van dit veelzijdige bestandsformaat. Tabel 11-1 vergelijkt de kenmerken met die van JPG en GIF.

11.3 Exporteren van web-ready bestanden Ongeacht het type van het ontwerp- bestand dat is gemaakt - een eenvoudige moodboard, een stijl tegel, of een hele mockup - en of we uiteindelijk besparen op foto’s, individueel of in groepen, de afbeeldingen dienen te worden uitgevoerd wanneer we klaar zijn, om te beginnen met de bouw van de pagina functionaliteit.

87

Met Photoshop “ Opslaan voor de web-functie” is dit een koud kunstje. Wanneer u klaar bent om webafbeeldingen te exporteren vanuit Photoshop, kiest u Bestand> Opslaan voor web en apparaten. Dit opent een venster vergelijkbaar met dat in figuur 11-9. In dit geval hebben we gekozen voor de eerste slice onder het logo (met geel omlijnd in de screen capture). Vervolgens selecteren we de JPEG High optie in het menu, Voorinstelling in de rechterbovenhoek, om te zien wat de resultaten zijn. Met behulp van deze preset, zal de uiteindelijke beeldgrootte iets meer dan 10k zijn (zoals weergegeven in de linker benedenhoek van het venster). Met behulp van PNG, vergroot de bestandsgrootte zich naar meer dan 38k! Omdat het doel is om de mooiste afbeelding met de kleinste bestandsgrootte te krijgen, houden we vast aan de JPEG-versie van deze afbeelding. Bij het exporteren van meerdere slices, selecteer de slice-optie het venster Opslaan van webtools, en met behulp van de menu’s aan de rechterkant. Als we klaar zijn met het optimaliseren van alle segmenten, kies de knop Opslaan onderaan. (Opmerking: als je ervoor kiest om alle segmenten in de afbeelding © 2012 Excel With Business

WEB DESIGN


te exporteren, is het niet nodig om op deze te klikken, voordat je de knop opslaan klikt. Maar als je er alleen een paar wil exporteren, moet je zeker Shift selecteren voordat je de slices op slaat. En vervolgens kies je ‘Geselecteerde Slices’ uit het slice- menu op het opslaan-venster.) Je kunt ook gebruik maken van de 2-Up of 4-Up opties, om een vergelijking naast elkaar te krijgen van de verschillende optimalisatieinstellingen en hun invloed op de afbeelding.

Figuur 11-9: Photoshop “ Opslaan voor de web-functie”

Figure 11-10:Opslaan voor de web-functie van Photoshop door gebruik van het 4-Up zicht

88


WEB DESIGN


Figuur 11.10 toont de 4-up van gedeelten van drie slices van een mockup. Hier hebben we Shift ingedrukt en selecteerden drie slices, dan selecteren we verschillende presets in de menu’s aan de rechterkant. Het gedeelte linksboven toont de resultaten van het gebruik van de PNG-24-stand, en links onder maakt het gebruik van PNG-8. En rechtsonder toont het een lage kwaliteit JPEG en in de rechterbovenhoek geeft het de optie aan die we geselecteerd hebben - de 60%-kwaliteit JPEG. Deze optie is optimaal voor deze beelden, want het geeft ons de laagste bestandsgrootte met de beste kwaliteit.

volgende NEXT

89

Hoofdstuk 12 Publiceren (FTP & Testing)


In hoofdstuk 3 hebben we het gehad over hoe

Recommend Documents