Professional Documents
Culture Documents
Indice
Introducción 13
¿Por qué Web Designer es tan especial? 13
Una página web en 6 pasos 14
Ayuda 15
Información de documento 15
Acerca de Web Designer 15
Primeros pasos 16
Diseño del programa 16
Objetos en la página 18
Diseño web basado en objetos 19
La herramienta de selección 20
Vista previa de tu página web 22
Utilización de plantillas, cliparts y widgets 23
Colores de la página web 24
Fotos 33
Texto 37
Tamaño de página 41
Guardar tu trabajo. Creación de una página Web 42
Objetos elásticos 43
Grupos 44
Enlaces, botones y barras de botones 45
Herramientas de dibujo 49
Capas, mouseover (rollover) y pop·ups 54
Creación de botones, banners y otros gráficos web 58
Publicar tu página web 59
Integración de películas, Flash y otros widgets 61
Transparencia 189
Aplicar transparencia plana 189
Aplicar transparencia con gradación 189
Aplicar transparencia a varios objetos 190
Sombras 191
La herramienta de sombra 191
Aplicar una sombra 192
Cambiar el color de sombra o el efecto de relleno 193
Eliminar una sombra 194
Aplicar una sombra a varios objetos 194
Selección de objetos con ayuda de la herramienta de sombras 195
Copiar sombras a otros objetos 195
Imprimiendo 310
Mostrar bordes de impresión 310
Seleccionar y configurar una impresora 310
El diálogo de impresión 311
Opciones de impresión: pestaña Salida 313
Opciones de impresión: pestaña "Diseño de la impresión" 315
8 Compra y activación del MAGIX Web Designer 6
Legal 358
Copyright 358
Acuerdo de licencia de usuario final de clientes de XARA Web Designer 358
Agradecimientos 361
Index 363
Una vez que tu copia esté activada, puedes descargar la plantilla completa, seleccionando
la opción Descargar plantillas en el menú de Ayuda de Web Designer.
Comprar el programa.
Selecciona esta opción si deseas adquirir una copia de Web Designer. Se te enviará un
número de serie con la compra.
Aviso importante: por favor, recuerda tu dirección de correo electrónico y contraseña que
has utilizado para la compra de MAGIX Web Designer 6 puesto que los necesitarás en el
futuro, por ejemplo, si deseas realizar una actualización.
Los productos de Xara ofrecen una muy buena relación calidad-precio y además
ofrecemos descuentos en todos nuestros productos de gráfico para instituciones de
educación. Más detalles en nuestra página web.
10 ¿Cuáles son las novedades en MAGIX Web Designer 6?
Autoría web
• Galería de plantillas ampliada con nuevos diseños. Los diseños existentes se han
actualizado. Un nuevo diseño "completo de página web" se suministra para todos los
conjuntos de plantillas, lo que consiste en un sitio web preparado de ocho páginas
enlazadas.
• Arrastrar y soltar widgets desde la galería de diseños y la nueva biblioteca de
widgets. Las nuevas secciones de la galería de diseños suministran una gran variedad
de "widgets" que pueden arrastrarse y soltarse en tu sitio web. Los widgets suministran
add-ons interactivos que abarcan desde reproductores de películas hasta
características de comercio electrónico (como un botón "Comprar" para vender artículos
o servicios de tu página web), formularios, mapas y mucho más.
• Manejo optimizado de barras de navegación (muy similar a la funcionalidad de
Xara MenuMaker).
- Un nuevo objeto de nivel superior de la barra de navegación puede arrastrarse
como un objeto independiente.
- Escoge cualquier diseño de botón y conviértelo rápidamente en una barra de
navegación horizontal o vertical.
- Capacidad para crear una barra de navegación con botones vinculados a todas
las páginas de tu sitio web. La barra de navegación se actualiza cuando
agregas/quitas páginas.
- Resaltado automático de los botones de las barras de navegación de la "página
actual".
- Submenús DHTML con numerosas animaciones y efectos de transparencia
• Inserción directa de snippets HTML con creación automática de vista
previa/marcador de posición. Muchos add-ons y widgets de páginas web suministran
un snippet de HTML para incluir en tu página. El Web Designer ahora acepta que
pegues este snippet, lo detecta como un código HTML y crea automáticamente un
marcador de posición en la página, con una vista previa del snippet. Copia el código
HTML en el portapapeles y pégalo en Web Designer. Tras unos segundos aparecerá un
objeto de marcador de posición con una imagen de vista previa, que puedes posicionar
en cualquier lugar de la página web.
¿Cuáles son las novedades en MAGIX Web Designer 6? 11
• Carga sencilla de vídeo MP4 y reproductor de vídeo incluido. Arrastra y suelta un
archivo de vídeo MP4 hasta la página y aparecerá un reproductor de vídeo flash para
reproducir el archivo que se cargará automáticamente en tu servidor web.
• Nuevas opciones de "Vista previa de página actual" rápida así como vista previa
de todo el documento: el ícono de vista previa en la barra superior se despliega con
dos opciones, vista previa de la página actual o vista previa de todo el sitio web.
• Capacidad para admitir páginas de esquinas redondeadas con sombras
proyectadas. Si admites el coloreado de la página de esta manera (al arrastrar un color
hasta el tablero de dibujo), se activará una nueva capa de fondo de página en la galería
de Páginas y capas, en donde podrás ajustar la sombra proyectada de la página
rectangular con la herramienta de sombra para convertirla en un rectángulo redondeado
(con la herramienta de rectángulos).
Foto
• Ventanas emergentes de fotos en miniatura mejoradas y más elegantes. Los
efectos animados de fotos emergentes (al hacer clic sobre una foto se abre una ventana
emergente con una versión ampliada) se ha mejorado para brindar efectos de animación
con calidad mejorada, una sombra proyectada opcional, títulos, capturas de pantalla y
oscurecimiento (la página debajo de la ventana emergente puede oscurecerse).
• Capacidad para crear un pase de fotos y Siguiente/Anterior en una galería o grupo
de vistas en miniatura. Si cuentas con varias fotos en miniatura con el efecto de
ventana emergente en la página, ahora puedes crear con ellas un pase de fotos con
controles Siguiente/Anterior/Reproducir/Pausa y un guión cinematográfico opcional con
las miniaturas en la parte inferior de la ventana.
• Nueva función "Optimizar todos los JPEG". Esto reducirá el tamaño y resolución de
todas las fotos de un documento para ahorrar memoria y producir archivos .web o .xar
más pequeños.
• Llenado automático de galerías. Arrastra y suelta varias fotos en simultáneo para
poblar una página de galería. Si arrastras y sueltas una selección de archivos de
imagen desde tu explorador de archivos hasta una página de vistas en miniaturas, como
cualquier diseño de galería de fotos de las plantillas (cada tema tiene un diseño de
"galería de fotos"), esto puebla la galería.
• Reducción automática de la resolución de importación.
Color
• Mejor compatibilidad con páginas y fondo, por lo que puede colorearse el tablero
de dibujo de forma independiente a la página. Si arrastras un color hasta el área del
tablero de dibujo (fuera del área visible de la página), esto te permite crear fondos
independientes para la página y sus alrededores. Para la página y el área del tablero de
dibujo, si pulsas Ctrl y sueltas un mapa de bits en la página o en el tablero de dibujo,
puedes crear un fondo de mapa de bits segmentado.
• Arrastrar y soltar esquemas de colores y esquemas de colores creados
previamente en la galería de diseños para todos los temas. En vez de editar cada
color original con nombre, ahora puedes cambiar todo el esquema de tu página.
Puedes probarlo con el tema beta suministrado en la galería de diseños. Abre cualquier
página del tema o el diseño "sitio web" que es un sitio web completo con ocho páginas.
Al final de los diseños temáticos hay una selección de los esquemas de color llamados
"Esquema de color 1", etc. Simplemente arrastra y suelta estos esquemas hasta la
página web para cambiar todos los colores originales.
12 ¿Cuáles son las novedades en MAGIX Web Designer 6?
Publicación
• Recordar detalles del FTP con el documento, incluyendo la contraseña. El
diálogo de propiedades de publicación ahora ofrece la posibilidad de guardar los
detalles FTP con el documento. Esto es genial si cuentas con diversos sitios web
publicados en diferentes ubicaciones o con diferentes dominios. Además, puedes
escoger guardar la contraseña FTP en el archivo. A pesar de que esta es una opción
potencialmente peligrosa (cualquiera que acceda al archivo .web puede actualizar tu
página web), también es una herramienta muy útil para los diseñadores web con
clientes, porque ofrece la opción de enviar al cliente el archivo .web, instruirle que
actualice el texto y luego pulse el botón Publicar para actualizar su página web. No es
necesario que el cliente tenga conocimiento de las complejidades de la configuración
FTP.
• Perfiles FTP con nombre, incluyendo perfiles de terceros. Puedes guardar tu
configuración de FTP en un perfil con nombre. Esto es útil si trabajas con múltiples
páginas web con diferentes dominios. La lista de perfiles puede contener perfiles de
terceros como, por ejemplo, el alojamiento gratis de MAGIX.
• Oferta de alojamiento web gratis. El Web Designer ofrece el alojamiento de páginas
web gratis de MAGIX. De esta forma, podrás publicar tu página web como parte del
MAGIX Mundo Online.
• Formas fáciles de agregar enlaces en archivos externos (y cargarlos) como archivos PDF
y Word, etc.
• Publicación incremental. Cuando publicas tu página web, sólo se cargarán aquellos
archivos que se hayan modificado. Esto puede representar una mejora en la velocidad y
productividad de sitios web medianos a grandes. También significa que los adjuntos
incluidos (p. ej. archivos PDF, vídeos, etc.) se cargarán solamente una vez.
• Calidad HTML mejorada, uso optimizado de CSS, divs eliminados, opciones para
párrafos "HTML puros". Para usuarios avanzados que quieren "bloques HTML
puros", ahora pueden ignorar el posicionamiento individual de líneas y hacer que cada
párrafo de texto se emita como un bloque de texto <p> en HTML. Para ello, aplica el
nombre "HTMLBlockText" al bloque de texto. Ten en cuenta que los saltos de línea no
necesariamente serán los mismos que en el Web Designer (y pueden variar entre los
exploradores), y que características como hacer fluir el texto alrededor de los gráficos no
funcionarán.
Texto
• Compatibilidad con texto justificado. Hemos añadido la compatibilidad con el texto
completamente justificado y esto funciona aún con la característica de texto alrededor
del gráfico.
• Herramienta de texto mejorada para incluir viñetas, listas numeradas, sangrías.
• Gráficos anclados. Los fotos y los gráficos pueden ahora flotar con el texto.
Introducción 13
Introducción
Es evidente que la gran mayoría de páginas web tienen una naturaleza gráfica. La
presentación de tu página web es muy importante. Tú deseas una página web con una
imagen competente y profesional. Para crear tu página, creemos que no es necesario
usar gran cantidad de herramientas, tanto para la edición gráfica como para
HTML. Creemos que debes tener libertad total para incluir cualquier tipo de texto, gráfico o
foto en cualquier lugar de la página.
La creación de páginas web debería ser como la creación de archivos PDF: no deberías
tener la necesidad de saber qué pasa 'bajo el capó'. En el caso de los archivos PDF, no
debes editarlos directamente. Tampoco deberías tener la necesidad de saber sobre HTML
al crear tu página web.
Web Designer es único porque es la única herramienta de diseño web de forma libre que
permite una verdadera libertad al diseñar una página web cuyo resultado es lo que ves. En
otras palabras, puedes posicionar el texto, gráficos y fotos en cualquier lugar de la página,
configurar cualquier tamaño, ángulo, superposición, transparencia, etc. y Web Designer
producirá una página HTML precisa que funcionará perfectamente.
Web Designer puede hacer cosas que se consideran casi imposibles con otros software
de autoría web, como hacer fluir el texto alrededor de fotos o formas irregulares. Incluye
herramientas avanzadas de vectores gráficos para que puedas dibujar lo que desees:
desde formas simples hasta logos y gráficos complejos. También cuenta con optimización
automática de gráficos (no sólo produce imágenes de resolución optimizada, sino que
14 Introducción
también detecta los elementos que se repiten en toda la página web, lo que produce
páginas más rápidas y más optimizadas).
Web Designer está pensado para diseñadores gráficos que no quieren aprender HTML ni
lenguajes de scripting. Para diseñadores gráficos, es la herramienta prototipo para páginas
web rápidas perfecta.
También está pensado para principiantes que simplemente quieren disponer de la forma
más fácil de crear páginas web de aspecto profesional.
Para quienes no tienen mucha paciencia (la mayoría de nosotros), se pueden descubrir las
ventajas principales de Web Designer, siguiendo sencillamente las instrucciones en el
documento inicial que se abre cuando comienzas a usar Web Designer. Se trata tanto de
una introducción básica como de una página web real con la que puedes experimentar.
También puedes encontrar este documento de ejemplo en la galería de diseños.
Haz clic en botón, abre la categoría INTRODUCCIÓN y haz doble clic en el primer
documento.
Aquí puedes averiguar como cambiar los colores de la página web, corregir el texto,
arrastrar y soltar fotos, mover objetos alrededor de la página y más.
Deshacer
Recuerda que puedes deshacer cualquier cambio, utilizando el botón de deshacer o
Ctrl+Z. Si mantienes pulsado el botón puedes deshacer todas las acciones hasta el
comienzo.
Ayuda 15
Ayuda
Si necesitas ayuda para el manejo de este programa, a continuación encontrarás
información que puede serte útil:
• Selecciona Temas de ayuda en el menú de AYUDA para abrir la ayuda de Photo &
Graphic Designer (que contiene cientos de páginas de información).
• Barra de estado: intenta leer el texto de la barra de estado en el extremo inferior de la
ventana principal de Photo & Graphic Designer. Siempre ofrece una descripción de las
acciones actuales y de sus efectos (incluso durante los arrastres), lo que resulta ideal
para aprender a usar las herramientas de Photo & Graphic Designer. También cuando
colocas el cursor sobre los botones y los controles, el programa te informa sobre lo que
hacen. Ve a la barra de estado para más detalles.
• Consejos para herramientas (tooltips): si colocas el cursor del ratón sobre un botón o
control por un momento, aparecerá un mensaje informándote de su función.
• Menús: si deseas saber cuál es la función de un menú, selecciónalo y pulsa "F1".
• Cajas de diálogo: si quieres saber lo que hace una caja de diálogo o cómo usarla, haz
clic en "Ayuda".
• Películas: hay películas de demostración que te ayudarán a sacar el mayor partido de
MAGIX Web Designer 6. Escoge PELÍCULAS del menú de AYUDA para ver una lista de las
películas disponibles.
• Foros TalkGraphics: puedes compartir consejos e ideas, enviar preguntas u ofrecer
soluciones a otros usuarios de Xara Xtreme en los foros http://www.talkgraphics.com
(que también incluye otros foros relacionados con gráficos).
• Xara Xone: visita Xara Xone (http://www.xaraxone.com/) para obtener excelentes
fuentes de ayuda, incluyendo más de diez años de tutoriales de Photo & Graphic
Designer, trucos y consejos y shareware de Xara.
• Newsletter "The Outsider": suscríbete a nuestra newsletter mensual "The Outsider"
(con tutoriales mensuales y consejos, ofertas, arte inspiracional y mucho más).
Información de documento
Cualquier texto que introduzcas en el campo de comentario se guardará como parte del
archivo. Este comentario se mostrará cuando abras el diálogo de información de
documento.
Escoge AYUDA > ACERCA DE MAGIX WEB DESIGNER 6. Esto te mostrará información general
sobre el programa. Si contactas con la asistencia técnica de Xara, es posible que se te
solicite esta información.
16 Primeros pasos
Primeros pasos
Esta sección te da una idea general de las funciones principales de Web Designer. Las
secciones siguientes te darán más detalles sobre cada una de las herramientas.
Vista previa
Enlace
Opciones de página web
Exportar
Coloca el cursor del ratón sobre cada botón de la barra desplegable para obtener un consejo de
herramienta con la descripción del botón.
Hay dos modos de crear una nueva página web. Se puede comenzar con una plantilla
prediseñada y luego personalizarla con textos, fotos y combinación de colores. O creando
una página web desde el principio, colocando todos los elementos requeridos, texto,
gráficos y fotos en el lugar que quieras de la página.
• Para ampliar o alejar con el zoom, mantiene Ctrl pulsado y utiliza la rueda del ratón
• Para mover la página, pulsa la rueda del ratón y mueve (sí, también es un botón)
• Para desplazar utiliza la rueda del ratón (o las barras de desplazamiento)
18 Primeros pasos
Todas tus páginas en tu sitio web están presentadas
una tras otras, como en un programa de edición de
textos. Esto hace que sea muy útil para ver toda tu
página web, especialmente al alejarse con el zoom.
Puedes arrastrar y soltar elementos entre páginas de
esta manera. Cuando haces cambios de color de
tema en todo el sitio, puede verse como los cambios
afectan a todas las páginas.
Barras desplegables
Algunas herramientas de la barra de herramientas principal están agrupadas en un solo
icono. Estos iconos cuentan con un pequeño triángulo indicador en la esquina inferior
derecha y, cuando pasas el cursor del ratón por ellos, aparece una barra desplegable. La
barra contiene otras herramientas que pertenecen a este grupo. Simplemente, mueve el
cursor del ratón hasta una de estas opciones para ver el consejo de herramienta (tooltip) y
luego selecciona la herramienta que quieras usar.
Objetos en la página
Si personalizas una plantilla o creas tus propios gráficos desde el principio, puedes girar,
redimensionar y posicionar cualquier cosa que desees en la página. Puedes redimensionar
la página fácilmente al tamaño que quieras y añadir nuevas páginas web a tu gusto.
Ciertas características, como el cambio de combinaciones de colores, funcionan a través
de todas las páginas simultáneamente.
Todo los tipos de elementos descritos más arriba se refieren generalmente a objetos.
Uno de los beneficios particulares de Web Designer es la libertad total para posicionar
cualquier objeto en cualquier lugar de la página, que luego se respetará con exactitud en la
página web final.
Por ejemplo, cuando dibujas un nuevo rectángulo siempre aparece para cubrir todos los
objetos que estén detrás suyo. Al presionar Ctrl+B (o el menú ARREGLO > Llevar atrás) el
objeto es movido detrás de todo lo demás. De modo similar, Ctrl+F trae cualquier objeto
seleccionado hacia delante, quedando delante de todo lo demás.
Hay una complicación añadida: las capas. Todos los objetos son registrados en capas
con nombres y cada capa puede activarse o desactivarse para mostrar u ocultar todo
acerca de la capa. Ve a la sección de capas (en la página 54) de más abajo para más
detalles.
La herramienta de selección
Arrastra desde cualquier esquina de los controles deslizante para redimensionar un objeto.
Arrastra desde dentro de los controles deslizantes (ver a la izquierda) para girar. Los rectángulos
y rectángulos con esquinas redondeadas tienen ocho controles deslizantes para que arrastrarlos
y redimensionarlos. Otros objetos, como grupos, bloques de texto o fotos, poseen sólo 4
controles y no pueden ser estiradas (porque se deformarían).
Desplazar objetos
Las teclas de flechas pueden ser utilizadas para desplazar los objetos seleccionados
píxel a píxel. Si mantienes pulsada a la vez la tecla Shift, los objetos se desplazan de 10 en
10 píxeles.
Girar objetos
Hay dos modos de hacer girar un objeto. O bien, haciendo clic otra vez sobre el objeto
para que los controles de selección cambien a controles de rotación, con los que podrás
estirar o hacer girar el objeto. O, cuando se ven los controles de esquinas, moviendo
el cursor de ratón dentro de los controles de esquinas hasta que veas que el cursor
cambia a un indicador de rotación , entonces también podrás arrastrar para hacer girar el
objeto seleccionado.
También puedes rotar casi todo en Web Designer, incluyendo fotos, títulos, bloques de
texto, y simplemente funcionará. Debido a que los navegadores web no pueden mostrar
texto en ángulo, Web Designer convertirá automáticamente cualquier texto rotado en un
gráfico.
Barra de información
Cuando un objeto es seleccionado, la barra de información en la parte superiro de tu
documento muestra todos los controles relevantes para la herramienta actual. Esta
barra cambia según la herramienta seleccionada. Esta es la barra de información de la
herramienta de selección:
Copiar objetos
Puedes utilizar las típicas opciones de Copiar (Ctrl+C) y Pegar (Ctrl+V), aunque una forma
rápida de copiar un elemento es, simplemente, arrastrándolo con el botón derecho del
ratón.
Cuando creas tu página web en Web Designer los documentos con los que trabajas
muestran una vista previa exacta estática, pero para comprobar el comportamiento de
los popups, efectos MouseOver y Flash, es necesario utilizar la vista previa de navegador.
VISTA PREVIA DE PÁGINA WEB: exporta todas las páginas de tu sitio y luego muestra la
ventana de vista previa. Así, todas las páginas y enlaces de tu sitio deberían funcionar.
VISTA PREVIA DE PÁGINA: exporta y muestra la vista previa de la página actual únicamente.
Esta opción es útil si cuentas con un sitio muy grande que demora mucho en exportarse
en su totalidad. De esta forma, puedes ajustar rápidamente la vista previa de la página en
la que estás trabajando, sin tener que exportar el resto del sitio.
Si no has exportado tu sitio todavía, estas vistas previas se exportan a una carpeta
temporal en tu ordenador. Una vez que lo hayas exportado, la misma ubicación de
exportación se utilizará siempre que hagas una vista previa, es decir, que el sitio exportado
se actualiza constantemente.
Nota: esta vista previa interna utiliza una versión simplificada del navegador de Internet
Explorer.
Para obtener una vista previa de tu página web en diferentes navegadores web,
expórtala y luego abre el archivo .htm en el navegador que prefieras. El botón para
exportar la página web es el último botón en la barra de herramientas de la barra
superior.
Frecuentemente puedes utilizar el clic derecho sobre el archivo y seleccionar "Abrir con ..."
, o simplemente arrastrar y soltar el archivo en una ventana de navegador abierta. Una vez
exportado, cada vez que pulses el botón de vista previa, la exportación se actualizará
Primeros pasos 23
también, y entonces sólo será necesario pulsar el botón de Actualizar en tu navegador (o
presionar F5).
Esto muestra las carpetas que contienen colecciones de diseños de páginas web y
archivos gráficos asociados que siguen un tema específico. También hay carpetas con
widgets como formas, instalaciones de e-commerce, gadgets web y muchas otras
características. Navega por las carpetas y haz doble clic para abrir un archivo como
documento nuevo.
Cada sección temática cuenta con una colección de diseños de página alternativos y otros
elementos útiles como botones o paneles de texto expansibles. Cada tema generalmente
contiene también una plantilla de página web completa y varios esquemas de color.
Puedes cambiar todo tu sitio a un esquema de color completamente distinto con solo
arrastrar y soltar el esquema desde la galería hasta la página o con un doble clic.
Para agregar una nueva página con el mismo diseño, la forma más fácil es utilizar el
botón de "copiar página" en la barra superior.
Esto replica la página actual abajo. Podrás simplemente editar o eliminar los elementos
según lo desees. Esto tiene la ventaja de mantener la misma estructura de navegación.
Puedes añadir una nueva página en blanco seleccionando el menú EDITAR > PÁGINAS >
NUEVA PÁGINA .
24 Primeros pasos
Puedes eliminar las páginas utilizando el mismo menú de páginas.
Clipart flash
MAGIX Web Designer 6 incluye la habilidad de crear animaciones flash desde cero (ver la
sección Animaciones flash (en la página 283)), pero también incluye una variedad de
plantillas de flash que puedes personalizar. Las plantillas flash no se pueden arrastrar hacia
la página directamente, deben abrirse como un documento de animación separado que
puedes personalizar como quieras y luego puedes guardar el archivo Flash (.swf) en tu
disco local. Luego, utilizando la función marcador de posición puedes crear un gráfico
de marcador de posición y asociarlo con tu archivo Flash (.swf).
Widgets
Algunos de los elementos de la GALERÍA DE DISEÑOS son widgets dinámicos que puedes
añadir a tu sitio web de forma rápida y fácil. Al arrastrar uno de estos a tu página, se abrirá
una ventana del explorador con el sitio web del widget que te permitirá configurarlo. Por lo
tanto, para usar widgets, debes estar conectado.
Una vez que hayas terminado de configurar tu widget, haz clic en el botón INSERTAR en la
parte inferior de la ventana del explorador. Una imagen de marcador de posición se
generará automáticamente, esto es, una imagen estática de cómo se verá tu widget
cuando esté en tu sitio web. El widget no funcionará en la página de MAGIX Web Designer
6, allí sólo verás la imagen de vista previa. Simplemente haz una vista previa de tu página
para ver tu widget en acción.
Todas las plantillas utilizan un pequeño conjunto de colores originales y varias sombras de
estos colores originales. La forma más fácil de cambiar el color de tu sitio es utilizar uno de
los esquemas de color alternativos que se suministran con cada tema web en la GALERÍA
DE DISEÑOS . Simplemente arrastra un esquema hasta la página para cambiar el color de
todo el sitio o haz doble clic en él.
O puedes editar cada uno de los colores originales individuales personalmente. Estos se
denominan "colores con nombre" y aparecen en la parte izquierda de la línea de colores a
lo largo de la parte inferior de la ventana.
Primeros pasos 25
Simplemente haz clic en cualquier color con nombre y selecciona la opción de edición (si
mantienes el cursor del ratón sobre el color verás el nombre del consejo de herramienta).
Cuando edites el color puedes arrastrar la pipeta para escoger colores de la pantalla,
incluso de otras ventanas abiertas
Selecciona el color a editar: Color de relleno/color de línea del objeto seleccionado o
cualquier color con nombre (original)
Haz clic en la etiqueta para crear un color con nombre
Haz clic para mostrar los controles de color ampliados
Color anterior
Color actual
Arrastra hacia aquí para seleccionar cualquier tonalidad del tono seleccionado
Arrastra hacia aquí para seleccionar cualquier tono
El editor de color suministra una forma fácil de elegir cualquier color. Haz clic en los
controles ampliados para introducir los valores RGB.
26 Primeros pasos
Observa que cuando cambias un color original de esta forma, todas las tonalidades
relacionadas utilizadas a lo largo del documento también cambiarán.
Colorear formas
Puedes rellenar con un color cualquier forma dibujada, arrastra el color desde la LÍNEA DE
COLOR y suéltalo en la forma o selecciona primero el objeto y luego haciendo clic en la
línea de colores y escogiendo "ESTABLECER COLOR DE RELLENO ".
Colorear fotos
Si intentas colorear una foto, se convierte en una foto de "semitonon". Por ejemplo, para
convertir una foto en una foto en blanco y negro, simplemente selecciónala de la forma
usual y haz clic en el rombo blanco al final de la línea de color. Puedes definir que el color
claro sean dos colores cualquiera, no solo blanco y negro.
Nota: Si la foto está dentro de un grupo, como muchos de los objetos de foto están
dentro de las plantillas o de los clipart, entonces tienes que seleccionar primero el interior
de la foto. Puedes hacer esto pulsando la tecla Ctrl y haciendo clic en el objeto con la
herramienta de selección. Otra forma de seleccionar directamente la foto es hacer clic en
la foto con la HERRAMIENTA DE FOTO .
En la línea de colores suele haber un color denominado "Color de fondo", otro "Color de
panel" y editándolos puedes controlar los distintos colores de fondo. Los demás colores
utilizados son usualmente el color original 1, 2, etc.
Primeros pasos 27
Color de fondo
Color de panel
Colores originales 1 y 2
Puedes utilizar el editor de colores para modificar los colores. Haz clic derecho sobre la
página y escoge CAMBIAR FONDO DE PÁGINA para abrir el editor de color, ahora podrás
editar el color de la página. Para editar el color del tablero de dibujo, haz clic derecho
sobre el tablero de dibujo y escoge CAMBIAR COLOR DE FONDO .
Para fijar una textura de fondo que se repita, arrastra la foto o el mapa de bits
hacia tu documento. Abre la galería de mapas de bits, desplaza la página hasta la
foto que acabas de cargar, haz clic en la misma para seleccionarla y a
continuación haz clic en el botón FONDO en la galería.
Ahora, si haces clic en el fondo de la página, verás que se selecciona un rectángulo (mira
la barra de estado). Este rectángulo cubre toda la página y se utiliza para configurar su
color. Puedes editar de forma limitada este rectángulo, insertarle un relleno con gradación
Primeros pasos 29
con la HERRAMIENTA DE RELLENO o redondear sus esquinas con la herramienta de
rectángulos.
NOTA: debes configurar también el color del tablero de dibujo antes de poder modificar el
color uniforme de tu página.
Puedes cambiar el origen de dos formas. La forma más sencilla es abrir el diálogo
HERRAMIENTAS > OPCIONES y en la pestaña CUADRÍCULA Y REGLA aumentar el valor de la
coordenada Y del punto de origen. En general, esto está configurado como el tamaño
vertical de tu página, por lo que debes aumentar el tamaño del margen de desees ver.
Entonces, por ejemplo, si tu página tiene 700 píxeles de alto, cambia el valor Y de la
coordenada de origen de 700 a 720 para agregar un desplazamiento de 20 píxeles.
Como alternativa puedes configurar el punto de origen de forma interactiva. Activa las
reglas con VENTANA > VER REGLAS (Ctrl+L). Luego haz clic y arrastra el botón de cruce,
ubicado en el lugar en que la regla vertical se cruza con la horizontal, en la parte superior
izquierda de lienzo. Ahora, estás desplazando por la posición original, por lo que coloca la
distancia vertical apropiada sobre la esquina izquierda superior de tu página.
Creando una línea estrecha como en la izquierda cuando defines un fondo, obtienes un fondo de
color con gradación a través de toda la página.
1. Dibuja un rectángulo. Tiene que tener el mismo tamaño que cualquier usuario
utilizaría para hacer su ventana del navegador, para que no se repita verticalmente.
Un valor de 1000 píxeles o más es recomendable, ya que es mucho más grande que
tu página. Puede que necesites alejar el zoom para dibujar una que sea lo
suficientemente grande. Debería ser muy reducida.
2. Asegúrate de que tu rectángulo no tenga contorno: haz clic en la herramienta de
selección y ajusta para que no tenga contorno. Haz clic en el parche "sin color" en la
línea de colores (o selecciona "ninguno" en el ancho de línea del menú desplegable
en la barra de botones superior).
3. Asegúrate de que el rectángulo contenga algunos píxeles enteros de ancho y luego
asegúrate de que esté situado exactamente sobre píxeles enteros: en la herramienta
de selección selecciona el rectángulo, edita el valor de ancho (W), presiona Aceptar y
luego edita las posiciones X e Y para que sean números enteros.
4. Con la herramienta de relleno (en la página 176), aplica el relleno de color con
gradación como desees: simplemente arrastra hacia el rectángulo. Asegúrate de que
la gradación se aplique de arriba a abajo ajustando la flecha de relleno si fuera
necesario.
Primeros pasos 31
NOTA: esto sólo funcionará en todo el fondo de la ventana del explorador si no has
otorgado al fondo del tablero de dibujo su propio color. Si has dado al fondo del tablero de
dibujo su propio color, el relleno con gradación sólo se aplicará al fondo del área de
página.
Lo bueno de un color con nombre es que cuando lo editas posteriormente (haciendo clic
en el color y seleccionando Editar), todos los objetos que utilizan ese color se cambian
inmediatamente.
Formas vinculadas
Puedes crear colores que son sombras más claras u oscuras de otro color de modo que
cuando alteras el color "principal", todas las sombras más claras u oscuras cambian para
32 Primeros pasos
combinar con el nuevo tono. Por ejemplo una sombra de color con gradación en un botón,
como este:
Si creas el color verde principal como color con nombre y luego haces una sombra más
clara u oscura del color, como sombra vinculada, cuando edites el color con nombre, las
sombras cambiarán también, por lo que puedes cambiar el color fácilmente de los objetos
con sombras complicadas.
Para crear una sombra vinculada abre las opciones avanzadas en el editor de color y
selecciona el menú "COLOR NORMAL " y escoge "TONALIDAD DE OTRO COLOR ".
Fotos
Arrastra y suelta tu foto sobre cualquier foto existente para sustituirla. Arrastra hacia el fondo
para importarla como una foto nueva.
Si la foto que importas es muy grande, se te preguntará si quieres importar una versión
reducida. Esto es recomendable, para más información lee la sección resolución de fotos a
continuación.
Arrastra sobre la foto para cambiar su posición dentro del marco. Estira de la punta de las
flechas para cambiar el tamaño y girar.
Si arrastras más fotos de las que caben en la página actual, MAGIX Web Designer 6
explorará las páginas siguientes en el documento para ver si puede acomodar algunas o
todas las fotos restantes. Si esto todavía no alcanza para colocar todas tus fotos, MAGIX
Web Designer 6 duplicará la página actual todas las veces que sea necesario para
posicionar todas las fotos.
Este potente mecanismo significa que puedes crear una página web con un álbum de
fotos de varias páginas, si cargas una plantilla de la galería de diseños y luego arrastras tus
fotos.
La herramienta de fotos
La herramienta de foto suministra una gran variedad de formas de optimizar y recortar
cualquier foto.
Primeros pasos 35
Para cortar una foto, simplemente arrastra a lo largo de la foto mientras te
encuentras en la HERRAMIENTA DE OPTIMIZACIÓN DE FOTOS . Puedes ajustar los
bordes de corte estirando de los controles deslizantes de corte alrededor del
exterior de la foto.
O utiliza la HERRAMIENTA DE CORTE para más control sobre los recortes.
Consulta el apartado Trabajar con fotos (en la página 219) para más información
detallada sobre cómo MAGIX Web Designer 6 maneja fotos y el apartado en Herramienta
de foto para averiguar cómo utilizar la herramienta de foto.
Allí podrás determinar cómo aparecerá tu popup. Una opción te permite colocar un título
sobre cada foto emergente. Configura el título para cada foto en el campo TÍTULO . De
forma opcional puede mostrarse un subtítulo debajo de cada foto emergente.
Simplemente, configura la CAPTURA DE IMAGEN para la miniatura en el mismo diálogo.
Consulta la sección foto emergente del capítulo DIÁLOGO DE PROPIEDADES WEB para
detalles completos de las opciones disponibles.
Web Designer siempre guarda la imagen de resolución completa (salvo que escojas
importar las imágenes con resolución reducida cuando se te pregunta durante la
importación). Esto significa que puedes cambiar el tamaño o recortar tu imagen como lo
desees sin perder calidad. Web Designer automáticamente convierte todas las fotos a la
resolución correcta de imagen JPEG cuando guardas tu página web. No tienes que
preocuparte por el dpi, el tamaño de imagen, los píxeles o este tipo de cosas. Lo que ves
en Web Designer (zoom al 100%) es exactamente lo que se producirá en tu página web.
Cuando sueltas una foto en la página (siempre que no estés sustituyendo una foto
existente), su tamaño se ajusta a 500 píxeles de ancho. Pero si quieres que tenga
exactamente 200 píxeles de ancho, introduce 200pix en el campo de tamaño de ancho
(W) en la herramienta de Selección. Puedes introducir el valor en cualquier unidad, por
ejemplo, 2in significa 2 pulgadas de ancho.
Texto
Dispones de todas las facilidades de procesamiento de texto y puedes pegar texto desde
el portapapeles del sistema. Haciendo doble clic se seleccionará una palabra, haciendo
triple clic se seleccionará una línea entera, que puede ser útil si quieres seleccionar todo el
texto de un botón. Como siempre, la barra de información ofrece numerosos controles
para esta herramienta.
El menú de fuentes muestra una lista de todas las fuentes y está dividida en tres
secciones. La sección superior muestra las fuentes ya utilizadas en el documento, la
siguiente sección muestra las fuentes compatibles con la web y la última sección inferior
muestra todas las fuentes que están instaladas en tu ordenador.
38 Primeros pasos
En el menú de fuentes se seleccionan las fuentes en tiempo real. Al pasar el ratón por las
distintas fuentes del menú, el texto seleccionado cambia la fuente permitiéndote ver
inmediatamente la vista previa y saber cómo quedará en el documento.
Tamaño de fuente
El campo de tamaño de fuente muestra el tamaño de fuente en píxeles, dado que éste es
el método más confiable para ajustar el tamaño del texto para utilizarlo en el navegador.
Pero puedes introducir cualquier texto en puntos (o cualquier otra unidad para el caso)
introduciendo un valor con pt detrás del mismo (significa "punto"), por ejemplo 72pt ó 1 y
esto se convertirá al tamaño de píxeles correcto.
Si conviertes cualquier objeto de texto en un gráfico, eres libre de utilizar cualquier fuente.
Consulta la sección Grupos (en la página 44) abajo para más detalles.
Texto girado
De forma usual (únicamente para una herramienta de autoría web), puedes girar cualquier
objeto de texto, incluso columnas de texto, utilizando la función de giro usual de la
herramienta de selección. Pero debido a que los navegadores web no son compatibles
con texto girado nativo, Web Designer convierte cualquier texto girado en un gráfico
cuando la página es exportada como página web.
Muchos de los objetos, como fotos, paneles laterales, botones y encabezados utilizados
en plantillas desde la galería de diseños son contorneados automáticamente, es decir, el
texto siempre fluye alrededor de estos objetos cuando los mueves por el documento. El
contorneo de objetos solo se aplica al texto que está detrás del objeto, así que tendrás
que "llevar hacia adelante" el objeto para que funcione el contorneo (Ctrl +F).
40 Primeros pasos
Todas la operaciones de la herramienta de texto son en vivo: el texto se reformatea y
refluye según vas ajustando el ancho de la columna o vas moviendo los objetos
contorneados.
Paneles de texto
Del mismo modo que algunos botones de la galería de diseños se amplían para que
quepa el texto, algunos paneles de texto adaptan el ancho o la longitud del texto que se
les introduce.
El fondo del panel cambia para que quepan bloques de texto más largos o amplios.
Para crear tu propio botón o panel de extensión, utiliza uno de los botones existentes en la
galería de diseño y adáptalo recoloreando el fondo o reajustando el color, el tamaño y/o el
ancho del texto.
Nota: Puedes crear nuevos componentes de extensión utilizando Xara Xtreme Pro.
Corrector de ortografía
En la barra de información de la herramienta de texto hay un botón que selecciona
las opciones del corrector ortográfico y el idioma. Si seleccionas "Revisar ortografía
mientras se escribe", también marcará todas las palabras que no reconoce
subrayándolas en rojo intermitente. Haz clic con el botón derecho en cualquier
palabra marcada para obtener sugerencias.
Fuentes incrustadas
Web Designer guarda las formas de caracteres de todas las fuentes usadas en tu
documento. Esto significa que si pasas tu archivo web a otra persona o transfieres el
archivo a otro ordenador, los usuarios verán exactamente lo mismo que tú, incluso si las
fuentes correctas no están instaladas en dicho ordenador. Pero esto únicamente incrusta
Primeros pasos 41
los caracteres usados en el documento (no se incluye la fuente completa). Por lo tanto, en
los ordenadores que no disponen de las fuentes, el texto que se añada en las fuentes no
disponibles puede que no aparezca con las formas de caracteres correctas.
Tamaño de página
Las páginas de la galería de diseños están diseñadas para tener el ancho que es conocido
es compatible para la mayoría de las pantallas de ordenador. No se recomienda crear
páginas más anchas, incluso si tú tienes una pantalla de ordenador más amplia. La
experiencia demuestra que la mayoría de usuarios prefieren tener un ancho de página fijo.
Sin embargo, puedes ajustar el tamaño de página que quieras.
Puedes definir cualquier tamaño de página que quieras seleccionando la pestaña del
PÁGINA del DIÁLOGO DE OPCIONES (Archivo·>opciones de página). No se recomienda que
crear un ancho de página que supere los 990 píxeles, ya que éste es el ancho máximo
para gran parte de las pantallas de ordenador (1024 menos una pequeña cantidad por la
barra desplazable). Un ancho de página más común tiene por lo general unos 800 píxeles.
Selecciona la opción Personalizar tamaño de página para introducir cualquier tamaño que
desees.
Consejo: Si mantienes presionada la tecla Ctrl mientras arrastras, puedes estar seguro de
que el arrastrar será exactamente vertical u horizontal.
Utiliza las opciones de menú GUARDAR o GUARDAR COMO para guardar tu trabajo en
progreso. Esto guarda un archivo con la extensión .web que es el formato de archivo
nativo para Web Designer (esto no es una página web). Se recomienda que guardes tu
trabajo regularmente según avances. Si quieres editar o actualizar tu página en el futuro,
debes guardar un archivo .web de esta forma y hacerlo en actualizaciones futuras.
Para guardar tu sitio web, que son las páginas HTML y archivos asociados para
publicar en la Web, utiliza la opción Exportar página web o haz clic en este botón en
la barra superior.
Esto guarda un archivo .htm por cada página y una carpeta que contiene todos los
archivos que componen la página web.
Al exportar un sitio web, todas las páginas se exportan juntas y cada página sin nombre
recibe la finalización _1, _2 tras el nombre que ingresas durante la exportación. La carpeta
_FILES contiene todos los gráficos y otros archivos que van a formar tu sitio web. Puedes
nombrar cada página de forma individual si lo deseas, con la pestaña PÁGINA del diálogo
PROPIEDADES WEB o con la Galería de páginas y capas (en la página 275).
El nombre por defecto que se le dará a tu sitio web es index.htm porque éste es el nombre
usual de la primera página de un sitio web.
Primeros pasos 43
Puedes ver previamente el sitio web en cualquier navegador web, si arrastras el archivo
index.htm (o cualquier .htm) desde el Explorador de Windows hasta una ventana del
navegador.
Consulta el capítulo Manejo de documentos (en la página 78) para más detalles acerca de
estas funciones.
Objetos elásticos
Muchos de los objetos gráficos, como los botones y los paneles de texto pueden ajustar
automáticamente su tamaño dependiendo del tamaño o la longitud de texto. Por ejemplo,
algunos de los botones denominados "botones extensibles", que significa que la longitud
del botón se ajusta para que el texto de la etiqueta quepa en el botón. La mayoría de
grupos de plantillas y todos los botones en el archivo de botones de la galería de diseños
tienen versiones de ancho fijo y extensible. Se recomienda que si creas un grupo de
botones de navegación (típicamente una colección de enlaces o botones horizontales o
verticales), utilices un ancho fijo de modo que todos tengan el mismo tamaño.
De forma similar, muchos de los paneles laterales o de texto en las plantillas, y algunas
veces en el área de texto principal, también pueden ajustar su tamaño vertical y a veces su
tamaño horizontal. En el caso de los paneles de texto, puedes ajustar el ancho de la
columna en la herramienta de texto arrastrando el borde izquierdo o derecho del indicador
de columna.
44 Primeros pasos
Grupos
Por ejemplo, puedes dibujar un botón simple desde el comienzo arrastrando un triángulo
con la herramienta de triángulo y colocando una etiqueta de texto encima de la etiqueta
con esta herramienta de texto. Estos son objetos separados que puedes mover de forma
independiente en la herramienta de selección. Pero si seleccionas ambos en la herramienta
de selección (también puedes arrastrar un laso para encerrarlos a ambos, o presionar Shift
y clic sobre objetos adicionales) y luego presionas Ctrl+G (o el menú Arreglo > Grupo) se
convertirán en un objeto agrupado (pista: la línea de estado que se encuentra debajo
siempre te informa lo que está seleccionado). Ahora puedes arrastrar, cambiarle el tamaño
o girar este objeto, todas las partes de este grupo se mueven y transforman como si
fueran un único objeto.
Al desagrupar (Ctrl+U) puedes acceder a todas las partes del grupo de forma individual.
Como alternativa puedes editar elementos directamente dentro de un grupo, por ejemplo,
si utilizas la herramienta de texto para editar el texto o la herramienta de foto para editar
una foto, un clic seleccionará automáticamente el elemento dentro del grupo.
Por lo tanto, todo lo que tienes que hacer para incluir una fuente como ésta es agrupar. No
tiene por qué estar agruparse con nada, puede agruparse en sí mismo presionando
Ctrl+G.
Debido a que los grupos suaves pueden contener elementos en diferentes capas, cuando
seleccionas un elemento de grupo suave en una capa, se seleccionará/n automáticamente
el/los elemento/s "agrupado/s suavemente" de las otras capas; muchas veces se trata de
una capa que ni siquiera es visible. Consulta la sección de capas más abajo para
comprenderlo mejor.
Algunos de los objetos de panel más complejos en la galería de diseño son grupos suaves.
Puedes moverlos como un objeto único, pero las partes del grupo, las fotos, las formas de
fondo, todos se exportan a HTML como elementos separados para obtener una eficiencia
máxima.
Texto sincronizado
Hay otra característica muy útil que ofrecen los grupos suaves. Si tienes el mismo texto en
dos o más objetos dentro de un grupo suave, el texto se sincronizará cuando lo edites.
De esta forma, puedes mantener igual el texto del botón normal y el del MouseOver (ver
abajo).
El diálogo de enlace te permite controlar lo que ocurre si haces clic en el objeto vinculado
en la página. Puedes saltar a cualquier otra página web (puedes seleccionar rápidamente
un enlace a cualquier otra página dentro de tu página web utilizando el enlace a la página
desplegable) y puedes controlar si esto abre la página en una ventana separada.
Por lo tanto, para definir uno de tus botones como enlace, simplemente
selecciónalo (haz clic en el mismo en la herramienta de selección), haz clic en el
icono, e introduce la dirección web o selecciona una de las páginas de la lista
desplegable y haz clic en Aplicar. Eso es todo.
Para vincular esta referencia desde otro lugar en tu página web (un botón o sólo un enlace
en algo de texto), abre el diálogo de enlace (que se muestra arriba) y elige "ENLAZAR A UNA
REFERENCIA (ANCHOR) " de la lista desplegable de nombres.
Primeros pasos 47
Enlace al archivo
Muchas veces quieres insertar en tu sitio un documento, película u otro tipo de archivo.
Para ello, utiliza la opción ENLACE AL ARCHIVO . Selecciona en tu página el objeto que
quieres enlazar con el archivo. Luego escoge la opción Enlace al archivo y busca tu
archivo. Esto copia el archivo en una carpeta de soporte junto con el archivo de diseño,
para que el archivo se publique junto con el resto de tu sitio. La carpeta se nombra con la
denominación de tu archivo de diseño y la terminación "_files". Haz clic en ACEPTAR , obtén
una vista previa de tu página y comprueba el enlace. Cuando quieras modificar el archivo,
repite el proceso: busca tu archivo nuevo o actualizado. Consulta el capítulo del diálogo
PROPIEDADES WEB (en la página 195) para más información acerca de esta función y el
capítulo Trabajar con documentos para información acerca de las carpetas de soporte (en
la página 76).
Consejo: si haces triple clic en el texto del botón, seleccionas toda la línea de texto para un
reemplazo más sencillo al tipear.
NOTA: no puedes editar el texto de las barras de navegación de esta forma, si la barra
está fijada como barra de navegación del sitio. Debes editar las etiquetas en el diálogo de
Barras de navegación.
Para el usuario avanzado: este efecto mouseover se crea utilizando las capas nombradas.
De hecho, los botones son grupos suaves que consisten en dos estilos, el estilo mouse-off
y mouse-over en capas separadas. El grupo suave significa que ambas capas cambian al
mismo tiempo cuando le haces algo al botón, como cambiar, mover, o cambiar el tamaño
del texto. Ver la sección Capas (en la página 54) abajo para más detalles.
Además hay una categoría de botones que tiene un conjunto de diseños de botones
generales que se pueden agregar a tu página de la misma forma.
También puedes copiar cualquier botón existente; esta sea probablemente la mejor forma
de añadir más botones a una barra de navegación. Puedes copiar/pegar, pero es un
shortcut mucho más rápido arrastrar presionando el botón derecho del ratón. (Esto es un
48 Primeros pasos
shortcut general para copiar cualquier objeto). Ahora puedes editar el texto y enlazarlo
como lo desees.
Al hacer doble clic sobre el campo de URL, se abrirá el diálogo Enlace que es el mismo
diálogo que se utiliza para fijar enlaces en objetos normales, tal como se ha descrito
anteriormente en este capítulo y en detalle en el capítulo del diálogo de propiedades web.
En este diálogo también puedes activar la opción BARRA DE NAVEGACIÓN DEL SITIO . Esto
hace que la barra aparezca automáticamente en las nuevas páginas que agregas a tu sitio
y los botones/enlaces agregados a la barra también se añaden a cada página nueva. Sin
embargo, no puedes editar tu barra en el lienzo si esta opción está activada, sólo puedes
hacerlo mediante este diálogo.
Para actualizar una barra de navegación en todas las páginas, si no es una barra de
navegación de sitio automática, selecciona el menú ARREGLO > ACTUALIZAR OBJETOS
REPETIDOS . Esto copiará la barra de botones (y todos los demás objetos repetidos) de la
página actual a todas las otras páginas que contengan la misma barra de botones. Por lo
tanto, si quieres copiar una barra de botones completa en otra página que todavía no tiene
una barra de botones de botones, haz doble clic para seleccionar la barra entera y luego
puedes copiarla/pegarla en otra página.
Lee el capítulo Barras de navegación (en la página 254) para toda la información detallada
sobre barras de navegación.
Primeros pasos 49
Herramientas de dibujo
Web Designer pone a disposición todas las herramientas de gráficos que necesitas
para crear casi cualquier objeto gráfico para tu página, así como una gama de ele-
mentos prediseñados en la galería de diseño. Existen tres herramientas de dibujo
básicas que te permiten crear rectángulos, elipses o cualquier forma que desees.
Web Designer suministra herramientas de dibujo vectoriales lo que significa que puedes
cambiar el tamaño, editar la forma y cambiar el color sin perder calidad. Puedes ampliar
para ver el más mínimo detalles y todas las ediciones pueden deshacerse.
Arrastra desde cualquier esquina de los controles deslizante para redimensionar un objeto.
Arrastra y suelta un color desde la LÍNEA DE COLOR hasta la forma para cambiarle el
color. Lee Coloreado de formas (en la página 26). Con la HERRAMIENTA DE SELECCIÓN
puedes arrastrarla, cambiarle el tamaño y girarla como lo desees. Lee Herramienta de
selección (en la página 20). Puedes colocar este rectángulo detrás de otros objetos como
un fondo de imagen, si pulsas Ctrl+B para "Poner detrás". Como alternativa, si deseas
ponerlo delante de todos los otros objetos (Ctrl+F), podrás hacer un clic derecho sobre él y
seleccionar ALINEAR TEXTO BAJO para hacer que el texto de la página se acomode fuera de
la forma (otra herramienta de Web Designer antes de cualquier otra de autoría web).
Para las formas de preset como rectángulo o elipses, si deseas editar el contorno de las
formas de los caracteres de texto, deberás convertir el objeto en una forma editable
50 Primeros pasos
primero. Puedes hacerlo si seleccionas el shortcut Ctrl+1. Podrás utilizar el Editor de
formas para realizar varias ediciones avanzadas de vectores.
Consulta la sección de referencia (en la página 117) para más información acerca del uso
de esta poderosa herramienta.
Herramienta de relleno
Puedes agregar fácilmente un relleno de color con gradación a una forma usando
esta herramienta. Selecciona la herramienta y simplemente arrastra al objeto.
La flecha de relleno puede ser ajustada arrastrando las puntas para cambiar la dirección, el
ángulo o la extensión de la graduación.
Para editar el principio o el color del relleno, arrastra y suelta un color desde la línea de
colores a la forma, o puedes seleccionar el final de la flecha de relleno en la herramienta de
relleno y utilizar el Editor de color (Ctrl + E).
Puedes crear un relleno de gradación de varios niveles haciendo que se vea la flecha de
relleno (selecciónala con la herramienta de relleno), luego arrastra un color de la línea de
colores y suéltalo cuidadosamente en la línea de flecha, donde quieras agregar el nuevo
color. Ahora puedes arrastrar este punto de relleno seleccionar Ctrl+E para ajustar el color
utilizando el Editor de color. Existen distintos estilos de relleno, por ejemplo, este es un
círculo con un relleno circular.
Primeros pasos 51
La sombra es otra elipse con un relleno de color de gradación y difuminado (ver abajo)
Herramienta de transparencia
Más que eso, Web Designer es compatible con la transparencia con gradación. Funciona
de forma similar al relleno de color con gradación. En la herramienta de transparencia,
simplemente arrastra a través de tu forma y puedes ver que la transparencia
desaparece. Puedes ajustar el grado de transparencia de cada terminación de la flecha
de relleno haciendo clic en la terminación de la flecha o ajustando la barra deslizante de
transparencia.
Difuminación
Es una herramienta gráfica para armonizar las esquinas de los objetos. Web Designer
proporciona un control de difuminación que permite difuminar cualquier objeto, gráfico,
texto o foto, proporcionándole un borde borroso que se mezcla con el fondo. El control
de difuminación no es una de las herramienta de la izquierda, sino uno de los controles
que se ubican en la barra superior. Inténtalo en la forma del rectángulo. Selecciona la
forma y haz clic en el control de difuminación de la barra superior.
Nota técnica: Web Designer convierte automáticamente todo tipo de vector gráfico en
imágenes PNG, un PNG de canal alfa, si se ha utilizado transparencia. Utiliza capas CSS
para repetir el orden de aparición de las capas en Web Designer. Es compatible con
todos los navegadores web más modernos.
Herramienta de sombra
Un efecto gráfico muy popular es crear una sombra suave debajo de un gráfico o un texto.
Esto sirve para elevar el objeto del fondo.
Nota para usuarios avanzados: Ten en cuenta que como la sombra misma es
semitransparente (parte de los objetos se ven a través de la sombra), los objetos con
sombras son convertidos a imágenes PNG cuando se guardan en la página web (es el
Primeros pasos 53
único formato de imagen que es compatible con la transparencia). Las imágenes pueden
ser bastante grandes, en especial las fotos. Es perfecto para imágenes como el gráfico de
sombra superior.
Puede que pienses en convertir el gráfico completo a JPEG para ahorrar espacio. Si esto
funciona o no depende de qué hay detrás de la sombra. Si es un fondo plano o estático y
no tiene texto, es posible que puedas utilizar JPEG, ya que tiene un tamaño de archivo
mucho más pequeño (la página web se descarga más rápidamente). Para forzar que un
objeto sea un JPEG, utiliza la pestaña de imagen del diálogo de propiedades web.
Las imágenes JPEG no pueden tener partes semitransparentes, por lo tanto, cuando creas
un JPEG de un objeto semitransparente, Web Designer incluye el fondo (lo que hay detrás
de la parte semitransparente) como parte de la imagen JPEG, pero debido al
posicionamiento de píxeles perfecto de la página no lo puedes saber. Esto no funciona si
la sombra o el objeto semitransparente es posicionado sobre texto, dado que el texto se
incluirá como parte del gráfico.
Gráficos de ejemplo
Este es un ejemplo perfecto de las posibilidades de creación de Web Designer. Este botón
combina muchas de las funciones descritas más abajo: ha sido creado a partir de la
combinación de formas difuminadas y utilizando transparencia con gradación (el efecto de
reflexión blanco). El texto tiene una sombra suave y el botón tiene una sombra de
resplandor. Todo está agrupado. (No necesitas crear el botón, ya que aparece en la
categoría "Botones" de la galería de diseños).
La gran ventaja de los gráficos vectoriales, en comparación con los gráficos de "mapa de
bits" creados en softwares de edición como Photoshop, es que puedes cambiar el color,
editar, rotar, y cambiar el tamaño del botón, sin pérdida de calidad. Agrándalo y verás que
mantiene la nitidez:
Además de esto, puedes cambiar el color utilizando el sistema de color con nombre, y
estirarlo como desees: todo lo que hagas en Web Designer no es destructivo (lo que
significa que puedes editar siempre sin pérdida de calidad).
Los procedimientos que normalmente llevan mucho tiempo en otros softwares para
gráficos, son un juego de niños en Web Designer.
54 Primeros pasos
Adicionalmente, todos los objetos pueden posicionarse en capas nombradas. Cada capa
puede tener cualquier número de objetos y tiene la habilidad de poder activarse o
desactivarse. Cuando la capa se desconecta, todos los objetos en esa capa se vuelven
invisibles.
En Web Designer, las capas son usadas para suministrar funciones MouseOver (algunas
veces llamadas "rollover") en tu página web. Éstas incluyen botones resaltantes (se
resaltan cuando pasas el cursor sobre los mismos) y otros efectos pop·up como un panel
de texto que contiene una descripción detallada de producto.
Efectos MouseOver
Hay dos tipos de efectos mouseover. Primero, el que se utiliza en botones mouseover, en
los que cualquier objeto con dirección web puedes mostrar un objeto gráfico superpuesto
que aparece en una capa llamada MOUSEOVER. Ve más abajo para más detalles.
Hay otra posibilidad aún mejor de mouseover, con la que puedes hacer que aparezcan los
contenidos de cualquier capa como mouseover o con un clic en un objeto en tu página.
Esta capa popup puede contener texto, gráficos, fotos o cualquier combinación de estos
elementos. Más información, abajo.
Primeros pasos 55
Las capas MouseOff y MouseOver
Todos los objetos principales en tu página web han sido colocados en la capa inferior,
conocida normalmente como MOUSEOFF . Los botones que se destacan cuando mueves el
cursor del ratón sobre ellos en tu página web, tienen un gráfico adicional en la capa,
conocido como MOUSEOVER .
Si abres la Galería de capas puedes mostrar u ocultar cualquier capa si colocas o quitas la
selección en la casilla de visibilidad (columna izquierda bajo el símbolo de ojo). Esta es una
forma de mostrarte cómo pueden verse los elementos de MouseOver en tu página web.
La capa actual siempre está destacada en la Galería de capas (la capa de MouseOff en el
diagrama de arriba) y esta es la capa en la que todos los objetos nuevos se
dibujarán. Para colocar objetos en cualquier otra capa, simplemente haz clic en la capa
requerida en la Galería de capas, y asegúrate de que los símbolos del ojo y del candado
estén abiertos.
Nota: la capa MouseOver debe estar siempre por encima de la capa MouseOff.
Para editar los objetos en una capa, los símbolos tanto de "ojo" como de "candado"
deben estar abiertos, esto significa que puedes ver y editar la página (tal como se ilustra
arriba en la capa MouseOff).
Normalmente no tienes que saber o tener en cuenta esto porque ambos botones se
comportan como uno: los cambios que haces en uno, como editar el texto de etiqueta, se
reflejan en la otra versión. Si mueves, arrastras o cambias un botón en la capa MouseOff,
56 Primeros pasos
la otra versión en la capa MouseOver cambiará asimismo aunque no puedas verlo. Esto se
efectúa utilizando Grupos suaves (en la página 44).
En otras palabras, otorgas al objeto principal una dirección web utilizando la opción
de enlace, y después seleccionas una capa MouseOver en la Galería de objetos y
colocas las versiones MouseOver de tu botón en esta capa para que se
superpongan con el objeto con el enlace.
Para asegurarte de que el texto cambie en los dos estados cuando editas uno de ellos,
APLICA UN GRUPO SUAVE a los botones de ambas capas. Para esto, necesitarás permitir
ambas capas en la GALERÍA DE CAPAS y realizar una selección laso alrededor de ambos
botones. La barra de estado debe informarte si has seleccionado todo. Selecciona
ARREGLO > APLICAR GRUPO SUAVE . Ahora, cuando edites el texto en la capa Off, también
cambiará en la otra capa, aun cuando esté oculto. (Ten en cuenta que esto solo funciona
si el texto en las capas Off y Over es igual y cuando los objetos estén agrupados como
grupo suave).
Una vez que el botón funcione, puedes convertirlo rápidamente en una barra de
navegación. Selecciona el botón (junto con el estado MouseOver, de corresponder) y
luego selecciona ARREGLO >CREAR BARRA DE NAVEGACIÓN. Aparecerá el diálogo de barra
de navegación que te permitirá configurar tu barra. Consulta el capítulo Barra de
navegación (en la página 254) para más información sobre este tema, incluyendo cómo
incluir un primer y un último botón diferentes en tu barra.
Capas pop·up
Una alternativa más fuerte te permite visualizar los contenidos de cualquier capa al pasar el
cursor sobre cualquier objeto o haciendo clic sobre el mismo. Esto se puede utilizar para
una gran variedad de efectos pop·up diferentes, como fotos pop·up, menús, o
descripciones de objetos detalladas.
Para hacer esto, posiciona todos los objetos que quieras como pop·up en una nueva capa
(en la galería de objetos haz clic en NUEVO · no utilices la capa mouseover), luego define la
Primeros pasos 57
propiedad mouseover (diálogo de PROPIEDADES WEB ) del objeto original para disparar la
visualización de esta capa cuando pases el cursor sobre cualquier objeto. Por ejemplo
puedes hacer que un pop·up como éste aparezca cuando pases el cursor sobre un texto:
Aquí tienes los pasos para crear un texto pop·uo como éste:
1. Haz clic en NUEVO en la GALERÍA DE CAPAS para crear una nueva capa.
2. Dibuja un rectángulo redondeado con la HERRAMIENTA RECTÁNGULO , haz clic en un
parche de color (pálido) en la LÍNEA DE COLOR para darle un color de relleno. Para una
buena medida dale una sombra suave (selecciona la herramienta SOMBRA y tira del
rectángulo).
3. Crea un bloque de texto en la parte superior de tu rectángulo. Selecciona la
HERRAMIENTA DE TEXTO y tira diagonalmente a través del rectángulo. Teclea tu texto.
Probablemente quieras ocultar ahora la capa pop·up, entonces deselecciona la
casilla del "ojo" de tu nueva capa.
4. De vuelta en la capa base (mouseoff) (haz clic en la GALERÍA DE CAPAS para definir
ésta como la capa actual), selecciona el texto que quieras que dispare el pop·up
utilizando el método usual (en la herramienta de texto). A continuación abre el diálogo
PROPIEDADES WEB (Ctrl+Shift+W) y en la pestaña MOUSEOVER selecciona la nueva
capa del menú desplegable "MOSTRAR CAPA POP·UP ". Haz clic en OK.
5. Haz una vista general y prueba tu efecto mouseover.
Si quieres que el pop·up sólo aparezca cuando haces clic, selecciona la misma opción en
la pestaña ENLACE del mismo diálogo de PROPIEDADES WEB .
Nota: La capa mouseover aparece y desaparece cuando pones y quitas el cursor del
ratón sobre el objeto disparador. Si empleas un método de clic para visualizar la capa (del
diálogo de Enlace), la capa se revela si haces clic en el objeto y se oculta cuando haces
clic en cualquier otro lugar de la página.
Fotos pop-up
Hay una segunda forma más fácil de mostrar fotos ampliadas de miniaturas que no implica
crear nuevas capas. Ver aquí (en la página 35). Este método es mejor para cuando tienes
grandes fotos pop-up, ya que las fotos pop-up no se cargan hasta que se hace clic en la
imagen de miniatura.
58 Primeros pasos
Web Designer es una herramienta genial para crear cualquier gráfico web para utilizar con
otros programas y otras herramientas de autoría web. Puedes dibujar estos objetos desde
el comienzo, utilizando las herramientas de dibujo o utilizar los cliparts web de la Galería de
diseños. Simplemente dibuja, diseña o importa cualquier elemento de la Galería de diseños
a una página en blanco. Manipúlalo según tus deseos, cámbiale el tamaño, el color y el
texto o fuentes, y luego exporta el elemento como PNG o JPG.
Por ejemplo, así se crea un gráfico de botón individual a partir de una plantilla:
Haz doble clic sobre un diseño para abrirlo en un nuevo documento. Edítalo según tus
deseos, puedes:
Para casi todos los gráficos, como botones, encabezados, íconos y otros objetos no
fotográficos deberías usar formato PNG. Para elementos que contienen fotos o partes
texturizadas a partir de fotos, entonces JPEG será un mejor formato. Si estás guardando
una foto girada o una con una sombra suave o borde suave, entonces deberías guardarla
en un formato PNG, pero debes considerar que este archivo será mucho más grande que
el JPEG.
Primeros pasos 59
Si haces clic en el botón CONFIGURACIÓN en el diálogo EXPORTAR ARCHIVO , accedes a un
panel de control avanzado que te permite optimizar la imagen
Aquí puedes comparar las dos versiones diferentes de la misma imagen, una junto a la
otra. Por ejemplo, puedes comparar un JPEG con una versión en PNG del mismo gráfico
para evaluar la calidad y/o el tamaño del archivo; o comparar dos imágenes PNG
optimizadas de forma diferente. Consulta el capítulo de referencia del diálogo de
exportación (en la página 324). En el ejemplo anterior, la compresión JPEG se ajustó para
obtener un tamaño de archivo óptimo.
Necesitarás una empresa de alojamiento web para que aloje tu sitio web. Muchas veces,
los proveedores de Internet incluyen un "espacio web" como parte de la suscripción
normal. El diálogo que se muestra a continuación también contiene soluciones de
alojamiento sugeridas en la lista PERFIL. La mayoría de los proveedores también ofrecen la
posibilidad de que adquieras tu propio nombre de dominio (por ejemplo www.xara.com) y
establecer un enlace a tus páginas web.
La subcarpeta opcional te permite publicar tu página web en una subcarpeta. Por ejemplo,
si publicases en el dominio xara.com (obviamente no puedes hacerlo) y quisieras que la
dirección web fuese
xara.com/productos/web_designer
Los detalles que introduzcas en la sección DETALLES DE FTP del diálogo están asociados
con el documento actual. Puedes escoger en el diálogo si estos detalles deben o no
guardarse con el documento. También puedes utilizar el botón GUARDAR EN PERFIL para
guardar los detalles en tu ordenador con un nombre de perfil, para poder seleccionarlo
rápidamente y utilizarlo con cualquier documento que quieras publicar en esa misma
ubicación.
Lee el capítulo Diálogo de propiedades web (en la página 215) para toda la información
sobre cómo utilizar este diálogo.
Nota: Muchos servidores utilizan nombres de archivo sensibles a las mayúsculas y las
minúsculas. Así, por ejemplo, la dirección web xara.com/products.htm no es lo mismo que
xara.com/Products.htm. Para reducir la confusión y la posibilidad de errores, Web
Designer fuerza que todo los nombres de página se escriban en minúsculas y contengan
sólo caracteres permitidos. Esto significa que los espacios no están permitidos en los
nombres de página. Sugerimos utilizar un guión bajo como separador alternativo.
El enlace de arriba a la derecha abre una ventana mostrando el enlace HTML para este mapa.
Hay una diferencia importante en el caso de los marcadores de posición para Flash:
puedes modificar su tamaño como lo desees y el Flash se modificará para adaptarse al
marcador de posición. Por otra parte, puedes optar por Flash transparente o
semitransparente, y funcionará perfectamente en tu página web. La mayoría de los otros
widgets tienen un tamaño fijo y aparecerán siempre con el tamaño predeterminado en tu
página web, independientemente del tamaño del marcador de posición.
Primeros pasos 63
Si seleccionas un archivo Flash para enlazar con un marcador de posición de esta manera,
el archivo Flash se copia en una carpeta "_archivos" junto al documento web. Si mueves o
copias el archivo web, también debes copiar la carpeta "_archivos" para asegurarte de
copiar también los archivos Flash.
• Selecciona inicio > Todos los programas > MAGIX > MAGIX
Web Designer 6.
• O doble clic sobre el símbolo de Web Designer de tu escritorio
(ilustración a la izquierda).
Se abre la ventana de inicio de MAGIX Web Designer 6. Aquí puedes seleccionar distintas
tareas típicas que puedes realizar con MAGIX Web Designer 6. Para más información lee el
capítulo correspondiente en la Ayuda de MAGIX Web Designer 6.
Esto abre un submenú con varios documentos de plantilla predefinidos con los que
puedes comenzar a trabajar.
La primer plantilla por defecto se utiliza para crear el nuevo documento después de iniciar
MAGIX Web Designer 6. La plantilla de animación es la plantilla por defecto para los
documentos con animaciones.
Puedes guardar tus propias plantillas con la opción Archivo -> Guardar plantilla: ve a
"Cambiar el documento de la plantilla (en la página 331)" para más información.
Al igual que en las ventanas de exploradores, puedes cambiar el archivo para que
se vea junto con sus detalles o como vista en miniatura con este botón.
Si VER VISTA PREVIA en la esquina superior derecha está activado, el archivo seleccionado
se verá en una vista previa aún más grande (esto no funciona en el caso de una selección
de varios archivos).
66 Trabajar con documentos
Barra de título
Nombre de archivo
Barra de botones estándar
Galerías
Barra de información
Barra de herramientas
Reglas
Línea de color
Barra de estado
Indicadores de arrastre/ajuste en vivo
Barra de herramientas web
Puedes cambiar el tamaño del tablero de dibujo en la pestaña OPCIONES -> TAMAÑO DE
PÁGINA (en la página 337).
Trabajar con documentos 67
Documento seleccionado y barra de título
En Web Designer puedes abrir más de un documento a la vez, pero el documento en la
ventana actual es el documento seleccionado al que se aplican todos los cambios. La
barra de título que se encuentra en la parte superior de MAGIX Web Designer 6 muestra el
nombre del documento seleccionado y si lo has cambiado desde la última vez que lo has
guardado. Una estrella después del nombre de archivo significa que hay modificaciones no
guardadas.
Barras de control
Las barras de control contienen botones que puedes usar para manejar Web Designer.
Puedes personalizar las barras de control de distintas formas como, por ejemplo,
reordenándolas o creando y ocultando barras.
La ventana por defecto muestra la barra de botones ESTÁNDAR con los botones que se
utilizan con mayor frecuencia:
Puedes personalizar la barra de control ESTÁNDAR de la misma forma que las otras barras
de control.
Estos íconos con un triángulo indicador en la esquina inferior derecha cuentan con barras
desplegables. Si colocas el cursor del ratón sobre estos íconos, verás la barra desplegable
con más íconos.
Barra de información
Esta es una barra de control especial. Su contenido cambia según la herramienta que
selecciones. Las barras de información para algunas herramientas específicas están
descritas en sus respectivos capítulos.
Haz clic sobre una herramienta para seleccionarla (algunas herramientas también
tienen shortcuts de teclado).
Para más información sobre la personalización de barras de control consulta el
capítulo "Personalización de Web Designer" (en la página 337).
Reglas
Puedes ocultar reglas, cambiar el punto cero (origen) y
utilizarlas para crear líneas guía. Para más información, lee
"Reglas (en la página 81)".
La barra de estado
Objetos seleccionados
Opciones disponibles
Indicadores
Cursor del ratón X-Y
Esto aparece en la parte inferior de la ventana. La barra de estado te informa sobre los
objetos seleccionados, opciones disponibles, indicadores de arrastre/ajuste en vivo y la
posición X/Y del cursor.
Los indicadores
Estos aparecen a la derecha de la barra de estado:
Coordenadas X-Y
Web Designer muestra las medidas relativas a la esquina inferior izquierda de la página. Sin
embargo, esto puede configurarse. Para más información, lee el capítulo Trabajar con
objetos.
Web Designer tiene otro modo de pantalla llamado "pantalla completa" que muestra una
pantalla más ordenada.
Puedes configurar cada modo de pantalla de la forma que quieras. Por ejemplo, puedes
tener tu propia configuración de las barras de control. La configuración se guarda y se
aplica cada vez que cambias entre los modos de pantalla.
La pantalla normal / completa se controla a través de Ventana > Pantalla completa (8 del
teclado numérico).
Para ver la barra de menú en modo de pantalla completa, mueve el cursor hasta la parte
superior de la pantalla.
Es posible que quieras abrir una segunda ventana con el mismo documento para:
Escoge Ventana > Nueva vista para abrir otra ventana. Puedes tener el mismo documento
abierto en diferentes ventanas.
70 Trabajar con documentos
Selección de la ventana que se quiere visualizar
En la parte inferior del menú Ventana se encuentra una lista de las ventanas. Escoge el
nombre de una ventana para verla.
ORDENAR VISTAS muestra las ventanas ordenadas verticalmente o, en caso de más de tres
ventanas, como superpuestas.
Muchas veces es útil aumentar la vista del documento para examinar los detalles o reducir
la vista para obtener una impresión general. Los valores por encima de 100% muestran
una vista ampliada (como si estuvieras utilizando una lupa); mientras que debajo de 100%
reducen la vista. Lo único que se modifica es la vista del documento; el tamaño del
documento y de los objetos permanece igual (el cambio de tamaño de documento se
describe más adelante). Para cambiar el valor de zoom puedes usar la herramienta de
ZOOM , el ratón o las barras de control.
• Pulsa Ctrl y gira la rueda del ratón para cambiar el nivel de zoom.
Trabajar con documentos 71
También puedes configurar una tecla del ratón para el zoom. Además, puedes cambiar la
acción de la rueda del ratón entre desplazamiento y zoom en Herramientas > Opciones >
Pestaña del ratón (en la página 335). La acción opuesta está disponible pulsando la tecla
Ctrl.
Mantén el cursor del ratón sobre el símbolo del zoom de la barra de herramientas
estándar para ver la barra desplegable.
Shortcut: Ctrl + R. Haz clic en el botón ZOOM ANTERIOR . Este es el valor de zoom
antes de la configuración actual. Usar este botón te permite cambiar de un valor
de zoom a otro en el documento. Esto es útil para cambiar entre el detalle y una
vista general. El valor de zoom anterior se guarda para cada ventana. Puedes
cambiar a otra ventana y el zoom previo todavía se mantendrá.
Shortcut "1" Haz clic en el botón Zoom a 100%. El factor del zoom cambia al
100%
Shortcut "Ctrl + ×+ J". Haz clic en el botón ZOOM AL DIBUJO . La ventana muestra
todos los objetos del documento.
La forma más rápida y fácil de desplazar el documento es utilizar el botón central del ratón
(que muchas veces es también la ruedita). Haz clic y pulsa la tecla del ratón y mueve el
ratón. Suelta el botón para volver a la herramienta anterior.
La visualización de las barras de desplazamiento es opcional. Escoge Ventana > Barras >
Barras deslizantes para desactivarlas
• Usa la rueda del ratón para desplazar el documento hacia arriba y hacia abajo (Shift +
rueda del ratón para izquierda a derecha)
Cuando se abre un nuevo documento en Web Designer el tamaño de página es 760 x 700
píxeles (SVA página web). Sin embargo, si lo deseas puedes cambiar el tamaño de página
para que sea compatible con otras resoluciones de pantalla como VGA.
Un documento de MAGIX Web Designer 6 puede tener múltiples páginas. Cada página se
exporta a una página en HTML independiente, es decir, cada documento en MAGIX Web
Designer 6 corresponde a una página web.
La página actual
Si haces clic en una página de un documento multipágina, se convertirá en la página
actual.
Mantén el cursor del ratón sobre cada símbolo de la barra para ver un consejo de
herramienta para cada operación. Puedes agregar una nueva página en blanco, duplicar la
página actual o eliminarla.
• Selecciona "EDICIÓN > PÁGINAS > MOVER PÁGINA HACIA ARRIBA" para cambiar la página
actual por la anterior.
• Selecciona "EDICIÓN > PÁGINAS > MOVER PÁGINA HACIA ABAJO" para cambiar la página
actual por la posterior.
Hacia arriba: se mueve hacia arriba del documento (retrocede a la página anterior). La
cantidad de desplazamiento depende de tu nivel de zoom. Cuanto más alejado estés del
documento (zoom out), más grande será el desplazamiento.
La barra de estado también es útil para saber qué página/s estás visualizando
actualmente.
Nota: todos estos movimientos son relativos a las páginas que estés visualizando, no a la
página actual.
Guardar el documento
Esta sección explica cómo guardar los documentos en el formato de Web Designer (su
formato nativo). Para más detalles sobre exportar documentos en otro formato, lee el
capítulo "Importación y exportación (en la página 316)".
Esta opción te ofrece una forma rápida de volver a guardar el documento con el mismo
nombre de archivo. La opción no está disponible salvo que hayas realizado cambios y
todavía no los hayas guardado.
Para un nuevo documento que todavía no se ha guardado en disco, la opción actúa como
"Guardar como" (descrita a continuación).
76 Trabajar con documentos
Guardar como (en el menú Archivo)
Esta ocpión abre un diálogo que te permite guardar el documento con un nuevo nombre o
en otro directorio. Esta opción es útil para realizar copias de seguridad de Web Designer.
Directorios de compatibilidad
Algunos documentos, que se utilizan para crear páginas web, tienen archivos externos de
referencia porque éstos no pueden ser integrados al archivo de diseño .web. Por ejemplo,
un archivo Flash (swf) de tu página web. Debes mantener el archivo Flash junto al archivo
de diseño porque sino cuando quieras exportar la página web ésta no funcionará de forma
correcta. Otra razón por la que es importante mantener ambos archivos juntos es para
cuando quieras enviar el diseño a alguien o para cuando quieras transferirlo a otro
ordenador.
MAGIX Web Designer 6 ofrece un directorio opcional de compatibilidad para los archivos
externos que se encuentra a la derecha del archivo de diseño.
Trabajar con documentos 77
Nombres para el directorio de compatibilidad
El archivo de diseño y su directorio de compatibilidad correspondiente se identifican
fácilmente porque tienen el mismo nombre. El directorio de compatibilidad para
"miSitio.web" se llama "miSitio_web_archivos". Si cambias el nombre de un archivo de
diseño o lo copias o mueves de sitio, no te olvides de cambiar el nombre del directorio de
compatibilidad (si existe uno). Y si deseas enviar un archivo de diseño, recuerda que debes
mandar también el directorio de compatibilidad.
Cerrar el documento
Para cerrar el documento:
MAGIX Web Designer 6 guardará como opción copias de seguridad de tus documentos
abiertos mientras trabajas. Esto te ayudará a evitar que pierdas tu trabajo en el caso de un
falla eléctrica o de un cierre anormal del programa. También es útil si deseas volver a una
versión anterior de tu documento.
Ten en cuenta que una vez que el periodo configurado haya pasado desde la última copia
de seguridad, la próxima copia de seguridad se realizará cuando el programa haya estado
inactivo durante al menos 15 segundos. Esto evita que se interrumpa tu trabajo y que el
documento se guarde mientras se lo está modificando. En el uso normal, es poco
probable que no haya periodos inactivos de 15 segundos o más, por lo que permite
Trabajar con documentos 79
realizar una copia de seguridad poco después. De todas formas, si estás editando
activamente durante un periodo extendido de tiempo es posible que transcurra bastante
más tiempo que el configurado entre dos copias de seguridad.
Cuando se realiza una copia de seguridad, verás una barra de progreso en la parte inferior
de la ventana de MAGIX Web Designer 6 mientras se finaliza el procedimiento.
Revisiones
Por defecto, se guardan 10 revisiones de cada diseño en tu carpeta de copias de
seguridad, pero puedes escoger cambiar este número en el campo de revisiones. Las
revisiones que excedan la cantidad establecida, se eliminarán automáticamente. Cada
archivo de copia de seguridad recibe el nombre del documento del que se ha tomado,
junto con la fecha y hora en que se ha realizado la copia de seguridad.
Cuadrícula de pantalla
Para ayudarte a diseñar tu documento, MAGIX Web Designer 6 puede mostrar una
cuadrícula en la pantalla. (Esta cuadrícula se ve solamente en la pantalla y nunca se
imprime). La cuadrícula te ayuda a alinear objetos (similar a utilizar un papel cuadriculado
como ayuda para dibujar).
También puedes escoger la opción Ventana > Ajustar a cuadrícula. En este caso, los
puntos de cuadrícula actúan como imanes y, al mover objetos, estos se ajustan al punto
de cuadrícula más cercano.
Para detalles sobre el ajuste de objetos, lee el capítulo Trabajar con objetos (en la página
105).
Puedes mover la cuadrícula de acuerdo a la página, moviendo el punto 0,0 de las reglas
(se describe más adelante).
Reglas
• Pulsa Ctrl + L.
• O selecciona VENTANA > BARRAS > REGLAS .
Cuando creas o cambias el tamaño de objetos, puedes utilizar las reglas para controlar el
tamaño. También puedes utilizar la herramienta de SELECCIÓN para un trabajo más exacto
- lee Selección de objetos para más información.
Las reglas pueden verse sobre el borde izquierdo y el borde superior de la ventana. Una
línea punteada sobre cada regla sigue la posición actual del cursor.
Las unidades y números de las divisiones de las reglas son los mismos configurados para
personalizar la cuadrícula en pantalla. Estos valores se configuran utilizando la pestaña
"Cuadrícula y regla" del diálogo OPCIONES (descrito más adelante). Las unidades actuales y
los factores de cambio de tamaño se visualizan en la esquina superior derecha de la regla.
Puedes arrastrar vertical u horizontalmente a lo largo de las reglas o hasta cualquier otra
parte de la ventana de edición de Web Designer. A medida que lo hagas, una línea
punteada te mostrará la nueva posición.
Esto también mueve el origen de la cuadrícula de forma que las divisiones de la regla
siempre se encuentren alineadas con la cuadrícula.
Trabajar con documentos 83
También puedes mover el punto cero desde la pestaña CUADRÍCULA Y REGLA del diálogo
de opciones (descrito a continuación)
Calidad de imagen
• Sólo contorno. Ahora, con antialiasing completo para una mayor calidad de visualización
de la pantalla
• Contornos con pasos de transición
• Color total (sin antialiasing)
• Alta calidad (antialising total y suavizado de imagen)
• Muy alta calidad (el mejor antialiasing de la industria. La nueva visualización de fotos
bicúbica aumenta la calidad de fotos reducidas).
Galerías
MAGIX Web Designer 6 usa galerías para suministrar acceso conveniente a bibliotecas
externas de contenido como plantillas, fuentes, colores, cliparts, atributos de líneas y
mapas de bits/fotos. Esta sección de la ayuda suministra información general sobre
características que son comunes a múltiples galerías. Las secciones individuales describen
características específicas a una galería en particular.
Capa
Frame
Mapa de bits
Línea
Diseños
• Selecciona la barra de control GALERÍAS (no todas las galerías están disponibles desde
esta barra, sino solamente las que se utilizan con mayor frecuencia).
• O escoge "HERRAMIENTAS - > GALERÍAS", en donde encontrarás todas las galerías
disponibles.
Fijación de galerías
Es posible fijar una o más galerías a cada lado de la ventana de Web Designer.
Un ejemplo de una galería fijada. También es posible cambiar el tamaño de la galería para que
ocupe más o menos espacio.
Trabajar con documentos 85
Fijar una galería
Para fijar una galería:
Reorganizar galerías
Si has fijado más de una galería de un lado, las galerías compartirán una columna. Puedes
cambiar el tamaño de las galerías como lo desees, así como también arrastrar las galerías
hacia arriba o hacia abajo para cambiar el orden.
Los botones de la parte superior dependen de la galería (p.ej. RELLENO y TRANSP son
opciones específicas de la GALERÍA DE MAPA DE BITS .) De todos modos, la mayoría de las
galerías presenta estos botones:
APLICAR inserta el ítem seleccionado de la galería. Haz clic sobre un ítem para
seleccionarlo.
86 Trabajar con documentos
OPCIONES abre un menú en donde puedes escoger:
• BUSCAR :
se describe más adelante en la búsqueda de un nombre de ítem.
• ORDENAR :
se describe más adelante en el orden de los ítems en una galería.
• PROPIEDADES : permite controlar el tamaño de los iconos y la cantidad de información
que se muestra en la galería.
• Añadir (galerías de clipart, rellenos y fuentes): descrito a continuación en añadir ítems en
una galería.
• ELIMINAR (galerías de clipart, rellenos y fuentes): descrito a continuación en eliminar
secciones de una galería.
Seleccionar ítems
Para seleccionar un ítem:
Añadir a la galería
Es posible que quieras añadir ítems extra para estas galerías. (sólo es posible en las
galerías de DISEÑOS & RELLENOS ). Para esto:
1. Copia los archivos que quieres añadir a un nuevo directorio usando el explorador de
Windows.
- Para la GALERÍA DE CLIPARTS , estos archivos pueden ser cualquier tipo de la
amplia gama de archivos de vectores o mapas de bits.
- Para la GALERÍA DE RELLENOS puede ser cualquiera de los formatos de mapa de
bits compatibles con Web Designer (listados en importación y exportación (en la
página 317)).
Trabajar con documentos 87
2. En cada galería, pulsa el botón "DISEÑOS DE DISCO /RELLENOS". Se abrirá una ventana
de diálogo.
3. Usa este diálogo para seleccionar el directorio que quieres añadir.
4. Haz clic en "AÑADIR" . Esto crea una nueva sección en la galería.
Deshacer y rehacer
La función deshacer
Deshacer cancela el efecto de la última operación. Para deshacer una
operación:
Puedes repetir la función deshacer para seguir retrocediendo por la secuencia de las
operaciones previas.
88 Trabajar con documentos
La función rehacer
Rehacer cancela la función deshacer anterior. Para rehacer la última
operación:
La herramienta de selección
Dimensiones de selección
% de controles de tamaño
Bloquear relación de aspecto
Girar e inclinar
Voltear
Escalar anchos de línea
Aplicar nombres
• Pulsa y libera Alt+S para cambiar a la herramienta de SELECCIÓN. Pulsa otra vez para
regresar a la herramienta anterior.
Seleccionar objetos
Para seleccionar un solo objeto haz clic en cualquier parte visible del objeto.
Los objetos del frente y el fondo se describen en Trabajar con objetos (en la página 88).
Marco de selección
Para seleccionar varios objetos, pulsa y mantén pulsada la tecla del ratón. Al arrastrar el
ratón se dibuja un rectángulo de selección y todos los objetos dentro del rectángulo
quedarán seleccionados.
Si hay algún objeto que no te permite dibujar un rectángulo porque el objeto se mueve,
pulsa "×" mientras arrastras el rectángulo de selección.
Ampliar selección
Para seleccionar objetos adicionales:
Seleccionar bajo
Pulsa Alt para seleccionar objetos que se encuentran debajo de otros objetos. Con Alt+clic
puedes pasar por varios objetos superpuestos.
Selección interna
"Ctrl + clic" sobre el objeto que quieres seleccionar de adentro. Esto se utiliza para
seleccionar un objeto que se encuentre dentro de un grupo. Te permite, por ejemplo,
editar un contorno de un objeto dentro de un grupo sin tener que desagruparlo. Los otros
objetos no se modifican.
Ten en cuenta que algunas operaciones no se pueden realizar si hay un objeto interno
seleccionado. Por ejemplo, el marco de selección y la copia con clic derecho no funcionan
para seleccionar dentro.
Consulta "Galería de páginas y capas (en la página 275)" para obtener más detalles sobre
capas.
Deseleccionar un objeto
Para deseleccionar todos los objetos:
• ×+clic sobre el objeto. Esto deselecciona el objeto. Los otros objetos permanecen
seleccionados.
Marcadores de selección
Cada objeto seleccionado muestra un marcador de selección para señalar que está
seleccionado. Esto es un recordatorio muy útil cuando seleccionas y deseleccionas varios
objetos.
Barra de estado
La barra de estado que se encuentra en la parte inferior de la ventana también describe lo
que está seleccionado.
Tab
Si hay un objeto seleccionado, pulsar Tab y ×+Tab cambiará la selección al objeto anterior
y siguiente en el documento.
Mover objetos
También puedes mover objetos usando las teclas de flecha. Esto se describe en la
próxima página.
O, de la misma forma, pulsa la tecla derecha del ratón y arrastra. Esto arrastrará
inmediatamente una copia del objeto. Haz clic izquierdo para dejar una copia en la
posición actual del ratón.
Trabajar con objetos 93
Rellenos
Generalmente, si mueves un objeto, su relleno también se moverá:
Web Designer también puede mover el objeto pero no el origen del relleno. Para hacer
esto, pulsa la tecla - en el teclado numérico durante el movimiento.
Desplazar objetos
Generalmente puedes mover un objeto levemente utilizando las teclas de flecha . (A
veces, estas teclas tienen otros usos, especialmente en la herramienta de TEXTO .)
Modificadores de desplazamiento
Para modificar la distancia de desplazamiento, utiliza estas combinaciones de teclas
mientras usas las flechas:
1. Selecciona el objeto.
2. Para eliminar el objeto, escoge "EDICIÓN > CORTAR " (o "Ctrl + X"). Para copiar el
objeto pero no eliminarlo, escoge "EDICIÓN > COPIAR " (o "Ctrl + C"). Las dos
opciones colocan el objeto (o una copia del objeto) en el portapapeles.
3. Selecciona "EDICIÓN > PEGAR " (o "Ctrl + V" o "Insertar"). Esto pega el contenido del
portapapeles en el documento.
Ten en cuenta que si todos los objetos que copias se encuentran en la misma capa,
después podrás pegar esos objetos en cualquier capa si primero lo haces en la capa
actual. La capa desde la que se copian los objetos se ignora en este caso.
Sin embargo, si los objetos que copias se encuentran en varias capas diferentes,
entonces la estructura de capas se mantiene al pegar. Los objetos se pegan en la misma
capa desde la que se copiaron, sin importar cuál capa es actual.
"Ctrl + ×+ V" pega el contenido del portapapeles en la misma posición X-Y de donde se
ha cortado o copiado. Esto sólo se aplica a los objetos cortados o copiados desde dentro
de Web Designer. Los objetos importados desde otros programas siempre se pegan en el
centro de la vista actual.
El objeto permanece en el portapapeles, por lo que puedes pegar el mismo objeto muchas
veces.
Primero selecciona los objetos que quieres eliminar. Puedes cortar los objetos al
portapapeles o eliminarlos.
Cortar objetos
Selecciona "Edición > Cortar", o pulsa "Ctrl + X". Los contenidos del portapapeles serán
sobrescritos y podrás pegar el objeto o los objetos borrado en el lugar deseado.
Trabajar con objetos 95
Eliminar objetos
Escoge "Edición > Eliminar", pulsa "Supr" o haz clic sobre el botón ELIMINAR de la
barra de control ESTÁNDAR .
Duplicar y clonar
Ambas opciones crean una copia del objeto seleccionado. El objeto original se
deselecciona y el duplicado o el clon se convierte en el objeto seleccionado.
Una forma sencilla de crear una o más copias de un objeto alineado horizontal o
verticalmente, es arrastrar el objeto, pulsar Ctrl para limitar el movimiento y después hacer
clic derecho (o pulsar + del teclado numérico) para cada copia.
Para sustituir rápidamente una línea de objetos, dibuja uno, después arrástralo mientras pulsas
la tecla Ctrl y haz clic derecho para cada copia que quieras crear.
Duplicar
Escoge Edición > Duplicar o pulsa Ctrl+D. La copia aparecerá un poco hacia la derecha y
abajo del objeto original.
Este ejemplo usa una letra original A con relleno negro y un contorno blanco con una anchura de
4 pt y un clon sin relleno y una línea negra de 1 pt.
Las ilustraciones complejas tienen objetos apilados uno sobre otros, igual que este blanco.
El blanco de la izquierda está construido a partir de tres círculos apilados uno sobre otro.
Para asegurar que los objetos se superpongan en el orden correcto, muchas veces
necesitas cambiar el orden desde adelante hacia atrás. (El objeto de adelante siempre
cubre a los de abajo y los otros objetos siempre cubren a los que están más abajo. Cada
nuevo objeto que creas se coloca arriba de los anteriores.)
Girar objetos
Arrastra una flecha de una esquina. Mientras arrastras, el objeto gira alrededor del centro
de transformación. La barra de información muestra el ángulo de rotación actual.
"× + arrastrar" para hacer girar un objeto alrededor de su centro (el centro de
transformación será ignorado).
Pulsa "Ctrl" para limitar la dirección de rotación a uno de los ángulos de restricción.
Para crear una copia mientras realizas un giro, pulsa la tecla "+" del teclado numérico
mientras giras o haz clic con la tecla derecha del ratón.
98 Trabajar con objetos
Rotación con ángulos exactos (utilizando la barra de información)
Introduce un ángulo en el campo de rotación y pulsa ↵. Los ángulos positivos realizan el
giro en sentido contrario a las agujas del reloj, mientras que los ángulos negativos lo
realizan en el sentido de las agujas del reloj.
Puedes activar este botón durante el arrastre y pulsando la tecla / del teclado numérico.
Este control también determina si los valores X, Y, ancho y alto de la barra de información
incluyen el ancho del contorno o pincel. Muchas veces es útil ver y controlar el tamaño
exacto de la forma excluyendo el ancho de la línea.
Trabajar con objetos 99
Botón Bloquear relación de aspecto
Con el botón BLOQUEAR RELACIÓN DE ASPECTO , la relación de
aspecto ancho:altura permanece constante cuando cambias el
tamaño del objeto.
En otras palabras, la forma mantiene las mismas proporciones que el original. Se
recomienda dejar este botón activado la mayoría del tiempo para garantizar que los
objetos no se deformen al cambiar su tamaño.
Pulsa "×" mientras arrastras para cambiar el tamaño del objeto alrededor de su centro.
Esto funciona independientemente de la posición del centro de tranformación.
"Ctrl + arrastra" aumenta el tamaño del objeto en múltiplos de su tamaño original (x2, x3 y
sucesivamente).
Para crear una copia mientras cambias el tamaño (dejando el original en su lugar), haz clic
derecho o pulsa la tecla "+" del teclado numérico.
Como alternativa, escribe el tamaño deseado del objeto en los campos de texto AL o
AN .
Si el botón BLOQUEAR RELACIÓN DE ASPECTO está activado, esto cambia el tamaño del
objeto pero mantiene su relación de aspecto. Puedes introducir cualquier tamaño en
cualquier unidad como, por ejemplo, 1 cm.
Voltear objetos
Esta opción es parte de la herramienta de SELECCIÓN. Un clic sobre los
botones para VOLTEAR da vuelta el objeto vertical u horizontalmente a partir
del centro de transformación.
El tamaño y la relación de aspecto no cambian, el objeto simplemente se voltea.
Esto es similar a cambiar el tamaño de los objetos, salvo que el objeto cambia de tamaño
en una sola dirección. La extensión o reducción del objeto son básicamente la misma
acción, pero en sentido contrario.
Haz clic derecho o pulsa "+" del teclado numérico mientras arrastras para extender o
reducir una copia el objeto (dejando el original en su lugar).
Introduce el valor en el campo de texto del ancho o alto (según corresponda) y pulsa "↵".
También puedes introducir un porcentaje (ancho o alto). Si introduces 200% en el campo
% superior, el ancho del objeto se duplicará mientras que el alto permanecerá igual.
Inclinar objetos
Arrastra una de las flechas laterales, superiores o inferiores para inclinar el objeto. Ten en
cuenta que sólo se muestran estos controles deslizantes en los rectángulos que no tienen
102 Trabajar con objetos
una foto en su interior porque inclinar otros objetos rara vez produce resultados correctos
(las fotos se distorsionan).
× + arrastra para inclinar el objeto alrededor del centro. Pulsa "Ctrl" para limitar la dirección
de inclinación a uno de los ángulos de restricción. Para crear una copia mientras arrastras,
haz clic derecho o pulsa la tecla "+" del teclado numérico (dejando el original adonde
estaba antes). O haz clic derecho con el ratón para crear copias instantáneas; si quieres
copias adicionales haz clic izquierdo.
Difuminación (Feathering)
Si quieres que los bordes de un objeto sean borrosos (blur) para que el objeto se
desvanezca en un objeto de fondo. Esto se llama difuminación. Un ejemplo es cuando se
fusionan dos mapas de bits para evitar un borde marcado entre ellos.
Ajuste
• Ajustar a cuadrícula
• Ajuste magnético
• Ajustar a líneas guía u objetos guía
Ajustar a cuadrícula es muy útil para espaciar los objetos en intervalos precisos o cambiar
el tamaño en múltiplos exactos de un valor determinado. Las líneas guía se utilizan para
alinear esquinas (aunque usar objetos guías es más poderoso) y, finalmente, el ajuste
magnético es una forma general de posicionar líneas, puntos o esquinas arriba de otras
líneas puntos o esquinas de objetos cercanos.
Ajustar a cuadrícula
Si se ha seleccionado AJUSTAR A CUADRÍCULA , los puntos de cuadrícula funcionan como
imanes. Esta opción se controla en Ventana > Ajustar a cuadrícula o pulsando . (separador
decimal) del teclado numérico. Al arrastrar un control deslizante de punto cerca de un
punto de cuadrícula, se creará un ajuste. Puedes controlar el espaciado de la cuadrícula
en el diálogo de opciones (Herramientas > Opciones). Por defecto, las plantillas de
documento web tienen el ajuste a la cuadrícula activado con un sólo píxel, por lo que, en
general, todos los objetos y posiciones son píxeles enteros.
104 Trabajar con objetos
Al arrastrar objetos, los bordes se ajustarán a los puntos de cuadrícula. El borde que se
ajustará depende de la dirección en que se arrastra al objeto.
Este ejemplo muestra una cuadrícula con 5 subdivisiones entre las divisiones mayores. La forma
tiene un contorno gris muy ancho. Como el objeto fue arrastrado hacia abajo a la izquierda, los
bordes inferiores izquierdos se han ajustado al punto de cuadrícula más cercano.
Nota: el espaciado de cuadrícula por defecto es 50 píxeles para las líneas principales con
50 subdivisiones. Esto significa que la cuadrícula tiene un espaciado de un píxel de
pantalla y puede parecer que no se estuviera trabajando a un nivel normal de 100%. Si
amplías la imagen a 500%, verás que se ajusta de forma correcta.
Si desactivas este control, los objetos se ajustarán al centro matemático de la línea, que es
lo mismo que el borde externo de la línea si no tuviera un contorno.
Trabajar con objetos 105
Ajuste magnético de objeto
El ajuste magnético de objeto es una forma muy precisa de alinear líneas, puntos
y bordes de los objetos a cualquier otro objeto para que se toquen.
Por ejemplo, si quieres que varias líneas comiencen precisamente en el mismo punto o
quieres que una línea se junte con precisión al borde de un círculo, la utilización del ajuste
magnético te lo permitirá.
Puedes utilizar esta opción, incluso para alinear el centro de los objetos. Cuando escoges
un objeto con el ajuste magnético activado, se selecciona el "punto de interés" más
cercano. Cuando arrastras el objeto y el ajuste magnético está activado, entonces el punto
debajo del ratón se ajustará al contorno u otro "punto de interés" de la forma visible.
Esto es controlado por el botón del pequeño imagen en la barra de botones ESTÁNDAR :
O a través del menú Ventana > Ajustar a objetos o pulsando * en el teclado numérico.
Por ejemplo, puedes alinear la esquina de un cuadrado al centro exacto del círculo,
escogiendo la esquina del cuadrado (o muy cerca) y arrastrándolo hasta el centro del
círculo. El indicador de ajuste de la barra de estado te mostrará cuando los objetos se
hayan ajustado.
Los objetos guía y las líneas guía son objetos de una capa especial: la capa guía. Una
capa guía se crea automáticamente cuando creas una línea guía (ver a continuación) o
puede crearse de forma manual con un clic derecho en la GALERÍA DE CAPAS y
seleccionando CREAR UNA CAPA GUÍA . Lee el capítulo "Capas para más información (en la
página 275)".
106 Trabajar con objetos
Usa la opción AJUSTAR A GUÍAS del menú Ventana (o la tecla 2 del teclado numérico) para
activar el ajuste a objetos guía.
Cualquier objeto colocado en la capa guía se convierte en un objeto guía. Esto puede ser
cualquier objeto incluyendo líneas en cualquier ángulo, formas irregulares y QuickShapes.
Puedes crear, eliminar y cambiar el tamaño de los objetos de la capa guía al igual que en
las otras capas, pero los objetos se verán con contornos de puntos rojos y el ancho de
línea o color de relleno se ignorará. Esta información se guardará, y si posteriormente
mueves el objeto desde la capa guía a una capa normal, el ancho de línea y los colores se
verán nuevamente.)
Puedes usar los objetos guía para dibujar líneas de construcción como líneas que pasan a
través de un punto imaginario para un dibujo en perspectiva.
La galería de capas muestra la capa guía seleccionada encima de otras dos capas.
También puedes cortar o copiar objetos desde otras capa y pegarlos en la capa guía. Para
copiar objetos en la misma posición relativa a la capa guía utiliza el shortcut Ctrl+×+ V.
• Doble clic sobre la regla para crear una línea guía alineada al punto de clic.
Esto crea automáticamente una capa guía y coloca la línea guía en esa capa.
Trabajar con objetos 107
O, usa la galería de capas:
+ crea una copia mientras arrastras, cambias de tamaño, doblas, etc. El objeto original
no se modifica.
/ conserva el ancho de línea intacto al cambiar de tamaño el objeto.
- conserva el relleno sin cambios al mover, cambiar de tamaño, doblar, etc.
* activa y desactiva el ajuste magnético.
Muchas veces crearás formas complejas a partir de varios objetos diferentes. La opción
Arreglo >Agrupar, te permite unir estos objetos para que parezcan un solo objeto.
Después podrás seleccionar los objetos agrupados y copiarlos, moverlos, escalarlos o
realizar cualquier otra operación sobre todo el grupo.
Desagrupar objetos
1. Selecciona el grupo.
2. Escoge Arreglo > Desagrupar (o Ctrl+U).
Puedes escoger Arreglo > Agrupar para volver a agrupar los objetos restantes.
Grupos y capas
Si todos los objetos que quieren agruparse se encuentran en una sola capa, el grupo se
creará en esa capa. El grupo se encuentra en el nivel del mayor miembro del grupo. (Es
decir, el grupo se convierte automáticamente en el objeto de adelante).
Si los objetos se encuentran en más de una capa, el grupo se creará en la capa que
contenga el objeto más cercano al frente.
Los grupos normales, como se explicó en "Agrupar y desagrupar objetos" (en la página
107), sólo se colocan en una capa, no pueden estar en varias capas al mismo tiempo. Los
GRUPOS SUAVES te permiten conectar objetos a través de distintas capas.
Los grupos suaves son prácticos para cuando quieres mantener juntos los objetos que
están relacionados. Por ejemplo, los estados MOUSEOFF y MOUSEOVER de un botón web
se agrupan en un grupo suave para que el otro estado también guarde los movimientos o
transformaciones.
Un objeto no puede ser miembro de más de un grupo suave y los grupos suaves no
pueden ser parte de otros grupos suaves.
Sincronización de texto
Todos los objetos que tengan el mismo valor de texto y que estén en el mismo grupo
suave serán sincronizados si alguno de los objetos se edita. Entonces, si cambias el texto
de un objeto, todos los otros objetos que tengan el mismo texto serán modificados. Sólo el
texto será sincronizado, los objetos pueden tener diferentes tamaños, fuentes o atributos.
La sincronización de texto utilizando los grupos suaves es práctico cuando tienes una
etiqueta que está duplicada en varios sitios, eventualmente en diferentes estilos y si
quieres que cada objeto tenga la misma etiqueta.
110 Trabajar con objetos
Alineación
Esto permite alinear dos o más objetos con precisión. Selecciona los objetos que quieres
alinear y escoge "Arreglo" > "Alineación" (Shortcut: Ctrl + Shift + L).
Dentro
Esta sección del diálogo controla los límites dentro de los que alineas o distribuyes los
objetos. Las opciones son:
Alineación
Para alinear objetos para que, por ejemplo, sus bordes izquierdos queden alineados a la
izquierda:
Distribuir
Las opciones de distribución posicionarán los objetos seleccionados de forma regular
dentro del área (generalmente los límites de selección, pero también puede ser la página o
doble página.)
Todas las opciones de distribución funcionan de forma similar. Los siguientes ejemplos
muestran las diferentes opciones verticales para alinear objetos:
Las opciones de posición horizontal son similares, pero funcionan en dirección horizontal.
Si, por ejemplo, quieres distribuir esta colección de elipses para que presenten espacios
iguales y sus bordes superiores estén alineados:
Esto te permite copiar atributos (como el modelo de línea o el color de relleno) entre
objetos. Es una forma rápida de aplicar múltiples atributos a un objeto.
Librerías de estilos
Es bastante fácil utilizar esta técnica para crear documentos que pueden utilizarse como
librerías de estilo. Crea una serie de pequeños objetos con un relleno, color y otros estilos
de atributos. Después, la forma más sencilla de utilizar uno de estos estilos es:
Atención: la mayoría de los atributos pueden copiarse de esta forma, incluyendo sombras,
valores de difuminación, estilos de relleno, efectos en vivo, etc.. Sin embargo, los biseles
no pueden copiarse de un objeto a otro, si el objeto en el que se tiene que copiar el bisel
posee ya un bisel para aplicar a los atributos de bisel.
Nombrar objetos
Puedes aplicar nombres a cualquier objeto del MAGIX Web Designer 6, utilizando
la opción "Aplicar, quitar o verificar nombres de objetos" en la barra de información
de la HERRAMIENTA DE SELECCIÓN.
La aplicación de nombres es un mecanismo que tiene una variedad de usos que serán
explicados a continuación. El uso más común es para formar series de objetos.
Animaciones Flash: los nombres para las animaciones Flash se usan para marcar objetos
a los que se les añadirán animaciones con el exportador Flash. Lee el capítulo sobre Flash
(en la página 283) para más detalles.
El diálogo carece de modo así que puedes cambiar la selección mientras el diáolog esté
abierto. Muestra los nombres para la selección actual. El campo de texto superior del
diálogo te indica cuántos objetos están seleccionados actualmente.
Añadir nombres
Para añadir un nombre a un objeto, selecciona el objeto y abre el diálogo
APLICAR/ELIMINAR NOMBRES utilizando el botón de la BARRA DE INFORMACIÓN DE LA
HERRAMIENTA DE SELECCIÓN .
Introduce el nuevo nombre en el campo "Aplicar nombre" o utiliza la lista desplegable del
mismo campo para seleccionar un nombre que ya haya sido utilizado en otra parte del
documento actual. Haz clic en AÑADIR. El nombre aparecerá en la lista "NOMBRES
APLICADOS ".
Nombres aplicados
El campo de "NOMBRES APLICADOS " te muestra los nombres que se han aplicado en la
selección actual. Si hay más de un objeto seleccionado, sólo se mostrará una lista de los
nombres aplicados si todos los objetos de la selección tienen la misma serie de nombres.
Si no es así, verás la palabra "<muchos>" indicando que se han aplicado distintos
nombres para los diferentes objetos de la selección.
Objetos repetidos
En las páginas web es muy común que ciertos elementos se repitan en todas las páginas
como, por ejemplo: los botones de navegación, los encabezados o los logos. Web
Trabajar con objetos 115
Designer te ofrece la posibilidad de repetir cualquier elemento en el mismo lugar de las
páginas del sitio. Cuando actualices una de las copias, se guardarán los cambios en todas
las páginas.
Sin embargo, si la barra está configurada como BARRA DE NAVEGACIÓN DEL SITIO
aparecerá automáticamente en todas las páginas de tu sitio y no es necesario que utilices
la opción Actualizar objetos repetidos para estas barras.
Los textos de logos y pies de página generalmente se configuran como objetos que se
repiten. Esto significa que puedes editarlos en una sola página, escoger Arreglo >
Actualizar objetos repetidos, y el objeto se actualizará en todas las otras páginas.
Nota: se utiliza la página actual como fuente original para actualizar los elementos
repetidos de todas las páginas. Por eso es importante que te asegures de estar en la
página correcta antes de seleccionar una opción del menú. La página seleccionada es la
que estás utilizando para trabajar y tiene marcadores alrededor de las esquinas de la
página. Haz clic en cualquier parte de la página (también en el exterior) para activarla.
Es muy fácil crear tus propios elementos repetidos, sólo tienes que seleccionar cualquier
objeto y escoger ARREGLO > REPETIR EN TODAS LAS PÁGINAS .
Se copiará el objeto en el mismo lugar en todas las páginas. Para efectuar más cambios
en el elemento seleccionado, selecciona ARREGLO > ACTUALIZAR OBJETOS REPETIDOS para
que se actualicen todas las copias.
Si no quieres una copia en la página, sólo tienes que borrarla de esa página. Si vuelves a
seleccionar ACTUALIZAR OBJETOS REPETIDOS sólo se actualizarán los elementos que ya
existen en la página.
Pies de página
Si quieres que aparezca un pie de página en la parte inferior de todas las páginas, también
puedes utilizar el sistema de "Objetos repetidos". Selecciona el elemento (puede ser un
elemento individual, un grupo o múltiples elementos) y escoge la opción "REPETIR EN
TODAS LAS PÁGINAS ". Esta opción es muy práctica porque coloca los pies de página
siempre en el mismo lugar, independientemente de la longitud de la página.
Ahora, cuando edites o hagas cambios al elemento y selecciones ARREGLO > ACTUALIZAR
OBJETOS REPETIDOS , todas las copias se actualizarán.
Nota: esta función actualiza los objetos repetidos de la página actual en todas las otras
páginas que contengan los mismos elementos repetidos. Eso es, sólo las páginas que
tengan objetos repetidos se actualizarán (no insertará estos elementos en páginas vacías).
Nota técnica: esta función identifica los nombres "repetidos" y los reemplaza con los
elementos correspondientes de la página original (la página seleccionada).
Si utilizas la opción del menú REPETIR EN TODAS LAS PÁGINAS , se creará un nombre
"Repeating:AutoRepetición" apropiado que se aplicará a todas las copias. A partir de este
momento, se actualizará cuando seleccionas "Actualizar objetos repetidos".
Utiliza esta opción cuando, por ejemplo, hayas utilizado ARREGLO > REPETIR EN TODAS LAS
PÁGINAS para copiar un objeto en todas las páginas de tu sitio web, pero luego quieras
Trabajar con objetos 117
modificar dichos objetos para que sean diferentes en cada página de forma que dejen de
estar conectados entre sí. Simplemente selecciona uno de los objetos y escoge ARREGLO
> DETENER REPETICIÓN. Se te preguntará si quieres dejar de repetir el objeto seleccionado
o todas las copias del objeto. Escoge la opción TODOS . Ahora, cada copia puede editarse
de forma independiente y la próxima función "Actualizar repetición" no las modificará.
Arreglo > Detener repetición también es útil si quieres crear una copia de un objeto
repetido en una página (p.ej. un pie de página o un logo) y no quieres que esa copia se
actualice con "Actualizar repetición". En este caso escoge la opción SÓLO ESTA COPIA
cuando se te pregunte.
Ten en cuenta que no puedes usar Arreglo > Detener repetición para las barras de
navegación con la opción BARRA DE NAVEGACIÓN DEL SITIO activada en el DIÁLOGO DE
BARRAS DE NAVEGACIÓN . Esto es porque las barras de navegación del sitio se actualizan
siempre en toda la página. Consulta el capítulo Barras de navegación para más
información sobre las barras de navegación del sitio.
Encabezados/Pies de página
Puede ocurrir que tengas páginas de distintas longitudes y que quieras que algunos de los
objetos repetidos se inserten en una posición determinada como los encabezados y los
pies de página. MAGIX Web Designer 6 realiza esto automáticamente.
Añadir/Cambiar/Editar indicador
Crear curva
Crear línea
Unión en curva
Unión marcada
Separar en puntos
Eliminar puntos
Invertir trayectoria
Posición de los controles deslizantes
Suavizado
La barra de información, que se muestra arriba, ofrece una amplia variedad de controles,
incluyendo un control numérico muy preciso.
Todas las líneas y formas en MAGIX Web Designer 6 están formadas a partir de una
secuencia de curvas y secciones de línea. Muchas veces, las curvas se denominan Bézier,
en honor al primer matemático en describirlas.
Estas secciones o segmentos de una línea están señalados por pequeños controles
deslizantes negros. Puedes arrastrar, añadir y eliminar estos controles deslizantes para
manipular la forma de la línea o contorno.
La herramienta de edición de formas 119
1. Haz clic donde quieras comenzar la línea. (Puedes comenzar una línea en cualquiera
de los extremos; no es necesario trabajar de izquierda a derecha, ni de arriba hacia
abajo). Esto crea un control deslizante. Este se ve como un cuadrado rojo para
señalar que está seleccionado.
2. De ser necesario, selecciona el botón CONVERTIR EN LÍNEA de la barra de
información. (Shortcut L). Esto te garantiza que el próximo clic dibujará un segmento
de línea recto.
Haz clic donde quieras colocar el próximo control deslizante o haz clic y arrastra y después
suelta el botón del ratón cuando la línea sea correcta. Esto crea un segmento de línea y
selecciona el nuevo control deslizante del extremo.
Para crear un objeto que sea una mezcla de segmentos rectos y curvos, cambia entre los
botones CONVERTIR EN CURVA y CONVERTIR EN LÍNEA mientras creas el objeto. (O pulsa L o
C de tu teclado).
Extender la línea.
Finalizar la línea
×+ clic completa la línea (manténla seleccionada), o pulsa "Esc" para terminar la línea y
deselecciónala. El próximo clic creará una nueva línea.
• NUEVO :
clic para comenzar una nueva línea.
• AÑADIR :
clic para extender la línea.
• CAMBIAR : arrasta o elimina puntos de control.
1. Haz clic sobre la línea para añadir un nuevo punto de control sobre la línea.
2. Arrastra el punto de control a la posición deseada.
Es posible que quieras seleccionar varios puntos de control para, por ejemplo, eliminarlos
o moverlos como un grupo o cambiar una región de puntos a líneas curvas o rectas. Para
esto:
Eliminar puntos
O para mover un solo control deslizante, introduce los valores nuevos en los campos de
texto de la barra de información (ver más abajo).
Los campos X/Y de al lado indican las coordenadas de los controles deslizantes de curva
a cada lado del punto seleccionado.
Por defecto, las coordenadas X/Y se miden a partir de la esquina inferior izquierda de la
página. Puedes cambiar esto en la pestaña "Cuadrícula y regla (en la página 334)" en el
diálogo de opciones.
La herramienta de edición de formas 123
Si el punto seleccionado se encuentra al final de una sección de línea curva, los campos
izquierdos muestran la longitud y el ángulo de la línea. Puedes ajustar estos valores
introduciendo uno nuevo y pulsando Intro.
Las formas importadas de un examinador pueden contener puntos innecesarios sobre las
líneas. Las líneas con demasiados puntos pueden ser poco manejables y reducir la
velocidad de renderización. MAGIX Web Designer 6 puede suavizar la línea para eliminar
puntos innecesarios.
Selecciona todos los puntos de la parte de la línea que quieres suavizar. (Lee más arriba).
Es probable que la forma más sencilla de seleccionar una gran cantidad de puntos sea la
selección con arrastre sobre la región en la HERRAMIENTA DE EDICIÓN DE FORMAS .
Los puntos eliminados se recuerdan para que puedas realizar otros cambios al suavizado
de la línea con solo ajustar la barra deslizante. Los puntos eliminados se eliminan cuando
realizas otra edición a la línea como, por ejemplo, arrastrar un control deslizante.
124 La herramienta de edición de formas
Restringir la línea
Cambiar curvas
Nota la diferencia entre arrastrar una línea para cambiar su forma y hacer clic en la línea
para añadir un nuevo punto de control. Arrastrar un segmento de línea recto lo cambia a
un segmento de línea curvo.
La herramienta de edición de formas 125
Crear uniones en punta
Generalmente, MAGIX Web Designer 6 dibuja una curva suave a través de un punto de
control. Para esto, los dos controles de curva a cada lado del punto de control están
unidos. Si se mueve un control de curva, también se moverá el otro.
Muchas veces quieres crear una unión en punta. Para esto, necesitas desvincular los
controles de curva:
Los dos controles de curva se han vinculado y se mueven a lados opuestos del punto de
control. Esto puede cambiar la forma de la curva.
1. Selecciona los puntos de control de los dos finales del segmento de línea.
2. Haz clic en CONVERTIR EN LÍNEA o CONVERTIR EN CURVA en la barra de información o
pulsa L o C en tu teclado.
126 La herramienta de edición de formas
Después de cambiar el tipo de línea, es posible que quieras mover los controles de curva
para una transición más suave entre los segmentos de línea curvos y rectos.
Unir líneas
Para unir líneas ambas tienen que estar seleccionadas (los deslizantes de punto se
muestran en ambas líneas):
Con la herramienta de SELECCIÓN, mantén presionado "×" y haz clic en las línea para
seleccionarlas (si ya te encuentras en la herramienta de EDICIÓN DE FORMAS , pulsa "Alt +
S" si quieres ir a la herramienta de SELECCIÓN , para seleccionar la segunda línea, presiona
"×+ clic", y luego "Alt + S" para volver a la herramienta de EDICIÓN DE FORMAS .
Si los extremos de ambas líneas ya se encuentran uno muy cerca del otro, pero no están
unidos, puedes ampliar el tamaño con el zoom, o alejar el punto de fin y después volverlo a
arrastrar para llevarlo hasta el punto de fin y ver el "+" que indica que las líneas se unirán.
Para crear una forma con relleno, arrastra los otros dos controles deslizantes de fin para
que se unan. Puesto que unes los controles deslizantes de fin, sólo puedes unir líneas y no
La herramienta de edición de formas 127
formas. Las formas son objetos cerrados y, por lo tanto, no tienen controles deslizantes de
fin.
Si quieres separar una línea o una forma: selecciona un punto de control existente de la
línea o contorno de la forma, o crea uno nuevo donde quieres separar la línea (clic sobre la
línea en la herramienta de EDICIÓN DE FORMAS; ver arriba).
Si separas una línea, el cambio no será visible. Sin embargo, si mueves un punto de
control, solo se moverá una parte de la línea. Si separas una forma, se convertirá en una
línea. El relleno desaparecerá.
Nota: cortar formas (parte de Arreglo > Combinar formas) te permite separar formas en
dos formas individuales. Esta función se describe en el capítulo Trabajar con formas (en la
página 130).
Una forma es un objeto cerrado sin controles de inicio ni fin. Sólo las formas pueden tener
un relleno de color.
O:
128 La herramienta de edición de formas
1. Crea un objeto abierto con todos los controles
deslizantes en sus posiciones correctas. No dibujes
el segmento de línea final.
2. Mueve el cursor sobre el punto de inicio. Aparecerá
un + a la derecha del cursor cuando se encuentre
sobre el control deslizante de inicio.
3. Haz clic para crear el segmento final de la línea y
cerrar la forma.
O:
Cualquiera de estas opciones cerrará la forma. Si hay un color de relleno actual, la forma
se llenará con ese color.
Manejo de formas 129
Manejo de formas
Combinar formas
La opción del menú ARREGLO > COMBINAR FORMAS te ofrece una amplia gama de
opciones avanzadas para combinar formas con el objetivo de crear nuevas formas como,
añadir, separar o cortar. Puedes utilizar la combinación de formas en cualquier tipo de
objeto, incluido los mapas de bits.
La nueva forma tomará los atributos y colores de la forma de arriba (en este caso el
rectángulo de la ilustración.)
130 Manejo de formas
Intersección de formas
Con FORMAS DE INTERSECCIÓN , el nuevo objeto se crea de esas partes de las formas
inferiores que están cubiertas por el objeto de arriba.
Los atributos y colores de línea de las formas subyacentes no se modificarán. Las áreas no
cubiertas por la forma de arriba se eliminarán. La forma de arriba puede ser un grupo para
una sustracción para completa. (Los grupos se describen en el capítulo Manejo de objetos
(en la página 107)).
Cortar formas
MAGIX Web Designer 6 te permite cortar formas en dos o más partes. Puedes usar un
objeto sólido o una línea. Por ejemplo, para cortar un segmento de un círculo:
Para cambiar el ancho de la línea o del contorno de una forma, primero selecciona el
objeto o los objetos:
Puedes introducir el valor del ancho en cualquier unidad y MAGIX Web Designer 6 lo
convertirá al número correcto de puntos. Por ejemplo, puedes introducir 0,5cm y
obtendrás una línea con un grosor de medio centímetro, pero el campo del ancho de línea
indicará un valor cercano a 14pt.
Si no has seleccionado ningún objeto y cambias el valor del grosor de la línea, esto
cambiará el ancho por defecto para todas las nuevas líneas.
Galería de líneas
La GALERÍA DE LÍNEAS puede utilizarse para aplicar una gama de estilos o atributos de línea
como, plantillas con guiones, puntas de flecha y más.
Ancho de línea
Tipo de unión
Extremo de línea
Ancho de línea
El campo de texto que se encuentra arriba de la galería es una copia del campo de texto
de la barra de control ESTÁNDAR .
Modelo de guión
Esta sección ofrece una selección de estilos de línea con guiones.
Puntas de flecha
La forma más sencilla de aplicar una punta de flecha es arrastrar y soltar la punta de flecha
desde la galería hasta el extremo apropiado de la línea.
Si la línea no tiene puntas de flecha y pulsas el botón APLICAR o haces doble clic sobre un
estilo para aplicarlo, la punta de flecha se colocará al final de la línea.
El tamaño de la punta de flecha depende del ancho de la línea. Las líneas más anchas
tendrán puntas de flecha proporcionalmente más grandes.
Si pulsas "Ctrl" y haces doble clic sobre una punta de flecha o estilo de final se aplicará en
el otro extremo de la línea.
Crear un cuadrado
Para crear un cuadrado en vez de un rectángulo, pulsa Ctrl mientras arrastras.
Radio
Diámetro
Creación con límites
Con el botón de CREACIÓN CON LÍMITES seleccionado, arrastra el ratón a través del lienzo y
se creará una elipse. Para crear un círculo en vez de una elipse, pulsa "Ctrl" mientras
arrastras.
Selecciona la opción RADIO para dibujar círculos. El lugar en dónde empieces a arrastrar
será el centro del círculo.
Puedes convertir una elipse en un círculo en cualquier momento haciendo doble clic sobre
un control deslizante.
136 Trabajar con colores
La línea de color
La línea de color se muestra en la parte inferior de la ventana. Te permite ver los colores de
relleno y línea, te da acceso al editor de colores y te provee la paleta de colores
predefinidos incluyendo la opción "sin color".
MAGIX Web Designer 6 te suministra varias opciones para el tamaño visualizado del color
de línea (descrito en Personalización de Web Designer)
Trabajar con colores 137
Colores de la línea de colores
Colores con nombre (originales): primero se encuentran los colores con nombre (si se
encuentran presentes en el documento, ver más abajo). Los colores con nombre se
utilizan para asignar colores originales a las plantillas y diseños, para que el esquema
de color de un diseño pueda cambiarse sin tener que editar cada objeto de forma
individual.
Colores vinculados: son aquellos colores que están relacionados con una sombra o
un matiz y se muestran de forma diferente en la línea de color (pequeños rectángulos
redondeados), de modo que resulta mucho más fácil distinguir los colores con
nombres independientes de aquellos que están vinculados a un color principal. Leer
el capítulo Creación de un tinte, una tonalidad o un color vinculado (en la página
145).
Colores de paleta: hay una paleta "estándar" de 46 colores predefinidos. Hay 5
sombras de 7 colores estándar y 10 sombras de grises, negros y blancos. Los
colores de la paleta estándar no se pueden editar (es decir, no son colores con
nombre) y tienen una selección simple y limitada de colores que se utilizan para
aplicarlos a objetos (ya sea arrastrando hasta el objeto o mediante clic).
Los marcadores pequeños en los iconos de color muestran cuál de los colores con
nombre (si hay alguno) o colores de paleta se han aplicados al objeto seleccionado.
Los marcadores en forma de rombo muestran los colores usados por los
objetos seleccionados. Un rombo en la esquina superior izquierda indica el
color de relleno, en la esquina superior derecha indica el color de línea.
Los marcadores en forma de cruz muestran los atributos de color activo, si no
hay ningún objeto seleccionado. El color de línea a la derecha, el color de
relleno a la izquierda.
Los marcadores triangulares muestran los colores de un relleno si has aplicado
alguno.
Esto funciona también escogiendo un color con el selector de color de un objeto existente,
consulta Usar la pipeta para escoger colores (en la página 141). Los marcadores de línea
de colores se actualizan inmediatamente e indican el color del objeto bajo la pipeta al
arrastrarlo alrededor.
Con un clic derecho sobre la opción "sin color", las opciones de color de relleno y línea se
reemplazarán por ELIMINAR COLOR DE RELLENO / ELIMINAR COLOR DE LÍNEA . Esto configura
los atributos del objeto seleccionado a "sin color".
Al arrastrar colores, un indicador al lado del cursor te dirá cuál será el efecto al soltar el
color:
Establecer un color de relleno liso (cuando se arrastra sobre un objeto) o los colores
intermedios de un relleno multicolor (en la página 186).
Establecer color de inicio de relleno con gradación (cuando se arrastra sobre el inicio
de un relleno).
Establecer color de fin de relleno con gradación (cuando se arrastra sobre el fin de
un relleno).
Trabajar con colores 139
Establecer color de fondo de página (cuando se arrastra un color hasta la página).
En vez de arrastrar y soltar, si has seleccionado un objeto, puedes hacer un simple clic
sobre la línea de color. Se abrirá un menú contextual de la línea de color en dónde puedes
definir el color de línea y de relleno.
En los otros casos, puedes modificar el color de la línea con "Shift" + clic sobre la línea de
color.
Si has seleccionado una foto o una forma con relleno de mapa de bits, un clic sobre el
color de línea aplicará un color continuo al mapa de bits. Esto significa, que el mapa de
bits se convertirá a una escala de grises (blanco y negro) y el color seleccionado se usará
como un color claro de tono continuo. En general, el color continuo negro es negro.
Puedes configurar ambos colores continuos a través del menú contextual de la línea de
colores (lee más arriba). Lee Coloreado de mapa de bits (en la página 183) para más
información.
Esto muestra el EDITOR DE COLOR que te permite seleccionar cualquier color del espectro.
A diferencia de la mayoría de los programas gráficos, el Editor de color puede permanecer
en pantalla mientras continúas trabajando. Cambia para reflejar el color de los objetos
seleccionados, lo que te permite ajustar el color rápidamente.
140 Trabajar con colores
El editor de color
El editor de color se utiliza para cambiar el color de los objetos del documento.
Cuando edites el color puedes arrastrar la pipeta para escoger colores de la pantalla,
incluso de otras ventanas abiertas
Selecciona el color a editar: Color de relleno/color de línea del objeto seleccionado o
cualquier color con nombre (original)
Haz clic en la etiqueta para crear un color con nombre
Haz clic para mostrar los controles de color ampliados
Color anterior
Color actual
Arrastra hacia aquí para seleccionar cualquier tonalidad del tono seleccionado
Arrastra hacia aquí para seleccionar cualquier tono
La forma más fácil de crear un nuevo color es seleccionar un tinte de la línea de color
inferior. Todos los matices de este tinte se verán en la sección superior, por lo que podrás
hacer clic o arrastrar desde la sección superior para seleccionar el nuevo color. Verás que
los objetos seleccionados cambian de color a medida que los ajustas en el editor de color
("Vista previa en vivo").
Por ejemplo, para seleccionar un color rosa, que es un matiz pálido del rojo, selecciona el
color rojo en la sección inferior y después escoge un rojo muy pálido (rosa) en el área
superior derecha de la sección superior.
Para ello haz clic y arrastra la pipeta. A medida que arrastras verás que el Editor de Color
toma el color que se encuentra debajo de la pipeta. Suelta el botón del ratón cuando
tengas el color deseado. Esta es una forma fácil y rápida de utilizar el mismo color o copiar
colores de un objeto a otro.
El selector de color no escoge por sí solo el color de pantalla (RGB). En cambio, si señalas
una forma con un color de relleno sólido, el selector tomará una muestra del color actual
de esa forma, incluyendo el modelo de color (RGB, HSV o CMYK), de forma tal que el
color es copiado de manera exacta en el objeto(s) seleccionado. Si el color elegido es un
color con nombre o de paleta, en vez de copiar simplemente el color, el selector de color
aplicará el mismo color al objeto(s) seleccionado.
Si el objeto bajo el cursor del ratón es complejo (p.ej. tiene transparencia aplicada) y el
color no puede ser determinado, el color RGB de pantalla es aplicado.
Sin embargo, si quieres usar muy seguido el mismo color, se recomienda que en su lugar
uses un color con nombre.
Aquí también están disponibles los botones de "Sin color de relleno" y de "Ayuda".
• Los COLORES LOCALES se utilizan en un sólo lugar del documento. Cada objeto tiene un
color por separado y nada se comparte. Esto es útil cuando quieres cambiar el color de
un objeto sin afectar otros objetos. Los colores locales son el método más sencillo para
documentos simples que utilizan relativamente pocos colores. "Aplicar color" y "Editar el
color de un objeto" explicados anteriormente se refieren al trabajo con colores locales.
• Los COLORES ORIGINALES (O COLORES CON NOMBRE) pueden utilizarse una y otra vez
en el documento. (Son el equivalente a los estilos de un procesador de textos.) Los
colores originales se utilizan en las plantillas y brindan un aspecto consistente a los
elementos de la página como los botones o las barras de navegación. Cualquier edición
que se realice a un color con nombre se reflejará en todos los objetos o partes del
dibujo que usen ese color. También puedes copiar colores originales entre documentos.
Si el diseño ya tiene colores originales y cargas o pegas plantillas de la galería de
diseños que contengan colores originales con el mismo nombre, el programa te
preguntará si quieres que el color original importado sea igual que los ya existentes. Se
le adjudican nombres consistentes a los colores originales de las plantillas para que
coincidan con los diferentes colores originales de los elementos que importes.
Uno de los esquemas de colores suministrados con cada tema concuerda con los colores
por defecto utilizados por ese tema. Esto te permite regresar fácilmente a los colores
originales, si lo prefieres, después de experimentar con esquemas alternativos.
Por supuesto, no es necesario que utilices los esquemas de colores incluidos para
cambiar los colores de tu sitio web. Puedes personalizar los colores del tema y elegir la
combinación de colores que te guste. Consulta "Edición de colores con nombre (en la
página 144)".
Es muy fácil crear tus archivos de esquemas de colores, que puedes compartir con los
usuarios de Web Designer para que ellos los utilicen en las páginas web creadas con el
mismo tema.
1. Carga una de las plantillas de página para el tema. Escoge una que muestre todos
los colores del tema de forma más efectiva. De ser necesario, puedes agregar más
elementos a la página para incluir toda la gama de colores temáticos.
2. Edita los colores con nombre del tema uno por vez, tal como se describe a
continuación en la sección "Edición de colores con nombre" (en la página 144).
3. Una vez que estés satisfecho con tu nuevo esquema de colores, utiliza ARCHIVO >
GUARDAR COMO para guardarlo. El nombre de archivo que escojas DEBE incluir
"ThemeColorScheme" como parte del nombre del archivo. Esta es la forma en que
Web Designer reconoce los archivos de esquema de colores, es decir, al buscar esa
secuencia en el nombre del archivo. También es una buena idea incluir el nombre del
tema relacionado con el esquema. Por ejemplo, si es un esquema de colores azules
para el tema "Beta", podrías llamarlo "BetaThemeColorSchemeAzul.web".
Si quieres usar el mismo color en diferentes partes del dibujo, y si existe la probabilidad de
que quieras cambiarle el color en el futuro, se recomienda que crees un COLOR CON
NOMBRE . Esto es fácil en MAGIX Web Designer 6:
Selecciona el objeto que tiene el color que quieres usar y luego haz clic en NUEVO COLOR
CON NOMBRE en el EDITOR DE COLOR .
144 Trabajar con colores
Haz clic para crear un nuevo color con nombre Asígnale al color un nombre
adecuado, como "color del coche"
y haz clic en crear. Verás el color
nuevo añadido en la LÍNEA DE
COLOR .
Para poder ver el color con nombre en el EDITOR DE COLOR,y así poder editarlo, selecciona
el EDITOR DE COLOR o arrastra y suelta el color de la línea de colores al EDITOR DE COLOR.
Ahora podrás editar el color como lo desees. Todos los objetos que utilizan ese color se
actualizarán automáticamente para mostrar el nuevo color.
Para cambiar el nombre de un COLOR CON NOMBRE , haz clic derecho sobre el EDITOR DE
COLOR y selecciona RENOMBRAR o haz clic derecho sobre el color en la línea de colores y
selecciona RENOMBRAR .
Para eliminar un color con nombre, haz clic derecho sobre el color en la línea de color y
selecciona ELIMINAR .
Colores normales
Estos son los colores individuales que aplicas a los objetos.
MAGIX Web Designer 6 también puede vincular un color a otro color, es decir, cuando
cambia el color principal, el color vinculado también cambiará. Hay tres formas de vincular
un color a su: TINTE , TONALIDAD y COLORES VINCULADOS . Esta es una técnica muy útil que
te permite, por ejemplo, volver a cambiar el color un dibujo con tonalidades complejas con
un sólo clic. Algunos de los cliparts modelo utilizan esta técnica.
Trabajar con colores 145
Tintes
Los tintes están vinculados a otros colores (llamados colores principales) y son siempre
una versión más pálida que el principal. Tienen dos usos principales:
• Cuando quieres crear tonalidades más pálidas de un color principal y es posible que
quieras cambiar el color principal en el futuro y que los tintes se actualicen
automáticamente.
• Para extender el rango de colores disponibles de las tintas de impresión.
Por ejemplo, un tinte 25% rojo resulta en un color rosa. Por lo tanto, utilizando tinta roja
puedes obtener tanto un rojo puro como un rosa. De la misma forma, si estás utilizando
solamente tinta negra y blanca, podrás crear varias tonalidades de gris.
Si estás imprimiendo con una gama limitada de colores (generalmente es más
económico imprimir a uno o dos colores en vez de a todo color).
Un tinte puede estar basado en cualquier tipo de color, incluyendo otro tinte.
Cualquier cambio que se realice al color principal, también cambiará a los tintes basados
en él. Por ejemplo, es posible que definas un color rosa como 50% del color principal rojo.
Si cambias el color principal a naranja, el tinte cambiará de rosa a naranja claro.
Tonalidades
Esto permite crear colores más claros y más oscuros basados en un color principal. Si se
cambia el color principal, se modificarán también las tonalidades asociadas. Por ejemplo,
un dibujo de un coche puede utilizar tonalidades para las regiones con más luz y
tonalidades de la carrocería. Una simple edición al color principal cambiará todos los
colores, pero las tonalidades se mantendrán iguales. Por lo tanto, configurar tonalidades
es una forma muy útil de modificar colores.
Para obtener mejores resultados, el color principal debe ser un color saturado "puro". Si se
utiliza el modelo de color HSV, la saturación y el valor deberían ser 100%. Al verlo en el
EDITOR DE COLOR , la cruz debería encontrarse en la esquina superior izquierda.
Colores vinculados
Los colores vinculados son similares a las tonalidades, pero permiten más flexibilidad.
También están basados en color principal pero puedes definir los atributos que quieres
que compartan el color vinculado y el principal. Por ejemplo, puedes crear un color
vinculado que sea una versión más o menos saturada del principal, pero que el tinte y la
tonalidad sean las del principal.
Ve arriba para leer la sección sobre TINTES , TONALIDADES y COLORES VINCULADOS . Te será
útil para cuando quieras encontrar el color principal de una tonalidad más clara u oscura.
Los TINTES , las TONALIDADES y los COLORES VINCULADOS deben tener un color "original"
con un nombre de color asignado, para que cuando cambies el color original también
146 Trabajar con colores
cambie su tonalidad. Por ello, de ser necesario, primero asígnale un nombre al color (ver
Creación de nuevos colores con nombre (en la página 143)).
A la izquierda verás que el nuevo color tiene un poco de tinte del color original "amarillo", por ello
el editor sólo suministra tintes más claros del color original. A la derecha si seleccionas la opción
tonalidad podrás elegir cualquier tonalidad más clara o más oscura del color original.
Si quieres utilizar este color en muchas partes del documento se recomienda que le
asignes al color un nombre para que aparezca en la línea de colores y así puedas
encontrarlo más fácilmente cuando lo necesites. Haz clic sobre el ícono con forma de
Trabajar con colores 147
etiqueta para crear un nuevo nombre para un color. Ahora aparecerá en la línea de color
para que lo puedas escoger y colocar sobre otros objetos.
NOTA: ten cuidado de no editar el color de los objetos sobre la página a la que has
aplicado colores con NOMBRE, TINTES , TONALIDADES o COLORES VINCULADOS porque se
convertirán en COLORES LOCALES .
148 Trabajar con textos
Introducción
Las opciones de edición de texto de MAGIX Web Designer 6 son similares a los editores
de texto o procesadores de texto, pero además suministra una amplia gama de
características que no encontrarás en esos programas.
Terminología
La herramienta de texto
Fuente
Tamaño de fuente
Negrita
Cursiva
Subrayado
Justificado
150 Trabajar con textos
Superíndice/Subíndice
Espaciado de línea
Espaciado de párrafos
Lista con viñetas
Lista numerada
Colocar sangría
Quitar sangría
Corrector de ortografía
MAGIX Web Designer 6 es compatible con tres tipos básicos de objetos de texto
El menú de fuentes
El menú de fuente muestra todas las fuentes instaladas, y está dividido en dos secciones.
La sección superior muestra aquellas fuentes que son usadas actualmente en el
documento. La segunda sección contiene las fuentes compatibles con la web. Estas
fuentes son las más seguras para las páginas web porque son las que utilizan la mayoría y,
por ende, serán compatibles con la mayoría de los navegadores web. Lee el apartado
"Fuentes compatibles con la web". La sección final muestra una lista alfabética de todas
las fuentes. Cada nombre de fuente es mostrado en el menú usando su propio tipo de
fuente, haciendo la selección de fuente más sencilla.
Las fuentes para las que están disponibles múltiples estilos de fuente se muestran con
pequeños triángulos negros a la derecha del menú. Mantén simplemente el curso del ratón
sobre algún nombre de fuente durante un segundo o dos y un pequeño submenú
aparecerá a la derecha del menú principal, mostrando los estilos disponibles para esa
fuente. Puedes mover el cursor del ratón sobre el submenú que aparece, para seleccionar
el estilo de fuente deseado.
152 Trabajar con textos
Fuentes compatibles con la web
Sólo se puede utilizar de forma segura un pequeño grupo de fuentes para el texto principal
de la página web. Sólo aquellas fuentes que existan en el ordenador de la persona que va
a visitar tu página web. Aunque no haya 100% de garantía, si existe una serie de fuentes
que son frecuentemente utilizadas por el 98% de los ordenadores, incluyendo Apple Mac y
algunos ordenadores Linux. Estas fuentes se llaman "fuentes compatibles con la web" y
se encuentran en una lista de la sección del menú de fuentes. Si exportas una página
web con fuentes no compatibles, se abrirá una aviso de advertencia.
Si pulsas la tecla "Shift" mientras navegas por el menú de fuentes, habrá una pequeña
pausa antes de que se vea la fuente seleccionada. Esta opción es práctica porque la vista
previa instantánea ralentiza la navegación a través del menú; y si tienes varias fuentes
seleccionadas este proceso será aún más lento.
Como con las barras emergentes deslizantes anteriores existen dos forma de uso. Con
"clic + soltar" sobre la flecha aparecerá la barra y se quedará en pantalla. Ahora podrás
arrastrar la barra deslizante, o usar la rueda del ratón sobre el control para ajustar
rápidamente los valores. Este caso, podrás ajustar el tamaño de punto usando la rueda del
ratón para ver los resultados directamente en la página del documento mientras trabajas.
Otra forma de utilizar la barra deslizante emergente es "pulsar + arrastrar + soltar" sobre el
botón y la barra. Esto es un modo ligeramente más directo de ajustar el control (requiere
menos clics).
Texto simple
Si quieres escribir una pequeña cantidad de texto simple, coloca el cursor donde quieres
introducir el texto y haz clic. Aparecerá un cursor rojo y podrás comenzar a escribir con tu
teclado.
Al pulsar "Enter" se completa la línea e inicia una línea de texto debajo. El espaciado entre
líneas se controla en el campo de texto de espaciado en la barra de información.
Por defecto, el texto no tiene color de contorno. Con 'Shift + clic' sobre un color de la línea
de color le darás un color de contorno al texto seleccionado (el grosor puede ajustarse
como siempre a través del control de amplitud de línea). Probablemente querrás
establecer el tipo de unión de línea (en la página 133) para redondearla y darle un aspecto
más suave (control en la parte superior de la Galería de líneas).
Si estás introduciendo una gran cantidad de texto a lo largo de varias líneas, es posible
que una columna te resulte más útil. Cambiar el ancho de la columna adaptará
automáticamente el texto.
NOTA : si haces clic fuera o cambias la herramienta antes de comenzar a tipear, la columna
de texto se eliminará y no quedará nada en la página. Por lo tanto, debes comenzar a
tipear inmediatamente después de haber arrastrado la línea de ancho de la columna.
Si introduces Ctrl+- (tecla menos) se insertará un guión suave que aparecerá solamente si
la palabra puede terminarse al final de la línea. Esto es especialmente útil para columnas
de texto angostas: para evitar espacios en blanco es posible que necesites insertar
guiones a algunas palabras. Si insertas un guión normal, la palabra se separará al final de
la línea. Se llama guión "suave" porque cuando la palabra aparece en el medio de una
línea, el guión desaparece (a diferencia de un guión normal o el carácter menos), por lo
que el guión se introduce sólo si es necesario.
Al editar texto, el guión suave funciona como un carácter invisible (no ocupa espacio), pero
puede reconocerse en el texto moviendo las flechas izquierda/derecha sobre el lugar en
donde se encuentra el carácter.
Un guión rígido puede insertarse utilizando Ctrl+Shift+- (tecla menos). Un guión rígido no
causará ninguna separación. Esto es útil en situaciones en las que las palabras presentan
guiones pero no deben separarse al final de las líneas.
Para más información sobre ángulos restringidos, lee el capítulo Introducción a MAGIX
Web Designer 6.
Áreas de texto
Un área de texto puede contener una historia de texto "fluido". En este caso una sola pieza
de texto fluye de un área de texto a otra. Esto se llama texto fluido, como el agua, porque
al añadir o eliminar texto en un área, desbordará a o desde las áreas de texto conectadas.
Trabajar con textos 155
Si el texto sobrepasa el final del área de texto se verá de color gris, a pesar de que podrás
continuar editando el texto de forma normal.
Al arrastrar el indicador de un área de texto a otra, se conectarán ambas áreas de forma que el
texto fluya de una a otra. Puedes vincular tantas áreas de texto como sean necesarias.
Consejo: existe una forma rápida de crear texto fluido. Si el cursor de texto se encuentra
en un área con texto en exceso, haz clic y arrastra sobre la página para crear una nueva
área de texto. La nueva área de texto se conectará automáticamente y el texto fluirá hasta
la nueva área.
Consejo: puedes hacer fluir un texto desde un área a otra en cualquier página, incluso en
páginas anteriores. Si necesitas que el texto fluya a un área que se encuentra varias
páginas adelante, probablemente sea más fácil utilizar el método anterior, aunque si
reduces la imagen a un tamaño de texto pequeño podrás arrastrar la flecha por las
páginas.
Para desconectar un área de texto de otra, arrastra el indicador y suéltalo lejos de las
áreas de texto.
Si eliminas un área de texto que está conectada con otra, sólo se eliminará el área. El texto
volverá a fluir a las áreas de texto restantes.
Como alternativa, puedes utilizar la herramienta de SELECCIÓN para cambiar el tamaño del
objeto de texto, pero en este caso cambiará el comportamiento. Si cambias el tamaño de
un objeto de texto usando la herramienta de selección, cambiará el tamaño del propio
texto. Esto coincide con la operación normal de la herramienta de SELECCIÓN .
156 Trabajar con textos
Sin embargo, en el caso de áreas de texto fluido, esto causaría efectos secundarios no
deseados, y seguramente no quieres que una parte de una historia de texto tenga un
tamaño diferente al resto. Por lo tanto, la herramienta de SELECCIÓN varía dependiendo de
si cambias el tamaño de un área de texto que contiene una historia de texto fluido o si
cambias toda la historia de texto. La regla es:
• Si cambias el tamaño de un área de texto sin conexión (o texto simple o una columna
de texto), entonces tanto el área "contenedora" como el contenido del texto cambian de
tamaño.
• Si seleccionas las áreas de texto de toda la historia de texto fluido (deben encontrarse
en una misma página), entonces el texto y las áreas también cambiarán
simultáneamente.
• Sin embargo, si cambias el tamaño de un área de texto que es parte de una serie de
áreas de texto fluidas, entonces sólo cambiará el tamaño del área de texto y el texto
conservará tu tamaño original y se cambiará su formato para adaptarse al nuevo
tamaño. Esto es igual que cambiar el tamaño de área con la herramienta de TEXTO .
Si quieres cambiar el tamaño de todo el texto en una historia de texto, selecciónalo con
"Ctrl+A" y aplica el tamaño de fuente deseado.
Cantidad de palabras
La cantidad total de palabras y caracteres del texto actual se indica en la barra de estado.
Esto también muestra la cantidad de palabras excedidas. Si está seleccionada cualquier
región de texto, se mostrará la cuenta de la selección.
Trabajar con textos 157
Como alternativa, selecciona una curva o línea y después, en la herramienta de TEXTO, haz
clic sobre la línea donde quieres que el texto comience y escribe. Esto adaptará
automáticamente el texto a lo largo de la línea. Cuando alcances el final de la línea, el texto
continuará en una nueva línea inmediatamente por debajo de la anterior.
Si no quieres que el texto siga en otra línea, pulsa "Shift y clic" sobre la línea.
La aplicación de color está descrita en Trabajar con colores (en la página 135).
Editar texto
Selección de texto:
Si has seleccionado texto, cualquier cambio que realices se aplicará solamente a la región
de texto seleccionada. Si sólo se encuentra el cursor en el texto, entonces cualquier
atributo, por ejemplo, otro color, aparecerá solamente cuando introduzcas texto nuevo.
Por ejemplo, para cambiar el tamaño de la fuente de todo el objeto de texto, pulsa ESC y
selecciona un nuevo tamaño de la barra de información.
Todos estos shortcuts (con la excepción del espacio rígido) son compatibles con Microsoft
Word.
Nota histórica. este mismo texto ha sido utilizado como texto de ejemplo por más de 500
años en la industria de la imprenta, e incluso partes de las frases en latín se han escrito
hace más de 2000 años.
Para insertar un párrafo del texto "Lorem ipsum" tienes que pulsar las teclas Ctrl + Shift + L
("L" para Lorem) utilizando la herramienta de texto. Para insertar un bloque de texto más
largo presiona esta combinación de teclas un par de veces.
160 Trabajar con textos
Corrector de ortografía
Selección de idioma
Haciendo clic en el icono del corrector de ortografía aparece un menú con todos los
idiomas para los cuales hay diccionarios instalados. Por defecto, el idioma seleccionado
corresponderá a la configuración local. Puedes elegir diferentes idiomas para diferentes
objetos de texto de modo que en tu documento puedes utilizar texto en múltiples idiomas
si fuera necesario.
Para cambiar el idioma asociado con el objeto de texto, selecciona el objeto de texto y a
continuación selecciona el idioma requerido en el menú del corrector de ortografía de la
herramienta de texto. Ahora, el objeto de texto será revisado con el diccionario de la
lengua que elegiste.
Diccionario de usuario
Las palabras que utilices regularmente y que no se encuentren en el diccionario
suministrado por MAGIX Web Designer 6 pueden añadirse a tu propio diccionario
Trabajar con textos 161
personal. Haz clic con el botón derecho del ratón y selecciona "Añadir a diccionario de
usuario". Ahora la palabra ya no será detectada como incorrecta. El diccionario de usuario
se aplicará a todos los documentos que utilices en tu ordenador y se aplicará para todos
los idiomas.
En algunos diseños puede que necesites que múltiples objetos de texto muestren siempre
el mismo texto, pero con estilos diferentes. Ejemplos de ello serían la animación de texto
en un documento de animación o botones mouseover que se resaltan cuando el cursor
del ratón se mueve por encima de ellos en un navegador web. Por lo general, cuando
quieres cambiar el texto mostrado en estos objetos, debes editar cada uno de forma
individual.
Para deshacer un grupo suave, selecciona Arreglo > Eliminar grupo suave (o pulsa
Ctrl+Alt+U). Lee la sección de grupos suaves del capítulo Manipulación de objetos (en la
página 108) para obtener más información sobre grupos suaves.
Reglas
Para ajustar las tabulaciones, márgenes y sangrías, necesitas activas las reglas del
documento.
Para esto:
Las características de texto avanzadas sólo aparecerán en la regla cuando estés utilizando
la herramienta de TEXTO y cuando el cursor de texto se encuentre dentro de la historia de
texto o cuando el objeto de texto esté seleccionado en la herramienta de TEXTO .
162 Trabajar con textos
Al arrastrar los márgenes o tabulaciones en la regla de la herramienta de texto, verás una
guía vertical temporal que te facilitará alinear las tabulaciones o márgenes a otros objetos
de la página.
Márgenes y sangrías
Cualquier cambio que realices se aplicará al párrafo de texto actual, es decir, el párrafo en
el que se encuentra el cursor de texto. Por el contrario, si has seleccionado una región de
texto, el cambio se aplicará a los párrafos de la región seleccionada.
Puedes aplicar cambios a todo el texto de una historia de texto, si seleccionas todo el
texto dentro de la historia (Ctrl+A). Para cambiar más de una historia de texto, selecciona
los objetos de texto en la herramienta de SELECCIÓN, después cambia a la herramienta de
TEXTO y realiza los cambios correspondientes.
Margen izquierdo . Arrastra esto para cambiar el margen izquierdo del texto.
Si has hecho clic sobre la línea o has adaptado una columna de texto a una curva o línea,
entonces verás indicadores de margen izquierdo y derecho (pequeños cuadrados rojos)
que puedes arrastrar a lo largo de la línea para ajustar los márgenes utilizados para la
justificación.
Tabulaciones
Por defecto, las historias de texto se crean con tabulaciones de 0,5 cm. Esto significa que
puedes pulsar la tecla Tab y tu texto se moverá al próximo punto de tabulación. Sólo
necesitas definir una nueva posición de tabulación, si deseas utilizar otro espaciado.
Tabulaciones personalizadas
Para crear una posición de tabulación personalizada, haz clic sobre la regla en el lugar don
de quieres colocar la tabulación. Se sustituirán las tabulaciones por defecto hasta esa
posición de la regla.
Por ejemplo:
Para colocar más de una tabulación, haz clic varias veces sobre la regla.
Para eliminar una tabulación arrástrala fuera de la regla (las tabulaciones por defecto
retornarán).
Puede hacer que cualquier objeto en MAGIX Web Designer 6 sea rodeado por texto, de
modo que el texto fluya alrededor del objeto, en vez de aparecer encima. Esto facilita la
presentación de páginas que contienen pasajes largos de texto combinados con fotos y
gráficos. Una vez que has insertado los objetos, puede ajustar las posiciones de gráficos y
fotos y el texto se adaptará automáticamente y fluira alrededor de ellos.
Ten en cuenta que las líneas individuales de texto no responden al contonear objetos, sólo
lo hacen las áreas con texto y columnas de texto.
Gráficos anclados
Puedes posicionar cualquier gráfico o grupo para anclarlo a una posición en un texto, de
forma que al mover el texto, el objeto de gráfico se desplace para mantener la misma
posición relativa.
Éste es un ejemplo de una columna de texto con diversos elementos gráficos a la izquierda.
Cada uno de estos está anclado al inicio de una línea de texto inmediatamente a la derecha.
Trabajar con textos 167
Una vez que lo has anclado en una posición del texto, cuando muevas el texto hacia arriba
y hacia abajo (al eliminar o agregar texto arriba), este gráfico permanecerá vinculado a la
misma posición relativa y se moverá hacia arriba o hacia abajo con el punto de anclaje. Sin
embargo, ten en cuenta que el objeto anclado no se moverá fuera del área de la página
como resultado del movimiento del punto de anclado. El objeto anclado sólo se moverá
hasta el borde de la página.
Es posible anclar cualquier objeto o grupo de gráficos, incluyendo grupos con texto, como
el ejemplo del panel lateral, que se muestra a la izquierda.
También es posible anclar objetos para que aparezcan arriba o debajo del texto. El
ejemplo del gráfico de flor azul pálido, que se muestra a la izquierda, está anclado de esta
forma y fluirá junto con el texto.
Nota: No es posible anclar texto a objetos con alineación a objetos. Si intentas anclar un
objeto con Alineación de texto, la característica de alineación se desactivará.
Sin embargo, existen varias formas para mover el texto alrededor de gráficos anclados.
Si quieres incrustar un pequeño gráfico en una línea de texto, como un gráfico de un icono
como este ; dentro del texto, para que fluya con el texto, crea un pequeño espacio en el
texto y pega la imagen como un objeto anclado y posiciónalo sobre los espacios. Se
recomienda usar caracteres de espacio de no separación (Ctrl+barra espaciadora).
Utilizando el control de márgenes puedes definir que los gráficos se posicionen dentro del
ancho de columna, en el lado izquierdo o derecho, como en este ejemplo.
Para hacer esto, utiliza el control de márgenes en la regla para crear un margen derecho
para los parágrafos de texto para dar espacio para la imagen. Aquí puedes ver que el
indicador de margen derecho en la regla está a la izquierda en la imagen.
La foto está anclada justo el principio de la línea (de modo que sólo se mueve hacia arriba
y hacia abajo).
Trabajar con textos 169
Negrita y cursiva
Haz clic sobre el botón NEGRITA o CURSIVA de la barra de información ("Ctrl
+ B" or "Ctrl + I")
Subrayado de texto
Haz clic en el botón de subrayar en la barra de información para subrayar el
texto seleccionado.
El color de subrayado y el tamaño deriva automáticamente del color y tamaño del texto.
170 Trabajar con textos
Justificación o alineación de texto
La justificación siempre se aplica a toda la línea. Cualquier región seleccionada se ignorará.
Al usar texto simple la posición inicial de clic de la página se toma como origen de la
justificación de texto.
Para finalizar la lista con viñetas, pulsa Intro al final de la última viñeta y luego vuelve a
pulsar Intro en la nueva línea con viñeta. Esto elimina la última línea con viñeta y te permite
comenzar a introducir texto normal nuevamente.
Lista numerada
Puedes crear y editar listas numeradas de la misma forma que se ha descrito para
las listas con viñetas pero con el botón de listas numeradas.
Puedes escoger el esquema numerado que se utiliza para cada lista con el diálogo de
PROPIEDADES DE LISTA . Coloca el cursor de texto en uno de los puntos de la lista
numerada, haz clic derecho y escoge PROPIEDADES DE LISTA... del menú contextual.
superíndice
Texto normal subíndice
Espaciado de línea
El espaciado de línea te permite cambiar el espacio entre dos líneas
(afecta el espaciado vertical).
Espaciado de párrafos
Los dos últimos campos de la barra de información de la herramienta de
texto te permiten configurar el espacio antes y después de los párrafos.
Esto es particularmente útil cuando quieres configurar espacios de media línea entre los
párrafos.
Al igual que en Microsoft Word, cuando utilizas el espaciado arriba y abajo de los párrafos,
el espaciado es el valor mayor entre ambos (no se acumula). El espaciado arriba del
párrafo moverá el primer párrafo hacia abajo en un marco de texto.
Enlaces de texto
Puedes aplicar un enlace en cualquier parte de un objeto de texto de modo que cuando el
documento se exporte como HTML el texto aparezca en los navegadores web como un
enlace sobre el cual se puede hacer clic.
Utiliza la HERRAMIENTA DE TEXTO para seleccionar las palabras o los caracteres que
desees aplicar al enlace y luego haz clic en el botón de enlace en la barra de
herramientas de WEB .
Esto abre el diálogo de PROPIEDADES WEB con la pestaña ENLACE seleccionada. En esta
pestaña puedes elegir si quieres vincular un URL, otra página de tu sitio web o incluso una
capa popup.
Por defecto, cuando aplicas un enlace a una parte de texto, el texto aparece subrayado y
con el color de enlace de texto definido para el documento actual. Puedes cambiar el color
del enlace, estando los enlaces subrayados o no, en la pestaña PÁGINA WEB del diálogo de
PROPIEDADES WEB (menú HERRAMIENTAS->PROPIEDADES WEB ). Asimismo puedes fijar el
Trabajar con textos 173
color que aparece cuando el usuario mueve el cursor del ratón por encima de un enlace de
texto en un navegador web ("Colores MouseOver"), y el "Color visitado", el cual se usa
para visualizar que los usuarios ya han visitado dicho enlace con su navegador web.
Para fijar los tres colores globales de los enlaces de texto, o bien puedes seleccionar los
colores con nombre (original) ya existentes que utilizaste en tu página web usando las
listas desplegables, o bien puedes hacer clic en el botón EDITAR para abrir el EDITOR DE
COLOR mediante el cual puedes elegir el color que quieras.
Asimismo, si fuera necesario también puedes sobrescribir los colores globales de los
enlaces de texto para enlaces individuales. En la pestaña de enlaces del diálogo de las
propiedades web, deselecciona la opción "Utilizar los colores de enlace de página web
usuales". A continuación el enlace seleccionado adoptará el color de texto que fijaste en el
documento, en lugar del color global del enlace de texto.
Al exportar un documento como página web, todos los grupos serán exportados como
imágenes. Por este motivo, el texto que se encuentre dentro de grupos no estará presente
como texto en tu página web exportada y, por lo tanto, no podrá ser detectado por
buscadores ni seleccionado o copiado por los usuarios que visiten tu página web.
Esto suele ser apropiado para botones gráficos, títulos, logotipos, etc., ya que el texto
forma parte del gráfico. Sin embargo puede que tengas más piezas de texto importantes
dentro de grupos que desees mantener como texto en tu página web exportada. Para
hacer esto, sólo tienes que aplicar el nombre especial "Texto HTML" a tu objeto de texto.
La forma más fácil de hacer esto se explica a continuación:
Ahora, cuando exportes tu página web, tu texto permanecerá como texto y el resto del
grupo se convertirá en imagen. Todos los paneles de texto suministrados por la GALERÍA
DE DISEÑOS ya han aplicado este nombre a los objetos de texto dentro de los mismos, por
lo que el texto de los paneles se exportará como texto.
Los navegadores no pueden renderizar texto con rotación, por lo que no puedes utilizar
este nombre para forzar que el texto con rotación sea exportado como texto. En este
caso, el nombre se ignora.
174 Trabajar con textos
Es fácil copiar el estilo de cualquier texto a otra región de texto utilizando la opción PEGAR
ATRIBUTOS :
• Selecciona la región fuente cuyo estilo quieres copiar. Esto puede ser también una sola
palabra (sólo haz doble clic).
• Selecciona Edición > Copia (o Ctrl+C).
• Selecciona la región de texto a la que quieres aplicar el estilo.
• Selecciona Edición > Pegar atributos (Ctrl + Majús + A).
Si has seleccionado una región de texto, entonces PEGAR ATRIBUTOS insertará todos los
atributos visuales del texto fuente.
Con las áreas de texto este método sólo funciona si se han seleccionado todas las áreas
de texto. Puedes hacer esto en la herramienta de SELECCIÓN con un clic y ń+clic sobre las
diferentes áreas de texto para seleccionarlas. Pero este método sólo es posible si las áreas
de texto se encuentran en una sola página. Si tu historia de texto fluye por diferentes
páginas y quieres cambiar todo el texto, entonces será necesario Seleccionar todo (Ctrl+A)
y después aplicar los atributos deseados.
Puedes copiar texto con formato desde otras aplicaciones como editores o procesadores
de texto y copiarlo en MAGIX Web Designer 6 como texto y las fuentes, márgenes y
espaciado de líneas se conservarán. Esto facilita la posibilidad de conservar el estilo y
apariencia de tu texto.
Cuando pegas texto en formato Rich Text (RFT) desde otras aplicaciones se te da la
opción de pegar el texto como "texto sin formato" lo que significa que aparecerá en la
fuente y estilo del cursor donde pegas o como Rich Text lo que significa que se conservará
el estilo del texto fuente.
Esto también funciona al revés. Puedes copiar texto de Web Designer y pegarlo en otras
aplicaciones compatibles con Rich Text y el estilo (fuente, tamaño, colores, márgenes, etc.)
se conservará. Esto funciona solamente si copias de un objeto de texto simple o de un
único texto fluido.
Trabajar con textos 175
Algunas aplicaciones, como Microsoft Word, tienen una opción del menú que provee una
amplia gama de opciones de pegado. Estas aplicaciones te permiten muchas veces
escoger el formato del objeto pegado (texto o gráfico).
Encontrarás una lista completa de las fuentes utilizadas en "Archivo" > "Propiedades del
documento".
Todas las fuentes que no estén instaladas pero se estén utilizando en el documento,
estarán señaladas con "NO INSTALADA" .
Si quieres enviar el documento a otro usuario que no tiene instaladas las fuentes utilizadas
pero que tampoco tiene que editar el texto, entonces puedes convertir el texto en formas
editables (lee a continuación).
Incrustación de fuentes
MAGIX Web Designer 6 guarda las formas de caracteres de todas las fuentes usadas en tu
documento. Esto significa que si pasas tu archivo de diseño a otra persona o transfieres el
archivo a otro ordenador, el texto todavía tendrá exactamente la misma apariencia, incluso
si las fuentes correctas no están instaladas en dicho ordenador. Pero esto únicamente
incrusta los caracteres usados en el documento (no se incluye la fuente completa). Por lo
tanto, en los ordenadores que no disponen de las fuentes, el texto que se añada en las
fuentes no disponibles puede que no cuente con las formas de caracteres correctas.
La herramienta de relleno
1. Selecciona uno o varios objetos a los que quieres aplicar los rellenos.
2. Activa la herramienta de relleno (Shortcut F5)
3. Escoge el tipo de relleno deseado del menú.
4. Haz clic y arrastra el ratón sobre el objeto para crear el relleno.
También puedes arrastrar directamente los controles deslizantes de relleno para
adaptar el tamaño y la posición.
MAGIX Web Designer 6 muestra una vista previa interactiva y fluida durante el arrastre.
Esto tiene algunas ventajas con respecto a las herramientas tradicionales que trabajan a
través de diálogos. No sólo son necesarios pocos clics del ratón, sino que también se
aumenta la velocidad de trabajo y las opciones de posicionamiento de los puntos de inicio
y fin.
Al arrastrar, se creará una flecha con controles para la dirección del relleno. Los controles
deslizantes de relleno pueden seleccionarse y desplazarse para modificar la posición y el
ángulo del relleno.
Coloreado de rellenos
Selecciona uno de los controles deslizantes de relleno y haz clic sobre un color de la LÍNEA
DE COLOR o abre el editor de colores para definir un nuevo color. Para cambiar entre los
controles deslizantes de relleno, pulsa "Tab".
Modificar selección
En la herramienta de relleno, un objeto se selecciona con un clic y no es necesario cambiar
a la herramienta de selección para marcar otro objeto.
178 La herramienta de relleno
Tipos de relleno
Tipo de relleno
Segmentación de relleno
Efecto de relleno
Mapa de bits nombre
Control deslizante de relleno/Resolución
Color del control deslizante/Grano
SEGMENTACIÓN DEL RELLENO (FILL TILING) se utiliza para aplicar rellenos de mapas de bits
y rellenos fractales. Las opciones se describen más adelante en los rellenos de mapas de
bits. La segmentación de relleno cambia la repetición del efecto de relleno. Las opciones
son:
• Simple: el relleno se utiliza una sola vez, independientemente del tamaño del objeto. El
texto alrededor del "mosaico" simple es transparente.
• Repetir / Repetir mosaico (repeating/repeating tile): el efecto se repite hasta llenar todo
el objeto.
• Invertir mosaico repetido: sólo disponible en rellenos fractales y de mapas de bits. Esto
es similar al mosaico repetido, pero uno de cada dos mosaicos está invertido. Esto
ayuda a ocultar las junturas donde los mosaicos se juntan.
Una forma de elipse con un relleno elíptico repetido (repeating elliptical fill)
• TRANSICIÓN : crea una transición entre los dos colores de forma lineal
• ARCO IRIS :
realiza una transición siguiendo el borde más breve del modelo de color HSV.
Por ejemplo, una transición de amarillo a cian será amarillo-verde-cian.
180 La herramienta de relleno
Esta opción no tiene efecto alguno cuando los dos colores son negro, blanco y gris.
• ALT ARCO IRIS : similar a la opción arco iris salvo que la transición se realiza siguiente el
borde más extenso de la rueda de color. Por ejemplo, la transición de amarillo a cian
será amarillo-rojo-magenta-azul-cian.
RESOLUCIÓN (sólo rellenos de mapas de bits y fractales): muestra la resolución del mapa
de bits (siempre que no hayas seleccionado un control deslizante de relleno). Puedes
introducir una nueva resolución para cambiar el tamaño del mapa de bits. Las resoluciones
bajas muestran los píxeles individuales del mapa de bits. Muy pocas veces se necesita una
resolución mayor que 150 DPI, incluso para utilización de tipografía. 96 DPI es suficiente
para la resolución de pantalla.
Rellenos lisos
Rellenos lineales
1. Escoge "Relleno lineal" del menú. (No es necesario si el relleno contiene una relleno
de un color).
2. Coloca el cursor del ratón en el lugar donde debe comenzar el relleno. (Esto también
puede ser fuera del objeto).
3. Arrastra el cursor hasta la posición de fin del relleno. (También puede encontrarse
fuera del objeto).
La herramienta de relleno 181
La flecha que se dibujará sobre el objeto seleccionado, se denomina flecha de relleno. Esta
flecha muestra la dirección y el alcance de la gradación del relleno. Ambos extremos de la
flecha pueden marcarse con un clic.
• Arrastra el color desde la LÍNEA DE COLORES hasta un control deslizante de relleno (no es
necesario que selecciones primero el control deslizante).
• O bien O arrastra el color hasta el objeto. Cada relleno tiene una línea central imaginaria
en la mitad de la flecha de relleno. Si sueltas el color sobre el control deslizante de inicio,
cambiará el color del control deslizante de inicio; mientras que si lo sueltas sobre el
control deslizante de fin, cambiará el color en el control deslizante de fin.
• Si está seleccionado uno de los controles deslizantes (está señalado), simplemente haz
clic sobre un color.
Cada método cambia el color de un solo control deslizante; no se cambia ningún otro
control deslizante seleccionado, o:
Rellenos circulares
Una forma rápida de aplicar un relleno circular: ×+arrastra para crear un relleno circular.
182 La herramienta de relleno
Rellenos elípticos
Tipo de relleno
Segmentación de relleno
No utilizado
Nombre de mapa de bits
Resolución
No utilizado
La Galería de mapa de bits se describe en La galería de mapa de bits (en la página 224) en
el capítulo Trabajar con fotos, para Galería de rellenos, lee más abajo (en la página 186).
Cuando importas un archivo de foto en MAGIX Web Designer 6 (ej. un archivo JPG o PNG)
aparecerá como una forma con un tipo de relleno de mapa de bits. Cuando un objeto de
este tipo se selecciona en la línea de estado, se muestra como una "foto", pero es lo
mismo que una foto a la que se le ha aplicado un relleno de mapa de bits.
Para rellenar o dar forma con un mapa de bits o relleno de foto, realiza uno de los
siguientes pasos:
Puedes rellenar un objeto con un mapa de bits o múltiples repeticiones del mapa de bits.
El relleno tiene tres controles deslizantes. Para ello, utiliza Cambiar el tamaño y la posición
del relleno de mapa de bits (en la página 184). Una forma alternativa de configurar el
tamaño del mapa de bits es introducir la resolución en el campo de la barra de
información. Primero tienes que deshacer la selección de control deslizante de relleno
haciendo clic en cualquier parte de la imagen donde no haya un control deslizante de
relleno, y luego escribe una nueva resolución dpi.
Si presionas SHIFT al sustituir una foto de esta forma, la posición, escala y rotación del
relleno de mapa de bits se conservará.
Por ejemplo, para convertir una foto a blanco y negro, sólo necesitas hacer clic en el color
blanco de la línea de color.
Un ejemplo
El ejemplo anterior tiene una sombra simple. Lee el capítulo sobre la herramienta de
sombras (en la página 191) para más información.
Relleno fractal
MAGIX Web Designer 6 es compatible con dos tipos de rellenos fractales que son
modelos de relleno naturalistas creados matemáticamente. Son muy útiles para simular el
color del cielo, las nubes u otras texturas de la naturaleza.
Cada vez que creas un relleno fractal nuevo se crea un nuevo modelo. Para sustituir un
fractal existente por un modelo nuevo escoge uno del menú de relleno.
Puedes ajustar el tamaño y posición del relleno fractal arrastrando y ajustando los
controles deslizantes de relleno. Deselecciona los controles deslizantes de relleno (clic
sobre el relleno fuera de los controles) para ver los controles de resolución y granos.
Relleno fractal con nubes. A la izquierda con valor de grano 1, a la derecha con valor de grano
50.
186 La herramienta de relleno
Relleno de plasma fractal. A la izquierda con valor de grano 5, a la derecha con valor de grano
50.
Nota la diferencia entre el grano y la resolución. El grano controla el flujo del modelo. La
resolución establece el tamaño del mapa de bits fractal y la impresión de los píxeles
individuales.
Puedes cambiar los colores de inicio y fin de un relleno fractal. Selecciona los controles
deslizantes centrales o externos y después aplica el color utilizando la línea de colores o la
galería de COLOR . Para cancelar el color aplicado, escoge Sin color.
Muchos de los tipos de rellenos con gradación de color (lineal, circular, elíptico, cónico,
rombos) son compatibles con rellenos de gradación de varios niveles, lo que significa que
en vez de pasar de un color a otro, puede pasar por una cantidad de niveles de color
diferentes.
Para añadir un nuevo nivel de color a una graduación, selecciona la herramienta de relleno
para que se vea la flecha de relleno y después:
Para eliminar un control deslizante de nivel, selecciónalo con un clic y pulsa la tecla Supr.
La galería de rellenos
La GALERÍA DE RELLENOS contiene texturas de mapas de bits que pueden utilizarse para
rellenos. Sólo cuando utilizas un relleno se copia en el documento.
IMPORTAR : importa el mapa de bits seleccionado en el documento. Una copia del mapa de
bits aparece en la GALERÍA DE MAPAS DE BITS. También puedes arrastrar y soltar el mapa
de bits hasta una parte en blanco de la página. Esto es en general más fácil que hacer clic
en IMPORTAR .
También puedes arrastrar y soltar el mapa de bits hasta un objeto para aplicar un relleno
de mapa de bits.
Hay algunas diferencias entre arrastrar una mapa de bits desde la galería de MAPAS DE
BITS o la GALERÍA DE RELLENOS: al arrastrar mapas de bits desde la GALERÍA DE RELLENOS
y soltarlos sobre las formas para crear un relleno de mapa de bits, el relleno tendrá
mosaicos y el mapa de bits no tendrá la mejor adaptación posible para la forma. Este
comportamiento es diferente al que ocurre al arrastrar desde la galería de mapa de bits
porque en general las texturas se aplican desde la galería de rellenos y normalmente tienen
forma de mosaico y no adaptadas.
Buscar y ordenar están descritos en el capítulo Trabajar con documentos (en la página 83).
Trabajar con documentos (en la página 83) incluye información general sobre galerías.
Transparencia 189
Transparencia
La herramienta de TRANSPARENCIA te permite determinar cuánto de los colores y
objetos subyacentes se podrán ver a través de un objeto.
Forma
Segmentación
Nombre de mapa de bits
Control deslizante/Resolución
Cantidad de transparencia
Puedes aplicar transparencia lisa o con gradación a todos los tipos de objeto, incluyendo
mapas de bits.
Se llama transparencia "plana" porque todas las partes de los objetos tienen la misma
transparencia, a diferencia de la transparencia con gradación.
MAGIX Web Designer 6 suministra una vista previa en vivo. A medida que arrastras la barra
de transparencia, los objetos del documento se modifican para que puedas ver el efecto
inmediatamente.
La transparencia con gradación funciona de forma muy similar a los rellenos de color (en la
página 176) con gradación. Debes arrastrar sobre los objetos en la HERRAMIENTA DE
TRANSPARENCIA para crear una transparencia con gradación. Tienes a disposición una
gama similar de formas de transparencia: la más sencilla es la lineal, pero también puedes
utilizar transparencias circulares o elípticas:
Lee Rellenos para más información sobre cómo manipular los controles deslizantes de
relleno y las diferentes formas de relleno (en este caso, formas de transparencia)
Si agrupas objetos y aplicas transparencia, todo el grupo será tratado como un objeto y la
transparencia se aplicará a todo el grupo. Sin embargo, si los objetos no están agrupados
y aplicas transparencia, cada objeto individual recibirá una transparencia por separado y
obtendrás un efecto diferente si los objetos están superpuestos.
Sombras
La herramienta de sombra
Sin sombra
Tipos de sombras
Nitidez de la sombra
Transparencia de la sombra
Posición de la sombra
Brillo (Glow): la sombra se utiliza para añadir un efecto de halo alrededor del objeto
La transparencia de sombras suaves aumenta hacia los bordes, lo que le otorga un efecto
muy realista. Las sombras tienen su propia resolución y puedes modificar su tamaño sin
pérdida de calidad.
192 Sombras
1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botón PARED de la barra de
información de la herramienta de SOMBRA.
4. Puedes arrastrar la sombra desde o hacia el objeto
para crear más o menos distancia entre el objeto y la
pared imaginaria.
1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Arrastra desde el centro del objeto en dirección a la sombra.
1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botón RESPLANDOR de la barra de
información de la herramienta de SOMBRA.
4. Arrastra hacia o desde el objeto para cambiar el
tamaño del resplandor.
Sombras 193
Desenfocar los bordes de la sombra
Esto cambia el tamaño de la sombra. Un
desenfoque leve otorga el efecto de una fuente de
luz fuerte, un desenfoque mayor, una fuente de luz
difusa o distante. Se recomienda que las sombras
siempre estén desenfocadas levemente, puesto
que es más realista.
1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA .
3. En la barra de información de la herramienta de SOMBRA, arrastra la barra deslizante
o introduce un valor en el campo de texto de la derecha.
1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA .
3. En la barra de información de la herramienta de SOMBRA, arrastra la barra deslizante
de transparencia o introduce un valor en el campo de texto de la derecha.
Para más información sobre colores y la línea de colores lee el capítulo Trabajar con
colores (en la página 135).
• La forma más fácil es arrastrar y soltar un color desde la línea de color hasta la sombra.
(Asegúrate de soltar el color sobre la sombra y no sobre el objeto.)
• Como alternativa, tienes a disposición este método un poco más complejo pero que te
permite el control absoluto sobre el color:
1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botón SIN SOMBRA de la barra de información de la herramienta
de SOMBRA.
• Si los objetos están agrupados, las sombras superpuestas se fusionan (no se oscurecen
al superponerse).
• Si los objetos no están agrupados, cada objeto recibirá una sombra individual. Las
partes superpuestas de las sombras se verán más oscuras.
• Si has seleccionado varios objetos con sombra, los cambios se aplicarán a todas las
sombras.
Sombras 195
Antes de colocar una sombra a un objeto debes marcarlo. La forma usual de seleccionar
un objeto es a través de la herramienta de SELECCIÓN. Sin embargo, también puedes
utilizar la herramienta de SOMBRAS para marcar un objeto con un simple clic.
Una vez que una sombra se ve de la forma que deseas, puedes copiarla a otros objetos
utilizando la opción Pegar atributos. Simplemente copia el objeto que tiene la sombra
(Edición > Copia), selecciona el objeto o los objetos a los que quieres pegarle la sombra y
escoge Edición > Pegar atributos.
196 Diálogo de propiedades web
También puedes acceder a cada pestaña del diálogo con los botones de la barra
desplegable de propiedades web, disponible en la barra de herramientas de página web.
Pestaña Enlace
Pestaña Página web
Pestaña Página
Pestaña Imagen
Pestaña Mouse-over
Pestaña Marcador de posición
Pestaña Publicar
Crear/Editar barra de navegación
El diálogo carece de modo así que puedes dejarlo abierto mientras seleccionas diferentes
páginas y objetos en tu documento. Así es más fácil fijar propiedades rápidamente en
diferentes objetos y páginas en tu sitio web. Utiliza el botón ACEPTAR para aplicar tus
cambios y cerrar el diálogo, o bien utiliza el botón APLICAR para aplicar tus cambios sin
cerrar.
Pestaña Enlace
La sección principal de esta pestaña te permite escoger qué debe ocurrir cuando se hace
clic en el objeto o texto seleccionado.
198 Diálogo de propiedades web
Enlazar a una dirección web
Para vincular esta dirección, introduce una dirección web. Si mantienes seleccionado el
recuadro "CORREGIR DIRECCIÓN AUTOMÁTICAMENTE ", tu dirección, en caso necesario, se
ajustará si haces clic en OK o Aplicar. Por ejemplo, si entras a "www.xara.com", lo
corregirá a "http://www.xara.com/".
Puedes poner en el campo de la dirección del enlace una dirección de correo electrónico y
así, al hacer clic en el enlace, se abrirá el programa de correo electrónico del usuario con el
campo Para: rellenado. Asimismo, puedes especificar la línea del asunto, agregar
direcciones de correo electrónico CC o CCO para copiarlas en el correo electrónico, o
incluso especificar el cuerpo de texto estándar que deseas utilizar.
Nota técnica: MAGIX Web Designer 6 codifica tu dirección de correo electrónico para
reducir las probabilidades de que robots de correo basura encuentren tu correo
electrónico de la página web. Esto requiere que Javascript esté permitido en el navegador
(actualmente > 95%) de los navegadores).
Enlazar a la página
Selecciona esta opción para enlazar otra página en la página web actual. La lista
desplegable te permite seleccionar la página que deseas enlazar.
CONSEJO: si tu documento de sitio web tiene varias páginas, asignar a cada una un
nombre facilita la configuración y mantenimiento de los enlaces de tu página porque la lista
de páginas contendrá los nombres de las páginas y no solo "Página 2", "Página 3", etc.
Consulta la sección de pestaña Página (en la página 204) a continuación para más
detalles sobre cómo configurar los nombres de página o editar los nombres en la
galería de Páginas y capas.
Además de una entrada para cada página de tu sitio, la lista desplegable muestra
asimismo las entradas especiales PÁGINA SIGUIENTE y PÁGINA ANTERIOR. Utilízalo para
agregar un enlace hacia las páginas anterior y posterior de tu sitio web. En el caso de
enlaces de este tipo, orden de las páginas se establece según el orden de página que
aparece en MAGIX Web Designer 6. Un enlace "siguiente" en la última página vincula la
primera página y un enlace "anterior" en la primera página vincula la última página.
Observa que cuando creas un enlace vinculado a un objeto que se encuentra muy abajo
en la página, el navegador web bajará la página automáticamente para mostrar tu objeto
de referencia.
Enlace al archivo
Esta opción de enlace es útil si quieres agregar un documento, película u otro archivo a tu
sitio web para que esté a disposición de los visitantes. Por ejemplo, es posible que quieras
ofrecer un documento PDF.
Selecciona el objeto o texto que quieres enlazar con el archivo. Luego, activa esta opción
Enlace al archivo y utiliza el botón EXPLORAR para buscar el archivo en tu ordenador. El
nombre del archivo aparece en el campo de texto a la izquierda del botón Explorar. Con
un clic en Aceptar, el enlace se aplicará.
Además de aplicar el enlace, MAGIX Web Designer 6 ha hecho una copia de tu archivo y la
ha colocado en la carpeta de soporte para tu diseño. Ésta es una carpeta que se guarda
junto con tu archivo .web o .xar. Si tu diseño se llama "Misitio.web", la carpeta de soporte
se llamará "Misitio_web_files". Todos los archivos que se encuentran en la carpeta de
soporte se publican junto con tu sitio web, lo que significa que tu archivo se publicará con
tu sitio web para que el enlace que has agregado funcione. Consulta el capítulo Trabajar
con documentos (en la página 76) para más información acerca de las carpetas de
soporte.
Ten en cuenta que, como se crea una copia independiente de tu archivo en la carpeta de
soporte de tu diseño, debes actualizar esa copia siempre que modifiques el archivo y
quieras publicar la versión modificada. O puedes repetir el proceso de enlace y buscar el
archivo actualizado. De igual forma, si mueves o copias tu diseño a otro ordenador o le
das una copia a alguien, debes asegurarte de enviar también la carpeta de soporte del
archivo de diseño porque contiene una parte muy importante de tu página web.
Capa popup
Puedes añadir el contenido que quieras en una capa separada de tu página y puedes
hacer que este contenido se muestre como un popup sólo cuando el usuario hace clic en
un enlace. Por ejemplo, podrías agregar un texto descriptivo sobre una foto que se
encuentre en tu página web y hacer que el texto sólo aparezca cuando el usuario haga clic
en la foto.
Para añadir una capa de popup, primero tienes que agregar la propia capa
mediante la GALERÍA DE CAPAS y luego añadir tu contenido de popup a esa capa.
Lee el capítulo Galería de páginas y capas para más información. A continuación puedes
seleccionar la capa de la lista de capas que encontrarás junto a la opción de "Capa
popup".
200 Diálogo de propiedades web
Ahora, cuando un usuario haga clic en tu objeto, ¡aparecerán los contenido de la capa!
Con un clic en cualquier otro lugar de la página, el popup desaparece de nuevo.
Ten en cuenta que todo el contenido de la capa popup se carga en cuanto el usuario visita
tu página. Entonces, si quieres suministrar muchas fotos con ventanas emergentes, utiliza
la característica Foto emergente descrita a continuación.
El capítulo "Primeros pasos" (en la página 56) incluye algunas instrucciones paso a paso
para agregar capas popups.
Foto emergente
Esta opción te ofrece una forma muy fácil de añadir fotos emergentes y otras
características de la galería de fotos a tu sitio web, sin agregar capas. Simplemente
importa tu foto y utiliza la HERRAMIENTA DE SELECCIÓN para reducir el tamaño
correctamente de modo que aparezca como una pequeña miniatura de foto en tu página
web. Luego selecciónala y escoge la opción FOTO EMERGENTE .
Haz clic en el botón CONFIGURACIÓN junto a esta opción para ir a la PESTAÑA IMAGEN, en
donde puedes fijar el tamaño de la foto emergente y escoger entre otras opciones.
Consulta la sección pestaña Imagen a continuación (en la página 206) para más detalles.
Al seleccionar la opción foto emergente en esta pestaña Enlace, también se selecciona la
casilla foto emergente en la pestaña Imagen, es decir, que ambos activan el mismo
comportamiento de popup.
La lista desplegable contiene cuatro opciones producen que el navegador haga cosas
especiales. Tiene que seleccionar una de estas opciones o tecleas el nombre de un frame:
NUEVA VENTANA (_BLANK) Abre el enlace en una nueva ventana del navegador.
MISMO FRAME (_SELF) Abre el enlace en este frame (el frame que contiene este objeto).
Diálogo de propiedades web 201
FRAME SUPERIOR (_PARENT) Abre el enlace en la ventana principal o en el frameset
(conjunto de marcos o frames) que contiene este frame.
MISMA VENTANA (_TOP) Abre el enlace dentro de la página principal del navegador,
sustituyendo todos los frames existentes.
FORMA DE OBJETO : El usuario debe hacer clic exactamente en el contorno del objeto para
invocar el enlace.
RECTÁNGULO RODEANDO OBJETO: El usuario puede hacer clic en cualquier parte del
rectángulo que esté rodeando el objeto (caja circundante) para invocar el enlace.
202 Diálogo de propiedades web
TÍTULO, DESCRIPCIÓN & PALABRAS CLAVE : Estos campos son como se describen en la
PESTAÑA PÁGINA (en la página 204)más arriba. Opcionalmente puedes configurar estos
campos para que se apliquen a cada página de tu sitio, a no ser que se sobrescriban por
la configuración para una página de la pestaña Página. Por ejemplo, una página que no
Diálogo de propiedades web 203
tenga definido su propio título en la pestaña Página obtendrá el título que especifiques
aquí.
TRACKER CODE : Esto sirve para el mismo propósito que el campo de tracker code en la
pestaña Página. Lee el apartado pestaña Página (en la página 204) para obtener más
detalles.
Sin embargo, para este campo rige que si se especifica código en la PESTAÑA PÁGINA
WEB ,se incluye en cada página de tu sitio de forma adicional al código especificado para
cada página en la pestaña Página. Esto te permite incluir código en cada página y,
además, te permite agregar más código a las páginas que lo requieran.
SUBRAYAR TEXTOS CON ENLACES : El subrayado se suele usar para resaltar en el texto los
enlaces que permiten clic, por lo que esta opción está seleccionada por defecto.
Deselecciónala si no quieres que tus enlaces de texto aparezcan subrayados.
COLOR MOUSEOFF : Aquí puedes elegir el color que quieras para todos tu enlaces de text. O
bien puedes elegir en la lista desplegable (si existe una en tu documento actual) un color
original con nombre, o bien puedes hacer clic en el botón Editar para abrir el editor de
color y elegir cualquier otro color.
COLOR MOUSEOVER : Los enlaces de texto cambiarán a este color cuando un usuario
mueva el cursor del ratón por encima de ellos.
COLOR VISITADO : Enlaces de texto que conduzcan a una página que el usuario ya ha
visitado se visualizan en este color en lugar del color MouseOff.
204 Diálogo de propiedades web
Pestaña de página
Las opciones en esta pestaña se aplican a la página actual, no al objeto o a los objetos
seleccionado(s). La página actual se indica con líneas de ángulo negras en la parte exterior
de cada esquina de la página. Todos los campos de esta pestaña son opcionales; no es
necesario que rellenes estos campos para cada página web de tu sitio.
Si quieres el mismo título, la misma descripción y las mismas palabras clave para todas las
páginas web de tu sitio, puedes definirlo una vez en la pestaña Página web en lugar de
definirlo aquí para cada página.
PÁGINA DE NOMBRE DE ARCHIVO : Utiliza este campo para fijar el nombre que quieras usar
para esta página cuando sea exportada. Por lo tanto, si quieres que la página se exporte
como "inicio.html", teclea en este campo "inicio".
PALABRAS CLAVE DE LA PÁGINA: Aquí puedes introducir las palabras clave que quieras que
sean encontradas por los buscadores para que los usuarios encuentren tu página.
Introduce aquellas palabras que los visitantes potenciales probablemente utilicen para
buscar si están buscando páginas o sitios como el tuyo.
Para aquellos que estén familiarizados con HTML, las palabras clave se introducen en el
encabezado de página como metadatos.
TRACKER CODE: Puedes utilizar este campo para pegar en tu página cualquier código
HTML válido. Para aquellos que están familiarizados con HTML, el código se inserta sin
modificar al final de la página, justo antes del tag de cierre "</body>".
Esto suele ser de gran ayuda para insertar un tracker code que recoge las estadísticas
sobre las visitas a tu página. A modo de ejemplo, Google Analytics ofrece un snippet (un
"trozo") de HTML que puedes pegar en este campo para la página web que desees
controlar.
Aquí hay que tener cuidado, ya que insertar un código o script inválido en tu página puede
causar serios problemas en toda la página en su conjunto.
Si tienes que insertar exactamente el mismo código en cada página de tu sitio, puedes
usar el campo de Tracker code en el diálogo de la pestaña Página web en lugar de
introducirlo individualmente en cada página utilizando la pestaña Página.
206 Diálogo de propiedades web
Pestaña Imagen
Fotos emergentes
Esta sección de la PESTAÑA IMAGEN te permite añadir fotos emergentes y otras
características de la galería de fotos a tu página web. Simplemente importa tu foto y utiliza
la HERRAMIENTA DE SELECCIÓN para reducir el tamaño correctamente de modo que
aparezca como una pequeña miniatura de foto en tu página web. Luego, mientras la foto
todavía está seleccionada, selecciona el campo foto emergente en esta pestaña. Escoge
el tamaño que quieres dar a la foto emergente en el campo de ancho (valor por defecto:
500 píxeles). Haz una vista previa de tu página y haz clic en la miniatura de tu foto en tu
página, ahora verás aparecer la ventana emergente con tu foto.
Una gran ventaja de estas ventanas emergentes frente a las capas emergentes (tal como
se describen anteriormente en la sección de la pestaña ENLACE ) es que la foto ampliada
solo se carga en el navegador web cuando los visitantes hacen clic en una foto en
miniatura. Por lo tanto, este método es más adecuado para presentar un gran número de
fotos en una página de galería, ya que en un primer momento sólo se cargan las pequeñas
miniaturas, permitiendo así que la página se cargue más rápidamente.
Diálogo de propiedades web 207
Observa que esta característica funciona con otros objetos además de las fotos, por
ejemplo con formas y grupos, pero no se puede utilizar directamente en texto. Puedes
introducir un grupo de relleno de texto (Ctrl+G) para evitar esta restricción.
OSCURECER PÁGINA MIENTRAS LA VENTANA EMERGENTE ESTÁ ABIERTA : con esta opción
seleccionada, toda la página se oscurece cada vez que se muestra una foto emergente.
Esto ayuda a enfatizar la foto emergente de forma que se destaque contra el fondo oscuro
de la página.
MOSTRAR SOMBRA DETRÁS DE LA VENTANA EMERGENTE : esta opción coloca una sombra
detrás de la ventana de la foto emergente para que se destaque del fondo de la página.
208 Diálogo de propiedades web
MOSTRAR TÍTULO DE LA IMAGEN : si has introducido texto de título (lee más arriba) para cada
una de tus fotos, esta opción hace que el título aparezca sobre la foto emergente.
Ten en cuenta que el texto del título es independiente del texto de subtítulo que se
muestra debajo de la foto. Lee a continuación para más información sobre los textos de
subtítulo.
Opciones de la galería
Las siguientes opciones activan las características de galería para tus fotos emergentes.
MOSTRAR LOS CONTROLES DE NAVEGACIÓN DE LA GALERÍA : activa esta opción para que los
controles de la galería se vean sobre la foto emergente.
Esto aparece arriba de la foto cuando se coloca el cursor del ratón sobre la foto. Permite al
visitante ver las otras fotos emergentes en la página actual sin tener que cerrar la ventana
emergente y hacer clic en las vistas en miniatura de las otras fotos. El visitante puede
pasar a la foto anterior o siguiente, o iniciar o detener un pase de fotos automático en el
que cada foto se muestra durante algunos segundos para luego pasar a la siguiente.
MOSTRAR GUIÓN CINEMATOGRÁFICO AL FINAL DE LA FOTO : con esta opción se verá una
cinta cinematográfica con vistas en miniatura debajo de la ventana emergente. Esto
permite al visitante ir a cualquiera de las fotos de la ventana emergente con un clic en las
vistas en miniatura en la cinta cinematográfica, sin tener que cerrar primero la ventana
emergente de la foto.
Diálogo de propiedades web 209
INICIAR PASE DE FOTOS AUTOMÁTICAMENTE : activa esta opción cuando quieras que se
inicie un pase de fotos cuando un usuario hace clic en tus fotos emergentes. También
puedes escoger cuántos segundos debe mostrarse cada foto cuando el pase de fotos
esté funcionando.
Ten en cuenta que sólo las fotos incluidas en la galería de fotos son aquellas fotos que se
encuentran en la página actual que están configuradas como ventanas emergentes. Todas
las otras fotos en tu página no aparecerán en la galería, por lo que debes asegurarte de
usar la pestaña Enlace del diálogo de propiedades web para activar la opción foto
emergente en todas las fotos que quieras que se incluyan en la galería.
Subtítulos de imagen
De forma opcional puede mostrarse un subtítulo debajo de cada foto emergente. Introduce
el texto del subtítulo en este campo en la pestaña Imagen.
Observa que esta característica funciona con otros objetos además de las fotos, por
ejemplo con formas y grupos, pero no se puede utilizar directamente en texto. Puedes
introducir un grupo de relleno de texto (Ctrl+G) para evitar esta restricción.
Para aquellos familiarizados con HTML, este texto se utiliza como texto alternativo en la
imagen exportada para el objeto seleccionado actualmente, independientemente de si la
imagen tiene o no una ventana emergente. Los navegadores web muestran este texto en
la página en lugar de la imagen si ésta no está disponible por alguna razón.
210 Diálogo de propiedades web
Tipo de imagen web
Debido a la naturaleza de las páginas web HTML, la mayoría de los objetos que ves y
puedes seleccionar en la página MAGIX Web Designer 6 deben convertirse en imágenes
de mapas de bits durante el proceso de exportación de tu página web. Todo esto sucede
de forma automática si realizas una vista previa y la exportación, pero los controles de esta
pestaña te conceden cierto control sobre cómo se crean estas imágenes.
Recuerda que cada grupo, forma, encabezado, logotipo, foto, fondo de panel, etc. se
exporta por separado como imagen. Viendo cómo se agrupan los objetos en tu diseño,
puedes controlar cómo numerosas imágenes son exportadas para componer tu página
web. Por ejemplo, si tienes dos formas separadas en tu diseño que no están agrupadas
conjuntamente, se exportarán como dos imágenes separadas. Puedes agrupar las dos
formas (Ctrl+G), así se exporta una sola imagen.
Este apartado sobre la pestaña Imagen te permite especificar cómo el objeto seleccionado
actualmente debe ser exportado como una imagen. Por defecto, MAGIX Web Designer 6
lo decidirá por ti. Esto significa que como regla general las fotos se exportarán como JPEG
(suele ser el mejor formato para fotos) y otros objetos se exportarán como PNG (suele ser
el mejor formato para gráficos). Las fotos que se rotaron en la página o a las que se les
aplicó una sombra semitransparente, se exportan como PNG porque JPEG no es
compatible con la transparencia.
Puedes forzar el objeto o los objetos seleccionado(s) para exportar como JPEG o como
PNG seleccionando la opción apropiada. Si la opción JPEG está seleccionada, puedes
también escoger la calidad JPEG para esta imagen. Una calidad superior implica que el
tamaño del archivo JPEG es mayor.
Pestaña Mouse-over
Diálogo de propiedades web 211
Las opciones de esta pestaña especifican lo que debería ocurrir cuando un visitante
coloca el cursor del ratón sobre el objeto seleccionado. Por ejemplo, puedes hacer que
cierto texto o una capa completa de contenido emerja cuando un visitante coloque el
cursor del ratón sobre una foto de tu página web.
MOSTRAR TEXTO DE POPUP (TÍTULO): aquí puedes especificar el texto del "título de popup"
de un objeto. Los navegadores web lo muestran como un consejo de herramienta
emergente cuando el usuario mueve el cursor del ratón sobre un objeto. Por ejemplo, si
cuentas con una foto en miniatura que dispone de una versión ampliada de la foto al hacer
clic (consulta la sección pestaña Imagen para información sobre esto), es posible que
quieras insertar el texto de título de popup "Haz clic para ampliar". Entonces, cuando el
cursor del ratón pasa sobre la miniatura de la foto, se verá este consejo de herramienta.
MOSTRAR CAPA POPUP: del mismo modo que puedes añadir a tu diseño una capa que sólo
se muestre cuando un usuario hace clic en un objeto (lee el apartado de la pestaña
Enlace), también puedes especificar que esa capa se muestre cuando el cursor del ratón
se mueva sobre un objeto. Cuando el cursor del ratón se quita del objeto, vuelve a
desaparecer el popup. Simplemente escoge esta opción y selecciona la capa que quieras
que se convierta en popup en la lista suministrada.
Por ejemplo, puedes utilizar esta característica para mostrar como popup una copia más
grande de una foto cuando el usuario mueva el cursor del ratón sobre la misma. Ten en
cuenta que todo el contenido de la capa popup se carga en cuanto el usuario visita tu
página. Por lo tanto, este método de mostrar fotos emergentes no se recomienda si tienes
una gran cantidad de fotos que quieres mostrar. En este caso, utiliza la función Foto
emergente (en la página 35) descrita en el apartado de la pestaña Enlace.
212 Diálogo de propiedades web
Selecciona el objeto del marcador de posición y abre esta pestaña del diálogo de
PROPIEDADES WEB . Puedes utilizar los controles de esta pestaña para agregar a tu página
un archivo flash o de gráfico externo o para insertar en tu página código HTML que hayas
obtenido de otro sitio. El objeto seleccionado se convierte en un "marcador de posición".
Esto significa que el objeto representa las dimensiones y la posición del contenido que has
agregado, pero que al exportar tu página web, el objeto se sustituye con el código o
archivo verdadero que has insertado.
Sin embargo, existe una forma más sencilla de añadir archivos o códigos a tu sitio.
Simplemente arrastra y suelta los archivos Flash o GIF animados desde el explorador de
archivos de Windows hasta tu página. Se generará automáticamente una imagen de
marcador de posición y se colocará en tu página. Una copia del archivo se añade a la
carpeta de soporte de tu diseño para que se exporte y publique con tu sitio. Al exportar y
publicar tu sitio, la imagen del marcador de posición se sustituye por el archivo verdadero
que has importado.
Diálogo de propiedades web 213
De la misma forma, si has copiado código HTML de la página web de widgets de un
tercero, puedes pegar el código en MAGIX Web Designer 6 (asegúrate de que te
encuentres en la herramienta de selección cuando lo hagas y no en la herramienta de texto
porque, de ser así, se insertará como texto). MAGIX Web Designer 6 detecta el HTML y lo
utiliza para renderizar una imagen de marcador de posición que aparecerá en tu página. Al
exportar/publicar tu sitio, el marcador de posición se sustituye por el código verdadero
para que el widget funcione. Consulta el capítulo de Gráficos web y widgets (en la página
268) para más detalles.
Si quieres insertar un código o un archivo de forma manual, primero crea en tu página web
un objeto (por lo general un rectángulo, con la HERRAMIENTA DE RECTÁNGULO (en la
página 134)) que tenga las mismas dimensiones que el contenido que quieres agregar y
posiciónalo donde quieras que aparezca el contenido. Esto es tu "marcador de posición"
porque se sustituirá en tu página exportada por el contenido que especifiques en esta
pestaña
ADVERTENCIA: Al igual que ocurre con el código de seguimiento, tienes que tener tener
cuidado e insertar solamente código que sabes que es seguro y que proviene de una
fuente de fiar. El código inválido o roto afectará tu página web publicada porque MAGIX
Web Designer 6 simplemente inserta el código tal y como tú lo suministres, sin modificar,
sin revisar, en tu página web cuando ésta es exportada.
Si el código HTML que introduces contiene una referencia a archivos externos que se
supone deben encontrarse en tu página web, deberás copiar estos archivos externos en el
directorio de compatibilidad para tu diseño. Lee el capítulo Trabajar con documentos para
obtener información sobre los directorios de compatibilidad. Una vez en la carpeta de
soporte, los archivos se copiarán automáticamente a la carpeta _htm_files de tu sitio web
al exportarlo. Por lo tanto, también es necesario asegurarte que cualquier referencia a
estos archivos en el código HTML se encuentre en la ubicación correcta.
He aquí un ejemplo simple para explicarlo de forma más clara. Supón que yo quiero
insertar una pequeña pieza de código HTML que añade una imagen en mi página web. El
código HTML que yo agregue necesitará una referencia al archivo de imagen en algún
lugar. Primero copio el archivo de imagen, digamos "milogotipo.gif", en el directorio de
compatibilidad de mi documento. Si el documento es "mipagina.web", el directorio de
compatibilidad será "mipagina_web_archivos". Yo sé que cuando exporte esta página
web, la exportaré al nombre "mipagina.htm". Esto significa que todas las imágenes
generadas para mi página web y una copia de "milogotipo.gif" que puse en el directorio de
compatibilidad, se exportarán al directorio "mipagina_htm_archivos". Por lo tanto, en el
código HTML que inserto tengo que incluir una referencia al archivo de imagen en esa
ubicación. Entonces insertaría:
Observa que esto hace referencia al archivo de imagen en la ubicación del directorio de la
imagen exportada (_htm_archivos) y NO en el directorio de compatibilidad (_web_achivos)
directamente, ya que únicamente el directorio de la foto exportada se copia en el servidor
web junto con mi página web cuando se publique la página.
Obviamente, si realmente sólo quiero poner una imagen en mi página web, ¡es mucho más
fácil importar directamente la imagen a MAGIX Web Designer 6! Pero esto es un ejemplo
simple que muestra cómo agregar un código HTML que contiene una referencia a un
archivo externo.
Consulta Integración de YouTube, Flash y otros widgets (en la página 61) para más
ejemplos.
Diálogo de propiedades web 215
Objetos de marcador de posición
El objeto de marcador posición lugar en realidad está incluido en tu página web y puede
mostrarse al usuario en algunas circunstancias. Por ejemplo, si has añadido una animación
flash y el usuario que visita tu página no tiene instalado Flash en su navegador web, o si lo
tiene deshabilitado, el navegador mostrará en su lugar la imagen del marcador de posición.
Por lo tanto, muchas veces es buena idea hacer que el objeto de marcador de posición no
sea simplemente un rectángulo negro o una imagen precisa del widget que aparece en tu
página. Podrías usar un grupo como marcador de posición que incluya un mensaje de
texto que pida al visitante instalar Flash para que así pueda ver el contenido flash.
Pestaña Publicar
Necesitarás una empresa de alojamiento web para que aloje tu sitio web. Muchas veces,
los proveedores de Internet incluyen un "espacio web" como parte de la suscripción
normal. También el control Perfil del diálogo Publicar ofrece una o más opciones de
alojamiento que puedes aprovechar. Lee a continuación para más detalles. La mayoría de
los proveedores también ofrecen la posibilidad de que adquieras tu propio nombre de
dominio (por ejemplo www.xara.com) y establecer un enlace a tus páginas web.
Si quieres que MAGIX Web Designer 6 publique tu página web terminada en tu espacio
web automáticamente, de modo que se encuentre en Internet, tienes que introducir los
detalles de acceso para tu espacio web en este pestaña.
216 Diálogo de propiedades web
La subcarpeta opcional te permite publicar tu página web en una subcarpeta. Por ejemplo,
si publicases en el dominio xara.com (obviamente no puedes hacerlo) y quisieras que la
dirección web fuese:
xara.com/products/web_designer
Selecciona este campo si quieres que los detalles FTP se guarden junto con el
documento. Esto significa que siempre que cargues el documento, los detalles FTP se
cargarán también y podrás volver a publicar de inmediato.
Por supuesto, cualquier persona que obtenga una copia de tu archivo de diseño también
podrá publicar tu página. Por lo tanto, se recomienda que no se active esta opción en el
caso de uso normal porque conlleva el riesgo de que una persona que tenga acceso a tu
documento pueda escribir en tu espacio web y hasta sobrescribirlo o eliminarlo.
Guardar en el perfil
Si quieres publicar más que un documento de página web en el mismo espacio web o si
no quieres que tu información FTP se guarde en el diseño de documento, es posible que
quieras que tus detalles de FTP se guarden en tu ordenador como un perfil. Luego, podrás
añadir fácilmente los detalles a cualquier documento al seleccionar el perfil de tu lista de
perfil, en vez de tener que volver a ingresar los datos de forma manual cada vez.
Haz clic en el botón GUARDAR EN EL PERFIL para almacenar la información FTP en un perfil.
Esto abrirá un pequeño diálogo con una lista de perfiles editables. Puedes introducir el
nombre de un nuevo perfil o escoger un perfil existente de la lista para sobrescribir ese
218 Diálogo de propiedades web
perfil. Al introducir un nuevo nombre, escoge uno que te recuerde para qué utilizas el
espacio web. No puedes sobrescribir los perfiles estándar.
Por supuesto puedes guardar múltiples perfiles que solo varíen en el nombre de la
subcarpeta. Esto te permite publicar en diferentes carpetas de tu espacio web.
Eliminar un perfil
Para eliminar un perfil, selecciónalo en la lista de perfiles en la parte superior del diálogo
Publicar y luego haz clic en el botón ELIMINAR junto a él. No puedes eliminar los perfiles
estándar.
Si la información FTP del documento no incluye la contraseña, pero todos los demás
detalles coinciden con un perfil, entonces el perfil se mostrará como seleccionado. Si el
perfil cuenta con una contraseña guardada, se copiará en los detalles FTP del documento.
Esto te ahorra tener que volver a introducir la contraseña cada vez que publiques el
documento. Esto significa que parecerá que tu contraseña está guardada en tu
documento. Pero esto solo puede suceder si la opción GUARDAR CONTRASEÑA EN EL
DOCUMENTO está seleccionada.
Publicación
Una vez que hayas configurado tus detalles para la publicación, selecciona ARCHIVO >
PUBLICAR PÁGINA WEB. Tu página web se publicará.
Nota: Muchos servidores utilizan nombres de archivo sensibles a las mayúsculas y las
minúsculas. Así, por ejemplo, la dirección web xara.com/products.htm no es lo mismo que
xara.com/Products.htm. Para reducir la confusión y la posibilidad de errores, Web
Designer fuerza que todo los nombres de página se escriban en minúsculas y contengan
sólo caracteres permitidos. Esto significa que los espacios no están permitidos en los
nombres de página. Sugerimos utilizar un guión bajo como separador alternativo.
Sin embargo, MAGIX Web Designer 6 no sabe si has eliminado o modificado archivos en
tu espacio web con otra herramienta. Por lo tanto, si por alguna razón tu sitio publicado no
coincide con la copia local exportada de tu sitio, deberías hacer que todo el sitio se vuelva
a publicar. Para ello, desactiva la opción VOLVER A PUBLICAR SOLAMENTE LOS ARCHIVOS
MODIFICADOS en la parte inferior de la pestaña Publicar. Luego, la próxima vez que
publiques, todos los archivos que forman parte de tu página se publicarán, por lo que tu
sitio publicado estará actualizado.
Introducción
Actualmente, las fotos son una parte integral de casi todo trabajo creativo, de sitios web,
flyers, folletos, DTP y más.
El Manejo de fotos en Web Designer es diferente al que puedes haber usado con otros
programas de diseño gráfico.
En MAGIX Web Designer 6 puedes colorear, cortar, copiar, mezclar, enmascarar, difuminar
(decolorar los bordes de) fotos, todo lo que quieras. La naturaleza orientada al objeto, no
destructiva, del manejo de fotos significa que, por ejemplo, cuando cambias el tamaño de
una foto, no estás alterando realmente la foto original, sino que sólo estás modificando una
copia visual. La imagen original con la resolución total se guarda en el archivo .web de
modo que posteriormente puedes editar, volver a cambiar el tamaño o aplicar cualquiera
de las opciones de edición de la herramienta de fotos sin ninguna pérdida de calidad.
Incluso puedes "descortar" fotos recortadas.
Este capítulo cubre los principios básicos de manipulación de fotos e imágenes de mapas
de bits en MAGIX Web Designer 6. El funcionamiento de la Herramienta de fotos está
contemplado en el capítulo Herramienta de fotos.
*Puntos de referencia basados en composiciones de foto creadas con múltiples fotos JPG
digitales de alta resolución
220 Trabajar con fotos
Objetos de fotos
En Web Designer las fotos (o mapas de bits) son simplemente otro tipo de objeto en la
página. Puedes arrastrar y soltar fotos en la página de tu explorador, y luego puedes
redimensionarlas, girarlas, copiarlas y moverlas como cualquier otro objeto. Puedes ajustar
la transparencia, incluso la transparencia con gradación, difuminar los bordes y cortar y
recortar formas extraídas de fotos con gran facilidad. la opción de transparencia te deja
mezclar, combinar o crear fotos compuestas.
Donde en otros programas deberías usar capas, en MAGIX Web Designer 6 cada objeto
está sobre su propia capa y, también con cada objeto de la página, puede traerlo hacia el
frente o hacia atrás de otros objetos.
Importación de fotos
MAGIX Web Designer 6 es compatible con una muy amplia gama de tipos de fotos o
mapas de bits, incluyendo JPEG, PNG, TIFF e imágenes RAW de cámaras digitales, así
como muchos tipos más. El término "mapa de bits" es el término general que abarca
todos los tipos, pero intercambiable con la palabra "foto".
El modo más fácil de abrir una imagen es arrastrando la foto o el archivo de mapa de bits
desde tu explorador de Windows hasta la ventana de Web Designer. O bien, puedes
seleccionar las opciones de menú ARCHIVO > ABRIR o IMPORTAR .
Trabajar con fotos 221
Si importas una foto con un ancho o una altura mayor que 1920 píxeles (tamaño de
pantalla de alta definición), se te preguntará si deseas importar una versión de tamaño
reducido en vez del original en tamaño completo. Para el uso en la web es poco probable
que necesites fotos que superen este tamaño, por lo que es recomendable importar una
versión reducida. Se recomienda utilizar fotos de tamaño reducido para que el tamaño del
archivo de tu diseño (.web o .xar) sea pequeño y para reducir la cantidad de memoria
utilizada al editar y exportar tu página web.
Si arrastras y sueltas sobre una foto existente, esta se reemplazará. Arrastra hasta el fondo
para importar como una foto individual.
Sustituir fotos
Si arrastras y sueltas un archivo de mapa de bits sobre una foto existente, se sustituirá la
foto, pero mantendrá el mismo contenedor o tamaño de frame. Esto facilita la sustitución
de fotos en plantillas. Puede usar la HERRAMIENTA DE RELLENO para ajustar el tamaño, la
posición y el ángulo de la foto dentro de su contorno. Esto no es válido para documentos
de foto, donde al soltar una foto en la página siempre la importará como un nuevo
documento.
Cuando reemplazas una foto o mapa de bits de esta manera, se adaptará de la mejor
forma posible al contorno de la imagen existente. Si mantienes presionada la tecla "Shift" al
reemplazar una foto, la nueva cabrá en las mismas dimensiones y rotación que la foto
anterior. Esto es útil para cuando ajustes manualmente la escala o rotación de un relleno y
luego quieres sustituir la imagen por otra que tenga la misma relación de aspecto. Si
mantienes presionada "Ctrl" al soltar, la foto será simplemente añadida al documento y no
sustituirá ninguna imagen existente.
Si existen múltiples copias de la misma foto en una página, por ejemplo una pequeña vista
en miniatura y una versión más grande en una capa popup, cuando haces clic y arrastras
para reemplazar, todas las copias de la foto de esa página serán reemplazadas por la foto
nueva.
Las fotos entrantes se utilizan para sustituir las imágenes en el documento. De la misma
forma que cuando importas fotos individuales, se te preguntará si deseas importar
versiones de tamaño reducido, si tus fotos son muy grandes. La sustitución se realiza de
izquierda a derecha y desde arriba hacia abajo (el orden de lectura normal). Si no arrastras
la cantidad suficiente de fotos para sustituir todas las fotos reemplazables, puedes
continuar importando fotos de la misma manera. La sustitución continúa a partir de la
siguiente foto sin reemplazar. Así, puedes llenar rápidamente el diseño con tus fotos.
Si importas más fotos de las que pueden acomodarse en la página actual, también se
sustituirán las fotos de las siguientes páginas con las fotos entrantes restantes. Si todavía
222 Trabajar con fotos
quedan fotos entrantes, la página actual se duplica todas las veces que sea necesario para
acomodar todas tus fotos.
Esto significa que puedes crear rápidamente una página web con una galería de tus fotos.
Simplemente escoge una plantilla de galería de la GALERÍA DE DISEÑOS y luego importa
todos los archivos de fotos que desees. La página se copia todas las veces que sea
necesario para que entren todas tus fotos. Asegúrate de escoger la opción de tamaño
reducido si importas muchas fotos.
Para reducir el tamaño, solamente arrastra desde una de las esquinas usando la
herramienta de selección, o introduce un nuevo ancho en el campo de la barra de
información de la HERRAMIENTA DE SELECCIÓN .
Resolución de foto
Una diferencia fundamental entre MAGIX Web Designer 6 y otras herramientas de foto es
que cuando redimensionas una foto esta conserva toda la resolución. Si reduces el
tamaño de una imagen, solamente aumenta el dpi o ppi (píxeles por pulgada). En otras
palabras, no se pierde ni un solo píxel, simplemente se hacen más pequeños.
Cuando guardes tu página web (exportando el código HTML), Web Designer convierte las
fotos automáticamente a la resolución correcta requerida para la página web.
Una de las diferencias más revolucionarias entre Web Designer y otros software es que
cuando copias cualquier foto en la página, realmente no realiza una nueva copia completa
de la foto original, pero en su lugar muestra simplemente otra 'vista' de la imagen original.
El rendimiento en renderización de Web Designer es lo suficientemente rápido como para
mostrar, de esta manera, cualquier cantidad de copias de la misma imagen 'al vuelo'. Esto
te permite ahorrar gran espacio de memoria y reduce drásticamente los tamaños de
archivos.
Esto no quita mérito ni limita lo que puedas hacer con cada copia, y pueden ser trabajadas
independientemente como copias completamente separadas. Cada copia no tiene que ser
idéntica. Puedes editar cada una como quieras, redimensionándola, girándola, cortándola,
coloreándola o aplicándole una amplia gama de efectos de foto y de transparencia.
Todo, sin ocupar espacio en la memoria ni aumentar el tamaño de archivo.
224 Trabajar con fotos
Este ejemplo muestra las copias separadas de la misma imagen, cada una manipulada de
un modo diferente. Cada una conserva la resolución total del JPEG original, como puedes
ver en la imagen de la derecha. La memoria (RAM y el tamaño de archivo) no es superior al
tamaño de JPEG original.
El capítulo Trabajar con documentos (en la página 83) cuenta con información general
acerca de las galerías.
La GALERÍA DE MAPA DE BITS muestra todo los mapas de bits o fotos usadas en cualquier
documento, con la información de su tamaño de píxeles y el tamaño de archivo.
La GALERÍA DE MAPAS DE BITS siempre contiene un mapa de bits por defecto, con la
imagen gris de Xara. Se utiliza como mapa de bits por defecto para rellenos de mapas de
bits y en casos donde faltan otros mapas de bits. Es útil tenerlo también como marcador
de posición.
Como con todas las galerías, puedes arrastrar los objetos de la galería a la página para
crear una nueva copia. O puedes seleccionar una imagen en la galería y hacer clic en uno
de los botones superiores. El apartado siguiente muestra detalladamente cómo utilizar los
controles de la Galería de mapas de bits, que en su mayoría están pensados para usuarios
más avanzados.
Guardar
Seleccionando el mapa de bits y haciendo clic en GUARDAR, guardarás la imagen original.
En el caso de JPEG integrada, se guardará el archivo JPEG original. Otros tipos de mapas
de bits se guardan mejor como tipos de mapa de bits PNG.
ANIMACIÓN GIF:
*Es fácil para comprobar. Importa un JPEG a tu editor de gráficos favorito, haz cuatro copias, y
haz algunos pequeños cambios en ellas, coloreándolas, rotándolas, o desenfocándolas.
Luego, guarda el archivo nativo y compáralo con el tamaño del JPEG original, y el equivalente
archivo .Xar. Un archivo .Xar nativo tendrá apróximadamente el tamaño del JPEG original, no
importa cuántas copias de la imagen sean hechas.
Como todo lo que Web Designer hace con tus fotos está basado en la imagen original,
que permanece intacta en tu archivo, todo lo que hace es sin pérdidas. No hay ninguna
re-compresión de imágenes cuando guardas el archivo .xar nativo.
Desde luego puedes guardar o exportar tu imagen como un archivo JPEG comprimido, en
cualquier tamaño requerido, y en este caso la calidad de imagen y los detalles se reducirán
en una manera "destructiva". Destructivo significa que los datos originales o los detalles no
pueden ser recuperados desde un JPEG guardado con una resolución inferior. Xara es un
editor "no destructivo" porque los datos de la foto original nunca se pierden, ni se reducen,
ni se comprimen en el archivo .xar nativo.
228 Trabajar con fotos
Haciendo copias de fotos una encima de la otra, y aplicando diferentes efectos a las
copias, combinadas con los avanzados controles de transparencia de Web Designer,
puedes crear fácilmente composiciones de foto mezcladas. Por ejemplo, para desenfocar
selectivamente partes de una foto necesitas sólo unos segundos.
Para crear copias de cualquier objeto necesitas presionar sólo una tecla, o hacer un clic
(arrastrar con el botón derecho del ratón). Para desenfocar alcanza con hacer 'un arrastre'
en una barra deslizante de la Herramienta de fotos, para aplicar una transparencia
graduada necesitas otro arrastre-cilc en la Herramienta de transparencia, y, para colocar
fotos una encima de la otra necesitas un segundo. Por lo tanto, en MAGIX Web Designer
6, necesitas unos clics, arrastres y un par de segundos para todo el proceso.
Desde luego no todo se limita a desenfocar, ya que puedes ajustar los niveles de color,
brillo y contraste, o aplicar cualquiera de la amplia gama de Efectos en vivo para crear una
gama infinita de resultados interesantes o creativos.
Trabajar con fotos 229
MAGIX Web Designer 6 puede mostrar fotos en uno de cinco niveles de calidad. Las dos
primeras configuraciones, suavizan los píxeles de pantalla para evitar píxeles visibles o
secciones no fluidas en los extremos (antialiasing). Cambia el nivel de calidad con la
entrada CALIDAD en el menú VENTANA .
MUY ALTA Muestra imágenes mediante sampleo bicúbico. Esto permite ver las
CALIDAD (POR imágenes en la mejor calidad, en particular para imágenes grandes de
DEFECTO) alta resolución que son altamente reducidas o ampliadas con zoom.
ALTA CALIDAD Antialiasing activado, pero las imágenes se renderizan lento y con una
calidad baja.
COLOR TOTAL Sin antialiasing, por lo que se ven los píxeles individuales. Esto puede
ser útil cuando amplíes con el zoom y necesites ver claramente los
pixeles de la imagen por separado. El inconveniente es que las
imágenes generalmente se ven pobres cuando reduces o amplías
causando un pixelado claramente visible y bordes "escalonados"
dentados, sobre todo si haces girar la imagen.
CONTORNOS CON Es particularmente útil para ver los contornos de los diferentes pasos
PASOS DE de una transición. MAGIX Web Designer 6 no es compatible con
TRANSICIÓN transiciones pero los archivos .xar importados pueden contenerlas.
CONTORNO Sólo se ven los contornos de los objetos. Esto es útil para buscar y
seleccionar objetos que son difíciles de ver debido a otros objetos que
se encuentran delante o detrás de ellos.
Hay un control adicional que te permite frenar todo antialiasing o suavizado de imagen en
imágenes que son reducidas o ampliadas con zoom. En otras palabras, en vez de una
imagen suavizada, verás todos los pixeles cuando amplíes con zoom. Abre la GALERÍA DE
MAPAS DE BITS y haz clic derecho sobre la imagen y seleccione "propiedades". En el
diálogo desactiva la selección de "Suavizar al aumentar tamaño". Ahora, no importa la
calidad que utilices para la imagen (y todas las copias), siempre se visualizarán los píxeles
no suavizados cuando amplíes o reduzcas con zoom.
Puedes seleccionar entre numerosos tipos de archivo, como JPEG, PNG, GIF, TIFF, PDF,
PSD, Flash (.swf), BMP, así como otros tipos menos conocidos.
230 Trabajar con fotos
Hay dos íconos disponibles en la barra superior que son shortcuts para
guardar la selección como JPG o PNG. Estos se encuentran en la barra
desplegable cuando colocas el cursor del ratón sobre el ícono de
exportación HTML.
Recomendamos guardar las fotos como JPEG (a veces llamado JPG), ya que ofrece la
mejor relación tamaño/calidad.
Cuando exportas un JPEG, aparece una ventana con una vista previa de exportación
donde puedes ajustar muchas opciones de exportación y comparar ajustes alternativos o
tipos de archivo alternativos como PNG.
La ventana de Vista previa de exportación (en la página 324) está descrita más
detalladamente aquí.
Se puede bajar la calidad por debajo de 75 para que se vea más rápido la página en la
web. La ventana de vista previa muestra la calidad de cualquier valor que selecciones.
Trabajar con fotos 231
Consejo: si crees que vas a seguir editando la imagen exportada, como cambiar el
tamaño de la imagen, te recomendamos que guardes el archivo .web también. Esto
preservará la imagen original sin pérdida de calidad.
• Suelta tu foto en Xara Xtreme (en una página en blanco o en la barra de título)
• Ve a la herramienta de selección, arrastra el control deslizante de una esquina para
cambiar el tamaño de la imagen, o introduce el ancho o la altura requerida en los
campos correspondientes de la barra de información. El tamaño de la imagen será
correcto cuando esté al 100%.
Para guardar la imagen en formato PNG, repite los mismos pasos de arriba pero
selecciona la opción PNG en el menú desplegable del tipo de archivo.
Todas las ediciones realizadas con la HERRAMIENTA DE FOTO (en la página 242), como
cambiar el brillo, el contraste, el color, los valores de enfoque o desenfoque, serán
guardadas sobre la foto como atributos de Web Designer.
Tal como puedes cambiar el color de una forma o de una línea sin cambiar la forma
subyacente, los atributos de la herramienta de foto cambian la apariencia de la foto pero
sin afectar la imagen original (a esto se le llama edición no destructiva). Otra forma de
explicar esto es que MAGIX Web Designer 6 sólo guarda una lista de las ediciones
aplicadas a tu foto; puedes cambiar, quitar o añadir nuevas ediciones. Siempre podrás
recuperar la foto original sin retocar, incluso luego de haber cambiado el brillo, haberle
cambiado el tamaño, o incluso luego de haberla cortado o recortado.
Los atributos se pueden copiar y pegar entre distintos objetos. Esto no sólo se aplica
solamente a los atributos tradicionales como el color o el ancho de la línea, también
funciona con todos los atributos de la HERRAMIENTA DE FOTO . Esto significa que puedes
copiar todas las optimizaciones que le hayas hecho a la foto a otro documento, utilizando
la función "copiar/pegar atributos".
Esto también vale para todos los otros atributos de la foto, como color y ancho de línea,
coloreado de foto (contoning), sombras, etc.; todos estos atributos se pueden copiar de
una foto a otra usando la misma técnica.
232 Trabajar con fotos
Recortar fotos
Asimismo encontrarás un botón Deshacer corte que borra cualquier rectángulo de corte y
restaura la imagen original.
Utilizando las herramientas de dibujo es fácil dibujar formas y cortarlas del fondo. Puedes
usar cualquiera de las herramientas de dibujo para hacer esto. Quizás la forma más fácil es
que utilices la HERRAMIENTA DE EDICIÓN DE FORMA . Dibuja una línea alrededor del borde de
la forma que quieras extraer. Realiza un zoom en la foto y luego:
Puedes seguir editando la forma, utilizando las herramientas de edición de línea ya que la
foto permanece dentro de la forma. En este caso la forma actúa como una máscara de
corte (clipping mask).
En este ejemplo la vaca tiene una sombra de pared, que se le aplicó con la herramienta de
sombra.
234 Trabajar con fotos
• Presiona el botón "Imprimir pantalla" (print screen) de tu teclado y aparecerá una imagen
de toda la pantalla en el portapapeles. También puedes seleccionar "Alt + Print screen"
y se generará una imagen de la ventana actual.
• En MAGIX Web Designer 6 selecciona "Ctrl + V" para pegar, y selecciona "mapa de
bits" para que se pegue la imagen a tu página.
Ahora puedes recortar, añadir texto, cambiar el tamaño y guardar los resultados. Es mejor
si guardas la imagen como archivo PNG. Todas las fotos de pantalla de este archivo de
Ayuda y de este manual fueron creadas de esta forma.
Colorear fotos
Selecciona una foto, haz clic en la línea de colores para aplicar un color a la foto. Para
convertir una foto de color a blanco y negro, haz clic en el color blanco y selecciona
"ESTABLECER COLOR CLARO DE TONO CONTINUO ". Esto se llama color continuo porque es
un tono continuo de negro a blanco.
Para crear una imagen con un tono continuo de color amarillo claro, haz clic en el color amarillo
claro de la línea de colores.
O, haz clic derecho en la línea de colores y se abrirá un menú contextual para que apliques
el color seleccionado, sea este el color oscuro o el claro.
Trabajar con fotos 235
Si haces clic en LÍNEA DE COLOR ,
puedes seleccionar cualquier color, sea
éste el color claro o el oscuro del tono
continuo. También puedes utilizar la
herramienta EDITOR DE COLOR (Ctrl+E) y
elegir cualquier color que quieras. El
menú desplegable en la parte superior
del editor de color controla si estás
editando en el color claro u oscuro.
Puedes restaurar el color original de la foto haciendo clic en el pequeño cuadrado blanco
cuadriculado del extremo izquierdo de la línea de colores, o haz clic derecho sobre la foto
y selecciona la opción "restaurar color".
MAGIX Web Designer 6 trata las fotos como si fueran un rectángulo con relleno de mapa
de bits. Es decir, la forma de tu foto será tratada por el programa como si fuera un
contorno alrededor de la imagen que se encuentra adentro, y el contorno se puede editar
completamente. Entonces, cuando recortes o edites el contorno de la forma, no estarás
afectando al relleno.
Las fotos y los mapas de bits de la página siempre están "contenidos" dentro del contorno
de una forma. No sólo puedes cambiarle la forma al contorno, sino que también puedes
ajustarle el tamaño, el ángulo y la posición de la foto dentro de su marco (frame) utilizando
la HERRAMIENTA DE RELLENO . Selecciona la foto, ve a la HERRAMIENTA DE RELLENO y
podrás ver las flechas de relleno que se encuentran en un ángulo recto (o puedes ir a la
herramienta de relleno, y hacer clic sobre la foto para seleccionarla).
Por ejemplo. para agrandar y rotar la imagen hacia la izquierda dentro de su propio marco,
selecciona la herramienta de relleno y arrastra una de las puntas de las flechas.
236 Trabajar con fotos
• Para cambiar el tamaño, arrastra el cursor sobre una de las puntas de las flechas,
alejándote del centro. Puedes mantener presionada la tecla "Ctrl" para mantener el
ángulo.
• Para rotar la imagen, arrastra una de las puntas de las flechas sobre el centro.
• Para reposicionar la imagen, arrastra en cualquier parte de la imagen.
Si cuentas con un grupo de fotos en vez de un objeto común de foto no puedes utilizar la
herramienta de relleno tal como se describe arriba para ampliar la imagen y girarla en su
marco. Si quieres convertir un grupo de foto en un objeto de foto común para poder
ajustarlo con la herramienta de relleno, puedes usar Herramienta > Optimizar foto para
hacerlo. Pero ten en cuenta que esto es destructivo y que luego no podrás modificar
ninguna de las ediciones que aplicaste a la foto.
Enderezar horizonte
Es muy fácil enderezar el horizonte torcido de una imagen. Sólo tienes que utilizar la
herramienta de relleno siguiendo los mismos pasos de arriba.
• Selecciona la herramienta de relleno y haz clic sobre una foto. Esto mostrará los
controles deslizantes de relleno, que básicamente son flechas que muestran la
extensión del relleno en el interior de la forma.
• Arrastra uno de los extremos de las flechas para cambiar el tamaño de la imagen o para
rotarla.
Trabajar con fotos 237
La siguiente imagen tiene un paisaje con un horizonte torcido, que ha sido creada con la
función de "creación de panorámicas".
Utilizando la herramienta de relleno, arrastra una de las flechas para rotar o cambiar el
tamaño de la imagen. Puedes reposicionar la foto arrastrando el control deslizante de las
flechas en el centro, o mantiene presionada la tecla "Shift" y mueve el cursor sobre la
imagen.
Las cámaras digitales de hoy en día sacan fotos con cada vez más resolución y tamaño de
archivos en JPEG, por eso si tienes un documento con muchas imágenes, el tamaño del
archivo puede transformarse rápidamente en un archivo muy pesado. Por ejemplo, un
documento multipágina con 20 imágenes en JPEG en alta resolución (cada imagen tiene 5
MB) producirá un archivo .xar con más de 100 MB*.
Además, muchas veces estas fotos tienen innecesariamente una alta resolución. Reducir
una foto de una cámara digital de 8 megapíxeles a 5 cm (2 pulgadas) de ancho en la
página, resultará en una imagen de 1500 dpi. Aunque una imagen con una resolución muy
alta dará mucha más flexibilidad a la hora de imprimirla (y también te dará la posibilidad de
hacer zoom para acercarte o la posibilidad de agrandar pequeñas partes de la foto), esta
resolución es mucho más alta de la que se necesita incluso para la mejor calidad de
impresión comercial, y más aún para los gráficos de la web o para la producción en HTML.
Si cortas una parte pequeña de la foto, habrá una gran parte de la imagen que estará
"escondida" fuera del área visible. La función de "corte en vivo" (live crop) es muy práctica
para cuando estés editando la imagen ya que puedes deshacer el corte realizado a la
imagen, cambiarle el tamaño o la posición, y toda la imagen se mantendrá los más
enfocada posible. Pero para los documentos finalizados conviene quitar las partes
invisibles.
La imagen recortada de la mariposa aún tiene el resto de la foto adjuntada a ella. Si vas a
la herramienta de relleno podrás ver esto fácilmente si cambias el tamaño del relleno
dentro del contorno. Las partes de la imagen que estén fuera de la mariposa
probablemente sean superfluas en tu documento final.
Trabajar con fotos 239
Hay una opción del menú que es útil, HERRAMIENTAS > OPTIMIZAR FOTO que realiza tres
funciones importantes:
Si seleccionas esta opción del menú para cualquier mapa de bits, se abrirá el diálogo
OPTIMIZAR FOTO .
Por defecto, la configuración es tal que la foto estará optimizada en un JPEG de 96 dpi
(resolución normal de pantalla) con el tamaño que aparece en tu página. En general, esto
es lo que quieres de las fotos de tu sitio web.
Puedes cambiar la resolución utilizada en este diálogo, si escoges el tamaño físico que
deseas para la imagen optimizada (ancho/alto en píxeles) o si introduces un dpi diferente
(p.ej. 150 dpi si quieres calidad de impresión).
También puedes escoger optimizar como PNG (produce imágenes más grandes pero
mayor calidad para gráficos e imágenes de texto) o cambiar la calidad usada para la
optimización JPEG (mayor calidad significa tamaño más grande).
Para obtener buenos resultados de impresión necesitas una resolución de 150 dpi. Si
introduces una resolución de 300 dpi, obtendrás la calidad más alta posible en la
240 Trabajar con fotos
impresión comercial (la mayoría de la personas no pueden ver la diferencia entre 150 dpi y
300 dpi, pero con 300 dpi necesitas cuatro veces más de memoria o espacio adicional de
archivo).
Nota: la calidad JPEG óptima es 75%. NO recomendamos guardar archivos JPEG con
una calidad del 100%, virtualmente no pueden distinguirse de los JPEG guardados con
75% pero requieren más memoria y espacio de archivo.
Puedes optimizar múltiples fotos al mismo tiempo si quieres que todas tengan el mismo
dpi. Selecciona las fotos que quieras optimizar y luego elige la opción OPTIMIZAR como se
describió arriba. Si tus fotos tienen diferentes dimensiones, la opción para optimizar según
el tamaño de píxeles estará desactivada y deberás escoger el dpi requerido.
O puedes usar la función HERRAMIENTAS > OPTIMIZAR TODOS LOS JPEG para editar todas
las fotos JPEG de tu documento en una sola operación. En este caso, el diálogo de
optimización aparecerá para que puedas escoger el dpi que deseas utilizar para todas las
optimizaciones.
Ten en cuenta que después de optimizar, el original sin optimizar y ahora foto sin
referencia permanece en la galería de mapas de bits. Esto significa que todavía se
encuentra en la memoria y que el espacio de almacenamiento requerido en tu diseño no
se habrá reducido. Simplemente guarda tu diseño y vuélvelo a cargar después de
optimizar, para eliminar las imágenes originales más grandes.
Documentos fotográficos
A veces es mejor trabajar con una foto sola, en vez de con un "objeto" en una página. Web
Designer le llama a esta foto "foto documento" o "modo foto", y se lo puede editar de
forma similar como se hace con los editores tradicionales de foto. Puedes crear un
documento fotográfico de varias maneras:
• Arrastra una foto desde tu explorador hacia la barra de título o la barra de herramientas
de la ventana de Web Designer.
• Selecciona "Archivo > Abrir" y selecciona una foto.
• Crea un documento fotográfico en blanco seleccionando "ARCHIVO > NUEVO > FOTO
VACÍA ".
• No hay una página en blanco visible. Las dimensiones de página se ajustan a las
dimensiones de la foto, ampliándose automáticamente si añades cualquier otro objeto.
Trabajar con fotos 241
• Los documentos fotográficos tienen una cuadrícula de 1 píxel por defecto. La función
para ajustar la cuadrícula también viene activada. Esto hace más fácil y preciso tu
trabajo de corte y recorte de áreas.
• El tablero o pasteboard (el área alrededor de la foto) tiene un color más oscuro. Esto
facilita la distinción rápida entre los documentos fotográficos y los documentos de
dibujo.
• El zoom del documento está ajustado de modo tal que la foto cubra toda la página, y la
herramienta de fotos se abrirá automáticamente.
• Si sueltas documentos fotográficos adicionales sobre la foto principal, estarás
agregando una nueva foto al documento y no reemplazando la foto principal que se
encuentra en el marco. Y la vista se alejará (zoom out) permitiéndote ver la imagen
entera.
• Las imágenes no se reducen a un tamaño de 500 píxeles al importarlas, tal como se
hace como en documentos web normales, sino que se han importado a una escala de
1:1 de modo que, si fijas el zoom a 100%, verás el tamaño total de la imagen.
• Las opciones de suavizado de píxeles se han cambiado. Por defecto, se aplica el modo
de visualización en alta calidad. Esta es la mejor forma de ver imágenes reducidas y las
imágenes a las que se les haya aplicado un "zoom out" para alejar la imagen. Cuando
uno se acerca a la imagen haciendo "zoom in", el suavizado de píxeles estará
desactivado.
En lo que respecta a todas las otras funciones, los documentos fotográficos funcionan
como los otros documentos normales de MAGIX Web Designer 6. Puedes usar cualquiera
de las herramientas de dibujo y de texto como lo haces habitualmente. Si quieres crear un
documento fotográfico con un tamaño específico, puedes cambiar el lienzo o el tamaño de
la página seleccionando "HERRAMIENTAS > OPCIONES y la pestaña "PÁGINA " para introducir
las dimensiones.
Puedes utilizar MAGIX Web Designer 6 para editar fácilmente tus fotos JPEG y guardar el
archivo modificado. A diferencia de la mayoría de los editores de fotos, puedes realizar
repetidas ediciones sin pérdida de calidad, a pesar de que el formato JPEG es un formato
con pérdida (consulta Sin pérdida frente a con pérdida anteriormente en este capítulo).
Esto es porque MAGIX Web Designer 6 puede guardar tus ediciones sin pérdida, junto con
la foto original. Funciona de la siguiente forma.
Primero abre el JPEG con ARCHIVO > ABRIR , mediante arrastrar y soltar o con un clic
derecho en el Explorador de archivos de Windows y eligiendo MAGIX Web Designer 6 en
la lista "Abrir con". La foto se abrirá como un documento de foto.
242 Trabajar con fotos
Edita la foto con las herramientas de foto tal como se describe anteriormente.
Si luego escoges ARCHIVO > GUARDAR (Ctrl+S), el archivo JPEG que has abierto se
sobrescribirá con la imagen modificada. Sin embargo, MAGIX Web Designer 6 también
guarda tu foto en su formato .web nativo por defecto. Este archivo se coloca en una
carpeta principal junto con tu archivo JPEG. Tiene el mismo nombre que tu archivo de
foto, pero con la extensión .web. El archivo .web incluye tu foto original sin las
modificaciones aplicadas y, por supuesto, detalles de tus ediciones.
Por supuesto, si no quieres sobrescribir tu archivo JPEG con los cambios, puedes usar la
opción ARCHIVO > GUARDAR COMO para guardar la foto modificada en otro lugar o utilizar
algunas de las opciones para exportar tu foto en diversos formatos.
Puedes conservar la foto original del archivo .web si la abres, abres la GALERÍA DE MAPAS
DE BITS ,
haces clic derecho sobre la foto y escoges la opción GUARDAR.
En la pestaña Edición de foto del diálogo HERRAMIENTAS > OPCIONES puedes escoger
cambiar el comportamiento de guardado descrito anteriormente. Puedes escoger que no
se guarde automáticamente un archivo .web en la subcarpeta principal, o puedes
seleccionar que el archivo de la foto original se guarde ahí en su lugar.
Ten en cuenta que si desactivas la conservación de la foto original, perderás esta foto
original cuando guardes.
La herramienta de fotos 243
La herramienta de fotos
Introducción
Con la herramienta de fotos podrás recortar fotos o ajustar sus niveles de brillo y nitidez de
forma muy directa y rápida, incluso con las imágenes con muy alta resolución. Esta
herramienta provee:
Todas estas operaciones son interactivas con actualización en vivo. Cuando ajustas los
valores, la imagen se actualiza al instante. Son también no destructivas, lo cual significa
que tu imagen original no se cambia y siempre puedes hacer o deshacer cualquier ajuste.
1. Es no destructiva.
2. Es muy, muy rápida, incluso para las imágenes gigantes.
3. La edición fotográfica no requiere memoria.
Incluso la herramienta de recorte (crop) es no destructiva. Puedes restaurar las áreas que
hayas cortado (clip) o recortado (crop) y ajustar o agrandar el área cortada cuando quieras,
incluso después de que hayas guardado el archivo.
La velocidad es una característica muy importante. Una buena forma de demostrar esto
es que rotes una foto en alta resolución. Con otras aplicaciones, en general tienes que
244 La herramienta de fotos
introducir el ángulo de rotación y luego esperar a que sea procesado. En MAGIX Web
Designer 6 puedes arrastrar y rotar una imagen en resolución total en tiempo real (o
introduce cualquier valor de rotación), y realiza un muestreo bi-cúbico de alta calidad
(bi-cubi sampling) para asegurar los mejores resultados a nivel calidad.
La ventaja de memoria cero se refiere al hecho de que la mayoría de los editores de foto
hacen una copia del mapa de bits en la memoria para poder ofrecer la función de
"deshacer". En general se hace una copia cada vez que ajustas o editas algo en el
documento. Si estás trabajando con fotos digitales grandes y en alta resolución,
necesitarás mucho espacio de memoria para el trabajo de edición. Por ejemplo, una foto
digital de 8 MB necesitará 32 MB de memoria, y si realizas 10 ediciones necesitarás 320
MB de memoria. Con nuestro programa puedes realizar todas las ediciones que quieras y
realizar todas las copias que quieras de tu foto en el documento pero no estarás
ocupando espacio adicional en el archivo, ni tampoco necesitarás RAM adicional.
Para acceder a las HERRAMIENTAS DE FOTO , mueve el cursor del ratón sobre el
ícono de la cámara en la barra de herramientas principal en la parte izquierda de
la ventana. Aparecerá una barra desplegable con íconos para cada una de las
herramientas de foto.
Si estás en la herramienta de selección, haz doble clic en una foto para cambiar a la
HERRAMIENTA DE FOTO .
Los primeros seis botones de la barra de información a la izquierda son comunes a todas
las herramientas y suministran acceso a las funciones GIRAR 90° , IMAGEN
ANTERIOR/SIGUIENTE , AJUSTAR ZOOM y AMPLIAR FOTO A 100% . Estas opciones se
describen más adelante.
La herramienta de fotos 245
Controles para rotar 90°
Los dos íconos de rotación giran la foto o las fotos seleccionadas a 90 grados en sentido
de las agujas del reloj o en sentido contrario.
Anterior y Siguiente
Cuando "abres" una foto utilizando MAGIX Web Designer 6, la foto se carga en un nuevo
documento de foto porque Web Designer presupone que quieres editar o ver la foto
misma, más que utilizarla como parte de un dibujo o de otro documento. Cuando abres
una foto puedes utilizar los botones "Anterior" y "Siguiente" de la barra de información de
la herramienta de foto para cerrar el documento de foto actual y abrir la foto siguiente (o
previa) en el mismo archivo que la foto actual. Esto te permite navegar a través de las fotos
en un archivo sin tener que abrir y cerrar cada una individualmente. Si has hecho cambios
en la foto que no has guardado, se te preguntará si quieres guardar los cambios cuando
pulsas Anterior o Siguiente.
Zoom 1:1
Selecciona una foto y haz clic en el botón zoom 1:1.
El factor del zoom para el documento está establecido de forma que la foto seleccionada
se muestre 1:1 (un píxel de la foto es igual a un píxel de la pantalla). Utiliza esta opción si
quieres trabajar en una foto a tamaño completo en un documento en donde has reducido
el tamaño de la foto.
Así, una foto que se ha reducido a 500 píxeles de ancho, pero cuyo original tenía 1000
píxeles de ancho, se ampliará nuevamente a su valor original. Si el zoom del documento es
100%, significa que cada píxel de la imagen corresponderá a un píxel en la pantalla.Si el
zoom del documento es 100%, significa que cada píxel de la imagen corresponderá a un
píxel en la pantalla.
246 La herramienta de fotos
Herramienta de optimización
Los primeros seis botones de la izquierda (no se ilustran arriba) son comunes a todas las
herramientas y están escritas anteriormente
Auto-optimización
Brillo
Contraste
Saturación de color
Temperatura del color
Desenfoque/Enfoque
Comparación con el original
Pop-ups deslizantes
Los pop-up deslizantes pueden ser utilizados de una o dos maneras:
Desenfoque / Enfoque
Este control desenfoca las imágenes si introduces valores por debajo del cero (negativos) y
si los valores van por arriba del cero (positivos) la imagen se enfocará. Se recomienda que
no uses valores muy altos cuando enfocas las imágenes. Y aplica la opción de "enfoque"
sólo a imágenes que han sido reducidas mucho.
Debido a que todos los cambios de optimización o de niveles son "no destructivos", si
pulsas "Comparar" simplemente estarás eliminando los atributos de optimización, y de
esta forma volverás a la imagen original. El botón "Comparar" puede ser utilizado en
cualquier momento después de haber modificado la imagen.
248 La herramienta de fotos
Recortar o cortar imágenes
El modo más fácil de cortar una foto es arrastrar el cursor sobre la foto o a lo largo de la
misma habiendo seleccionado la HERRAMIENTA DE OPTIMIZACIÓN . El corte se efectúa al
instante de soltar el ratón. La foto cortada resultante tiene controles deslizantes de clip
alrededor de la misma donde puedes ajustar posteriormente los bordes del recorte.
Esta es una operación no destructiva, lo que significa que puedes ajustar el área de corte
después de que la hayas recortado, e incluso puedes deshacer un recorte y restaurar toda
la imagen. Una forma de comprender el proceso es que simplemente ajusta el contorno de
la imagen, pero que toda la imagen permanece dentro del rectángulo. Por ello se llama
recorte y no corte, aunque tiene el mismo objetivo.
Herramienta de corte
Para un corte interactivo y algunas opciones más en relación con las relaciones de
aspecto, entra en el MODO DE CORTE con el botón HERRAMIENTA DE CORTE.
• Puedes ajustar el área de corte si arrastras los controles deslizantes laterales o los de
las esquinas.
• Dentro del área de corte puedes mover la región cortada de lugar si la arrastras con el
cursor.
La herramienta de fotos 249
• Selecciona el botón CORTAR o haz doble clic dentro del área de corte para realizar un
corte.
Podrás darte cuenta si una foto ha sido cortada o no si miras la barra de estado que dirá
"foto cortada".
Borrar
Presiona el botón "BORRAR", o haz clic fuera del área de corte marcada para vaciar el
rectángulo de corte actual.
Consejo: busca "Regla de los Tercios" en Google para obtener más información.
Deshacer corte
Pulsa el botón DESHACER CORTE sobre cualquier foto cortada seleccionada para restaurar
la foto original. Esto restaura el rectángulo de corte, que puedes ajustar o borrar si haces
clic fuera de él.
Ancho / Alto
Luego de dibujar un rectángulo de corte puedes introducir valores directamente dentro de
los campos de ancho y alto en la barra de información fijar valores exactos a las
dimensiones del rectángulo de corte.
Bloquear aspecto
Selecciona el recuadro "BLOQUEAR ASPECTO" para mantener la relación de aspecto del
rectángulo de corte mientras lo arrastras. Los botones de radio a la derecha del check-box
determinan la relación de aspecto utilizada. Selecciona "ACTUAL" para mantener la relación
de aspecto de la foto antes de cortarla. Ten en cuenta que el rectángulo de corte cambia
automáticamente entre la forma orientación de paisaje y retrato a medida que arrastras el
cursor hacia una esquina del rectángulo. Entonces si lo arrastras lateralmente, tiende a
crearse un corte con orientación paisaje. Si lo arrastras hacia abajo, entonces se creará
una región cortada con orientación retrato.
Las relaciones de aspecto más comunes para recortes predeterminados disponibles son
4:3 (mayoría de cámaras digitales para consumidores y televisores y monitores de estilo
antiguo), 3:2 (filmadoras tradicionales y cámaras digitales SLR de alta calidad) y 16:9
(relación de aspecto para televisores con pantalla ancha).
Puedes anular la opción "bloquear aspecto" si pulsas "Ctrl" mientras arrastras el ratón. De
modo que si estás arrastrando un rectángulo de corte (o ajustando uno) sin la relación de
aspecto bloqueada, mientras estás pulsando "Ctrl" entonces se mantendrá el aspecto de
la última relación de aspecto seleccionada. De la misma forma, si tienes la opción
"bloquear aspecto" activada y presionas "Ctrl", se desbloqueará temporalmente el aspecto
bloqueado.
1. Puedes seleccionar diferentes fotos mientras usas las HERRAMIENTAS DE FOTO con
sólo hacer clic sobre ellas. También puedes seleccionar fotos que se encuentran en
un grupo.
2. Si haces clic y arrastras mientras te encuentras en la HERRAMIENTA DE OPTIMIZACIÓN ,
se comenzará un recorte en la foto sobre la que has hecho clic. O, si comienzas a
arrastrar el fondo, el recorte se aplicará a la primera foto que toques durante este
arrastre.
3. El botón DESHACER CORTE en la HERRAMIENTA DE CORTE cambiará el contorno de
cualquier foto cortada, y también las formas creadas arbitrariamente que contengan
un relleno de mapa de bits, a un contorno de rectángulo de la foto completa o a un
mapa de bits utilizado como relleno. Puede ser que tengas que seleccionar el botón
"Borrar" para borrar el rectángulo de recorte (o haz clic fuera del rectángulo).
4. Todas las operaciones para las fotos pueden deshacerse. A diferencia de las fotos
tradicionales o de los editores de píxeles, aquí la foto original no se altera. Esto
significa que puedes realizar cuantos cambios quieras, tan seguido como quieras y
guardar y abrir archivos .xar y .web todas las veces que quieras sin que la imagen se
vea afectada (todas las operaciones de edición son no destructivas y sin pérdidas) y
sin que el tamaño del archivo se modifique.
5. Todas las opciones de la "Herramienta de foto", incluyendo el control de niveles,
operan sobre los objetos rellenados con mapas de bits, y también sobre las fotos
individuales.
6. Si abres una foto en MAGIX Web Designer 6 (con ARCHIVO ->ABRIR ), se abrirá como
un documento de foto. Después de editarla, puedes sobrescribir la foto, si escoges la
opción ARCHIVO ->GUARDAR (Ctrl+S). También se guarda un archivo .web o .xar en
una carpeta principal junto con tu foto modificada, conservando tu foto original y las
ediciones. Consulta el capítulo Trabajar con fotos (en la página 219) para más
información.
La herramienta de OJOS ROJOS te permite eliminar rápidamente los efectos de ojo rojo de
los rostros de las fotos.
252 La herramienta de fotos
Haz clic en el símbolo anterior para ingresar en el modo de ojos rojos. Luego:
• Amplía la vista de los ojos rojos, con la HERRAMIENTA DE ZOOM (EN LA PÁGINA 70) o
simplemente utiliza Ctrl+rueda del ratón.
• Haz clic y arrastra desde el centro del ojo rojo hacia afuera, para crear un parche de ojo
circular. El color rojo se eliminará del área dentro de este círculo.
• Repite los pasos anteriores para cada ojo rojo de tu foto.
Puedes seleccionar cualquier parche de ojo rojo que has aplicado a una foto con un clic
sobre él mientras te encuentras en la herramienta de ojo rojo. Después, puedes pulsar la
tecla eliminar para quitar el parche.
Al borde de la elipse de ojo rojo se le aplica una difuminación de 3 píxeles, para que no se
produzca un corte duro en el área de donde se elimina el ojo rojo. Puedes ajustar
fácilmente este valor de difuminación si seleccionas la elipse de ojo rojo (como se ha
mencionado anteriormente) y ajustas el valor de difuminación con el control de
difuminación principal (del lado derecho de la barra superior), de la misma forma que editas
el valor de difuminación de las formas usuales.
Después de aplicar la herramienta de ojo rojo, los parches de ojo rojo están agrupados
dentro de un GRUPO DE FOTO . Esto tiene como objetivo que, al mover la foto por el
documento, o al transformarla, los parches de ojo rojo se muevan junto con la foto. Ten en
cuenta que esto significa que si quieres seleccionar una elipse de ojo rojo mientras no te
encuentras en la herramienta de ojo rojo, necesitarás pulsar Ctrl mientras haces clic sobre
La herramienta de fotos 253
la elipse (lo que se llama una operación "seleccionar dentro"). Lee el capítulo sobre
Trabajar con fotos para información acerca de los Grupos de foto.
Haz clic sobre el botón LIMPIAR TODO en la barra de información de la herramienta de ojos
rojos para eliminar todas las elipses de ojo rojo de la foto seleccionada actualmente.
Creación de panorámicas
Utilizando la actualización de Panorama Studio puedes obtener una imagen panorámica final sin
costuras de transición.
254 Barras de navegación
Barras de navegación
La mayoría de los sitios web tienen una barra de navegación horizontal o vertical, desde la
que puede accederse a todas las páginas importantes.
MAGIX Web Designer 6 incluye funciones especiales para las barras de navegación, que
facilitan la inserción, edición y eliminación de botones. Los botones de una barra de
navegación pueden ajustar el ancho para coincidir automáticamente con sus etiquetas y
se reposicionan automáticamente cuando realizas cambios. Hasta puedes agregar menús
y submenús desplegables a tus barras y hacer que se puedan agregar o eliminar botones
automáticamente al agregar o eliminar páginas.
Los usuarios avanzados pueden crear sus propias barras a partir de diseños de botones
propios y modificar los diseños de botones existentes en una barra de navegación para
aplicar su nuevo diseño en toda la barra.
Puedes crear barras de navegación a partir de cualquier diseño de botón, pero la mayoría
de los usuarios simplemente usan las numerosas plantillas de las barras de navegación
disponibles en la GALERÍA DE DISEÑOS . Si quieres crear tus propias barras, lee la sección
correspondiente más adelante en este capítulo.
Todos los diseños de barras de navegación de la galería están asociados con un tema en
particular y se han diseñado cuidadosamente para que coincidan con el diseño de página
del mismo tema. Por lo tanto, la mayoría de las páginas web puede crearse si se agrega
de forma manual una barra de navegación que ya está creada en las plantillas de páginas
de cada tema. Sin embargo, cada tema también suministra sus barras de navegación
como elementos independientes, para que puedas agregarlos a tu página web si los
arrastras de la galería y los sueltas en tu página.
Para cambiar los colores de una plantilla de barra de navegación debes hacer lo mismo
que para cambiar el color de los otros elementos del tema: aplica un nuevo esquema de
color de la Galería de diseños o edita los colores con nombre en la línea de color. Consulta
el capítulo Primeros pasos para más información sobre este tema.
Barras de navegación 255
La mejor forma de editar las etiquetas, enlaces y otros atributos de una barra de
navegación y de agregar o eliminar botones, es utilizar el diálogo de propiedades de la
barra de navegación. Haz doble clic sobre una barra para abrir el diálogo o un clic derecho
sobre la barra y escoge "Editar barra de navegación" del menú contextual.
Este es un diálogo modal, lo que significa que no puedes interactuar con el lienzo mientras
este diálogo está abierto en la pantalla. Sin embargo, todos los cambios que realices se
verán reflejados de inmediato en tu barra de navegación en el tablero, de forma que
podrás ver el resultado en instantes. Los cambios que realices en cada sesión del diálogo
se confirman cuando haces clic en ACEPTAR o se eliminan si haces clic en CANCELAR .
Orientación
Escoge la orientación horizontal o vertical que desees para tu barra de navegación. Para
las barras de navegación verticales generalmente querrás que los botones tengan el
mismo ancho (el ancho del botón más ancho), para obtener una barra rectangular.
Consulta la opción AJUSTAR TODOS LOS BOTONES A LA ETIQUETA MÁS ANCHA a
continuación para controlar esto.
256 Barras de navegación
Justificado
Escoge el comportamiento que deseas para tu barra cuando cambie su longitud al editar
etiquetas o añadir/quitar botones. Una barra horizontal JUSTIFICADA A LA IZQUIERDA
crecerá hacia la derecha a medida que agregas más botones o extiendes la longitud de las
etiquetas de los botones. El extremo izquierdo de la barra permanecerá en el mismo lugar
en la página. De forma similar, una barra JUSTIFICADA A LA DERECHA mantendrá su
extremo derecho y crecerá hacia la izquierda. Una barra JUSTIFICADA EN EL CENTRO crece
tanto para la derecha como para la izquierda de forma equitativa. Selecciona la opción
central si, por ejemplo, quieres que la barra de navegación horizontal se centre en la parte
superior de tu página.
Para barras verticales, las opciones de justificación cambian a Arriba, Centro y Abajo. En el
caso de las barras verticales, la configuración determina si la barra crece hacia arriba
(Abajo), hacia abajo (Arriba) o en ambos sentidos (centro) al agregar botones.
Selecciona esta opción para hacer que todos los botones tengan el mismo ancho que el
botón más ancho de la barra. Para las barras de navegación verticales, esto es casi
siempre deseable para obtener una barra rectangular. Para las barras horizontales,
muchas veces la barra tiene un mejor aspecto si todos los botones tienen el mismo
tamaño, pero requiere más espacio, por lo que es posible que no puedas incluir tantos
botones en la barra si esta opción está activada.
Espaciado de botón
Aquí puedes escoger el espacio entre cada botón en la barra de navegación horizontal si
no quieres que cada botón se encuentre justo arriba de su vecino. Simplemente introduce
la cantidad de píxeles de espacio que te gustaría y observa el resultado de inmediato. Es
posible que quieras que el valor sea negativo para que los botones se superpongan un
poco. Esto es útil si el diseño de tus botones es tal que se ve una línea de unión no
deseada entre los botones cuando el espaciado es 0.
Esta es una opción muy importante en el diálogo de BARRA DE NAVEGACIÓN que activa los
enlaces automáticos, es decir, que los botones y los enlaces se agregarán solos a medida
que agregas páginas. Además, todos los cambios que hagas a la barra se reflejarán en
todas las páginas del sitio ni bien cierres el diálogo de barra de navegación. Sin embargo,
esta opción restringe la flexibilidad de la barra de cierta forma. Por ejemplo, no puedes
Barras de navegación 257
editar la barra de navegación directamente en el lienzo para cambiar las etiquetas de los
botones, sino que debes utilizar el diálogo de barra de navegación.
Si eliminas una página de tu sitio web, el botón de la barra de navegación del sitio que
contiene el enlace con esa página se eliminará automáticamente en todas las páginas de
tu sitio.
Sin embargo, tras eliminar la barra de una o más páginas, si luego desactivas la opción de
barra de navegación del sitio (tal vez para editar el diseño de botones que no puede
258 Barras de navegación
realizarse con esta opción activada), y luego vuelves a activarla, la barra se añadirá
automáticamente a todas las páginas del sitio que no la contengan.
Botones y menús
Edita las etiquetas de botones, enlaces y otros atributos de botones con la tabla y los
controles con estructura de árbol en la mitad inferior del DIÁLOGO DE BARRA DE
NAVEGACIÓN . Cada fila de la tabla corresponde a un botón de la barra o a una entrada en
un menú de uno de los botones.
Puedes editar cualquier etiqueta de botón si haces clic en la fila apropiada para
seleccionarlo y luego haces clic en la primera columna para iniciar la edición de la etiqueta.
Para fijar el enlace de un botón, haz doble clic en el campo de la URL o, si la fila ya está
seleccionada, simplemente haz clic en ella. Aparecerá el DIÁLOGO ENLACE DE PROPIEDADES
WEB . Este debería parecerte familiar, puesto que es el mismo diálogo Enlace (en la página
197) que utilizas para agregar otros enlaces a tu página y están disponibles las mismas
opciones. Algunas opciones están desactivadas porque no son aplicables a las barras de
navegación ni a los enlaces de menú, como la opción de foto emergente que sólo funciona
cuando se aplica a una foto.
Haz clic en el texto DOBLE CLIC PARA AGREGAR UN ELEMENTO DEL MENÚ debajo del botón
para comenzar a añadir un menú. O haz clic en el botón AÑADIR en la parte inferior del
diálogo para agregar un elemento de menú detrás del elemento seleccionado. Para cada
elemento de menú que agregues, aparecerá una nueva fila en la tabla. Configuras la
etiqueta, enlace y consejo de herramienta para cada elemento del menú de la misma
forma en que lo haces para los botones. También puedes agregar submenús a cualquier
menú, si primero expandes la estructura de árbol de la entrada del menú.
Separadores de menú
Puedes agregar un separador a tu menú con un clic en el botón AÑADIR SEPARADOR en la
parte inferior del diálogo. El separador se agrega después del elemento de menú
seleccionado en este momento. Los separadores te permitirán agrupar visualmente los
elementos relacionados de tu menú.
260 Barras de navegación
Estilos de menú
Haz clic en el botón ESTILO DE MENÚ… para abrir el DIÁLOGO ESTILO DE MENÚ . Esto te
permite cambiar cómo aparecen los menús y cómo se comportan en tu barra de
navegación.
Fuente
Escoge una fuente para utilizar para el texto de tus menús. Sólo se enumerarán las fuentes
seguras para la web, que son las fuentes que todos los visitantes de tu sitio deberían
tener. También existe la opción de hacer que la fuente sea negrita o para cambiar su
tamaño.
NOTA: Esto no cambia la fuente que se utiliza para las etiquetas de botón de tu barra, sino
la fuente utilizada en los menús. Para cambiar la fuente de las etiquetas de botones,
consulta la sección correspondiente más adelante en este capítulo.
Dirección
Escoge la dirección en la que quieres que tus menús se abran. Para las barras de
navegación horizontales, normalmente querrás que sea hacia abajo y para las barras de
navegación verticales, o bien hacia la izquierda o hacia la derecha dependiendo el lugar de
la página en el que se encuentre tu barra.
Barras de navegación 261
Espaciado
Con esta configuración puedes agregar espacio entre las entradas del menú; si las
separas, el menú será más grande.
Borde
Agrega un borde a los paneles de los menús al fijar un ancho de borde en píxeles.
Animación
Por defecto, los menús se abrirán de forma instantánea, pero aquí puedes elegir si quieres
que el menú tenga una animación mientras se abre.
Transparencia
Puedes hacer que tus menús sean semitransparentes para poder ver a través de los
paneles de menú. Introduce el nivel de transparencia que te gustaría como porcentaje.
Tal como se ha descrito anteriormente, si la opción BARRA DE NAVEGACIÓN DEL SITIO está
activada para una barra de navegación, entonces todos los cambios realizados a una
barra de navegación se aplicarán automáticamente a todas las otras páginas, incluyendo la
ubicación de la barra en la página.
Sin embargo, si no tienes esta opción activada, debes utilizar la función ARREGLO >
ACTUALIZAR OBJETOS REPETIDOS para copiar los cambios que has realizado a la barra en
la página actual a todas las otras páginas. Ten en cuenta que esto también actualizará
todos los otros objetos repetidos en la página, como los encabezados o logos, y la página
actual se utilizará como referencia. Lee el capítulo Trabajar con objetos para más
información sobre objetos repetidos.
Edición en el lienzo
Utiliza ARREGLO > ACTUALIZAR OBJETOS REPETIDOS PARA APLICAR TUS CAMBIOS A TODAS
LAS PÁGINAS QUE CONTIENEN UNA COPIA DE LA BARRA.
262 Barras de navegación
Puedes modificar la fuente utilizada para las etiquetas de botones de una barra de
navegación fácilmente. Selecciona la barra con un clic en ella. Luego ve a la HERRAMIENTA
DE TEXTO y selecciona de la lista de fuentes que se encuentra a la izquierda la BARRA DE
INFORMACIÓN DE LA HERRAMIENTA DE TEXTO . A medida que desplaces el cursor del ratón
sobre las diferentes fuentes de la lista, la barra de navegación se adaptará de inmediato
para que puedas ver el aspecto de tu barra con esa fuente. Selecciona la fuente que
desees. Si tu barra tiene un estado MouseOver, su fuente también se adaptará.
De la misma forma, puedes cambiar el tamaño de la fuente con el control del tamaño de
fuente que se encuentra junto a la lista de selección de fuente.
Sin embargo, si la barra entrante es del mismo tema y tipo que la barra de navegación del
sitio existente (tiene el mismo nombre), inmediatamente se actualizará para coincidir con la
barra de navegación del sitio existente. De esa forma, esta barra no aparecerá con su
forma original en tu página.
Si la barra es de un tema o tipo diferente (tiene un nombre repetido diferente) aparecerá sin
modificación.
Puedes crear una barra de navegación a partir de cualquier tipo de diseño de botón. La
GALERÍA DE DISEÑOS contiene varios diseños de botones diferentes o puedes dibujar tus
propios diseños. Consulta la sección Creación de los botones MouseOver propios (en la
página 56) del capítulo Primeros pasos para más información sobre este tema. El botón
puede o no incluir un estado MouseOver.
Para crear una barra de navegación, selecciona el botón y luego escoge ARREGLO >
CREAR BARRA DE NAVEGACIÓN . El DIÁLOGO DE BARRA DE NAVEGACIÓN aparecerá y podrás
agregar más botones a tu barra de inmediato, de la misma forma que con las otras barras
de navegación.
También puedes crear barras de navegación con más de un diseño de botón (para que
puedas tener diferentes diseños para tu primer y/o último botón de la barra). Consulta la
sección a continuación para información sobre cómo hacerlo.
Barras de navegación 263
Restricciones de diseño de botones
Existen algunas reglas que debes seguir cuando crees tus propios botones para utilizar en
barras de navegación.
Texto en un botón
Cada estado del diseño de botón debe diseñarse como objeto de grupo que contenga el
objeto de texto que puede servir como etiqueta de botón. Este objeto de texto debería ser
un objeto de texto simple, no una columna de texto ni un área de texto. Es decir, que
debería crearse en la Herramienta de texto con un clic en la página y escribiendo, sin
arrastrar una línea ni área de texto primero.
Márgenes de botón
En esta sección nos referimos a "márgenes" como los espacios entre la etiqueta y el final
del botón. Para los botones extensibles (aquellos para los que se ha activado la opción
"Ajustar el ancho de los botones a las etiquetas") esto está determinado por el botón
master a partir del que has creado tu barra de navegación. Al ajustar los márgenes del
botón master, configuras los márgenes para todos los otros botones de la barra, que se
basan en él.
Barra original
Edición interior
Para algunas barras puedes realizar cierto tipo de edición del diseño de botón
directamente en el primer botón, si utilizas la opción para seleccionar el contenido. Esto te
permite seleccionar las formas dentro de un grupo de botones. Lee la información acerca
de la herramienta de selección en el capítulo Trabajar con objetos para más detalles.
Sin embargo, no puedes realizar la edición interior, si alguna de las siguientes opciones
está activada en el diálogo de barra de navegación.
Con las opciones desactivadas, puedes utilizar seleccionar dentro y modificar las formas
que conforman tu botón con las herramientas de dibujo usuales.
Barras de navegación 265
Nota: Si tu barra de navegación tiene la opción "Barra de navegación del sitio" activada,
deberás volver a activar la opción después de reagrupar la barra modificada, de ser
necesario.
Una vez que has desagrupado la barra, dejará de ser una barra de navegación y tendrás
un grupo de botones separado para cada estado de botón. Además, si la opción "Mismo
ancho para todos los botones" se ha activado, al desagrupar, es posible que los anchos
de botones cambien porque esta opción es sólo efectiva mientras los botones son parte
de una barra de navegación. La mayoría de las veces querrás realizar cambios al diseño
del botón master y dejar los otros botones en la página. Se utilizan cuando reagrupes tu
barra de navegación para recuperar todas las etiquetas de botones, enlaces, etc. para que
no tengas que volver a ingresarlos.
Si has establecido un estado MouseOver, los dos grupos que conforman el botón master
estarán unidos en un "grupo suave" para que permanezcan juntos cuando los arrastres
por la página. Sepáralos con ARREGLO > BORRAR GRUPO SUAVE (Ctrl+Alt+U). Luego
puedes desagrupar cada estado de botón de las capas MouseOff y MouseOver (Ctrl+U)
para trabajar en sus respectivos diseños. Consulta la sección "Creación de los botones
MouseOver propios" del capítulo Primeros pasos (en la página 56) para información sobre
cómo crear botones.
Recuerda reagrupar cada uno de los estados de botón y luego volver a crear el grupo
suave para conservar los dos botones de estado juntos una vez que hayas terminado con
la edición. Házlo asegurándote de que ambas capas estén activadas en la Galería de
páginas y galerías (en la página 275), selecciona ambos grupos de estado y luego
ARREGLO > APLICAR GRUPO SUAVE . Lee el capítulo Trabajar con objetos para más
información sobre grupos suaves (en la página 108).
Es una buena idea comprobar que el botón funcione de forma esperada con una vista
previa de tu página, antes de volver a montar la barra. Para volver a armar la barra,
selecciona el botón modificado y escoge ARREGLO >CREAR BARRA DE NAVEGACIÓN . Los
botones no modificados en la página se utilizan para volver a crear la página tanto si los
seleccionas o no.
266 Barras de navegación
Muchas veces es posible que el primer y el último botón de una barra sean diferentes. Por
ejemplo, una barra puede tener extremos redondeados con botones rectangulares en el
medio.
Las barras de navegación como estas necesitan 2 (si sólo un extremo es diferente) o 3 (si
ambos extremos son diferentes) diseños de botones. Posiciona los diseños de botón en
orden de izquierda a derecha, tal como quieres que aparezcan en una barra de
navegación horizontal. O de arriba hacia abajo tal como te gustaría que aparecieran en una
barra vertical. Luego selecciona los tres diseños de botones (junto con los estados
MouseOver, si los tienen) y escoge ARREGLO > CREAR BARRA DE NAVEGACIÓN.
Cuando creas una barra a partir de más de un botón como este, MAGIX Web Designer 6
necesita saber cómo quieres que se utilicen esos botones en la barra. Por lo tanto, se
muestra un diálogo que solicitará que escojas entre una variedad de opciones.
Todos los botones iguales: escoge esta opción si quieres que todos los botones de la
barra tengan el diseño del primer botón que has seleccionado. Este es el tipo de barra de
navegación más común.
PRIMER BOTÓN DIFERENTE: si el primer botón debe tener un diseño diferente al resto de los
botones de la barra, escoge esta opción.
Barras de navegación 267
ÚLTIMO BOTÓN DIFERENTE: si el último botón debe tener un diseño diferente al resto de los
botones de la barra, escoge esta opción. Un ejemplo en el que esta opción es necesaria
es una barra que muestra una división entre cada botón de la barra. Todos menos el
último botón necesitarán el divisor a la derecha del diseño del botón.
El último botón en este ejemplo es diferente porque no tiene un divisor en el borde derecho.
PRIMER Y ÚLTIMO BOTÓN DIFERENTES: esta opción te permite especificar los diferentes
diseños de botones para el primer y el último botón para dar a tu barra los extremos
finales. Por supuesto, debes haber seleccionado al menos 3 botones para que esta opción
sea válida.
268 Widgets de sitios web
Un widget es un objeto que puedes colocar en tu página que es más que un gráfico, una
imagen o un texto estático. Todos los widgets tienen algún tipo de código HTML (y
muchas veces una combinación de Javascript y Flash), que el navegador web ejecuta para
mostrar el widget y reproducir su comportamiento. MAGIX Web Designer 6 muestra un
"objeto de marcador de posición estático" en la página para indicar el tamaño y posición
de un widget en la página web final, que puede colocarse en cualquier lugar de la página.
Cuando exportes o generes la vista previa de tu página, el objeto de marcador de posición
se reemplaza con el código actual para el widget, de forma que el widget funciona tal
como lo esperas en tu página web.
En general, un marcador de posición es una imagen que parece una instantánea estática
del widget mismo, pero también puede ser simplemente un rectángulo o cualquier otro
Widgets de sitios web 269
objeto. El marcador de posición debe tener las mismas dimensiones que el widget, de
forma que puedas posicionarlo con respecto al otro contenido de tu página.
La buena noticia es que MAGIX Web Designer 6 puede renderizar las imágenes de
posición de marcador por ti. En general, solo debes darle a MAGIX Web Designer 6 el
código o archivo para un widget y él se ocupará de todo lo demás.
Para agregar un widget, simplemente arrástralo y suéltalo desde la galería hasta tu página.
Se abrirá una ventana que, en realidad, es el navegador de Internet que funciona dentro de
MAGIX Web Designer 6. Esto es similar a la ventana de vista previa que se muestra
cuando haces clic para ver la vista previa de la página y los botones del sitio web en la
barra de herramientas web. Sin embargo, esta ventana tiene algunos botones adicionales
en la parte inferior que te explicaremos más adelante.
Inserción
Pulsa el botón AYUDA al final de la ventana para ver información que te guíe durante el
proceso de configuración e inserción del widget. Para la mayoría de los widgets, deberás
llegar al punto en que la página web del widget te muestre el código HTML que necesita
insertarse en tu página web. Cuando sea visible, generalmente puedes hacer clic en el
botón Insertar en la parte inferior de la ventana. Entonces, MAGIX Web Designer 6
encontrará el código HTML y lo insertará en tu página por ti.
Para algunos widgets, MAGIX Web Designer 6 no puede tomar el código HTML
directamente desde la página y deberás copiar el código al portapapeles. Selecciona el
código en la ventana del navegador y pulsa Ctrl+C. Muchos widgets te facilian esto porque
te suministran un botón de copia junto al código. Una vez que has copiado el código, haz
clic en el botón INSERTAR .
Ahora, todo lo que debes hacer es realizar una vista previa de tu página web y verás el
nuevo widget en funcionamiento.
Los proveedores de widgets que te ofrecen una cuenta generalmente conservarán una
copia de un widget que has creado. Esto significa que puedes iniciar sesión en tu cuenta y
encontrar, modificar e insertar un widget que has creado previamente. Insertar widgets
existentes es como insertar widgets nuevos, simplemente haz clic en INSERTAR cuando
veas el código HTML o copia el código HTML para el widget en el portapapeles y luego
haz clic en Insertar.
Widgets de sitios web 271
MAGIX Web Designer 6 incluye compatibilidad directa con algunos tipos de archivos que
es posible que quieras añadir a tu página. Para estos archivos, puedes simplemente
arrastrarlos y soltarlos desde el Explorador de Windows hasta tu página o utilizar la opción
ARCHIVO > Importar.
Archivos Flash
Para incluir una animación Flash en tu sitio web, importa el archivo Flash (.swf). El archivo
Flash se copia en la carpeta de soporte de tu diseño, de forma que se exportará y
publicará con tu sitio web. Una imagen de marcador de posición se renderiza y se coloca
en tu página web.
Haz una vista previa de tu página para ver la animación Flash en funcionamiento en tu
página web. Por supuesto, debes tener Flash instalado para poder reproducirla con éxito.
272 Widgets de sitios web
GIF animados
Agrega un GIF animado a tu página de la misma forma en que agregas archivos Flash.
Importa o arrastra y suelta el archivo GIF hasta la página. Se copiará a la carpeta de
soporte del diseño y se generará una imagen de marcador de posición estática. Cambia el
tamaño y reposiciona el marcador de posición, luego haz una vista previa de tu página y
listo.
Archivos PDF
Puedes importar archivos PDF a un documento web en dos formas diferentes. O bien lo
importas para que el contenido del archivo se copie en tu página (al igual que cuando
importas una foto). O bien puedes agregar un enlace a una copia del archivo en tu sitio
web y dejas que el archivo se publique en tu sitio. Al importar un archivo PDF se te dará a
escoger entre estas dos opciones.
Un clic sobre el enlace de tu página exportada generalmente abre el archivo PDF, pero el
comportamiento exacto varía según la configuración del navegador del usuario.
Existen cientos o miles de sitios que ofrecen widgets de alguno tipo y la Galería de diseños
brinda acceso a un pequeño subgrupo de ellos. Casi todos los widgets se ofrecen
mediante un breve código HTML. El proveedor del widget generalmente te suministra
instrucciones simples para insertar el código en tu página web, pero con MAGIX Web
Designer 6, esto es todavía más fácil.
Para estos widgets, el objeto de marcador de posición determina simplemente los límites
del área en que el widget puede renderizar, de forma que reducir el tamaño del marcador
de posición significará que el widget se verá recortado en tu página. La imagen del
marcador de posición se regenera cada vez que cambias su tamaño por lo que reflejará un
recorte del widget también, tal como se ilustra en el ejemplo.
Marcador de posición con el tamaño por Marcador de posición con tamaño reducido
defecto
Este es un ejemplo del botón "Comprar ahora" de PayPal que permite vender bienes y
servicios desde tu página web. Este widget está disponible en la Galería de diseños.
De la misma forma, hacer que el marcador de posición de estos widgets sea más grande
resultará en un espacio vacío alrededor del widget en la página y en la imagen del
marcador de posición. Para widgets como este, que no cambian de tamaño
correctamente cuando se modifica el tamaño del marcador de posición, lo mejor es
conservar el tamaño original por defecto.
Hay algunos widgets que pueden mejorarse si se cambia el tamaño del marcador de
posición, aun cuando el widget en sí mismo no cambie su tamaño. Algunos widgets
llenarán el contenedor en el que están insertos, lo que significa que parecerán más
grandes y habrá espacios en blanco que ocupan el espacio. Puedes experimentar
cambiando el tamaño del widget en cada dirección y reduciendo el widget sin perder
partes de él.
Por ejemplo, este widget se ha renderizado demasiado ancho y alto de forma que se
desperdicia espacio abajo y a la derecha de los controles. Si reduces el tamaño, el tamaño
de los controles no cambiará, sino que la forma se recortará. El resultado es un marcador
de posición más claro que ocupa menos espacio en la página.
274 Widgets de sitios web
Marcador de posición con el tamaño por defecto Marcador de posición más angosto y
corto
Si no quieres que MAGIX Web Designer 6 cree una imagen de marcador de posición,
puedes fijar una personalmente. Primero crea un objeto de marcador de posición (tal vez
un rectángulo del tamaño adecuado o una imagen importada que quieras utilizar para
representar el widget en tu página). Selecciona el objeto y luego abre la pestaña Marcador
de posición en el DIÁLOGO HERRAMIENTAS > PROPIEDADES WEB .
En este diálogo puedes escoger si deseas asociar el objeto seleccionado con un archivo
Flash u otro archivo o con un código HTML que pegues en el diálogo. Lee la sección
PESTAÑA MARCADOR DE POSICIÓN del capítulo diálogo de Propiedades web (en la página
212) para más detalles en este diálogo.
Más información
Nota para usuarios de versiones de este software más antiguas: esto sustituye la GALERÍA
DE CAPAS
La GALERÍA DE PÁGINAS Y CAPAS enumera todo lo que tienes en tus documentos, desde
las páginas y las capas hasta cada elemento individual de la página. Ofrece una forma de
seleccionar, ocultar, bloquear y reordenar estos elementos.
Puede trabajar en muchos niveles. En el nivel más alto se pueden enumerar sólo las
PÁGINAS y suministrar una forma directa y fácil de reordenar el orden de éstas
(arrastrándolas) para nombrar, copiar o borrar las páginas.
En un nivel inferior se pueden mostrar todas las CAPAS en cada página y puedes cambiar
el orden, renombrar y también bloquear y ocultar cualquier capa de una forma similar.
El nivel de objeto en la galería de Páginas y capas sólo está disponible en Xara Designer
Pro.
Páginas
Capas
Elementos de página que pueden incluir
grupos
Contenidos de
grupo
...etc
Control de página
• Muestra una lista de páginas
• Agregar una nueva página, duplicar o borrar páginas
276 Galería de páginas y capas
• Cambiar el orden de página arrastrándolas
• Renombrar páginas
Control de capas
• Muestra todas las capas en cada página, desde la parte inferior (por lo general la capa
de fondo) hasta la capa más alta
• Crear nuevas capas, borrar, reordenar y renombrar capas
• Ocultar o mostrar capas
• Bloquear capas (convierte las capas en no editables)
• Activar Solo para una capa: desactiva todas las otras
Además, la galería de PÁGINAS Y CAPAS muestra una pequeña vista en miniatura de cada
elemento y una vista en miniatura más grande si pasas el cursor del ratón por encima.
Si mantienes el cursor sobre el icono de la página pequeña, obtienes una vista previa de la
miniatura de la página.
Galería de páginas y capas 277
La página de fotos ha sido ampliada, haz clic en la pequeña flecha que apunta hacia la derecha
para mostrar todas las capas de esta página.
La capa inferior "Page background (Fondo de página)" está bloqueada. La capa denominada
MouseOff es la capa activa o actual que es donde aparecerán todos los nuevos objetos. Las 4
capas superiores están ocultas (icono del ojo cerrado), de modo que en el documento sólo son
visibles la capa de fondo y la capa MouseOff.
Páginas
Puedes renombrar una página haciendo haciendo dos veces clic (despacio) en el nombre
de la página. (El primer clic seleccionaría la página.) Esto se parece mucho a renombrar
archivos en Windows Explorer. Del mismo modo que es una forma útil de identificar
páginas en documentos largos, el nombre de página se usa cuando el documento se
exporta como página web. Por este motivo no es posible usar ciertos caracteres o
caracteres de símbolo en el nombre (no son aceptados como nombres de páginas web).
Los botones NUEVO , DUPLICAR y BORRAR hacen lo que sus nombres sugieren. Observa
que primero tienes que haber seleccionado una página (haz clic para que resalte en azul
como se muestra arriba) para que estos botones funcionen en las páginas. (Si has
seleccionado una capa, por ejemplo, funcionarán en el nivel de capa).
La opción NUEVO creará una página vacía del mismo tamaño que la página seleccionada
actual.
Puedes expandir (abrir) la página para mostrar los contenidos de la página haciendo
clic en la flecha pequeña que apunta a la derecha o haciendo doble clic.
278 Galería de páginas y capas
Repitiendo la misma operación colapsará (cerrará) la vista de página.
Manteniendo el cursor del ratón sobre el pequeño icono de página aparecerá una
miniatura de pop·up de la página.
Capas
¿Qué son capas? Todo en tu documento tiene un orden de apilamiento · esto significa que
nuevos elementos son posicionados encima de elementos más antiguos de la página,
como si estuvieras añadiendo trozos de papel en tu escritorio. Puedes hacer clic para
mover cualquier objeto, pero si tu documento tiene docenas o incluso cientos o miles de
elementos, tu tarea puede volverse desordenada y difícil. Quizás quieras trabajar en
elementos que están tapados por elementos que se encuentran encima.
Las capas son útiles para organizar páginas o dibujos más complejos que contienen
numerosas partes separadas. Utilizando capas puedes agrupar una colección de
elementos y luego activar o desactivar la colección entera (hacerla visible u ocultarla) a
través de una operación fácil. Imagínate que una capa es un sobre transparente de
plástico que contiene una pila de papeles separados. Abriendo el sobre puedes acceder a
su contenido y re·arreglarlo. Pero tu escritorio puede que contenga una pila de dichos
sobres y, tal y como puedes volver a arreglar los sobres, también puedes volver a ordenar,
de forma similar, las capas.
Por lo tanto, las capas son grupos de elementos. Las capas pueden hacerse invisible para
ocultar partes de tu documento, lo que hace que tus áreas de trabajo sean menos
desordenadas y más fáciles de manejar. Puedes asignar nombres a las capas o puedes
crearlas o borrarlas fácilmente. Y de igual modo que puedes hacer clic en el icono de la
pequeña flecha para abrir una página y ver su contenido (las capas en la página), puedes
hacer lo mismo con cada capa para ver los contenidos de esa capa.
La capa actual
Cuando creas algún objeto en la página, se coloca en una de las capas, llamada la capa
activa o simplemente la capa actual. En un documento en blanco esto se llama Capa 1 o,
en el caso de documentos Web, se lo denomina MouseOff. La capa actual se señala con
una marca redonda en el lado derecho.
Importante: todos los elementos, fotos o texto nuevo que se dibujen y todos los
elementos pegados se colocan en la capa actual marcada con el símbolo.
Galería de páginas y capas 279
Puedes cambiar la capa actual, simplemente con un clic sobre su hilera en la Galería de
objetosGalería de páginas y capasmprender que puedes seleccionar un objeto en
cualquier capa o incluso en múltiples capas, sin que se encuentren en la capa actual. Esta
capa actual simplemente indica el lugar en donde se colocarán los nuevos elementos.
Esta Galería de páginas y capas de ejemplo muestra que la capa actual se llama MouseOff (la
página actual se llama fotos). Entonces, si dibujas algo nuevo se colocará en la capa MouseOff.
Operaciones de capa
Puedes renombrar una capa haciendo haciendo dos veces clic (despacio) en el nombre de
la capa. (El primer clic seleccionaría la capa.) Esto se parece mucho a renombrar archivos
en Windows Explorer.
Si mueves el cursor del ratón sobre los pequeños iconos, se mostrará una miniatura
del contenido de la capa.
Cuando selecciones una capa (hacer clic para resaltar la capa), los botones NUEVO ,
DUPLICAR y BORRAR en la parte superior de la galería de páginas y capas harán lo que sus
nombres sugieren. El botón NUEVO creará una capa nueva vacía y la posicionará en la
parte superior de la pila. Puedes cambiar el orden arrastrándolo a la posición requerida.
El botón de propiedades
Esto abre una ventana de diálogo donde puedes crear nuevas capas con nombre y líneas
guía con valores numéricos precisos. También puedes utilizar esto para modificar el color
de los objetos de la capa guía.
Lee la sección OBJETOS GUÍA Y LÍNEAS GUÍA en el capítulo Trabajar con objetos (en la
página 105) para más información.
Galería de páginas y capas 281
Capas especiales
CAPAS DE FONDO son capas que no se imprimen, que aparecen en el fondo del
documento, debajo de todos los otros elementos. Al aplicar un color al fondo de la página
(arrastrar y soltar desde la línea de color) esto creará automáticamente una capa de FONDO
DE PÁGINA . En general, está bloqueada.
Al guardar un documento como un sitio web, las capas de fondo se convierten en fondos
de página web. Consulta el capítulo Primeros pasos (en la página 16) para más
información acerca de la configuración de los fondos de página web y la utilización de las
capas de fondo.
La CAPA DE GUÍAS es el lugar en donde se colocan las líneas guía o los objetos guía.
Cuando creas una línea guía, se generará automáticamente una capa de guías. Podrás
seleccionar la capa de guías y colocar todo lo que desees en esta capa, lo que funcionará
como una guía de ajuste.
Lee la sección Objetos guía y líneas guía en el capítulo Manejo de objetos para más
información.
Ocultar capas
Modo Solo
Si haces clic en cualquiera de los iconos en la columna junto a cada capa, activará el
modo "solo" de esta página, lo que significa que se ocultará todo lo demás, salvo esta
capa. Ahora puedes trabajar sobre esta capa aislada. Un clic en el botón restaurará el
estado anterior.
282 Galería de páginas y capas
También puedes hacer clic y arrastrar hacia abajo la columna de iconos para navegar
rápidamente por las capas independientemente de todo lo demás.
Para salir del modo Solo, haz clic en el botón o en el botón más grande en la parte
superior de la galería.
Bloquear capas
Un clic en el ícono de candado en el final derecho de la fila de capa bloquea la capa (el
icono adopta la forma de un candado cerrado ). Ahora no podrás seleccionar ningún
otro objeto en esa capa. Al hacer clic en los elementos cerrados, los atravesarás como si
no estuvieran allí y se seleccionarán los elementos que se encuentran abajo. Con otro clic
en el icono del candado, se vuelven a desbloquear. De forma alternativa puedes hacer clic
en el botón MÁS.. y seleccionar la opción DESBLOQUEAR TODO .
Grupos suaves
Hay una excepción en las reglas de bloqueo. Si un elemento en una capa bloqueada
forma parte de un Grupo suave (en la página 108), al seleccionar u operar ese grupo
suave, se selecciona y opera asimismo cualquier elemento bloqueado de ese grupo suave
(para esto están pensados los grupos suaves).
Estos dos controles en la parte superior de la Galería de páginas y capas son un shortcut
para ver todos los elementos de la página actual o desbloquearlos. Invalidan
temporalmente todos los objetos individuales y configuración de capas. Un segundo clic
sobre los controles restaurará el estado anterior. Es decir, que ésta es una forma rápida de
ver o desbloquear todo, en todas las capas, realizar alguna operación y después regresar
al estado anterior.
Estas opciones son similares a las anteriores, pero no son interruptores. Al seleccionar una
de las opciones, todas las capas se activarán o desbloquearán y no existe una forma fácil
de restaurar el estado anterior, sino que deberá volver a seleccionarse individualmente el
estado oculto o bloqueado de todos los elementos independientes.
Galería de páginas y capas 283
Hay varias formas de mover objetos entre capas. Primero, selecciona el objeto o los
objetos que quieras mover, y, a continuación
• CORTA (Cortar) el objeto (Ctrl+X). Asegúrate que la capa de destino es la capa actual
(mostrada con , haz clic en la capa si no es así) y luego haz clic en PEGAR o PEGAR
EN LUGAR . No puedes hacer esto al revés. Asegúrate de que la capa actual está
seleccionada como la capa actual y luego corta (Cortar) el objeto (que puede
encontrarse en cualquier capa) e inmediatamente vuelve a pegarlo (Pegar) (siempre se
pegará en la capa actual).
• Utiliza los elementos del menú ARREGLO MOVER A LA CAPA DE ADELANTE / MOVER A LA
CAPA DE ATRÁS para mover los objetos seleccionados a una capa más arriba o abajo.
284 Animaciones en Flash
Animaciones en Flash
Introducción
MAGIX Web Designer 6 tiene un enfoque tradicional con respecto a las animaciones en
Flash. Puedes crear frames claves (o snap shots) de tu animación a través del tiempo, y
MAGIX Web Designer 6 producirá automáticamente todos los frames que sean necesarios
entre un frame y otro (pasos intermedios), es un proceso llamado "tweening" (generación
de transiciones).
El próximo frame clave tiene la estrella en otra posición, la forma se ha rotado un poco, se ha
reducido su tamaño y se ha cambiado su color.
MAGIX Web Designer 6 creará un archivo en Flash animado con movimientos suaves y fluidos
porque los frames intermedios se generan de forma automática. Este proceso se llama
"tweening".
El mismo ejemplo mostrando los frames intermedios (in-between frames) pero con un cambio de
transparencia.
Para ilustrar lo pequeñas y compactas que pueden llegar a ser las animaciones flash de
MAGIX Web Designer 6, el anterior ejemplo animado que dura un segundo y contiene 24
frames (de modo que el vídeo se reproduce suavemente a 24 frames por segundo) crea un
archivo flash de tan sólo 700 bytes.
El último ítem, los cambios de color, pueden aplicarse a las fotos a las que se ha aplicado
un tono continuo. No puedes transformar una foto de colores completos en una foto de
tono continuo, pero puedes cambiar una foto con un color de tono continuo en otro color
de tono continuo.
Porque la forma de un objeto cambia, no se puede realizar esta acción en las animaciones
en Flash de MAGIX Web Designer 6.
Principios básicos
Para indicarle a MAGIX Web Designer 6 qué objetos quieres animar, debes
colocarle un nombre a cada objeto (con el botón CREAR NUEVOS NOMBRES que
se encuentra en la barra de información de la HERRAMIENTA DE SELECCIÓN ).
Para más información sobre cómo colocarle nombres a los objetos. ver la sección
"Nombrar objetos" en el capítulo "Trabajar con documentos".
Animaciones en Flash 287
Aquí tienes un resumen de los pasos a seguir cuando quieres crear una animación nueva:
MAGIX Web Designer 6 crea un frame clave nuevo con sólo pulsar un botón (básicamente
lo que hace es copiar el frame anterior). La GALERÍA DE FRAMES te permite ver cualquier
frame clave y puedes ajustar el orden y el tiempo de duración de los frames. La GALERÍA
DE FRAMES se explica en detalle más adelante en este capítulo.
Para aquellos que estén familiarizados con las funciones animadas de GIF en el MAGIX
Web Designer 6 (o sus predecesores) todo este proceso les va a ser familiar. La diferencia
es que con los archivos en Flash el MAGIX Web Designer 6 puede crear automáticamente
todos los pasos intermedios (tween steps) para producir animaciones más fluidas y
compactas que las animaciones GIF.
Nota: debes introducirle un nombre a los objetos que quieras animar entre un frame
clave y otro. Todos los otros objetos se mantendrán visibles pero estáticos por el tiempo
de duración del frame hasta que aparezca el próximo frame. Para borrar un objeto de una
animación, bórralo sólo en el primer frame clave en el que no quieres que aparezca.
Tu primera animación
Se abrirá un nuevo documento y verás la barra de botones para animaciones que incluye
algunos botones relevantes para la animación.
288 Animaciones en Flash
1. Dibuja una forma simple, por ejemplo un rectángulo redondeado, con la
herramienta de rectángulo (pero puede tener cualquier forma).
2. Haz clic sobre el icono APLICAR NOMBRE en la barra de información de la
HERRAMIENTA DE SELECCIÓN y ponle el nombre "forma".
3. Haz clic sobre el botón COPIAR FRAME para crear un segundo frame clave.
Modifica la forma según lo desees. Puedes ajustarla utilizando cualquiera de
las seis formas de animación descritas anteriormente en este capítulo.
4. Pulsa el botón de VISTA PREVIA DE ANIMACIÓN FLASH para visualizar la
animación.
Por defecto, el tiempo de duración de cada frame clave dura medio segundo. Para
producir una animación más larga, ve a la sección "Duración de frames para película Flash
y pasos intermedios", que se encuentra más adelante en este capítulo.
No estás limitado a incluir un solo objeto en movimiento por frame clave, puedes tener
todos los objetos que quieras en cada frame clave. Sólo tienen que pasar por algún tipo
de transformación en el siguiente frame clave (y todos tienen que tener un nombre) para
que sean animados.
El primer frame clave tiene algo de texto simple y una forma simple dentro de un rectángulo
estático.
Frame clave 1
Frame clave 2
Selecciona ARCHIVO > EXPORTAR ANIMACIÓN y luego escoge Flash en GUARDAR COMO
TIPO .
La página de vista previa te mostrará la animación final e información útil como las
dimensiones de la animación, tamaño del documento, etc. También incluye instrucciones
simples sobre cómo insertar la animación en una página web.
Consulta la sección Carpetas de soporte (en la página 76) del capítulo Trabajar con
documentos para más información.
La galería de frames
Una galería de frames típica. El frame 3 está seleccionado y por eso está visible.
Este muestra una lista de los frames claves en tu documento. Para visualizar cualquier
frame clave, haz clic sobre su nombre en la galería.
La GALERÍA DE FRAMES muestra los frames de arriba hacia abajo. El primer frame está
primero en la lista y cada frame que añadas aparecerá al final de la lista. Puedes
re-ordenar los frames arrastrándolos hacia la posición que desees en la lista. La galería
tiene varios botones para realizar las operaciones más importantes como crear un frame
nuevo, borrar o copiar un frame seleccionado (éste será agregado al final).
El orden de los frames es inverso al orden de las versiones anteriores del Web Designer.
Otra forma de visualizar el diálogo de las propiedades de la animación es hacer doble clic
sobre el nombre de un frame en la galería de frames.
Nota: Puedes elegir el nombre que quieras para los frames. No tienen que llamarse Frame
1, Frame 2, etc. Las animaciones siempre se reproducirán siguiendo el orden de los
frames de arriba hacia abajo, no importa qué nombre tengan.
Copiar objetos
Puedes copiar objetos de un frame a otro de la forma usual (copia el contenido, selecciona
el nuevo frame y luego pégalo al nuevo frame). La opción "Editar > Pegar en lugar" ("Ctrl +
× + V") es muy práctica para cuando quieras ejecutar esta acción, ya que siempre se
pegarán los objetos en la misma posición que el lugar de donde los copiaste pero en el
nuevo frame.
Animaciones en Flash 293
Cuando copias un objeto, el nombre se copia junto a él, pero asegúrate de que no haya
otro objeto con el mismo nombre porque sino surgirán errores.
Fotos
Como los documentos en Flash están compuestos por formas vectoriales, y éstos se
transforman fácilmente, los documentos pueden ser muy pequeños. Se pueden integrar
fotos y mapas de bits a las animaciones en Flash, pero al menos que seas especialmente
cuidadoso se convertirán en documentos de animación muy grandes. Puedes realizar 5 de
las 6 transformaciones centrales sobre mapas de bits y fotos (puedes mover los objetos,
cambiarles el tamaño, aplastarlos, rotarlos y hacerlos desaparecer).
Los documentos en Flash pueden incluir imágenes en PNG y JPEG, tal como los
documentos .xar. Si mantienes el tamaño y la resolución bajas podrás crear animaciones
pequeñas en Flash con fotos. La mejor forma de incorporar fotos en JPEG con el tamaño
más pequeño posible y con la compresión más alta que puedas aceptar.
Cuando realices una transición (tweening) para los mapas de bits o para una foto, sólo se
guarda una copia del mapa de bits en el documento en Flash, por lo que puedes hacer
transformaciones en un mapa de bits que no requieran mucha memoria. En otras
palabras, sólo porque aparezcan el mapa de bits en los frames 1, 2 y 3 de tu animación,
esto no quiere decir que existan tres copias del mapa de bits integrados al documento en
Flash.
Los mapas de bits con 256 colores o menos (como los GIF) no se codifican como JPEG y
se integran a la animación utilizando una compresión PNG, que usualmente es la mejor
tipo de compresión para este tipo de imágenes.
Puedes ver qué versión tienes del Flash Player si haces un clic derecho sobre cualquier
animación en tu navegador web y mira el menú "Acerca de" (About).
Las animaciones en Flash se reproducen a un ritmo prefijado. Cuánto más rápido sea el
ritmo (frame rate o duración de cada frame) de los frames, mejor fluirá la animación aunque
Animaciones en Flash 295
el archivo en Flash será más grande. Las animaciones de MAGIX Web Designer 6 tienen
por defecto 24 frames por segundo pero puedes cambiar el ritmo si quieres.
Cuando creas un nuevo frame clave, puedes determinar el tiempo de duración entre un
frame y el siguiente. Por ejemplo, si has definido como tiempo de duración de un frame a
medio segundo, esto significa que la animación tardará medio segundo en pasar de un
frame clave a otro. Si tienes el ritmo de la animación prefijado a 24 frames por segundo,
esto quiere decir que el MAGIX Web Designer 6 generará 11 pasos intermedios en la
animación en Flash; que son 12 frames en total. (Estos frames intermedios nunca serán
vistos en MAGIX Web Designer 6 ya que sólo se generan cuando creas un archivo Flash).
Para crear un efecto de transición (tween effect) más largo (en otras palabras, hacer la
animación más lenta) tienes que incrementar el tiempo de duración utilizando el diálogo de
PROPIEDADES DE ANIMACIÓN .
La forma más fácil de modificar el tiempo de duración de cualquier frame es hacer doble
clic sobre el nombre del frame que quieres cambiar, y se abrirá el diálogo. Introduce el
tiempo de duración en segundos que tu quieras y pulsa Aceptar o Aplicar.
296 Animaciones en Flash
Recortar y cortar
Quizás más adelante quieres crear animaciones en Flash como las que se pueden ver en
la web, con frases o fotos que se muevan de un lado a otro.
Para crear un animación como esta, tienes que cambiar el tamaño de la página en MAGIX
Web Designer 6 al tamaño que deseas tener para la animación en Flash. Por ejemplo, si
quieres un banner en Flash que tenga 468 píxeles de ancho y 60 píxeles de alto, tienes
que ajustar el tamaño de la página de tu documento de animación a 468x60. Para cambiar
el tamaño de la página ve a PESTAÑA DE PÁGINA en el DIÁLOGO DE OPCIONES (en la página
337) (o selecciona "ARCHIVO -> OPCIONES DE PÁGINA" ) e introduce los valores en los
campos "ancho" y "alto" respectivamente.
Nota: Si abres documentos más antiguos creados con versiones anteriores de Xara
Xtreme, no cortarán la página (el tamaño de la página era enorme), en vez de ello los
cortarán al tamaño del dibujo. Puedes controlar esto en el diálogo de propiedades de
animación.
Animaciones en Flash 297
Configurando el área para guardar como Dibujo creará una animación flash que sólo sea
tan grande como debe ser, por ejemplo de igual tamaño que los límites de la animación.
Esto puede ser útil si no necesitas un tamaño de página específico.
Velocidad de la animación
Cuando crees un nuevo frame clave, tendrá por defecto una duración de medio segundo.
Por lo tanto la animación de ese frame clave al siguiente tardará medio segundo. Cuanto
más larga sea la duración configurada para la animación, más lenta será su reproducción.
Para configurar el tiempo de duración para cada frame, primero selecciona el frame que
necesitas en la GALERÍA DE FRAMES (haz clic sobre él), y luego haz clic sobre el botón de
PROPIEDADES DE ANIMACIÓN (simplemente haz doble clic sobre el nombre del frame).
Si configuras la opción "Mostrar este frame por" a 2 segundos, significa que la animación tardará
2 segundos en pasar de este frame clave al siguiente.
Los frames de las películas de Flash se reproducen a un ritmo constante. Cuanto más
rápido sea el ritmo de reproducción (frame rate), más fluida será la animación. Las
animaciones de MAGIX Web Designer 6 tienen por defecto 24 frames por segundo. Para
cambiar el ritmo selecciona la pestaña OPCIONES FLASH del diálogo de PROPIEDADES DE
ANIMACIÓN .
La pestaña "opciones Flash" en donde puedes cambiar la velocidad de la película, así como
también la versión de la exportación en Flash.
Nota: cuanto más rápido sea el ritmo (frame rate) del frame, más grande será el archivo
resultante en Flash. Si tu animación consiste mayormente en objetos que aparecen y
desaparecen, con relativamente pocos movimientos rápidos, entonces puedes reducir el
tiempo de duración a menos de 24 frames por segundo. Si tienes mucha acción con
movimientos rápidos, quizás sea necesario aumentar el ritmo, pero raramente es necesario
tener más de 50 frames por segundo.
Rotación
MAGIX Web Designer 6 genera los frames intermedios (tween frames) de forma
automática, haciendo un cálculo de cómo deben transformarse las formas de un frame al
otro. Pero a veces no es posible saber exactamente qué tipo de rotación es necesaria.
Animaciones en Flash 299
Como en este caso. Supone que quieres
crear una transición (tween) entre la
primera cara del reloj y la segunda:
La función de rotación
Para que la rotación sea sobre otro punto puedes añadir la palabra clave "rotar" enfrente
del nombre del objeto (ver abajo en Galería de nombres). O puedes usar la combinación
"rotar +" para hacer que la rotación vaya en dirección a las agujas del reloj o introducir la
combinación "rotar -" para que vaya en contra de las agujas del reloj.
Vuelve al ejemplo de animación de la página anterior con dos frames claves en donde la
aguja del reloj se mueve de las 12 a las 8. Si introduces la combinación de palabras "rotar
+ aguja" al objeto aguja, harás que la animación mueva la aguja en dirección a las agujas
del reloj (como en un reloj real). En cambio, si le colocas lacombinación de palabras "rotar -
aguja", ésta se moverá en dirección contraria a las agujas del reloj.
Nota: no es posible rotar un objeto 360° entre frames claves si el punto de rotación no se
encuentra en el centro. Por ejemplo, para crear una rotación "completa" (que dé toda la
300 Animaciones en Flash
vuelta) de las agujas del reloj en el ejemplo de arriba deberías crear un frame clave
intermedio.
Grupos
Los grupos son tratados de forma especial por el programa cuando se crean animaciones.
Para que no tengas que asignarle un nombre a cada parte individual de un grupo, puedes
colocarle un nombre a todo el grupo, luego podrás copiar el grupo al frame clave siguiente.
MAGIX Web Designer 6 animará el grupo completo de un frame clave a otro. Y podrás
aplicar las transformaciones normales al grupo (como cambiar el tamaño, rotar, aplastar
pero no podrás crear una transparencia para el grupo; ver próxima página).
Si quieres que algunos miembros del grupo se muevan de forma diferente que el resto del
grupo, entonces estos objetos deberán tener un nombre distinto ("Ctrl + haz clic para
seleccionar un objeto dentro del grupo, y luego colócale un nombre).
Nota: Si quieres realizar cambios a algunos componentes del grupo, primero tendrás que
"desagrupar" el grupo, y luego tienes que re-agrupar los objetos nuevamente:
• debes volver a aplicar el nombre al nuevo grupo (selecciona el grupo, luego haz doble
clic sobre el nombre en la GALERÍA DE NOMBRE ).
• No debes cambiar el orden de los ítems del grupo.
• No debes añadir o quitar ítems del grupo.
Transparencia en un grupo
Si quieres que un objeto agrupado se vaya desvaneciendo en la animación, debes aplicarle
una transparencia a cada objeto del grupo individualmente. Hay dos formas de hacer esto:
Las funciones de dibujo de MAGIX Web Designer 6 que son compatibles con flash :
• Todos los dibujos normales con líneas y formas (aunque el flash es mucho menos
preciso que MAGIX Web Designer 6, por eso, a veces, habrán inexactitudes en líneas y
formas).
• Los rellenos lisos, lineales, circulares y los rellenos elípticos con gradación de color.
• Rellenos con gradaciones de color de varios niveles, incluyendo rellenos lineales y
elípticos. Máximo cuatro fases de color.
• Transparencia plana. Sólo tipo mixto.
• La transparencia con gradación es compatible con los objetos con relleno de color
plano (sin gradación). Es decir, puedes tener objetos con gradación de color y con
transparencia lisa u objetos con color liso y con transparencia con gradación, pero no
podrás tener ambos.
• Contornos de grosor constante (trazos de pincel) con extremos redondeados y uniones
de línea (los archivos en Flash versión 8 también aceptan otros tipos de extremos y
uniones).
• Texto, incluyendo kerning. Puedes utilizar las fuentes que desees. Los contornos de los
caracteres de cualquier fuente utilizada se integran (embedded) al archivo en Flash. Esto
es mucho más eficiente que la integración de la fuente en los documentos en PDF.
• Texto sobre una curva. Nota: la línea utilizada para la curva deberá hacerse invisible para
que la animación funcione.
• Mapas de bits y rellenos de mapas de bits.
• Mapas de bits Contoned (coloreados) y rellenos de mapas de bits
• Saturación foto, temperatura del color y desenfoque (pero no brillo / cambios de
contraste).
• Nubes fractales y rellenos de plasma funcionarán, pero se convertirán en mapas de bits,
lo que no es tan eficiente.
Entonces, mientras algunos efectos de MAGIX Web Designer 6 como, por ejemplo, las
sombras blandas, no funcionan en archivos estáticos, éstos se exportan como mapas de
bits al archivo flash, de modo que no son muy eficientes y no son adecuados para la
animación.
Tal como se mencionó al comienzo de este capítulo, éstas son las reglas de oro sobre lo
que se puede cambiar de un frame clave al otro:
En segundo lugar, otro caso especial: puedes animar el texto en una curva. Esto es
especial porque puede utilizarse para mutar el texto sobre una curva en un texto sobre
otra curva totalmente diferente. De hecho, lo que hace es mezclar la posición de la letra en
un frame clave con la posición de la letra en el próximo frame. Esto puede producir efectos
muy interesantes.
Nota: la línea utilizada para la curva deberá hacerse invisible para que la animación
funcione.
Esto es lo que puedes y no puedes hacer con las transformaciones de color en MAGIX
Web Designer 6 Flash:
Transparencia
Tal como se mencionó anteriormente, puedes ajustar la transparencia plana de los objetos
(no las transparencias de grupo), lo que es compatible con Flash (tanto para objetos
estáticos como para cambios de transparencia tweening), pero la transparencia con
gradación de MAGIX Web Designer 6 no es realmente compatible con Flash. Existe una
sola situación en la que puedes utilizar transparencia con gradación y esta es en los
objetos con relleno de color plano.
Se puede ajustar y animar la transparencia plana de todo tipo de objetos, formas, textos y fotos.
Es posible aplicar una transparencia con gradación (lineal, circular y elíptica) a los objetos con
color plano, pero no es posible animar el cambio de transparencia. Sin embargo, puede
animarse el cambio de color (regla seis).
URL en Flash
Para que un objeto en la animación Flash sea un enlace en el que pueda hacerse clic,
simplemente selecciona el objeto que quieras utilizar y selecciona HERRAMIENTAS ->
PROPIEDADES WEB (Ctrl + ñ+ W).
Introduce la URL requerida. (Si quieres que el enlace se abra en una nueva ventana o en
un nuevo frame del navegador, selecciona el frame web de destino seleccionando el menú
desplegable "ABRIR ENLACE EN ").
Si quieres que pueda hacerse clic sobre un texto, selecciona la opción RECTÁNGULO
RODEANDO OBJETO . Esto garantiza que aquellos que observan la animación Flash puedan
304 Animaciones en Flash
hacer clic en cualquier lugar sobre el texto (en vez de solamente sobre la forma real de la
letra).
clicTAG
Los clicTAG son utilizados con frecuencia por redes de publicidad. En vez de codificar una
URL en una animación Flash, el clicTAG permite a una organización insertar su propia URL
en la animación, lo que es particularmente útil para rastrear clics de publicidad.
Si necesitas utilizar esta característica, simplemente escribe clicTAG en vez de una URL.
Acelerar y desacelerar
En general, los pasos tween están separados en intervalos regulares entre los frame
claves, produciendo una animación lineal de un frame clave al otro. Al añadir los símbolos
< y > adelante del nombre de objeto, puedes hacer que la velocidad de los objetos se
acelere o desacelere. Es decir, que nombrar a un objeto >Nombre significa que comenzará
rápido y después irá más lento. Lo opuesto, <Nombre, hará que la animación comience
lento y se acelere.
Ejemplo: en la sección Ejemplos Flash de la GALERÍA DE DISEÑOS (haz clic sobre el botón
OBTENER DISEÑOS de la GALERÍA CLIPART ) hay un archivo de ejemplo llamado Péndulo. El
grupo del péndulo utiliza una combinación de <> y la función de giro. También vale la pena
examinar el otro ejemplo llamado "Zoom6.xar".
Funciones Detener e Ir a
Puedes añadir las funciones DETENER o IR A al nombre del frame (separado por un punto y
coma) para controlar el flujo de la secuencia. Por ejemplo, si tu primer frame se llama
"Frame 1;Ir a Frame 6", entonces la secuencia de la animación saltará al frame 6 al inicio
del frame 1. Esto puede producir errores de tween, pero pueden ignorarse. También
espera el periodo específico del frame con la función IR A antes de saltar, pero los frames
con las funciones IR A o DETENER no realizan tween.
Animaciones en Flash 305
De la misma manera, un nombre de frame con DETENER al final del nombre, interrumpirá la
animación cuando llegue a ese frame. ¿Por qué esto es útil? Porque puedes hacer que la
animación salte a cualquier otro frame clave con un clic o moviendo el ratón por encima de
objetos. Por ejemplo, puede que tengas una animación que espera a que el usuario le
haga clic o mueva el ratón sobre un objeto antes de continuar.
Para hacer esto, selecciona el objeto que quieras usar como disparador, abre el diálogo de
PROPIEDADES WEB (Ctrl+Shift+W) y en la pestaña ENLACE selecciona la opción SALTAR A
FRAME .
Si quieres que el salto ocurra simplemente moviendo el cursor sobre un objeto, selecciona la
pestaña MouseOver en lugar de la pestaña Enlace y selecciona de la opción similar "SALTAR A
FRAME ".
Ahora en tu animación, si haces clic en el objeto o pasas el cursor del ratón por encima, la
animación llevará al nuevo frame y seguirá desde ahí. Fíjate en el ejemplo del archivo "Río
Támesis" en la GALERÍA CLIPART . Esto utiliza una función Ir a para crear un loop del frame 4
306 Animaciones en Flash
al 3 y una redirección URL del frame 1 si haces clic sobre el enlace Volver a reproducir de
la esquina.
"Ctrl +×+ W" es una forma rápida de abrir el diálogo de Propiedades Web.
Los GIF animados son una forma alternativa de mostrar secuencias animadas en la web.
Se emplea una tecnología más antigua y mucho más simple que tiene algunas ventajas e
inconvenientes.
Un GIF animado es un archivo GIF que contiene una secuencia de imágenes, como si
fueran frames de una película. Cada MAGIX Web Designer 6 es un frame en la animación
final, como en un folioscopio.
Las ventajas:
Los inconvenientes:
• En los GIF animados no se pueden insertar transiciones "tween" entre los frames. Esto
significa que los frames de tu animación MAGIX Web Designer 6 se traducen 1:1 a los
frames GIF resultantes. Si quieres tener animaciones fluidas como en flash, tienes que
utilizar numerosos frames.
• GIF es un formato Bitmap y no un formato vectorial como Flash. Produce archivos de
salida mucho más grandes, incluso para formas geométricas o texto.
• La profundidad de color máxima es de 256 colores.
• Las funciones de flash avanzado como el flujo de la secuencia (Detener/Ir a), los vínculos
con URLs o la aceleración no están disponibles.
No obstante, y gracias a su simplicidad, los GIF animados siguen siendo muy popular para
banners publicitarios o como imagen de avatar en foros o mensajes instantáneos.
1. Escoge Herramientas > Galerías > Galería de frames. O haz clic sobre el símbolo de
la galería de FRAMES en la barra de GALERÍAS .
2. Dibuja lo que quieres que aparezca en el primer frame.
3. En la galería de FRAMES, haz clic en NUEVO para crear el próximo frame.
308 Animaciones en Flash
4. Establece el fondo y los puntos de superposición.
5. Crea los objetos que quieres que aparezcan en este frame.
6. Repite los pasos 3 a 5 hasta haber creado la secuencia de frames.
Exportar la animación
Para guardar la animación, escoge Archivo > Exportar GIF animado.
Para modificar los propiedades de la animación, haz clic sobre un frame en la galería de
FRAMES y selecciona PROPIEDADES . Podrás cambiar las opciones detalladas más adelante.
La pestaña de frames
En la pestaña de FRAME puedes fijar:
• NOMBRE : el nombre de este frame. Esto es un simple recordatorio para ti, puesto que
no se exporta con el GIF animado.
• FONDO : si está establecido, el frame cubrirá todos los frames previos. Esto es útil
cuando quieres crear un fondo y después crear una animación sobre ese fondo. Con
frecuencia, el primer frame de la animación es el frame de fondo. Si el primer frame no
es el frame de fondo, el GIF animado usa el fondo de página como fondo.
• SUPERPOSICIÓN: si esta opción está configurada, el frame se superpondrá con el frame
previo.
• RETARDO LOCAL : establece la duración que el frame tendrá en la animación.
• VER FRAME : si está activado, el frame se mostrará en la animación.
Opciones flash
Aquí hay varias opciones para animaciones flash, la mayoría de los cuales se describen
arriba.
• COLORES DE PALETA: fija los colores de paleta favoritos para el GIF animado.
• CANTIDAD DE COLORES DE PALETA: esta opción está disponible si se utiliza una paleta
optimizada. Para gráficos simples puedes reducir la cantidad de colores de la paleta. De
esta forma se creará un archivo más pequeño sin pérdida de calidad. Es posible que
debas experimentar un poco para encontrar el balance óptimo entre tamaño de archivo
y calidad.
• DITHERING: selecciona uno de los tipos de dithering.
Animaciones en Flash 309
• TRANSPARENCIA: escoge esta opción para que las partes de un mapa de bits que no
contienen objetos se vuelvan transparentes.
• OPCIONES DE FONDO : modifica el fondo del GIF animado para ver cuál da el mejor
resultado.
• INFORMACIÓN ADICIONAL : la página de vista previa contendrá información útil como, por
ejemplo, tiempo de descarga potencial si se coloca en una página web.
• VISTA PREVIA: pulsa este botón para lanzar una vista previa en tu navegador web.
310 Imprimiendo
Imprimiendo
El menú Ventana > Mostrar bordes de impresión muestra una línea amarilla y roja
alrededor de la página (no se imprime) que indica los márgenes y bordes de impresión.
Los límites de la página están señalados con un rectángulo rojo. El área de impresión está
establecida por los márgenes de la impresora seleccionada actualmente. Algunas
impresoras te permiten ajustar los márgenes, pero muy pocas te dejan imprimir hasta el
borde de la página.
Si algún objeto de la página se encuentra fuera del rectángulo rojo, es muy probable que
no se imprima.
Por favor, ten en cuenta que no podemos darte consejo sobre la instalación o
configuración de impresoras porque estas son operaciones de sistema estándar. Si tienes
dificultades, contacta con el proveedor de tu impresora u ordenador.
Imprimiendo 311
El botón de propiedades
Esto muestra un diálogo que te permite establecer las opciones para el tipo de impresora
seleccionada. MAGIX Web Designer 6 no controla este diálogo.
Botón de red
Si tu ordenador está conectado a una red, este botón te permite compartir impresoras de
la red. MAGIX Web Designer 6 no controla este diálogo.
El diálogo de impresión
Botón imprimir
Una vez que has seleccionado las opciones requeridas, haz clic para imprimir.
Botón Imprimir...
Esto abre el diálogo de CONFIGURACIÓN DE IMPRESIÓN (descrito anteriormente).
Botón opciones
Esto abre el diálogo que te permite configurar opciones adicionales de impresión. Las
opciones se describen más adelante.
312 Imprimiendo
Páginas
TODAS LAS PÁGINAS: imprime todas las páginas del documento.
OBJETOS SELECCIONADOS: Esta opción está disponible si se selecciona cualquier objeto del
documento. Si está activada, sólo se imprimen los objetos seleccionados. Observa que
otros objetos dentro de los límites de los objetos seleccionados no se imprimen, sólo se
imprimen los objetos que estén realmente seleccionados.
Los objetos en las capas del fondo y las capas guía nunca se imprimen. Lee Galería de
capas para más detalles.
RANGO DE PÁGINAS: te permite especificar las páginas que deseas imprimir. Puedes
escribir números de páginas específicos separados por comas, o introducir un rango de
páginas separando los dos números con un guión.
La sección Opciones del diálogo te indicará si el rango de páginas que has escrito es
aceptado o no.
Imprimir a archivo
Puedes seleccionar la opción IMPRIMIR A ARCHIVO para crear un documento para entregar
a una imprenta (si pueden aceptar este tipo de archivo).
Después de activar esta opción, al hacer clic sobre IMPRIMIR , Web Designer muestra el
diálogo estándar de Windows para GUARDAR para que puedas especificar un nombre y
una ubicación para el archivo.
Copias
Establece la cantidad de copias del documento que quieres imprimir.
Imprimiendo 313
Imprimir capas
Hay dos opciones:
Ten en cuenta que las capas de primer plano se imprimen, mientras que las capas de
fondo nunca se imprimen.
Imprimir como
NORMAL es adecuado para la mayoría de los tipos de documento.
Resolución de transparencia
Al imprimir, los efectos de transparencia de MAGIX Web Designer 6 se crean utilizando
mapas de bits.
Esta opción controla la resolución de esos mapas de bits cuando se envían a la impresora.
La opción automática es adecuada para la mayoría de los dibujos y significa que MAGIX
Web Designer 6 selecciona automáticamente una resolución apropiada para la impresora
actual. Esto puede no ser adecuado si se imprime en una impresora con resolución muy
alta como dispositivos imagesetting. En este caso, es posible que quieras controlar la
resolución de forma manual e introducir el valor deseado.
Ten en cuenta que las impresoras modernas muchas veces aseguran poder imprimir más
de 1000 DPI, pero esto no es lo mismo que "píxeles por pulgada", que es lo que ves en tu
pantalla. En general, nunca es necesario imprimir a más de 600 píxeles por pulgada y 300
píxeles por pulgada producen en general resultados de impresión perfectamente
adecuados, especialmente con anti-aliasing.
Calidad de llenado
Si usas esta opción, puedes escoger cuántos pasos conforman los rellenos con gradación
en tu documento al imprimirlo. La configuración NORMAL es adecuada para la mayoría de
los casos. Esta opción no puede activarse en el caso de impresoras PostcScript.
Opciones de texto
Si tu impresora tiene problemas para reproducir fuentes, selecciona la opción IMPRIMIR
TODO EL TEXTO COMO FORMAS . Todo el texto se convertirá en formas vectoriales antes de
que el documento se envíe a la impresora. Esto puede ser más lento, pero reproducirá
exactamente lo que ves en pantalla.
Imprimiendo 315
Aquí encontrarás una compilación de los efectos más importantes para la optimización de
fotos sacadas, por ejemplo, con tu móvil.
Sin embargo, puedes escoger las opciones personalizadas (lee "Individual" más adelante).
Optimización
Tu diseño se moverá al centro de la página y se ampliará o reducirá para adaptarse al
tamaño del papel.
Esta opción es la mejor si tienes un diseño grande o pequeño que quieres adaptar al
tamaño de una página.
Adaptación automática
Tu diseño tendrá la orientación necesaria, pero Web Designer no cambiará el tamaño.
Recomendamos utilizar esta opción si tienes dificultades para encontrar la orientación
correcta (existen al menos cuatro lugares en donde puedes establecer la orientación de la
página, en algunos drivers de impresora todavía más).
316 Imprimiendo
Esta opción es la mejor si has configurado el tamaño para tu diseño y no quieres que se
modifique.
Adaptación personalizada
Te permite controlar la impresión, incluyendo orientación, tamaño y márgenes.
Los campos ANCHO y ALTURA te ofrecen una forma alternativa de configurar el tamaño de
la impresión (cuando cambias un valor, el otro cambiará también para asegurar que la
página se imprima con una relación de aspecto 100%).
Adaptación múltiple
Para imprimir muchas copias en una página, escoge MÚLTIPLE , introduce un valor para la
cantidad de copias que debe incluir el ancho de la página (hileras) y la cantidad a lo alto de
la página (columnas) y la distancia entre cada uno (margen).
Importación y exportación 317
Importación y exportación
Formatos recomendados
Los formatos de exportación universal que pueden ser leídos por la mayor parte de
programas y que son utilizados en la web son los formatos de mapas de bits, GIF, PNG y
JPEG. Esto te garantiza que tu documento se verá exactamente igual que en la pantalla de
MAGIX Web Designer 6. PNG se recomienda para gráficos en la web y JPEG para fotos.
Formatos de importación
Es importante que utilices las extensiones de archivo de tres letras de la lista de abajo
cuando cargues archivos al MAGIX Web Designer 6.
Formatos de exportación
Formatos de exportación para mapas de bits (ver resumen del diálogo de exportación GIF,
PNG, BMP y JPEG (en la página 324))
Importación y exportación 319
.BMP mapa de bits Windows
.GIF CompuServe GIF
.GIF archivos animados en GIF (ver Creando archivos animados en GIF (en la página 307))
.JPG JPEG
PSD Photoshop (ver importación y exportación de archivos en PDF (en la página 322))
.PNG PNG
Otros formatos de exportación
Importación de archivos
• Selecciona "ARCHIVO > IMPORTAR" - Esto normalmente mezcla el contenido del archivo
en el documento existente. Con algunos formatos, tendrás la opción de importar el
documento a la página actual o insertarlo como nueva página. Con otros formatos se te
dará la opción de importar los datos de archivo de forma convencional o añadir un
enlace al archivo e incluirlo en tu sitio web publicado.
• O selecciona "ARCHIVO -> ABRIR ": esta opción abre el archivo como un nuevo
documento.
Con MAGIX Web Designer 6 podrás importar archivos utilizando el método de arrastrar y
soltar. Puedes arrastrar un archivo desde tu explorador de archivos a un documento
abierto dentro de MAGIX Web Designer 6, y con esta acción estarás importando al
documento y quedará colocado en el centro de la página actual. O también puedes
arrastrar y soltar el documento desde el Explorador de Windows a una barra o título de
barra de la ventana de Web Designer, esta acción abrirá el archivo como un documento
nuevo.
Consejo: si tienes objetos separados en Photoshop que deseas poder mover y cambiar
de forma independiente de otro en MAGIX Web Designer 6, colócalos en capas separadas
en Photoshop antes de realizar la exportación.
Importación de PDF
PDF es un formato de vectores gráficos complejos que ha evolucionado durante 10 años o
más, y contiene numerosos subformatos y opciones. El PDF fue diseñado como un
formato de documento portátil para visualizar e imprimir solamente y no estaba pensado
como formato de archivo para la transferencia de datos entre aplicaciones. Sin embargo,
MAGIX Web Designer 6 puede cargar la mayoría de los archivos PDF.
• ARCHIVO ->EXPORTAR PÁGINA WEB : exporta el presente documento de página web a una
ubicación de tu elección en tu ordenador.
• ARCHIVO ->EXPORTAR JPEG : exporta la selección o la página actual a un archivo JPEG.
• ARCHIVO ->EXPORTAR PNG : exporta la selección o la página actual a un archivo PNG.
1. Selecciona ARCHIVO > IMPORTAR DESDE PÁGINA WEB (o Ctrl + Alt + W).
2. Introduce la dirección de la página web (URL) de la página o del gráfico que desees
importar. Si la URL es una página, todos los gráficos de la página se van a importar.
3. Pulsa IMPORTAR.
Exportación de archivos
También puedes crear un Flash animado. Lee Animaciones Flash (en la página 283) para
más detalles sobre la exportación Flash.
Ten en cuenta que MAGIX Web Designer 6 puede contener características como estilos de
relleno avanzados que no pueden representarse en formatos vectoriales como EMF. En
este caso, parte delas imágenes se exportarán como mapas de bits. Las partes vectoriales
que pueden exportarse como vectores se exportarán como tales.
El formato GIF es compatible sólo con 256 colores y, a pesar de que es muy común en
muchas páginas web, PNG es un mejor formato. PNG también es compatible con gráficos
semitransparentes (utiliza la opción True Color + Alpha), pero esto no es compatible
correctamente con Microsoft Internet Explorer (pero sí con los demás navegadores web).
Cuantos menos colores contenga el archivo, más pequeño será y menor calidad tendrá.
Sin embargo, al utilizar 256 colores o menos, MAGIX Web Designer 6 te suministra
técnicas muy avanzadas para simular una mayor gama de colores para que obtengas
resultados de calidad fotográfica utilizando solamente 256 colores o menos.
Importante
Los mapas de bits se emiten con la calidad actual en que los ves, por lo tanto, para
obtener la mejor calidad, asegúrate de que la opición "VENTANA > CALIDAD" esté
configurada en MUY ALTA CALIDAD .
Para exportar como archivo PSD selecciona "Archivo -> Exportar" y después ADOBE
PHOTOSHOP en la lista GUARDAR COMO TIPO .
Capas
Las capas se conservan en MAGIX Web Designer 6 cuando exportas en formato PSD.
Cada capa se rasteriza como una capa separada en PSD, incluyendo los nombres de las
capas. La visibilidad de las capas también se guarda, por lo tanto las capas definidas
como "invisibles" en MAGIX Web Designer 6 serán exportadas y guardadas como
invisibles en Photoshop. Puedes activar o desactivar las capas en Photoshop utilizando la
paleta de CAPAS .
Texto
Puedes exportar texto desde MAGIX Web Designer 6 para que sea un texto editable en
Photoshop, pero el texto debe encontrarse en una capa propia (al importar se te
preguntará si quieres actualizar los objetos de texto para que sean editables en
Photoshop).
El texto que se encuentra en una capa con cualquier otro objeto gráfico se rasterizará en
esa capa y no será editable.
Exportación DPI
Podrás configurar el valor DPI de los mapas de bits en el archivo PSD exportado.
Un DPI de 96 es la resolución de
pantalla normal de Windows, es decir,
que si exportas en 96 dpi el tamaño
del 100% en Photoshop será igual que
el 100% en MAGIX Web Designer 6.
Puedes seleccionar para exportar toda el área de página de MAGIX Web Designer 6 o
solamente las áreas con objetos visibles.
Resumen
Para obtener la mayor compatibilidad y posibilidades de edición en Photoshop:
• Coloca las partes de tu dibujo que deseas que permanezcan como capas separadas en
Photoshop, en capas separadas en MAGIX Web Designer 6.
324 Importación y exportación
• Si quieres que el texto pueda editarse en Photoshop, colócalo en una capa individual sin
objetos gráficos.
Una vez que hayas seleccionado la imagen previa A o B podrás elegir entre una larga lista
de opciones de exportación utilizando las cinco pestañas situadas debajo de la ventana de
vista previa. Algunas opciones como las opciones de paleta solo se pueden aplicar a
algunos tipos de documentos como los PNG, y no son relevantes para el tipo JPEG.
Para los formatos más usuales JPEG y PNG, en el paso 2 puedes utilizar directamente las
opciones disponibles en el MENÚ ARCHIVO : EXPORTAR JPEG y EXPORTAR PNG . El diálogo de
exportación mostrado incluye el botón "Configuración" que te lleva al diálogo que se
muestra arriba.
Controles
Estos botones modifican la vista previa de las imágenes, pero no el archivo para exportar:
• Herramienta de ZOOM : haz clic sobre una vista previa para ampliarla. Shift
+ clic para reducirla. Arrastra sobre un área de la vista previa para realizar
un zoom en esa área.
La siguiente herramienta solo es importante para archivos que utilizan menos de 256
colores (pero verás el resultado si has seleccionado la pestaña OPCIONES DE PALETA):
326 Importación y exportación
SELECTOR DE COLOR (PIPETA) : al mover el cursor sobre la imagen se señalará el
color que se encuentra debajo del cursor. Haz clic para seleccionar ese color en
la paleta. Después, puedes utilizar los botones de las OPCIONES DE PALETA
(descrito a continuación) para modificar ese color.
VISTA PREVIA: el botón de vista previa está disponible en todas las pestañas de este
diálogo. Actualiza las ventanas de vista previa para reflejar cualquier cambio que hayas
hecho a las opciones de exportación.
Dithering y paleta
Las opciones DITHERING y PALETA solo son aplicables para la exportación de 256 colores
o menos y modifican la forma en que la imagen se visualiza, así como su paleta de colores.
Se recomienda utilizar siempre la PALETA OPTIMIZADA . Si se configura la opción DITHERING
en ninguno, se producirán archivos más pequeños pero que probablemente presentarán
líneas. ERROR DE DIFUSIÓN crea resultados con mejor calidad pero también archivos más
grandes.
Profundidad de color
Escoge la cantidad de colores que requiere tu mapa de bits. Cuantos más colores, más
grande el archivo (generalmente) y mayor la calidad. La opción TRUE COLOR es compatible
con hasta 16 millones de colores. TRUE COLOR + ALPHA incluye características de
semitransparencia como sombras y transparencias. Este es el formato recomendado para
aplicaciones compatibles con archivos PNG de canal alfa.
Si escoges 256 colores o menos, tienes la posibilidad de utilizar transparencia simple (ver a
continuación el icono de la copa). Esto no es compatible con píxeles semitransparentes,
sino con píxeles completamente opacos o transparentes y, por lo tanto, puede producir
bordes dentados.
Colores máximos
Si escoges una profundidad de color de 256 colores o menos puedes controlar
exactamente la cantidad de colores que se utilizan en el archivo. Esto suministra un gran
nivel de control sobre la calidad versus el tamaño del archivo. Simplemente introduce la
cantidad de colores requeridos y pulsa el botón de VISTA PREVIA para ver el resultado.
Importación y exportación 327
Botones
Estos botones (excepto FONDO TRANSPARENTE ) se aplican cuando se exportan imágenes
con 256 colores o menos. Estos archivos se crean con una paleta de colores limitada y
estos controles suministran un mayor nivel de control sobre esos colores de paleta. Lee
SELECTOR DE COLOR explicado anteriormente para ver cómo seleccionar un color o haz
clic sobre un color en la PALETA DE COLORES .
Bloquear un color
Puedes especificar la cantidad de colores que quieres en la paleta de los mapas de bits
exportados. Es posible que quieras asegurarte de que estos colores siempre aparezcan en
la paleta y, por lo tanto, puedes bloquearlos. Haz clic sobre un color para seleccionarlo y
después selecciona el botón BLOQUEAR . Aparecerá un pequeño cuadrado en la esquina
izquierda del color para señalar que ese color está bloqueado.
Si pulsas este botón el color seleccionado cambiará a uno de los 216 colores de la paleta
de colores web. Este es un sistema que ha dejado de ser importante o relevante, puesto
que todos los ordenadores puedes mostrar millones de colores y restringir los gráficos
web a esta paleta limitada no tiene mayores beneficios.
Esto hace que las áreas no cubiertas por los objetos seleccionados sean transparentes.
Seleccionar esta opción activa automáticamente una entrada transparente en la paleta.
Convierte esta entrada de color en transparente. Debes tener en cuenta la diferencia entre
esta opción, que convierte partes del objeto seleccionado en transparente, y la opción
Convertir fondeo de la imagen transparente, que convierte el fondo detrás de los
objetos seleccionados en transparentes.
Borra este color de la paleta. Las áreas del mapa de bits que utilicen el color eliminado
utilizarán el color más cercano en la paleta. Cuantos menos colores en la paleta, más
pequeño será el archivo de mapa de bits.
• TAMAÑO . Introduce el ancho o alto en uno de los campos. Como la relación de aspecto
del mapa de bits está bloqueada, al cambiar una dimensión se cambiará también la
otra. TAMAÑO es más adecuado que ESCALA si quieres crear un mapa de bits con un
tamaño especial en píxeles.
• ESCALA. (No disponible para JPEG ni PNG). Esto te permite cambiar el tamaño del mapa
de bits con un porcentaje. ESCALA es mejor que Tamaño si quieres, por ejemplo, crear
un mapa de bits un 50% más grande que el original.
• RESOLUCIÓN. (No disponible para GIF ni BMP). Introduce la resolución en el campo de
DPI . Si quieres exportar una imagen para visualizar en una pantalla (por ejemplo, una
página web) no necesitas un valor DPI mayor que 96. Los 96 DPI también garantizan
que el mapa de bits tenga el mismo tamaño que los objetos en la pantalla (con un
aumento del 100%).
Área a guardar
El mapa de bits puede crearse utilizando una de estas áreas del documento:
Anti-aliasing
El anti-aliasing mejora la apariencia de los gráficos suavizando los bordes dentados:
Progresivo: (solo JPEG). Al seleccionar esta opción se crea un JPEG progresivo. Esto es
útil cuando el JPEG es grande y se utilizará en una página web. Los navegadores web
comenzarán a mostrar la imagen antes de finalizar la descarga por completo.
Calidad JPEG: (solo JPEG). Una configuración baja resultará en un archivo pequeño con
pérdida de calidad, mientras que un valor alto reducirá levemente el tamaño del archivo
pero conservará la alta calidad. Ten en cuenta que una configuración de 100% también
comprimirá el archivo. Un valor de 75% produce una buena compresión sin causar pérdida
de calidad evidente para la mayoría de los usos.
Entrelazado: (solo GIF y PNG). Esta opción es como el JPEG progresivo. En el navegador,
la primera imagen aparecerá como una imagen de baja resolución. A medida que el
archivo se carga, la resolución aumenta.
Transparente: (solo GIF y PNG). Esto hace que las áreas no cubiertas por los objetos
seleccionados sean transparentes. Seleccionar esta opción activa automáticamente una
entrada transparente en la paleta.
Vista previa
Puedes escoger el mejor compromiso entre tamaño de archivo y calidad para gráficos web
utilizando las ventanas de vista previa A y B en el diálogo de EXPORTACIÓN (ilustrado
arriba). Sin embargo, la mejor prueba es ver la forma en que el gráfico se ve en un
navegador web. Esta pestaña te ofrece algunas opciones para esa vista previa. Haz clic en
el botón VISTA PREVIA para abrir el navegador web y ver los gráficos antes de exportarlos.
330 Importación y exportación
La Galería de diseños
Esta galería contiene plantillas de diseño profesional de páginas y sitios web completos, así
como de elementos individuales de cliparts que puedes utilizar para tu diseño.
Puedes realizar búsquedas con palabras clave y ordenar el contenido de la galería. Para
información sobre la utilización de las galerías, lee el capítulo MANEJO DEL DOCUMENTO (en
la página 83). Si estás online, al abrir la galería se bajarán diseños y widgets de los
servidores de Xara, que aparecerán de inmediato en la galería. Vuelve a mirar regularmente
para descubrir los últimos widgets y plantillas disponibles. Para abrir una plantilla como un
nuevo documento, haz doble clic. Para importar una plantilla a tu documento abierto
actualmente, arrástralo hasta tu diseño. Las plantillas de página se agregan como nuevas
páginas a tu documento actual. Otras plantillas y widgets se colocan en tu página actual.
Personalización de Web Designer 331
Si arrastras y sueltas un widget, una ventana de navegador web se abrirá en la página web
del widget, lo que te permite configurar tu widget para adaptarlo a tus necesidades. Al
finalizar, haz clic en el botón Insertar en la parte inferior de la ventana del navegador y el
widget se insertará en tu página con un marcador de posición estático. Verás la imagen
estática al ver la página en MAGIX Web Designer 6, pero verás el widget real al exportar y
hacer una vista previa de tu página. Consulta el capítulo de GRÁFICOS WEB Y WIDGETS para
más información.
Los documentos de plantilla son las opciones disponibles en ARCHIVO > NUEVO .
1. Abre un documento existente ("Archivo > Abrir" o "Ctrl + O") o crea uno
nuevo con el botón NUEVO de la barra de control ESTÁNDAR o "Ctrl +N".
2. Haz los cambios necesarios (como cambiar la página, añadir un logo o un
mensaje). Puedes editar el documento de plantilla de la misma forma que un
documento común.
3. Cuando estés satisfecho con los cambios escoge "Archivo > Guardar
plantilla" e introduce un nombre para la plantilla.
Para establecer la nueva plantilla como plantilla por defecto (es decir, que será lo primero
que aparezca cuando abras Web Designer y cuando pulses Ctrl+N) coloca la tilde en USAR
COMO PLANTILLA POR DEFECTO al guardar la plantilla.
Con esto se abre el diálogo de opciones. Allí pueden aplicarse configuraciones para Web
Designer.
APLICAR guarda las modificaciones pero el diálogo permanece abierto. De esta forma
puedes continuar realizando cambios.
332 Personalización de Web Designer
Pestaña General
En el capítulo Capas (en la página 275) encontrarás más detalles sobre las capas y la
galería de capas.
Si esta opción no está seleccionada, los estados VISIBILIDAD y EDICIÓN de una capa no se
modificarán al seleccionarla.
Personalización de Web Designer 333
Preguntar antes de aplicar el atributo actual
Esto es aplicable cuando se cambia un atributo actual. (Es decir, si cambias un atributo
cuando no está seleccionado ningún objeto.)
Lee el capítulo Transparencia (en la página 188) para más información sobre las
transparencias.
Limitación de ángulo
Esto es aplicable para la rotación o movimiento de un objeto mientras se pulsa la tecla Ctrl.
Desplazar
Esta se aplica cuando se utilizan las teclas de flecha del teclado mientras se mueve un
objeto.
Este campo de texto define la distancia que el objeto se mueve cada vez que se pulse la
tecla. Si el documento utiliza unidades escaladas (por ejemplo, 1 pulgada a 1 milla) este
campo de texto mostrará la distancia en la unidad escalada.
Distancia duplicación
Edición > Duplicar (Ctrl+D) crea un duplicado del objeto original. Este campo de texto te
permite configurar la distancia de desplazamiento entre el original y el duplicado.
Los valores positivos crean un duplicado por arriba y a la derecha del objeto original.
Los valores negativos crean un duplicado por debajo y a la izquierda del original.
Coordinar selección
Aquí puedes cambiar la dirección de las coordinadas de la página.
Pestaña Ratón
Acciones posibles:
El menú pop-up contiene opciones adecuadas para el objeto sobre el que haces clic. Por
ejemplo, para la mayoría de los tipos de objetos, el menú contiene las opciones CORTAR,
COPIAR, PEGAR, ELIMINAR, DUPLICAR, CLONAR (descritas en el capítulo Trabajar con objetos
(en la página 88)).
MOVIMIENTO DE RUEDECILLA DEL RATÓN: puedes cambiar la acción de la rueda del ratón
entre desplazamiento y zoom. La primera es la opción por defecto de Web Designer, la
última logra compatibilidad con MAGIX Photo Designer 7.
Haz clic sobre RESTAURAR para regresar a las opciones de asignación de botones
originales. Esto tiene efecto inmediato, no necesitar hacer clic en ACEPTAR ni en APLICAR
AHORA .
Estos valores determinan la distancia a la que pueden acercarse los objetos a los objetos
magnéticos antes de alinearse automáticamente. Estas son distancias en la pantalla y son
independientes del tamaño de tu documento.
Personalización de Web Designer 337
Si la opción "TODAS LAS PÁGINAS DEL SITIO WEB CON EL MISMO TAMAÑO " no está
seleccionada, entonces puedes asignar tamaños diferentes a tus páginas utilizando este
diálogo. Para fijar el tamaño de la página, escoge uno de los tamaños de página
suministrados en la lista desplegable o escoge "Personalizado" y luego introduce el ancho
y la altura requeridas en el campo suministrado.
Consulta el capítulo Trabajar con documentos (en la página 78) para más detalles acerca
de estas funciones.
Barras de control
Puedes mover las barras de control de Web Designer a otros lugares de la ventana,
reordenar los botones, crear nuevas barras de control, mover o copiar botones entre las
barras de control y muchas otras operaciones.
338 Personalización de Web Designer
Al lado del nombre de cada barra de control hay un recuadro. Si colocas una tilde en ese
recuadro, la barra de control estará visible. Haz clic sobre ese recuadro de la barra de
control para mostrar u ocultar la barra.
Las barras de control también pueden ser flotantes. Estas barras no siguen el movimiento
de la ventana.
Personalización de Web Designer 339
Puedes ocultar una barra de control flotante utilizando el diálogo de BARRAS DE CONTROL
(descrito arriba) o con un clic sobre el icono de CIERRE .
Para hacer que una barra de control sea flotante, arrástrala desde el borde de la ventana
hasta un área de edición o fuera de la ventana de Web Designer.
• El borde de la ventana.
• La barra de menú.
• U otra barra de control.
Una barra de control flotante presenta un contorno de doble línea al arrastrar. Esto cambia
a una línea simple cuando se encuentra en una posición bloqueada. Si quieres que la barra
de control permanezca flotante, pulsa Ctrl mientras la desplazas.
• Arrastra un botón desde el área de trabajo o desde la ventana. De esta forma, se creará
una nueva barra de símbolos que contendrá el botón.
• O haz clic sobre NUEVO en el diálogo de BARRAS DE SÍMBOLOS . De esta forma puedes
crear una nueva barra de símbolos y darle un nombre. La nueva barra de símbolos
estará vacía. Ahora podrás insertar botones mediante arrastrar y soltar.
Fijación de galerías
Es posible fijar una o más galerías a cada lado de la ventana de Web Designer.
Abre una galería con un clic sobre el icono en la barra de control de GALERÍAS o
seleccionando Herramientas > Galerías.
Haz clic sobre RESTABLECER para restaurar la configuración de la barra de control a sus
valores estándar.
342 Menús y shortcuts de teclado
Introducción
Muchas veces puedes seleccionar una opción de un menú, una barra de control o con un
shortcut. Si existe un botón en la barra de control y/o un shortcut, se mostrarán detrás el
nombre del menú. Por ejemplo, lo siguiente significa que hay un botón en la barra de
control ESTÁNDAR que tiene el mismo efecto que seleccionar nuevo o que pulsar el
shortcut Ctrl+N.
Menú Archivo
Archivos recientes
Una lista de los archivos cargados o guardados más recientemente. Esta lista te
proporciona una forma rápida de volver a cargar cualquiera de estos archivos.
Menús y shortcuts de teclado 343
Puedes cambiar la cantidad de archivos que aparecen en esta lista. (Para más información
consulta el capítulo Personalización de Web Designer).
Cerrar (Ctrl+W)
Cierra la ventana de edición actual. Web Designer permanece abierto. Se te advertirá si no
has guardado cambios.
Guardar como
Te permite guardar el documento seleccionado con otro nombre o en un directorio o
unidad diferente.
Guardar todo
Guarda todos los documentos abiertos.
Guardar plantilla
Guarda el documento seleccionado como una plantilla de documento. (Consulta el
capítulo Personalización de Web Designer (en la página 331)).
Importar (Ctrl+Shift+I)
Carga un archivo en el documento seleccionado. El archivo puede ser cualquiera de los
formatos de importación. (Lee el capítulo Importación y exportación (en la página 316) para
más información).
Ten en cuenta la diferencia entre ABRIR e IMPORTAR . Ambas opciones cargan una variedad
de formatos de documento pero ABRIR los abre en un nuevo documento; mientras que
IMPORTAR carga el archivo en el documento ya abierto.
Exportar (Ctrl+Shift+E)
Te permite exportar el documento en una gran variedad de formatos de exportación
compatibles con Web Designer. (Consulta en el capítulo Importación y exportación (en la
página 316) la lista de formatos).
Si todavía no has introducido los detalles FTP para tu espacio web, la pestaña PUBLICAR
en el diálogo de PROPIEDADES WEB se visualizará primero. Luego, si todavía no has
exportado la página localmente, el diálogo de exportación aparecerá para permitirte que lo
hagas. A continuación la página web se publica en tu espacio web. Un indicador de
progreso aparece durantes la operación de publicación.
Consulta el capítulo Primeros pasos (en la página 59) para más detalles sobre la
publicación.
Exportar animación
Exporta una animación para utilizarla en una página web. (Lee el capítulo Gráficos web).
Información de documento
Esto muestra una ventana de información sobre el documento seleccionado que incluye
las fuentes utilizadas en el documento actual.
Opciones de página
Sirve para modificar el diseño de página, su tamaño, etc.
Configuración de impresora
Establece las opciones relacionadas con la impresora o el archivo de impresión actual.
(Para más información, lee el capítulo Impresión (en la página 309)).
Menús y shortcuts de teclado 345
Opciones de impresión
Modifica las opciones de la impresión, incluyendo la orientación y el tamaño de impresión.
(Para más información, lee el capítulo Impresión (en la página 309)).
Imprimir (Ctrl+P)
Configura las opciones relacionadas con la impresión del documento y te permite
imprimirlo. (Para más información, lee el capítulo Impresión (en la página 309)).
Cerrar
Cierra todas las ventanas y borra Web Designer de la memoria de trabajo. Se te advertirá
si hay cambios sin guardar.
Menú Edición
Clonar (Ctrl+K)
Al igual que DUPLICAR , copia el objeto seleccionado pero coloca la copia directamente
arriba del original. La copia se convierte en el objeto seleccionado.
Páginas
El submenú Páginas te permite añadir o quitar páginas de tu documento multi-página,
duplicar la página actual o mover la página actual más arriba o abajo del documento. Para
más información sobre documentos multi-página ve al capítulo Documentos multi-página
(en la página 73).
Menú Arreglo
• Añadir formas.
• Sustraer la forma superior de las inferiores.
• Descartar partes de otras formas no cubiertas por la forma superior.
• Utilizar la forma superior para cortar las otras formas.
Contornear texto
Hacer que el texto contornee al objeto. VerContornear objeto con texto (en la página 165)
para más detalles.
Obtén más información en el capítulo Trabajar con objetos (en la página 116).
Menús y shortcuts de teclado 349
Menú Herramientas
Galerías
Páginas y galerías (barra de control galerías o "F10")
Muestra u oculta la GALERÍA DE CAPAS. Sólo utilizada en documentos no animados (ver
Capas (en la página 275)).
Nombres
Abre el diálogo Aplicar/Eliminar nombres (en la página 113).
Optimizar foto
Optimizar resolución del mapa de bits para utilizar tus diseños con MAGIX Web Designer
6. Ver Optimización de fotos (en la página 238) para más detalles.
Opciones (Ctrl+Shift+O)
Abre el diálogo de OPCIONES. (Descrito en el capítulo Personalización de Web Designer).
Menú Ventana
Nueva ventana
Abre una nueva ventana en el documento seleccionado.
Arreglar ventanas
Ordena todas las ventanas de Web Designer como mosaico.
Barras de control
Muestra el diálogo de BARRAS DE CONTROL . (Descrito en el capítulo Personalización de
Web Designer (en la página 337)).
Documentos abiertos
Una lista de todos los documentos abiertos actualmente. Un clic sobre un nombre
selecciona el documento correspondiente. (Ctrl+F6 también cambia entre los
documentos.) Un * tras el nombre del documento señala que no se han guardado cambios
de ese documento.
Menú Ayuda
Shortcut: F1
Actualizar programa
Esto comprueba de forma online si hay actualizaciones de programas disponibles.
En primer lugar aparecerá una pantalla que te comunica si hay una nueva versión principal
de Web Designer para actualizar. Luego, si has registrado el programa con Xara, se
iniciará un proceso automático de actualización que comprobará si hay disponibles
actualizaciones de programa gratuitas. Si hay una actualización disponible, se descargará
automáticamente y luego se cierra MAGIX Web Designer 6 y se instala la actualización. El
programa luego se reinicia automáticamente para ti.'
Utiliza la opción REGISTRARME en el menú AYUDA para registrar el programa con Xara.
Programa de afiliado
Si no te has registrado en el programa de afiliados cuando desbloquees MAGIX Web
Designer 6, puedes utilizar esta opción para unirte al programa o para cambiar la opción
de afiliación previamente. Selecciona esta opción para abrir el diálogo de afiliación que te
explica todo sobre el programa de afiliación. Puedes comenzar a cobrar comisiones desde
tu página web MAGIX Web Designer 6 o donarla por caridad, seleccionando las opciones
que se muestran en el diálogo.
Registrarme
Utiliza esta opción para registrar online en Xara tu adquisición para que puedas obtener
actualizaciones de programa gratuitas, descuentos en actualizaciones, ofertas especiales y
otros beneficios.
Menús y shortcuts de teclado 353
Shortcuts de teclado
Las herramientas
Herramienta de selección F2 o V o Alt+S
Herramienta de edición de forma F4
Herramienta de rectángulo × + F3 o M
Herramienta de elipse × + F4 o L
Herramienta de texto F8 o T
Herramienta de relleno F5 o G
Herramienta de transparencia F6
Herramienta de sombra Ctrl + F2
Herramienta de foto P
Herramienta de desplazamiento (push tool) × + F8 o H o Alt + X (o barra espaciadora si
no está en la herramienta de texto)
Herramienta de zoom × + F7 o Z o Alt + Z
Las galerías
Galería de diseños × + F10
Galería de rellenos × + F11
Galería de frames × + F12
Galería de capas F10
Galería de mapa de bits F11
Galería de líneas F12
Zoom
Zoom previo Ctrl+R
Zoom a selección Ctrl+×+Z
Zoom a dibujo Ctrl+×+J
Zoom a página Ctrl+×+P
Ampliar (zoom in) Ctrl + + del teclado numérico
Alejar (zoom out) Ctrl+ - del teclado numérico
Zoom al 100% 1
Zoom al 200% 2
Zoom al 300% 3
Zoom al 400% 4
Zoom al 50% 5
Manipulación de documentos
En la herramienta de texto, los shortcuts señalados con el asterisco (*) tienen una acción
diferente. Lee a continuación.
354 Menús y shortcuts de teclado
Nuevo documento Ctrl+N
Nuevo documento animado Ctrl+×+N
Abrir documento Ctrl+O
Cerrar documento Ctrl+W
Cambiar documento Ctrl+Tab
Imprimir documento Ctrl+P
Guardar documento Ctrl+S
Importar Ctrl+×+I
Importar gráficos de la web Alt+W *
Exportar Ctrl+×+E
Calcular tiempo de redibujo Ctrl+×+T
Mostrar cuadrícula #
Mostrar guías 1 del teclado numérico
Ajustar a cuadrícula . del teclado numérico
Ajustar a guías 2 del teclado numérico
Ajustar a objetos * del teclado numérico
Seleccionar pantalla completa 8 del teclado numérico
Mostrar reglas Ctrl+Shift+R
Deshacer Ctrl+Z o < o ,
Rehacer Ctrl+Y o > o .
Manipulación de objetos
En la herramienta de texto, los shortcuts señalados con el asterisco (*) tienen una acción
diferente. Lee a continuación.
Mover los objetos seleccionados: teclas de flecha con la herramienta de selección (ver
Desplazar objetos (en la página 93))
Mover los controles deslizantes seleccionados: teclas de flecha en otras herramientas que
no sean la herramienta de selección
Herramienta de texto
Teclas de navegación Mueven el cursor de texto hacia arriba, abajo, izquierda o
derecha
un carácter por vez.
Inicio Mueve el cursor de texto al inicio de la línea.
Fin Mueve el cursor de texto al final de la línea.
Ctrl+flecha Mueve el cursor de texto una palabra hacia la izquierda/derecha.
izquierda/derecha.
Ctrl+Inicio Mueve el cursor de texto al inicio de la primera línea en un objeto
de texto.
Ctrl+Fin Mueve el cursor de texto al final de la última línea en un objeto de
texto.
Ctrl+A Selecciona todos los caracteres en un objeto de texto.
Herramienta de difuminación
Puedes controlar la barra de difuminación con tu ratón y el teclado. Si el campo de texto o
la barra de difuminación están seleccionados:
Legal
Copyright
Esta documentación está protegida por ley. Quedan reservados todos los derechos
especialmente los de duplicación, circulación y traducción.
Los otros nombres de producto pueden ser marca registrada del respectivo fabricante.
Si no aceptas estos términos y has adquirido el software, podrás retornar el CD-ROM con
el software dentro de los 14 días de la fecha de compra, siempre que esté sin utilizar e
intacto; o, en el caso de la descarga, deberás enviar una Carta de destrucción a tu
proveedor junto con la prueba de compra para obtener un reembolso.
Está permitido:
No está permitido:
(a) utilizar el software en ningún ordenador o sistema que permita el acceso electrónico al
mismo por más de un usuario;
(b) el alquiler, arrendamiento, sublicenciamiento, préstamo, copia (excepto lo
expresamente establecido en este Acuerdo), modificación, adaptación, fusión, traducción,
ingeniería inversa, decompilación, desmontaje ni creación de trabajos derivados basados
en todo o una parte del software o su documentación asociada, salvo lo permitido por ley;
(c) salvo lo expresamente establecido en este Acuerdo, la utilización, reproducción o trato
de ningún tipo con este software.
DURACIÓN
La licencia estará vigente hasta que se destruya el software y la documentación junto con
todas las copias. También finalizará en caso de violación de este Acuerdo. Al momento de
la finalización, se acuerda destruir todas las copias del software y su documentación,
incluyendo el software guardado en el disco duro de cualquier ordenador. Si se está
utilizando la versión de prueba del software, entonces los derechos de utilización del
software o de las imágenes creadas con el mismo finalizarán al momento del vencimiento
del periodo de prueba.
PROPIEDAD
Solamente eres propietario del CD-ROM (o reemplazo autorizado) en el que se ha
suministrado el software en caso de no haberse descargado. Podrás conservar este
CD-ROM siempre que se haya borrado el software. Xara conservará en todo momento la
propiedad del software según lo registrado en el CD-ROM original y todas las copias
360 Legal
posteriores del mismo sin importar su forma. Este Acuerdo es aplicable solamente al
otorgamiento de la licencia y no al contrato de venta del CD-ROM.
RESTRICCIONES
Esta licencia otorga el derecho a publicar, distribuir y reproducir imágenes creadas con
este software, incluyendo plantillas de gráficos, fotos, fuentes y rellenos incluidos en el
software, con las siguientes limitaciones:
1. Las plantillas, los gráficos, las fotos y las fuentes suministrados por el software no
pueden redistribuirse, venderse ni publicarse como una colección de imágenes ni como
parte de una colección de imágenes y, de forma específica, aunque no exclusiva, no
podrán incluirse en ninguna plantilla, clip·art, fuente, textura ni colección fotográfica, ya sea
en páginas web o de distribución por medios electrónicos como CD o discos, ni tampoco
podrán incluirse como parte de otro producto de ninguna forma, ya se ésta comercial o de
otro tipo. Sin perjuicio de lo anteriormente mencionado, la plantilla, gráfico, foto o fuente
podrá incluirse en una página web creada con Web Designer para propósitos personales
del cliente.
2. Las fotos incluidas con el software pueden utilizarse y distribuirse con propósitos
personales, pero cualquier redistribución comercial requerirá la adquisición de una licencia
ampliada de Xara o su licenciantes. Contacta con Xara Group Ltd para más detalles.
3. Cualquier aviso de copyright que no esté incluido en el HTML, Javascript o cualquier
otro código exportado por el software no debe eliminarse ni modificarse.
4. Algunas fuentes fueron suministradas por terceros que retienen el copyright. En todos
los casos el copyright queda reservado por Xara o el otorgante de la licencia y está
protegido por leyes internacionales de copyright.
5. Las imágenes creadas incluidas en este software o creadas por el mismo no podrán
utilizarse para ningún propósito prohibido por ley.
6. Considerando las restricciones mencionadas anteriormente, se permite crear páginas
web para tus propósitos personales o para propósitos comerciales de tu cliente.
CONSUMIDORES
Ninguna parte de este Acuerdo afectará los derechos legales como consumidor.
LEY
Este Acuerdo estará sujeto a la ley de Inglaterra.
Si tienes alguna pregunta acerca de este Acuerdo, por favor, escribe a Xara Group
Limited, Gaddesden Place, Hemel Hempstead, Herts, HP2 6EX, Reino Unido.
Agradecimientos
La fuente Geotype se suministró con el gentil permiso de Gary Bouton y continúa siendo ©
de Gary Bouton, visita www.theboutons.com. Algunas fuentes copyright © FontBank Inc.
Todos los derechos reservados. Otras fuentes fueron suministradas por terceros que
retienen el copyright.
En todos los casos el copyright queda reservado por Xara o el otorgante de la licencia y
está protegido por leyes internacionales de copyright.
Xara es marca registrada de Xara Group Ltd. Los contenidos de esta documentación y los
software asociados de Xara Xtreme son propiedad de Xara Group Ltd. y tienen copyright.
Cualquier reproducción completa o en partes está estrictamente prohibida. Para obtener
copias adicionales del software, por favor contacta al Xara Group Ltd. Términos de licencia
de MAGIX Web Designer 6.
Apple, Macintosh y TrueType son marcas comerciales registradas de Apple Computer, Inc.
A C-program for MT19937, Copyright (C) 1997 - 2002, Makoto Matsumoto and Takuji
Nishimura, All rights reserved. Más información de copyright en el archivo MTRand.txt que
se encuentra en la carpeta HelpAndSupport de la instalación del programa.
Algún código de programa es Copyright © 1996 Silicon Graphics Computer Systems, Inc..
Más información sobre copyright puede encontrarse en el directorio sg.txt
HelpAndSupport de tu instalación de Xtreme.
Parte de este software está basado en el trabajo del Independent JPEG Group.
El filtro de importación PDF incluye y utiliza los programas externos GPL: fax2png.exe and
fax2tiff.exe. El código fuente para estos programas está disponible en las siguientes
páginas web, o también los puedes encargar a Xara:
Todas las otras marcas comerciales o marcas comerciales registradas son propiedad de
sus respectivos fabricantes.
Index 363
Index
Importación de archivos..............................................................................319
Importación de Clipart con color ...................................................................26
Importación de foto RAW............................................................................321
Importación de fotos...................................................................................220
Importación de fotos grandes .......................................................................29
Importación de imágenes desde una página web. .......................................321
Importación de PDF ....................................................................................320
Importación de un archivo Photoshop PSD .................................................319
Importación e inserción de barras de navegación ........................................262
Importación y exportación...........................................................................317
Importante ..................................................................................................322
Importar (Ctrl+Shift+I)..................................................................................343
Importar desde la web (Ctrl+Alt+W).............................................................343
Importar y exportar formatos de archivo compatibles ..................................317
Imprimiendo ...............................................................................................310
Imprimir (Ctrl+P)..........................................................................................345
372 Index
Imprimir a archivo....................................................................................... 312
Imprimir capas ........................................................................................... 313
Imprimir como ............................................................................................ 313
Inclinar objetos ........................................................................................... 101
Incrustación de fuentes .............................................................................. 175
Indicaciones generales sobre la exportación e importación ......................... 317
Información de documento................................................................... 15, 344
Iniciar un nuevo documento.......................................................................... 64
Inicio del MAGIX Web Designer 6 ................................................................. 64
Inserción .................................................................................................... 270
Inserción con otra herramienta de autoría web............................................ 290
Inserción de un GIF animado ........................................................................ 63
Inserción de un objeto flash en MAGIX Web Designer 6. ............................. 289
Inserción de una película MP4 o FLV ............................................................ 63
Inserción manual de marcadores de posición ............................................. 274
Insertar texto de ejemplo ('Lorem Ipsum') ................................................... 159
Insertar un Google Map ................................................................................ 62
Integración de películas, Flash y otros widgets.............................................. 61
Intersección de formas ............................................................................... 130
Introducción ..........................................................13, 148, 219, 243, 284, 342
Introducir caracteres especiales.................................................................. 159
Introducir páginas en tu documento ............................................................. 73
Ll
Selección de idioma....................................................................................160
Selección de la ventana que se quiere visualizar............................................70
Selección de objetos con ayuda de la herramienta de sombras ...................195
Selección interna ..........................................................................................90
Selección y capas.........................................................................................91
Seleccionar bajo ...........................................................................................90
Seleccionar ítems .........................................................................................86
Seleccionar múltiples puntos de control ......................................................121
Seleccionar objetos ......................................................................................89
Seleccionar todo (Ctrl+A) ............................................................................346
Seleccionar todo el objeto de texto .............................................................158
Seleccionar todos los objetos .......................................................................91
Seleccionar un objeto dentro de un grupo...................................................108
Seleccionar y configurar una impresora .......................................................310
Separadores de menú ................................................................................259
Separar una forma ......................................................................................127
Shortcuts de teclado ..................................................................................353
Sin pérdidas vs. Con pérdidas (lossless vs. lossy)........................................227
Sincronización de texto...............................................................................109
Soltar una copia............................................................................................92
Sombras.....................................................................................................191
Sombras suaves, texto relleno de color, texto transparente ...........................39
Suavizar una línea .......................................................................................123
Subrayado de texto ....................................................................................169
Subtítulos de imagen ..................................................................................209
Superíndice y subíndice ..............................................................................172
Sustitución de archivos de imagen ..............................................................319
Sustitución de los rellenos de mapa de bits.................................................183
Sustitución de múltiples fotos .......................................................................34
Sustitución de múltiples fotos en simultáneo ...............................................221
Sustituir fotos .............................................................................................221
Tab...............................................................................................................92
Tabulaciones ..............................................................................................163
Tabulaciones personalizadas ......................................................................163
Tabulaciones, márgenes y sangrías.............................................................161
378 Index
Tamaño de foto inicial ................................................................................ 222
Tamaño de fuente ........................................................................................ 38
Tamaño de lista de archivos recientes ........................................................ 332
Tamaño de página ....................................................................................... 41
Terminología .............................................................................................. 149
Texto ................................................................................................... 37, 323
Texto alrededor de objetos ......................................................................... 165
Texto dentro de grupos para páginas web.................................................. 173
Texto en una columna ................................................................................ 153
Texto girado................................................................................................. 39
Texto siguiendo una curva.................................................................. 157, 163
Texto simple............................................................................................... 153
Texto sincronizado ....................................................................................... 45
Tintes......................................................................................................... 145
Tipo de imagen web ................................................................................... 210
Tipos de relleno.......................................................................................... 178
Tipos de tabulaciones personalizadas......................................................... 163
Tonalidades ............................................................................................... 145
Trabajar con colores................................................................................... 136
Trabajar con documentos............................................................................. 64
Trabajar con fotos ...................................................................................... 219
Trabajar con objetos..................................................................................... 89
Trabajar con textos .................................................................................... 148
Traer al frente (barra de control arreglo o Ctrl+F) ......................................... 347
Transparencia .................................................................................... 189, 303
Transparencia en un grupo......................................................................... 300
Tu primera animación ................................................................................. 287
Widgets ........................................................................................................24
Widgets de la galería de diseños .................................................................269
Widgets de otros sitios de widgets..............................................................272
Widgets de sitios web.................................................................................268
Widgets y marcadores de posición
todo automático ......................................................................................268
Zoom..........................................................................................................353
Zoom 1: 1...................................................................................................245
Zoom y desplazamiento de la página ............................................................17