A complete graphic design, illustration, web design and typography course.

Web graphics programs

Analizamos aquí los principales programas que se emplean para crear gráficos para la web. Para preparar imágenes sirve cualquier programa de los que comentamos en la sección de GRAPHIC DESIGN: unos tienen más prestaciones, otros no tantas. Las versiones más recientes de cualquier programa de dibujo o pintura tienden a incluir módulos específicos para la creación de gráficos web. Ahora bien, cabe decir que estos últimos años se han impuesto algunas soluciones específicamente enfocadas a la preparación de imágenes para la web. Destacan Fireworks (que ya está en su quinta (mx) versión), LiveMotion (antes Imagestyler), Imageready (incluido en Photoshop 5.5.) Y aparte de estos, no es muy conocido, pero quien lo ha probado dice que es el programa definitivo: Xara: una muy potente herramienta de dibujo vectorial y preparación de imágenes para la web. Existe una versión "menor" de Xara (llamada Webster), aún más específica para el trabajo de creación de gráficos para la web. Otra solución son los programas que crean contenido Flash (Flash y Director.) We analyzed here the main programs that are used to create graphs for the Web. In order to prepare images it serves any program as which we commented in the section of graphical design: they have more benefits, others not so many. The most recent versions of any drawing program or painting tend to include specific modules for the creation of graphs Web. However, it is possible to say that these last years some solutions specifically focused to the preparation of images for the Web have prevailed. They emphasize Fireworks (that already it is in his villa (MX) version), LiveMotion (before Imagestyler ), Imageready (including in Photoshop 5,5.) And aside from these, it is not very well-known, but that has proven it it says that it is the definitive program : Xara: a very powerful vectorial drawing tool and preparation of images for the Web. A smaller "version of Xara (Webster call), still more specific exists" for the work of creation of graphs for the Web. Another solution is the programs that create content Flash ( Flash and Director .)

Aunque casi todos los gráficos que utilizaremos para las páginas web son en mapa de bits, las ventajas de crearlos en un programa vectorial son múltiples. Puesto que las imágenes se pueden escalar sin pérdida alguna de calidad, nunca hay problemas para cambiar las dimensiones de una imagen. Esto es muy importante, puesto que con frecuencia necesitamos un nuevo gráfico para un icono, un menú, un botón; además el texto se mantiene editable indefinidamente, con lo que puede seguir modificándose una vez aplicados determinados efectos. Although almost all the graphs that we will use for the pages Web are in bit map, the advantages to create them in a vectorial program are multiple. Since the images can be scaled without loss some of quality, never there are problems to change the dimensions of an image. This is very important, since frequently we needed a new graph for an icon, a menu, a button; in addition the text stays editable indefinitely, with which it can continue modifying itself applied certain effects once.

Las funciones avanzadas de manejo de formas geométricas, colocación de los elementos, etc. también son una gran ayuda para crear imágenes. Así, programas como Illustrator, Freehand, Corel Draw o Xara son magníficas herramientas para la preparación y conservación de originales para la web (a partir de ellos exportaremos los gif o jpg necesarios.) La idea que hay tras programas tales como Fireworks o Livemotion es precisamente crear las imágenes en un entorno de creación vectorial, que permita tener siempre disponible un original, listo para preparar nuevas variantes sin ningún impedimento. Estos son sin duda la elección más aconsejable para los profesionales del diseño gráfico aplicado a la web, puesto que las características de los programas cubren todas las necesidades que nos encontramos a la hora de crear los elementos visuales de una página web actual, sobre todo: The functions outposts of handling of geometric forms, positioning of the elements, etc. also are a great aid to create images. Thus, programs like Illustrator, Freehand, Corel Draw or Xara are magnificent tools for the preparation and conservation of original for the Web (from them we will export the necessary GIF or jpg.) Idea that there is after programs such as Fireworks or Livemotion is indeed to create the images in surroundings of vectorial creation, that allows to have always available an original one, ready to prepare new variants without no impediment. These are without a doubt election more advisable for professionals of design graphical applied to Web, since the characteristics of the programs mainly cover all the necessities that we were at the time of creating the visual elements of a page present Web,:

  • Preparación de miniaturas de imágenes y procesado por lotes de los ficheros,
  • Creación de mapas de imagen,
  • Recorte o despiece de imágenes grandes,
  • Generación de animaciones GIF,
  • Transparencias de GIFs,
  • Optimización de color y tamaño de los ficheros gráficos.
  • Aplicación de efectos para crear imágenes interactivas, como los mouseover.
  • procesamiento por lotes de conjuntos de imágenes, por ejemplo, para crear automáticamente miniaturas de carpetas completas de imágenes.
  • Preparation of miniatures of images and processed by lots of the files,
  • Creation of image maps,
  • Cut or quartering of great images,
  • Generation of animations GIF,
  • Transparencies of GIFs,
  • Optimization of color and size of the graphical files.
  • Application of effects to create interactive images, like mouseover .
  • batch processing of sets of images, for example, automatically to create miniatures of complete folders of images.
