Tutorial para hacer tu escudo (fireworks)

Tutorial Para Hacer tu Escudo en el Nuevo Adobe Fireworks CS3 (Versión en Inglés).


En estos posts mostré los escudos que hice:
Mis escudos - megapost (375 aprox)
mis escudos - llegué a 400

Ahora voy a mostrar cómo se hacen!

Esto puede servir principalmente a aquellos que participan en managers online de futbol como por ejemplo "manager zone", "hattrik", etc. O aquellos que tienen un equipito de futbol de barrio y les hace falta una insignia que los identifique



1) Crear un nuevo documento de aproximadamente 350x400 pixels

Tutorial para hacer tu escudo (fireworks)




2) Ir al menú View - Rulers (o apretar ctrl+alt+R). Desde la regla que aparece a la izquierda, arrastrar con el mouse hasta aproximadamente el centro de la hoja en blanco. Aparece una línea verde que va a ser nuestro centro del escudo. No se hagan problema porque esa línea no sale cuando grabemos nuestra imagen.

Adobe




3) Seleccionar la herramienta "Pen Tool", y desde la ventana "Properties" (ctl+F3) seleccionar el tipo de trazado "Pencil" - "Pixel Soft" (es el que yo recomiendo).

cs3




4) Dibujar la mitad izquierda del escudo haciendo coincidir los dos extremos del escudo (el superior y el inferior) con la línea verde que creamos anteriormente (esto es MUY importante). Este puede ser el punto mas difícil de dominar, hay que practicar un poco y ver como funciona el "pen tool". No voy a explicarlo porque sería un poco extenso. En la imagen muestro el que voy a usar para este tutorial y a su vez muestro como quedaron los "nodos" (cuadraditos que marcan los vértices de la figura) y los "tiradores" (circulitos que salen de cada nodo que definen la curva de la línea) para este escudo. Un consejo, para editar los nodos y los tiradores que ya se dibujaron, se usa la flecha blanca del menú de herramientas.

fireworks




5) Este paso puede ser innecesario en algunos casos pero en la mayoría es útil porque si no se hace, puede salir mal el punto 6. Además, no se pierde nada con hacerlo: Hay que seleccionar la figura con la flecha negra y desde la ventana "path" (se abre desde "window" - "others" - "path" apretar el botón "Round Points to Pixels" (lo que hace es ajustar los nodos que quedaron mal ubicados en la grilla de pixels del dibujo, esto sirve para que al unir las dos mitades del paso 7, no se cree una línea negra en el medo del escudo, cosa que sucedía y me preguntaban muchas veces cuando usaban el viejo tutorial). Si se tiene una versión mas vieja que el Fireworks CS3, la ventana path no existe (no se si en el Fireworks 8 está), lo que se puede hacer es, desde la ventana properties restar un número a cada uno de los 4 valores (W,H,X,Y) que aparecen a la izquierda y luego volver a sumarlo (parece estúpido pero funciona).

macromedia




6) Seleccionar con la flecha negra la figura creada y fijarse qué tamaño tiene en el valor "W" que sale a la izquierda de la ventana properties. Copiar y pegar la mitad del escudo (ctrl+C y ctrl+V) y luego seleccionar la herramienta "scale tool". Aparece una línea y unos cuadrados negros alrededor de la figura. Arrastrar el cuadrado negro que está al medio y a la izquierda hasta el otro lado de la línea verde. Después se pone el mismo valor en el cuadro "W" que nos habíamos fijado antes para que las dos mitades tengan el mismo ancho y quede una figura simétrica.

escudos




7) Seleccionar las dos mitades del escudo haciendo un recuadro sobre ellas con la flecha negra y hacer click en el botón "Union Paths" que se encuentra en la ventana "Path" (Otra opción es ir al menú "Modify" y seleccionar "Combine Paths" - "Union".

escudo




8) Hacer una copia de la figura (Ctrl+C y Ctrl+V) e ir al menú "Modify" y seleccionar "Alter Path" - "Inset Path". Poner los valores que salen en la figura de abajo. Puede que la figura que queda adentro no sea perfecta. Para eso se corrige a mano con la flecha blanca y con la pluma. (a la figura que queda como resultado de este paso la voy a llamar de ahora en adelante como "escudo chico"

Tutorial para hacer tu escudo (fireworks)




9) Hacer unos cuantos rectángulos verticales que sean más largos que el escudo y unirlos con el botón "Union Paths" que se encuentra en la ventana "Path" (el mismo del paso 7). Seleccionar la figura creada en el paso anterior y ver que ancho tiene en el valor "W" de la ventana properties. Seleccionar la rayas verticales y poner el mismo número en el valor "W". Luego seleccionar con la flecha negra y apretando la tecla "shift" el escudo chico y las rayas verticales, y alinearlas hacia la derecha con el botón de la ventana "align" ("window" - "align"

Adobe




10) Hacer una copia del escudo chico y seleccionarla junto a las rayas. Hacer click en el botón "Intersect Paths" de la ventana "Path".

