Knoppen maken voor mobiele interfaces in Photoshop CS6

Dit soort knoppen zijn erg populair, vooral als we onderdelen maken voor mobiele interfaces zoals de iPhoneIn feite was het dit apparaat dat dit soort knoppen bevatte die eruitzien als een klein glanzend plastic lipje waarop een kleine weerkaatsing van licht valt.
Om dit type knop te bouwen, gaan we basistechnieken gebruiken zoals rechthoekige vormen met afgeronde randen, het gebruik van verlopen en het gebruik van kleurenpaletten om de gewenste effecten te bereiken.
Eerst moeten we het proces starten door de basisvorm van onze knop te genereren, hiervoor zullen we de volgende stappen volgen.
1- Laten we beginnen met het maken van een vector in de vorm van een rechthoek met afgeronde randen en in het lagenmenu gaan we een effect toepassen van overlappende gradiënt:

2- Het verloop moet van een donkere kleur zijn in het bovenste gedeelte en een variatie van dezelfde kleur maar lichter in het onderste gedeelte, de verhouding kan van 80% donker en een 20% duidelijkheid.
3- Nu moeten we dubbele laag, hiervoor kunnen we op de toetsencombinatie drukken CTRL + JWe doen dit om het verloop in de gedupliceerde laag te kunnen wijzigen, daarom gaan we eenmaal gedupliceerd dubbelklikken op het verloopeffect.
4- We gaan het verloop bewerken door de dekking in te stellen op a 50% en we gaan de kleuren op de achtergrond veranderen in wit en het lichtste deel zal transparant zijn:
5- De volgende stap die we moeten doen is de ankers verwijderen, hiervoor gaan we de . selecteren punt gereedschap, is het de bedoeling om de referenties van de gedupliceerde laag te verplaatsen, zodat deze slechts ongeveer een derde van het canvas bedekt.
6- Nu gaan we een kromming maken in de onderste rand van de gedupliceerde laag, hiervoor gaan we de tool gebruiken richting selectie en in het midden van de lijn genereren we de nodige beweging.
7- Wanneer we bijna klaar zijn, gaan we de laag wijzigen en gaan we de dekking wijzigen in ongeveer 65% en de vulparameter o Vullen we laten het op 0 staan, hierdoor krijgt alles vorm.
8- Ten slotte kunnen we een afbeelding of tekst toevoegen, daarbij moeten we een kleine schaduw plaatsen zodat het het element benadrukt en we kunnen het associëren met een knop:

Zoals we kunnen zien, hebben we een knop gegenereerd die erg lijkt op die in mobiele interfaces, deze geven ons een opvallende en frisse uitstraling die we kunnen opnemen in onze schetsen en voorstellen voor mobiele interfaces, ze worden meer dan wat dan ook gebruikt om applicaties en dergelijke elementen, niet voor basishandelingen van gebruikers, maar iedereen kan zijn creativiteit gebruiken om een ​​positie te krijgen.
Hiermee beëindigen we deze tutorial, omdat we hebben gezien dat we verschillende basistechnieken hebben toegepast om het eindresultaat te verkrijgen, moet worden opgemerkt dat hoe meer we oefenen, hoe sneller we zullen zijn en we in staat zullen zijn om deze elementen met meer veiligheid te genereren.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven