Utilice Fireworks para crear detalles exquisitos en los íconos

En este artículo, utilizamos el software Fireworks para crear algunos detalles en una imagen de ícono ya preparada para hacer que el ícono sea más refinado y hermoso.

Hay dos puntos principales a tener en cuenta al utilizar Fireworks (en adelante, FW) para el diseño de iconos:

En primer lugar, FW se centra en el diseño web y no es adecuado para crear efectos PS demasiado complejos. Puede esperar los filtros PS de FW CS5;
En segundo lugar, el método de edición de FW es similar al de AI. Si está acostumbrado a trabajar en un entorno de sombreado de píxeles similar a PS, puede ignorar este tutorial.

A continuación, vayamos al grano. Copiemos un ícono relativamente estándar para la explicación, lo que hará que sea más fácil de entender para todos.

La siguiente imagen es un conjunto de íconos creados por el conocido diseño doméstico eico. El objeto que queremos copiar es el ícono del sobre enmarcado en la imagen. Permítanme explicarles de antemano que debido al tema del tutorial, agregaremos algunos detalles a este ícono, por lo que el resultado final de la copia será diferente de la imagen original.

Paso 01

Recorta el ícono que deseas copiar como referencia y bloquea la capa. El panel de ruta de mi FW aquí se extrae de Fireworks CS4, pero no tiene ningún impacto en las operaciones posteriores porque uso todas las funciones incluidas en CS3.

Paso 02

Utilice la herramienta Rectángulo redondeado para dibujar un rectángulo redondeado similar a la imagen de muestra, utilice los cuatro puntos de control de las esquinas redondeadas para ajustar el radio de las esquinas redondeadas y luego presione Ctrl+Mayús+G para dividir la forma.

Luego copie el primer rectángulo redondeado, use la herramienta de flecha blanca para mover un píxel en cuatro direcciones y cree dos rectángulos redondeados como se muestra en la imagen (tenga en cuenta que los ocho nodos en las esquinas redondeadas se procesan con flechas blancas, deben ser alineado).

No podemos usar Trazo para agregar un borde exterior a un rectángulo, porque el borde virtual te matará. Si el rectángulo redondeado que dibujó con la herramienta Rectángulo redondeado tiene bordes virtuales sin trazo, distribuya los nodos, seleccione la ruta con la herramienta de flecha negra y haga clic en Redondear puntos a píxeles en el panel Ruta para devolver todos los nodos de la ruta. .posición a la intersección de píxeles (también puede utilizar la herramienta de flecha blanca para seleccionar un nodo para el inicio individual).

Paso 03

Copia el rectángulo redondeado grande y colócalo en la capa superior. Usa la flecha blanca y las teclas Shift+flecha para obtener un triángulo invertido. Luego, cópialo. Rellena el triángulo invertido superior con un degradado lineal; establezca un desvanecimiento de 1px.

Paso 04

Utilice las flechas blancas para seleccionar los nodos que se muestran en el medio y luego utilice las teclas de flecha del teclado para bajar dos píxeles y hacer que el sobre parezca más largo (porque un solo icono aquí no está limitado por el estilo general).

Paso 05

Voltee el triángulo invertido relleno de degradado dibujado previamente verticalmente, haga una copia y colóquelo. Su relación posicional es como se muestra en la imagen a continuación. Los dos triángulos invertidos están separados por poco más de 1 px de arriba a abajo. Puede usar la herramienta de flecha blanca para seleccionar los cuatro nodos sobre el triángulo invertido de color marrón oscuro y arrastrar el mouse con la línea auxiliar para mover los nodos hacia arriba entre 0,3 y 0,5 píxeles. Esto hará que el marrón oscuro parezca menos borroso primero (y luego). Una vez más, abandona lo antes posible la idea de utilizar Stroke para los bordes, esto no es Photoshop).

Paso 06

Tenga en cuenta que hay un resaltado encima del ícono en la imagen de muestra, y no es un resaltado radiante de un solo píxel común (el resaltado de 1 px sobre el resaltado de aproximadamente dos píxeles es más brillante que el de 1 px debajo), por lo que puede considerar usar un Un radiador elíptico como Ellipse Filling consigue este efecto.

Seleccionamos y copiamos el rectángulo redondeado inferior dos veces. Después de mover la posición, obtenemos dos rectángulos redondeados a 2 píxeles de distancia entre sí. Usamos el método de restar los dos trazados rectangulares para obtener un nuevo trazado y lo rellenamos con Elipse (blanco 0). -100 transparencia), y finalmente establezca el modo de superposición de esta ruta resaltada en Superposición.

Paso 07

Agrega un resaltado de 1px en la parte inferior.

Paso 08

El resultado actual se muestra a continuación. Tomemos un descanso y tomemos té. A continuación, agregaremos detalles.

Paso 09

Al cambiar temporalmente el fondo a blanco, podemos ver que debido al difuminado utilizado en el triángulo invertido anterior, algunos píxeles se desbordaron un poco de ambos lados del sobre.

Hay dos métodos para procesar estos píxeles. Uno es Aplanar como mapa de bits y el otro es enmascarar manteniendo la ruta. Prefiero este último porque conserva la ruta y se puede editar más tarde si es necesario. abajo:

Paso 10

Volvamos al fondo oscuro. ¿Sientes que los lados del sobre son un poco planos? Usemos un relleno de barras o radial para agregar algún efecto.

Paso 11

A continuación, agregue resaltados de un solo píxel a los triángulos superior e inferior del sobre. Debido a que la operación de resta de ruta (Perforar ruta, puede encontrarla en el menú Modificar - Combinar rutas) se ha discutido repetidamente antes, no la explicaré. aquí, como se muestra a continuación:

Paso 12

De la misma manera, agrega luces al triángulo de abajo.

Paso 13

Debido a que el fondo es de un color más oscuro, podemos considerar agregar un brillo. Aquí no utilizamos el filtro de proyección o luminiscencia de FW, sino que utilizamos Path ¿Por qué? Porque es más fácil de controlar, solo por preferencia personal. Podemos hacer un nuevo rectángulo redondeado que sea 1 px más grande en la parte superior, inferior, izquierda y derecha que el rectángulo redondeado inferior del sobre, sin difuminado y con una transparencia de 30.

Paso 14

Luego agregue un resaltado de 1 px a continuación.

Paso 15

En este punto, el ícono está básicamente completo y ahora ingresamos a la etapa de pulido. Seleccionamos todas las capas y las "copiamos", luego presionamos rápidamente Ctrl+Alt +Shift+Z para aplanar las capas en mapas de bits, y luego configuramos el modo de superposición en Superposición y la transparencia en 60, para que podamos ver la saturación de el icono. Se han mejorado el grado y el contraste. Este es mi método favorito para un pulido rápido, pero no es aplicable en todo momento. A veces hay que usar manualmente los filtros integrados de FW para ajustar parámetros como curvas, contraste, y saturación.

Finalizar

El efecto final (el triángulo debajo del sobre usa Path como proyección)