Archive for the ‘Fireworks’ Category
Thursday, September 17th, 2009
Fireworks es un excelente programa que nos brinda infinidad de posibilidades a pesar de que estamos acostumbrados a utilizar mayormente Photoshop e Illustrator. Es bueno conocerlo, llevarse bien con sus herramientas y tenerlo en cuenta para utilizar al final, los elementos potenciales de cada programa en conjunto.
Si quieren aprender a usar Fireworks, pueden comenzar con el tutorial que publicaron en Flisterz, donde nos van a explicar paso a paso cómo crear un icono de RSS estilo grunge con este programa. Algo genial para practicar y para luego si tenemos un diseño grunge poder aplicar tranquilamente sumando si lo deseamos algún detalle propio.
Tags: Diseño Web, Fireworks, Icono RSS, Tutorial, Tutorial fireworks
Posted in Fireworks, Tutorial | No Comments »
Thursday, August 6th, 2009
Adobe Fireworks es conocido junto al Illustrator como “los hermanos” de Photoshop mas que nada porque trabajar con los tres hacen que estos se transformen en una herramienta poderosa para cualquier diseñador.
Fireworks fue originalmente creado como un editor de imagen destinado al diseño web. Si quieres aprender a utilizar Fireworks, el artículo publicado en Smashing Magazine es un genial punto de partida. Se trata de una colección de guías, tutoriales y recursos sobre el programa que harán que lo terminemos sabiendo manejarlo mucho mejor. Solo es cuestión de animarnos.
Lo primero es conocerlo un poco mas, y jugar con sus herramientas, y terminaremos con un grupo de tutoriales que servirán para poner en práctica lo que aprendimos.
Tags: Fireworks, Recursos, Tutorial
Posted in Fireworks, Tutorial | No Comments »
Friday, May 29th, 2009
Alan Musselman es arquitecto de aplicaciones de Fireworks y nos brinda algunos consejos para conocer mas sobre este programa en su versión CS4.
1.- AUTOMATICE LOS PASOS REPETITIVOS
Cada vez que se realiza una acción en el lienzo, se genera un paso en el panel History (Window>History). Usted puede seleccionar estos pasos y hacer clic en el icono Save Steps As a Command en la parte inferior del panel para guardarlos y reutilizarlos en otros documentos. Escriba un nombre en el diálogo Save Command y haga clic en OK. El nuevo comando estará listado bajo el menú Commands y también podrá usarse durante la exportación de un conjunto de datos. (File>Batch Process)
2.- ENCONTRAR Y REEMPLAZAR
Encuentre y reemplace colores, fuentes y hasta URLs rápidamente usando el panel Find ubicado en Edit>Find (Command-F [PC:Ctrl-F]). Al reemplazar colores, note que Find and Replace no solo afecta tanto los trazos como los rellenos, sino que también puede cambiar los colores en los Live Filters (que se aplican por medio del inspector de propiedades), e incluso los gradientes.
3.- RE-UTILICE LOS ATRIBUTOS
Una función muy poderosa en Fireworks es la habilidad de añadir rápidamente el mismo estilo de diseño de un objeto a otros objetos en el documento. Esto podría ser dificultoso en otras aplicaciones porque usted tendría que re-aplicar cada propiedad una por una. Usted puede fácilmente copiar y pegar atributos a objetos nuevos o existentes con solo seleccionar el objeto y los atributos que le gustaría usar, de la siguiente manera: Vaya a Edit>Copy, seleccione el objeto al que quiere pegar los atributos y seleccione Edit>Paste Attributes. Esto mantendrá las líneas, el relleno y hasta las configuraciones Live Filter.
4. RECTÁNGULOS REDONDEADOS
Puede cambiar la redondez de un rectángulo en el inspector de propiedades desde porcentajes (%) a pixeles (px). Esto es de mucha ayuda cuando se diseñan columnas CSS y necesita saber la cantidad radial exacta de pixeles para cada esquina. Consejo adicional: Al dibujar un rectángulo en el lienzo usando la herramienta Rectangle (U) y antes de soltar el botón del Mouse, presione la tecla Up Arrow para añadir redondez o la tecla Down Arrow para reducirla. Suelte el botón del Mouse para crear el rectángulo redondeado.
5. REDIMENSIÓN VISUAL DEL LIENZO
Usted puede ampliar rápidamente el lienzo de su documento. Solo haga doble clic en el icono de la herramienta Crop (atajo: tecla C) en el Toolbox para ver los límites de corte de lienzo. Haga clic y arrastre alguno de los puntos de control de manera que el área de corte sea más grande que el tamaño actual del lienzo y presione Enter en el teclado para aplicar el nuevo tamaño.
6. EL PODER DEL PANEL DE TRAZOS (“PATH PANEL”)
El panel de trazos (Window>Others>Path) ofrece acceso a avanzadas funciones de vector que le harán más productivo al momento de realizar prototipos y diseñar Fireworks. Con un solo clic, usted puede aplicar operaciones comunes como Union y Punch, eliminando la necesidad de ir a los menús para escoger las opciones más comúnmente usadas. Por ejemplo, ¿alguna vez ha necesitado afinar una esquina de vector redondeado para hacerla en línea recta? Esto puede hacerse seleccionando los puntos de la esquina redondeada con la herramienta Subselection (A) y aplicando la opción Sharper Points en la sección Edit Points en el panel de trazos.
7. NAVEGUE PÁGINAS CON SOLO TOCAR UN BOTÓN
Para navegar fácilmente en sus páginas, use las teclas Page Up y Page Down en su teclado o use el menú Page en la parte superior derecha de la ventana del documento.
8. HAGA FLUIR TEXTO EN UN TRAZO
Seleccione un objeto de texto y un objeto de trazo cerrado, y luego seleccione la opción Text>Attach In Path: el bloque de texto se colocará dentro del trazo y seguirá los contornos del mismo. Esto es de mucha ayuda cuando necesita simular CSS y hacer flotar una imagen dentro de un bloque de texto.
9. ESTILOS GLOBALES
Cree, aplique o guarde un estilo directamente desde el inspector de propiedades. Haga clic en el icono New Style para crear un estilo. Este estilo se agregará al menú que aparece justo arriba de los iconos de estilo. Si usted modifica el estilo y el mismo ha sido aplicado a múltiples objetos, solo haga clic en el icono Redefine Style en el inspector de propiedades para actualizar todos los otros objetos que usan el mismo estilo. Esta es una función útil cuando es necesario relacionar otros estilos en el documento a un estilo en particular.
10. INTEGRACIÓN DE LA SUITE
Asegúrese de aprovechar la estrecha integración de Fireworks CS4 con las otras aplicaciones de Creative Suite. Estos son solo algunos ejemplos:
Dreamweaver: Copie una selección o un objeto en Fireworks y péguelo directamente en la vista de diseño de Dreamweaver.
Flash: Un símbolo de botón copiado de Fireworks y pegado en Flash mantendrá todos los estados del botón, incluyendo el estado de “hit”.
Photoshop: Un mapa de bits o una máscara de vectores creados en Fireworks se verán como una máscara editable en Photoshop si se salvan como PSD desde Fireworks.
llustrator: Abrir un documento Illustrator CS4 convertirá cualquier lienzo en Pages en Fireworks. Este es un efectivo flujo de trabajo cuando usted necesita hacer un prototipo o abrir elementos de diseño en Fireworks.
Tags: consejos, Fireworks, tips
Posted in Fireworks | 1 Comment »
Monday, February 16th, 2009
Todos adoramos el Photoshop, pero hay que reconocer que muchas veces nos ayudamos con sus “compañeros”: Illustrator y Fireworks. El problema como nos cuentan en el blog de Francesco Mugnai, es que si bien para Photoshop abundan los tutoriales, y para Illustrator cada vez aparecen mas, para Fireworks no hay gran cantidad. Cuando uno quiere aprender a utilizarlo, cuesta encontrar sitios que nos enseñen obteniendo buenos resultados.
Por eso es bueno visitar la lista que armaron, con 23 tutoriales de Fireworks, todos excelentes y para todo tipo de conocimiento. Si estas aprendiendo, encontrarás tutoriales para dar los primeros pasos. Y si eres un experto, te dan la posibilidad de conocer nuevas técnicas, cosa que nunca esta de mas.
Tags: diseño, Fireworks, Tutorial
Posted in Fireworks, Tutorial | No Comments »
Friday, November 21st, 2008
El administrador de Abduzeedo armó un tutorial que nos explica como crear una tipografía combinando Photoshop y Firewoks. La misma tiene un efecto “grunge” con flores (creadas en base a vectores florales que podremos encontrar por ejemplo en Vecteezy) que le dan un acabado muy atractivo y que se vería bien como parte de una cabecera de un portafolio por poner un ejemplo. La idea es que creemos todo el efecto en Fireworks, para luego agregar texturas y algunos detalles con Photoshop.
En Fireworks escribiremos el texto deseado y lo combinaremos de a poco con los vectores elegidos. Una vez el diseño nos deje conformes, pasaremos a Photoshop. Es momento de crear un fondo y aplicarle ciertos efectos de capa para darle ese aspecto de papel antiguo. Agregamos nuestro texto y aplicamos al mismo una textura con sus valores correspondientes. Solo faltan pocos detalles y tendremos listo el diseño.
Tags: firewoks, Photoshop, texto, Tutorial
Posted in Fireworks, Photoshop, Tutorial | 2 Comments »
