3D gombok létrehozása az Adobe Photoshop segítségével

3D gombok létrehozása az Adobe Photoshop segítségével

Sok csodálatos dologban lehet alkotni Adobe Photoshop amelyek online hasznosak, az egyszerű képkeretektől a bonyolult felhasználói felületekig. Az egyik leghasznosabb dolog, amit a Photoshopban létrehozhat, a 3D gombok, amelyek jól jöhetnek, ha egyéni felületű blogot vagy webhelyet üzemeltet.





Ebben a cikkben megmutatjuk, hogyan hozhat létre 3D gombokat a Photoshop segítségével, valamint a vizuális „fel” és „le” állapotokat, így animálhatja őket. (Ebben a cikkben nem foglalkozunk az animációval.)



1. lépés: Készítse elő a dokumentumot

Bár a 3D gombok leggyakrabban felbukkannak a webhelyeken, fontos megjegyezni, hogy más alkalmazások is rendelkezésre állnak ezekhez, például animált GIF-ek, makettezett termékmegjelenítések és mobiljátékok. Attól függően, hogy mire használja ezt a gombot, a végső fájlformátum és mérete eltérhet.





Ha 3D gombot szeretne létrehozni a Photoshopban, létre kell hoznia egy egyéni dokumentumot. Ehhez nyissa meg a Photoshopot, és kattintson a gombra Új létrehozása> Egyéni . Kezdje el beírni az értékeit.

3D gomb létrehozásához vízszintes dokumentumra van szüksége. A miénknél a következőket használtuk:



  • 900 x 300 képpont magas
  • 300 képpont/hüvelyk
  • RGB színmód

Bár ezek a specifikációk határozottan nem szigorú szabályok, ez biztosítja, hogy több mint elegendő hely áll rendelkezésére a munkához, és szükség esetén felfelé és lefelé méretezheti a gomb méretét.

2. lépés: Állítsa be a téglalapját a 3D gombhoz

Miután beállította a fájl specifikációit, a munkaterületre kerül. Vízszintes fehér vászonod lesz egyetlen rétegben, és itt kezded el a gomb felépítését.



A 3D gomb létrehozásához kattintson a gombra Kerekített téglalap eszköz a képernyő bal oldalán, itt pirosan látható. Használhatja a parancsikont is U hogy hozzáférhessen hozzá.

Kattintson egyszer a fehér rétegre: ez automatikusan megjeleníti a Lekerekített téglalap létrehozása doboz. Ezt a négyzetet használja a téglalap méreteinek megadásához.



A gombunkhoz a következőket választottuk:

  • 300 pixel széles
  • 75 pixel magas

Arról is gondoskodtunk, hogy a sarkok 10 képponttal legyenek lekerekítve. Nem túl magas, és nem is túl alacsony. Aztán megnyomtuk rendben .

Jegyzet: A gombok mérete és alakja változó, ezért ne érezze úgy, hogy ezeket a pontos méreteket kell használnia. Ezenkívül, ha további információt szeretne a gyorsbillentyűkről, íme néhány a leghasznosabb Photoshop billentyűparancsok .

Amikor megnyomja rendben , A Photoshop lekerekített téglalapot hoz létre ezekkel a méretekkel a rétegben. Meg tudod változtatni Tölt és Agyvérzés színeket a képernyő bal felső sarkában található legördülő menük segítségével.

Ennek az oktatóanyagnak a céljaira --- és annak illusztrálására, hogy egy 'fel' és 'le' gomb hogyan nézhet ki-a 'le' gombot pirossá tesszük.

3. lépés: Készítse el a gombot 3D -ben

Miután létrehozta az alapgombot, és kiválasztotta a színét, módosítani szeretné a Réteg stílus párbeszédablak. Ennek célja, hogy 3D -s megjelenésű legyen.

