Aangepaste vormen tekenen

Vormen hebben een lange weg afgelegd in Photoshop en weten hoe je ze kunt gebruiken in je toepassing kan het verschil betekenen tussen succes en mislukking. Vormen kunnen diepte, balans en eenheid brengen in uw apps. In deze zelfstudie leer je de Photoshop-vormentool kennen en leer je om basisafhankelijke vormen te tekenen. In dit proces ben je voorbereid op de volgende tutorial in deze serie: het maken van knoppen.

Voordat we beginnen, laat ik je laten zien wat ik bedoel als ik spreek over de relatie tussen vormen, diepte, balans en eenheid.

Laten we de standaardinterface gebruiken voor bijvoorbeeld de iPhone en Android-telefoons. De knoppen, pictogrammen of snelkoppelingen op beide telefoons zien eruit alsof ze net boven op de achtergrond zitten, wat diepte is. Waar de telefoons anders beginnen te worden, is echter met betrekking tot balans en eenheid.


iPhone-pictogrammen

Apple is trots op het ontwerp (en dat zouden ze ook moeten doen) en terwijl beide telefoons de pictogrammen op hun plaats klikken, houdt de iPhone de pictogrammen bij elkaar in een specifieke volgorde. Android-telefoons kunnen enkele pictogrammen aan de bovenzijde en een aantal pictogrammen aan de onderkant hebben, die de balans van uw scherm enorm kunnen verpesten. Verandert het de functionaliteit? Nee. Is het bruikbaar? Het is gebruikelijk, dus als het voor u werkt, ja. Ziet het er het beste uit? Nee. Het ziet er niet het beste uit, omdat het gewoon niet in balans is.


Android-pictogrammen

Hetzelfde kan gezegd worden voor eenheid. De iPhone heeft een standaard formaat en vorm voor pictogrammen. De inhoud binnen de grootte en vorm kan en kan variëren. Android heeft gewoon een standaardformaat, maar geen standaardvorm. Door alle pictogrammen te beperken tot dezelfde grootte en vooral dezelfde vorm, creëert Apple een perfecte eenheid. Niets lijkt niet op zijn plaats. Maar dat is het niet en Apple versus Android debatteren, en hoewel ik een Mac-gebruiker ben, kies ik ervoor om een ​​Android-telefoon via de iPhone te gebruiken, dus daar ben ik niet bevooroordeeld.


Laten we nu verder gaan met het leren over de Photoshop-vormgereedschap:

  1. Open Photoshop en maak een nieuw document.
  2. Ik ga de volgende presets gebruiken om het simpel te houden.
  3. Selecteer het vormgereedschap (U) op de werkbalk.
    Klik om de vormopties uit te vouwen. U kunt ook gewoon naar de optiebalk kijken om de verschillende vormen beschikbaar te zien.
  4. Er zijn meer opties in de optiebalk dan wat we gaan behandelen, dus we zullen ons alleen concentreren op de zes werkelijke vormen die we hebben. We komen meer in de pen-tool in een komende tutorial.

  5. Als u een vorm wilt tekenen, selecteert u de gewenste vorm op de optiebalk. Ik kies een cirkel.
  6. Klik en sleep op het canvas om de vorm te maken.
  7. Merk op hoe we nog niet de gewenste kleur hebben gekozen. Maak je geen zorgen, we kunnen de kleur vrij gemakkelijk veranderen nadat de vorm is getekend. Zoek in het palet Lagen naar de nieuwe laag met de naam 'Shape-1'.

  8. Dubbelklik op het gekleurde staal van de Shape-1-laag in het lagenpalet om de kleurkiezer te openen.
  9. Kies een kleur en klik op OK.

Dus dat was de 30.000 voet weergave van het maken van een vorm. In dit voorbeeld heb ik alleen de ovale vorm gebruikt, maar er is zoveel meer dat u kunt doen met andere vormen.


Hier zijn enkele kleine tips aan de binnenkant die het werken met vormen iets efficiënter en gemakkelijker zouden maken.

  1. Vormopties
  2. Spatiebalk
  3. Alt toets
  4. Shift Key (zonder bestaande vorm)
  5. Shift (met bestaande vorm)
  6. Alt (met bestaande vorm)
  7. Ctrl + T

Vormopties

Standaard, zonder presets te veranderen, geeft Photoshop je vormen die er zo uitzien. Het hulpmiddel voor aangepaste vormen heeft ook een hele subset van vormen uit de vervolgkeuzelijst, waardoor u meer creatieve vrijheid krijgt.

Elke vorm, aangepast of niet, heeft instellingen waarmee u deze vormen kunt aanpassen en uw leven gemakkelijker kunt maken.

