CREAR ICONOS

Debido a los elementos grficos, son fundamentales para el diseo web de alta calidad, que requieren una atencin especial. Este artculo proporciona una gua paso a paso para crear un icono de carpeta en Fireworks.

Los preparativos para la creacin de iconos

Antes de comenzar el desarrollo de su icono, primero debe tener una visin clara de cmo se ver su icono. Por un momento, alejarse de su mquina y tratar de visualizar su idea. Dibujar en una hoja de papel no es necesario, pero puede resultar muy til para sacar sus ideas con el fin de determinar la direccin del diseo del icono que est desarrollando. Este enfoque podra proporcionar respuestas a algunas preguntas muy importantes: "Por dnde empiezo?", "Cmo debo organizar las capas?", "Cuntas capas necesito?", etc.

El tamao del lienzo para este proyecto es de 400 400 pxeles.

La visualizacin inicial del icono de la carpeta contiene dos elementos bsicos: un interno y un lado exterior de la carpeta (vase la Figura 1). Debido al diseo de la carpeta, es lgico comenzar con dos capas.

Figura 1. Esbozo simple del icono de la carpeta Si no est abierta, se puede acceder al panel Capas, seleccione Ventana> Capas o pulsando la tecla F2. Una vez que est abierto, ver el panel Capas en el lado derecho de la pantalla. Por defecto, ya existe una capa (llamada capa 1). Cambie el nombre de la capa actual a cara interior haciendo doble clic en el nombre de la capa existente.

Haga clic en el icono de nueva capa en la parte inferior del panel Capas para crear otra capa (ver Figura 2).

Figura 2. Crear nueva capa Cambiar el nombre de la nueva capa, la capa 2, a cara exterior (ver figura 3).

Figura 3. Organizacin de las dos capas para el proyecto icono de la carpeta Hemos encontrado que la separacin de los elementos en diferentes capas facilita las cosas porque se puede desarrollar cada parte del icono por separado. Sin embargo, es importante sealar que no hay una regla fija acerca de cmo se debe organizar sus capas - aparte de la organizacin de su proyecto de una manera que tiene ms sentido para usted, y le ofrece la posibilidad de trabajar en un entorno que saca lo mejor de sus capacidades de diseo . En otras palabras, la gestin de capa es una cuestin de eleccin personal (algunos diseadores pueden desear utilizar una sola capa, mientras que otros pueden optar por crear una capa separada para cada lnea que dibujan). Adems, tenga en cuenta que a medida que desarrolle su diseo, usted puede optar por aadir o eliminar una o ms capas. Como resultado, la estructura final capa puede diferir de la organizacin capa inicial de crear.

Una vez que haya completado el proceso de preparacin, incluyendo los bocetos de diseo inicial y la creacin de la organizacin de las capas, ya est listo para empezar a trabajar en el desarrollo real.

Dibujo el lado interior de la carpeta

El primer paso de este proyecto es crear una cara interna estilizada de la carpeta. Comience con una forma bsica que se puede manipular mediante la aplicacin de transformacin y las acciones de copiar / pegar a l. Para ello, utilice las herramientas del vector en el panel Herramientas. Si el panel de herramientas no est abierto, seleccione Ventana > Herramientas en el men principal o usar el atajo de teclado (Control + F2 para Windows).

Mientras est seleccionada la capa del lado interno, utilice la herramienta Rectngulo redondeado en el panel Herramientas (vase la Figura 4) para dibujar un rectngulo redondeado, que debera tener aproximadamente el 50 % de la tela.

La Figura 4. Al seleccionar la herramienta Rectngulo redondeado en el panel Herramientas A continuacin, dibuje un rectngulo redondeado ms pequeo con esquinas redondeadas en el lado inferior izquierdo del rectngulo existente. Si necesita ajustar la redondez de las esquinas, utilice la herramienta Puntero para deslizar las asas en forma de diamante amarillo de lado a lado. Una vez que haya posicionado el segundo rectngulo redondeado, seleccione ambos rectngulos y elija Modificar > Combinar trazados > Unin para crear un nico objeto (ver figura 5).

