Creando Interfaces o Skins

Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Anunciar en SoloPhotoshop

Creando Interfaces o Skins | Solo Photoshop

Tutorial Photoshop

Tutorial por Solo Photoshop

Solo Photoshop

TUTORIALES CREANDO INTERFACES O SKINS	Tutorial publicado por Pixeltool - Pixeltool.com.ve Te recomendamos que visites y conozcas los tutoriales y artículos photoshop de Pixeltool.com.ve.
Bienvenidos nuevamente a uno de mis tutoriales. En este sencillo tutorial les mostraré el cómo realizo interfaces para aplicaciones, páginas web o "skins" utilizando Photoshop. Recuerden, ustedes pueden cambiar algunas herramientas o valores de los que yo aquí utilizo, experimentando con las herramientas que se sientan más a gusto y encontrando un estilo más propio. Hablando de estilos, pueden encontrar los styles para PS 7.0 que utilizé en este ejemplo aquí. Con el botón derecho del mouse, haz clic y selecciona "guardar destino como..." 1. La Base En un nuevo archivo en blanco, crea un nuevo layer y en este, dibuja un ovalo y rellenalo de negro. Centralo, y añade el style "soft metal".

2. Figura interna Haz una selección del ovalo y redúcela unos 15 puntos. Ahora, corta ciertas partes, haciendo la imagen más interesante. Copia todo el contenido del layer y pégalo en un nuevo alpha channel.
3. Blur En el alpha channel, aplicamos un gaussian blur de 15 px.
4. Levels Teclea Ctrl+L, y en el cuadro de diálogo de levels, usa los valores que ves en la imagen a la izquierda. Copia el channel alpha, y pega la imagen en un nuevo layer (un layer standard).
5. Esquinas El truco con el alpha resulta en una imagen con esquinas redondeadas, que combina perfectamente con este estilo. Seleccionamos el contenido del layer (Ctrl + Click) contraemos la selección y creamos una imagen en otro layer.
6. Mas bisel En este nuevo layer, llenamos la selección de negro y aplicamos el mismo style que le dimos a la "base" pero esta vez, invertimos el sentido de la degradación. Este cambio incrementará el effecto de bisel en esta parte de la imagen.
7. Pantalla En un nuevo layer dibujamos una forma para nuestra pantalla y la redondeamos usando el "truco del alpha". La rellenamos con una degradación, invirtiendo nuevamente el sentido de ésta para más efecto.
8. Color Un layer más para crear la pantalla: Una degradación en tonos verdes y una sombra interna. Añadímos también unas líneas delgadas para dar el efecto de "scan lines".
9. Detalles Y el resto de los detalles de la pantalla: El texto, algunas líneas para el volumen y el ecualizador... Lo que quieras... Ya casi terminamos.
10. Detalles finales Muy bien... el resto incluye añadir elementos como botones, tornillos y cosas como esas... Por supuesto, un logotipo también, si lo deseas. Recuerden el uso del "truco del alpha" y los styles para dar un efecto final agradable.
Agradecemos a Pixeltool, por permitir la publicación de este tutorial.
Si quieres publicar en SoloPhotoshop, ponte en contacto.

Comentarios de Creando Interfaces o Skins | Solo Photoshop

↑ Tutorial

D Vivallo

2005-07-28 14:31

Â¡Bien Incompleto!M
charli

2005-07-29 11:31

ESPECIFICAR UN POCO MíS CADA PASO, PARA NOSOTROS LOS PRINCIPIANTES, E INDICAR DONDE APLICAR LOS ESTILOS Y TAMAí‘OSM
Wes Janson

2005-07-31 10:31

Y como lo utilizas de skin?... porfavor respondan. M
kary55

2005-07-31 16:31

si por favor especificar mejor cada paso, nunca pude encontrar el style en el photoshop cs, ademas de que no quedaron claras otras cosas!M
ayesha

2005-07-31 23:31

