Hey guys back-to-back "Tutorials de Photoshop. En aquest tutorial aprendrem com crear I-Phone Com botó en Photoshop. Això és molt simple i molt eficaç tutorial. Espero que gaudeixin d'aquest tutorial.

Final Preview

Això és el que hem anat fer avui

Pas # 1

Photoshop Obrir i crear un nou document, el meu és de 550 × 398px amb un fons blanc.

Pas # 2

Ompli el color de la capa de fons, el color de la meva és # 333.333.

Pas # 3

Creeu un nom de la nova capa de la capa d'gradient Stripe. Tria l'eina Marc Rectangular i crear una banda blanca.

Disseny de la Capa de ratlles doble clic sobre la miniatura de la capa de ratlles en el panell Capes per obrir el quadre de diàleg Estil de capa, anem a aplicar un efecte de Gradiant vertical per el fons. Després feu clic al gradient d'olor c sobre el dret de l'opció de degradat per obrir l'Editor de degradat de color.

Feu doble clic al left-color-stop i entrar en el valor de color # aaaaaa, feu doble clic a l'esquerra-centre-color-stop i entrar en el valor de color # CCCCCC, feu doble clic al centre-dreta-color-stop i entrar a l' valor de color # DDDDDD, a continuació, feu doble clic sobre el dret de-color-stop i entrar en el valor de color # ffffff.

Hauria de tenir aquest aspecte.

Pas # 4

Seleccioneu l'eina Rectangle arrodonit i crear el botó, el radi meu és 90X40px.

Ara apliqui algun efecte

Superposició de degradat

L'estil del botó de doble clic sobre la miniatura de la capa de botó en el panell Capes per obrir el quadre de diàleg Estil de capa, anem a aplicar un efecte de Gradiant vertical per el botó. Després feu clic al gradient de color a la dreta de l'opció de degradat per obrir l'Editor de degradat de color.

Feu doble clic al left-color-stop i entrar en el valor de color # 000000, feu doble clic a l'esquerra-centre-color-stop i entrar en el valor de color # 222222, feu doble clic al centre-dreta-color-stop i entrar a l' valor de color # 444.444, a continuació, feu doble clic sobre el dret de-color-stop i entrar en el valor de color # 666666.

Bisell i relleu

Després apliques l'estil de capa Bisell i Relleu. Canviar l'estil d'exterior Bisell, de canviar els valors de la profunditat, mida i suavitzar. Trio Per establir la profunditat de 100%, talla de 1px i estovar a 10px

Part important d'aquest tutorial: Mantingui l'angle a -90 ^°, alçada a 40 ^o

Mode destacat: que jo decideixi establir l'opacitat al 100%.

Mode d'ombra: trio per establir l'opacitat al 100%.

Cop

Finalment, s'aplicarà el moviment. Primer canvi dels valors de la seva mida. Puc triar per establir la mida de 1px. Canvi de la posició a l'interior

Puc escollir per establir la Opacitat al 80%.

Canviar el color dels traços per defecte # 222222

Hauria de tenir aquest aspecte.

Pas # 5

L'eina Selecciona un text i escriviu el text en la part davantera.

Anem a aplicar alguns efectes per al text.

Bisell Relleu

Feu doble clic a la miniatura de la capa de text en el panell Capes per obrir el quadre de diàleg Estil de capa. Anem a aplicar Bisell Relleu, Primera Canviar l'estil de bisell exterior i la tècnica per Cincel tou, de canviar els valors de profunditat, direcció, mida i suavitzar. Trio Per establir la profunditat a 130%, direcció en Mida de Down a 1px i estovar a 0px

Part important d'aquest tutorial: Mantingueu l'angle de 90 ^°, alçada a 30 ^o

Mode destacat: que jo decideixi establir l'opacitat al 0%.

Mode d'ombra: trio per establir la Opacitat al 50%.

Final Preview

Per últim, hem fet aquest tutorial.

Això és el que hem anat fer avui

Descarregueu el fitxer de codi font

Si ho desitja, per comprovar el seu treball, podeu descarregar l'arxiu PSD per aquest tutorial.

iphone-com-buttons.rar (21,3 KB)

Filed under: Photoshop, Tutorials per admin