Wat is Activa uitpakken
De nieuwe Activa uitpakken functie van Photoshop CC 2014 zorgt voor een nabrander op de anders moeizame workflow van het maken van afbeeldingen voor Responsive Web Design (RWD). Laten we eens kijken hoe de opdracht Extract Assets een webpagina comp snel kan reduceren tot assemblage gereedschappen in een paar minuten.
Laten we beginnen met een voor de hand liggende vraag: wat is uittreksel activa?
In eenvoudige bewoordingen is Extract Assets een nieuwe functie in Photoshop die de Generator-functie van Photoshop voorziet van een interface om het maken van beeldmateriaal voor web- en schermontwerp vanuit uw Photoshop-bestanden te automatiseren. Met de opdracht Extract Assets kunt u opgeven voor welke laag of lagen u items wilt maken, hun fysieke grootte, bestandsindeling en opgeslagen locatie op schijf. Deze functie is niet bedoeld voor tekst, tenzij het de bedoeling is om de tekst in een bitmap te veranderen, wat echt geen goed idee is.
Laten we beginnen.
02 van 08Open een Photoshop .psd-bestand
Het voorbeeld dat ik gebruik bevat een slim object van Illustrator, een tekst, een hero-eenheid met tekst, een afbeelding en een knop en een reeks buitenbeelden die het thema van de site versterken. De sleutel hier is het organiseren van de lagen in groepen. Dit is nodig omdat het de taak is om al deze items uit de comp te halen, zodat ze snel kunnen worden toegevoegd aan weblay-outs die zich aanpassen aan verschillende schermresoluties en -formaten.
Twee manieren om activa te extraheren
In tegenstelling tot Generate, dat ook objecten extraheert door toevoeging van een grafische extensie aan de laagnaam, Activa uitpakken maakt gebruik van een interface die bereikbaar is rechtermuisknop te klikken een laag of een laag selecteren en kiezenBestand> Activa uitpakken.
04 van 08De Extract Assets-interface
Het dialoogvenster Extract Assets is vrij intuïtief. U krijgt de laag of selectie te zien die moet worden geëxtraheerd. Hierboven ziet u de bestandsgrootte en daaronder staat een besturingselement waarmee u in en uit kunt zoomen op het object. De rechterkant van het dialoogvenster is waar de magie gebeurt. Met de vier knoppen bovenaan kunt u de resolutie / grootte van het object selecteren. De volgende strip toont de geselecteerde laag en klikt op de + teken laat je de geselecteerde laag ook in een ander formaat uitvoeren. De Trash Ca n verwijdert de laag uit de wachtrij. In de volgende strip omlaag kunt u het bestandstype kiezen en kunt u de breedte en hoogte van het uitgevoerde beeld aanpassen.
05 van 08Een SVG-afbeelding extraheren
Photoshop verwerkt svg-afbeeldingen niet zo goed en browsers en apparaten kunnen geen Illustrator-afbeelding weergeven. Dit heeft geresulteerd in de opkomst van svg-bestanden die worden gebruikt voor vectorillustraties zoals het hier getoonde Illustrator-logo. Als vectoren is hun resolutie apparaatonafhankelijk, wat betekent dat ze kunnen worden geschaald zonder verlies van detail of afbeelding. Als u het Illustrator Smart Object naar svg wilt converteren, selecteert u svg uit de pop-down en klik Extract.
06 van 08Het extract-activaproces
Er gebeuren een aantal dingen wanneer u op de knop Uitnemen klikt. U wordt eerst gewaarschuwd dat de bestandsnaam kan veranderen. Dit is geen groot probleem. Vervolgens wordt u verteld dat er een nieuwe map wordt gemaakt om het activum te behouden. Zodra het proces is voltooid, wordt de map geopend op dezelfde locatie als het oorspronkelijke .psd-bestand en wordt het nieuwe item weergegeven.
07 van 08De knop Instellingen is je nieuwe beste vriend
Klikken op de instellingen knop opent a Instellingen dialoogvenster dat is serieus nuttig. De instellingen aan de linkerkant zijn de schaalfactoren. Wat ze doen is de verschillende kopieën maken van de afbeelding die een ontwikkelaar in de mediaquery's zal gebruiken om de schermresolutie van een specifiek apparaat te targeten. De 3x-versie zou bijvoorbeeld zijn gericht op een Retina-scherm van een iPhone of iPad, terwijl een 1,25-factor op een Android-apparaat zou worden gewezen. Het achtervoegsel wordt aan het einde van de bestandsnaam toegevoegd, zodat uw ontwikkelaar gemakkelijk de afbeelding kan identificeren die in een mediaquery moet worden gebruikt. Als u klaar bent, klikt u op OK knop en uw selecties lichten op in het gebied Uitpakken activa in het dialoogvenster. U kunt de instelling ook openen door op het tandwielpictogram in het gebied Uitpakken activa aan de rechterkant van de interface te klikken
08 van 08Afronden
Wanneer u op de knop Uitnemen klikt, worden alle elementen gemaakt en toegevoegd aan de map. Op dit moment volstaat het om uw ontwikkelaar een kopie van de map te sturen en door te gaan naar uw volgende project.
