modern

Csak Photoshop

Photoshop oktatóanyagok és források

Üdvözöljük a SoloPhotoshop alkalmazásban, ahol a legjobb információkat találja az Adobe Photoshop oktatóanyagokról, erőforrásokról és cikkekről!

Modern műanyag gomb a webhez a Photoshop | Csak Photoshop

Modern web gombok a Photoshop alkalmazással

Folytatva a webes interfészek tervezési elemeinek sorozatát, most létrehozunk egy Modern műanyag gombot Photoshop alkalmazással.

Az Elegáns pasztell gombok bemutató után a Modern műanyag gomb második sorozatával fogunk dolgozni, amely egy kicsit összetettebb, de még nem igényel rendkívüli ismereteket a Photoshopról.

Új dokumentumot fogunk létrehozni a gombunkhoz, ha ugyanazokkal a tulajdonságokkal kívánja létrehozni, mint amit használtam. Nyissa meg a "Fájl> Új" menüt.

Ezután aktiválnia kell a szabályokat, és létre kell hoznia néhány útmutatót, amelyek segítenek nekünk összpontosítani az új gombot. A gomb szélessége 220 képpont, magassága 80 képpont. Vigye a "Lekerekített téglalap" eszközt, és csúsztassa el a 35 képpontos sugarú csúszkát az útmutatók segítségével a gomb alakjának létrehozásához, ahogyan azt a következő képen látjuk.

Rétegstílusok alkalmazása

A gomb plasztikus hatásának megteremtéséhez ismét rétegstílusokat használunk, amelyek egyszerűek és hatékonyak, de mindenekelőtt elmenthetők későbbi használatra. Kattintson duplán a gombok rétegére a rétegek palettán, és megjelennek a Stílusok opciók.

A következő képek paramétereit követve el fogjuk érni a műanyag effektus stílusunkat:

Külső ragyogás

Belső shinning

Színátmenet

Stroke

Műanyag stílus

Gombvilágítás

A rétegstílusokkal nehezen elérhető effektus a világításé, amely gyönyörűen növeli a design kontrasztját, ezért ezt a hagyományos módon fogjuk megtenni, pár fehér réteggel nem fókuszálva és játszunk egy kicsit a "Rétegmódok".

A vezetők felhasználásával gömb alakú választékot hozunk létre az alakunk körül, amint az alább látható:

Ezután csökkentjük a választékot, és új rétegre töltjük, fehér színnel, a kép tökéletesen néz ki, ahogy kell:

A "Ctrl + D" megnyomásával töröljük a kijelölést. Most ugyanezt tesszük, de új rétegben, és most feljebb mozgatjuk. Ha szeretné, lemásolhatja az első réteget, majd megfordíthatja annak helyzetét, és felemelheti a megfelelő helyzetbe, amelyet a képen láthatunk:

10 px sugarú "Gauss-elhomályosítást" alkalmazunk (Szűrő> Elmosódás> Gauss-elmosódás) mindkét rétegre, majd a "Réteg módot átfedésre" kell változtatni, és az opacitást 50 és 75% közötti értékekre kell csökkenteni. hogy mit akar elérni. És valójában készen áll a Modern műanyag gombunk, azonban néhány egyszerű részletet hozzáadunk a jobb megjelenéshez.

Extra tételek

Nos, hozzáadunk néhány szöveget és az egyik alakzatot, amelyet maga a Photoshop hoz, majd néhány egyszerű réteghatással készen állnak.

A Photoshop Custom Forms-ban nagyszámú ábrát találunk, amelyeket felhasználhatunk, ezúttal egy egyszerű nyílt használtam, amelyet lemásoltam és elforgattam, hogy olyan dupla nyílnak tűnjön, amely letöltést vagy ilyesmit jelez valami jobb fog történni velük haha. Az alakzat összekapcsolása után a "Belső árnyék és színátfedés" rétegstílusokat alkalmazzuk az alábbi paraméterekkel:

0% -ra kell csökkenteni a réteg "kitöltését", ezt azért tesszük, hogy eltűnjön a forma eredeti színe, és hogy csak a legutóbb alkalmazott rétegstílusok jelennek meg.

A "Szöveg eszközzel" írtam "Műanyag gombot", majd rétegstílusokkal a következő árnyékot alkalmazzuk. Játssz a lehetőségekkel, hogy más és jobb eredményeket érj el, ha akarod.

Végül felvettem egy alternatív szöveget, hogy ötlet híján a "Lorem Ipsum" -t tettem fel, és egy árnyékot is alkalmazunk, ebben az esetben ugyanazon gomb színének megfelelő színt. A következő kép a paramétereket mutatja:

És ennyi, megvan az egyszerű, de feltűnő és modern műanyag gombunk, amely biztosan hasznos lesz az Ön webes projektjeiben.

Találkozunk a sorozat következő oktatóanyagában ...