Esta muy bueno y encima super sencillo pero me queda una duda ligera. Una vez terminao el tratamiento de la imagen, bajo que formato debo guardarla para poder emplearla como skin. O eso depende de el programa en que se va a usar al final (y sus utilidades incluidas), porque si mal no recuerdo, cada programador elabora sus skins en base a sus propios criterios y emplea para la importación alguna utilidad creada a tal efecto. Nuevamente gracias.M
albert_kun

2005-08-04 11:31

yo tuve que hacer todo a como me saliera asi que no me salio igual creo que deberian de explicar mejorM
N4R4K0

2005-08-05 22:31

pero lo del texto como lo ap`lico eso no lo explicaste pero se ve interesante eso M
rastelman

2005-08-07 19:31

GRAN TRABAJO PIXEL! Y TAN SENCILLO QUE PARECE GRACIAS rastelmanM
ringuita

2005-08-12 13:31

la verdad es que esta interesante pero please q sea mas explisito por que no quedo muy claro y no lo puede terminar envien un tutorial mas completo si........M
dgo777

2005-08-15 18:31

muy interesante tu tutorial pero quiero saber si lo puedo descargarM
macarron

2005-08-16 15:31

aja, y luego, completenlo!!!!!!!!!!!!!!!1 M
hfabra

2005-08-17 16:31

excelente... pero debe ser un poco mas detallado tengo aprox 5 horas tratando de realizar el mismo ejercicio y no he podido espero que tomes misugerencia M
angelo22

2005-08-19 12:31

le falta mas explicacion al tutorial pero esta muy bueno M
Ice_n64

2005-08-25 19:31

Muy Bueno voy a tratar d hacerlo. GraciasM
kacier

2005-08-31 02:31

Que PHOTOSHOP ES ? para ponerlo a prueba ... 7.0 Cs o ke version ? porfa respondan .. M
Shepar

2005-09-01 09:30

Esta bien, pero falta más detalle. Un novato se pierde rápido.M
tubarrio3

2005-09-04 21:30

muy bueno e interesanteM
apocalipsi

2005-09-08 14:30

esta muy bien, pero.... no consigo el estilo "soft metal"M
troyan0

2005-09-10 13:30

me parece algo muy complicado ¿sera por que te falto un poco mas de pasiencia al publicar este tutorial?.. recuerda que estas tratando con NOVATOS bye.. simple consejo M
angelnerm

2005-09-12 12:30

Por Favor especifica un poco mas... la verdad no tiene nada de "sencillo tutorial"M
franklin_992

2005-09-17 12:30

donde esta el estilo "soft metal"M
vascomen

2005-09-18 11:30

facil facil, y estupendo. De mucha utilidadM
maritza rosario

2005-09-27 22:30

ta mostroM
karla*

2005-10-04 14:31

como has cambiado el sentido de la degradación en el paso 6?? tampoco me sale esto de contraer la selección el el paso 5. Lo he intentado a mi manera y no se parece mucho, jeje el paso 5 me ha matado :SM
karla*

2005-10-04 15:31

........ EL ESTILO SOFT METAL SE DESCARGA EN EL LINK DEL PRINCIPIO DEL TUTORIAL, YA LO PONE í‰L (Hablando de estilos, pueden encontrar los styles para PS 7.0 que utilizé en este ejemplo aquí. Con el botón derecho del mouse, haz clic y selecciona "guardar destino como...") WENO AVER KIEN LO CONSIGUE YO ESTOY EN ELLO ;) M
MELKORR69

2005-10-24 18:31

ESTA MUY BUENO ESTE TUTORIAL PERO NO PASO DEL PRINSIPIO NO ES NADA FACIL ESPECIFICA UN POCO MíS CADA PASO nunca pude encontrar el style en el photoshop cs2M
renholder

2005-10-26 11:31

a se me olvidaba, para los que no encuentran los styles vayanse a la pestaña de window y busquen le ahi styles o en su parte derecha de la pantalla en la ventana donde estan los colores ahi tambien aparecela opcion de swatches y styles saludosM
renholder

2005-10-26 11:31

para los que no encuentran en donde se descarga lo que dice, este es el link http://www.pixeltool.com.ve/downloads/pt_stuff.zip :P muy buen tuto pixel felicidadesM
stratogerald

2005-11-02 13:30

me parece que es muy bueno el diseño pero para uno que esta recien conociendo el photoshop necesitamos una explicacion mucha mas clara porfavor para poder hacer nuestro propios diseños a futuro. espero puedas especificar mucho mas porfa graciasM
evangelus

2005-11-04 15:30

Es bueno el tutorial. pero si estuviera completo. le faltan varios pasos, ni siquiera esta para terminarlo. Deficiente. Si pueden colocar algo parecido se los agradeceria bastanteM
MICLOphotoshop

2006-01-18 07:31

puff el tutorial es bastante bueno, lastima q la explikacion sea pesima... a ver si lo arreglamos pa los mas noobies aprendamos mejorM
w3bmast3r

2006-02-07 16:28

siiiiii... kien pueda hacer esto..k lo explique luego pues :( ... kero aprenderM
kikillo

2006-04-19 12:44

siento decirlo pero faltan muuuuuchos pasos me pierdo bastante aunque poco a poco lo voy sacando. De todas formas el trabajo es esquisito, me encanto.UN SALUDO!M
vacas

2006-04-27 18:49

Desde hace mucho tiempo andaba detras de como crear un skin. Pero ahora me doy cuenta que no se nada. Quede mas embolatado de lo queestaba M
JONNY RIVAS

2006-05-03 14:38

La aplicación está excelente, sin embargo, quedan muchas dudas de un paso al otro, considero que deberían hacer un video tutorial es más directo y así aprendemos mejor. Saludos.M
joruiz

2006-05-03 17:18

De plano mal escrito, con omisiones y errores. Yo me considero mas o menos bueno para este programa, y no pude seguir este tutorial, así que la gente nueva mejor que ni pierda su tiempo.M
Arcangel17

2006-05-19 15:47

Que basura! con todo respeto viejo! pero eso no ayuda en nada que peste este tutorialM
Youallijav

2006-05-31 11:07

El porqué este tutorial está mal redactado y nadie responde las dudas es porque es un tutorial COPIADO de otro sitio el cual está en inglés... Estoy de acuerdo en difundir lo que se sabe y compartirlo con los demás, pero no se vale adjudicarse algo de alguien más y pretender ser un diseñador. Saludos M
Xiroux

2006-06-10 07:49

he encontrado la pesataña de estilos y he encontrado el soft metal, pero no se cómo ponerlo en el primer ovalo. Siento mi torpeza, graciasM
bhiqm

2006-06-19 21:04

creo que deberias de haber explicado como hacer los botones px... muy weno de pasada... muy instructivo y necesitado ;)M
Mu$k@

2006-06-21 05:36

sea quien sea el autor intelectual del tutorial esta bastante bueno, no tube ni un inconveniente, pero creo que de veras esta muy poco explicativo para los nuevos usuarios, cuando tenga algo de tiempo voy a tratar de complementar el tutorial bueno eso seria ^_^ salu2 !M
cgarcia16

2006-07-03 01:58

Muy facil amigo, muchisimas gracias, a aquellos que no entendieron y desean mas detalles deberian de ver los otros tutoriales para tener un conocimiento basico de Photoshop pues si no saben lo basico de nada les serviran estos maravillosos tutoriales. Saludos!M
roberto-jv

2006-09-19 19:21

exelente tutorial juato lo que andava buscando felicidades M
flaquito06

2006-09-21 10:14

como ago para utilizarlo como skin de mi reproductor, por favor expliquemen que soy principiante. saludos!M
piwi

2006-09-26 13:21

Expliquen mejor..............Por FavorM
ASTREA_

2006-10-24 14:03

El efecto queda muy vistoso, pero te has saltado unos pasos como los que se refiere a los canales Alfa y que las cosas se van haciendo en distintas capas nuevas. Para mí las explicaciones están incompletas, aunque tú entiendas a la perfección el cómo lo has hecho. Nota:que conste que yo he hecho a mi manera este tutorial. A este paso hay que ser adivino M
kristianP

2006-11-06 10:13

excelente tigre... muy interesante :)M
Ak7xD

2006-11-30 17:14

Chuta GRacca man gracias a ustedes sacare una web que da melloM
gwendal

2006-12-24 05:11

me descargo el style, pero como puedo utilizarlo despues??? xfavor responded aki o en karl-franz_intheweb@hotmail.com, graciasM
penrri

2007-01-20 13:04

como puedo utilizar el skin respondan por favor a mi correo lpcpenrri@yahoo.com.mxM
c_aburto

2007-01-25 09:43

muy incompleto tu tutorial.. no esplicas con detalles... no se sabe si el skins se podrá utilizar y no explicas como utilizarlo... si es compatible con reproductores... como cargas las barras de audio y ecualizador sin estar funcionando... EXPLICA CON MAYOR DETALLEM
Fëanor

2007-01-29 22:49

Que alguien que sepa explique en un comentario el paso del alpha channel!!!M
julitoyac

2007-03-15 15:44

ESTA SUPER BUENO GRACIAS, NO MUCHO ENTENDI EL PRINCIPIO PERO LE SEGUIRE PRACTICANDO GRACIAS QUE DIOS LES BENDIGA, SALUDOS DESDE GUATEMALAM
ALEX EFRAIN YUJRA

2007-04-17 12:58

SOY ARQUITECTO Y ME INTERESA EL DIBUJO QUE ES LOQ QUE DEBO ACVER A CERACA DE LAS PROYECCIONES DE SOMBRA EN EL PHHOTOSHOP CSM
lecorbusier

2007-07-14 18:16

muy interesante y bonito me gusta la forma de usar los estilos muy buenoM
ildragonli

2007-07-24 16:34

oye, lo ultimo lo pusiste muy sorpresivo, primero esta namas con la pantallita, y luego ya tiene botones, logo y de mas :SM
joijaso

2007-09-08 02:21

La idea de este tutorial es bastante interesante pero la explicación de este tutorial está como para los adivinos, faltan muuuuuuuuuuuuuchos pasos...aunque sean usuarios avanzados. M
wilmercito25

2007-11-06 21:01

jejejej asi es hay que ser muy avanzado para realizar este tuto por que esta como que muy resumido pero ami si me salio =) primeramente se debe descargar los estilos que te da al comienzo en letra roja e instalarlo en tu PS sin eso no os saldra muy parecido al de la imagen ;el resto si esta facil no se pasen psss =( M
lauta-mdq

2007-12-09 18:15

Jaaaa... Muy bueno el Tuto, si no fuese x el detalle de q NO soy diseñador grafico ¬¬U ... Bro, explica algo mas, xq asi no lo lograremos hacer ni x mas q le saquemos un screenshot a tu imagen hecha y la peguemos en un archivo *.psd ¬¬U... M
darknessbat

2008-02-07 18:34

el tutorial es bueno, pero le faltan muchas explicaciones para ser EXCELENTE, ademas no explica como pasar el skin o interfaz a otros programas como flash por ejemplo... saludos y esperando que pronto saquen otro tutorial de este tipoM
shadowreturn

2008-04-25 15:53

Muy buen tuto =) me sirvio mucho =D saludosM
walepiia

2008-11-12 03:29

Muii MaloO deberian explicar mejor alguiien me podria ayudar a como instalarlo en mi pagina? el que este dispuesto me puede agregar al msn==>walepiia@hotmail.com Graxias al que este dispues =] saludos a todos (lo mas antes posible porfa Urgenteh)M
hluism87

2009-01-01 14:33

bueno el tutorial es muy bueno pero expliquenos muy bien puede ser paso a paso bale graciasM
blankita12

2009-02-07 19:51

eem cual "truco del alpha"M
chentearm

2009-04-16 11:50

mi opinion, esta mal explicado, lo veo bastante incompleto para ser un tutorial, es muy buena la idea, pero en este caso, los que queramos aprenderlo si no nos buscamos la vida, con esa explicacion lo tenemos bien crudo. Es cuanto!M