Designerhåndboken for skjæring av bilder i Photoshop

Når du arbeider med bilder på nettet, vil det være tider når du vil laste inn et stort bilde, enten som hovedbilde på en side eller som bakgrunn. Ulempen er at du umiddelbart vil støte på flere problemer. Først og fremst er den faktiske filstørrelsen. For det andre er oppløsningen. For det tredje er kompresjon.

Hvis filen er stor, vil det ta lang tid å laste den inn, spesielt for brukere med en tregere forbindelse. Du kan redusere filstørrelsen med komprimering, men du kan bare gå så langt før bildekvaliteten begynner å lide.

Løsningen på problemet ditt er å bruke skjæring av bilder, slik at du kan laste bildet, et stykke om gangen, til hele bildet vises på skjermen.



Hvordan det fungerer

Her er en oversikt over hvordan det fungerer: når du har et bilde som det vil ta for lang tid å laste av på egen hånd, benytter du deg av Slicing-verktøyet i Photoshop for å kutte bildet i mindre deler. Disse bildene lagres som en egen fil og optimaliseres ved hjelp av Lagre for web-kommandoen.

I tillegg oppretter Photoshop HTML eller CSS som er nødvendig for å vise det oppskårne bildet. Når det brukes på en webside, vil hvert bilde samles på nytt i nettleseren ved hjelp av HTML eller CSS nevnt tidligere for å skape et jevnt resultat. Her er et eksempel på et skåret bilde.

skjæring av bilder

Grunnleggende om oppskæring

For å gjøre ting enkelt vil vi bare jobbe med Slice-verktøyet på ett lag. I dette eksemplet jobber jeg med et bilde som er 960x722px. Noen ting du trenger å vite før vi begynner:

  • Når du lager skiver, kan du gjøre det ved hjelp av skiveverktøyet, eller du kan bygge dem ved hjelp av lag.
  • Skiver kan velges ved hjelp av verktøyet Slice Select.
  • Du kan flytte, størrelse eller justere skiven etter andre skiver. I tillegg kan du angi et navn for stykket, typen og URL.
  • Hvert stykke kan optimaliseres ved hjelp av innstillingene i dialogboksen Lagre for Internett.

For å komme i gang, trykk C på tastaturet og klikk på skiveverktøyet.

Adobe Indesign CS4 gratis nedlastning fullversjon

skjæring av bilder

Når du lager skiver, kan du velge mellom tre innstillinger: Normal, Fast størrelsesforhold og Fast størrelse.

  • Normal : Dette blir et stykke avhengig av hvor du begynner og avslutter boksen du tegner på bildet.
  • Fast sideforhold : Dette er hvor du stiller inn høyde og bredde ved hjelp av hele tall. For å utdype, hvis du vil lage et stykke med et forhold på tre til ett, vil du skrive inn 3 for høyden og 1 for bredden.
  • Fast størrelse : Dette er hvor du setter høyden og bredden på stykket i piksler.

Du har flere alternativer når du skjærer et bilde. Hvis nøyaktighet ikke er viktig, kan du skjære bildet manuelt, og om nødvendig flytte de fullførte skivene rundt med Slice Select Tool.

skjæring av bilder

Hvis nøyaktighet er viktig, bruk retningslinjer for å kartlegge de viktige delene i bildet.

skjæring av bilder

Øverst på menylinjen Slicing, klikk på C eller Slice-verktøyet for å aktivere den, og i Slice-menylinjen over bildet klikker du på Slices from Guides-knappen.

skjæring av bilder

hvordan lage fb forsidebilde privat

Skivene tegnes automatisk for deg. Deretter kan du plassere skivene på nytt med verktøyet Slice Select.

Redigere snittinformasjon

Etter at hvert stykke er opprettet, kan du redigere informasjon om stykket på en av to måter.

Det første du må gjøre er å klikke på Slice Select Tool, klikke på den delen du vil redigere, og deretter klikke på ikonet ved siden av Vis Auto Slices-knappen i menylinjen.

skjæring av bilder

Et annet alternativ er å høyreklikke på skiven, og i popup-menyen klikker du på Rediger skivealternativer.

skjæring av bilder

Begge valgene viser dialogboksen Slice Options.

skjæring av bilder

Som du kan se, er det mange innstillinger. Du kan endre navnet på stykket, du kan tilordne en URL til den, så når den klikkes på i nettleseren, tar den deg til et annet sted. Du kan angi målet (_blank, _self, _parent, _top), Message Tekst, Alt-tagg, Dimensjoner på stykket og mer.

hvordan male vått på vått

Lagre på nettet

Når du er fornøyd med oppsettet ditt, går du til File> Save for Web.

skjæring av bilder

Her kan du angi filtype og komprimering for hvert stykke eller gå med standardverdien som er oppført i dialogboksen Lagre for Internett. Når du er fornøyd med innstillingene dine, klikker du på Lagre-knappen.

skjæring av bilder

Dette åpner dialogboksen Lagret optimalisert som. Nederst i esken er det flere viktige innstillinger.

  • Format : Du har tre alternativer som er HTML og bilder, bare bilder og bare HTML.
  • Innstillinger : Alternativene dine er Egendefinert, Bakgrunnsbilde, Standardinnstillinger, XHTML og annet.
  • Skiver : Alternativene dine er Alle skiver, Alle brukerskiver og valgte skiver.

For denne opplæringen bruker jeg HTML og bilder, standardinnstillinger og alle skiver. Når du er fornøyd med innstillingene, velger du mappen der du vil lagre filene og klikker på Lagre-knappen. Dette oppretter en HTML-fil og lagrer alle seks bildene i en mappe.

Her er en delt skjermvisning av HTML-filen i Adobe Dreamweaver. Som du kan se, er koden grei og enkel å bruke.

skjæring av bilder

Konklusjon

Som du kan se, er skjæring av bilder nyttig hvis du har et stort bilde. Ved å dele den inn i seksjoner, vil deler av bildet begynne å lastes inn først, slik at brukeren får vite mer som kommer. Dette er nyttig for brukere med langsom tilkobling.

For mer informasjon, ta en titt på følgende artikler:

Ord : Nathan Segal

hvordan man tegner en ulvehale