optimising images in Fireworks

Este es el aspecto típico de una utilidad dedicada a la creación y optimización de gráficos para la web.  En estas páginas proporcionaremos algunos consejos referentes a la forma en que se pueden llevar a cabo estar tareas, muchas de ellas rutinarias dentro de la creación de gráficos para la web. This it is the typical aspect of a utility dedicated to the creation and optimization of graphs for web. In these pages we will provide some referring advice to the form in which they are possible to be carried out to be tasks, many of routine them within the creation of graphs for the Web.

Fireworks destaca especialmente en tareas como el recorte de imágenes grandes en partes, para facilitar su descarga y para crear efectos especiales al ensamblar de nuevo la imagen en una tabla. Simplemente, se colocan unas líneas guía (arrastrando desde las reglas) y el programa se ocupa de cortar la imagen al largo de las guías y genera una tabla que las contiene colocadas correctamente. También destaca en el resto de funciones especiales para la creación de gifs o jpgs para la web. Fireworks incorpora toda una colección de efectos que se pueden aplicar a imágenes ya elaboradas o a las que se vayan dibujando con sus muchos útiles de dibujo y pintura, tanto en modo vectorial como de bitmaps. Fireworks specially emphasizes in tasks as the cut of great images in parts, to facilitate its unloading and to create special effects when assembling again the image in a table. Simply, lines are placed guides (dragging from the rules) and the program take care to cut the image to the length of the guides and generate a table that contains them placed correctly. Also it emphasizes in the rest of special functions for the creation of gifs or jpgs for the Web. Fireworks incorporates all a collection of effects that can be applied to elaborated images or or to which they are drawn with his many equipment of drawing and painting, as much in vectorial way as of bitmaps.

Export dialog in Fireworks

Fireworks ofrece un control exhaustivo sobre la producción de gráficos para la web, con la comodidad y potencia de los entornos de dibujo vectorial combinado con los efectos de un programa de pintura. Fireworks offers an exhaustive control on the production of graphs for the Web, with the comfort and power of the surroundings of combined vectorial drawing with the effects of a painting program.

Al manejar los gráficos en forma de vector, si cambiamos las dimensiones de cada objeto, no hay merma en la calidad y se puede rehacer cualquier cambio. Otras funciones muy provechosas para su manejo profesional son la librería de objetos (un panel donde se guardan los objetos que se usan repetidamente, para arrastrar y soltar en el dibujo), la aplicación de estilos a los gráficos o el texto, y la posibilidad de buscar y cambiar todos los objetos que tienen determinadas características... El programa está muy bien integrado con otros productos de su fabricante, Macromedia. En especial con el editor de web Dreamweaver. Sin embargo, es necesario decir que el programa es muy voraz en términos de memoria, y hace falta una buena máquina para sacarle partido. Fireworks puede obtenerse en versión de evaluación; podemos descargarlo de casi cualquier servidor de ficheros, o bien de Macromedia (www.macromedia.com.) También es frecuente que aparezca en cd-roms de obsequio con revistas de informática.  Xara X (antes Corel Xara) es, en contraste con la mayoría de programas actuales, un prodigio de buen diseño, eficiencia y rapidez; aunque es increíblemente pequeño, en comparación con lo que suelen ser las aplicaciones similares -¡cabe en tres diskettes! - incorpora casi todas las funciones de los mejores programas de ilustración vectorial y diseño para la web. Sus filtros de exportación de gif i jpg son excelentes. Permite crear rápida y sencillamente animaciones y mapas de imagen. Es, sobre todo, muy rápido, y necesita muy pocos recursos. La calidad de sus formas suavizadas y rapidez en la aplicación de efectos a las imágenes, no tienen competencia ni siquiera por parte de las aplicaciones como Fireworks. When handling the graphs in vector form, if we changed the dimensions of each object, there is no decrease in the quality and any change can be remade. Other very beneficial functions for their professional handling are the bookstore of objects (a panel where the objects keep that are used repeatedly, to drag & to drop in the drawing), the application of styles to the graphs or the text, and the possibility of looking for and of changing all the objects that have certain characteristics... The program is very well integrated with other products of its manufacturer, Macromedia. In special with the publisher of Web Dreamweaver. Nevertheless, it is necessary to say that the program is very voracious in memory terms, and makes lack a good machine to remove started off to him. Fireworks can be obtained in evaluation version; we can unload it of almost any servant of files, or of Macromedia (www.macromedia.com.) Also he is frequent that appears in CD-roms of flattery with computer science magazines. Â Xara X (before Corel Xara) is, in contrast to most of present programs, a prodigy of good design, efficiency and rapidity; although he is incredibly small, in comparison with which usually they are the similar applications - it fits in three floppy disks ! - it incorporates almost all the functions of the best vectorial design and illustration programs for the Web. Their filters of export of GIF i jpg are excellent. It allows to simply create fast and animations and maps of image. He is, mainly, very fast, and needs very few resources. The quality of their smoothed forms and rapidity in the application of effects to the images, not even have competition on the part of the applications like Fireworks.

