3D-knoppen maken met Adobe Photoshop

3D-knoppen maken met Adobe Photoshop

Er zijn veel geweldige dingen die je kunt maken in Adobe Photoshop die online nuttig zijn, variërend van eenvoudige fotolijsten tot complexe gebruikersinterfaces. Een van de handigste dingen die u in Photoshop kunt maken, zijn 3D-knoppen, die handig zijn als u een blog of website met een aangepaste interface uitvoert.





In dit artikel laten we u zien hoe u 3D-knoppen maakt met Photoshop, samen met visuele 'omhoog'- en 'omlaag'-statussen, zodat u ze kunt animeren. (We zullen de animatie zelf niet behandelen in dit artikel.)



Stap 1: bereid uw document voor

Hoewel 3D-knoppen het vaakst op websites verschijnen, is het belangrijk op te merken dat er andere toepassingen voor zijn, zoals geanimeerde GIF's, mock-up productdisplays en mobiele games. Afhankelijk van waarvoor u deze knop maakt, kunnen uw uiteindelijke bestandsindeling en de afmetingen ervan variëren.





Om een ​​3D-knop in Photoshop te maken, moet u er een aangepast document voor maken. Open hiervoor Photoshop en klik op Nieuw maken > Aangepast . Begin met het typen van uw waarden.

Om een ​​3D-knop te maken, heb je een horizontaal document nodig. Voor de onze gebruikten we:



  • 900 x 300 pixels hoog
  • 300 pixels/inch
  • RGB-kleurmodus

Hoewel deze specificaties zeker geen vaste regel zijn, zorgt dit ervoor dat je meer dan genoeg ruimte hebt om mee te werken en de mogelijkheid om je knopgrootte naar behoefte op en neer te schalen.

Stap 2: Stel uw rechthoek in voor uw 3D-knop

Nadat u de specificaties voor uw bestand hebt ingesteld, wordt u naar uw werkruimte gebracht. Je krijgt een horizontaal wit canvas in een enkele laag, en dit is waar je begint met het bouwen van je knop.



Om uw 3D-knop te bouwen, klikt u op de Tool Afgeronde rechthoek aan de linkerkant van uw scherm, hier in rood weergegeven. U kunt ook de snelkoppeling gebruiken U om er toegang toe te krijgen.

Klik één keer op je witte laag: dit brengt automatisch je Maak een afgeronde rechthoek doos. U gebruikt dit vak om de afmetingen van uw rechthoek op te geven.



Voor onze knop gingen we met:

  • 300 pixels breed
  • 75 pixels hoog

We hebben er ook voor gezorgd dat de hoeken werden afgerond met 10 pixels. Niet te hoog en ook niet te laag. Toen drukten we op Oke .

Opmerking: Knopen verschillen per grootte en vorm, dus heb niet het gevoel dat je deze exacte afmetingen moet gebruiken. Bovendien, als u op zoek bent naar meer informatie over snelkoppelingen, zijn hier enkele van: de handigste Photoshop-toetsenbordopdrachten .

Wanneer u op drukt Oke , maakt Photoshop een afgeronde rechthoek met deze afmetingen in uw laag. Je kunt het veranderen Vullen en Hartinfarct kleuren met behulp van de vervolgkeuzemenu's in de linkerbovenhoek van uw scherm.

Voor het doel van deze tutorial --- en om te illustreren hoe een 'omhoog' en 'omlaag'-knop eruit zou kunnen zien--- gaan we onze 'omlaag'-knop rood maken.

Stap 3: Maak uw knop 3D

Nadat je je basisknop hebt gemaakt en de kleur hebt gekozen, wil je deze aanpassen in de Laagstijl dialoog venster. Dit is om het er meer 3D uit te laten zien.

Om toegang te krijgen tot uw Laagstijl dialoogvenster, kunt u gaan Laag > Laagstijl uit het hoofdmenu. U kunt ook dubbelklikken op de laag die uw knop bevat, zodat deze automatisch wordt weergegeven. Deze manier is veel sneller en wij geven er persoonlijk de voorkeur aan.

Zodra je Layer Style-vak is geopend, ga je naar de optie Afschuining en reliëf . Zet het aan.

Dit is een snelle en gemakkelijke manier om de randen van uw knop een meer verhoogde, '3D'-look te geven. Voor deze zelfstudie zijn dit de instellingen die we hebben gebruikt:

Structuur

  • Stijl: Afschuining binnen
  • Techniek: Beitel zacht
  • Diepte: 605
  • Richting: Omhoog
  • Maat: 5
  • Verzachten: 1

Schaduw

  • Hoek: 90
  • Hoogte: 37
  • Markeermodus: Kleur Dodge, 55% dekking
  • Schaduw modus: Meerdere, 25% dekking

De truc is om de instellingen hoog genoeg te maken zodat je enig verschil kunt zien, maar niet zo sterk dat het overweldigend is.

Nadat we klaar waren met Bevel & Emboss, gingen we naar: Contour en zette dat ook aan. Contour maakt de definitie van Bevel & Emboss een beetje sterker, en voor deze tutorial hebben we de instelling gekozen Kegel - Omgekeerd .

Schakel vervolgens in Verloopoverlay . Dit is wat een knop die afgeronde, enigszins 'glanzende' uitstraling geeft. De instellingen zijn als volgt:

  • Mengmodus: Overlay
  • dekking: 90
  • Stijl: Lineair
  • Hoek: 90
  • Schaal: 100

Eindelijk gingen we aan Slagschaduw , om de knop een beetje 'verheven' te laten lijken op de witte achtergrond van een website of blog. Nogmaals, hier zijn de instellingen:

beste gratis pdf-lezer voor windows 10

