Indhold
- Hvordan det virker
- Grundlæggende om udskæring
- Redigering af skiveoplysninger
- Gem til internettet
- Konklusion
Når du arbejder med billeder på nettet, vil der være tidspunkter, hvor du vil indlæse et stort billede, enten som hovedbillede på en side eller som baggrund. Ulempen er, at du straks løber ind i flere problemer. Først og fremmest er den faktiske filstørrelse. For det andet er opløsningen. For det tredje er kompression.
Hvis filen er stor, vil det tage lang tid at indlæse, især for brugere med en langsommere forbindelse. Du kan reducere filstørrelsen med komprimering, men du kan kun gå så langt, før billedkvaliteten begynder at lide.
Løsningen på dit problem er at bruge billedskæring, som giver dig mulighed for at indlæse billedet, et stykke ad gangen, indtil hele billedet vises på skærmen.
Hvordan det virker
Her er en oversigt over, hvordan det fungerer: når du har et billede, der tager for lang tid at indlæse alene, udnytter du værktøjet Slicing i Photoshop til at skære billedet i mindre sektioner. Disse billeder gemmes som en separat fil og optimeres ved hjælp af kommandoen Gem til web.
Derudover opretter Photoshop den HTML eller CSS, der er nødvendig for at få vist det opskårne billede. Når det bruges på en webside, samles hvert billede igen i browseren ved hjælp af den tidligere nævnte HTML eller CSS for at skabe et glat resultat. Her er et eksempel på et skåret billede.
Grundlæggende om udskæring
For at holde tingene enkle arbejder vi kun med skiveværktøjet på et lag. I dette eksempel arbejder jeg med et billede, der er 960x722px. Nogle ting, du skal vide, før vi starter:
- Når du opretter skiver, kan du gøre det ved hjælp af skiveværktøjet eller bygge dem ved hjælp af lag.
- Skiver kan vælges ved hjælp af værktøjet Slice Select.
- Du kan flytte, størrelse eller justere skiven med andre skiver. Derudover kan du udpege et navn til udsnittet, typen og URL.
- Hvert udsnit kan optimeres ved hjælp af indstillingerne i dialogboksen Gem til web.
For at komme i gang skal du trykke på C på dit tastatur, og klik på værktøjet Skive.
Når du opretter skiver, kan du vælge mellem tre indstillinger: Normal, Fast formatforhold og Fast størrelse.
- Normal: Dette bliver et stykke afhængigt af hvor du begynder og slutter det felt, du tegner på billedet.
- Fast formatforhold: Her indstiller du højde og bredde ved hjælp af hele tal. For at uddybe, hvis du vil oprette et udsnit med et forhold mellem tre og et, skal du indtaste 3 for højden og 1 for bredden.
- Fast størrelse: Her indstiller du skivens højde og bredde i pixels.
Du har flere muligheder, når du udskærer et billede. Hvis nøjagtighed ikke er vigtig, kan du skære billedet manuelt og om nødvendigt flytte de færdige skiver rundt ved hjælp af værktøjet Skivevalg.
Hvis nøjagtighed er vigtig, skal du bruge retningslinjer til at kortlægge de vigtige sektioner i billedet.
Øverst på menulinjen Udskæring skal du klikke på C eller skiveværktøjet for at aktivere det, og i menulinjen Skive over billedet skal du klikke på knappen Skiver fra hjælpelinjer.
Skiverne tegnes automatisk for dig. Du kan derefter placere skiverne igen med Slice Select Tool.
Redigering af skiveoplysninger
Når hvert udsnit er oprettet, kan du redigere oplysninger om udsnittet på en af to måder.
Den første ting at gøre er at klikke på værktøjet Slice Select, klikke på det udsnit, du vil redigere, og derefter klikke på ikonet ved siden af Vis Auto Slices-knappen i menulinjen.
En anden mulighed er at højreklikke på udsnittet, og i popup-menuen skal du klikke på Rediger indstillinger for udsnit.
Begge valg åbner dialogboksen Slice Options.
Som du kan se, er der mange indstillinger. Du kan ændre navnet på udsnittet, du kan tildele en URL til det, så når det klikkes på i browseren, fører det dig til en anden placering, du kan indstille målet (_blank, _self, _parent, _top), Message Tekst, Alt-tag, udsnitets dimensioner og mere.
Gem til internettet
Når du er tilfreds med dit layout, skal du gå til Filer> Gem til internettet.
Her kan du indstille filtype og komprimering for hvert udsnit eller gå med den standard, der er angivet i dialogboksen Gem til web. Når du er tilfreds med dine indstillinger, skal du klikke på knappen Gem.
Dette åbner dialogboksen Gemt optimeret som. Nederst i boksen er der flere vigtige indstillinger.
- Format: Du har tre muligheder, som er HTML og billeder, kun billeder og kun HTML.
- Indstillinger: Dine indstillinger er Brugerdefineret, Baggrundsbillede, Standardindstillinger, XHTML og Andet.
- Skiver: Dine indstillinger er Alle skiver, Alle brugerskiver og valgte skiver.
Til denne vejledning bruger jeg HTML og billeder, standardindstillinger og alle udsnit. Når du er tilfreds med dine indstillinger, skal du vælge den mappe, hvor du vil gemme filerne, og klikke på knappen Gem. Dette opretter en HTML-fil og gemmer alle seks billeder i en mappe.
Her er en delt skærmbillede af HTML-filen i Adobe Dreamweaver. Som du kan se, er koden ligetil og nem at bruge.
Konklusion
Som du kan se, er billedskæring nyttig, hvis du har et stort billede. Ved at opdele det i sektioner begynder dele af billedet at indlæses først og lade brugeren vide mere, der skal komme. Dette er nyttigt for brugere med en langsom forbindelse.
For mere information, se på følgende artikler:
- Udskæring af websider
- HTML-indstillinger for skiver
Ord: Nathan Segal
