jueves, 11 de octubre de 2012

Tutorial botones en Flash


PASO 1: Creamos un nuevo documento de Adobe Flash (ActionScript 2.0)
Menu con efecto iluminado
PASO 2: Vamos a la ventana Properties y colocamos los valores que se ve en la imagen.
Menu con efecto iluminado
PASO 3: Arrastramos a nuestro documento la imagen que nos servirá de fondo, asegurémonos que este en la posición 0.0 y que tenga un tamaño de 500 x 500 píxeles.
Menu con efecto iluminado
PASO 4: Creamos una nueva capa llamada Cuerpo y a la capa anterior le colocamos el nombre de fondo.
Menu con efecto iluminado
PASO 5: Con la herramienta Rectangle Tool creamos un rectángulo con los bordes redondeados como se ve en la imagen.
Menu con efecto iluminado
PASO 6: Seleccionamos el rectángulo y al color de relleno le damos una opacidad de 50%.
Menu con efecto iluminado
PASO 7: Damos clic derecho sobre el botón y vamos a la opción Convert To Symbol… en la ventana le colocamos el nombre de inicio.
Menu con efecto iluminado
PASO 8: Vamos a la ventana Filter, hacemos clic en el signo más y vamos a la opción Glow.
Menu con efecto iluminado
PASO 9: Al efecto le aplicamos los valores que se ven en la imagen.
Menu con efecto iluminado
PASO 10: Nuevamente convertimos a Símbolo nuestro rectángulo pero esta vez seleccionamos la opciónBotton.
Menu con efecto iluminado
PASO 11: Hacemos doble clic sobre el botón y dentro de el con la herramienta Text Tool escribimos el texto de nuestro botón.
Menu con efecto iluminado
PASO 12: Ahora vamos a la Timeline y en la opción Over hacemos Clic derecho y vamos a la opción Insert Keyframe.
Menu con efecto iluminado
PASO 13: Seleccionamos el rectángulo y lo convertimos en un Movie Clip con el nombre de botón animado.
Menu con efecto iluminado
PASO 14: Hacemos doble clic sobre el rectángulo para ingresar en el movie clip y en el frame 1 damos clicderecho y vamos a la opción Create Motion Tween.
Menu con efecto iluminado
PASO 15: Vamos al la ventana Properties y en la opción Color seleccionamos la opción Alpha y colocamos un valor de 70%.
Menu con efecto iluminado
PASO 16: Vamos la Línea de Tiempo y nos posicionamos el frame 20 y presionamos F6.
Menu con efecto iluminado
PASO 17: Vamos a la ventana Filters y aplicamos los valores que se ven en la imagen.
Menu con efecto iluminado
PASO 18: Presionamos la tecla F9 y en la ventana Actions copiamos el siguiente código Actions Script.
Stop();
Menu con efecto iluminado
PASO 19: Regresamos a la Scene 1 y seleccionamos el botón y presionamos le tecla F9 y en la ventana Actions copiamos el siguiente código Actions Script.
Code block   
on(release) {
 getURL("http://www.lawebquequieras.com", _blank);
}
Menu con efecto iluminado
PASO 20: Listo ya tenemos nuestro botón terminado, repetimos el mismo proceso para realizar los demás botones.
Menu con efecto iluminado

Tutorial para crear un texto en Photoshop