Hozzáféréshez Réteg stílus párbeszédpanel, mehet Réteg> Rétegstílus a felső menüből. Az automatikus megjelenítéshez duplán kattinthat a gombot tartalmazó rétegre is. Ez az út sokkal gyorsabb, és mi személy szerint jobban szeretjük.

Miután a Rétegstílus mező megjelenik, lépjen a lehetőségre Ferde és domború . Kapcsolja be.

Ez gyors és egyszerű módja annak, hogy a gomb széleit megemeltebb, „3D” megjelenésnek tegye. Ebben az oktatóanyagban ezeket a beállításokat használtuk:

Szerkezet

  • Stílus: Belső ferde
  • Technika: Véső puha
  • Mélység: 605
  • Irány: Fel
  • Méret: 5
  • Lágyítás: 1

Árnyékolás

  • Szög: 90
  • Magasság: 37
  • Kiemelés mód: Színes Dodge, 55% átlátszatlanság
  • Árnyék mód: Többszörös, 25% átlátszatlanság

A trükk az, hogy elég magasra kell állítani a beállításokat, hogy némi különbséget lehessen látni, de nem olyan erős, hogy elsöprő legyen.

Miután befejeztük a Bevel & Emboss alkalmazást, elmentünk a következő helyre Körvonal és ezt is bekapcsolta. A Contour kissé megerősíti a Bevel & Emboss definícióját, és ehhez az oktatóanyaghoz a beállítást választottuk Kúp - fordított .

Ezután kapcsolja be Színátmenet . Ez adja meg a gomb lekerekített, kissé 'fényes' megjelenését. A beállítások a következők:

  • Keverési mód: Fedvény
  • Átlátszatlanság: 90
  • Stílus: Lineáris
  • Szög: 90
  • Skála: 100

Végül bekapcsoltunk Árnyék , hogy a gomb egy weboldal vagy blog fehér hátterétől kissé „megemelt” legyen. Ismét itt vannak a beállítások:

a legjobb módja a ps1 játékoknak

Szerkezet

  • Keverési mód: Többszörös
  • Átlátszatlanság: 35
  • Szög: 90
  • Távolság: 2
  • Terjedés: 6
  • Méret: 8

Minőség

  • Körvonal: Lineáris
  • Zaj: 0
  • Layer Knocks Out Drop Shadow: Tovább

Most itt az ideje, hogy ezeket a specifikációkat rétegstílusként mentse.

4. lépés: Mentse rétegstílusként

Miután befejezte a gomb beállításait, 3D -s megjelenésű lesz. Mivel nagy az esélye annak, hogy egynél több 3D gombot hoz létre, meg kell találnunk ennek gyors és egyszerű módját.

Itt van, hogyan.

Kattintás előtt rendben ban,-ben Réteg stílus párbeszédpanelen kattintson a gombra Új stílus . Amikor ezt megteszi, a Photoshop elmenti ezt a rétegstílust, amelyet a gombjához készített.

Ha Photoshop CC -t használ, akkor ez az új stílus el lesz mentve az Ön stílusába Könyvtárak szakaszban, ahogy fent láthatod. Nagyon gyorsan és könnyen elérhető.

5. lépés: A mentett rétegstílus használata

Most, hogy megtervezte a gombját, és elmentette rétegstílusként, nézzük meg, hogyan működik a „fel” állapotában. Szó sincs hazugságról, ez felére csökkenti a munkaidőt.

Először hozzunk létre egy másik gombot közvetlenül a piros gombréteg felett, így. Tegyük zöldre, hangsúlyozandó.

Következő --- ahelyett, hogy duplán kattintana magára a rétegre, hogy megjelenjen a Rétegstílusok párbeszédpanel --- kattintson duplán a réteg stílusára Könyvtárak panel.

Amikor ezt megteszi, a Photoshop automatikusan alkalmazza a mentett stílust az új gombrétegre, miközben megtartja új színét és formáját. Most két gombja van-az egyik felfelé, a másik lefelé-, és ez olyan egyszerű. Szeretem ezt a parancsikont.