cs3




11) Para este paso ya le cambié los colores de relleno y de trazado de cada figura, también saqué la línea verde que hacía rato que no me servía (para eso hay q arrastrarla nuevamente hacia la regla desde donde la creamos) Hacer un circulo bastante grande y centrarlo con el escudo. Para centrarlo, lo que hago es agrupar (crl+G) todos los elementos del escudo (sin el circulo), apretar el botón "Align horizontal center" de la ventana "Align" y desagrupar todo (ctrl+shift+G). Seleccionar el círculo y hacer 2 copias más del mismo (copiar una vez y pegar 2 veces). Achicar las 2 copias del circulo con la herramienta "scale tool" (que utilizamos en el punto 6) para que queden como en la segunda imagen de abajo. Para ello, se selecciona el cuadrado de arriba, a la izquierda y se lo arrastra hacia el centro del circulo manteniendo apretada la tecla "alt" (como se muestra en la primera figura).

fireworks




12) Seleccionar el circulo más grande y el más chico y hacer click en el botón "Join Paths" de la ventana "Path". Seleccionar el escudo chico y hacer una copia del mismo. Seleccionar esa copia y el circulo que acabamos de juntar y hacer click en el botón "Intersect Paths" de la ventana "Path". va a quedar algo como esto:

macromedia




13) Seleccionar el circulo que nos queda y con la herramienta "Knife Tool" le hacer un corte horizontal aproximadamente a 1/4 del círculo (apretando la tecla shift para que sea horizontal). Con esto dividimos el circulo en 2 partes. La parte de abajo no nos va a servir, entonces la borramos con la tecla "supr" (o "del".

escudos




14) Seleccionar la herramienta de Texto que es la letra "A" de la ventana de herramientas y en la ventana "properties" seleccionar el tipo de letra, el tamaño, color, estilo, etc. de la fuente que queremos para nuestro escudo. Hacer un click sobre el área de dibujo y escribir el nombre de nuestro equipo. Luego, seleccionar la parte del circulo que nos había quedado y el texto que acabamos de escribir. Ir al menú "text" y seleccionar "Attach to path". Hay que asegurarse que el texto esté centrado y si se sobrepasa de los límites del escudo se puede reducir con "horizontal scale" que se encuentra en la ventana properties (cuando se tiene el texto seleccionado). También puede darse el caso de que el texto quede mirando hacia abajo una vez que lo unimos con el trazado, para arreglar esto hay que ir al menú "text" y seleccionar "Reverse direction".

escudo




15) Ahora voy a darle el tamaño final que va a tener el escudo. Para esto, no hay que tener nada seleccionado (hacer click con la flecha negra dentro del área de dibujo donde no haya ningún objeto). Hacer click en "Fit Canvas" que se encuentra en la ventana properties para que se borre todo el espacio excedente (como se muestra en la figura de abajo), luego, en la misma ventana hacer click sobre "Image Size" e introducir en el primer cuadro unos 380 pixels aproximadamente (los casilleros "Constrain proportions" y "Resample image" deben estar tildados)

Tutorial para hacer tu escudo (fireworks)




16) Otra cosa que me preguntaban mucho, es cómo introducir una foto y que tenga la forma de alguna figura que hayamos creado dentro del escudo. Para ello, ya cree la figura y ahora hay que pegar una foto que hallamos copiado de internet o importarla ("file" - "import" si la tenemos en el disco. Le ajustamos el tamaño y la posicionamos sobre la figura creada teniendo en cuenta que la foto quede un poco más grande que esa figura. Seleccionar la figura y copiarla (ctrl+C), luego seleccionar la foto e ir al menú "edit" y seleccionar "paste as mask".

Adobe




17) Por último queda aplicarle los efectos de brillo, relieve, sombras, etc. Yo recomiendo que se consigan todos packs de filtros que sean de "Alien Skin" como por ejemplo "eye candy 4000", "eye candy 5 Impact", "eye candy 5 textures", "eye candy xenofex 2", etc. Para aplicar efectos hay que seleccionar el símbolo "+" que se encuentra en la ventana "porperties" y ahí se despliega una lista con todos los filtros que tenemos en el fireworks.

cs3


Voy a mostrar algunos ejemplos usando los efectos que vienen con Adobe Fireworks CS3, que también puede lograr resultados muy buenos.

