Share
Wat je gaat creërenDeze tutorial laat je zien hoe je een stijlgids organiseert met Sketch. Bovendien leert het je een aantal basisvaardigheden voor het gebruik van Sketch in andere situaties. We zullen alles bespreken, van het opzetten van typografie, het gebruik van verschillende rastertypes, tot de beste werkwijzen voor het gebruik van "symbolen" en "gedeelde stijlen".
Het instellen van herbruikbare typestijlen in Sketch bespaart u veel tijd. Met de teksttool geselecteerd, ziet u een klein vak aan de rechterkant van de app waarmee u alle soorten tekststijlen kunt instellen, zoals lettertypefamilie, lettertype en zelfs tekenafstand.
Laten we kijken hoe we het kunnen gebruiken in ons eigen stijladgidsdocument.
Elke keer als ik met typografie werk, vind ik het leuk om echte kopie te gebruiken (in tegenstelling tot generieke kopieën). Ik denk dat het de ontwerpervaring gemakkelijker maakt en het geeft het eindresultaat meer context en echte stem.
Begin met de verschillende tekstsoorten die uw ontwerp zal hebben. In dit bestand hebben we vier rubrieken, geen zes, omdat we niet zoveel nodig hebben.
Notitie: Elk hiervan is een afzonderlijk tekstobject.
Het is raadzaam om lagen in de juiste volgorde te plaatsenHet eerste item dat moet worden ontworpen, is de subtitel, die bij de H1 hoort, maar daarover later meer. Sketch heeft geen instelling om het karakter "case" te dicteren, dus om de subkop in hoofdletters te krijgen, moet ik deze handmatig invoeren.
Doe dit waar relevant voor elk tekstelement dat je hebt. Maak u geen zorgen over de spatiëring van het tekengebied, maar we zullen dat later bespreken.
U kunt op twee manieren herbruikbare tekststijlen maken. Selecteer eerst een tekst met de gewenste stijl en klik vervolgens op Geen tekststijl van boven de type-instellingen aan de rechterkant. Selecteer vervolgens Maak een nieuwe tekststijl vanaf de stop naar beneden.
Notitie: Om deze stijlen over te zetten naar anders bestanden kopiëren en plakken de gewenste tekstobjecten en de stijlen worden automatisch overgedragen.
De tweede manier om een tekststijl in Sketch te maken, is door de nieuwe tekststijl in de vervolgkeuzelijst te maken, zoals u hierboven hebt gezien, en vervolgens de stijl voor die stijl toe te voegen. Het doet er niet toe welke eerst komt. Wat er wel toe doet is dat u begrijpt dat elke wijziging in de stijl van een tekststijl van invloed is op alle andere tekstelementen die die stijl gebruiken. Daarom, als ik de kleur van de Mini-titel veranderde, zou dit deze wijziging van elk afzonderlijk item weerspiegelen.
Er is geen eenvoudige manier om de stijl aan te passen voor verschillende schermformaten. Mijn huidige werk bestaat uit het maken van afzonderlijke tekststijlen voor mobiele schermen naast mijn bureaubladstijlen.
Er zijn drie referenties voor metingen in Sketch: grid, layout en ruler. Laten we ze alle drie heel snel bekijken en zien hoe ze moeten worden gebruikt. Als dat klaar is, praten we erover om ze te gebruiken voor het instellen van de lay-out van je pagina.
Druk op om de weergave van de liniaal te wisselen ctrl + R (makkelijk te onthouden). Linialen mogen niet worden gebruikt als hoofd vorm van raster in Sketch, de andere twee opties zijn daar veel beter geschikt voor. Gebruik de liniaal om dingen uit te lijnen of om de uitlijning te controleren zoals in de onderstaande schermafbeelding.
Net als bij de liniaal, druk op om de rasterweergave in te schakelen ctrl + G. Het raster is een systeem van vierkanten waarvan je de kant van kunt aanpassen. Ik gebruik ze voor indelingen die niet noodzakelijkerwijs bij een standaard gecentreerde webpaginastijl blijven. Het mooie aan het raster in Sketch is dat het het hele tekengebied beslaat (als u het tekengebied vergroot, wordt het raster groter).
U kunt de grootte van de rastereenheden instellen als alles. U kunt ook een reeks rijen markeren, de standaardinstelling is elke 10.
Om de lay-out in te schakelen, drukt u op (raden) ctrl + L. Dit is een beetje ingewikkelder in termen van alle verschillende gegevenspunten die u moet opgeven, maar u krijgt wel een perfect aangepast lay-outraster; perfect voor het ontwerpen van websites!
Ons raster is gebaseerd op eenheden van 30px, dus alle getallen die u in de onderstaande schermafbeelding ziet, geven dat weer. Als u eenmaal weet wat uw raster is, voert u het in in opmaak instellingen.
Als u niet weet wat uw raster moet zijn, gebruik dan de opmaak instellingen om te spelen - het houdt de verhoudingen bij en herberekent alles voor je. Stel dat ik bijvoorbeeld wil dat mijn lay-out elf kolommen gebruikt in plaats van twaalf, maar de totale breedte behouden blijft. Als ik het aantal kolommen verminder, geeft Sketch me bijgewerkte kolom- en gootbreedten. Speel rond en kijk wat er gebeurt.
De keerzijde met rasters in Sketch is dat u geen nieuw raster voor nieuwe tekengebieden kunt hebben. Misschien is dat een goede zaak, maar het is niet hoe ik de neiging heb om te werken. Als ik twee kunstborden naast elkaar heb, waarvan één voor desktops en de andere voor mobiel, is het onmogelijk om er tegelijkertijd aan te werken. Dit is waar Pages goed van pas komen. Als je hebt Lagenlijst Bekijk open, je kunt bovenaan iets zien dat wordt genoemd Pages.
Pagina's zijn erg handig, omdat ze een extra ontwerplaag binnen één document toelaten. U kunt raster en opmaak binnen de pagina's wijzigen en ze blijven alleen binnen die pagina hetzelfde.
Je hebt misschien in mijn screenshots gemerkt dat mijn typografie niet is uitgelijnd met de rasterlijnen. Het hebben van rasterlijnen betekent niet dat dingen die er eerder waren, op magische wijze uitlijnen. Wanneer u de plaatsing van uw rasters wijzigt, moet u uw items hierop afstemmen. Typografie is anders omdat het niet begint of eindigt waar het gebied van het hele element zich bevindt. U kunt de basislijn van typografie plaatsen zoals u wilt in relatie tot het raster. Het is aan jou. Ik leg het op de top van de regels. Dus laat me het voor u uitlijnen.
Zoals je ziet, wordt de mobiele alinea niet uitgelijnd; de lijnhoogte is 24 px. Het heeft daarom een eigen pagina- en rasterlay-out nodig. Maar met het oog op deze walkthrough kan het verkeerd uitgelijnd blijven.
Laten we eens kijken hoe u kleuren in Sketch kunt opslaan, zodat u ze opnieuw kunt gebruiken.
Laten we zeggen dat ik een rij paars wil toevoegen om als accenten in dit ontwerp te gebruiken. Ik kopieer en plak de groene rij en kies een paarse. Om dingen veel sneller te maken, heb ik gekozen voor de lichtere tinten paars door de dekking van de originele kleuren te wijzigen in respectievelijk 70%, 50% en 20%.
Wat u vervolgens doet om de kleur te krijgen, is het hulpmiddel Colour Eyedrop gebruiken en de nieuwe tint selecteren. Vergeet niet om de dekking weer op 100% te zetten.
Gebruik vervolgens de kleine + onder aan de kleurstalen om de kleur op te slaan in het palet van Sketch. Het verschil tussen Wereldwijde kleuren en Documentkleuren is zoals hun naam doet vermoeden, wordt Global Colors in Sketch opgeslagen om opnieuw te gebruiken in alle andere Sketch-bestanden die u opent, terwijl documentkleuren alleen binnen dat specifieke document blijven.
Ik heb een aantal eenvoudige gebruikersinterface-elementen in mijn Sketch-bestand.
Ik bewaar ze hier zodat ik snel degene die ik nodig heb kan kopiëren naar de nieuwe ontwerpen waar ik aan werk. Ik ga je laten zien hoe je gedeelde stijlen en symbolen kunt maken voor hergebruik.
Gedeelde stijlen zijn de stijlen die u opnieuw kunt gebruiken. De actieve / gefocusseerde invoer bestaat bijvoorbeeld uit drie componenten, de labeltekst, de invoertekst en het invoervak.
De rechthoek heeft een specifieke stijl, een witte achtergrond, een blauwe pixelrand met één pixel en een lichtblauwe binnenschaduw. Dat is iets dat herbruikbaar is als u op meerdere ingangen werkt.
Aan de rechterkant boven alle styling die ik zojuist heb beschreven, zie je tekst die zegt Geen gedeelde stijl. U kunt deze stijlkenmerken op dezelfde manier opslaan als de tekststijlen voor onze koppen. Bewaar het en hergebruik het zoveel als je wilt. Maar vergeet niet dat als je een bepaald aspect van de opgeslagen stijl in de toekomst verandert, dit van invloed is op elk element dat die stijl deelt.
Ik gebruik deze functie voor veel verschillende stijlen, zoals de status van de foutinvoer en zelfs mijn drie knoppen (de blauwe, de zwarte en de witte).
Symbolen is een geweldige functie van Sketch die ik veel gebruik. Symbolen zijn herkenbaar aan hun paarse map in de Lagenlijst die ik niet open heb in mijn screenshots. Om naar de weergave te gaan, gaat u naar Beeld> Laaglijst weergeven of druk op Command + Option + 1.
Laten we de invoer die ik in Gedeelde Stijlen heb gebruikt ook als voorbeeld voor Symbool maken. Laten we er eerst een groep van maken. Om dat te doen, druk op Command + G.
Om er een symbool van te maken, kunt u het pictogram linksboven in de Sketch-app gebruiken. U kunt ook hetzelfde gebied gebruiken om een gedeelde stijl op te slaan om een groep ook als een symbool op te slaan. Als je dat doet, geef het een naam.
Een symbool verschilt van de andere herbruikbare stijl doordat het een groep elementen is die u overal kunt bijwerken in plaats van een enkele stijl zoals de kleur van de invoerrechthoek of de tekststijl van het label. Symbolen houden afstand en grootte van deze elementen terwijl u ze opnieuw gebruikt.
Nog een coole functie van Symbolen waarmee u kunt selecteren welk tekstelement u letterlijk opnieuw wilt gebruiken, wat betekent dat de daadwerkelijke tekst hetzelfde blijft, of dat u de tekstwaarde van een geselecteerd tekstelement kunt uitsluiten. Dit is een geweldige functie waar ik van houd. Het zou zinloos zijn om mijn invoersymbolen opnieuw te gebruiken als ik de naam niet kon wijzigen in 'Voornaam' en de ander in 'Achternaam'.
Met deze functies kunt u uw eigen stijlgidsen maken binnen Sketch. Download de bronbestanden en speel rond met wat er is gebouwd. Ik zie uit naar uw suggesties voor verbeteringen! En als u op zoek bent naar meer inspiratie voor het werken met Sketch, bekijk dan de categorie Sketch-bestanden op Envato Market.
Accentsconagua