CreativeWeb Blog

Creando una Estrella

Empezamos creando una figura base, la estrella. Selecciona la Herramienta Estrella y dibuja una estrella de unos 150px de ancho. Arrastra el cuadro de Puntos(Points Handle) para incrementar la cantidad de puntas a unas 22, haz lo mismo con el radio interior Radio 2(Inner Radius Handler) para producir puntas más cortas y más triangulares.

A continuación vamos a agregar un poco de color. Dale a tu nueva figura un relleno gradientado hacia arriba, de #DDA600 a #FFEB77. Eso le dará un buen tono dorado. Ajusta los colores de acuerdo a tu gusto y necesidades; puedes usar un azul rey, rojo, o algún verde. Ahora vamos a agregarle a nuestro sello una sombra sutil. Agrégale a la figura un Filtro de Sombra, con 2 de Distancia, 55% de Opacidad, 2 de Suavidad y 270º de Ángulo.

Mini Tutorial de Faux Invertido

Usa la Herramienta Texto e introduce tu texto principal encima y centrado en tu figura del sello. Para el ejemplo usé la fuente Georgia negrita-itálica, pero puedes usar cualquier fuente que sea de tu agrado (las fuentes serif tradicionales se ven bien en los sellos). Dale un color similar en hue, pero un poco más oscuro al color de tu figura del sello, en este caso vamos a usar #DDA600.

Copia el texto (Ctrl+C) y pégalo (Ctrl+V) y muévelo una capa hacia abajo (Ctrl+?). Usando las flechas de tu teclado, sube el nuevo texto dos píxeles, dale un relleno negro, y pon su opacidad en 50%.

Repite los pasos anteriores pero ahora mueve el texto dos píxeles abajo y ponle un relleno color blanco, igual con la opacidad en 50%.

Palabras que dan la Vuelta

Para la pièce de résistance, vamos a poner un texto acompañando a nuestro sello siguiendo una guía circular, muy similar a los sellos dorados que vemos en certificados o documentos legales.

Usa la Herramienta Elipse para crear un círculo exterior, centrado sobre la figura del sello. Después, usando la Herramienta Texto crea un par de textos centrados y justificados que formarán las partes del texto que rodeara el sello. Céntralos horizontalmente sobre el círculo que acabas de crear, alinea la parte superior del primer texto con la parte superior del círculo, y alinea la parte inferior del segundo texto, con la parte inferior del círculo.

Después de esto, crea un nuevo círculo más pequeño que el anterior, con su parte superior tocando el inferior del primer texto y su parte inferior tocando por arriba al segundo texto. Esto hará que tus textos estén perfectamente alineados a los trazados concéntricos una vez que los unamos a los círculos.

Una vez que tengas todo alineado, selecciona la primera parte del texto y el círculo interior, y únelos al trazado (Texto > Unir al Trazado; Ctrl+Shift+Y). Una vez que el texto esté unido al trazado del círculo, ajusta el Desplazamiento de Texto o la Posición del Texto sobre el Trazado hasta que esté bien centrado. Repite lo mismo con la segunda parte del texto, pero ahora lo harás con el círculo exterior, y aparte invertirás la dirección del texto (Texto > Invertir dirección) para que el texto se mueva dentro del círculo.Para terminar, ajusta la distancia de las letras en tus textos para que ocupen la cantidad de espacio suficiente. Dale a tus textos un color similar a la de tu figura del sello, con la suficiente oscuridad o brillantez para generar un contraste con el fondo.

Tips para su Uso

Cuando hayas terminado, selecciona todos los objetos de tu lienzo (Ctrl+A) y crea un símbolo con ellos (F8). Debido a algunos detalles con el Fireworks cuando escalas o rotas figuras con gradientes y textos sobre trazados, te convendrá allanar todas las capas de tu nuevo símbolo (Ctrl+Shift+Alt+Z) antes de aplicar cualquier transformación. También, dependiendo de la situación, te convendría ajustar la intensidad de la sombra para hacer que tu sello destaque más.

NOTA: El autor de éste tutorial no se hará responsable por ninguna consecuencia legal que pueda surgir por el mal uso del mismo, incluyendo pero no limitado a falsificación de documentos oficiales

Smashing Magazine hizo una buenísima recopilación de 50 espectáculares diseños web basados en CSS (Hojas Estilo). Aquí dejo en enlace para que puedas ver los mejor de lo mejor en diseño. De todas maneras creo que habrán muchisimos diseños buenos que tocaría agregarle a la lista.

En este post enseñare como conseguir este portafolio en Fireworks, este tutorial esta disponible para Photoshop pero logrer hacer el mismo trabajo en firewors. Al final dejere el template en formato PSD para que lo estudien y/o modifiquen al gusto de cada quien.

(more…)

En el este articulo vamos a trabajar un poco sobre la creación de un logo en fireworks y trabajamos con vectores. Sin duda Fireworks es una herramienta fantástica para el desarrollo web.

Primero deberemos tener los siguientes conceptos claros:

Bitmap: Pintan cada píxel para formar una figura. Cada vez que un Bitmap es trabajado, se pierde resolución.

Vectoriales: Las figuras son generadas matemáticamente por la CPU. Cada figura es un objeto que puede ser borrado o redimensionado sin perder resolución.

Vamos a trabajar con imágenes vectoriales en el Fireworks a través de la creación de una marca o logo para una empresa. Voy sólo desarrollar de forma ficticia y sin concepción ninguna, pues no existirá empresa. Sólo vamos a mostrar como es posible usar el Fireworks para dibujos vectoriales.
(more…)