Ejemplo 1: Agrupando todo los elementos del escudo creado se aplica el "photoshop live effects", luego se selecciona la casilla de "bevel and emboss" y la de "drop shadow". Si se utiliza este último, no olvidarse de apretar nuevamente el botón "fit canvas" para que el fondo se ajuste al tamaño de la sombra que agregamos.. Probando con las diferetes opciones que vienen con este filtro se puede lograr algo así:

fireworks


Ejemplo 2: En este caso agrupé solamente los bastones verticales con el "escudo chico" para aplicarle el "inner shadow" que le da la sensación de que se mete dentro del escudo. A todos los demás elementos les apliqué distintas variantes del "bevel and emboss" del "photoshop live effects". La foto tiene además un "inner shadow" y un "inset emboss" para darle el efecto de hundido. Cuando se utiliza un fondo negro, a veces queda bueno aplicar el efecto "glow" (también hay q acordarse de apretar "fit canvas" si se usa este filtro).

macromedia


Ejemplo 3: Agrupé todos los elementos de color bordó y les apliqué el efecto "inner shadow":

escudos


Ej4: Acá utilicé efectos de Alien Skin como por ej. "Extrude", "Perspective shadow" "Chrome", "Bevel boss", etc.

escudo




18) Para grabar el archivo en jpg, y no utilizar el fireworks PNG (que otra persona puede abrirlo y editarlo y que además pesa más que un jpg), hay que ir a la ventana properties (sin tener ningún elemento seleccionado) y en el menú desplegable, elegir la opción "JPEG - Better Quality". Luego ir a "file" - "Export", escribir el nombre y listo.

Tutorial para hacer tu escudo (fireworks)

37 comentarios - Tutorial para hacer tu escudo (fireworks)

Stroker +1
mi humilde escudo



Adobe
la9una
Querido amigo dgfdgfdgf. Lei tus post anteriores y quede asombrado. Yo tambien soy usuario de Fireworks. Por talento, por espíritu solidario, por buena onda, te dejo mis +10. Un abrazo! Segui asi1 Hace falta de gente como vos... Gracias
Delvecchio
puntos por el esfuerzo invalorado
cuervoedo
Che, muy buen post.

¿Seré el único boludo que cuando ve un avatar como el tuyo se queda mucho tiempo tratando de dilucidar dónde arranca?

Van 5pts, y lo \"favoriteo\" también.
narrow
#7 - cuervoedo | 23.08.2007 07:50:03 dijo:



Che, muy buen post.

¿Seré el único boludo que cuando ve un avatar como el tuyo se queda mucho tiempo tratando de dilucidar dónde arranca?

Van 5pts, y lo \"favoriteo\" también.




no fuiste el unico
Yayo1
No pusiste como se hace el circulo
Yayo1
Bueno , muchas gracias y exelente post!
diegochaca26
hola, me podrias hacer un escudo de un club de barrio, es re sencillo en estilo! gracias
Felixthekat
Pdrias decirme donde encontrar estos efectos en el español? algunos creo que los deduci, de paso dime si estan bien jeje

\"Extrude\",
\"Perspective shadow\": filtro > sombra solida
\"Chrome\",
\"Bevel boss\": Filtro > Relieve elavado

Y los otros dos no los puedo encontrar
Felixthekat
Ahi me baje los filtros de alien skin
El efecto que yo quiero lograr es este:

cs3

Sobre un escudo ya armado (de san lorenzo).
Me podrias decir cuales son los pasos al aplicar el filtro?? cual primero, cual segundo, etc. Si no es mucha molestia.

porque por ejemplo yo le aplico el de chrome
fireworks

y el resultado que obtengo es este:
macromedia

Espero tu respuesta y cualquier cosa mandame MP!!
salva07
buen post, voy a ver que sale...
a fav y +10
julian_bv
buenisimo loco, me sirvio un monton..estoy armando la pagina de un club de mi ciudad y esto me fue re util...te dejo 10
BloodMagus
+10, excelente tutorial y muchas gracias por compartir tus conocimientos!
superdkno
amigo sos un k-po
muy buenos todos
fAkU_T
kpo haceme uno te doy puntos mandame mp
acontraluuz
no me sale dibujar con el pincel
no lo entiendoo..
acontraluuz
tengop el fireworks en español no hay tutoriales para los de español?
joaco_taringero
amigo no me sale la parte del pincel
te animas a pasarme alguno q vos ayas echo???
grax +10
joaco_taringero
gracias x contestar :_
me vas a hacer arrepentir de los 10
ale31ale
jaja, ya encontre el tutorial, ni te calientes en contestarme el MP.

EXCELENTE EL TUTORIAL!!!!!!!!!!!!!!! muy claro!

Te deje 10 y a fav.
noufer23
Escribir un comentario...