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.
Hemos creado el correo electrónico tutoriales @ solophotoshop.com para recibir tus tutoriales y artículos.
Registrate aquí para consultar, comentar, recibir novedades y valorar los Tutoriales y Artículos

 Fecha: 28/07/2005  D VIVALLO escribió:
¡Bien Incompleto!

 Fecha: 29/07/2005  CHARLI escribió:
ESPECIFICAR UN POCO MíS CADA PASO, PARA NOSOTROS LOS PRINCIPIANTES, E INDICAR DONDE APLICAR LOS ESTILOS Y TAMAí‘OS

 Fecha: 31/07/2005  WES JANSON escribió:
Y como lo utilizas de skin?... porfavor respondan.

 Fecha: 31/07/2005  KARY55 escribió:
si por favor especificar mejor cada paso, nunca pude encontrar el style en el photoshop cs, ademas de que no quedaron claras otras cosas!

 Fecha: 31/07/2005  AYESHA escribió:
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.

 Fecha: 04/08/2005  ALBERT_KUN escribió:
yo tuve que hacer todo a como me saliera asi que no me salio igual creo que deberian de explicar mejor

 Fecha: 05/08/2005  N4R4K0 escribió:
pero lo del texto como lo ap`lico eso no lo explicaste pero se ve interesante eso

 Fecha: 07/08/2005  RASTELMAN escribió:
GRAN TRABAJO PIXEL! Y TAN SENCILLO QUE PARECE GRACIAS rastelman

 Fecha: 12/08/2005  RINGUITA escribió:
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........

 Fecha: 15/08/2005  DGO777 escribió:
muy interesante tu tutorial pero quiero saber si lo puedo descargar

 Fecha: 16/08/2005  MACARRON escribió:
aja, y luego, completenlo!!!!!!!!!!!!!!!1

 Fecha: 17/08/2005  HFABRA escribió:
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

 Fecha: 19/08/2005  ANGELO22 escribió:
le falta mas explicacion al tutorial pero esta muy bueno

 Fecha: 25/08/2005  ICE_N64 escribió:
Muy Bueno voy a tratar d hacerlo. Gracias

 Fecha: 31/08/2005  KACIER escribió:
Que PHOTOSHOP ES ? para ponerlo a prueba ... 7.0 Cs o ke version ? porfa respondan ..

 Fecha: 01/09/2005  SHEPAR escribió:
Esta bien, pero falta más detalle. Un novato se pierde rápido.

 Fecha: 04/09/2005  TUBARRIO3 escribió:
muy bueno e interesante

 Fecha: 08/09/2005  APOCALIPSI escribió:
esta muy bien, pero.... no consigo el estilo "soft metal"

 Fecha: 10/09/2005  TROYAN0 escribió:
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

 Fecha: 12/09/2005  ANGELNERM escribió:
Por Favor especifica un poco mas... la verdad no tiene nada de "sencillo tutorial"

 Fecha: 17/09/2005  FRANKLIN_992 escribió:
donde esta el estilo "soft metal"

 Fecha: 18/09/2005  VASCOMEN escribió:
facil facil, y estupendo. De mucha utilidad

 Fecha: 27/09/2005  MARITZA ROSARIO escribió:
ta mostro

 Fecha: 04/10/2005  KARLA* escribió:
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 :S

 Fecha: 04/10/2005  KARLA* escribió:
........ 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 ;)

 Fecha: 24/10/2005  MELKORR69 escribió:
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 cs2

 Fecha: 26/10/2005  RENHOLDER escribió:
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 felicidades

 Fecha: 26/10/2005  RENHOLDER escribió:
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 saludos

 Fecha: 02/11/2005  STRATOGERALD escribió:
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 gracias

 Fecha: 04/11/2005  EVANGELUS escribió:
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 bastante

 Fecha: 18/01/2006  MICLOPHOTOSHOP escribió:
puff el tutorial es bastante bueno, lastima q la explikacion sea pesima... a ver si lo arreglamos pa los mas noobies aprendamos mejor

 Fecha: 07/02/2006  W3BMAST3R escribió:
siiiiii... kien pueda hacer esto..k lo explique luego pues :( ... kero aprender

 Fecha: 19/04/2006  KIKILLO escribió:
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!

 Fecha: 27/04/2006  VACAS escribió:
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

 Fecha: 03/05/2006  JONNY RIVAS escribió:
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.

 Fecha: 03/05/2006  JORUIZ escribió:
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.

 Fecha: 19/05/2006  ARCANGEL17 escribió:
Que basura! con todo respeto viejo! pero eso no ayuda en nada que peste este tutorial

 Fecha: 31/05/2006  YOUALLIJAV escribió:
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

 Fecha: 10/06/2006  XIROUX escribió:
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, gracias

 Fecha: 19/06/2006  BHIQM escribió:
creo que deberias de haber explicado como hacer los botones px... muy weno de pasada... muy instructivo y necesitado ;)

 Fecha: 21/06/2006  MU$K@ escribió:
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 !

 Fecha: 03/07/2006  CGARCIA16 escribió:
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!

 Fecha: 19/09/2006  ROBERTO-JV escribió:
exelente tutorial juato lo que andava buscando felicidades

 Fecha: 21/09/2006  FLAQUITO06 escribió:
como ago para utilizarlo como skin de mi reproductor, por favor expliquemen que soy principiante. saludos!

 Fecha: 26/09/2006  PIWI escribió:
Expliquen mejor..............Por Favor

 Fecha: 24/10/2006  ASTREA_ escribió:
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

 Fecha: 06/11/2006  KRISTIANP escribió:
excelente tigre... muy interesante :)

 Fecha: 30/11/2006  AK7XD escribió:
Chuta GRacca man gracias a ustedes sacare una web que da mello

 Fecha: 24/12/2006  GWENDAL escribió:
me descargo el style, pero como puedo utilizarlo despues??? xfavor responded aki o en karl-franz_intheweb@hotmail.com, gracias

 Fecha: 20/01/2007  PENRRI escribió:
como puedo utilizar el skin respondan por favor a mi correo lpcpenrri@yahoo.com.mx

 Fecha: 25/01/2007  C_ABURTO escribió:
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 DETALLE

 Fecha: 29/01/2007  FëANOR escribió:
Que alguien que sepa explique en un comentario el paso del alpha channel!!!

 Fecha: 15/03/2007  JULITOYAC escribió:
ESTA SUPER BUENO GRACIAS, NO MUCHO ENTENDI EL PRINCIPIO PERO LE SEGUIRE PRACTICANDO GRACIAS QUE DIOS LES BENDIGA, SALUDOS DESDE GUATEMALA

 Fecha: 17/04/2007  ALEX EFRAIN YUJRA escribió:
SOY ARQUITECTO Y ME INTERESA EL DIBUJO QUE ES LOQ QUE DEBO ACVER A CERACA DE LAS PROYECCIONES DE SOMBRA EN EL PHHOTOSHOP CS

 Fecha: 14/07/2007  LECORBUSIER escribió:
muy interesante y bonito me gusta la forma de usar los estilos muy bueno

 Fecha: 24/07/2007  ILDRAGONLI escribió:
oye, lo ultimo lo pusiste muy sorpresivo, primero esta namas con la pantallita, y luego ya tiene botones, logo y de mas :S

 Fecha: 08/09/2007  JOIJASO escribió:
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.

 Fecha: 06/11/2007  WILMERCITO25 escribió:
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 =(

 Fecha: 09/12/2007  LAUTA-MDQ escribió:
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...

 Fecha: 07/02/2008  DARKNESSBAT escribió:
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 tipo

 Fecha: 25/04/2008  SHADOWRETURN escribió:
Muy buen tuto =) me sirvio mucho =D saludos

 
© Copyright 2001 - 2008
Solo Photoshop, Tutoriales, VideoTutoriales, Artículos y Recursos de Photoshop y Flash.