Share
Wat je gaat creërenSketch is een zeer veelzijdige tool die je dagelijks kunt gebruiken voor je werk als web- en applicatieontwerper. In deze tutorial zal ik je binnen Sketch laten kennismaken met de functies voor tekengebied, laag, slagschaduw, binnenste schaduw, tekst, randen en vulling, en laten zien hoe je het kunt gebruiken om een eenvoudig, opvallend pictogram te maken.
Als dit de eerste keer is dat u Sketch 3 opent, zijn er vier dingen om in gedachten te houden over de Sketch-interface:
Tekenborden zijn een eenvoudige manier om uw ontwerpen te organiseren op basis van gescheiden frames. Schets 3 geeft u een reeks standaardafmetingen voor het tekengebied wanneer u op drukt Een sleutel (of klik op Invoegen> Artboard). U ziet dat standaard de schermformaten voor de grote Apple-apparaten aan de rechterkant van de Sketch-interface zijn:
Kiezen iPad-schermen> Landschap. Je kunt het nu zien in het lagenpaneel aan de linkerkant. Als je een klein schermformaat hebt, vergeet dan niet uit te zoomen om het hele kunstbord te zien door op te drukken Command-Hyphen (-).
Hernoem je kunstbord door erop te dubbelklikken. Noem het Water pictogram. Je zou nu zoiets als dit moeten hebben:
We hebben dus een iPad-tekengebied van 1024 px breed en 768 px hoog. Laten we beginnen met het toevoegen van de achtergrond. Om dit te doen, druk op de R sleutel (of ga naar Invoegen> Vorm> Rechthoek), klik op je tekengebied en sleep je muis / vinger om een kleine rechthoek te maken. Je kunt het nu in je lagenpaneel zien. Hernoem het Achtergrond.
Vervolgens gaan we naar het rechterdeelvenster en bepalen we de eigenschap van onze achtergrondlaag:
Laten we wat stijl toevoegen. Ga naar borders en haal het uit. Voeg nu het verloop toe door op de standaard grijze kleur in de eigenschap vullingen te klikken. Er verschijnt een vervolgkeuzemenu met vijf opties: egale kleur, lineair verloop, radiaal verloop, hoekig verloop, patroonvulling en ruisopvulling.
Van links naar rechts: vlakke kleur, lineair verloop, radiaal verloop, hoekig verloop, patroonvulling, ruisvullingKlik op Radiaal verloop. Je kunt nu een schuifregelaar zien met de witte kleur in het midden van het verloop aan de linkerkant en de zwarte kleur die het uiterste is van je verloopkleur aan de rechterkant. Om hun kleuren te veranderen, moet je er gewoon op klikken in de schuifregelaar:
Laten we de kleuren instellen. Met Sketch kunt u schakelen tussen de hexadecimale waarde, RGBA en HSBA door op de. Te klikken RGB of HSB label. Ik ben meer bekend met HSBA, dus voor de kleur in het midden kies ik H190, S50, B100, A100, en voor degene aan de extremiteit kies ik H210, S50, B100, A100.
We gaan nu het pictogram maken dat de druppel bevat. Voeg hiervoor een nieuwe rechthoek toe. druk op R, en klik en sleep. Hernoem dan je nieuwe laag icoon.
Stel de Breedte naar 515 en Hoogte naar 515. Plaats het in het midden met behulp van de gereedschappen aan de bovenkant van het rechterpaneel:
Gebruik de bovenstaande gereedschappen om de positie van uw laag ten opzichte van de container in te stellenStel de Grensradius naar 144, en verwijder, net als bij de achtergrondlaag, de rand en vult het pictogram door een witte, platte kleur te kiezen.
Nu voegen we wat schaduw toe. De functie Schaduwen heeft vijf opties: de kleur, de X-positie, de Y-positie, de vervaging en spreiding. Stel de schaduw in op:
De laatste stap voor het pictogram is om onderaan een innerlijke schaduw toe te voegen. Inner Shadows volgen exact dezelfde functionaliteit als Shadows, behalve dat het zich verspreidt naar de binnen van je vorm in plaats van de buitenkant. We kunnen de innerlijke schaduw instellen op:
En als laatste zou je dit moeten krijgen:
In deze laatste stappen leert u hoe u een waterdruppelpictogram kunt maken met Sketch. Eerst hebben we een ovaal nodig, dus druk op O (of ga naar Invoegen> Vorm> Ovaal) en definieer de grootte als Breedte: 200 en Hoogte: 200.
Maak vervolgens een driehoek door naar te gaan Invoegen> Vorm> Driehoek (geen snelkoppeling voor deze). Ga naar het rechter paneel, controleer gelijkzijdig, en stel de Breedte naar 200 en Hoogte naar 200.
Nu komt het lastige gedeelte. Je moet je lagen als volgt positioneren:
Selecteer de twee lagen en klik op de Unie knop, die zich in het bovenste gedeelte van de Sketch-interface bevindt.
Nu we onze druppelvorm hebben, voegen we de laatste hand om het gebruiksvriendelijker te maken door de straal erbovenop toe te voegen. Om dit te doen, selecteert u uw vorm en klikt u op de Bewerk tool, die zich in de bovenste werkbalk bevindt.
Gelukkig is de eerste geselecteerde punt degene die we willen bewerken. Ga naar het rechter paneel en verander de Corners waarde voor 34.
Gefeliciteerd! De druppelvorm is nu voltooid! Nu kunt u het afvlakken door op het pictogram in de bovenste menubalk te klikken (rechts van Roteren). Selecteer de druppellaag in het deelvenster Lagen en hernoem deze droplet. Ga naar het rechter paneel en stel de Breedte naar 266 en de Hoogte naar 377. Centreer het dan met het gereedschap bovenaan het rechter paneel:
En nu de laatste stap: de stijl! Vink eerst de rand uit en vul de vorm vervolgens met een radiaal verloop. Maak de middelste waarde H190, S70, B100, A100, en de onderste waarde H210, S70, B100, A100.
Dan zullen we een toevoegen Innerlijke schaduw met:
En…
Bedankt voor het lezen van de tutorial. Ik hoop dat het je geholpen heeft om enkele fundamentele hulpmiddelen te leren gebruiken die beschikbaar zijn binnen Sketch. Aarzel niet om vragen te stellen in de comments hieronder.
Accentsconagua