Share
In deze tutorial leren we hoe je objecten perfect uitlijnt en distribueert met Sketch 3. Ik ga enkele basisvoorbeelden gebruiken om de opties volledig uit te leggen, je zult verrast zijn over een aantal van hen!
Dit is misschien de gemakkelijkste techniek hier.
Kijk naar de top van de inspecteur: u ziet een paar knoppen voor uitlijning. De zes knoppen aan de rechterkant (links uitlijnen, horizontaal, rechts, boven, verticaal en omlaag) zijn voor het uitlijnen van lagen onderling, maar als u slechts één object hebt geselecteerd, wordt het uitgelijnd met het bovenliggende tekengebied. Dit is hoe het werkt:
Zoals eerder vermeld, kunt u dezelfde knoppen gebruiken als u meerdere objecten hebt geselecteerd om ze onderling uit te lijnen. Maar hoe zit het als we meerdere objecten willen uitlijnen met het tekengebied?
Als u meerdere objecten wilt uitlijnen met het tekengebied, groepeert u ze in één laaggroep. De groep fungeert als een enkel object wanneer u de knoppen Uitlijnen gebruikt.
Groepering op deze manier is echter mogelijk niet altijd geschikt voor uw situatie. Ik zal je een andere benadering laten zien.
Selecteer de lagen die u wilt uitlijnen, houd de toets ingedrukt Alt toets om ervoor te zorgen dat de uitlijnpictogrammen in het infovenster hun uiterlijk wijzigen. Nu lijnt u de lagen uit met het tekengebied! Houd er rekening mee dat je de geselecteerde lagen moet hebben binnen het tekengebied, anders is deze optie niet beschikbaar.
In het volgende voorbeeld heb ik drie verschillende lagen geselecteerd:
Dit werkt ook met Layer-groepen; wat betekent dat u meerdere lagengroepen kunt selecteren, de alt-toets ingedrukt kunt houden en ze kunt uitlijnen met het tekengebied.
Een andere situatie: ik wil alles op één object laten aansluiten. Eerst moet je begrijpen dat Schets altijd standaard wordt uitgelijnd met de buitenste laag van alle geselecteerde. Die laag wordt het "sleutelobject" genoemd.
Als gevolg hiervan zal het object dat in de verste toppositie wordt gevonden het belangrijkste object zijn om alle geselecteerde objecten op de top uit te lijnen. Hier is een voorbeeld waarbij ik drie objecten uitlijn in de positie rechtsboven (het rode vierkant is ons 'sleutelobject'):
Het zou mooi zijn als we het belangrijkste object zouden kunnen aanpassen aan het object dat we willen, toch? Dit is de truc: vergrendel de laag die u als hoofdobject wilt gebruiken,selecteer vervolgens alle lagen opnieuw. (U kunt alleen vergrendelde lagen selecteren via de lijst Lagen).
In het volgende voorbeeld is het blauwe vierkant al vergrendeld, dus het zal fungeren als ons nieuwe hoofdobject. Laten we nu de objecten opnieuw naar rechts uitlijnen:
Ik ontdekte deze handige truc dankzij SketchTips. En u kunt de Align To-plugin van Lucien Lee gebruiken om dezelfde resultaten te bereiken.
Tip: u kunt ook de align-knoppen gebruiken om meerdere vectorpunten uit te lijnen wanneer u zich in bevindt Bewerkingsmodus. Selecteer het vectorobject, dubbelklik om naar de bewerkmodus te gaan (u kunt ook het pictogram Bewerken op de hoofdwerkbalk gebruiken) en alle vectorpunten selecteren die u wilt uitlijnen.
Als we naar de bovenkant van het inspectievenster kijken, zie je dat ik de twee uitlijningspictogrammen aan de linkerkant nog niet heb genoemd. Deze knoppen dienen voor het horizontaal en verticaal verspreiden van objecten. We kunnen ze ook gelijk verdelen, wat erg handig is! Laten we zeggen dat we een paar vormen hebben geselecteerd en dat we ze graag horizontaal willen verdelen. Gebruik de Horizontaal verspreiden knop of ga naar Orden> Distribueren> Horizontaal.
De meest linkse en meest rechtse lagen blijven waar ze zijn, terwijl de lagen in het midden gelijkmatig worden verdeeld. Je kunt hetzelfde doen langs de verticale as met de Verticaal verdelen keuze.
Oké, maar wat als ik deze lagen 20px van elkaar wil hebben? Horizontaal / Verticaal verspreiden helpt hier niet.
In dit geval kunnen we de Maak Grid gereedschap (Schikken> Grid maken) Om horizontale en verticale afstanden tussen de objecten te definiëren. Misschien is het in het begin wat moeilijk te begrijpen, dus laat me je nog een geanimeerd voorbeeld tonen:
Hier wilde ik vier verschillende lagen distribueren met een onderlinge afstand van 20 px. Ik heb een raster gemaakt van één rij (om alle lagen horizontaal uit te lijnen) en vier kolommen (één kolom per laag). Daarna zet ik de marge van de kolommen op 20px om de gewenste tussenruimte te krijgen. Als ik de lagen verticaal wil verdelen, moet ik een raster maken van vier rijen (met een marge van 20 px) en een kolom.
Als u zich niet op uw gemak voelt bij het gebruik van deze methode, kunt u de SketchDistributor-plug-in proberen. Hiermee kunt u geselecteerde objecten met een opgegeven spatiëring distribueren.
Ik hoop dat je deze tutorial leuk vond. Het beheersen van de uitlijnings- en distributiehulpmiddelen in Sketch bespaart u veel tijd!
Accentsconagua