Share
In de tutorial van vandaag zullen we je laten zien hoe je vanuit het niets je eigen eenvoudige UI-kit kunt maken. We maken de basisbouwstenen die u kunt gebruiken in vrijwel elk webproject, waaronder: tekstvelden, focusvelden, selectievelden, schuifbalken, laders, selectievakjes en keuzerondjes. Genieten!
Het maken van een eenvoudige UI-kit is een geweldige manier om uw ontwerpvaardigheden te versnellen wanneer u aan een groot project werkt. Als je veel pagina's hebt om te mopperen, zal een arsenaal aan kant-en-klare elementen die speciaal voor dat project zijn gemaakt je sneller maken bij het hameren van die pagina's. Vandaag hebben we een video en een geschreven handleiding - volg een of beide!
Voor degenen onder u die wat meer begeleiding willen dan de video, bied ik ook een complete stapsgewijze zelfstudie aan. Laten we erin duiken!
Het maken van de tekstvelden is het eenvoudigste deel van het hele proces, maar omdat deze elementen waarschijnlijk het vaakst zullen worden gebruikt, is het belangrijk om het de eerste keer goed te doen. In ons geval heb ik eenvoudige afgeronde rechthoeken van 300 px x 30 px getekend met een straal van 2px. Pas uw eigen aan aan uw eigen behoeften. Grote, sappige, extra ronde velden kunnen ook leuk zijn! Harde randen velden zijn voor de meer serieuze menigte.
Hoe dan ook, maak er een die perfect is - voeg een lijn toe die overeenkomt met je merk (# bdd9a7 voor de demo), en dupliceer de laag twee keer (Ctrl + J), verplaats deze elke keer naar beneden.
Deze drie lagen vormen de basis van onze UI-kit. Telkens wanneer we een nieuw veld of een nieuwe knop moeten maken, is de kans groot dat we hier willen beginnen, zodat we dezelfde basishoogte en -afstand kunnen dupliceren.
Voeg vervolgens wat tekst toe over elke laag. Gebruik het gewenste lettertype, maar u bewaart het het beste voor webveilige lettertypen? vooral met formuliervelden waar lettertype-vervanging niet jouw beste optie is. Ik heb Helvetica # 407a16, 12pt gebruikt - maar je kunt Arial, Georgia, Times, enz. Gebruiken.
Laten we nu een eenvoudige buitenste gloed toevoegen aan ons "focusveld". Dit zal mensen helpen het te identificeren wanneer ze het gebruiken. Onze gloed is vrij subtiel, maar je kunt het zo helder maken als je wilt. Merk op dat ik ook een ZEER subtiele innerlijke schaduw heb toegevoegd - dat is volledig optioneel, maar het laat je zien hoe je subtiele effecten kunt toevoegen om het veld een actief gevoel te geven.
Laten we vervolgens de afgeronde rechthoek die we gaan gebruiken voor het "vervolgkeuzemenu" dupliceren en deze maskeren met behulp van het selectiekader en een laagmasker toepassen. Dit maakt de "knop" voor het menu, alles wat we moeten doen is een subtiel verloop toevoegen om het meer op een knop te laten lijken - # d9edca tot # f0f9e9.
Deze stap is erg belangrijk, want voor vrijwel alle toekomstige voorraadelementen (knoppen, selectievakjes, etc.) kopiëren we deze laagstijl en plakken deze over lege vormen. Neem even de tijd om de jouwe perfect te krijgen voordat je verder gaat, want het zal de toon zetten voor je hele gebruikersinterface.
Zoals ik zojuist heb genoemd, zullen we onze knoppen maken met behulp van dezelfde standaard Afgeronde rechthoek van voordien, en de laagstijl kopiëren / plakken in het vervolgkeuzemenu. De tekst die we gebruiken moet een vetgedrukte variant zijn van het lettertype dat wordt gebruikt in de tekstvelden, voeg gewoon een eenvoudige "lichte" slagschaduw toe (slagschaduw, 75%, wit, scherm, 1px afstand, 0 grootte) om het persbare te voltooien tekst.
Als u de ingedrukte versie van de knop wilt maken, hoeft u alleen maar het verloop om te keren door 'Omgekeerd' te selecteren in het menu Verloop.
De pijl naar beneden wordt gemaakt met de knop "Aangepaste vorm" en selecteert de pijl naar beneden uit de bibliotheek met elementen die in Photoshop op voorraad zijn. Je kunt ook je eigen maken als je wilt? de vorm is helemaal aan jou.
Creëer gewoon je pijl, stel de vulkleur in op je "merkkleur" (de onze is # 68b232) en pas een eenvoudige innerlijke schaduw toe (12% dekking, afstand 2, maat 3) om het een beetje in te voegen. Je kunt natuurlijk sleutelen aan deze instellingen - de blauwe versie in de video laat je nog een variatie zien.
Ten slotte kunt u een optioneel lichteffect toevoegen door een eenvoudige 120 px borstel (0% dekking) op een lege laag te gebruiken. Plaats de "brushed blot mark" voorzichtig op de bovenkant van de knop - en maskeer vervolgens de geborstelde blot over de knop (maak een selectie van de knopvorm en pas de nieuwe selectie toe als een laagmasker op het geborstelde effect). Stel de overvloeimodus in op Zacht of Hard licht om het effect te voltooien.
Misschien moet je een beetje sleutelen aan deze laatste stap op basis van de kleuren die je gebruikt. De stappen zullen echter altijd ongeveer hetzelfde zijn:
Deze volgende stap is supereenvoudig - maak gewoon 12px afgeronde rechthoeken (vierkanten om precies te zijn). Waarom 12px? Omdat het de generieke puntgrootte is voor de meeste tekst op internet. Je kunt groter of kleiner gaan op basis van je eigen lettergrootte.
Weet je nog, we kopiëren / plakken de laagstijlen van die vervolgkeuzemenu-knop? dit maakt dingen snel en uniform.
Hetzelfde proces geldt voor de keuzerondjes, behalve dat we deze keer 12px-cirkels maken in plaats van rechthoeken.
Het "D-Pad" wordt gemaakt door de pijl in het vervolgkeuzemenu eenvoudig een paar keer 90 graden te draaien en te draaien. Deze richtingspijlen zijn geweldig wanneer u een accordeonmenu, jquery-schuifregelaar, enzovoort moet maken.
Een eenvoudige laadbalk zoals deze is een geweldige manier om de veelzijdigheid van uw UI-kit uit te breiden. Je zou het misschien niet altijd gebruiken, maar het zal je veel tijd besparen voor de weinige gevallen waar je het nodig hebt! De laadbalk bestaat uit een paar stappen.
De basislaagstijl van de achtergrond is als volgt:
U kunt de basis van het actieve veld op verschillende manieren maken, maar hier is hoe de groene is gebouwd.
Vervolgens voegen we de diagonale lijnen toe die worden gemaskeerd over de laadbalk:
Het lichteffect is gewoon een beetje een bonus als je het wilt. Ik heb het gemaakt met een 120px Brush (0% Hardheid), daarna heb ik een nieuwe laag gemaakt en één keer op de muis geklikt, waardoor er een enkele vlek op de pagina is ontstaan. Vervolgens heb ik de laagstijl ingesteld op Zacht licht en ingesteld om te maskeren over de knop. U kunt deze laatste stap op een paar manieren doen - in het voorbeeld maak ik eenvoudig een selectie uit het actieve veld (houd Ctrl ingedrukt en klik op de vorm) en paste die vorm vervolgens toe als laagmasker.
Oké, we zijn nu in huis! De schuifbalk is vrij eenvoudig te maken, maar laat me een paar aanwijzingen geven:
Dit zijn de foto's:
Een vaak over het hoofd gezien stap voor het maken van een eenvoudige UI-kit is het toevoegen van enkele basismerken en andere documentatie in uw bestand. Weet je zeker dat je dit soort dingen zou kunnen toevoegen in een tekstdocument dat bij je bestand hoort? maar dan zouden mensen het moeten openen. Op deze manier wordt alle basisinformatie (klantnaam, ontwerper, versie, type bestand, etc.) allemaal weergegeven in het bestand, zodat er geen ruimte is voor verwarring.
Eindelijk, kunt u dit naar hartelust aanpassen? gebruik je eigen kleuren, lettertypen, laagstijlen, enz. Voeg nieuwe elementen toe zoals tags, geopende vervolgkeuzemenu's, etc. De limiet tot hoe ver je dit kunt nemen is geheel aan jou, dus word gek en heb er plezier mee!
Accentsconagua