Hva er utdragsaktiver
Den nye Trekk ut eiendeler funksjonen til Photoshop CC 2014 stropper en etterbrenner på den ellers kjedelige arbeidsflyten av bildeopprettelse for Responsive Web Design (RWD). La oss se på hvordan kommandoen Extract Assets raskt kan redusere en nettside sammen med forsamlingsberedte eiendeler om et par minutter.
La oss starte med et åpenbart spørsmål: Hva er utdragsaktiver?
Enkelt sagt er Extract Assets en ny funksjon i Photoshop som gir Photoshop Generator-funksjonen med et grensesnitt for å automatisere opprettelsen av bildebehandlingsmuligheter for web- og skjermdesign fra Photoshop-filene dine. Kommandoen Extract Assets lar deg definere hvilket lag eller lag du vil opprette eiendeler for, deres fysiske størrelse, filformat og lagrede plassering på disk. Denne funksjonen er ikke ment for tekst, med mindre hensikten er å slå teksten til en bitmap, noe som egentlig ikke er en god idé.
La oss begynne.
02 av 08Åpne en Photoshop .psd-fil
Eksemplet jeg bruker inneholder et smart objekt fra Illustrator, litt tekst, en helt-enhet som inneholder tekst, et bilde og en knapp og en serie utendørs bilder som forsterker temaet til nettstedet. Nøkkelen her er å organisere lagene i grupper. Dette er nødvendig fordi oppgaven er å trekke alle disse elementene ut av kompiset slik at de raskt kan legges til weboppsett som tilpasser seg varierende skjermoppløsninger og størrelser.
To måter å trekke ut eiendeler
I motsetning til Generere, som også trekker ut objekter gjennom tillegg av en grafisk forlengelse til lagnavnet, Trekk ut eiendeler bruker et grensesnitt som kan nås av høyreklikke et lag eller velge et lag og velgeFile> Extract Assets.
04 av 08The Extract Assets Interface
Dialogboksen Utdragsaktiver er ganske intuitiv. Du er vist laget eller valget som skal utvinnes. Over det vises filstørrelsen og under det er kontroll som lar deg zoome inn og ut på objektet. Den høyre siden av dialogboksen er hvor magien skjer. De fire knappene øverst lar deg velge oppløsning / størrelse på objektet. Neste stripe viser deg det valgte laget og klikker på + skilt kan du også sende det valgte laget i et annet format. De Søppel Ca n fjerner laget fra køen. I neste stripe ned, kan du velge filtype og du kan justere bredden og høyden på utdatabildet.
05 av 08Utvinning av et SVG-bilde
Photoshop håndterer ikke SVG-bilder alt så bra, og nettlesere og enheter kan ikke vise et Illustrator-bilde. Dette har resultert i oppveksten av svg-filer som brukes til vektorgraver som Illustrator-logoen vist her. Å være vektorer er deres oppløsning enhetsuafhængig, noe som betyr at de kan skaleres uten tap av detalj eller bilde. For å konvertere Illustrator Smart Object til SVG, velg svg fra pop ned og klikk Ekstrakt.
06 av 08The Extract Assets Process
Et par ting vil skje når du klikker på Utdrag-knappen. Du blir først advart filnavnet kan endres. Dette er ikke et stort problem. Da vil du bli fortalt at en ny mappe blir opprettet for å holde aktiva. Når prosessen er ferdig, åpnes mappen, plassert på samme sted som den originale .psd-filen, og viser den nye aktiva.
07 av 08Innstillinger-knappen er din nye beste venn
Klikk på innstillinger knappen åpner a Innstillinger dialogboksen det er veldig nyttig. Innstillingene til venstre er skaleringsfaktorene. Det de gjør er å lage de forskjellige kopier av bildet som en utvikler vil bruke i medieforespørsmålene for å målrette mot en bestemt enhetens skjermoppløsning. For eksempel vil 3x-versjonen være målrettet mot en iPhone eller iPad Retina-skjerm, mens en 1,25-faktor vil bli pekt på en Android-enhet. Suksessen er lagt til slutten av filnavnet slik at utvikleren din enkelt kan identifisere bildet som skal brukes i en medieforespørsel. Når du er ferdig, klikker du på OK knappen og valgene dine vil lyse opp i området Ekstrautstyr i dialogboksen. Du kan også få tilgang til innstillingen ved å klikke på tannhjulikonet i Utdragsutstyr-området over på høyre side av grensesnittet
08 av 08Etterbehandling
Når du klikker Utdrag-knappen, vil alle eiendelene bli opprettet og lagt til i mappen. På dette punktet er alt du trenger å gjøre, å sende utvikleren en kopi av mappen og gå videre til ditt neste prosjekt.