Designerens guide til billedskæring i Photoshop

Når du arbejder med billeder på nettet, vil der være tidspunkter, hvor du vil indlæse et stort billede, enten som et 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, tager det 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 jævnt resultat. Her er et eksempel på et skåret billede.



billedskæring

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 du kan 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å skiveværktøjet.



billedskæring

macbook pro 15 tommer beskyttelsesetui

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 : Dette er hvor du indstiller højden og bredden af ​​skiven 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 med Slice Select Tool.

billedskæring

Hvis nøjagtighed er vigtig, skal du bruge retningslinjer til at kortlægge de vigtige sektioner i billedet.

hvordan man laver teksturer i blender

billedskæring

Klik på C eller Skiveværktøjet øverst på menubjælken Udskæring for at aktivere det, og klik på Skiver fra hjælpelinjer i menuen Skive over billedet.

billedskæring

Skiverne tegnes automatisk for dig. Du kan derefter omplacere skiverne med værktøjet til valg af skive.

Redigering af udsnitoplysninger

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.

billedskæring

En anden mulighed er at højreklikke på udsnittet, og i popup-menuen skal du klikke på Rediger indstillinger for udsnit.

billedskæring

Begge valg åbner dialogboksen Slice Options.

billedskæring

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.

tryllestav værktøj i Photoshop CC

billedskæring

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.

hvordan man maler som van gogh

billedskæring

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 muligheder 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.

billedskæring

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 følgende artikler:

Ord : Nathan Segal