Figura 5. Seleccin de ambos rectngulos y el uso de la Unin para crear un solo objeto Ahora eliminar la redondez de las esquinas del lado derecho. Seleccione la herramienta Rectngulo en el panel Herramientas y dibuje un rectngulo sobre el objeto, asegurndose de que es ms alto que el rectngulo redondeado. Ajuste la anchura de este nuevo rectngulo que sea lo ms amplia que sea necesario para ocultar los bordes redondeados de las esquinas del lado derecho. Una vez que haya posicionado el nuevo rectngulo para ocultar las esquinas redondeadas en el extremo derecho, seleccione ambos objetos y elija Modificar > Combinar trazados > Punch (ver Figura 6). Esto elimina las esquinas redondeadas en el lado derecho de la carpeta. Ahora usted tiene la base para el icono de objeto de la carpeta en una perspectiva 2D.

La Figura 6. Uso de perforacin para eliminar las esquinas redondeadas en el lado derecho de la carpeta Adicin de un diseo 3D

En este punto, usted casi a terminado de crear el objeto bsico que va a utilizar para la parte interior de la carpeta. A continuacin, aplicar algunas transformaciones para lograr un aspecto 3D ms elegante. Para crear una perspectiva 3D, seleccione el objeto y elija la herramienta de inclinacin del panel Herramientas. Utilice la herramienta de inclinacin para dar el objeto un ngulo oblicuo y simular una vista en perspectiva 3D del objeto. Para hacer el punto de vista ms realista, utilice la herramienta Distorsionar para ajustar la parte inferior para que sea ms oblicua que la parte superior (vase la Figura 7).

Figura 7. Uso de las herramientas de sesgar y distorsionar para crear una perspectiva 3D Copia y pega el objeto y mover la forma en la parte superior ligeramente a la derecha con la tecla de flecha derecha en el teclado varias veces. El objetivo es posicionar a la forma superior ligeramente a la derecha para que el objeto debajo aparezca por el lado izquierdo, como un contorno delgado. Aplicar un degradado lineal horizontal sobre el objeto superior. Puede hacerlo seleccionando el objeto superior y con el inspector de propiedades para establecer el color de relleno (consulte la Figura 8).

Figura 8. Aplicar un color de relleno con degradado lineal al objeto de flder Despus de aplicar el relleno de color degradado lineal, ajuste los colores del degradado lineal. Haga clic en el chip de color de relleno en el inspector de propiedades y elegir nuevos colores para el relleno de degradado (vase la Figura 9).

La Figura 9. Seleccin de colores de relleno degradado lineal El color de la izquierda de la pendiente debe ser ajustado a # FFFFFF y el derecho debe ajustarse a # 999999. Despus de configurar los colores del gradiente, use la herramienta de puntero para ajustar la direccin horizontal del gradiente en el objeto (ver figura 10).

La Figura 10. Ajuste de la posicin horizontal del gradiente lineal arrastrando el asa Dibujo el lado exterior de la carpeta

Ahora est listo para crear la parte externa de la carpeta. Puede que le resulte til para desactivar la visibilidad de la capa de fondo haciendo clic en el icono de ojo situado junto al nombre de la capa en el panel Capas, aunque es posible que tambin prefiera mantener la capa inferior visible para ver una vista previa en tiempo real de la grfico final. Esta es una cuestin de eleccin personal. Sin embargo, sin duda recomendara el bloqueo de la capa de fondo haciendo clic en el espacio inmediatamente a la derecha del icono del ojo para asegurarse de que no querer hacer cambios en los elementos que ha creado hasta ahora (ver Figura 11).

La Figura 11. Al hacer clic en las esferas indicadas para bloquear y cambiar la visibilidad de la capa lateral interna Seleccione la capa exterior, o dibujar un rectngulo redondeado que es aproximadamente la mitad de la anchura del objeto de lado interior y alrededor de la

misma altura. Utilice la herramienta Rectngulo para crear un rectngulo delgado sobre el lado derecho y elija Modificar > Combinar trazados > Golpe a quitar las esquinas redondeadas en la parte derecha, tal como lo hizo para el lado interior de la carpeta.

Dibuja un rectngulo redondeado ms pequeo y ajustarla a la parte superior izquierda del rectngulo existente. Mientras que los dos rectngulos son seleccionados, elija Modificar > Combinar trazados > Unin de fusionar los dos rectngulos en un solo objeto (ver figura 12).