Structuur

  • Mengmodus: Meerdere
  • dekking: 35
  • Hoek: 90
  • Afstand: 2
  • Spreiding: 6
  • Maat: 8

Kwaliteit

  • Contour: Lineair
  • Lawaai: 0
  • Laag knock-out slagschaduw: Op

Nu is het tijd om deze specificaties op te slaan als een laagstijl.

Stap 4: Opslaan als laagstijl

Zodra u klaar bent met de instellingen van uw knop, begint deze er 3D uit te zien. Omdat de kans groot is dat u meer dan één 3D-knop maakt, moeten we een snelle en gemakkelijke manier vinden om dit te doen.

Hier is hoe.

Voordat u klikt Oke in de Laagstijl dialoogvenster, klik op Nieuwe stijl . Wanneer u dit doet, slaat Photoshop deze laagstijl op die u voor uw knop hebt gemaakt.

Als u Photoshop CC gebruikt, wordt deze nieuwe stijl opgeslagen in uw Bibliotheken sectie, zoals u hierboven kunt zien. Het is heel snel en gemakkelijk toegankelijk.

Stap 5: Een opgeslagen laagstijl gebruiken

Nu je je knop hebt ontworpen en hebt opgeslagen als een laagstijl, laten we hem in actie zien voor je 'omhoog'-status. Geen woord van gelogen, dit zal uw werktijd halveren.

Laten we eerst een andere knop direct boven de rode knoplaag maken, zoals zo. Laten we het groen maken, voor de nadruk.

Volgende --- in plaats van te dubbelklikken op de laag zelf om de Laagstijlen dialoogvenster --- dubbelklik op de laagstijl in uw Bibliotheken paneel.

Wanneer u dat doet, past Photoshop uw opgeslagen stijl automatisch toe op uw nieuwe knoplaag, terwijl de nieuwe kleur en vorm behouden blijft. Je hebt nu twee knoppen --- een omhoog en een omlaag --- en het is zo eenvoudig om te doen. Ik hou van deze snelkoppeling.

Stap 6: Voeg tekst toe aan uw knop

Vervolgens gaan we tekst aan de knop toevoegen.

Om tekst toe te voegen, maakt u een nieuwe laag boven uw twee knoplagen. Klik op de Type gereedschap om te beginnen met typen.

Voor deze tutorial gaan we het woord 'abonneren' schrijven, want dat zie je vaak op websites en social media platforms.

We gaan ook een San Serif webveilig lettertype gebruiken. De uiteindelijke keuze welke u voor uw eigen knop gebruikt, is aan u. Montserrat, Proxima Nova, Arial en Verdana zijn allemaal veelgebruikte alternatieven en veilig voor internet.

Nadat dit is gedaan, zijn er echter nog een paar subtielere wijzigingen die u moet aanbrengen om deze tekst te laten 'poppen'.

Dubbelklik eerst op de laag die uw tekst bevat, zodat u deze kunt weergeven in uw Laagstijl dialoog venster.

Klik vervolgens op Innerlijke schaduw , om een ​​beetje een depressie (of verzonken gebied) aan uw tekst toe te voegen. Hierdoor lijkt het alsof de letters in de knoop zijn gegraveerd. De exacte instellingen die we voor deze zelfstudie hebben gebruikt, staan ​​​​hieronder.

Structuur

  • Mengmodus: Vermenigvuldigen
  • dekking: 35
  • Hoek: 90
  • Afstand: 2
  • Verstikken: 4
  • Maat: 1

Kwaliteit

  • Contour: Lineair
  • Lawaai: 0

Breng vervolgens een aan Verloopoverlay aan die letters, om ze gemakkelijker in de knop te laten overvloeien zonder plat te lijken. Nogmaals, de instellingen voor de onze zijn:

  • Mengmodus: Kleur branden
  • dekking: 90
  • Stijl: Lineair
  • Hoek: 90
  • Schaal: 100

Stap 7: Afwerking

Nadat u deze tekststijl hebt gemaakt --- vooral als u deze opnieuw wilt gebruiken --- ga naar Nieuwe stijl en sla het op voordat je klikt Oke .

Met dat ingepakt, kunt u snel heen en weer schakelen op de zichtbaarheid tussen uw twee knoplagen, om te zien hoe de 'omhoog'- en 'omlaag'-statussen eruit zien.

Best wel cool, hè? Om je bestand op te slaan, ga naar Bestand > Opslaan als , en sla het op als het juiste bestandsformaat voor elk project waaraan u werkt.

Pas uw blog aan met 3D-knoppen en widgets

Nu u weet hoe u 3D-knoppen maakt in Photoshop, kunt u er creatief mee aan de slag gaan en uw eigen 3D-knoppen ontwerpen die aan uw behoeften voldoen. En met deze vaardigheden in je arsenaal kun je een product maken dat niet alleen professioneel is, maar ook persoonlijk.

Wil je weten wat je nog meer met dit programma kunt doen? Hier is hoe verwijder je een achtergrond in Photoshop .

Deel Deel Tweeten E-mail Toegang krijgen tot Google's ingebouwde waterpas op Android

Als je ooit hebt moeten controleren of iets in een mum van tijd waterpas staat, kun je nu binnen enkele seconden een waterpas op je telefoon krijgen.

Lees volgende Gerelateerde onderwerpen
  • Creatief
  • Adobe Photoshop
  • Tips voor het bewerken van afbeeldingen
  • Photoshop-zelfstudie
Over de auteur Shianne Edelmayer(136 artikelen gepubliceerd)

Shianne heeft een Bachelor's Degree in Design en een achtergrond in podcasting. Nu werkt ze als Senior Writer en 2D Illustrator. Ze behandelt creatieve technologie, entertainment en productiviteit voor MakeUseOf.

Meer van Shianne Edelmayer

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren