Ekstrakt Photoshopa: Proizvodnja mobilne grafike ide na naknadno ubacivanje

01 od 08

Što je ekstraktna imovina

Napravite komp. U Photoshopu.

Nova značajka ekstraktnih elemenata Photoshop CC 2014 remenira naknadno ubrizgavanje na inače dosadan tijek stvaranja slike za odgovorni web dizajn (RWD). Pogledajmo kako naredba Ekstraktne opreme brzo može smanjiti kompenzaciju web stranice na imovinu spremnu za montažu za nekoliko minuta.

Počnimo s očitim pitanjem: Što je izvadak imovine?

Jednostavnim riječima, značajka Ekstrakt je nova značajka u Photoshopu koja pruža Photoshopovu značajku Generator sa sučeljem koje pomaže u automatiziranju stvaranja imaging imovine za web i dizajn zaslona iz vaših Photoshop datoteka. Naredba Ekstraktni alati omogućuje vam definiranje sloja ili slojeva koje želite stvoriti, njihovu fizičku veličinu, format datoteke i spremljenu lokaciju na disku. Ova značajka nije namijenjena za tekst osim ako je namjera pretvoriti tekst u bitmapa, što zapravo nije dobra ideja.

Započnimo.

02 od 08

Otvorite datoteku Photoshop .psd

Počnimo s kompletom web stranica pripremljenom u Photoshopu.

Primjer koji koristim sadrži Smart Object iz ilustratora, nekog teksta, jedinicu heroja koja sadrži tekst, sliku i gumb te niz slika na otvorenom koji pojačavaju temu web mjesta. Ključ je ovdje organiziranje slojeva u grupe. To je neophodno jer je zadatak povući sve ove stavke iz kompakta kako bi se brzo dodali u web-izglede koji se prilagode različitim razlučivostima zaslona i veličinama.

03 od 08

Dva načina za vađenje imovine

Ekstrakt Imovina se može pronaći u izborniku Datoteka ili desnim klikom na sloj.

Za razliku od Generiraj, koji također ekstrahira objekte dodavanjem grafičkog proširenja naziva sloja, Ekstraktni alati koriste sučelje koje se može dohvatiti desnom tipkom miša na sloj ili odabirom sloja i odabirom Datoteka> Ekstraktne opcije .

04 od 08

Sučelje ekstrakcijskih sredstava

Dijaloški okvir Ekstraktne opcije.

Dijaloški okvir Ekstraktne jedinice je prilično intuitivan. Prikazuje se sloj ili odabir koji treba izdvojiti. Iznad njega prikazuje se veličina datoteka i ispod nje je kontrola koja vam omogućuje zumiranje i izlazak objekta. Desna strana dijaloškog okvira je mjesto gdje se čarolija događa. Četiri gumba na vrhu omogućuju odabir razlučivosti / veličine objekta. Sljedeća traka prikazuje odabrani sloj i klikom na znak + omogućuje vam izlaz odabranog sloja u nekom drugom formatu. Trash Ca n uklanja sloj iz reda čekanja. U sljedećoj traci dolje možete odabrati vrstu datoteke i podesiti širinu i visinu izlazne slike.

05 od 08

Izdvajanje SVG slike

Izdvajanje slike svg.

Photoshop ne obrađuje svg slike sve što dobro, a preglednici i uređaji ne mogu prikazati sliku Illustratora. To je rezultiralo usponom svg datoteka koje se koriste za vektorske radove kao što je ilustrator ovdje prikazan. Budući da su vektori, njihova rezolucija je nezavisno od uređaja što znači da se mogu skalirati bez gubitka pojedinosti ili slike. Da biste pametni objekt Illustratora pretvorili u svg, odaberite svg s pop-a i kliknite Ekstrakt .

06 od 08

Postupak ekstrakta imovine

Slike se smještaju u mapu na istom mjestu kao i .psd slika.

Nekoliko stvari će se dogoditi kada kliknete gumb Ekstrakt. Prvo ćete biti upozoreni da se ime datoteke može promijeniti. Ovo nije veliki problem. Tada će vam se reći da se stvara nova mapa za držanje imovine. Nakon završetka postupka, mapa, smještena na istom mjestu kao i izvorna .psd datoteka, otvara se i prikazuje vam novu snimljenu snimku.

07 od 08

Gumb Postavke je vaš novi najbolji prijatelj

Odgovarajuća razlučivost uređaja.

Klikom na gumb Postavke otvara se dijaloški okvir Postavke koji je ozbiljno koristan. Postavke na lijevoj strani su čimbenici skaliranja. Ono što rade jest stvoriti različite kopije slike koju će razvojni programer upotrebljavati u medijskim uputama za ciljanje određene rezolucije zaslona uređaja. Na primjer, 3x inačica bi bila usmjerena na zaslon iPhone ili iPad Retina, dok će se na Android uređaju pokazati 1,25 faktor. Sufiks dodaje se kraju naziva datoteke kako bi vaš razvojni programer lakše prepoznao sliku koja će se koristiti u medijskom upitu. Kada završite, kliknite gumb U redu, a odabiri će se zasvijetliti u području Ekstraktne stavke u dijaloškom okviru. Postavku možete pristupiti tako da kliknete ikonu zupčanika u području Ekstraktnih objekata preko desne strane sučelja

08 od 08

Završavanje

Izvučene su više slika s različitim formatima i rezolucijama.

Kada kliknete gumb Ekstrakt, sva će se sredstva stvoriti i dodati u mapu. U ovom trenutku sve što trebate učiniti jest poslati razvojnom programeru kopiju mape i prijeći na sljedeći projekt.