PASO 1: Creamos un nuevo documento de 500x500 píxeles, luego con la herramienta Text Tool escribimos el texto TUTO WEB con un tipo de letra Verdana con un color negro.
PASO 2: Sobre la capa del texto creamos una selección con la herramienta Marquee tool, ahora presionamos el comando Ctrl + C para copiar y Ctrl + V para pegar.
PASO 3: Ahora a la letra T le aplicamos una Color Overlay rojo (#9d0d0d).
PASO 4: Con la herramienta Lazo poligonal realizamos una selección sobre la letra T.
PASO 5: Ahora presionamos el comando Ctrl + X para cortar y Ctrl + V para pegar la pieza.
PASO 6: Presionamos el Comando Ctrl + U y a la pieza le aplicamos una Hue/Saturation con los valore que se ven en la imagen.
PASO 7: Con el comando Crl + T vamos a girar nuestra pieza para acomodarla en el corte como se ve en la imagen.
PASO 8: Creamos una capa sobre todas las demás llamada sombra, ahora con el comando Ctrl +Clic sobre la pieza que cortamos vamos a crear una selección, seleccionamos la herramienta Gradiente Tool y aplicamos un degradado de negro a negro 0%.
PASO 9: Ahora a la pieza que cortamos le aplicamos una Drop Shadow con los valores que se ven aquí, el ángulo de la sombra varía dependiendo de hacia dónde se dirige el pliegue.
PASO 10: Creamos una nueva capa debajo de la capa del doblez y con el comando Ctrl + Clic sobre la capa de la letra T para crear una selección, ahora con la herramienta Gradient tool aplicamos un gradiente de negro 100% a negro a 0%.
PASO 11: A la capa de la sombra le colocamos un modo de fusión Overlay.
PASO 12: Hasta el momento deberíamos Obtener algo parecido a lo que se ve abajo.
PASO 13: Repetimos el mismo proceso con todas las letras.
PASO 14: Colocamos la opacidad del texto original en 4% casi imperceptible.
PASO 15: Clic derecho sobre la capa del texto y seleccionamos la opción Rasterize Type.
PASO 16: Vamos al menú Filter – Blur – Gaussian Blur.
PASO 17: Con la herramienta Borrador eliminarmos algunas partes del texto para que parezca que ahí estaba pegada la letra.
PASO 18: Con la herramienta Rouded Rectangle Tool creamos un rectángulo con los bordes redondeados más largo que ancho.
PASO 19: Al rectángulo le aplicamos una Drop Shadow con los valores que se ven aquí.
PASO 20: Seguimos con una Inner Shadow con los valores que se ven en la imagen.
PASO 21: Le aplicamos un Gradient Overlay con los colores Negro, Blanco y Gris (#afafaf).
PASO 22: Deberíamos tener una grapa parecida a la que se ve en la imagen.
PASO 23: Duplicamos la grapa y la colocamos en diferentes posiciones sobre la letra para obtener algo parecido a lo que se ve en la imagen.

Listo ya tenemos nuestro efecto terminado.

viernes, 5 de octubre de 2012

Design Kindle


En Design Kindle encontrareis recursos web de todo tipo; iconos, texturas, elementos GUI… de altísima calidad. Todos se pueden usar libremente para uso personal o comercial.  Afortunadamente para los que dan sus primeros pasos en el mundo del diseño ya no es necesario infringir sistemáticamente los derechos de autor para tener los recursos que necesitas.

Colourlovers


Esta pagina es una red semi-social dedicada al uso del color sobre diferentes materiales y temáticas, va más allá de entender la teoría básica de los colores. En Colourlovers puedes buscar un color (por palabra o por rango o por RGB o por… ) al partir del cual quieres estructurar tu diseño y ver qué paletas han construido otros usuarios sobre esa variedad. También hay recomendaciones para diseño de interiores, tendencias en diseño web o en moda.

martes, 2 de octubre de 2012

Exposición “Este diseño me suena”


La ADCV presenta la exposición “Este diseño me suena”, en el Espai Rambleta de Valencia, una puesta en común de distintos trabajos de profesionales del diseño que puedes ver desde el día 13 de septiembre, durante la Valencia Disseny Week y hasta el 31 de octubre
Del arte al oficio, del oficio al arte, música y diseño comparten un espacio de trabajo paralelo en el que se mueven, de la más pura corrección del buen intérprete, al riesgo, nuevas experiencias y “sonidos” del diseño más experimental.

Del arte al oficio, la música se materializa en distintas superficies y sistemas de impresión que transmiten aquello que deberías oír, pequeñas superficies contenedoras de emociones.
Del oficio al arte, el diseño crea un significante de aquello que era inmaterial, lo identifica y lo potencia. El diseño forma parte de la creación de la obra, pues modifica la percepción que el oyente tendrá de la música que escucha, del músico o músicos que la interpretan.

La muestra cuenta con la colaboración de ADCV, Stomvi, Tortosa, Galeriacuatro, Simbols, EASD Valencia, Estudio Paco Mora, Fedrigoni, Fernando Gil e IVAM.
Fecha: hasta el 13 octubre de 2012
Lugar: La Rambleta espai d’art i experiències (Bulevar Sur esquina C/ de Pío IX – 46017 Valencia)



Dónde busco...



En esta pagina encontrareis fantásticos tutoriales de todo tipo, sólo saber que vienen en ingles pero siguen siendo muy interesantes.

Cómo crear un efecto de texto de cromo con Illustrator