Mi primera Textura [Grunge] – Video Tutoriales en FIreworks 8

Duracion: 05:28 min
Peso: 32MB
AVI/Rapidshare
http://rapidshare.com/files/270061327/miprimeratextura_www.zoneartcss.com.rar
Password:
www.zoneartcss.com

Estoy encontra a todos los video-tutoriales de internet por que todos son de “Photoshop” ok muy buenos, pero hay gente que esta con Fireworks, pero bueno aqui trataremos de hacer las cosas lo mas posible desde 0, sin recursos, tansolo aprovechando lo que este magnifico software nos brinda y que no se mal interprete “Los mejores del mundo usan Photoshop” y son dioses en diseño, y se les respeta que programa sea su preferido, asi que respeten que en esta seccion del blog “MIA”, aqui “I HATE PHOTOSHOP”… asi que sino tienes nada bueno que comentar mejor ni lo hagas, o hazlo igual no sera publicado, esta zona es solo para “FIREWORKS LOVERS“

Hola… quieres saber como se hace un efecto o algo?… manda un email a info@zoneartcss.com para los nuevos videos de I Hate Photoshop.

Eh creado un Theme para el CMS recien liberado el Dedalus, disfrutenlo
Click para descargar este theme

Se me olvidaba jeje aki les dejo unas capturas
Captura del portal dedalus
Captura del foro dedalus

Bueno este es mi primer post!!! de varios y aqui… pero bueno intentaremos hacer un efecto medio grunge a nuestros titulos o donde querramos comenzemos…

Creando la imagen transparente en Gif…
Si tienes pereza da click aqui para bajar la imagen transparente.
Abrimos nuestro editor favorito (Aqui siempre sera Fireworks jeje). y crearemos un Gif transparente (PNG si gustas ya que el IE6 da problemas).

1. Dejamos el lienzo sin color y dibujamos un rectangulo mmm… nose de 400px X 130px (por ejemplo)  y abajo en la “barra de propiedades” junto al bote de pintura donde pone “Solido” desplegamos la lista y nos ponemos donde dice “Patrón” y seleccionamos “Pintura azul”.

2. Luego mas abajo en la misma “barra de propiedades” donde dice “Textura” seleccionamos “Metal” a un 35%.

3. Ahora aplicamos un filtro “Brillo/Contraste” y le damos a “Brillo” un “30″ y a “Contraste” un “100″, ahora allanamos la capa (Ctrl+Shift+Alt+Z o click derecho “allanar seleccion”).

4.  Que pereza no? tranki vale la pena… ahora seleccionamos la “herramienta varita magica” y le damos una “tolerancia” de 25 seleccionamos cualquier parte blanca y luego borramos…

5. Luego aplicamos el filtro “Matiz/Saturación” y en “Iluminacion” lo dejamos hasta el fondo en “-100″ aceptamos y ya tenemos listo nuestra “Textura” medio “Grunge” ahora presinamos “Ctrl+Shift+X” para abrir la “Presentación Preliminar”, seleccionamos el formato de la imagen en “Gif”, “transparencia alfa” y “Mate” color negro o sin color da igual, y guardamos con el nombre de “grunge.gif” o como querramos.
(Nota: importante debemos elegir el mismo color a nuestra imagen que nuestro fondo donde aplicaremos el efecto… es este caso el fondo es negro y la imagen la hicimos negra para usar un texto que haga contraste “Blanco” por ejemplo)
INFO: Perdon por tanto lio en lo de la imagen pero aki es FIREWORKS y si queremos algo lo hacemos…  sin Brushesitos… ok?… da igual que editor uses pero aqui usaremos en lo personal. es mas tardio pero se siente bien hacer las cosas por uno mismo no? bueno…

Ahora si al lio… daremos estilo CSS a la etiqueta  “H1“.
Le damos una posicion relativa al <h1> para que nuestro <span> que es el que tiene la imagen este absoluto y de el efecto deseado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body{background:#000;}
h1 {
position:relative;
color:#FFF;
font-family: "Times New Roman";
}
 
h1 span{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(grunge.gif);
}

y ahora el HTML

1

<h1>ZoneArtCSS - Texto Grunge By Alex Aguiar</h1>

Ver el ejemplo en linea.