La descripción oficial del producto dice:
Acelere el diseño y el desarrollo de webs con el software Adobe Fireworks CS3, la herramienta ideal para crear y optimizar imágenes para la web, así como para diseñar prototipos y aplicaciones web rápidamente. Fireworks CS3 ofrece la flexibilidad para editar imágenes de mapas
de bits y vectores, una biblioteca común de activos prediseñados y una rápida integración con Adobe Photoshop CS3, Adobe Illustrator CS3, Adobe Dreamweaver CS3 y Adobe Flash CS3 Professional. Visualice diseños rápidamente en Fireworks, o aproveche otros activos de Illustrator, Photoshop y Flash. A continuación trasládelos directamente a Dreamweaver CS3 para un desarrollo y una implantación sencillos.
Requisitos del sistema:
Windows
- Intel® Pentium® 4, Intel Centrino®, Intel Xeon® o procesador Intel Core™ Duo (o compatible)
- Microsoft® Windows® XP con Service Pack 2 o Windows Vista™ Home Premium, Business, Ultimate o Enterprise (certificada para ediciones de 32 bits)
- 512 MB de RAM (se recomienda 1 GB)
- 1 GB de espacio disponible en el disco duro (se necesita espacio libre adicional durante la instalación)
- Resolución de pantalla de 1.024 x 768
- Unidad de DVD-ROM
- Software QuickTime 7 necesario para funciones multimedia
- Es necesaria una conexión a Internet o telefónica para activar el producto
- Conexión a Internet de banda ancha para Adobe Stock Photos y otros servicios
Los preparativos para la creación del icono
Antes de comenzar el desarrollo de su icono, primero debe tener una visión clara de cómo el icono se verá. Por un momento, se aleja de su máquina y tratar de visualizar su idea. Dibujar en una hoja de papel no es obligatorio, pero puede que le resulte muy útil para sacar sus ideas a fin de determinar la dirección del diseño del icono que se están desarrollando. Este enfoque podría dar respuestas a algunas preguntas muy importantes: "¿Por dónde empiezo?", "¿Cómo debo organizar las capas?", "¿Cuántas capas necesito?", Etc A los efectos de este artículo, vamos a utilizar los archivos de muestra proporcionados para crear un icono de la carpeta. Usted puede descargar y abrir el archivo de ejemplo (folder_icon.png) disponible a principios de este artículo para seguir con los pasos. Una vez que se han abierto y revisado el archivo PNG siempre muestra, que está listo para comenzar. Comience por crear un nuevo documento de Fireworks. El tamaño del lienzo para este proyecto es de 400 × 400 píxeles.
La visualización inicial del icono de carpeta contiene dos elementos básicos: un interior y un lado exterior de la carpeta (ver Figura 1). Debido al diseño de la carpeta, es lógico comenzar con dos capas.
Figura 1. Dibujo sencillo de la icono de la carpeta
Si no está abierta, puede acceder a el panel Capas, seleccione Ventana> Capas o pulsando la tecla F2. Una vez abierta, verá el panel Capas en la parte derecha de la pantalla. Por defecto, una capa (llamada capa 1) ya existe. Cambie el nombre del lado de la capa interna existente 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 una nueva capa (ver Figura 2).
Figura 2. Crear una nueva capa
Cambiar el nombre de la nueva capa, la capa 2, como el lado exterior (ver Figura 3).
Figura 3. Organización de las dos capas para el proyecto icono de la carpeta
Hemos encontrado que la separación de los elementos en diferentes capas facilita las cosas porque usted puede desarrollar cada parte del icono por separado. Sin embargo, es importante señalar que no hay una regla fija acerca de cómo se deben organizar las capas, que no sea la organización de su proyecto de una manera que tiene más sentido para usted, y le ofrece la capacidad de trabajar en un entorno que saca lo mejor de sus capacidades de diseño. En otras palabras, la gestión de capa es una cuestión de elección personal (algunos diseñadores posible que desee utilizar una sola capa, mientras que otros pueden optar por crear una capa separada para cada línea que lo haga). Además, tenga en cuenta que a medida que desarrolla su diseño, usted puede decidir añadir o eliminar una o más capas. Como resultado, la estructura de la capa final puede ser diferente de la organización de la capa inicial de crear.
Una vez que hayas completado el proceso de preparación, incluyendo los bocetos iniciales de diseño y configuración de la organización de las capas, ya está listo para comenzar a trabajar en el desarrollo real.
Dibujo el lado interior de la carpeta
El primer paso de este proyecto es crear un lado estilizada interior de la carpeta. Comience con una forma básica que se puede manipular mediante la aplicación de una transformada de unos pocos y copiar / pegar las acciones a la misma. Para ello, utilice las herramientas vectoriales en el panel Herramientas. Si el panel de herramientas no está la ventana abierta, seleccione Opciones> Herramientas en el menú principal o usar el atajo de teclado (Control + F2 para Windows, Command + F2 para Mac).
Mientras que la capa lateral interno está seleccionado, utilice la herramienta Rectángulo redondeado desde el panel de herramientas (ver Figura 4) para dibujar un rectángulo grande redondeada, que debe tener aproximadamente el 50% de la tela.
Figura 4. Selección de la herramienta Rectángulo redondeado en el panel Herramientas
A continuación, dibuje un rectángulo más pequeño redondeado con esquinas redondeadas en la parte inferior izquierda del rectángulo existente. Si es necesario ajustar la redondez de las esquinas, utilizar la herramienta Puntero para deslizar las amarillas en forma de diamante asas de lado a lado. Una vez que haya colocado el segundo rectángulo redondeado, seleccione los dos rectángulos y elija Modificar> Combinar trazados> Unión para crear un solo objeto (ver Figura 5).
Figura 5. Selección de los dos rectángulos y el uso de la Unión para crear un solo objeto
Ahora quite la redondez de las esquinas del lado derecho. Seleccione la herramienta Rectángulo en el panel Herramientas y dibuje un rectángulo sobre el objeto, asegurándose de que es más alto que el rectángulo redondeado. Ajuste el ancho de este nuevo rectángulo para que sea tan amplio como sea necesario para ocultar los bordes redondeados de las esquinas del lado derecho. Una vez que haya colocado el nuevo rectángulo para ocultar las esquinas redondeadas en el borde derecho, seleccionar los dos 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 objeto icono de la carpeta en una perspectiva 2D.
Figura 6. Usando perforación para eliminar las esquinas redondas en el lado derecho de la carpeta
Adición de un aspecto 3D
En este punto, ya casi ha terminado de crear el objeto de base va a utilizar para la parte interior de la carpeta. A continuación, aplicar algunas transformaciones para lograr un aspecto más estilizado en 3D. Para crear un punto de vista 3D, seleccione el objeto y elija la herramienta Sesgar en el panel Herramientas. Utilice la herramienta de inclinación para dar el objeto un ángulo oblicuo y simular una vista en perspectiva 3D del objeto. Para hacer que el punto de vista más realista, utilice la herramienta de distorsión para ajustar la parte inferior para que sea más oblicua que la parte superior (ver Figura 7).
Figura 7. Usando 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 pulsando la tecla de flecha hacia la derecha en el teclado varias veces. El objetivo es posicionar a la forma superior ligeramente a la derecha para que el objeto debajo aparece por el lado izquierdo, al igual que una delgada. Aplicar un degradado lineal horizontal sobre el objeto superior. Usted puede hacer esto, seleccione el objeto superior y con el inspector de propiedades para establecer el color de relleno (ver Figura 8).
Figura 8. La aplicación de un color relleno con degradado lineal al objeto de carpeta de nivel superior
Después de haber aplicado el relleno de degradado de color lineal, ajustar 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 (ver Figura 9).
Figura 9. Selección de los colores de relleno de degradado lineal
El color de la izquierda de la pendiente se debe establecer en # FFFFFF y el derecho debe ajustarse a # 999999. Después de configurar los colores del degradado, utilice la herramienta de puntero para ajustar la dirección horizontal de la pendiente en el objeto (ver Figura 10).
Figura 10. Ajuste de la posición horizontal de la gradiente lineal arrastrando el manejador
Dibujo el lado exterior de la carpeta:
Ahora ya estás listo para crear la parte externa de la carpeta. Puede que le resulte útil para desactivar la visibilidad de la capa inferior, haga clic en el icono del ojo situado junto al nombre de la capa en el panel Capas, aunque también pueden preferir mantener la capa inferior visible para ver una vista previa en tiempo real de la gráfica final. Esta es una cuestión de elección personal. Sin embargo, recomendamos definitivamente el bloqueo de la capa inferior, haga clic en el espacio inmediatamente a la derecha del icono de ojo para asegurarse de que accidentalmente no realizar cambios en los elementos que hemos creado hasta ahora (ver Figura 11).
Figura 11. Al hacer clic en las áreas indicadas para bloquear y alternar la visibilidad de la capa lateral interno
Seleccione la capa lateral exterior y dibujar un rectángulo redondeado que es aproximadamente la mitad de la anchura del objeto de la cara interna y sobre la misma altura. Utilice la herramienta Rectángulo para crear un rectángulo delgado sobre el lado derecho y selecciona Modificar> Combinar trazados> Punch para eliminar las esquinas redondeadas en el lado derecho, tal como lo hizo por el lado interior de la carpeta.
Dibuja un rectángulo redondeado más pequeño y alinear a la parte superior izquierda del rectángulo existente. Mientras tanto uno de los rectángulos son seleccionados, elija Modificar> Combinar trazados> Unión para fusionar los dos rectángulos en un solo objeto (ver Figura 12).
Figura 12. Selección de los dos rectángulos y fusionarlos en un solo objeto
Para finalizar el objeto de la capa lateral exterior ajustar manualmente el grado de redondez en la esquina inferior izquierda del rectángulo pequeño para crear una línea inclinada. Seleccione la herramienta Zoom del panel Herramientas y ampliar el área curvada de modo que usted puede ver el detalle de la esquina inferior izquierda del rectángulo pequeño. Utilice la herramienta Subselección 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 arrastrarlos a enderezar la esquina redondeada y hacerlo más de una curva en ángulo. Si lo desea, también puede utilizar las asas de cada uno de los puntos para ajustar la pendiente de la curva más (ver figura 13).
Figura 13. Con la herramienta Subselección para disminuir la redondez y hacer una línea recta
Ajuste el aumento de nuevo a 100%. A continuación, ajustar el punto de vista de la parte externa de la carpeta para darle una mirada más oblicua. Utilice la herramienta de inclinación para inclinar la dirección del objeto, a continuación, utilizar la herramienta Distorsionar para ajustar la oblicuidad de la parte inferior. Básicamente, sigue el mismo proceso que usa 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 más oblicua que la parte inferior para que coincida con el punto de vista (véase figura 14).
Figura 14. Usando las herramientas de sesgar y distorsionar para añadir una perspectiva 3D de la cara externa