Lo lamentable de Xara, siendo tan bueno, es que es una especie de secreto bien guardado por los profesionales que disfrutan de él. ¡La mayoría ignora su existencia! Su distribuidor, Corel, lo tuvo relegado a la venta online -si bien, en compensación, ha ido incorporando a CorelDraw las mejores funciones presentes en Xara.  Finalmente, Xara Webster (que, en su versión 1, se ofrece gratis con la revista PC Plus), es una utilidad sencilla, semejante a Imagestyler, pero mucho más potente, pequeña y rápida, y que incorpora algunas de la magníficas herramientas de Xara (insuperables transparencias de cualquier tipo, animaciones fáciles...) Todos los programas de Xara, incluido Webster, y el interesante Xara 3D tienen versiones de evaluación disponible en su sitio web (xara.com.) Lamentable of Xara, being so good, it is that it is a species of affluent secret kept by the professionals who enjoy him. The majority ignores its existence! His distributor, Corel, had it relegated on sale online - although, in compensation, he has been incorporating to CorelDraw the best present functions in Xara. Finally, Xara Webster (that, in its version 1, free offers with magazine PC Extra), is utility a simple, similar to Imagestyler, but much more powerful, small and fast, and that incorporates some of the magnificent tools of Xara (insurmountable transparencies of any type, easy animations...) All the programs of Xara, including Webster, and the interesting Xara 3D has versions of evaluation available in their Web site (xara.com.)

Color scheme designer

Los programas para crear esquemas de colores, como Color Scheme Designer son muy útiles para planear el aspecto visual de un sitio web y crear paletas de colores armónicos. The programs to create schemes of colors, as Color Scheme Designer is very useful to plan the visual aspect of a Web site and to create trowels of harmonic colors.

Servicios online y gráficos pre-diseñados.

Si bien lo habitual es crear los gráficos en alguna de las aplicaciones comentadas, no olvidemos que una buena parte de nuestras necesidades de imagen quedan cubiertas con las colecciones de clipart y fotografía de que se puede disponer, bien en forma de disco, bien descargándolos de la web. Estas imágenes no siempre son exactamente lo que uno anda buscando, y puede ser preciso modificarlas en mayor o menor medida. En Diseño - Ilustración tenemos un artículo dedicado a esta cuestión.

Por otra parte en la web encontramos una serie de servicios muy interesantes que nos permiten descargar elementos para nuestras páginas y diseños, o incluso crearlos a medida. Estos son algunas direcciones que merece la pena visitar: Although the habitual thing is to create the graphs in some of the commented applications, we do not forget that a good part of our necessities of image is left covers with the collections of clipart and photographs of that can be arranged, either in disc form, or unloading them of the Web. These images not always are exactly what one walks looking for, and can be precise to modify them in greater or smaller measurement. In Design - Illustration we have an article dedicated to this question. On the other hand in the Web we found a series of very interesting services that allow us to unload elements for our pages and designs, or to even create them to size. These are some directions that the pain deserves to visit: