Ako Nakresliť Tlačidlá Pre Webovú Stránku

Obsah:

Ako Nakresliť Tlačidlá Pre Webovú Stránku
Ako Nakresliť Tlačidlá Pre Webovú Stránku

Video: Ako Nakresliť Tlačidlá Pre Webovú Stránku

Video: Ako Nakresliť Tlačidlá Pre Webovú Stránku
Video: Ako nakresliť Šmoliatko • Šmolkovia 2024, Smieť
Anonim

Užívateľsky prívetivé rozhranie, dobre nakreslená grafika, správne usporiadanie prvkov na stránke - polovica úspechu stránky u návštevníka. Kreslenie tlačidiel pre web je malou, ale dôležitou súčasťou práce na online projekte.

Ako nakresliť tlačidlá pre webovú stránku
Ako nakresliť tlačidlá pre webovú stránku

Inštrukcie

Krok 1

Skúste nakresliť okrúhly gombík. Ďalej uvedená metóda je tiež univerzálna na vytváranie log a avatarov. Nakresliť to nie je ťažké, napriek množstvu akcií, ktoré musíte vykonať.

Krok 2

Otvorte program Adobe Photoshop. Vytvorte nový dokument stlačením kombinácie „Ctrl + N“. Parametre obrazu 300 * 300, rozlíšenie 72 ppi. Predvolený režim pozadia a farieb je biely, respektíve RGB.

Krok 3

Najlepšie je kresliť vektormi, aby sa pri znížení tlačidla nezhoršila jeho kvalita. Vyberte nástroj Ovál, podržte kláves Shift a nakreslite kruh zo stredu.

Krok 4

Teraz použite niektoré efekty na výsledný kruh. Prejdite do ponuky „Vrstvy“- „Štýl vrstvy“- „Možnosti miešania“. Tu budete musieť použiť gradient.

Krok 5

Ďalej tu začiarknite políčko vedľa možnosti „Razba“, aby ste tlačidlu poskytli potrebné vydutie, a nastavte nasledujúce parametre: štýl - obrysový reliéf, metóda - mäkký strih, hĺbka - 220%, veľkosť - 1 pixel, mäkčenie - 5 pixelov, uhol - 135® bez globálneho osvetlenia, výška - 32, režim zvýraznenia - normálny s 30% krytím, tieňový režim - násobenie s 25% krytím

Krok 6

Aby ste dosiahli ešte väčší objem, tu v parametroch miešania začiarknite políčko „Tieň“a nastavte nasledujúce parametre: režim miešania - násobenie, priehľadnosť - 40%, uhol - 125o pomocou globálneho osvetlenia, posun - 5 pixelov, veľkosť - 20 pixelov.

Krok 7

Výsledkom vykonaných akcií bude taký obraz, ako je znázornené na obrázku.

Krok 8

Teraz vytvorte novú vrstvu, vyberte opäť možnosť „Ovál“a nakreslite kruh s menším polomerom ako prvý tvar. Otvorte "Možnosti miešania", začiarknite políčko vedľa položky "Vnútorný tieň" a nastavte parametre: Režim miešania - jemné svetlo, uhol - 125 °, posun - 0px, zmenšenie - 45%, veľkosť - 21px.

Krok 9

Ďalej tu v možnostiach miešania začiarknite políčko „Prekrytie prechodom“a vytvorte prechod s parametrami ako na obrázku. Kliknite na tlačidlo OK

Krok 10

Ďalej nastavte štýl miešania na Radial, mierka na 124%

Krok 11

Teraz začiarknite políčko „Ťah“a nastavte nasledujúce parametre: veľkosť - 5 pixelov, poloha - vonku, režim prelínania - normálny, nepriehľadnosť - 100%, typ ťahu - gradient.

Krok 12

V dôsledku týchto akcií by ste mali dostať niečo, čo vyzerá skôr ako tlačidlo. Môžete znovu otvoriť možnosti miešania a experimentovať s nimi.

Krok 13

Teraz musíme pridať tlačidlá zvýraznenia, aby tlačidlo získalo sklenenú textúru. Ak to chcete urobiť, znova vytvorte novú vrstvu, vyberte nástroj Oválny výber, vytvorte ovál nad tlačidlom a pomocou nástroja Vyplniť ho vyplňte bielou farbou. Podržte Ctrl, kliknite na vrstvu s farebným kruhom, invertujte výber („Výber“- „Inverzia“). Teraz stlačte Odstrániť. Ovál by mal byť orezaný po obvode kruhu.

Krok 14

Na paneli Vrstvy zmeňte možnosť Normálne na Mäkké svetlo, potom kliknite na ikonu vektorovej masky a vyberte Nástroj výplne - Prechod. Vyplňte zvýraznenie zdola nahor. Tlačidlo je takmer pripravené.

Krok 15

K tlačidlu môžete pridať nápis. Môžete na ňu tiež použiť efekty prelínania, ako je napríklad vnútorná, vonkajšia žiara, prechod atď. Nebojte sa experimentovať, čím viac fantázie použijete pri svojej práci, tým rýchlejšie si osvojíte samotný editor aj webdizajn.

Odporúča: