Creación de un menú estilo minimalista [parte 2]

Carlosmax — Tue, 22 Mar 2011 18:30:10 +0000

Esta es la segunda entrega del tuto sobre la creación de un bonito y sencillo menú minimalista, en la parte anterior expliqué como hacer los íconitos que son la parte escencial de este menú. Sentimos que no se publicara ayer el vídeo, como dijimos, fue un problema técnico.

Si te perdiste la parte 1 de este tutorial, te recomiendo visitarla antes de seguir con esta: Creación de un menú minimalista [parte 1]

Ahora, en esta parte del tutorial terminamos la creación de los íconos del menú y seguimos con la terminación de la maquetación, añadiendo estilos CSS para el efecto hover que será lo que hará al menú ser estilo minimalista. Esperemos que os guste (recordad dar a “Me gusta”, si os ayudan los vídeos, ya que así nos ayudáis a nosotros también )

Os recomiendo que veais el vídeo en Youtube, para más calidad y comodidad .

Creación de un menú estilo minimalista [parte 1]

Carlosmax — Mon, 14 Mar 2011 07:47:03 +0000

Hola, esta es mi primera publicación para Concepto Pixel y me gustaría primero que todo presentarme, soy Carlos Castillo, tambien me conocen en la web como Carlosmax, estudiante y diseñador freelance, llevo 10 años aproximadamente diseñando webs y molestando en internet (?). Espero que les guste los tutos que les traeré en mi estadía en este maravilloso blog y así aportar algo más de sabiduría a la blogosfera hispana.

Voy a especializarme en Videotutoriales de diseño web y gráfico con herramientas como Photoshop y Dreamweaver, ya que son mi fuerte en el diseño. Bueno, ahora les mostraré un tutorial bastante sencillo para crear un menú muy bonito que de seguro les gustará, el cual consta de 3 partes en video. Hoy se publicará la primera parte, y el siguiente lunes la 2ª; la tercera parte será el lunes siguiente a el de la 2ª. Aquí está la primera parte:

Recursos utilizados:

Descargar paquete Iconic

Convertir una foto a una obra de ‘Pop Art’

Andrés Prada — Tue, 08 Mar 2011 21:11:15 +0000

Hola a los fieles lectores de este antiguo blog, que por causas del destino resultó estar abandonado por algunos meses, pero eso terminó, desde hoy se comienza a activar y será lo que era antes: el mejor sitio de diseño gráfico en toda Latinoamérica.

El día de hoy les voy a enseñar en un tutorial muy sencillo a hacer de una foto común una maravilla del ‘Pop Art’ (en español Arte Pop, pero más popularizado en inglés). Recordemos que el Arte Pop fue el movimiento de arte que se dió en los 80 y finalizó a principios de los 90 en Estados Unidos, gracias a esto tenemos todas las ilustraciones que conocemos popularmente en afiches de Marilyn Monroe.

Este tutorial nos llevará realizarlo aproximadamente 20 minutos, dependiendo de los detalles que le vayamos a hacer y claro de la complejidad de la fotografía que tengamos, además de nuestra agilidad y experiencia, su dificultad es fácil y su nivel de interés es máximo ya que muchos diseñadores cobran millonadas por hacer este sencillo proceso y únicamente por el desconocimiento que tenemos para realizarlo.

Los materiales que utilizaremos serán los siguientes:

Una fotografía, puede ser de una famosa, un famoso que tenga rasgos bien definidos, separando visualmente los colores de su cabello, piel, accesorios y vestimenta, yo utilizaré la siguiente foto de Katy Perry, recuerden además que debe tener color y no se debe exceder en detalles pequeños, ya que nos quedaría difícil darle color a esos lugares.
Yo utilizaré Photoshop CS5 y nada más, aunque las herramientas que utilizaremos se pueden ver desde la primera versión, se recomienda tener un Photoshop CS3 o CS4 que manejan una interfaz más parecida a la del CS5.

Comenzemos con abrir la imagén o fotografía en Photoshop:

1. Duplicar la capa 2 veces, para que nos queden 3 capas: la última capa de abajo la renombraremos: ‘Fondo’, la que esta en el medio la llamaremos ‘Azul’ y la última la podemos llamar ‘Puntos’. De esta forma:

2. Vamos a hacer de la capa ‘Azul’ algo realmente de ese color, vamos a pintar con el pincel TODA la capa con un azul claro, yo voy a utilizar el azul #5eb7cb.

3. Con la varita mágica seleccionamos el fondo fuera del cuerpo de nuestra modelo en la capa ‘Puntos’ y lo suprimimos, se puede hacer con el borrado para que nos quede algo asi:

4. Vamos a la capa ‘Puntos’ y apretamos estas teclas al mismo tiempo: Control + Shift + U y eso nos desaturará la capa.

5. Siguiendo con la capa ‘Puntos’ vamos a Imagen > Ajustes > Umbral y con el número podemos experimentar el que más detalles nos de, pero sin que quede bastante negro, yo voy a utilizar 170, pero lo normal es 150 y tendremos algo como lo siguiente:

6. Como la imagen nos queda demasiada brusca en los bordes, hacemos lo siguiente: con la capa ‘Puntos’ aún seleccionada vamos a Filtro > Desenfoque > Desenfoque Gaussiano y en radio ponemos 0,5 o también puedes experimentar.

7. En el menú que aparece cuando le damos clic derecho sobre la capa ‘Puntos’ seleccionados duplicar capa y seleccionamos Nuevo, ahora tendremos dos archivos abiertos en Photoshop.

8. Pasamos al nuevo documento y vamos a Imagen > Modo > Escala de grises y aceptamos lo que aparezca y continuamos, luego regresamos a Imagen > Modo > Mapa de bits y en Método seleccionamos: ‘Trama de semitonos’, le damos en Aceptar y continuamos y ponemos los valores asi:

9. Ahora nos debe quedar una imagen hecha de puntos, lo que haremos ahora es ir de nuevo a Imagen > Modo > Escala de grises y nuevamente a Imagen > Modo > Color RGB y duplicamos la capa como lo hicimos en el paso 7, solo que ahora en vez de abrirla en un nuevo documento la abriremos en el primero que abrimos (de donde viene esta capa).

10. Ahora vamos a crear una trayectoria, para esto vamos a presiona la tecla ALT mientra movemos con el cursor la capa superior a la que le sigue abajo, a la capa ‘Puntos’ para ser más especifico y tendremos algo como esto:

11. Ahora con el clic sobre la capa ‘Fondo copia’ como esta en la imagen de arriba vamos a presionar Control + E y debemos tener algo como esto:

Ahora debemos aplicar color, que es lo más fácil con el bote de pintura o con técnicas que conozcas para finalizar con algo bastante parecido a esto, aunque le puedes mejorar la apariencia en los detalles:

RESULTADO FINAL

La idea es hacer algo fácil, que se pueda utilizar como avatar o foto de perfil, sin muchos detalles y con colores saturados.

Concepto Pixel » Tutoriales

Creación de un menú estilo minimalista [parte 2]

Creación de un menú estilo minimalista [parte 1]

Convertir una foto a una obra de ‘Pop Art’