6. lépés: Szöveg hozzáadása a gombhoz

Ezután szöveget adunk a gombhoz.

Szöveg hozzáadásához hozzon létre egy új réteget a két gombréteg felett. Kattints a Típus eszköz hogy elkezdje a gépelést.

Ehhez az oktatóanyaghoz a „feliratkozás” szót fogjuk írni, mert ezt gyakran látja a webhelyeken és a közösségi média platformokon.

Továbbá egy san serif webbiztonságos betűtípust fogunk használni. A végső választás, hogy melyiket használja a saját gombjához, csak rajtad múlik. A Montserrat, a Proxima Nova, az Arial és a Verdana széles körben használt alternatívák, és biztonságosak az interneten.

Ezt követően azonban van még néhány finom módosítás, amelyet meg kell tennie ahhoz, hogy ez a szöveg 'pop' legyen.

Először kattintson duplán a szöveget tartalmazó rétegre, hogy megjeleníthesse azt Réteg stílus párbeszédablak.

Ezután kattintson a gombra Belső árnyék , hogy egy kis mélyedést (vagy elsüllyedt területet) adjon a szöveghez. Ebből látszik, hogy a betűk be voltak vésve a gombba. Az oktatóanyaghoz használt pontos beállítások az alábbiakban találhatók.

Szerkezet

  • Keverési mód: Szorozz
  • Átlátszatlanság: 35
  • Szög: 90
  • Távolság: 2
  • Fojtás: 4
  • Méret: 1

Minőség

  • Körvonal: Lineáris
  • Zaj: 0

Ezután alkalmazza a Színátmenet ezekhez a betűkhöz, hogy könnyebben beleolvadjanak a gombba anélkül, hogy laposnak tűnnének. Ismét a mi beállításaink a következők:

  • Keverési mód: Színes égés
  • Átlátszatlanság: 90
  • Stílus: Lineáris
  • Szög: 90
  • Skála: 100

7. lépés: A befejezés

Miután létrehozta ezt a szövegstílust --- különösen, ha újra szeretné használni-, lépjen a következőre: Új stílus és mentse el, mielőtt rákattint rendben .

Ha ezt lezárta, akkor gyorsan válthat oda -vissza a két gombréteg közötti láthatóságon, hogy lássa, hogyan néznek ki a „fel” és „le” állapotok.

Elég menő, mi? A fájl mentéséhez menjen Fájl> Mentés másként , és mentse el megfelelő fájlformátumként bármilyen projekthez, amelyen dolgozik.

Testreszabhatja blogját 3D gombokkal és modulokkal

Most, hogy már tudja, hogyan hozhat létre 3D gombokat a Photoshop alkalmazásban, kreatívvá teheti magát, és saját igényeinek megfelelően tervezheti meg saját 3D gombjait. És ezekkel a készségekkel az arzenáljában olyan terméket készíthet, amely nemcsak professzionális, hanem személyes megjelenésű is.

Szeretne más dolgokat is tudni ezzel a programmal? Itt van hogyan lehet eltávolítani a hátteret a Photoshopban .

Részvény Részvény Csipog Email Hogyan érheti el a Google beépített buborékszintjét Androidon

Ha valaha is szüksége volt arra, hogy megbizonyosodjon arról, hogy valami vízszintesen van -e, akkor pillanatok alatt buborékszintet kaphat a telefonján.

Olvassa tovább Kapcsolódó témák
  • Kreatív
  • Adobe Photoshop
  • Képszerkesztési tippek
  • Photoshop bemutató
A szerzőről Shianne Edelmayer(136 megjelent cikk)

Shianne rendelkezik Bachelor diplomával a tervezésben és háttérrel rendelkezik a podcastingben. Most vezető íróként és 2D -s illusztrátorként dolgozik. Kiterjed a MakeUseOf kreatív technikájára, szórakoztatására és termelékenységére.

Továbbiak Shianne Edelmayer -től

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide