efectos – Ideas Fugaces

Efecto humo en Photoshop

Germanet — Sat, 19 Feb 2011 16:58:25 +0000

Hay diversas formas para crear este efecto en Photoshop, pero la última que utilicé me sorprendió por su sencillez, de manera que merece un lugar entre estas pequeñas joyas que he llamado «Ideas fugaces».

Uno de los aspectos más interesantes de los filtros es que suelen ser impredecibles. Por ello es importante destacar que repetí el Filtro: distorcionar / onda… (CTRL+F) dos o tres veces hasta conseguir el resultado que deseaba.

Al fin y al cabo es precisamente ese comportamiento impredecible el que caracteriza a una nube de humo o de vapor… ¿no creen? Espero que hayan disfrutado de este pequeño truco.

Enlaces Relacionados

Taza de café | Taza vector

Efecto Nudging con JQuery

Germanet — Thu, 12 Aug 2010 15:51:48 +0000

Los menús son la puerta de entrada a la web, y por eso siempre me han interesado mucho. Si un menú es soso, es como ponerle mala cara a nuestro invitado, de manera que un diseñador debe procurar que los visitantes se sientan cómodos y sin llegar a la «pedantería» de excesos o diseños de mal gusto, debemos invitarlos «cordialmente» a pasar.

En el denominado «efecto nudging» –codazo– que yo traduciría mejor como «empujoncito», el hecho de que las letras se desplacen un poco y que en ocasiones aparezca una flecha es como decir: venga… anímate y pasa. Así que voy a estudiar un poco cómo está construída esta «invitación» utilizando JQuery y CSS.

Ejemplo 1

Paso 1: hacer una lista desordenada con los elementos del menú

Lo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetaré en inglés porque es una palabra muy específica que significa –dar suavemente con el codo-, y no está de más agregarla a nuestro vocabulario técnico.

Paso 2: definimos los estilos CSS a la lista de menú

Lo quedebemos destacar del estilo es que para la etiqueta de enlace anchor (a) se modifica la imagen de fondo al poner el ratón encima y por acción del script cambia también el padding original de 15px a 35px. Por supuesto, todas estas medias varían dependiendo del tamaño y forma del menú.

Paso 3: aplicamos una función que permitirá los cambios de estilo

Primero localizamos el elemento al que se la ha aplicado la regla de estilo «nudge». La clase .hover permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando «entra» y otro cuando «sale». En ambos estados se aplica .animate, a la que se le pasa como primer parámetro la regla» padding» y como segundo el tiempo en milisegundos que esta animación debe durar.

Ver Código (+/-)

HTML


	
		home
		acerca de nosotros 
		servicios
		productos
		contacta con nosotros

JQuery

Localizamos el elemento al que se la ha aplicado la regla de estilo «nudge». La clase .hover permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando «entra» y otro cuando «sale». En ambos estados se aplica .animate, a la que se le pasa como primer parámetro la regla» padding» y como segundo el tiempo en milisegundos que esta animación debe durar.

CSS

#menu_nudging{
	width:235px;
	background-color: #fff;
}
#menu_nudging ul{
	list-style:none;
}
#menu_nudging li{
	list-style:none;
	margin:1px 0;
}
#menu_nudging li a{
	list-style:none;
	background: url(../imagenes/efecto_nudging/fdo_normal.gif) no-repeat;
	color:#fff;
	text-transform:uppercase;
	font-size:14px;
	text-decoration:none;
	display:block;
	height:30px;
	line-height:30px;
	padding:0 0 0 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#menu_nudging li a:hover{
	background: url(../imagenes/efecto_nudging/fdo_sobre.gif) no-repeat;
	color:#fff;
	text-decoration:none;
}

La referencia para esta práctica la he tomado del blog de webintenta, al que te remito para completar la información y distrutar de alguno de sus excelentes artículos. Espero que te la hayas pasado bien por aquí.

Metal y Óxido con Photoshop

Germanet — Thu, 18 Feb 2010 11:37:33 +0000

Mis primeros tutoriales los hice con el libro «Los Trucos y Efectos más Interesantes de Photoshop, editado ya hace algunos años. Este cabezal de tornillo, con alguna variación, corresponde a la sección de metales. Para la terminación, se pueden emplear cualquiera de los estilos de metal que acompañan al programa. Las grietas tienen un bisel_interior_redondeado, con mucha profundidad, sin embargo, todos estos valores puedes variar dependiendo del tamaño del dibujo y de las preferencias del diseñador.

Lo bueno que tienen los tutoriales, además de enseñar, es que son una fuente inagotable de ideas. Aquí van dos en las que utilicé el metal y el óxido como tema, tomando alguna textura del libro como motivo y el resto como fuente de inspiración:

Para un efecto de Metal Líquido, encontré este interesante vídeo en YouTube:

Resumen de los pasos:

1.- Abrir un nuevo dto. Las medidas no son importantes.

2.- Rellenar el fondo de color negro.

3.- Filtro/ Interpretar/Destello_prime 105 mm (dos veces)

4.- Filtro/ Artístico/ Plastificar (15, 9, 7)

5.- Filtro/ Distorcionar / Zigzag (100, 5, ondulaciones)

6.- Duplicar la capa (ctrl + j en PC) / Modo / luz lineal / Opacidad_ 39% aprox.

7.- Primera Capa/ Superposición de color/ opacidad 8 % aprox.

Que lo disfrutes…