Share
Adobe Photoshop er i stadig utvikling; Nye funksjoner legges til med hver utgivelse, mens eksisterende funksjoner forbedres. Det er imidlertid et område som fortsatt er ganske utdatert; Måten vi skarer designene våre i Photoshop, har ikke endret seg siden nettet var tabellen.
Dawn of Resolution Independence (Think Retina) har betydd at vi stole mindre og mindre på bitmaps for våre nettsteder. Webfonter, CSS3 og Scalable Vector Graphics er alle eksempler på moderne teknikker som beveger oss vekk fra å bekymre seg om piksler. Noen ganger trenger vi fortsatt å kutte opp våre PSDer og bruke de resulterende bildene, men det er på tide for oss å gjøre det på en mer ansvarlig måte.
Skriv inn Cut & Slice me, et CS6-plugin utviklet av Daniel Peruho. Cut & Slice meg tar sikte på å fremskynde den moderne skiveprosessen og tilbyr mange kraftige funksjoner. Det er gratis, det er enkelt å bruke og det fungerer.
Noen av tingene som tilbys inkluderer å ta en gruppe lag og behandle den som et enkelt objekt. Det trimmer deretter alle unødvendige piksler og eksporterer gruppen som en bildefil. Når lagene er utformet, når lagene er oppkalt i henhold til formatet som kreves av pluginet, kan det automatisk skjære flere tilstander til den knappen. Er du ivrig etter å lære mer? La oss dykke inn.
For å komme i gang må du først kjøre Photoshop CS6. Du må da ha pluggen installert på maskinen din. Gå videre til Cut & Slice me hjemmeside og last ned den nyeste versjonen av plugin. Last ned også prøvefilen som vi skal bruke for å demonstrere hvordan plugin fungerer.
Når du er lastet ned, dobbeltklikker du CutAndSliceMe.zxp-filen for å utløse installasjonen av plugin. Når Adobe Extension Manager vises, følger du bare instruksjonene.
Start Photoshop og velg Window> Extensions> Cut and Slice me. Du bør nå kunne se skjermbildet "Cut & Slice me".
Deretter ekstraher du CutAndSliceMe_sample.zip-filen og åpner prøvefilen. Du bør se følgende:
Dette er en mobil design med riktig navngitte lag i henhold til pluginens krav. Kort tid ser vi hvordan det fungerer, men før vi gjør det, er det et par ting du bør være oppmerksom på:
Kontroller at knappen med iPhone-ikonet er valgt, og klikk deretter på Klipp alle eiendeler. Når skaringen er ferdig, naviger til prøvefilkatalogen og åpne mappen "CutAndSlice_sample_iPhone_assets" som automatisk opprettes av plugin-modulen.
Du vil se hvert aktiv i to størrelser; en for retina (som faktisk er den fullstendige oppløsningsstørrelsen som brukes i PSD-filen din), og en annen som er nedskalert versjon av originalen.
La oss nå gjenta øvelsen vår, denne gangen du eksporterer til Android. Endre pluginmodusen ved å klikke på knappen med Android-ikonet, og klikk deretter på Klipp alle eiendeler en gang til. Denne gangen er mappen "CutAndSlice_sample_Android_assets" opprettet med fire undermapper; en for hver aktivitetsstørrelse. Størrelsen vi opprinnelig designet er funnet i xhdpi mappe, alle andre eiendeler blir nedskalert versjoner av disse.
Nå har vi sett mer eller mindre hva plugin gjør, det er på tide å finne ut hvordan det fungerer.
Det viktigste aspektet å vurdere er lagorganisering, når det gjelder navn og gruppering. Organiser elementene dine i grupper, som om de var objekter. Legg deretter til @ til slutten av alle gruppeneavnene du vil bli eksportert, og til slutt klikke på Klipp alle eiendeler. Innholdet i hver gruppe vil bli eksportert som en PNG-fil, ved å trimme alle gjennomsiktige piksler.
Merk: For ytelses skyld Kutte og Slice meg bare kontrollerer gruppenavn, så for å bli eksportert må lagene dine være i en gruppe.
Noen ganger vil du kanskje ikke eksportere alle eiendeler; Du vil kanskje bare eksportere de eiendelene du har satt inn i en bestemt gruppe. Hvis dette er tilfelle, klikker du bare på Klipp undergrupper og Cut & Slice meg vil eksportere alle dine @ lag i den valgte gruppen.
Når du vil skille bare en enkelt gruppe eller ett lag, velg det og klikk på Klipp ut valgt.
Til slutt, når vi håndterer knapper, har vi ofte flere stater for dem. For å kunne eksportere dem riktig må du legge til grupper som inneholder de forskjellige knappestatene, og navngi dem som følger:
Accentsconagua
normalsveveklikket / pressetvalgtfunksjonshemmetSett deretter disse gruppene inn i en annen gruppe med _BTN lagt til navnet sitt. Legg merke til at _BTN suffiks kan brukes med ethvert element som har tilstander.
Eksempler på knapper med forskjellige stater. Som allerede nevnt, klipp og klipp meg avlinger bitmaps tett, fjerne alle rundt gjennomsiktige piksler du ikke vil ha. Men hva skjer når du vil at alle knappens stater skal være i samme størrelse? I dette tilfellet kan du bruke et rektangulært vektorlag, navngitt #, på toppen av gruppen din, som representerer området du vil eksportere. Din gruppe vil bli eksportert i størrelsen på vektorformen, uten å eksportere vektorglaget selv. Dette gjelder for alle grupper, ikke bare for knapper. Pluggen bruker et vektorlag for denne funksjonen fordi hvis Snap Vector Tools og Transforms til Pixel Grid Alternativet er sjekket, som jeg nevnte ovenfor, vil vektorgraden din være piksel perfekt uten uklare kanter.
For å teste denne prosessen, velg laget umiddelbart nedenfor login_BTN gruppe. Sett deretter inn opacity til 100% og Fylle til 40%. Nå vil du kunne se formen over knappen. Endre størrelsen som du ønsker og eksporter den. Åpne nå aktivitetsmappen og kontroller størrelsen på den eksporterte knappen. Det skal være størrelsen du nettopp har definert.
Vi har nå en solid forståelse av hvordan vi kan bruke plugin, så det er på tide å teste det i den virkelige verden. Her kommer jeg ikke til å lære deg hvordan du designer en nettsidemal fra grunnen, i stedet bruker jeg en ferdigmalte mal for å vise deg hvordan du kan navngi og organisere lagene dine riktig.
La oss begynne med å laste ned denne gratis nettsiden mal fra CSS Author. Malen har en webversjon og en mobilversjon. Last ned begge, og åpne deretter webversjonen av malen.
Du kan allerede merke at lagring og lagring av lagene er langt fra det vi trenger. Vi må utføre noen omarrangering og omdøpe for å kunne oppfylle pluginets krav. I følgende skjermbilde kan du se en sammenligning av lagstrukturen før og etter våre endringer. Endre lagene dine (i rødt) for å matche dem til høyre (grønn).
Lager sammenligning før (rød) og etter (grønn) Ved denne anledningen vil vi eksportere for web, så endre modusen ved å klikke på knappen med skjermikonet og klikk deretter på Klipp alle eiendeler. Følgende skjermbilde viser hva du bør se. Hvis visningen din er forskjellig, kontroller lagene dine for eventuelle feil og prøv igjen.
Gratulerer! Du har bare skåret din første design med hell. For videre øvelse, åpne og skjær mobilversjonen av malen.
I dette tilfellet, når du redigerer filen, eksporterer du til iPhone og Android og kontrollerer om alt er riktig. I så fall er du klar til å ta dette til neste nivå og skjære ditt eget design.
Du har sikkert lagt merke til at når du eksporterer våre ressurser, har vi endt opp med mange PNG-filer. Og som vi vet, danner flere individuelle bildefiler fra en webserver flere HTTP-forespørsler, og senker gjengivelsen av websidene dine. For å løse problemet kan du vurdere å slå alle PNG-ene dine (eller noen av dem) til en enkelt bilde sprite-fil.
Heldigvis er dette en enkel oppgave i disse dager, og det er mange måter å nærme seg. Det er mange elektroniske verktøy som kan hjelpe deg med prosessen. Ta en titt på følgende sprite generatorer:
... se hvilke som passer best til dine behov.
Så langt så bra, men det er en ting vi må påpeke. Med teknologier som CSS3 og SVG stoler vi ikke bare på bilder lenger. Vi kan nå enkelt bruke SVG-ikoner eller CSS3-drevne knapper i våre design. Den største fordelen ved å bruke SVG- og CSS3-grafikk er at de er oppløsningsoberoende og fungerer veldig bra i en responsiv design. Du kan også endre og justere dem rett i koden din uten å måtte bruke bilderedigerer. Men vent! Dette betyr ikke at bildene er helt upassende. De kan fortsatt brukes til bilder, komplekse grafikk og grafiske elementer, og så videre. CSS3 og SVG er flotte, men nettleserstøtte er ikke helt pålitelig ennå, så du må være oppmerksom når du bruker dem.
Evnen til å automatisere våre designoppgaver er svært viktig i dagens raskt skiftende webverden. Heldigvis gir verktøy som Cut & Slice meg bare slik automatisering og sparer enorm tid. Som du kan se, med litt disiplin når vi navngir og organiserer våre lag, kan vi raskt og enkelt skille komplekse motiver. Med bare noen få klikk har vi alle eiendelene vi trenger riktig kuttet og klar til bruk.
