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

Transcripción

1 Tutorial Para Hacer tu Escudo en el Nuevo Adobe Fireworks CS3 (Versión en Inglés). 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", "hat 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 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.

2 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).

3 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. 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" - "pathapretar 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

4 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). 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.

5 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 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

6 figura que queda como resultado de este paso la voy a llamar de ahora en adelante como "escudo chico 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

7 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".

8 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). 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:

9 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. 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

10 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". 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)

11 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".

12 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. 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í:

13 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).

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

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

16 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.

17