Met de optie "Onbeperkt" kunt u een vorm maken die exact overeenkomt met de gewenste afmeting zonder dat de vormen in verhouding blijven (dit is de standaardinstelling). Voor rechthoekige vormen kunt u met de optie "Vierkant" een perfect vierkant maken. U kunt ook een vaste grootte en verhouding instellen. Als u precies weet welke maat u nodig heeft, geeft u deze hier op en wordt uw leven gemakkelijker! Dan zijn er paar selectievakjes. Het selectievakje "From Center" tekent de vorm rond de oorsprong van de muis in plaats van de richting waarin de muis gaat en de "Snap to Pixels" -optie doet precies dat.


Ik gebruik deze twee opties eerlijk gezegd niet heel veel, omdat ik de onderstaande sneltoetsen graag beter gebruik. Het gaat gewoon sneller!

Spatiebalk

Ah, dit is een van mijn favorieten. Als u de spatiebalk ingedrukt houdt wanneer u een vorm tekent, kunt u de vorm verplaatsen terwijl u tekent. Het maakt niet uit of je het ingedrukt houdt voor of nadat je hebt geklikt om te beginnen met het tekenen van de vorm.

NOTITIE: Als je je muis al hebt losgelaten, is het te laat. U hoeft het alleen handmatig te verplaatsen.

Klik om te beginnen met tekenen, houd de spatiebalk ingedrukt en begin met het verplaatsen van de muis. De vorm moet met je meebewegen. Dit helpt om alles op een rij te krijgen, zelfs nadat u bent begonnen met het tekenen van de vorm.

SHIFT (zonder bestaande vorm)

Voordat u vormen binnen de laag tekent, kunt u de SHIFT-toets ingedrukt houden om alles perfect te houden. Perfecte cirkels, perfecte vierkanten, perfecte rechte lijnen en zelfs perfecte hoeklijnen van 45 graden. Dit lijkt veel op wat we een paar weken geleden met de selectiekader hebben gezien. Als u SHIFT ingedrukt houdt, blijft alles geproportioneerd en kan het het selecteren van het vierkante keuzerondje in de vormopties vervangen.

SHIFT (met bestaande vorm)

Als je al een vorm op het canvas hebt, functioneert de SHIFT-toets iets anders. Als je al een vorm op het canvas hebt en ook in het lagenpalet hebt geselecteerd, kun je de SHIFT-toets ingedrukt houden om je dynamisch aan de bestaande vorm toe te voegen.

Houd SHIFT ingedrukt en u ziet een klein plusteken (+) naast de cursor verschijnen. Voeg aan de vorm toe door een nieuwe vorm op de bestaande vorm te slepen. Merk op in de screenshot dat ik het einde van onze afgeronde rechthoek aflegde. Ik had dit op verschillende manieren kunnen doen, maar dat zou veel meer stappen met zich mee brengen.

Wat gaan we doen met zoiets? Creëer een paar meer vormen met behulp van het rechthoekgereedschap en maak de laatste af van dezelfde manier waarop je de eerste deed om een ​​leuke kleine set van eenvoudige navigatieknoppen te maken:

ALT (met bestaande vorm)

Als u de ALT-toets ingedrukt houdt met een bestaande vorm, wordt een gedeelte verwijderd. Met een bestaande vorm op het canvas en geselecteerd, houdt u de ALT-toets ingedrukt en verschijnt een minteken (-) naast de cursor. Dit geeft aan dat u op het punt staat een deel van de vorm te verwijderen. In de screenshot nam ik de aangepaste vorm van de envelop en verwijderde dat deel van de rechthoek. Nu moeten we gewoon wat tekst toevoegen en hebben we een heel eenvoudige e-mailknop voor onze app!

CTRL + T

Dit is de snelste en meest efficiënte manier om de grootte van een bestaande vorm te wijzigen. Zorg ervoor dat je de vorm hebt geselecteerd in het lagenpalet en gebruik de sneltoets van CTRL + T. U zou de handvatten van de vorm moeten zien, zodat u de grootte kunt wijzigen als dat nodig is. Snel en gemakkelijk werkt dit voor alle lagen, niet alleen met vormen. Ik gebruik dit een ton!


Leren hoe je het vormgereedschap moet gebruiken, is nog maar het begin. De echte truc is om te leren basisvormen toe te passen op unieke en interessante manieren. Je kunt deze vormen zeker gebruiken voor meer dan alleen knoppen!

Om creatief te zijn, volgen hier enkele unieke en creatieve voorbeelden van het vormgereedschap in actie!

Klokken

Dia Carta

Dropbox

Domino Box