Figura 12. Seleccin de ambos rectngulos y fusionarlos en un solo objeto Para terminar el objeto de la capa del lado externo ajustar manualmente el grado de redondez en la esquina inferior izquierda del rectngulo pequeo para crear una lnea en ngulo. Seleccione la herramienta Zoom en el panel Herramientas y ampliar el rea curvada de modo que usted puede ver el detalle de la esquina inferior izquierda del rectngulo pequeo. Utilice la herramienta Subseleccin para seleccionar el objeto. Usted ver un contorno azul con algunos puntos blancos que siguen la silueta del objeto. Haga clic en los puntos individuales y arrstrelos para enderezar la esquina redondeada y hacerlo ms de una curva en ngulo. Si lo desea, tambin puede utilizar los mangos en cada uno de los puntos para ajustar la pendiente de la curva ms (ver Figura 13).

La Figura 13. Con la herramienta Subseleccin para reducir la redondez y hacer una lnea recta Ajuste la ampliacin al 100 %. A continuacin, ajustar el punto de vista de la parte externa de la carpeta para darle un aspecto ms oblicua. Utilice la herramienta de inclinacin para inclinar la direccin del objeto, a continuacin, utilizar la herramienta Distorsionar para ajustar la oblicuidad de la parte inferior. Bsicamente, seguir el mismo proceso que utiliz para ajustar el punto de vista de la cara interior de la carpeta, excepto que esta vez el lado superior del objeto debe ser un poco ms oblicua de la parte inferior para que coincida con el punto de vista (vase la Figura 14).

La Figura 14. Usando las herramientas de Skew y distorsionan para aadir una perspectiva 3D en el lado exterior La incorporacin de ms detalles

Ahora el objeto de manipulacin para el lado exterior del icono de la carpeta est terminado. As como lo hizo para el lado interior de la carpeta, copie y pegue el cdigo objeto y moverlo ligeramente hacia la derecha empujando con la tecla de flecha derecha. Aadir un degradado radial con el objeto superior y la posicin de la pendiente de la esquina superior izquierda. El proceso para aplicar un relleno degradado radial es como aplicar un relleno de color degradado lineal, excepto esta vez seleccione Gradiente > Radial en el men desplegable en el inspector de propiedades (ver Figura 15).

La Figura 15. Aplicar un degradado radial en el lado exterior, alineada con la esquina superior izquierda Ajuste el chip de color de la izquierda de la pendiente a # F90100 y el chip de color adecuado a # 7A0102.

Para crear un brillante 3D detallada de la parte superior de la cara externa, seleccionar y copiar el objeto superior, pguelo en la parte superior de los otros objetos de la capa, y luego moverlo ligeramente hacia la derecha (cerca de tres pxeles) para que un pequeo la columna del objeto relleno degradado se muestre en el lado izquierdo. Llene esta nueva copia con un color blanco slido. Ahora copia el objeto blanco y pegar, pero esta vez lo rellenamos con el color negro slido. Para crear este tipo de detalles, se recomienda el uso de colores contrastantes (por ejemplo, blanco y negro) para que pueda concentrarse en el detalle. Para crear el efecto brillante, que tendr que cubrir la mayor parte de la superficie del objeto blanco con el negro, a excepcin de la zona de la izquierda que quiere mantener. La parte que queda despus de aplicar la opacidad representa el efecto 3D brillante. Use la tecla de flecha derecha para mover ligeramente el objeto negro a la derecha (aproximadamente tres pxeles).

Ahora usted va a utilizar la funcin de perforacin para cortar el rea del objeto negro del objeto blanco. El rea blanca que permanece proporciona el efecto 3D brillante. Antes de usar Golpe para eliminar el rea de color negro, modificarlo ligeramente para que sea cubrir las reas del objeto blanco que desea eliminar. Utilice la herramienta de zoom para centrarse en las reas marcadas 1, 2 y 3 en la figura 16. Mientras que cada rea es ampliada, utilice la herramienta Subseleccin para seleccionar el objeto negro

y volver a colocar los puntos de la lnea para asegurarse de que el objeto negro cubre el objeto blanco en cada rea.

