Share
Laten we onszelf een humeurig UI-element maken. We zullen Photoshop gebruiken om subtiele texturen te verkennen en een mooie wijzerplaat samen te stellen. Laten we gaan!
Open een nieuw RGB-document met een afmeting van 800x600px en een resolutie van 72 dpi.
Selecteer een humeurige donkerblauwe kleur voor de achtergrond (in dit geval de kleurcode # 1b1c20) en gebruik vervolgens het gereedschap Verfemmer om de achtergrond te vullen.
Breng wat ruis aan op de achtergrond, om het een zachte textuur te geven (1% Gaussiaanse ruis en monochroom).
Controleer nu de brondownload - u vindt daar een patroonbestand dat u moet dubbelklikken om in Photoshop te installeren. Pas het patroon toe op een nieuwe laag en vul de hele laag met het patroon.
Verdraai de dekking van de overlay patroon naar 15-20%, afhankelijk van wat je leuk vindt, om als volgt te eindigen:
Maak een nieuwe groep met de naam "knop" en voeg een cirkelvorm toe (doe dit door het elliptische vormgereedschap te selecteren en shift ingedrukt te houden om het perfect cirkelvormig te maken). Geef het een levendige kleur, zodat je de laag duidelijk verder langs de lijn kunt zien?
Wijzig de vuldekking van de laag tot 0% en pas een slagschaduw toe met de volgende eigenschappen:
Breng vervolgens een lichte binnenste schaduw aan om het inspringend te laten lijken.
Breng daarna een innerlijke gloed aan om de basis er vol te laten uitzien.
Maak voor de volgende stap een nieuwe cirkel en geef deze een witte kleur, dit is de basisvorm van ons UI-element en het zal dienen voor een paar meer detaillagen, dus maak een maat waar je echt blij mee bent! Noem het "button_base" of iets dergelijks.
Pas een schuine verlooplaag hierop toe, begin met wit en voeg twee stops toe van een lichtgrijze kleur. Gebruik de twee witte tussenstops in het midden om met de scherpte van de knop te spelen, terwijl je tijdens het werken een voorbeeld van het element bekijkt om te zien hoe het eruit ziet.
Breng een schuine rand aan en ciseleer deze op de basis, zodat het een beetje 3d lijkt.
Nu voor de detaillering. Maak een kopie van de basislaag en leg deze onder de knopbasis. Draai nu de vulling naar 0% om alleen de filters te zien die u op die laag toepast, en niet de inhoud. Maak een slagschaduw met de volgende instellingen:
Om de knop iets meer naar voren te laten komen, kopieert u de knopbasis opnieuw en plaatst u deze onder de knopbasis en boven de schaduw. Geef het een donkere overlay om het er fantastisch uit te laten zien.
Maak nu nog een kopie van de basislaag van de knop, maar transformeer deze naar een groter formaat. Leg het op de bovenste laag van de knop en rasteer het!
Ga daarmee naar het filterscherm en geef het een maximaal ruisfilter (dus je denkt dat je naar een kapotte tv kijkt).
Breng vervolgens een Radiaal Blur-filter aan en stel deze in op de maximale waarde om een mooi effect te krijgen.
Verlaag de dekking van deze laag naar ongeveer 20-40% en centreer het midden met de knop. Als je het in het midden hebt, selecteer je de knooplaag en ga je naar> invers. Selecteer vervolgens de kraslaag en druk op delete. Je zou een mooi gekrast effect op de knop moeten hebben.
Om te controleren of alles goed gaat, zou je iets dergelijks moeten hebben:
Maak een kleine cirkel voor de inkeping (of indicator) op de knop.
Geef het een witte slagschaduw om het een reliëf uiterlijk te geven.
Geef de inkeping een kleine binnenschaduw.
En breng het uiteindelijk tot leven met een kleur naar keuze.
Je zou zoiets als dit moeten hebben:
Laten we nu in de laatste kleine details blijven steken! Maak een kleine rechthoek voor de inkepingen onder aan de knop.
Draai de vulling weer naar 0% en geef het een witte slagschaduw.
Het heeft ook een beetje schaduw nodig aan de binnenkant, dus geef het een kleine binnenschaduw.
Kopieer en draai het nu naar de andere kant.
Zet hier je tekstuele inhoud in met een lettertype naar keuze (ik heb gekozen voor Myriad Pro).
Breng een slagschaduw op de tekst aan, zodat deze er ingesprongen uitziet.
Breng dan een lichte innerlijke schaduw aan.
Dit zou moeten zijn wat u ziet in uw bestand:
En dit is ons laatste UI-element, een eenvoudige volumeknop voor het oppompen van de muziek!
Ik hoop dat je deze tutorial leuk vond, het zal de eerste zijn van velen, dus voel je vrij om me te volgen op twitter of je te abonneren op de nieuwsbrief van mijn site. Blij design en blijf cool!
Accentsconagua