Share
Adobe Photoshop is voortdurend aan het evolueren; bij elke release worden nieuwe functies toegevoegd, terwijl bestaande functies worden verbeterd. Er is echter een gebied dat nog steeds behoorlijk achterhaald is; de manier waarop we onze ontwerpen in Photoshop snijden, is niet veranderd sinds het web op tafel was gebaseerd.
Het aanbreken van de onafhankelijkheid van de resolutie (denk aan Retina) heeft ertoe geleid dat we steeds minder op bitmaps vertrouwen voor onze websites. Weblettertypen, CSS3 en Scalable Vector Graphics zijn allemaal voorbeelden van moderne technieken die ons ervan weerhouden ons zorgen te maken over pixels. Soms moeten we nog steeds onze PSD's opsplitsen en de resulterende afbeeldingen gebruiken, maar het is tijd dat we dit op een meer verantwoorde manier doen.
Voer Cut & Slice me in, een CS6-invoegtoepassing ontwikkeld door Daniel Peruho. Cut & Slice me heeft als doel het moderne snijproces te versnellen en biedt veel krachtige functies. Het is gratis, het is gemakkelijk te gebruiken en het werkt.
Sommige van de dingen die het biedt, zijn het nemen van een groep lagen en het behandelen ervan als een enkel object. Vervolgens worden alle overbodige pixels bijgesneden en wordt de groep geëxporteerd als een afbeeldingsbestand. Wanneer u knoppen ontwerpt, kunnen de lagen automatisch worden gesegmenteerd volgens de indeling die de plug-in vereist. Wil je meer weten? Laten we erin duiken.
Om te beginnen moet u eerst Photoshop CS6 gebruiken. U moet dan de plug-in op uw computer geïnstalleerd hebben. Ga naar de startpagina van Cut & Slice me en download de nieuwste versie van de plug-in. Download ook het voorbeeldbestand dat we zullen gebruiken om te demonstreren hoe de plug-in werkt.
Dubbelklik na het downloaden op het bestand CutAndSliceMe.zxp om de installatie van de plug-in te starten. Wanneer Adobe Extension Manager wordt weergegeven, volgt u gewoon de instructies.
Start Photoshop en kies Venster> Extensies> Knip en plak me. U zou nu het paneel "Cut & Slice me" kunnen zien.
Pak vervolgens het bestand CutAndSliceMe_sample.zip uit en open het voorbeeldbestand. Je zou het volgende moeten zien:
Dit is een mobiel ontwerp met de juiste benaming van lagen volgens de vereisten van de plug-in. Binnenkort zullen we zien hoe het werkt, maar voordat we dat doen, zijn er een paar dingen waar je op moet letten:
Zorg ervoor dat de knop met het iPhone-pictogram is geselecteerd en klik vervolgens op Knip alle activa. Wanneer het slicen klaar is, navigeer dan naar de map met voorbeeldbestanden en open de map "CutAndSlice_sample_iPhone_assets" die automatisch door de plug-in wordt aangemaakt.
U ziet elk activum in twee maten; één voor Retina (wat eigenlijk de volledige resolutie is die in je PSD-bestand wordt gebruikt) en een andere die de verkleinde versie van het origineel is.
Laten we nu onze oefening herhalen, deze keer exporteren voor Android. Wijzig de modus van de plug-in door op de knop met Android-pictogram te klikken en klik vervolgens op Knip alle activa nog een keer. Deze keer wordt de map "CutAndSlice_sample_Android_assets" gemaakt met vier submappen; één voor elke activagrootte. De maat die we oorspronkelijk hebben ontworpen, is te vinden in de xhdpi map, alle andere assets worden verkleinde versies hiervan.
Nu we ongeveer hebben gezien wat de plug-in doet, is het tijd om uit te zoeken hoe het werkt.
Het belangrijkste aspect om te overwegen is laag organiseren, in termen van naamgeving en groepering. Organiseer uw elementen in groepen, alsof het objecten waren. Voeg vervolgens toe @ aan het einde van alle groepsnamen die u wilt exporteren en klik ten slotte op Knip alle activa. De inhoud van elke groep wordt geëxporteerd als een PNG-bestand, waarbij alle transparante pixels worden bijgesneden.
Notitie: Voor de prestaties controleert Cut & Slice me alleen groepsnamen, dus om te worden geëxporteerd, moeten je lagen zich in een groep bevinden.
Soms wilt u misschien niet alle items exporteren; je wilt misschien alleen de items exporteren die je in een bepaalde groep hebt gezet. Als dit het geval is, klikt u gewoon op Snijd subgroepen en Cut & Slice me zal al jouw exporteren @ lagen binnen de geselecteerde groep.
Als u slechts één enkele of enkele laag wilt snijden, selecteert u deze en klikt u op Geselecteerd knippen.
Ten slotte hebben we bij het omgaan met knoppen vaak meerdere statussen. Om ze correct te kunnen exporteren, moet je groepen toevoegen met je verschillende knoptoestanden, en ze als volgt noemen:
Accentsconagua
normaalzwevengeklikt / geperstgekozeninvalidePlaats deze groepen vervolgens in een andere groep met _BTN toegevoegd aan zijn naam. Merk op dat de _BTN achtervoegsel kan worden gebruikt met elk element dat toestanden heeft.
Voorbeelden van knoppen met verschillende statussen. Zoals eerder vermeld, knipt Cut & Slice me bitmaps op een scherpe manier en verwijdert alle omringende transparante pixels die u niet wilt. Maar wat gebeurt er wanneer u wilt dat alle toestanden van uw knoppen even groot zijn? In dit geval kunt u een rechthoekige vectorlaag gebruiken, genaamd #, helemaal bovenaan uw groep, die het gebied vertegenwoordigt dat u wilt exporteren. Uw groep wordt geëxporteerd naar de grootte van de vectorvorm, zonder de vectorlaag zelf te exporteren. Dit is geldig voor alle groepen, niet alleen voor knoppen. De plug-in gebruikt een vectorlaag voor deze functie omdat als de Klik op vectorgereedschappen en transformeert naar pixelraster optie is aangevinkt, zoals ik hierboven al zei, je vectorvorm zal pixel perfect zijn zonder vage randen.
Selecteer de laag onmiddellijk hieronder om dit proces te testen login_BTN groep. Stel dan in ondoorzichtigheid tot 100% en Vullen tot 40%. Nu kunt u de vorm boven de knop zien. Wijzig de grootte naar wens en exporteer deze. Open nu de map met items en controleer de grootte van de geëxporteerde knop. Het moet de grootte zijn die u zojuist hebt gedefinieerd.
We hebben nu een goed begrip van hoe we de plug-in kunnen gebruiken, dus het is tijd om het in de echte wereld te testen. Hier ga ik je niet leren hoe je een websitemalplaatje vanuit het niets kunt ontwerpen, maar gebruik ik een vooraf gemaakte sjabloon om je te laten zien hoe je je lagen de juiste naam geeft en organiseert.
Laten we beginnen met het downloaden van deze gratis websitemal van CSS Author. De sjabloon heeft een webversie en een mobiele versie. Download beide en open vervolgens de webversie van de sjabloon.
Je merkt misschien al dat de naamgeving en structuur van de lagen ver afstaat van wat we nodig hebben. We moeten wat herschikken en hernoemen om te voldoen aan de vereisten van de plug-in. In de volgende schermafbeelding ziet u een vergelijking van de lagenstructuur vóór en na onze bewerkingen. Verander je lagen (in rood) zodat ze overeenkomen met die aan de rechterkant (groen).
Lagenvergelijking vóór (rood) en na (groen) Bij deze gelegenheid willen we exporteren voor internet, dus verander de modus door op de knop met het Monitor-pictogram te klikken en vervolgens op te klikken Knip alle activa. De volgende schermafbeelding laat zien wat u zou moeten zien. Als uw weergave anders is, controleert u uw lagen op eventuele fouten en probeert u het opnieuw.
Gefeliciteerd! Je hebt zojuist je eerste ontwerp succesvol gesneden. Voor verdere oefening, open en plak de mobiele versie van de sjabloon.
In dit geval, wanneer u het bestand bewerkt, exporteert u voor iPhone en Android en controleert u of alles correct is. Als dat zo is, bent u klaar om dit naar een hoger niveau te tillen en uw eigen ontwerp in te delen.
U hebt waarschijnlijk gemerkt dat bij het exporteren van onze assets we veel PNG-bestanden hebben gevonden. En zoals we weten, betekent het trekken van meer individuele afbeeldingsbestanden van een webserver meer HTTP-verzoeken, waardoor de weergave van uw webpagina's wordt vertraagd. Om het probleem op te lossen, kunt u overwegen al uw PNG's (of sommige) in een spritebestandsbestand te veranderen.
Gelukkig is dit tegenwoordig een gemakkelijke taak en er zijn veel manieren om het te benaderen. Er zijn veel online tools die kunnen helpen met het proces. Bekijk de volgende sprite-generators:
... kijk welke het beste bij u past.
Tot zover goed, maar er is nog een ding dat we moeten benadrukken. Met technologieën zoals CSS3 en SVG vertrouwen we niet alleen meer op afbeeldingen. We kunnen nu eenvoudig SVG-pictogrammen of CSS3-gevoede knoppen gebruiken in onze ontwerpen. Het grote voordeel van het gebruik van SVG- en CSS3-afbeeldingen is dat ze resolutie-onafhankelijk zijn en zeer goed werken binnen een responsief ontwerp. U kunt deze ook rechtstreeks in uw code wijzigen en aanpassen zonder dat u de beeldeditor hoeft te gebruiken. Maar wacht! Dit betekent niet dat afbeeldingen volledig ongepast zijn. Ze kunnen nog steeds worden gebruikt voor foto's, complexe grafische elementen en grafische elementen, enzovoort. CSS3 en SVG zijn geweldig, maar browserondersteuning is nog niet helemaal betrouwbaar, dus je moet goed opletten wanneer je ze gebruikt.
Het vermogen om onze ontwerptaken te automatiseren is uiterst belangrijk in de snel veranderende internetwereld van vandaag. Gelukkig geven tools zoals Cut & Slice me ons zo'n automatisering en besparen we enorm veel van onze tijd. Zoals u kunt zien, kunnen we met een beetje discipline wanneer we onze lagen benoemen en ordenen, zelfs complexe ontwerpen snel en eenvoudig snijden. Met slechts een paar klikken hebben we alle troeven die we nodig hebben op de juiste manier uitgesneden en klaar om gebruikt te worden.