La Figura 16. Con la herramienta Subseleccin para manipular el objeto negro de modo que slo una pequea porcin de blanco permanece en los bordes superior e izquierdo Cuando est satisfecho con la colocacin del objeto negro, ajuste la ampliacin al 100 %. Seleccione ambos objetos en blanco y negro y elija Modificar > Combinar trazados > Punch. La parte que queda es el efecto 3D brillante, y todo lo que queda por hacer ahora es cambiar la opacidad del objeto blanco a 35 % para que parezca brillante (vase la Figura 17).

La Figura 17. Ajuste de la opacidad del borde blanco restante a 35 % La siguiente parte implica la adicin de tres rayas verticales en la derecha de la cara exterior de la carpeta. Seleccione la herramienta Rectngulo y dibuje un rectngulo delgado de unos pocos pxeles de ancho que se extiende por la altura de la parte exterior. Rellene el rectngulo con un color degradado lineal. Cambia las fichas de colores del degradado, el uso de dos colores ligeramente diferentes de color rojo oscuro. Copiar, pegar y mover la banda hacia la derecha por la segunda banda. A continuacin, copiar, pegar y mover la banda hacia la derecha para crear la tercera banda (ver Figura 18).

Figura 18. Usando la herramienta Rectngulo para aadir rayas verticales en el borde derecho de la parte exterior Siguiente crear la sombra brillante sobre la parte superior del lado exterior del icono de la carpeta. Copia y pega la copia superior del objeto de manipulacin sobre la capa de la que tiene el color de relleno degradado radial. Despus de pegar, rellenar la copia de color blanco slido. Seleccione la herramienta Elipse y dibuja una elipse sobre el objeto que acaba de crear, colocar la elipse para que cubra todo lo que desea quitar del objeto luz blanca. Seleccione tanto la elipse y el objeto relleno blanco. Seleccione Modificar> Combinar Ruta> Ponche de modo que slo la zona no cubierto por la elipse permanece. Cambiar la opacidad del objeto blanco al 25% restante para crear el efecto brillante (vase la Figura 19).

La Figura 19. Usando Golpe de suprimir parte del objeto blanco y establecer la opacidad al 25 % Ahora agregue el efecto brillante de la capa del lado interior. En primer lugar, ocultar la visibilidad de la capa exterior, o bloquearlo. A continuacin, desbloquear la capa lateral interna y haga clic en el icono del ojo para ver la capa lateral interna si est oculta. Copia y pega la copia de la parte superior de la carpeta a objetos la que tiene el relleno de degradado. Llene la nueva copia con el color blanco slido. Seleccione la herramienta Elipse y dibuja una elipse sobre el rea del objeto de blanco que desea eliminar. Seleccione tanto la elipse y el objeto blanco, a continuacin, elija Modificar> Combinar Ruta> Punch. Seleccione la parte restante del objeto blanco y establecer su opacidad al 25 % (vase la Figura 20).

La Figura 20. Usando Golpe de suprimir parte del objeto blanco y establecer la opacidad al 25 % Active la visibilidad de la capa lateral exterior para que pueda ver cmo su icono se parece hasta ahora (ver Figura 21).

La Figura 21. Diseo definitivo del icono de la carpeta Por ltimo, se puede personalizar el icono aadiendo una etiqueta de texto a la ficha de la carpeta. Mientras est seleccionada la capa del lado interno, utilice la herramienta Rectngulo para dibujar un rectngulo en el borde saliente. Rellenar con un color slido, de color blanquecino. Utilice la herramienta de inclinacin para ajustar el rectngulo para ajustarse a la perspectiva. Seleccione la herramienta Texto y

escriba el texto de la etiqueta. Mientras se selecciona el texto, utilice la herramienta de inclinacin para girar el texto y ajustar para que coincida con la perspectiva. Reorganizar el orden de los objetos en la capa del lado interior de modo que el rectngulo y el texto de la etiqueta se encuentran por debajo del efecto de sombra brillante de la cara interna de la icono de la carpeta ( vase la Figura 22 ) .

La Figura 22. Completado icono de la carpeta etiquetada Todo lo que queda ahora es para exportar el icono en el formato de archivo de su eleccin y lo utilizan como un elemento de diseo para su sitio web.