Retina-Friendly Photoshop Kutting Med "Cut &Slice Me"
Adobe Photoshop er i stadig utvikling; nye funksjoner er lagt med hver utgivelse, mens eksisterende funksjoner er forbedret. Det er, imidlertid, et område som fremdeles er helt foreldet; måten vi skjære våre design i Photoshop har ikke endret seg siden nettet var tabellbasert.
Begynnelsen av oppløsning uavhengighet (tror Retina) har ført til at vi er avhengig mindre og mindre på punktgrafikk for våre nettsteder. Web fonter, CSS3 og Scalable Vector Graphics er alle eksempler på moderne teknikker som beveger oss bort fra å bekymre piksler. Noen ganger gjør vi fortsatt trenger å skjære opp våre PSD og bruke de resulterende bildene, men det er på tide for oss å gjøre det på en mer forsvarlig måte.
Enter Cut &Slice meg, en CS6 plugin utviklet av Daniel Peruho. Kutt & Slice meg som mål å øke hastigheten på moderne slicing prosessen og har mange kraftige funksjoner. Det er gratis, det er lett å bruke og det fungerer.
Noen av de tingene som tilbys inkluderer å ta en gruppe av lag og behandle det som ett enkelt objekt. Det skjærer så alle unødvendige piksler og eksporterer den gruppen som en bildefil. Ved utforming knapper, når lagene er navngitt i henhold til formatet som kreves av plugin, kan det auto-skjær flere stater av den knappen. Ivrig etter å lære mer? La oss dykke i.
Komme i gang
For å komme i gang, vil du først må kjøre Photoshop CS6. Du må deretter å ha plugin installert på din maskin. Hodet på over til Cut &Slice meg hjemmesiden og laste ned den nyeste versjonen av plugin. Også laste ned eksempelfilen som vi skal bruke til å demonstrere hvordan fungerer plugin.
Når lastet ned, dobbeltklikker du på CutAndSliceMe.zxp filen for å utløse plugin installasjon. Når Adobe Extension Manager dukker opp, bare følg instruksjonene
Start Photoshop og velg Vindu >.; Extensions > Klipp og Slice meg. Du skal nå kunne se "Cut & Slice meg". Panelet
Deretter trekke ut CutAndSliceMe_sample.zip fil og åpne eksempelfilen. Du bør se følgende:
Dette er en mobil design med riktig navngitte lag i henhold til plugin krav. Kort tid, vi får se hvordan det fungerer, men før vi gjør det er det et par ting du bør være klar over: Pass på at knappen med iPhone-ikonet er valgt, og klikk deretter på Klipp Alle eiendeler. Når kutting er gjort, går du til eksempelfilen katalogen og åpne "CutAndSlice_sample_iPhone_assets" -mappen som opprettes automatisk av plugin Du vil se hver eiendel i to størrelser.; en for Retina (som faktisk er det full oppløsning størrelsen som brukes i PSD-fil), og en annen som er nedskalert versjon av den opprinnelige. Nå la oss gjenta vår øvelse, denne gangen eksport for Android. Endre plugin-modus ved å klikke på knappen med Android-ikonet, klikk deretter på Klipp Alle eiendeler igjen. Denne gangen "CutAndSlice_sample_Android_assets" mappe vises med fire undermapper; en for hver eiendel størrelse. Størrelsen vi opprinnelig laget kan bli funnet i xhdpi mappen, alle andre eiendeler blir skalert ned versjoner av disse. Nå har vi sett mer eller mindre hva plugin gjør, er det på tide å finne ut hvordan det fungerer. det viktigste å vurdere er laget organisering, i form av navngiving og gruppering. Organiser elementene i grupper, som om de var stedene. Deretter føyer @ til enden av alle gruppenavnene du ønsker å bli eksportert, og til slutt klikk på Klipp Alle eiendeler. Innholdet i hver gruppe vil bli eksportert som en PNG-fil, trimming alle gjennomsiktige piksler Merk:. For å få til ytelsen Cut & Slice meg bare sjekker gruppenavn, så for å bli eksportert ditt lag må være i en gruppe Noen ganger vil du kanskje ikke ønsker å eksportere alle eiendeler.; vil du kanskje ønsker å eksportere bare de ressursene du har satt inne i en bestemt gruppe. Hvis dette er tilfelle bare klikk på Cut Undergrupper og Cut &. Slice meg vil eksportere alle dine @ lag inni den valgte gruppen Når du ønsker å dele bare en enkelt gruppe eller enkelt lag, velg det og klikk på Cut valgt. til slutt, når du arbeider med knapper vi har ofte flere stater for dem. For å eksportere dem ordentlig må du legge til grupper med ulike knappetilstander, navngi dem som follows: Then sette disse gruppene inne i en annen gruppe med _BTN lagt til navnet. .. Merk at _BTN suffiks kan brukes med alle element som har tilstander Som allerede nevnt, Cut & Slice meg avlinger bitmaps tett, fjerne alle omkringliggende gjennomsiktige punkter du ikke vil ha. Men hva skjer når du vil at alle dine knappens stater til å være av samme størrelse? I dette tilfellet kan du bruke en rektangulær vektor lag, oppkalt #, på toppen av gruppen, som representerer det området du vil eksportere. Gruppen vil bli eksportert på størrelsen på vektoren form, uten å eksportere vektoren laget selv. Dette gjelder for alle grupper, ikke bare for knapper. Den plugin bruker en vektor lag for denne funksjonen fordi hvis Snap Vector Verktøy og Transforms være Pixel alternativet Grid er krysset av, som jeg nevnte ovenfor, din vektor form vil være pixel perfekt uten uskarpe kanter. For å teste dette prosessen, velger du laget rett under login_BTN gruppe. Deretter satt Opacity til 100% og fyll opp til 40%. Nå vil du kunne se formen over knappen. Endre størrelsen som du ønsker og eksportere den. Nå åpner eiendeler mappen og sjekke størrelsen på eksportknappen. Det bør være den 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 den i den virkelige verden. Her kommer jeg ikke til å lære deg hvordan å designe en nettside mal fra grunnen av, i stedet jeg vil bruke en pre-laget mal for å vise deg hvordan å navngi og organisere lagene skal. La oss starte ved å laste ned denne gratis nettsted mal fra CSS Forfatter. Malen har en web-versjon og en mobil versjon. Last ned begge, og deretter åpne nettversjonen av malen. Du kan allerede merke at navngiving og struktur av lagene er langt fra det vi trenger. Vi må gjennomføre noen omorganisere og gi nytt navn for å møte den plugin krav. I det følgende skjermbildet kan du se en sammenligning av lagstruktur før og etter våre redigeringer. Endre dine lag (i rødt) for å matche de på høyre (grønn). I den anledning ønsker vi å eksportere til web, så endrer modus ved å klikke på knappen med Monitor-ikonet og klikk deretter på Klipp Alle eiendeler. Følgende skjermbilde viser hva du bør se. Hvis visningen er forskjellig, sjekk lag for eventuelle feil og prøv igjen. Gratulerer! Du har nettopp skiver din første design vellykket. For ytterligere praksis, åpen og skjær den mobile versjonen av malen. I dette tilfellet, når du redigere filen, eksport for iPhone og Android, og sjekke om alt er riktig. Hvis ja, er du klar til å ta dette til neste nivå og skjær ditt eget design. Du vil sannsynligvis ha lagt merke til at når eksportere våre eiendeler vi har endt opp med en mange PNG-filer. Og, som vi vet, trekke flere enkeltbildefiler fra en webserver betyr flere HTTP-forespørsler, sakker gjengivelsen av websidene dine. For å løse problemet kan du vurdere å slå alle dine PNG (eller noen av dem) til ett enkelt bilde sprite fil. Heldigvis er dette en enkel oppgave i disse dager, og det er mange måter å nærme seg den. Det er mange verktøy på nettet som kan hjelpe 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 trenger å påpeke. Med teknologier som CSS3 og SVG vi ikke stole utelukkende på bilder lenger. Vi kan nå enkelt bruke SVG ikoner eller CSS3-drevne knappene i våre design. Den store fordelen med å bruke SVG og CSS3 grafikk er at de er oppløsning-uavhengig og fungerer svært godt innenfor en forståelsesfull design. Du kan også endre og justere dem rett i koden din, uten behov for å bruke bilderedigeringsprogram. Men vent! Dette betyr ikke betyr at bildene er helt upassende. De kan fortsatt brukes for bilder, kompleks grafikk og grafiske elementer, og så videre. CSS3 og SVG er stor, men leseren støtter ikke er helt pålitelig ennå, så du må være oppmerksom når du bruker dem. Muligheten til å automatisere designoppgaver er svært viktig i dagens raskt skiftende web verden. Heldigvis verktøy som Cut & Slice meg gi oss nettopp en slik automatisering og spare enormt mye av vår tid. Som du kan se, med litt disiplin når vi navn og organisere våre lag, kan vi skjære selv komplekse design raskt og enkelt. Med bare noen få klikk har vi alle de ressurser vi trenger riktig kuttet og klar til å brukes.
For det første må du gå til Generelt i Preferences panel og sjekke Snap Vector Verktøy og Transforms være Pixel alternativet Grid (du vil se hvorfor litt senere).
for det andre er det viktig å forstå helt fra begynnelsen at du må designe for den høyeste oppløsningen. Dette er hinnen
for Apple-enheter og xhdpi
for Android-enheter (i begge tilfeller effektivt x2). Dette er fordi plugin tar størrelsen på motivet så full oppløsning, eksportere den til forskjellige størrelser ved å skalere ned
Også når Cut &. Slice meg eksporterer til iPhone og Android, alle tegn som ikke støttes i filnavnet blir fjernet.
The Plugin in Action
Hvordan fungerer det
Slicing Ulike States
normal
hover
clicked/pressed
selected
disabled
Eksempler på knapper med ulike tilstander
Definere Asset Størrelser
A Real World Eksempel
Layers sammenligning før (rød) og etter (grønn)
Sprites
CSS Sprites
SpridePad
sømmer
Konklusjon