Com crear botons 3D amb Adobe Photoshop

Hi ha moltes coses increïbles que podeu crear Adobe Photoshop que són útils en línia, que van des de marcs d’imatges simples fins a complexes interfícies d’usuari. Una de les coses més útils que podeu crear a Photoshop són els botons 3D, que us seran útils si teniu un bloc o un lloc web amb una interfície personalitzada.

En aquest article us mostrarem com crear botons 3D mitjançant Photoshop, juntament amb els estats visuals 'amunt' i 'avall', de manera que pugueu animar-los. (No tractarem l'animació en aquest article.)

Pas 1: prepareu el document

Tot i que els botons 3D apareixen amb més freqüència als llocs web, és important tenir en compte que hi ha altres aplicacions per a ells, com ara GIF animats, pantalles de productes maquetes i jocs per a mòbils. Depenent de per a què vulgueu crear aquest botó, el format de fitxer final i les dimensions d'aquest poden variar.

Per crear un botó 3D a Photoshop, haureu de crear-ne un document personalitzat. Per fer-ho, obriu Photoshop i feu clic a Crea un nou> Personalitzat . Comenceu a escriure els vostres valors.

Per crear un botó 3D, voldreu un document horitzontal. Per al nostre, hem utilitzat:

Alçada de 900 x 300 píxels
300 píxels / polzada
Mode de color RGB

Tot i que aquestes especificacions definitivament no són una regla dura i ràpida, això us garantirà que disposeu d’espai més que suficient per treballar i la possibilitat d’escalar la mida del botó amunt i avall segons sigui necessari.

Pas 2: configureu el vostre rectangle per al botó 3D

Després de configurar les especificacions del fitxer, accedireu a l'espai de treball. Tindreu un llenç blanc horitzontal en una sola capa, i aquí és on començareu a construir el botó.

Per crear el botó 3D, feu clic a Eina de rectangle arrodonit al costat esquerre de la pantalla, que es veu aquí en vermell. També podeu utilitzar la drecera U per accedir-hi.

Feu clic una vegada a la capa blanca: això us mostrarà automàticament Crea un rectangle arrodonit Caixa. Utilitzarà aquest quadre per especificar les dimensions del rectangle.

Pel nostre botó, vam anar amb:

300 píxels d'ample
75 píxels d’alçada

També ens vam assegurar que les cantonades estiguessin arrodonides en 10 píxels. Ni massa alt ni tampoc massa baix. Després vam prémer D'acord .

Nota: Els botons varien segons la mida i la forma, així que no us sembli que hàgiu d'utilitzar aquestes dimensions exactes. A més, si voleu obtenir més informació sobre les dreceres, aquí en teniu algunes les ordres de teclat més útils de Photoshop .

Quan premeu D'acord , Photoshop crearà un rectangle arrodonit amb aquestes dimensions dins de la capa. Podeu canviar-ne Omplir i Ictus colors mitjançant els menús desplegables que hi ha a l'extrem superior esquerre de la pantalla.

Als efectes d'aquest tutorial --- i per il·lustrar com poden ser els botons 'amunt' i 'avall' --- farem que el nostre botó 'avall' sigui vermell.

Pas 3: feu que el vostre botó sigui 3D

Després de crear el botó bàsic i triar-ne el color, voldreu ajustar-lo al fitxer Estil de capa Caixa de diàleg. Això és perquè tingui un aspecte més 3D.

Per accedir al vostre Estil de capa quadre de diàleg, podeu anar-hi Capa> Estil de capa des del menú superior. També podeu fer doble clic a la capa que conté el botó per mostrar-lo automàticament. D'aquesta manera és molt més ràpid i nosaltres ho preferim personalment.

Un cop el quadre Estil de capa estigui activat, aneu a l'opció Bisell i relleu . Encendre'l.

Aquesta és una manera ràpida i senzilla de donar a les vores del botó un aspecte '3D' més elevat. Per a aquest tutorial, aquests són els paràmetres que hem utilitzat:

Estructura

Estil: Bisell interior
Tècnica: Cisell suau
Profunditat: 605
Direcció: Amunt
Mida: 5
Estovar: 1

Ombra

Angle: 90
Altitud: 37
Mode de ressaltat: Color Dodge, 55% d’opacitat
Mode ombra: Opacitat múltiple, 25%

El truc és fer que els paràmetres siguin prou elevats perquè pugueu veure alguna diferència, però no tan forts que resultin aclaparadors.

Després d’acabar amb Bevel & Emboss, vam anar a Contorn i ho vaig activar també. Contour fa que la definició de Bevel & Emboss sigui una mica més forta i, per a aquest tutorial, vam triar la configuració Con: invertit .

A continuació, activeu Superposició de degradat . Això és el que dóna a un botó aquest aspecte arrodonit i lleugerament 'brillant'. La configuració és la següent:

Mode de fusió: Superposició
Opacitat: 90
Estil: Lineal
Angle: 90
Escala: 100

Finalment, vam encendre Gota d'ombra , perquè el botó sembli una mica 'aixecat' del fons blanc d'un lloc web o bloc. Una vegada més, aquí teniu la configuració:

connecteu el controlador de Xbox al PC Bluetooth

Estructura

Mode de fusió: Múltiples
Opacitat: 35
Angle: 90
Distància: 2
Propagació: 6
Mida: 8

Qualitat

Contorn: Lineal
Soroll: 0
Layer Knocks Out Shadow: Encès

Ara és hora de desar aquestes especificacions com a estil de capa.

Pas 4: deseu com a estil de capa

Un cop hàgiu acabat amb la configuració del botó, començarà a semblar 3D. Com que és molt probable que creeu més d'un botó 3D, hem de trobar una manera ràpida i senzilla de fer-ho.

Així és com.

Abans de fer clic D'acord al Estil de capa quadre de diàleg, feu clic a Nou estil . Quan ho feu, Photoshop desarà aquest estil de capa que heu creat per al botó.

Si utilitzeu Photoshop CC, aquest nou estil es desarà al vostre Biblioteques secció, com podeu veure més amunt. És molt ràpid i fàcil d’accedir-hi.

Pas 5: Com utilitzar un estil de capa desada

Ara que heu dissenyat el botó i l'heu desat com a estil de capa, vegem-lo en acció per al vostre estat de 'pujada'. Sense mentir, això reduirà el temps de treball a la meitat.

En primer lloc, creem un altre botó directament a sobre de la capa de botons vermells, de manera que sigui així. Fem-ho verd, per posar èmfasi.

Següent --- en lloc de fer doble clic a la capa per mostrar el fitxer Estils de capa quadre de diàleg --- feu doble clic a l'estil de capa del fitxer Biblioteques panell.

Quan ho feu, Photoshop aplicarà automàticament el vostre estil desat a la nova capa de botons, mantenint el color i la forma nous. Ara teniu dos botons: un en estat cap amunt i un en cap avall, i és molt senzill de fer. M’encanta aquesta drecera.

Pas 6: afegiu text al botó

A continuació, afegirem text al botó.

Per afegir text, creeu una capa nova a sobre de les dues capes de botó. Feu clic a Eina de tipus per començar a escriure.

Per a aquest tutorial, escriurem la paraula 'subscriure' perquè és una cosa que veieu amb força freqüència a llocs web i plataformes de xarxes socials.

També utilitzarem un tipus de lletra segur de web san serif. Depèn de vosaltres la tria final que utilitzeu per al vostre propi botó. Montserrat, Proxima Nova, Arial i Verdana són alternatives àmpliament utilitzades i segures per al web.

Un cop fet això, però, encara hi ha alguns canvis més subtils que heu de fer per aconseguir que aquest text 'aparegui'.

Primer, feu doble clic a la capa que conté el text perquè pugueu mostrar-lo al fitxer Estil de capa Caixa de diàleg.

A continuació, feu clic a Ombra interior , per afegir una mica de depressió (o zona enfonsada) al text. Això fa que sembli que les lletres s’han gravat al botó. A continuació es mostren els paràmetres exactes que hem utilitzat per a aquest tutorial.

Estructura

Mode de fusió: Multiplicar
Opacitat: 35
Angle: 90
Distància: 2
Estrangulació: 4
Mida: 1

Qualitat

Contorn: Lineal
Soroll: 0

A continuació, apliqueu a Superposició de degradat a aquestes lletres, perquè es combinin més fàcilment amb el botó sense que apareguin planes. De nou, la configuració per a la nostra és:

Mode de fusió: Color cremat
Opacitat: 90
Estil: Lineal
Angle: 90
Escala: 100

Pas 7: Acabar

Després de crear aquest estil de text, sobretot si voleu tornar-lo a utilitzar, aneu a Nou estil i deseu-lo abans de fer clic D'acord .

Amb això ajustat, podeu canviar ràpidament la visibilitat entre les dues capes de botons per veure com són els estats 'amunt' i 'avall'.

Bastant genial, eh? Per desar el fitxer, aneu Fitxer> Desa com a , i deseu-lo com a format de fitxer adequat per al projecte en què estigueu treballant.

Personalitzeu el vostre bloc amb botons i widgets 3D

Ara que ja sabeu com crear botons 3D a Photoshop, podeu ser creatiu amb ell dissenyant els vostres propis botons 3D segons les vostres necessitats. I amb aquestes habilitats al vostre arsenal podeu crear un producte que no només sigui professional, sinó també d’aspecte personal.

Voleu conèixer altres coses que podeu fer amb aquest programa? Aquí hi ha com eliminar un fons a Photoshop .

Compartir Compartir Tweet Correu electrònic Com accedir al nivell de bombolla integrat de Google a Android

Si alguna vegada heu necessitat assegurar-vos que hi ha alguna cosa al mateix nivell, podeu obtenir un nivell de bombolla al telèfon en qüestió de segons.

Llegiu a continuació Temes relacionats

Creativa
Adobe Photoshop
Consells d’edició d’imatges
Tutorial de Photoshop

Sobre l'autor Shianne Edelmayer(136 articles publicats)

Shianne té una llicenciatura en disseny i formació en podcasting. Ara treballa com a escriptora principal i il·lustradora en 2D. Cobreix tecnologia creativa, entreteniment i productivitat per a MakeUseOf.

Més de Shianne Edelmayer

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us