Design Elegantní video přehrávač rozhraní - Photoshop výuka
Tato éra je jen o elegantní rozhraní. Nejen, že vypadá profesionálně, ale co je nejdůležitější, dává lidem pocit spolehlivosti, a to je přesně to, co většina firem hledá. Pocítím důležitost a ukážu vám krok za krokem navrhnout elegantní rozhraní přehrávače videa.
K vytvoření tohoto rozhraní použijeme styly vrstev, vektorové kreslení a některé ruční výkresy. Pojďme do procesu tvorby!
Požadovaný zdroj
Chcete-li sledovat tento návod, budete potřebovat tento bezplatný zdroj.
- Opakovatelný obrazový vzorek z PSDfreemium
Krok 1: Vytváření pozadí
Začněte vytvořením nového souboru o velikosti 800 × 500 px. Nakreslete radiální gradient z bílé na šedou.
Krok 2
Stmívání přechodu přidáme úpravou Layer Layer> Hue / Saturation a nastavením Lightness.
Krok 3
Vytvořte novou vrstvu a vyplňte ji bílou barvou. Klepněte na příkaz Filtr> Hluk> Přidat šum. Nastavte režim prolnutí na Násobit.
Krok 4
Duplicitní vrstvu šumu, kterou jsme právě vytvořili stisknutím klávesy Ctrl + J. Aktivace nástroje pro přesun a pak stiskněte šipku dolů a šipku vpravo, abyste ji posunuli o 1 px dolů a doprava. Stiskněte Ctrl + I pro změnu barvy a nastavte režim prolnutí na obrazovku. Tady máme pěknou texturu.
Krok 5
Vyberte obě vrstvy šumu a pak stiskněte klávesu Ctrl + G, abyste ji vložili do skupiny. Snižte opacitu na 50%.
Krok 6: Základní tvar videopřehrávače
Nakreslete obdélník s barvou: # 151d25.
Přidat styly vrstev: Překrytí přechodu a zdvih.
Zde je výsledek po přidání stylů vrstvy.
Krok 7: Záhlaví
V horní části hlavního rozhraní nakreslete tvar obdélníku. Nastavte barvu na # 272e36. Tento obdélník použijeme pro záhlaví.
Přidání stylů vrstvy: Přetažení stínů a přechodů.
Krok 8
Přiblížte se k levé straně obdélníku. Aktivujte nástroj tužka a nastavte jeho velikost štětce na 1 px. Nakreslete některé čáry jako zvýraznění.
Krok 9
Nakreslete další zvýraznění na horní části záhlaví. Vytvořte novou vrstvu a pak nakreslete 1 px bílou čáru. Vymažte oba konce pomocí nástroje pro měkkou gumu. Snižte opacitu na 10%.
Krok 10
Opakujte předchozí postup na pravé straně záhlaví.
Krok 11
Zde je to, co máme ve 100% zvětšení. Jak vidíte, vrchol je velmi jemný. Ale rozhraní už není tak ploché.
Krok 12: Tlačítko Minimum, Maximum a Close
Nakreslete obdélník na pravé straně záhlaví. Použijte barvu # 5c3936. Toto bude pozadí pro tlačítko zavřít.
Přidat styl vrstvy: Překrytí přechodu.
Krok 13
V režimu přidejte blízký symbol vyrobený ze dvou překrývajících se obdélníkových cest, Přidat do tvaru.
Přidat styl vrstvy: Vnější záře.
To je výsledek poté, co jsme přidali vnější záři na symbol blízký.
Krok 14
Tento postup opakujte, chcete-li přidat symbol maximalizace a minimalizace.
Krok 15
Přidejme oddělovač mezi každý symbol. Vytvořte novou vrstvu, nakreslete 1 px černou čáru a snižte její Opacity na 30%. Vedle ní nakreslete další 1 px černou čáru a snižte její vrstvu Opacity na 70%. Znovu, tentokrát kreslit 1 px bílou čáru s Opacity 5%.
To je to, co máme ve 100% velikosti. Nyní máme pěknou vloženou linku a přidáváme hloubku do rozhraní.
Krok 16
Tyto řádky umístěte do samostatné vrstvy skupiny tak, že je vyberete a stisknete klávesu Ctrl + G. Podržením klávesy Alt a přetažením ji duplikujete. Umístěte čáry mezi každý symbol.
Krok 17
Přidat titul videa do záhlaví. Přidání stylů vrstvy: Přetažení stínů a přechodů. Tyto styly vrstev přidají do textu kovový efekt.
Krok 18: Obrazovka
Nakreslete obdélník pro oblast obrazovky. Použijte # 272e36 pro jeho barvu.
Přidání stylů vrstvy: Přetažení stínů a přechodů.
Krok 19
Vytvořte novou vrstvu a pak nakreslete zvýraznění pomocí nástroje tužkou s 1 px štětcem.
Krok 20
Opět nakreslete další zvýraznění na horní straně obrazovky.
Krok 21
Nakreslete menší obdélník s barvou # 252626.
Přidat styly vrstev: Vržený stín, Vnitřní stín a Překrytí přechodu.
To je výsledek po přidání stylů vrstvy.
Krok 22: Indikátor průběhu
Pod obrazovkou nakreslete obdélník s barvou # 272e36.
Přidání stylů vrstvy: Přetažení stínů a přechodů.
Krok 23
Stejně jako to, co jsme dělali dříve, nakreslíme na obdélník některé body pomocí nástroje 1 px tužky.
Krok 24
Zde je to, co máme ve 100% zvětšení.
Krok 25
Nakreslete menší obdélník s barvou # 313131.
Přidat styly vrstev: Vnitřní stín, Vnitřní záře a Překrytí přechodu.
To je to, co máme.
Krok 26
Duplikovaný obdélník, který jsme vytvořili stisknutím kláves Ctrl + J. Změňte jeho barvu na # 357ffa.
Změna nastavení stylů vrstvy.
Pomocí těchto nastavení to máme teď.
Krok 27
Aktivujte nástroj pro přímý výběr a poté vyberte body na levé straně. Stiskněte několikrát Shift + Šipka vlevo pro přesun vybraných bodů.
Krok 28
Na horní liště načítání přidejte informace o celkové časové stopě.
Krok 29
Nakreslete černý obdélník pokrývající průběh a poté snižte jeho krytí na 10%.
Níže můžete vidět jemný rozdíl v osvětlení indikátoru průběhu před a po přidání černého obdélníku.
Krok 30
Kreslení zvýraznění na pruhu postupu pomocí nástroje 1 px tužky.
To je to, co vidíme ve 100% zvětšení.
Krok 31: Tlačítka
Nakreslíme další obdélník s barvou # 272e36. Tentokrát jej použijeme k umístění některých tlačítek regulátoru.
Přidání stylů vrstvy: Přetažení stínů a přechodů.
Krok 32
Přidejte některá zvýraznění na levé straně obdélníku.
Krok 33
Použijte základní nástroj pro kreslení některých tlačítek.
Krok 34: Stín
Podržením klávesy Ctrl a kliknutím na základní tvar rozhraní vytvoříte nový výběr založený na jeho tvaru. Vytvořte novou vrstvu a umístěte ji za přehrávač videa. Vyplňte výběr černou barvou. Odstraňte výběr stisknutím klávesy Ctrl + D. Stmívání změňte pomocí Gaussova rozostření, klepněte na příkaz Filtr> Rozostření> Gaussovské rozostření.
Krok 35: Přidání odrazu
Duplikovat základní tvar rozhraní a snížit jeho výplň na 0%. Umístěte ho na horní část obrazovky. Nakreslete mnohoúhelník na levé straně obdélníku a nastavte jeho režim na odečet.
Přidat styl vrstvy: Překrytí přechodu.
Krok 36: Jemný vzor na obrazovce
V současné době se obrazovka jeví jako velmi plochá. Vyberte oblast hlavní obrazovky a vyplňte ji libovolnou barvou. Nastavit výplň na 0%.
Chyť pěkný pixel vzor z PSDfreemium. Použijte jedno z dostupných nastavení ve stylu vrstvy: Překrytí vzoru.
Ujistěte se, že vzor je velmi jemný nastavením jeho Opacity na pouze 1%.
Krok 37
Nakonec aktivujte kartáčovací nástroj. Nastavte tvrdost štětce na 0% a nastavte její opacitu na velmi nízkou, 2 nebo 3%. Na střed obrazovky promněte měkkou záři.
Krok 38: Výsledek
To je výsledek tutoriálu. Doufám, že jste se naučili nějaké nové techniky a pobavili jste se při tom.
Stáhnout PSD
Nelze dosáhnout určitého kroku? Zde je výsledek PSD soubor pro vás otestovat a hrát si s.
- Elegantní video přehrávač rozhraní výukový soubor PSD