Hoe Teken Je Knoppen Voor Een Website

Inhoudsopgave:

Hoe Teken Je Knoppen Voor Een Website
Hoe Teken Je Knoppen Voor Een Website

Video: Hoe Teken Je Knoppen Voor Een Website

Video: Hoe Teken Je Knoppen Voor Een Website
Video: How To Make Animated Button For Website Using HTML CSS JS | Button Design In HTML CSS 2024, Mei
Anonim

Een gebruiksvriendelijke interface, goed getekende graphics, de juiste rangschikking van elementen op de pagina - de helft van het succes van de site bij de bezoeker. Knoppen tekenen voor een website is een klein maar belangrijk onderdeel van het werken aan een online project.

Hoe teken je knoppen voor een website
Hoe teken je knoppen voor een website

instructies:

Stap 1

Probeer een ronde knop te tekenen. De onderstaande methode is ook universeel voor het maken van logo's en avatars. Het tekenen is niet moeilijk, ondanks het aantal handelingen dat je moet uitvoeren.

Stap 2

Open Adobe-Photoshop. Maak een nieuw document aan door op de combinatie "Ctrl + N" te drukken. Beeldparameters 300 * 300, resolutie 72 ppi. De standaard achtergrond- en kleurmodus zijn respectievelijk wit en RGB.

Stap 3

Het is het beste om met vectoren te tekenen, zodat wanneer de knop wordt verkleind, de kwaliteit niet verslechtert. Selecteer het gereedschap Ovaal, houd Shift ingedrukt en teken een cirkel vanuit het midden.

Stap 4

Pas nu enkele effecten toe op de resulterende cirkel. Ga naar het menu "Lagen" - "Laagstijl" - "Overvloeiopties". Hier moet je een verloop toepassen.

Stap 5

Vink vervolgens hier het vakje naast "Embossing" aan om de knop de nodige uitstulping te geven en stel de volgende parameters in: stijl - contourreliëf, methode - zachte snede, diepte - 220%, grootte - 1 pixel, verzachten - 5 pixels, hoek - 135® zonder globale verlichting, hoogte - 32, hooglichtmodus - normaal met 30% dekking, schaduwmodus - vermenigvuldigen met 25% dekking

Stap 6

Om nog meer volume te geven, hier in de overvloeiparameters, vinkt u het vakje "Schaduw" aan en stelt u de volgende parameters in: overvloeimodus - vermenigvuldiging, transparantie - 40%, hoek - 125o met globale verlichting, offset - 5 pixels, grootte - 20 pixels.

Stap 7

Het resultaat van de uitgevoerde acties is een afbeelding zoals weergegeven in de afbeelding.

Stap 8

Maak nu een nieuwe laag, selecteer opnieuw "Ovaal" en teken een cirkel met een kleinere straal dan de eerste vorm. Open de "Overvloeiopties", vink het vakje aan naast "Innerlijke schaduw" en stel de parameters in: Overvloeimodus - Zacht licht, Hoek - 125o, Verschuiving - 0px, Krimp - 45%, Grootte - 21px.

Stap 9

Vink vervolgens hier in de overvloeiopties "Gradient-overlay" aan en maak een verloop met de parameters zoals in de afbeelding. Klik OK

Stap 10

Stel vervolgens de overvloeistijl in op radiaal, schaal op 124%

Stap 11

Vink nu het vakje "Lijn" aan en stel de volgende parameters in: grootte - 5 pixels, positie - buiten, overvloeimodus - normaal, dekking - 100%, lijntype - verloop.

Stap 12

Als gevolg van deze acties zou u iets moeten krijgen dat meer op een knop lijkt. U kunt de overvloeiopties opnieuw openen en ermee experimenteren.

Stap 13

Nu moeten we de hoogtepunten-knoppen toevoegen, zodat de knop een glasstructuur krijgt. Maak hiervoor opnieuw een nieuwe laag, selecteer het gereedschap Ovaal selecteren, maak een ovaal boven de knop en vul deze met wit met het gereedschap Vullen. Houd Ctrl ingedrukt, klik op de laag met de gekleurde cirkel, keer de selectie om ("Selectie" - "Inversie"). Druk nu op Verwijderen. Het ovaal moet rond de omtrek van de cirkel worden bijgesneden.

Stap 14

Wijzig in het deelvenster Lagen de optie Normaal in Zacht licht, klik vervolgens op het vectormaskerpictogram en selecteer het gereedschap Vullen - Verloop. Vul de markering van onder naar boven. De knop is bijna klaar.

Stap 15

U kunt een inscriptie aan de knop toevoegen. U kunt er ook overvloeieffecten op toepassen, zoals binnenste, buitenste gloed, verloop, enzovoort. Wees niet bang om te experimenteren, hoe meer fantasie je gebruikt in je werk, hoe sneller je zowel de editor zelf als het webdesign onder de knie hebt.

Aanbevolen: