El post que buscas se encuentra eliminado, pero este también te puede interesar

Aprende a Crear Interfaces con Photoshop

Aprende a Crear interfaces con Photoshop


Hola en este otro post de "Aprende A" les explicare como hacer intefaces con photoshop


Aprende a Crear Interfaces con Photoshop

Interfaz con Anillos

1. En este tutorial vamos hacer anillos. Tome un dibujo cualquiera o letra o palabra con el cual va a trabajar. Yo tengo, como ejemplo este circulo.

tutorial


2. Con Elliptical Marquee Tool (M) haga una figura ovalada.

imagenes


3. Haga una nueva capa (Ctrl+Shift+N) y pintela con color preferido. Luego haga Select > Modify > Contract con 6 pix. Elimine la parte seleccionada de la figura ovalada y saque la seleccion (Deselect).

photoshop


4. Apretando Ctrl en la capa donde esta anillo. Vaya Channels y haga click Save Selection as channel. Haga que Alpha 1 sea activo y Filter > Blur > Gaussian Blur con 3pix., despues con 2 pix., y finalmente con 1 pix. Saque la seleccion (Ctrl+D).

interfaces

Aprende a Crear Interfaces con Photoshop


5. Vamos de nuevo a capas. Haga que la capa con el anillo sea activa. Luego Filter > Render > Lighting Effects con los datos de acuerdo con el dibujo de la derecha.

tutorial


6. Puede mover el anillo a cualquier lado Select Transform Selection.

imagenes


7. Haga copias de las capas que tienen anillos. Ahora con Eraser Tool puede borrar todas las partes que no tienen que ser visibles. Junte todas las capas (Ctrl+E) y luego con Layer > Layer Style > Drop Shadow haga sombra.

photoshop


... y El Señor de los Anillos esta hecho!

interfaces

Aprende a Crear Interfaces con Photoshop

Interfaz con Abrazaderas


1.Creamos un archivo nuevo, por ejemplo de 1500 X 100 pixels, creamos una capa nueva y con la herramienta de Marco rectangular "Ctrl + M" hacemos una selección que será la superficie del tubo.

tutorial


2.Ahora, parados en esta nueva capa elegimos la herramienta de degradado reflejado imagenes y en las opciones la configuramos así: 60% de opacidad, degradado tipo "color frontal/color de fondo", nos aseguramos que sea negro el color frontal y blanco el color de fondo presionando "D". Con esta herramienta photoshop Hacemos un degradado de abajo a arriba (para que sea perfecto presiona la tecla "Shift" mientras haces esto).

interfaces


3.Para darle un efecto realístico vamos a la ventana capas (Ventana> Mostrar capas) y en la capa que creaste para hacer el tubo seleccionas la casilla "Preservar transparencia" luego con la herramienta Marco rectangular hacemos una selección en la parte superior del tubo, y se realiza un degradado en dirección contraria y deseleccionas.

Aprende a Crear Interfaces con Photoshop tutorial


4.Bien, se hace otra selección rectangular que seleccione parte del tubo en el centro como se muestra en la imagen. Presionamos "Ctrl + J", se copia lo que esta en la selección dentro de una nueva capa. Ahora se presiona "Ctrl + T" (Transformar libre) y agrandamos esta selección para que sea un poco más grande que el tubo por encima y por debajo, aquí haremos la abrazadera.

imagenes


5.Ok, después de esto hay que hacer algunos ajustes; nos dirigimos a la capa que dice "Fondo" o "Background" y creamos una nueva capa, presionando la tecla "Ctrl" hacemos clic en que creaste la abrazadera (se creará una selección), rellena esta selección con 40 % Negro (Edición> Rellenar> Negro 40%), esta es la abrazadera.

photoshop


6.Pero lo que necesitamos ahora es crear una ilusión creible de 3D y esto se puede hacer simulando sombras; eligimos la capa donde se creó el tubo y con la herramienta Marco rectangular seleccionamos todo el tubo desde la parte derecha de la abrazadera y hacemos un pequeño degradado de negro a transparente, usando la herramienta Degradado lineal interfaces (Se hace el degradado de izquierda a derecha).

Aprende a Crear Interfaces con Photoshop


7.Ahora, eligimos la capa 3 (Donde se encuentre la abrazadera) y y se hace una selección que ocupe toda la abrazadera desde el relive que crea el tubo y hacemos un degradado como el anterior pero de arriba abajo.

tutorial


8.Podemos darle un mejor efecto si le colocamos unos tornillos o cualquier cosa que imagines sea bueno.
Este es un ejemplo de como se puede usar

imagenes


photoshop

Interfaz Básica

Crea un Nuevo Documento RGB (RVA en castellano) con fondo blanco y tamaño de 550 X 100 px.
Para lograr un diseño mas exacto usaremos las reglas y las guías de Photoshop, las cuales suelen volverse una verdadera adicción. Para ver las Reglas, dirígete a:
View > Show Rulers

Y para activar las guías pon tu cursor (usando la herramienta Move) sobre cualquiera de las reglas, haz clic sobre estas y sin soltar el botón del Ratón arrastra hacía el centro del documento. Entonces verás las guías, que son líneas (azules regularmente) que te ayudarán a dirigir tus movimientos.

interfaces


Utiliza la herramienta Rectangular Marquee y crea una selección medida con las siguientes características:
Style = Fixed Size
Width = 450 px
Height = 50 px

Haz clic sobre la intersección marcada con un circulo rojo y automáticamente aparecerá la selección como ves.

Aprende a Crear Interfaces con Photoshop


Y si tienes una selección activa, puedes crear un canal, cierto. En la paleta Chennels haz clic sobre el icono de New Channel y en ese momento tu imagen se tornará negra. Rellena la selección aun activa de color blanco.

tutorial


Deselecciona presionando "Ctrl. + D" luego desenfoca el rectángulo
Filter > Blur > Gaussian Blur
Radius = 15

Y te queda un fantasma como este:

imagenes


A continuación presiona "Ctrl. + L" para ver el cuadro de Niveles (Levels). Aquí solo une los pequeños triángulos al centro como se ve en la imagen donde están marcados con un semicírculo rojo. como puedes ver, la figura se define.

photoshop

Aun en la paleta Channels presiona el botón Load Channel as a Selection para cargar la selección de la figura que recién terminaste. Después vuelva a la paleta Layers (capas) y crea uno nuevo:
Layer > New > Layer

Y elimina la capa de fondo tomándola y arrastrándola hasta el icono Delete Layer

Toma la herramienta Linear Gradient y aplica el de tu agrado, empezando en el borde inferior de la selección y termina en el borde superior como lo indica la flecha roja. Si prefieres puedes hacerlo presionando la tecla shift para que salga recta. El propósito de esto es que la parte mas oscura quede en la parte baja y viceversa.

interfaces


Ahora hay que reducir la selección
Select > Modify > Contract
Contract By = 6 px

Luego aplica el gradiente de forma inversa, sin salir de la selección.
photoshop

Aprende a Crear Interfaces con Photoshop


Crea un par mas de guías y colocalas a la altura del píxel 200 de la regla superior uno y el otro en el 350.

tutorial


Crea una nueva capa
Layer > New > Layer

Luego modifica la selección
Select > Transform Selection

Y jala el lado derecho de la selección hasta que ajuste con la segunda guía vertical, justo como se ve en la primera imagen de la derecha, luego solo presiona Enter.

Ahora reduce la selección.
Select > Modify > Contract
Contract By = 6 px

Tenemos una selección casi cuadrada, pero eso se corrige:
Select > Modify Smooth
Radius = 6 px

imagenes


Aplica el mismo gradiente dentro de la nueva selección, pero esta vez de abajo hacia arriba.

photoshop


Crea una nueva capa para cada botón.
Layer > New > Layer

Aplica el mismo gradiente dentro de la nueva selección, pero esta vez de abajo hacia arriba. Toma alguna herramienta de selección y entonces podrás mover la tuya; llévala al lugar donde pondrás el siguiente botón, rellena nuevamente y listo.
Finalmente deselecciona "Ctrl. + D"

interfaces


Hasta aquí tienes cuatro capas, une las tres primeras (botones). Primero presiona el pequeño ojo al lado izquierdo del Layer 1, con esto desaparece de escena. Toca cualquiera de las capas restantes y entonces:
Layer > Merge Visible
Ahora solo tienes dos capas. Vuelve nuevamente visible la segunda.

Aprende a Crear Interfaces con Photoshop

Crea una nueva capa
Layer > New > Layer

Coloca esta nueva capa entre las dos que tenias. Rellena la selección con color negro. Luego deselecciona "Ctrl.+ D". Desenfoca:
Filter > Blur > Gaussian Blur
Radius = 1 px

Con esto tenemos sombra para los botones. Mueve esta capa un poco hacia la izquierda y abajo 2 px. Quita las guías:

tutorial


Y eso es todo, agrega el texto que desees y un ejemplo es este.

imagenes


photoshop

Interfaz de Aro

1.Crea un nuevo documento File>New de aproxidamente de 300 x 300 pixeles . Crea un nuevo layer Layer> New> Layer , Usando interfaces y presionando Shift , haz un circulo que mas o menos llene el area de trabajo.

2.Ahora ve a Edit> Stroke y selecciona 16 para el grosor e Inside en un tono de gris asi como en la imagen

Aprende a Crear Interfaces con Photoshop


3.Ve a Select>Load Selection... y presiona OK, ahora Select> Save Selection... y presiona OK , Esto grabara la selección que tienes hecha.

tutorial


4.Ahora cambia a Channels (si no ves los Channels ve a Window> Show Channels ) y selecciona el canal Alpha 1 , y ve a Filter> Blur> Gaussian Blur... aplicalo por 4 pixeles luego repite la acción por 3 y 2 .

Regresa al canal de los Layers y selecciona el layer que contiene el circulo. Ahora ve a Filter> Render> Lighting Effects y modificalo basandote en la imagen y presiona OK.

imagenes


5.En la ventana de efectos de luz (Lighting Effects) podremos aplicarle efectos de luz al aro para que quede mucho más realista.

photoshop


6.Para quitar los bordes astillados Select> Modify> Contract y selecciona 1 pixel, Select> Inverse y Edit> Clear .

Presiona Control + D para quitar la selección.

Ve a Image> Adjust> Curves y haz que se parezca lo mas posible a la imagen.

interfaces


7.Y por fin, listo!

Aprende a Crear Interfaces con Photoshop


tutorial

Interfaz de Barra metalica

1.Abrimos una imagen de 300x300 pixels de fondo blanco, en una nueva capa hacemos un rectangulo con la herramienta de marco rectangular y lo rellenamos con un degradado blanco y negro:

imagenes


2.Ahora nos vamos a filtro>textura>granulado y lo configuramos como vemos en la imagen. Este granulado le dará rugosidad a la barra.

photoshop


3.Cuando ya hemos hecho esto nos vamos a filtro> desenfocar> desenfoquedemovimiento y lo ajustamos como se ve en esta imagen:

interfaces


4.Ya tenemos todo preparado, ahora configuramos el color que queremos que tenga nuestra barra con ctrl+u:

Aprende a Crear Interfaces con Photoshop


5.Ahora agarramos la capa donde tenemos la barra, la duplicamos y la ponemos en sobreexponer y al 25% de relleno:

tutorial


6.Y bien ya tenemos nuestra barrita metálica

imagenes

photoshop

Interfaz Barra ondulada

-Explicación: este es un efecto muy de moda ahora mismo y facil de hacer.
En este tutorial solo vamos a utilizar dos herramientas:

1.La herramienta de degradado:

interfaces


2.La herramienta de marco rectangular:

Aprende a Crear Interfaces con Photoshop


3.Bien ahora comenzamos abriendo una imagen 500x30 pixels, y con la herramienta de degradado lineal hacemos un degradado lineal:

tutorial


imagenes


4.Ahora utilizamos la herramienta de marco rectangular y seleccionamos un rectángulo que ocupe todo lo largo de la imagen y un poco de la parte superior:

photoshop


5.Cuando tenemos esta selección volvemos a escojer la herramienta de degradado lineal y hacemos el degradado en la direción ascendete así:

interfaces


6.Ahora volvemos a cojer la herramienta de marco rectangular y seleccionamos otro rectangulo en la parte inferior de la imagen, el cual lo volvemos a rellenar con la herramienta de degradado lineal en dirección ascendente (este paso lo hacemos hasta que veamos que los colores coinciden):

Aprende a Crear Interfaces con Photoshop


7.Y bien ya tenemos nuestra barra ondulada lista para usar en cualquier interfas, si queremos cambiarle el color podemos hacerlo presionando ctrl+u y jugando con esta herramienta, marcando la pestaña de colorear:

tutorial


Espero que le halla resultado facil xD, aqui expongo algunos ejemplos:

imagenes

photoshop

interfaces


Aprende a Crear Interfaces con Photoshop

Interfaz de Bolitas en la Barra

1.Abrimos la imagen que hicimos antes de la barra metálica, con la herramienta de marco elíptico hacemos un círculo perfecto manteniendo pulsada la tecla mayúscula, hacemos una capa nueva y lo rellenamos de los colores que queramos con el degradado radial asi:

tutorial


2.Con un pincel difuso pintamos un circulito blanco en la parte superior izquierda de la bola:

imagenes


3.Ahora nos vamos a las opciones de fusión de la capa de la bolita y hacemos estos pasos:

photoshop


4.En la ventana de estilos de capa, en la sección bisel y relieve, añadimos un bisel exterior bastante pronunciado para que parezca que las bolas están incrustadas en el fondo.

interfaces

Aprende a Crear Interfaces con Photoshop

5.Y bien ya tenemos nuestra bolita lista, duplicamos la capa cuantas veces queramos para tener muchas mas bolitas!! :-D, si vemos que los bordes quedan demasiado perfilados podemos darle un poco de desenfoque para suavizarlos llendonos a filtro>desenfocar>desenfocarmas pero eso ya corre de tu cuenta. !

tutorial

imagenes

Interfaz de Cable (alternativo)

Un sencillo tutorial para hacer cables para las interfaces web y cosas por el estilo, queda muy bonito con un estilo bueno o con efecto de reflejo

1.Primero empieza con un fondo del tamaño que quieras (tan grande como quieras)
2.Ahora seleccionas la herramienta pluma

photoshop

y activas la opcion Recorridos (paths)

interfaces


3. Creas un recorrido en la forma de como quieres que este el cable

Aprende a Crear Interfaces con Photoshop


4.Ahora ve al editor de brochas en la pestaña de la parte superior derecha de la pantalla y edita una brocha circular del tamaño que quieras (yo recomiendo 15) tiene que ser con la opcion dureza (hardness) al maximo

tutorial


5.Ahora selecciona de nuevo la herramienta de pluma:

imagenes

(COLOR NEGRO) y da click derecho en el recorrido y selecciona la opcion Pintar recorrido (stroke path) para pintar con negro el recorrido (o lo que viene a ser el cuerpo del cable)

photoshop


6.Ahora de nuevo al editor de brochas, busca en (Assorted brushes [no se la traducion]) y busca una brocha (mayor a 15 en tamaño) con forma circular hueca y cambia el tamaño a 15 y el espaciado(Spacing) al que tu creas necesario (en mi caso 28%)

interfaces


7.Ahora EN UNA NUEVA CAPA pinta el recorrido AHORA EN BLANCO con el click derecho en el recorrido y la opcion pintar recorrido (stroke path) esto pintara unos circulos pegados blancos en el mismo recorrido que la base del cable


8. Procede a eliminar el recorrido haciendo click derecho en el y seleccionando la opcion eliminar recorrido (delete path)

Aprende a Crear Interfaces con Photoshop


9.Ahora pega las capas y coloriza a tu gusto, agregale un buen estilo y tendras un buen complemento en la interface de tu pagina

tutorial


imagenes

Interfaz de Cable

1. Este tutorial es muy facil y sirve para muchas cosas muy interesantes!
Haga un nuevo dibujo 200x100 pix. con transparent background. Con Rectangular Marquee haga una seleccion.

photoshop


2. Pinte la seleccion con gradient de arriba hacia abajo.

interfaces


3. Haga un nuevo dibujo con 2x40 pix. con transparent background. Utilice Zoom Tool (Z) para aumentar el dibujo. Con Single Column Marquee Tool haga la seleccion con 1 pix. y pintela con el color negro. Despues Edit - Define Pattern con el nombre, por ejemplo "Magia".

Aprende a Crear Interfaces con Photoshop


4. Vaya al primer dibujo que hizo. Aprete en Pattern Stamp Tool (S) y busque en la ventana de Pattern un dibujo con el nombre de "Magia". Con este Pattern pinte su dibujo.

tutorial


5. Si quiere redondear su cable haga Select Filter - Disort - Polar Coordinates - Rectangular to Polar.

imagenes

Abajo estan los ejemplos de como se puede aprovechar.

photoshop

interfaces

Aprende a Crear Interfaces con Photoshop


tutorial

Interfaz de orbitas


Haz no visible el botón con un clic sobre el ojo que se encuentra al lado izquierdo de la capa.
Crea un nuevo layer
Layer > New > Layer

Toma la herramienta Selection y crea un circulo con los siguientes. parámetros:
Feather = 0 px
Anti-alised = Verificado (con palomita)
Style = Normal Size

Después de esto, usando la herramienta Eliptical Marquee, crea una primera selección que será el borde externo de la orbita, luego, y mientras presionas la tecla Alt, crea el borde interno iniciando mas o menos donde esta marcado el punto rojo.

imagenes


Coloca la anilla en diagonal utilizando la herramienta de transformación de selección. Intenta hacer que la figura quede así:
Select > Transform Selection

photoshop


Con la herramienta Paint Bucket rellena de con color blanco.

interfaces


Guarda la selección
Select > Save Selection
Name = Orbita

Deselecciona
Select > Deselect

Posiciónate sobre el layer 1 (botón) y carga la selección del mismo.
Select > Load Selection
Channel = Layer 1 Transparency

Aprende a Crear Interfaces con Photoshop


Toma ahora la herramienta Rectangular Marquee y mientras presionas la tecla Alt crea un rectangulo como verás en las imagenes, esto para extraer la mitad de la selección circular.

tutorial
imagenes


Rota la selección hacía el lado que prefieras
Select > Transform Selection

photoshop


Toma la capa de la orbita, y a continuación presiona Supr (delete).
Deselecciona:
Select > Deselect

Y listo, allí tienes una perfecta orbita. El resto corre por tu cuenta.

interfaces


Este par de orbitas fueron creadas con los estilos muy parecidos al del boton que circundan.

Aprende a Crear Interfaces con Photoshop

tutorial


imagenes

Interfaz de ranuras

Ahora aprenderemos a crear una interfaz de ranuras.

1. Hacemos un nuevo documento de aprox. 100x100 píxeles de tamaño. Escogemos algún color que nos guste para el fondo (en el ejemplo R: 63 G: 124 B: 166 ). Posteriormente, creamos una nueva capa (Capa> Nueva> Capa ó Shift+Ctrl+N) y lo llenamos con un gris medio (R: 127 G: 127 B: 127 ). Cambiamos el modo de esta capa de Normal a Superponer.

photoshop


2. De momento no vamos a utilizar esta Capa. Hacemos otra capa sobre ella, y aquí hacemos una selección que ocupe casi toda la imagen. Vamos a Selección> Modificar> Suavizar y usamos 3 píxeles. Elegimos los colores por defecto (presionando D) y llenamos la selección con negro (Herramienta "Bote de Pintura" o Alt+Backspace). photoshop

interfaces


3. Contraemos la selección 2 píxeles en Selección>Modificar>Contraer y presionamos la tecla Supr para borrar lo sobrante. Cambiamos el modo de esta capa de Normal a Superponer.

Aprende a Crear Interfaces con Photoshop


4. Ahora, presionando la tecla Ctrl, hacemos click sobre ésta capa para seleccionar el recuadro. Vamos a Selección>Calar y usamos 1 píxel. Seleccionamos la Capa intermedia (aquella que rellenamos de gris en el primer paso), movemos la selección 1 píxel hacia arriba y 1 píxel hacia la izquierda y vamos a Imagen> Ajustes>Brillo/Contraste. Bajamos el Brillo a -100.

tutorial


5. Movemos la selección 2 píxeles hacia abajo y 2 hacia la derecha. Volvemos a modificar el Brillo/contraste, pero esta vez lo subimos a +100. Finalmente deseleccionamos haciendo CTRL+D y tendremos una imagen similar a la de la de la derecha.

imagenes


Éste efecto puede aplicarse a cualquier forma y puede servirnos para diseñar, botones, menús o cualquier cosa que se nos ocurra.

photoshop


interfaces

Interfaz de un Tubo Metálico

En este tutorial enseñaré a hacer de manera sencilla un tubo metálico. Sólo sentaré las bases, después pueden jugar con cada opción y lograr el efecto que quieran.

Este es un tutorial de nivel básico, así que antes de empezar, explicaré como hacer algunas de las cosas que se requerirán:

La herramienta marco eliptico se encuentra en la paleta de "herramientas". Está en el mismo botón que las otras erramientas de marco.

Para editar las propiedades de una capa.
Se selecciona dicha capa en la paleta "capas" y en la misma ventana, en la parte inferior buscar y dar click en el botón Aprende a Crear Interfaces con Photoshop y seleccionar la propiedad a editar.

Primero dibujaremos un circulo con la herramienta marco elíptico de unos 50 px. de diámetro:

tutorial


Lo rellenamos del color que sea y aplicamos las siguientes propiedades de capa:

Resplandor Exterior (outter glow):

imagenes


Bisel y relieve (Belevel and emboss):

photoshop


Superposición de degrado (gradient overlay):

interfaces


Este es el degradado que apliqué:

Aprende a Crear Interfaces con Photoshop


Este es el circulo terminado, de esto se compondrán cada uno de los segmentos que compongan el tubo:

tutorial


Ahora, haremos un hoyo de el que saldrá nuestro tubo. Para eso hacemos un nuevo circulo en otra capa, solamente uno o dos pixeles más grande que el primer circulo. Lo rellenamos de cualquier color y aplicamos las siguientes propiedades de capa:

Superposición de colores (color overlay):

imagenes


Resplandor exterior (outter glow):

photoshop


Trazo (stroke):

interfaces


Bisel y relieve (Belevel and emboss):

Aprende a Crear Interfaces con Photoshop


El resultado es este:

tutorial


Ahora escondemos la capa del hoyo y duplicamos la capa del circulo y la acomodamos abajo y aun lado de la original. Lo hacemos varias veces para ir dándole forma al tubo, puedes seguir el camino que quieras.

imagenes


Este es el resultado final una vez terminado el camino de círculos y acomodada la capa del hoyo detrás de todo:

photoshop


Esta una de tantas posibilidades que se pueden lograr:

interfaces


Aprende a Crear Interfaces con Photoshop

¿Te Gusta el Anime y Te Gustó ésta parte de "Anime Nunca Visto en T!"?
Pués entrá en las otras partes también para ver más Cantidad de Anime Haciendo Click acá abajo (10 Series por Post aprox)


tutorial

imagenes

Te gusta Grabar tus Series de TV, Series Anime, Peliculas, etc. Pero no sabes hacer las Caratulas pues Entra Aquí

photoshop

interfaces

Aprende a Crear Interfaces con Photoshop

tutorial

Esto es todo amigos espero que les aya gustado mi post nos vemos en la próxima

8 comentarios - Aprende a Crear Interfaces con Photoshop

portus
muy buen tuto
kuvoh
buen laburo +5
Flamaster
que laburo de la reputisima madre, te felicito!
fran26690

me quede sin palabras es el mejor post que he visto en taringa y por siacaso si buscan el photoshop cs3 yo lo tengo en un post si que pueden entrar ahi...