Sunteți pe pagina 1din 547

WEB

D
 ESIGNER11
P
 REMIUM

Manual en espaol
2

Copyright
Esta documentacin est protegida por ley. Quedan reservados todos los derechos
especialmente los de duplicacin, circulacin y traduccin.

Ninguna parte de esta publicacin puede reproducirse a travs de fotocopias,


microfilm o cualquier otro procedimiento, as como tampoco transferirse a un idioma
utilizable por mquina alguna, especialmente equipos de procesamiento de datos, sin
la aprobacin por escrito del propietario de los derechos de autor.

Quedan reservados todos los copyrights.

Otros nombres de productos mencionados son marca registrada de su respectivo


fabricante. Queda reservado el derecho a introducir cambios al contenido, as como
modificaciones al programa.

Copyright Xara Group Ltd., 1994 - 2015. All rights reserved.


Xara es una marca registrada de Xara Group Ltd.
Xara Group Ltd. es una compaa afiliada de MAGIX GmbH & Co. KGaA.
MAGIX es una marca registrada de MAGIX GmbH & Co. KGaA.

Los otros nombres de productos pueden ser marcas registradas de sus


correspondientes fabricantes.

www.magix.es
Copyright 3

Indice
Copyright 2

Asistencia tcnica 14

Introduccin 16
Qu es MAGIX Web Designer 11 Premium? 16
Por qu Web Designer es tan especial? 16
Una pgina web en 6 pasos 17
Cules son las novedades de MAGIX Web Designer 11 Premium? 18
Diseo de pgina 18
Contenido 19
Publicacin y presentacin 19
Ayuda 21

Primeros pasos 23
Diseo del programa 23
Objetos en la pgina 26
Mens con clic derecho 27
Diseo web basado en objetos 28
La herramienta de seleccin 29
Creacin de una pgina Web 31
Vista previa de tu pgina web 31
Uso de plantillas, cliparts y widgets 33
Galera de diseos 34
Catlogo de contenido online 36
Colores de la pgina web 37
Fondos de pgina web 39
Fotos 40
Texto 44
Tamao de pgina 48
Guardar tu trabajo. Creacin de una pgina Web 49
Grupos 50
Objetos repetidos 51
Creacin de botones, banners y otros grficos web 52
Enlaces, botones y barras de navegacin 53
Tus propios iconos en las pestaas de los navegadores (favicon) 56
Herramientas de dibujo 57
Capas, MouseOver (rollover) y elementos emergentes 65
4

Publicacin de tu pgina web 71

Manejo de documento 73
Iniciar un nuevo documento 73
Abrir un documento existente 73
Compartir documento en mltiples ubicaciones 74
La ventana de MAGIX Web Designer 11 Premium 75
Abrir una segunda ventana 79
Cambiar el valor de zoom 80
Desplazar el documento dentro de la ventana 81
Cambiar el tamao de pgina 82
Pginas mltiples en el documento 83
Guardar el documento 86
Directorios de compatibilidad 86
Cerrar el documento 88
Copias de seguridad automticas 88
Cuadrcula en pantalla 91
Reglas 92
Calidad de imagen 93
La tecla de restriccin 94
Galeras 95
Deshacer y rehacer 104

Trabajar con objetos 106


La herramienta de seleccin 106
Mover objetos 109
Eliminar objetos del documento 113
Duplicar y clonar 113
Mover objetos hacia adelante o hacia atrs 115
Girar utilizando el ratn 115
Cambio del tamao de objetos (escalar) 117
Voltear objetos 120
Extender o reducir objetos 120
Inclinar objetos 121
La herramienta de moldes 122
Ajuste 126
Difuminacin (Feathering) 130
Objetos gua y lneas gua 130
Resumen de shortcuts del teclado numrico 132
Conflictos en el diseo de pginas 132

www.magix.es
Copyright 5

Agrupar y desagrupar objetos 133


Grupos suaves (soft groups, en ingls) 134
Alineacin 136
Copiar estilos - pegar atributos 139
ClipView 140
Nombrar objetos 141
Objetos repetidos 143
Pies de pgina y objetos que se amplan con la pgina. 146

La herramienta de edicin de formas 149


Dibujar una linea o forma 150
La herramienta de mano alzada y pincel 150
Editar lneas/formas con la herramienta de dibujo libre y pincel 153
La herramienta de lneas rectas y flechas 154
La herramienta de edicin de formas 155
Extender la lnea. 158
Finalizar la lnea 158
Aadir un nuevo punto de control 158
Seleccionar mltiples puntos de control 159
Eliminar puntos 160
Mover puntos de control - Herramienta de edicin de formas 160
Suavizar una lnea 161
Restringir la lnea 162
Convertir una lnea recta en una curva (y viceversa) 162
Cambiar curvas 162
Unir lneas 164
Cambiar el ancho de lnea (grosor) 165
Galera de lneas 166

Manejo de formas 169


Herramientas de dibujo y forma 169
Crear rectngulos y cuadrados 169
Crear crculos y elipses 170
Smartshapes 171
Edicin de smartshapes 171
Crear polgonos y estrellas 173
Combinar formas 176

Trabajar con colores 179


La lnea de colores 179
Aplicar colores de relleno y lnea con arrastrar y soltar 181
6

Editar el color de un objeto 182


Aplicacin de un color de fondo para el texto 183
El editor de color 183
Colores locales y colores originales 186
Esquemas de colores originales 186
Creacin de tus propios esquemas de colores 187
Creacin de nuevos colores con nombre 188
Reemplazar colores 189
Editar colores con nombre 190
Colores normales, tintes, tonalidades y colores vinculados 193
Creacin de un tinte, una tonalidad o un color vinculado 194

Trabajar con textos 196


Introduccin 196
Terminologa 197
La herramienta de texto 197
Men de fuente 199
Fuentes de Google 201
Smbolos de la fuente Font Awesome 202
Texto simple 204
Texto en una columna 205
reas de texto 206
Texto siguiendo una curva 210
Editar texto 211
Corrector ortogrfico 213
Autocorreccin 214
Buscar y reemplazar 215
Cmo sincronizar el texto empleando Grupos suaves 216
Tabulaciones, mrgenes y sangras 216
Texto alrededor de objetos 220
Grficos anclados 222
Grficos incrustados 225
Lista con vietas y numeradas 225
Estilos de texto 227
Aplicar estilos de texto 232
Enlaces de texto 235
Texto dentro de grupos para pginas web 235
Copiar estilos de texto 236
Copiar / Pegar texto con formato (RTF) 237
Incrustacin de fuentes en el documento 237
www.magix.es
Copyright 7

Incrustacin de fuentes en un sitio web 237


Permisos de fuentes 238

La herramienta de relleno 239


Crear un relleno de color con gradacin 239
Tipos de relleno 239
Barra de informacin de herramienta de relleno 241
Rellenos lisos 243
Rellenos lineales 243
Rellenos circulares 244
Rellenos elpticos 245
Rellenos de mapa de bits 245
Relleno fractal 248
Gradaciones de color de varios niveles 249
La galera de rellenos 250

Transparencia 252
Aplicar transparencia plana 253
Aplicar transparencia con gradacin 253
Transparencia con gradacin de varios niveles 254
Tipos de transparencia 254
Perfil 255
Mapas de bits 256
Control deslizante / resolucin 256
Aplicar transparencia a varios objetos 256

Sombras 257
La herramienta de sombra 257
Aplicar una sombra 257
Cambiar el color de sombra o el efecto de relleno 259
Eliminar una sombra 260
Aplicar una sombra a varios objetos 260
Seleccin de objetos con ayuda de la herramienta de sombras 261
Copiar sombras a otros objetos 261

Biseles 262
La herramienta de bisel 262
Aplicar un bisel 262
Aplicar un bisel a varios objetos 263
Modificar un bisel 263
Eliminar un bisel 266
8

Mscaras 267
Crear una mscara 267
Las herramientas de regin de foto y mscara 267
Editar mscara. 268
Mscaras suaves 269
Operaciones que utilizan la mscara 269
Copiar formas a la capa de mscara 271

Dilogo de propiedades web 272


Pestaa Enlace 273
Pestaa Pgina web 279
Pestaa Pgina 282
Pestaa Imagen 285
Propiedades de MouseOver (animaciones web) 289
Pestaa Marcador de lugar 290
Animacin web 294
Objetos sticky y stretchy 294
Pestaa Publicar 294
Pestaa Analytics 296

Diseo web adaptativo 297


Acerca de RWD 297
Variantes mltiples 298
Crear pginas web RWD desde las plantillas 299
Crear sitios web RWD desde sitios existentes 299
Compartir a travs de variantes 300
Variantes y objetos repetidos 301
Variantes y barras de navegacin 301
Publicacin de variantes 302

Supersites 303
Sobre las Supersites 303
Habilitar Supersites 303

Objetos sticky y stretchy 306


Objetos sticky 306
Objetos stretchy 309
Combinaciones de objetos sticky y stretchy 311

Fondos de pgina web 312


Fondos de plantilla y cambio de color de fondo 314

www.magix.es
Copyright 9

Fondos fijos no desplazables 314


Usar fotos como fondo. 315
Capas de fondos de pgina o de tablero de dibujo 315
Variantes y fondos de diseo web adaptativo 316
Desplazamiento de la parte superior de la pgina 317

Publicar pgina web 318


Publicacin al sitio web TaskPilot M 318
Publicacin en un alojamiento web alternativo 320
Inclusin de la pgina web en la galera de usuarios 324
Explorar espacio web 324
Publicacin rpida (solo archivos modificados) 325
Guardar la configuracin de publicacin en el documento 325
Guardar perfiles 326
Documentos web y PDF 326

Trabajar con fotos 327


Introduccin 327
Imgenes de alta resolucin 327
Objetos de fotos 328
Grupos de foto 329
Importacin de fotos 330
Copias de memoria cero 332
La galera de mapa de bits 333
Archivos JPEG integrados 336
Calidad de visualizacin de fotos 337
Guardar y exportar fotos 338
Atributos de la edicin de fotos 340
Editar el contorno de las fotos 341
Recortar fotos 341
Recortar fotos con una mscara 342
Herramienta Capturar pantalla 342
Colorear fotos 344
Cambiar el tamao, rotar y reposicionar la foto dentro de su propio marco 344
Enderezar horizonte 346
Ver una foto ampliada en su tamao completo 347
Darle el tamao completo a una foto 347
Optimizacin de fotos y mapas de bits 347
Convertir objetos o dibujos a mapas de bits 350
Documentos fotogrficos 351
10

Edicin de archivos de fotos 352

La herramienta de fotos 353


Introduccin 353
Utilizacin de la herramienta de fotos 353
Funciones comunes para fotos 354
Herramienta de optimizacin 355
Herramienta de corte 360
Notas para la herramienta de foto 362
La herramienta de ojos rojos 363
Efectos en tiempo real 365
Cambio de tamao teniendo en cuenta el contenido 368
Creacin de panormicas 373

Herramienta de extrusin 3D 376


Extrudir una forma 376
Barra de informacin de Herramienta de extrusin 377
Texturas y fotos 380
Extrudir texto 380
Copiar atributos de una extrusin 3D 381
Insertar sombras detrs del objeto 381

Barras de navegacin 382


Web Designer y las barras de navegacin 382
Usar de barras de navegacin de plantillas 383
Dilogo Propiedades de la barra de navegacin 384
Barra de navegacin del sitio 386
Barras de navegacin de botn nico 387
Botones y mens 389
Actualizacin de la barra de navegacin en todas las pginas 393
Edicin en el lienzo 393
Cambio de la fuente de los botones de la barra de navegacin 394
Importacin e insercin de barras de navegacin 394
Creacin de barras de navegacin propias 394

Presentaciones como pginas web 396


Sobre las presentaciones 396
Pasos y capas 396
La barra de herramientas "Presentacin" 398
Creacin de una presentacin 399
Manejo de los pasos de presentacin 402

www.magix.es
Copyright 11

Agregado de nuevas pginas de presentacin 404


Creacin de listas con nmeros y vietas 404
Eliminar pginas de presentacin 404
Enlaces al paso siguiente/anterior 404
Aplicacin de transiciones a pasos de presentaciones 405
Aplicacin de transiciones a pginas de presentaciones 406
Informacin de presentacin avanzada 406

Widgets de sitios web 408


Widgets y marcadores de posicin - todo automtico 408
Widgets de la galera de diseos 409
Agregado de archivos de pelculas y animaciones 412
Widgets de otros sitios de widgets 415
Cambio de tamao de widgets 415
Insercin manual de marcadores de posicin para widgets 417
Ms informacin 417
Insercin manual de un mapa de Google 417

Galera de pginas y capas 419


La galera de pginas y capas 419
Pginas 422
Capas 422
Operaciones de capa 425
Capas especiales 428
Ocultar capas 429
Modo Solo 429
Bloquear capas 429
Mostrar todo y desbloquear todo 430
Mover objetos entre capas 430

Animaciones web 431


Utilizacin de animaciones web 431
Funciones MouseOver 432
Animaciones de clic/toque 432
Animaciones de aparicin 432
Combinaciones de animaciones y tipos de objetos 434

Animaciones en Flash 435


Introduccin 435
Principios bsicos 437
Tu primera animacin 438
12

Exportacin de un archivo Flash 440


Exportacin de animaciones como AVI 441
La galera de frames de animacin 442
Fotos 444
Duracin de frames para pelculas Flash y pasos intermedios 447
Recortar y cortar 448
Velocidad de la animacin 449
Fluidez de la animacin (smoothness) 450
Rotacin 450
Grupos 452
Qu funciones de MAGIX Web Designer 11 Premium son compatibles con Flash?453
El color se transforma el color de la animacin cambia 455
Transparencia 455
URL en Flash 456
Funciones de Flash avanzadas 457
Resumen de animacin de MAGIX Web Designer 11 Premium Flash 459
Crear GIF animados 460
Propiedades de GIF animados 461

Importacin y exportacin 463


Indicaciones generales sobre la exportacin e importacin 463
Web Designer y HTML5 463
Importar y exportar formatos de archivo compatibles 464
Importacin de archivos 467
Exportacin de archivos 470
Resumen del dilogo de exportacin GIF, PNG y JPEG 474

Imprimiendo 480
Mostrar bordes de impresin 480
Seleccionar y configurar una impresora 480
El dilogo de impresin 481
Opciones de impresin: Pestaa Salida 483
Opciones de impresin: Pestaa Diseo de la impresin 485

Personalizacin de Web Designer 487


Cambio del documento de plantilla en blanco 487
Opciones del men "Herramientas" 487
Pestaa General 488
Pestaa Cuadrcula y regla 492
Pestaa Ratn 493
Pestaa Tamao de pgina 495
www.magix.es
Copyright 13

Pestaa Copias de seguridad 496


Pestaa efectos y plug-ins 496
Barras de control 497

Mens y shortcuts de teclado 501


Introduccin 501
Men Archivo 501
Men Edicin 506
Men Arreglo 509
Men Insertar 512
Men Herramientas 513
Men Compartir 515
Men Ventana 517
Men Ayuda 519
Shortcuts de teclado 521

Index 527
14

Asistencia tcnica
Estimado usuario de MAGIX:

Nuestro objetivo es ofrecerte en todo momento una ayuda rpida, cmoda y


resolutiva. Por ello ponemos a tu disposicin una amplia oferta de servicios:

Asistencia web ilimitada:


Como cliente MAGIX registrado, dispones de asistencia web ilimitada a travs
del portal de servicios de MAGIX de diseo sencillo support.magix.net. Aqu
tienes acceso a un asistente de ayuda inteligente, preguntas frecuentes, parches
e informes de experiencias de usuarios que se actualizan continuamente.
La nica condicin es que registres el producto en www.magix.es.
La plataforma de intercambio multimedia como punto de ayuda:
Como cliente MAGIX puedes acceder a la Multimedia Community
www.magix.info de forma gratuita e ilimitada. La plataforma de intercambio
multimedia rene a ms de 120.000 miembros y ofrece la oportunidad de hacer
preguntas acerca de los productos MAGIX o buscar preguntas para temas
especficos a travs de la funcin de bsqueda. Adems de preguntas y
respuestas, encontrars un glosario, vdeos de ejemplo (tutoriales) y un foro de
debate. Los numerosos expertos que encontrars en www.magix.info te
garantizan respuestas rpidas, incluso en pocos minutos.
Asistencia por correo electrnico para productos MAGIX:
Para cada nuevo producto de MAGIX, recibirs a partir de la fecha de compra y
de forma automtica, 12 meses de soporte tcnico gratuito va e-mail.
Asistencia Premium por correo electrnico:
Para asistencia especial o para asistencia tcnica sobre problemas de hardware
de productos no relacionados con MAGIX, puedes optar por un servicio de
asistencia por e-mail Premium. Para ello, accede a http://support.magix.net en
la pgina de asistencia de MAGIX y haz clic tras el iniciar sesin en el "Adquirir
cdigo de acceso". El servicio abarca un caso de un problema especfico hasta
que este se resuelva y no se limita a un solo e-mail.

Ten en cuenta: para poder utilizar la asistencia por e-mail Premium y la asistencia
por e-mail gratuita para productos mediante Internet, debes tener registrado tu
programa MAGIX con tu nmero de serie. El nmero de serie de tu producto se
encuentra en la cubierta del CD o en la parte interior de la caja del DVD.

Servicio telefnico de atencin al cliente:


Aparte de los numerosos servicios gratuitos podrs utilizar el servicio de pago
de atencin telefnica al cliente.

Un resumen de los nmeros de telfono de la asistencia tcnica lo puedes encontrar


aqu:

http://support.magix.net/contact/es
www.magix.es
Asistencia tcnica 15

Correo: MAGIX Development Support


01194 Dresden
Alemania

Por favor, ten preparada la siguiente documentacin al realizar tu llamada:

Cul es el programa MAGIX (versin) que ests utilizando?


Qu sistema operativo utilizas?
Cul es el nombre y resolucin de la tarjeta grfica?
Cul es el nombre de la tarjeta de sonido? O ests utilizando el sistema de
sonido integrado de tu ordenador?
Para software de vdeo: cul es el nombre de la tarjeta de vdeo o tarjeta
Firewire?
Cul es el tamao de la memoria RAM?
Qu versin de DirectX tienes instalada?

MAGIX Ventas

Nmero de telfono: +34 911 875 676

MAGIX Ventas est disponible los das laborales para las consultas y problemas
siguientes:

Pedidos
Asistencia de producto (antes de la compra)
Pedidos de actualizaciones
Devoluciones
16

Introduccin
Es evidente que la gran mayora de pginas web tienen una naturaleza grfica. La
presentacin de tu pgina web es muy importante. T deseas una pgina web con
una imagen competente y profesional. Para crear tu pgina, creemos que no es
necesario usar gran cantidad de herramientas, tanto para la edicin grfica como para
HTML. Creemos que debes tener libertad total para incluir cualquier tipo de texto,
grfico o foto en cualquier lugar de la pgina.

La creacin de pginas web debera ser como la creacin de archivos PDF: no


deberas tener la necesidad de saber qu pasa 'bajo el cap'. En el caso de los archivos
PDF, no debes editarlos directamente. Tampoco deberas tener la necesidad de saber
sobre HTML al crear tu pgina web.

Qu es MAGIX Web Designer 11 Premium?


MAGIX Web Designer 11 Premium es una solucin completa para el diseo de
pginas web. Te ofrece la libertad de elegir si deseas realizar el diseo de tu pgina
web desde cero o si deseas personalizar cualquiera de las numerosas plantillas del
programa a tu gusto. Gracias a los aos de experiencia con la tecnologa "Xtreme",
tambin es posible crear animaciones Flash, editar fotos, y optimizar o cambiar los
esquemas de color de las pginas web con slo unos clics. Tambin puedes obtener
una vista previa de tu pgina web y subir tu proyecto directamente desde MAGIX
Web Designer 11 Premium a un servidor FTP para pasar de la creacin a la publicacin
en pocos segundos. Gracias a las funciones prcticas, como la insercin de objetos de
marcador de posicin, tu sitio web obtendr rpidamente un aspecto profesional y
nico al mismo tiempo.

Por qu Web Designer es tan especial?


Web Designer es nico porque es la nica herramienta de diseo web de forma libre
que permite una verdadera libertad al disear una pgina web cuyo resultado es lo
que ves. En otras palabras, puedes posicionar el texto, grficos y fotos en cualquier
lugar de la pgina, configurar cualquier tamao, ngulo, superposicin, transparencia,
etc. y Web Designer producir una pgina HTML precisa que funcionar
perfectamente.

Web Designer puede hacer cosas que se consideran casi imposibles con otros
software de autora web, como hacer fluir el texto alrededor de fotos o formas
irregulares. Incluye herramientas avanzadas de vectores grficos para que puedas
dibujar lo que desees: desde formas simples hasta logos y grficos complejos.
Tambin cuenta con optimizacin automtica de grficos (no slo produce imgenes
de resolucin optimizada, sino que tambin detecta los elementos que se repiten en
toda la pgina web, lo que produce pginas ms rpidas y ms optimizadas).

www.magix.es
Introduccin 17

Es compatible con capas CSS con caractersticas avanzadas, como transparencia


(incluyendo transparencia con gradacin), efectos mouse-over y ms. Crea pginas
web HTML totalmente compatibles con los exploradores, las plataformas y XHTML.

Adems, Web Designer es probablemente la herramienta de autora web ms fcil de


aprender.

Web Designer est pensado para diseadores grficos que no quieren aprender
HTML ni lenguajes de scripting. Para diseadores grficos, es la herramienta
prototipo para pginas web rpidas perfecta.

Tambin est pensado para principiantes que simplemente quieren disponer de la


forma ms fcil de crear pginas web de aspecto profesional.

Web Designer no incluye herramientas de programacin, edicin de scripts ni una


"vista HTML". Nuestra filosofa de diseo es la siguiente: no necesitas saber el
lenguaje de programacin de PDF para crear un PDF. Por lo tanto, tampoco debes
conocer nada acerca de HTML o Javascript para poder crear pginas web geniales.

Una pgina web en 6 pasos


Para quienes no tienen mucha paciencia (la mayora 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 introduccin bsica como de una pgina web real con
la que puedes experimentar. Tambin puedes encontrar este documento de ejemplo
en la galera de diseos.

Haz clic en botn, abre la categora INTRODUCCIN y haz doble clic en el primer
documento.
Aqu puedes averiguar como cambiar los colores de la pgina web, corregir el texto,
arrastrar y soltar fotos, mover objetos alrededor de la pgina y ms.

Deshacer
Recuerda que puedes deshacer cualquier cambio, utilizando el botn de
deshacer o Ctrl+Z. Si mantienes pulsado el botn puedes deshacer todas las
acciones hasta el comienzo.
18

Cules son las novedades de MAGIX Web


Designer 11 Premium?
MAGIX Web Designer 11 Premium presenta algunas geniales caractersticas nuevas
para crear sitios de ltima tecnologa con estilo contemporneo (como objetos
sticky y fondos que pueden expandirse al ancho completo). Adems, ahora tambin
podrs editar tus sitios online con cloud.xara.

Diseo de pgina
Objetos sticky (solo versin Premium)
Estos son objetos que puedes dejar fijos en un lugar mientras que la pgina
subyacente se desplaza. Un buen ejemplo es la barra de navegacin que puedes fijar
en la parte superior de la pgina para que cuando los visitantes se desplacen hacia
abajo puedan seguir navegando fcilmente a otras pginas sin tener que regresar a la
parte superior. En la versin 11 cualquier objeto puede fijarse en cualquier lugar de la
pgina.

Fondos stretchy (solo versin Premium)


Los diseos de sitios web sin lmites evidentes entre las pginas son muy populares
actualmente; en este tipo de diseo en general vers un fondo de pgina que cubre
toda la ventana del navegador y se extiende para ocupar su ancho. En Web
Designer 11 puedes hacer que cualquier rectngulo o imagen se extienda para cubrir la
ventana del navegador tanto en sentido horizontal como vertical.

Nuevas posibilidades de animacin


Un nuevo dilogo de animacin web ofrece nuevas opciones de animacin potentes y
fciles de aplicar. Ahora podrs configurar los objetos para que:

Tengan una animacin al pasar el cursor sobre ellos (MouseOver)


Tengan una animacin al aparecer por primera vez, es decir, que la primera vez
que el objeto aparezca puedes hacer que se desplace o aparezca gradualmente
cuando navegas hacia abajo en una pgina (solo Premium).
Tengan una animacin si se les hace clic (o se los toca en un dispositivo tctil)
(solo versin Premium)

Adems, hay nuevos tipos de animacin muy atractivos para las opciones de
MouseOver y clic, como tambaleo y rebote.

www.magix.es
Introduccin 19

Mejoras en el manejo del texto


Expansin de la autocorreccin/abreviaturas Crea tu propia lista de abreviaturas
que se ampliarn automticamente cuando escribas, por ejemplo, XWD podra
ampliarse a Xara Web Designer a medida que introduzcas el texto. Tambin es
muy til para smbolos, por ejemplo, puedes configurar que la palabra yen se
convierta en el smbolo . (Solo versin Premium)
Autocreacin de enlaces cuando escribes una URL, por ejemplo, si escribes
xara.com se crear automticamente un enlace al sitio web de Xara.
Opcin de color de fondo de texto para que puedas destacar fcilmente algunas
palabras
Una forma sencilla de reemplazar una fuente por otra en todo el documento
(muy til para sustituir fuentes que faltan al importar PDF)
Actualizar estilo para que coincida (conveniente para copiar estilos de otro
documento o para aplicar estilos a documentos que an no los tienen, como
PDF importados)
Ms informacin detallada sobre permisos para la incrustacin de fuentes en
Informacin del documento
Exportacin precisa de texto con kerning

Contenido
Nuevas plantillas
Seis nuevos temas web en Web Designer, ms otros diseos actualizados para que
incluyan variantes para el mvil. Ms de 30 nuevos temas web en Web Designer
Premium con hasta 16 diseos de pgina, todos con variantes para el mvil
(normalmente se venden en paquetes web por 10 $ cada uno).

Nuevos widgets
Un nuevo widget flexible y potente para crear pases de diapositivas en TaskPilot.

Publicacin y presentacin
Edicin online con cloud.xara (beta)
Una manera ultrasencilla de visualizar, editar y actualizar el contenido de tu pgina
web de Xara a travs del navegador de tu equipo o tablet (s, tambin para tablets
Mac y Android!) y desde cualquier lugar del mundo, y para republicar tu sitio web.

Para diseadores comerciales:

Otorga derechos de edicin controlada a tus clientes, es decir, permteles editar


texto y reemplazar imgenes
20

Ests debatiendo con tu cliente por telfono sobre un nuevo diseo? Ahora
puedes actualizar la versin en la nube en tiempo real para que tu cliente vea los
cambios a medida que conversan

Y para todos:

Actualiza el texto (blogs, noticias, precios, etc.) o sustituye imgenes y republica


tu propio sitio web desde cualquier lugar
Trabaja con colegas en el mismo sitio web y en el mismo momento

Sincronizacin de documentos con Dropbox o Google


Drive
Web Designer ahora puede sincronizar archivos mediante Dropbox y Google Drive.
Por lo tanto, si tienes el mismo archivo abierto en varios equipos y lo editas y guardas
en uno, se actualizar tambin en el Web Designer de los otros equipos.

Esto tiene tambin otra ventaja adicional: Dropbox y Google Drive conservan
versiones anteriores de tus archivos y permiten volver a ver y regresar fcilmente a las
versiones anteriores (en Dropbox solo debes hacer clic derecho en un archivo y
seleccionar "Ver versiones anteriores"). Esto ofrece una forma segura y fcil de
guardar mltiples versiones de los archivos de tu sitio web, y de ahorrar espacio.

Publicacin segura va FTP


Web Designer 11 es compatible con la publicacin va SFTP y FTPS.

Mejoras en la importacin y exportacin


Importacin de PDF:
Mejores posibilidades de edicin de texto (reconstruccin mejorada de texto,
mrgenes, importacin mejorada de enlaces de texto, importacin mejorada de
subrayado)
Compatibilidad mejorada para la importacin de PDF con subgrupos de fuentes
incrustadas, cuando las fuentes no estn instaladas localmente
Se han efectuado pequeas mejoras y se han solucionado problemas menores.

Otras opciones de importacin/exportacin

Opcin de exportar una versin para Retina de un grfico al exportar una versin
de 96 dpi (solo versin Premium)
Mejoras a la importacin de Word

Incluye alojamiento web "M" gratuito en el sitio web


TaskPilot
Web Designer incluye alojamiento web gratis con TaskPilot, que incluye 500 MB de
alojamiento web y TaskPilot (con calendarios y contactos en la nube). Web Designer

www.magix.es
Introduccin 21

Premium incluye el alojamiento web avanzado "M" de TaskPilot gratis por un ao (por
un valor de 1,99 $ por mes). Esto ofrece 2 GB de alojamiento web gratis y un ao
gratis de un nombre de domino (p. ej., tunombre.com o .es o .de, etc.) Adems, si
publicas en TaskPilot puedes proteger tus pginas web con contrasea.

Otras pequeas mejoras


Los objetos se redimensionan automticamente al ancho de la columna si los
insertas en una columna de texto
Actualizacin de los smbolos de la fuente Awesome (una forma rpida y fcil
de insertar smbolos de la amplia y creciente seleccin de fuentes Awesome.
Podrs ver el conjunto completo a travs del men Insertar).
Posibilidad de controlar los espacios entre las pginas de los supersites
verticales y horizontales (solo versin Premium)
Uso offline del cuadro de dilogo de opciones de exportacin web
Si se incrustan los contornos, las fuentes tendrn el aspecto correcto tambin en
documentos importados que no cuenten con esas fuentes; por ejemplo, de
documentos PDF importados que, en su mayora, contienen contornos de letras
incrustados.
Nueva opcin de Arreglo > Combinar formas > Entrecruzar todas las formas (las
reas que se superponen se convierten en formas independientes) (solo versin
Premium)
Compatibilidad mejorada en las herramientas de dibujo para dispositivos tctiles
modernos, incluido Microsoft Surface (solo versin Premium)
Pequeas mejoras en los mens desplegables
Algunas mejoras en los widgets de la galera de fotos (ahora puedes fijar el
tamao de los popups)
Nuevo panel de texto para fotos SmartShape

Ayuda
Si necesitas ayuda para el manejo de este programa, a continuacin encontrars
informacin que puede serte til:

Ayuda de programa: selecciona "AYUDA DE MAGIX WEB DESIGNER 11 PREMIUM" del


men "AYUDA" para abrir la ayuda de Web Designer, que contiene cientos de
pginas de informacin.
Barra de estado: intenta leer el texto de la barra de estado en el extremo inferior
de la ventana principal de MAGIX Web Designer 11 Premium. Siempre ofrece
una descripcin de las acciones actuales y de sus efectos (incluso durante los
arrastres), lo que resulta ideal para aprender a usar las herramientas de MAGIX
Web Designer 11 Premium. Tambin cuando colocas el cursor sobre los botones
y los controles, el programa te informa sobre lo que hacen. Para ms detalles,
consulta la barra de estado.
Consejos para herramientas (tooltips) (en la pgina 22): si colocas el cursor del
ratn sobre un botn o control por un momento, aparecer un mensaje
informndote de su funcin.
22

Mens: si deseas saber cul es la funcin de un men, seleccinalo y pulsa "F1".


Cajas de dilogo: si quieres saber lo que hace una caja de dilogo o cmo usarla,
haz clic en AYUDA.
Vdeos: usa la opcin del men "AYUDA" > "PELCULAS ".

Informacin de documento
"ARCHIVO" > "INFORMACIN DE DOCUMENTO" muestra informacin sobre el
documento seleccionado como el tamao o cualquier fuente utilizados. Esta es una
buena forma de comprobar si te falta alguna fuente necesaria que pudiera impedir
que el documento se visualice correctamente.

Cualquier texto que introduzcas en el campo de comentario se guardar como parte


del archivo. Este comentario se mostrar siempre que abras el dilogo de informacin
de documento.

Consejos de herramientas
Cuando te desplazas sobre un botn, el
consejo de herramienta te informa la
funcin de ese botn.

Acerca de Web Designer


Escoge AYUDA > ACERCA DE MAGIX WEB DESIGNER 11 PREMIUM . Esto te mostrar
informacin general sobre el programa. Si contactas con la asistencia tcnica de Xara,
es posible que se te solicite esta informacin.

www.magix.es
Primeros pasos 23

Primeros pasos
Esta seccin te ofrece una idea general de las funciones principales de Web Designer.
Las secciones siguientes te darn ms detalles sobre cada una de las herramientas.

Diseo del programa

Barra de informacin: cambia con cada herramienta


Barra de herramientas de la pgina web
Zoom
Galera de diseos (barra de galeras)
Galera de pginas y capas (barra de galeras)
Herramienta de seleccin
Herramienta de edicin de fotos
Herramientas de dibujo
Herramienta de texto
Herramienta de sombra
24

Pestaas para todos los documentos abiertos: el icono identifica el tipo de


documento.
Lnea de color

Nota: todas las barras de informacin de Web Designer han mejorado la


renderizacin de texto para facilitar la visualizacin, siempre que tengas habilitado el
texto ClearType en el panel de control de Windows.

En la barra superior hay cuatro botones relacionados con las funciones de la pgina
web. Tres de estas opciones tienen barras desplegables que se muestran cuando
colocas el cursor del ratn sobre ellas y te ofrecen ms funciones.

Exportar y previsualizar la pgina web


Propiedades del enlace
Opciones de pgina web
Exportar

Coloca el cursor sobre cada botn de la barra desplegable para obtener un consejo de
herramienta con la descripcin del botn.

Hay dos maneras de crear una pgina web. Se puede comenzar con una plantilla
diseada previamente y personalizarla con tus propios textos, fotos y esquema de
colores. O se puede crear una pgina web desde cero, colocando todos los elementos
requeridos, texto, grficos y fotos en el lugar que quieras.

Nota: por defecto, cuando Web Designer abre un documento nuevo, muestra solo
una pgina. Para ver todas las pginas en tu documento de pgina web, haz clic
derecho en una pgina y selecciona VISTA DE PGINA MLTIPLE . Ahora puedes
desplazarte de arriba a abajo por la ventana de Web Designer para ver todas las
pginas en el documento.

www.magix.es
Primeros pasos 25

Zoom y desplazamiento de la pgina


Estas funciones comunes se hacen de manera sencilla:

Para ampliar o alejar con el zoom, mantn "Ctrl" pulsado y utiliza la rueda del
ratn
Para desplazar la pgina, presiona la rueda del ratn y muvelo (la rueda
tambin funciona como un botn)
Para desplazarte por la pgina usa la rueda del ratn (o las barras de
desplazamiento, claro)

Los documentos web se visualizan por


defecto en modo de pgina nica y los
documentos de impresin en modo de vista
multipgina. Cambia de modo de
visualizacin haciendo clic derecho en la
pgina o tablero de dibujo y seleccionando o
desactivando VISTA MULTIPGINA del men
desplegable. A la izquierda se muestra un
ejemplo de vista multipgina.

Puedes arrastrar y soltar elementos entre


pginas. Cuando haces cambios de color de
tema en todo el documento, puede verse
como los cambios afectan a todas las
pginas.

La pgina actual est marcada con corchetes


en las cuatro esquinas.

En este ejemplo puedes ver algunos elementos que se han emplazado en el rea del
tablero de dibujo junto a las pginas. El rea del tablero de dibujo es til como lugar
para mantener temporalmente grficos de trabajo, fotos u otros objetos. Estos objetos
no son exportados como parte de tu pgina web, a menos que los sites en la capa
especial del fondo del tablero de dibujo. En este caso se exportan, ya que se asume
que quieres que formen parte del fondo de tu pgina web.

Barras desplegables
Algunas herramientas de la barra de herramientas principal estn agrupadas en un
solo icono. Estos iconos cuentan con un pequeo tringulo indicador en la esquina
inferior derecha y, cuando pasas el cursor del ratn por estos iconos, aparece una
barra desplegable. La barra contiene otros iconos de herramientas que pertenecen a
dicho grupo. Simplemente, mueve el cursor del ratn hasta una de las opciones para
ver un consejo de herramienta y luego selecciona la herramienta que quieras usar.
26

Si seleccionas una herramienta modal de una barra desplegable, esta herramienta se


convierte en la herramienta principal para ese grupo. Ahora vers ese icono sealado
en la barra de herramientas principal.

Tambin hay algunas barras desplegables en la barra de herramientas de la parte


superior de la ventana. Estas se utilizan para agrupar operaciones relacionadas en un
solo icono. Esto las hace accesibles y no ocupan demasiado espacio en la barra.

Consulta el captulo Personalizacin en el manual en pdf para ms informacin sobre


las barras desplegables.

Objetos en la pgina
Si personalizas una plantilla o creas tus propios grficos desde cero, puedes girar,
redimensionar y posicionar cualquier cosa que desees en la pgina. Puedes
redimensionar la pgina fcilmente al tamao que quieras y aadir nuevas pginas
web a tu gusto. Ciertas caractersticas, como el cambio de esquemas de colores,
funcionan a travs de todas las pginas simultneamente.

Estos son los tipos de elementos de pgina bsicos:

Texto: al usar la HERRAMIENTA DE TEXTO puedes crear todo tipo de ttulos y


columnas de texto e incluso bloques de texto que fluyen de un bloque a otro.
Tambin puedes crear listas con vietas o numeradas. La barra de informacin
de la HERRAMIENTA DE TEXTO proporciona controles de fuente, tamao,
espaciado de lnea y ms. Puedes redimensionar el texto usando la
HERRAMIENTA DE SELECCIN o seleccionando el texto de la manera normal y
escogiendo un punto o tamaos de pxeles alternativos. Tambin puedes incluso
girar el texto desde cualquier ngulo, y usando CONTORNEAR TEXTO (haz clic
derecho en un objeto para ver esta opcin) puedes hacer fluir el texto
automticamente alrededor de objetos (p. ej. fotos) en la pgina.
Grficos: cualquier tipo de logo, ttulo y la mayora de los botones que aparecen
en tu pgina web son grficos. Web Designer es un programa de grficos
vectoriales, lo que significa que puedes corregir la forma, girar y redimensionar
tus objetos grficos sin prdida de calidad (a diferencia de herramientas de
edicin y retoque fotogrfico como Photoshop). Y aunque no hay ningn
estndar de grficos vectoriales para pginas web (para web todos los grficos
tienen que ser formatos JPG, GIF o PNG) Web Designer crea automticamente
el formato y resolucin adecuados. Por ejemplo, si quieres crear un panel de
color para colocar detrs tu texto, lo haras dibujando un rectngulo o el objeto
de rectngulo con esquinas redondeadas en la pgina, y colocndolo detrs del
texto. Cuando exportas tu pgina web, se convierte automticamente en una
imagen grfica PNG con la resolucin adecuada.
Fotos: hay pocas pginas web que no contengan algn tipo de foto. MAGIX
Web Designer 11 Premium tiene una gran gama de herramientas de retoque de
fotografas. Puedes arrastrar y soltar fotos directamente desde tu cmara o
desde la ventana del explorador de archivos, girarlas, optimizarlas, recortarlas, y
www.magix.es
Primeros pasos 27

Web Designer genera automticamente la resolucin de imagen JPG adecuada.


Sustituir fotos existentes en plantillas es tan fcil como arrastrar y soltar, y
puedes cambiar sencillamente el tamao y el ngulo de las fotos "dentro" de su
marco. Puedes crear fcilmente fotos en miniatura sobre las que puedes hacer
clic para que se abra una versin ampliada y puedes incluir opcionalmente
controles de galera que permiten a los visitantes navegar por tus fotos o ver un
pase de fotos automtico.
Marcadores de posicin: estos son objetos grficos en la pgina que
representan el tamao y la posicin de "widgets" dinmicos como animaciones
flash, pelculas o formas. Al exportar tu sitio, el grfico del marcador de posicin
es reemplazado por el cdigo requerido para hacer que el widget funcione de
modo que el widget aparece en la misma posicin en tu pgina. Consulta el
captulo Widgets de pgina web (en la pgina 408) en el manual en pdf para
ms detalles.

Mens con clic derecho


Al hacer clic derecho sobre cualquier objeto en el espacio de trabajo de MAGIX Web
Designer 11 Premium, se abre un men desplegable con opciones relacionadas con el
objeto sobre el que has hecho clic. Por ejemplo, si haces clic derecho sobre un
rectngulo que acabas de dibujar, el men desplegable te permitir realizar acciones
solo relacionadas con un rectngulo.

Si haces clic derecho sobre una foto, sin embargo, algunas de las opciones del men
que aparecen sern tiles solo para fotos, mientras que otras sern similares a
acciones que puedes realizar en un rectngulo. Las operaciones especficas para el
objeto se encuentran en la parte superior de la lista del men de clic derecho, por
ejemplo, en el caso del rectngulo, las tres primeras acciones pueden utilizarse
solamente en rectngulos.

Tambin puedes hacer clic derecho sobre la pgina y el tablero de dibujo para ver un
men con las operaciones relacionadas con el fondo de pgina o de tablero.

Si seleccionas ms de un objeto y haces clic derecho, el men contendr acciones


especficas para mltiples objetos como agrupar o alinear y combinar, as como otras
operaciones comunes como cortar, copiar y eliminar. De la misma manera, si haces
clic derecho sobre objetos que has agrupado previamente, vers acciones especficas
para un grupo.

Te recomendamos hacer clic derecho sobre cualquier objeto o mltiples objetos en el


espacio de trabajo para acceder al men especfico de esos objetos. Cuando lo hayas
probado algunas veces, sabrs que acciones puedes realizar rpidamente con estos
mens.
28

Diseo web basado en objetos


Todo los tipos de elementos descritos ms 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 pgina, que luego se respetar con
exactitud en la pgina web final.

La HERRAMIENTA DE SELECCIN puede ser utilizada para seleccionar cualquier


objeto en la pgina y para mover (simplemente arrstralo), redimensionar o
rotar los objetos.

Puedes ajustar el orden de las capas (es decir , si un objeto aparece al frente o detrs
de otro/s en la pgina), haciendo clic derecho y seleccionando ARREGLO o utilizando
las opciones del men ARREGLO. Con la HERRAMIENTA DE SELECCIN puedes
redimensionar objetos estirndolos desde las esquinas. Puedes rotar cualquier objeto
arrastrando desde dentro de los controles deslizantes de las esquinas. Y aunque las
pginas web no admiten textos rotados, Web Designer sabe cmo crear
automticamente la imagen grfica apropiada para que la pgina se vea siempre bien.

Para agregar texto a tu pgina, selecciona la HERRAMIENTA DE TEXTO y haz clic


en cualquier lugar de la pgina y empieza a escribir el texto.

Tambin puedes crear columnas de texto, pulsando y arrastrando horizontalmente la


HERRAMIENTA DE TEXTO , o arrastrando diagonalmente las reas de texto. Ve a la
seccin de texto (en la pgina 227) en el manual en pdf para ms detalles y al
captulo Manejo de texto (en la pgina 196) para una informacin detallada acerca de
las funciones de texto de MAGIX Web Designer 11 Premium.

Puedes usar herramientas de dibujo para crear rectngulos normales


o con esquinas redondeadas, crculos y elipses, y cualquier tipo de
forma que desees, utilizando la HERRAMIENTA DE EDICIN DE FORMA .
Ve a la seccin herramientas de dibujo (en la pgina 57) en el
manual en pdf para ms detalles.

Orden de los objetos


Todos los objetos en la pgina estn colocados uno encima del otro. El objeto que se
ha dibujado o creado en ltimo lugar est siempre arriba del todo, es decir delante de
cualquier otro. Puedes ajustar la posicin de colocacin con clic derecho y
seleccionando ARREGLO o usando las opciones del MEN ARREGLO .

Por ejemplo, cuando dibujas un nuevo rectngulo siempre aparece para cubrir todos
los objetos que estn detrs. Con clic derecho y seleccionando ARREGLO o
presionando Ctrl+B (o el men ARREGLO > LLEVAR ATRS) el objeto se mueve detrs
de todo lo dems. De modo similar, Ctrl+F trae cualquier objeto seleccionado hacia
delante, quedando delante de todo lo dems.
www.magix.es
Primeros pasos 29

Hay una complicacin aadida: las capas. Todos los objetos se recopilan en capas con
nombres y cada capa puede activarse o desactivarse para mostrar u ocultar todo en
esa capa. Consulta la seccin de capas (en la pgina 65) en el manual en pdf para
ms detalles.

La GALERA DE PGINAS Y CAPAS te permite ver fcilmente y ajustar el orden de


apilamiento de los objetos y capas. Los objetos se muestran en orden de adelante
hacia atrs en la galera. Lee el captulo Galera de pginas y capas (en la pgina 419)
en el manual en pdf para ms informacin.

La herramienta de seleccin
Esta herramienta es de uso general y te permite seleccionar, mover,
redimensionar y girar todos los objetos en tu pgina web.

Puedes hacer todas estas cosas simplemente estirando los objetos en la pgina, o con
los controles deslizantes de seleccin alrededor del objeto, o puedes introducir
valores numricos precisos. El objeto seleccionado con 4 u 8 controles deslizantes en
su exterior y la barra de estado, en la parte inferior de la pantalla, tambin te indica
qu objeto ha sido seleccionado

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 rectngulos y rectngulos con esquinas redondeadas tienen ocho controles
deslizantes para poder arrastrarlos y redimensionarlos. Otros objetos, como grupos,
bloques de texto o fotos, poseen slo 4 controles y no pueden ser estirados (porque
se deformaran).

Desplazar objetos
Las teclas de flechas pueden ser utilizadas para desplazar los objetos seleccionados
pxel a pxel. Si mantienes pulsada a la vez la tecla Shift, los objetos se desplazan de
10 en 10 pxeles.
30

Girar objetos
Hay dos modos de hacer girar un objeto. O bien, haciendo clic otra vez sobre el
objeto para que los controles de seleccin cambien a controles de rotacin, con los
que podrs estirar o hacer girar el objeto. O, cuando se ven los controles de esquinas,
moviendo el cursor de ratn dentro de los controles de esquinas hasta que veas que
el cursor cambia a un indicador de rotacin , entonces tambin podrs arrastrar para
hacer girar el objeto seleccionado.

Tambin puedes rotar casi todo en Web Designer, incluyendo fotos, ttulos, bloques
de texto, y simplemente funcionar. Debido a que los navegadores web no pueden
mostrar texto en ngulo, Web Designer convertir automticamente cualquier texto
rotado en un grfico.

Barra de informacin
Cuando un objeto es seleccionado, la barra de informacin en la parte superior de tu
documento muestra todos los controles relevantes para la herramienta actual. Esta
barra cambia segn la herramienta seleccionada. Esta es la barra de informacin de la
herramienta de seleccin:

La barra de informacin justo encima de tu documento, te muestra los controles para la


herramienta seleccionada.

Puedes introducir valores numricos en cualquier campo, p. ej. para reducir el tamao
de un objeto un 20%, puedes introducir 80% en el campo del ancho (que es un
tamao porcentual). Con el candado pequeo determinas si los cambios de ancho y
alto se cambian a la vez.

Copiar objetos
Puedes utilizar las tpicas opciones de "EDITAR" > "COPIAR" ("Ctrl + C") y "EDITAR" >
"PEGAR" ("Ctrl + V") o hacer clic derecho en un objeto y seleccionar COPIAR , aunque
una forma muy rpida de copiar un elemento es, simplemente, arrastrarlo con el
botn derecho del ratn.

Tambin puedes copiar y pegar una pgina en cualquier parte del documento desde el
documento actual o en otro documento: ver Copiar y pegar (en la pgina 84) pginas.

www.magix.es
Primeros pasos 31

Creacin de una pgina Web


Hay dos modos de crear una nueva pgina web. Se puede comenzar con una plantilla
prediseada y luego personalizarla con textos, fotos y combinacin de colores. O
creando una pgina web desde el principio, colocando todos los elementos
requeridos, texto, grficos, fotos y marcadores de posicin en el lugar que quieras de
la pgina.

Los marcadores de posicin son objetos grficos en la pgina que sern sustituidos en
la pgina web final por una serie de elementos de pgina web como animaciones
Flash, vdeos de YouTube, mapas interactivos, fragmentos de HTML y widgets de
todo tipo. Lee las secciones posteriores en el correspondiente captulo del manual en
pdf para ms informacin acerca de los marcadores de posicin.

Vista previa de tu pgina web


Cuando creas tu pgina web en Web Designer los documentos con los que trabajas
muestran una vista previa exacta esttica, pero para comprobar el comportamiento
de los popups, efectos MouseOver y Flash, es necesario utilizar la vista previa de
navegador.

Existen dos opciones de vista previa en la barra de herramientas web.

VISTA PREVIA DE PGINA : exporta y muestra la vista previa de la pgina


actual nicamente. Esta opcin es til si cuentas con un sitio muy
grande que demora mucho en exportarse en su totalidad. De esta
forma, puedes ajustar rpidamente la vista previa de la pgina en la que
ests trabajando, sin tener que exportar el resto del sitio.
VISTA PREVIA DE PGINA WEB : exporta todas las pginas de tu sitio y
luego muestra la ventana de vista previa. As, todas las pginas y
enlaces de tu sitio deberan funcionar.

Los botones de navegacin en la barra superior de la ventana de vista previa te


permite avanzar o retroceder, como en un navegador web, y el botn de Inicio
permite regresar a la pgina en la que comenzaste la vista previa.

VISTA PREVIA DE PGINA : exporta y muestra la vista previa de la pgina actual


nicamente. Esta opcin es til si cuentas con un sitio muy grande que demora
mucho en exportarse en su totalidad. De esta forma, puedes ajustar rpidamente la
vista previa de la pgina en la que ests trabajando, sin tener que exportar el resto del
sitio.
32

Puedes ver tu sitio web en modo de pantalla completa haciendo clic en el


botn de VER PANTALLA COMPLETA en la parte superior derecha de la ventana
de vista previa ("Esc" para salir o "F11" para entrar y salir del modo de pantalla
completa). Cuando se cierra la ventana de vista previa y la siguiente se vuelve
a abrir, Web Designer muestra el ltimo modo elegido para la ventana, es
decir, la pantalla normal, maximizada o completa.

Si no has exportado tu sitio todava, estas vistas previas se exportan a una carpeta
temporal en tu PC. Una vez que lo hayas exportado, la misma ubicacin de
exportacin se utilizar siempre que hagas una vista previa, es decir, que el sitio
exportado se actualiza constantemente.

Selecciona tu navegador de vista previa


A pesar de que esta vista previa interna utiliza una versin simplificada del navegador
Internet Explorer por defecto, puedes elegir uno de los cinco tipos de navegadores
ms populares para ver tu pgina en la ventana de vista previa.

Para una vista previa de tu sitio web en tu navegador web favorito, haz clic en uno de
los siguientes navegadores de la barra en la parte superior de la ventana de vista
previa:

Nota: estos botones solo estn habilitados si tienes instalados los navegadores en tu
PC.

Vista previa de tu pgina o su sitio web en Google Chrome.

Vista previa de tu pgina o su sitio web en Mozilla Firefox.

Vista previa de tu pgina o su sitio web en Internet Explorer.

Vista previa de tu pgina o su sitio web en Opera.

Vista previa de tu pgina o su sitio web en Safari.

Al hacer clic en uno de los botones de arriba, se abre el navegador en la pgina que
ests viendo actualmente en la ventana de vista previa.

Si deseas ver tus pginas en un navegador que no sea de este tipo, puedes hacer clic
derecho sobre el archivo. htm y seleccionar ABRIR CON... , o simplemente puedes
arrastrar y soltar el archivo en una ventana del navegador abierta. Una vez exportado,
cada vez que pulses el botn de vista previa, la exportacin se actualizar tambin, y
entonces solo ser necesario pulsar el botn de Actualizar en tu navegador (o
presionar F5).
www.magix.es
Primeros pasos 33

Uso de plantillas, cliparts y widgets


Abre la GALERA DE DISEOS con un clic en la pestaa GALERA DE DISEOS de
la barra de galeras (o con "ARCHIVO" > "NUEVO DE LA GALERA DE DISEOS" ).

Aqu se muestran carpetas temticas que contienen colecciones de diseos de


pginas web y archivos grficos asociados con cada tema especfico. Busca en TEMAS
PARA PLANTILLAS DE PGINAS WEB (GENERAL) para encontrar todas los diseos de
plantillas disponibles para configurar rpidamente una pgina web de calidad. En
TEMAS PARA PLANTILLAS DE PGINAS WEB (ESPECIAL PARA EMPRESAS) , encontrars
pginas web completas ya diseadas para tipos especficos de empresas, lo que hace
incluso ms rpido el tener online la pgina web de una empresa.

Cada tema de pgina web tiene una serie de diseos alternativos y tiles elementos
para tu pgina. Cada uno contiene a su vez una plantilla de pgina web completa y
varios esquemas de colores. Puedes cambiar todo tu sitio a un esquema de color
completamente distinto con solo arrastrar y soltar el esquema desde la galera hasta
la pgina o con un doble clic.

En ELEMENTOS DE PGINA Y WIDGETS encontrars una amplia variedad de grficos y


widgets que puedes aadir a tu pgina, desde botones, barras de navegacin y
paneles de texto a formas, soluciones de comercio electrnico y pases de fotos. Tan
solo arrastra y suelta cualquiera de ellos desde la galera sobre tu pgina web. Si ests
conectado a Internet, la galera de diseos se actualiza automticamente para
mostrarte las ltimas plantillas y novedades disponibles.

Agregar nuevas pginas a tu pgina web


Puedes arrastrar cualquier diseo de plantilla desde la GALERA DE DISEOS en tu
pgina. Si se trata de una plantilla de pgina, se aadir una nueva pgina a tu sitio
web, pero se te preguntar primero si quieres que los cambios de colores coincidan. Si
arrastras un elemento de clipart como un botn, un encabezado o un objeto de foto,
esto se agregar a la pgina en el lugar en donde lo sueltes y nuevamente se te
preguntar si quieres que los colores coincidan.

Para aadir una nueva pgina del mismo diseo, la forma ms sencilla es hacer
clic derecho en la pgina y seleccionar DUPLICAR PGINA ACTUAL o utilizar el
botn DUPLICAR PGINA ACTUAL en la barra de herramientas estndar.

Esto replica la pgina actual abajo. Luego puedes eliminar o editar los elementos
segn lo desees. Esto tiene la ventaja de que mantendr la misma estructura de
navegacin.

O puedes copiar y pegar una pgina existente en el mismo o en otro documento. Haz
clic en una parte en blanco de la pgina y selecciona COPIAR PGINA. Haz clic
derecho en una pgina del documento de destino y selecciona PEGAR > PGINA (o
pulsa "Ctrl + V").
34

La pgina en el portapapeles se aadir inmediatamente como una nueva pgina


despus de la pgina actual. La pgina pegada adopta el tamao de pgina del
documento en el que es pegada (siempre y cuando est activada la opcin TODAS LAS
PGINAS IGUALES EN EL DOCUMENTO bajo ARCHIVO > OPCIONES DE PGINA ). Tambin
se pegarn las capas de la pgina y los atributos y todos los objetos en la pgina.

Puedes agregar una nueva pgina en blanco, haciendo clic derecho y


seleccionando NUEVA PGINA o utilizar el botn INSERTAR PGINA EN BLANCO
en la barra del men desplegable de la pgina.
Puedes eliminar pginas haciendo clic derecho y seleccionando ELIMINAR
PGINA ACTUAL o haciendo clic en el botn ELIMINAR PGINA ACTUAL en la
barra del men desplegable de la pgina.

Integracin de pelculas, Flash y otros widgets


Puedes incrustar fcilmente pelculas, archivos de audio MP3, animaciones flash, GIF
animados, PDF, galeras de fotos y widgets de diapositivas y tipos ilimitados de
widgets interactivos en tu pgina web creada con MAGIX Web Designer 11 Premium.
Consulta el captulo de Widgets de pgina web para ms detalles.

Puedes crear tus propias animaciones Flash y GIF con MAGIX Web Designer 11
Premium. Consulta el captulo Animaciones.

Clipart flash
MAGIX Web Designer 11 Premium incluye la posibilidad de crear animaciones flash
desde cero (ver la seccin Animaciones flash (en la pgina 434) en el manual en
PDF), pero tambin incluye una variedad de plantillas de flash que puedes
personalizar. Las plantillas flash no se pueden arrastrar hacia la pgina directamente,
deben abrirse como un documento de animacin separado que puedes personalizar
como quieras y luego puedes guardar el archivo Flash (.swf) en tu disco local. Luego,
utiliza "ARCHIVO" > "IMPORTAR" o arrastra y suelta el archivo .swf en tu pgina web.

Se generar automticamente una imagen de marcador de posicin y se colocar en


tu pgina. Haz una vista previa de tu pgina para ver la animacin Flash en
funcionamiento. Como alternativa, puedes crear tu propio marcador de posicin (p.
ej., un rectngulo) y luego utilizar la pestaa MARCADOR DE POSICIN del dilogo
PROPIEDADES WEB para asociarlo con tu archivo Flash.

Galera de diseos
Esta galera contiene plantillas de diseo profesional de pginas y sitios web
completos, as como de elementos individuales de cliparts que puedes utilizar para tu
diseo.

Para abrir esta galera:

www.magix.es
Primeros pasos 35

Haz clic en la pestaa GALERA DE DISEOS en la barra de galeras.


O selecciona "HERRAMIENTAS" > "GALERAS" > "GALERA DE DISEOS".

Consulta MANEJO DE DOCUMENTOS (en la pgina 95) para ms informacin sobre


como usar las galeras. Si te encuentras en lnea cuando abres la galera, comenzarn
a descargarse automticamente diseos y widgets de los servidores de Web
Designer, que aparecern de inmediato en la galera. Visita regularmente la galera
para ver los ltimos widgets y plantillas gratis disponibles. Para abrir una plantilla
como un nuevo documento, haz doble clic. Para importar una plantilla en un
documento abierto, arrstrala y sultala sobre le diseo. Las plantillas de pgina se
agregan como nuevas pginas al documento actual cuando lo haces. Otras plantillas y
widgets se agregan a la pgina actual.

Muchas de las carpetas de la galera en ELEMENTOS DE PGINA Y WIDGETS contienen


"widgets", tal como lo indican sus nombres de carpeta. Estos son mucho ms que
simples grficos estticos. Consulta el captulo WIDGETS DE PGINA WEB para ms
informacin.
36

Catlogo de contenido online


El catlogo de contenido online es esencialmente una versin "nube" de la galera de
diseos. Es decir, todo el contenido est almacenado online y como tal requiere que
ests conectado a Internet. Adems de tener la librera de la galera de smartshapes,
temas de pginas web, plantillas de diseo y widgets almacenados en tu PC como
parte de Web Designer, tambin puedes acceder a todo el contenido a travs del
catlogo de contenido, que ofrece una forma fcil e intuitiva para buscar todo el
contenido.

Cuando importas una pieza de contenido desde el catlogo de contenido se descarga


en tu PC y permanece disponible cuando no ests conectado. Para abrir el catlogo de
contenido:

Haz clic en "ARCHIVO" > "NUEVO DEL CATLOGO DE CONTENIDO"


(Shift+Ctrl+Alt+K)
haz clic en "INSERTAR" > "DESDE EL CATLOGO DE CONTENIDO" para insertar y
descargar una pieza de contenido desde el catlogo.

Catlogo de contenido online

El catlogo es una ventana redimensionable: arrastra los bordes o la esquina inferior


derecha para cambiar el tamao. Se obtiene un popup de vista previa cuando pasas
por las categoras de contenido a la izquierda: haz clic para seleccionar y esa categora
se expandir y se mostrar en el lado derecho. Para las categoras que tienen muchos

www.magix.es
Primeros pasos 37

elementos hay un control de pgina en el extremo superior derecho que te permite


ojear las pginas de contenido siguientes y posteriores.

Cuando se usa la versin de prueba gratuita, los elementos que se muestran en azul
en la lista de contenido de la izquierda se pueden usar durante el periodo de prueba
de forma gratuita. Todos los elementos que se muestran estn disponibles de forma
inmediata y gratuita una vez que compras y activas el programa.

Colores de la pgina web


Todas las plantillas utilizan un pequeo conjunto de colores originales y varias
sombras de estos colores originales. La forma ms fcil 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 GALERA DE DISEOS. Simplemente arrastra un esquema hasta la
pgina 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 lnea de
colores a lo largo de la parte inferior de la ventana.

Contorno actual y color de relleno


Editor de color
Pipeta para seleccionar colores
Patch "Sin color".
Colores "originales" con nombre y colores vinculado
Paleta fija de colores estndar
Barra de estado . Muestra lo que se ha seleccionado y brinda consejos
Mantn el cursor sobre un color para ver su nombre

Simplemente haz clic en cualquier color con nombre y selecciona la opcin de edicin
(si mantienes el cursor del ratn sobre el color vers el nombre del consejo de
herramienta).
38

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 lnea 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 fcil de elegir cualquier color. Haz clic en los
controles ampliados para introducir los valores RGB.

Observa que cuando cambias un color original de esta forma, todas las tonalidades
relacionadas utilizadas a lo largo del documento tambin cambiarn.

Colorear formas
Puedes rellenar con un color cualquier forma dibujada, arrastra el color desde la LNEA
DE COLOR y sultalo en la forma o selecciona primero el objeto y luego haciendo clic
en la lnea de colores y escogiendo "ESTABLECER COLOR DE RELLENO".

De forma alternativa haz clic en el pequeo icono de editor de color (o presiona


Ctrl+E) para visualizar el editor de color donde puedes ajustar cualquier color
que desees.

www.magix.es
Primeros pasos 39

Puedes asignar un relleno de color con gradacin a un objeto dibujado utilizando la


herramienta de relleno (en la pgina 239).

Importacin de clipart con color


Cuando importas un grfico de clipart arrastrndolo desde la GALERA DE DISEOS , al
utilizar la opcin "ARCHIVO" > "IMPORTAR" , o arrastrando un archivo .web o .xar hasta
la pgina, por lo general se te preguntar si deseas vincular los colores. Si seleccionas
NO IGUALAR , entonces cualquier color con nombre utilizado en este grfico ser
aadido a la lnea de colores. Haciendo clic en cualquier color de la lnea de color, te
dar la opcin de editarlo.

Tambin puedes cambiar los colores o cualquier objeto multicolor seleccionndolo y


haciendo clic sobre un color de la lnea de color. Aparecer un dilogo que te muestra
el conjunto de colores usados actualmente en este objeto: tan solo haz clic sobre el
que quieres cambiar. Tambin puedes abrir el editor de color. La lista de colores en la
parte superior incluye el mismo conjunto de colores: elige el que quieres editar.

Colorear fotos
Si intentas colorear una foto, se convierte en una foto de "colores completos". Por
ejemplo, para convertir una foto en una foto en blanco y negro, simplemente
seleccinala de la forma usual y haz clic en el rombo blanco al final de la lnea 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 estn
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 seleccin. Otra forma de seleccionar directamente la
foto es hacer clic en la foto con la HERRAMIENTA DE FOTO .

Fondos de pgina web


La mayora de diseos de pgina en la GALERA DE DISEOS tienen dos tipos de fondo.
Un fondo de tablero de dibujo amplio que se extiende a lo largo del fondo de toda la
ventana del navegador cuando exportas tu pgina. Sobre l est el fondo de pgina
con todos los otros elementos que constituyen la pgina web.
40

Color de fondo del tablero de dibujo o del navegador


Color del fondo de pgina

Puedes cambiar fcilmente el color del TABLERO DE DIBUJO o del FONDO DE PGINA
arrastrando y soltando un color de la LNEA DE COLORES o incluso usando el EDITOR DE
COLORES .

Cuando creas un nuevo documento en blanco ("ARCHIVO" > "NUEVO" ) la pgina es


transparente (sin color) por defecto, por lo que tan solo vers el color del tablero de
dibujo tras ella, que es blanco por defecto. Tambin vers un contorno gua
rectangular suave que muestra los lmites de la pgina sobre el tablero de dibujo.

Adems, hay una gran variedad de texturas de fondo prediseadas en la GALERA DE


DISEOS . Tan solo arrastra y suelta un color hasta el rea del tablero de dibujo para
usarlas.

Consulta Fondos de pgina web (en la pgina 311) para ms informacin.

Fotos
Puedes sustituir cualquier foto arrastrndola desde tu explorador de Windows y
soltndola sobre cualquier foto de Web Designer. Si la sueltas sobre el fondo,
entonces se importa y se posiciona en la pgina donde la soltaste. Todas las fotos
importadas se muestran con 500 pxeles, pero por supuesto puedes ajustar cualquier
tamao de la forma usual con la herramienta de seleccin.

www.magix.es
Primeros pasos 41

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


versin reducida. Esto es recomendable, para ms informacin lee la seccin
resolucin de fotos a continuacin.

Cuando sustituyes una foto existente, la herramienta de relleno se


selecciona y se muestran dos flechas de rellenos en ngulo recto sobre la
foto.
Esto es as porque la foto en realidad es un relleno dentro de una forma. Puedes tirar
de la imagen para cambiar su posicin o estirar de las puntas de las flechas de relleno
para cambiar el tamao y girar la imagen dentro del contorno de la forma.

Arrastra sobre la foto para cambiar su posicin dentro del marco. Estira de la punta de las
flechas para cambiar el tamao y girar.
42

Sustitucin de mltiples fotos


Algunas plantillas de la GALERA DE DISEOS , especialmente los estilos de los lbumes
de fotos, pueden tener varias fotos que desees sustituir en un solo paso. Selecciona
los mltiples archivos de fotos en el explorador de archivos de Windows (Ctrl+Clic
para aadir ms archivos a la seleccin o Shift+Clic para seleccionar una serie de
archivos). Luego arrastra y suelta los archivos hasta la pgina de MAGIX Web
Designer 11 Premium para que las fotos se reemplacen una a una desde el principio de
la pgina hacia abajo. Eso facilita llenar una pgina de un lbum de fotos con tus
propias fotos.

Si arrastras ms fotos de las que caben en la pgina actual, MAGIX Web Designer 11
Premium explorar las pginas siguientes en el documento para ver si puede
acomodar algunas o todas las fotos restantes. Si esto todava no alcanza para colocar
todas tus fotos, MAGIX Web Designer 11 Premium duplicar la pgina actual todas
las veces que sea necesario para posicionar todas las fotos.

Este potente mecanismo significa que puedes crear una pgina web con un lbum de
fotos de varias pginas, si cargas una plantilla de la galera de diseos y luego
arrastras tus fotos.

Importacin de fotos grandes


Al importar fotos de alta resolucin (cualquiera de ms de 1920 pxeles,
independiente del alto o ancho) en un documento web, MAGIX Web Designer 11
Premium ajusta la foto automticamente al tamao de la pantalla HD sin preguntar si
quieres importar una versin con una resolucin menor. Para un documento web, aun
con el tamao reducido, debera haber ms que resolucin suficiente en tus fotos para
resultados de alta calidad en tu pgina web, por lo que raramente es necesario
importar imgenes de cmaras digitales con su resolucin completa para usar en la
web.

Sin embargo, si importas una foto grande a un documento de impresin o con


animacin, MAGIX Web Designer 11 Premium te pregunta si quieres importar una
versin de menor resolucin de tus fotos. Si el documento va a incluir muchas fotos,
sera conveniente elegir la opcin de menor resolucin. De lo contrario, si contiene
fotos de gran tamao, el tamao del archivo de diseo ser mucho ms grande de lo
que debera ser (porque contiene una copia de cada una de tus fotos). La memoria
requerida al editar y exportar el documento sern tambin mayor de lo necesario.

La herramienta de fotos
La herramienta de foto suministra una gran variedad de formas de optimizar y
recortar cualquier foto.

www.magix.es
Primeros pasos 43

Para cortar una foto, simplemente arrastra a lo largo de la foto mientras te


encuentras en la HERRAMIENTA DE OPTIMIZACIN 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 ms control sobre los recortes.

Consulta el apartado Trabajar con fotos para ms informacin detallada sobre cmo
MAGIX Web Designer 11 Premium maneja fotos y el apartado en Herramienta de
foto para averiguar cmo utilizar la herramienta de foto.

Fotos en miniatura con popup


Puedes crear muy fcilmente pequeas miniaturas de fotos (simplemente cambia el
tamao para que sean muy pequeas), para que cuando se haga clic sobre las
mismas se muestre una versin ms ampliada. Cambia el tamao de tu foto, tal como
lo haces con la HERRAMIENTA DE SELECCIN .

Selecciona la pequea miniatura de foto y selecciona la opcin "FOTO


EMERGENTE " en la pestaa ENLACE del dilogo Propiedades web (haz clic en el
BOTN ENLACE en la BARRA DE HERRAMIENTAS DE WEB ).
44

Haz clic en el botn CONFIGURACIN junto a la opcin de foto emergente para


cambiar a la PESTAA IMAGEN del DILOGO DE PROPIEDADES WEB.

All podrs determinar cmo aparecer tu popup. Una opcin te permite colocar un
ttulo sobre cada foto emergente. Configura el ttulo para cada foto en el campo
TTULO . De forma opcional, puede mostrarse un subttulo debajo de cada foto
emergente. Simplemente, configura la CAPTURA DE IMAGEN para la miniatura en el
mismo dilogo. Consulta la seccin foto emergente del captulo Dilogo de
propiedades web para detalles completos de las opciones disponibles.

En Internet Explorer, la captura de imagen se mostrar en un consejo de herramienta


emergente al pasar el ratn sobre la imagen. Para mostrar un texto diferente, como
"Haz clic para ampliar" cuando mueves el cursor sobre la miniatura de imagen, ve a la
pestaa MOUSEOVER y cambia "MUESTRA TEXTO DE POPUP " por "HAZ CLIC PARA
AMPLIAR ".

Texto
Puedes editar el texto seleccionando HERRAMIENTA DE TEXTO y haciendo clic
en el texto.

Dispones de todas las opciones de procesamiento comunes de Word y puedes pegar


textos desde el portapapeles. Con doble clic se seleccionar una palabra, con triple
clic se seleccionar una lnea entera (lo que puede ser til para seleccionar todo el
texto en un botn). Como es habitual, la barra de informacin provee una amplia
variedad de controles para esta herramienta. Como alternativa, puedes hacer clic
dentro del texto y escoger PROPIEDADES AVANZADAS DE TEXTO .

www.magix.es
Primeros pasos 45

El men de fuente presenta una lista de fuentes y est separado en cuatro secciones.
El apartado superior muestra las fuentes ya usadas en el documento, el segundo
muestra las fuentes compatibles con la web, el tercero muestra las fuentes Google
disponibles y, finalmente, el apartado inferior muestra todas las fuentes instaladas en
tu PC.

Popup de tamao de fuente en tiempo real


Fuentes usadas en el documento actual
Fuentes compatibles con la web
Fuentes de Google
Todas las fuentes instaladas
Variantes de estilo disponibles para la fuente seleccionada. No todas las fuentes
tienen variantes
46

La opcin "aadir" en la seccin de fuentes de Google te permite examinar, descargar


e instalar desde cientos de fuentes de acceso libre que puedes usar en tu pgina web.

El men de fuentes ofrece la seleccin de fuentes en tiempo real. Mientras vas


recorriendo el men, el texto seleccionado cambia de fuente, proporcionando una
vista previa de como se ver la fuente en el documento.

Tamao de fuente
El campo de tamao de fuente muestra el tamao de fuente en pxeles, dado que ste
es el mtodo ms confiable para ajustar el tamao 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 detrs del mismo (significa "punto"), por
ejemplo 72pt 1 y esto se convertir al tamao de pxeles correcto.

Usar fuentes en tu pgina web


Las fuentes de la seccin de fuentes seguras se pueden usar sin problemas en las
pginas web, ya que la gran mayora de los equipos y otros dispositivos dispondrn de
estas fuentes. Tambin puedes usar cualquiera de los cientos de fuentes de Google
porque se descargarn automticamente a travs del navegador web cuando alguien
visite tu pgina. Puedes usar otras fuentes que hayas instalado y tenerlas incrustadas
automticamente en tu pgina, siempre que la licencia de la fuente lo permita:
consulta el captulo "Manejo de texto" para ms detalles.

Si conviertes cualquier objeto de texto en un grfico puedes usar cualquier fuente.


Consulta la seccin de grupos (en la pgina 50) abajo para ms detalles.

Crear nuevos objetos de texto nuevos


Existen tres objetos de texto: una nica lnea de texto, una columna de texto o un rea
de texto rectangular. Para crear una simple lnea de texto, selecciona la herramienta
de texto y luego puedes hacer clic en cualquier parte del fondo para comenzar a
teclear. Para crear una columna, haz clic y arrastra horizontalmente en el fondo y
luego comienza a teclear. Puedes ajustar el tamao de la columna en cualquier
momento. Para crear un rea de texto, haz clic y arrastra diagonalmente. Puedes
ajustar el ancho y la altura de un rea de texto.

Texto girado
De forma usual (nicamente para una herramienta de autora web), puedes girar
cualquier objeto de texto, incluso columnas de texto, utilizando la funcin de giro
usual de la herramienta de seleccin. Pero debido a que los navegadores web no son
compatibles con texto girado nativo, Web Designer convierte cualquier texto girado
en un grfico cuando la pgina es exportada como pgina web.

www.magix.es
Primeros pasos 47

Lista con vietas y numeradas


Utiliza los botones de las listas con vietas y numeradas de la barra de informacin de
la HERRAMIENTA DE TEXTO para ingresar rpidamente listas con vietas o numeradas.
Puedes hacer clic derecho sobre una lista numerada y escoger PROPIEDADES DE LA
LISTA del men contextual para cambiar el orden del esquema de nmeros en tu
lista. Tambin puedes usar cualquier grfico como vieta o nmero de tu lista.
Consulta el captulo Herramienta de texto (en la pgina 196) para ms informacin.

Sombras suaves, texto relleno de color, texto transparente


Puedes aplicar cualquiera de estos efectos utilizando las herramientas apropiadas. Por
ejemplo, si arrastras sobre algn texto en la herramienta de relleno, obtendrs un
color con gradacin, o si arrastras con la herramienta de sombra, obtendrs una
sombra ligera.

En todos estos casos, Web Designer convertir el texto automticamente en un


grfico en tu pgina web exportada.

Contornear texto alrededor de objetos


Si haces clic con el botn derecho del ratn en un objeto como una foto y seleccionas
la opcin de men "CONTORNEAR TEXTO (en la pgina 220)", puedes hacer que el
texto fluya alrededor del objeto que est encima del texto.

Muchos de los objetos, como fotos, paneles laterales, botones y encabezados


utilizados en plantillas desde la GALERA DE DISEOS se contornean automticamente,
es decir, el texto siempre fluye alrededor de estos objetos cuando los arrastras cerca.

El contorneo de objetos solo se aplica al texto que est detrs del objeto, as que
tendrs que "llevar hacia adelante" el objeto para que el contorneo funcione (Ctrl +F).
Como alternativa, si solo quieres que el texto fluya alrededor de un objeto en una
capa individual, puedes hacer que el texto debajo de esta capa no se contornee (til
para capas popup dentro de una pgina web). Consulta Propiedades de capa (en la
pgina 426).

Todas las operaciones de la HERRAMIENTA DE TEXTO son en tiempo real: el texto se


reformatea y refluye segn vas ajustando el ancho de la comuna o vas moviendo los
objetos contorneados.

Nota: ahora tambin puedes hacer que el texto fluya alrededor de Objetos ancla (en
la pgina 48).
48

Objetos ancla
Si deseas que un objeto grfico aparezca junto a una parte particular de un bloque de
texto, puedes anclar el objeto junto al texto para que se mueva junto con l.

Haz clic sobre el objeto y selecciona ANCLAR AL TEXTO . En la HERRAMIENTA DE


SELECCIN , haz clic y arrastra el smbolo del ancla que aparece en la parte superior
izquierda del objeto hasta la ubicacin del texto en donde quieres fijar el objeto.
Ahora, si editas o mueves el texto, el objeto anclado se mover junto con el punto
anclado.

Corrector de ortografa
En la barra de informacin de la herramienta de texto hay un botn que
selecciona las opciones del corrector ortogrfico y el idioma. Si seleccionas
"Revisar ortografa mientras se escribe", tambin marcar todas las palabras
que no reconoce subrayndolas en rojo intermitente. Haz clic con el botn
derecho en cualquier palabra marcada para obtener sugerencias.

Tamao de pgina
Las pginas de la GALERA DE DISEOS estn diseadas para tener un ancho
compatible con la mayora de las pantallas. No se recomienda crear pginas ms
anchas, incluso si tu PC dispone de una pantalla ms amplia. La experiencia
demuestra que la mayora de usuarios prefieren tener un ancho de pgina fijo. Sin
embargo, puedes ajustar el tamao de pgina que quieras.

Puedes configurar cualquier tamao de pgina que quieras seleccionando TAMAO DE


PGINA del DILOGO DE OPCIONES (haz clic derecho y selecciona OPCIONES DE
PGINA , u OPCIONES DE PGINA del men ARCHIVO ). No se recomienda crear un
ancho de pgina que supere los 990 pxeles, ya que este es el ancho mximo para
gran parte de las pantallas (1024 menos una pequea cantidad por la barra
desplazable). Un ancho de pgina ms comn tiene por lo general unos 800 pxeles.

Puedes ajustar directamente la altura y el ancho de tu pgina arrastrando el margen


inferior o derecho de la pgina. Ve a la HERRAMIENTA DE SELECCIN y mueve el cursor
sobre el borde inferior de la pgina y este cambiar para indicarte que ahora puedes
arrastrar para reducir o ampliar el tamao de la pgina segn se requiera.

www.magix.es
Primeros pasos 49

Guardar tu trabajo. Creacin de una pgina Web


Utiliza las opciones de men GUARDAR o GUARDAR COMO para guardar tu trabajo en
progreso. Esto guarda un archivo con la extensin .web que es el formato de archivo
nativo para Web Designer (esto no es una pgina web). Se recomienda que guardes
tu trabajo regularmente segn avances. Si quieres editar o actualizar tu pgina en el
futuro, debes guardar un archivo .web de esta forma y hacerlo en actualizaciones
futuras.

Tambin te recomendamos trabajar con la funcin de copias de seguridad


automticas activada. Esta opcin se controla desde la pestaa Copias de seguridad
del dilogo HERRAMIENTAS > OPCIONES . Cuando est activada esta opcin, se realiza
una copia de seguridad de tu documento abierto de forma regular. Aqu puedes
escoger la forma en que debe comportarse el programa al cerrarlo. Puedes hacer que
te pregunte si quieres guardar o eliminar un documento modificado o hacer que todos
los documentos se guarden automticamente en la ubicacin de copias de seguridad
y se restauren la prxima vez que inicies.

Para guardar tu sitio web, que son las pginas HTML y archivos asociados
para publicar en la Web, utiliza la opcin Exportar pgina web o haz clic en
este botn en la barra superior.

Esto guarda un archivo .htm por cada pgina y una carpeta que contiene todos los
archivos que componen la pgina web. Al exportar un sitio web, todas las pginas se
exportan juntas y cada pgina sin nombre recibe la finalizacin _1, _2 tras el nombre
que ingresas durante la exportacin. La carpeta _FILES contiene todos los grficos y
otros archivos que van a formar tu sitio web. Puedes nombrar cada pgina de forma
individual si lo deseas, con la pestaa PGINA del dilogo PROPIEDADES WEB o con la
Galera de pginas y capas (en la pgina 419).

El nombre por defecto que se le dar a tu sitio web es index.htm porque ste es el
nombre usual de la primera pgina de un sitio web. 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.

Copias de seguridad automticas


La pestaa Copias de seguridad del dilogo HERRAMIENTAS > OPCIONES te permite
activar y desactivar la funcin de copias de seguridad automticas. Esta funcin
guarda una copia de todos los documentos abiertos modificados en intervalos
regulares. Tambin puedes escoger si se te debe advertir que no has guardado
documentos al cerrar el programa o si debe guardarse una copia de seguridad de
todos estos documentos y restaurarse la prxima vez que inicies el programa.

Consulta el captulo Manejo de documentos (en la pgina 88) para ms detalles


acerca de estas funciones.
50

Grupos
Puedes agrupar cualquier seleccin de objetos en la pgina. Los grupos actan casi
como un objeto individual, ya que puedes arrastrarlos por la pgina, cambiar su
tamao y rotarlos como si fueran un solo objeto. Muchos de los elementos de los
diseos de plantilla de la GALERA DE DISEOS , como los botones, paneles de texto y
objetos de fotos, son elementos agrupados.

Por ejemplo, puedes dibujar un simple botn desde cero dibujando un rectngulo con
la HERRAMIENTA DE RECTNGULO y colocando una etiqueta de texto encima con la
HERRAMIENTA DE TEXTO . Estos son objetos separados y puedes moverlos de forma
independiente en la HERRAMIENTA DE SELECCIN . Pero si seleccionas ambos en la
HERRAMIENTA DE SELECCIN (tambin puedes arrastrar para incluir ambos o presionar
"Shift" y hacer clic sobre otros objetos adicionales) y haces clic derecho y seleccionas
GRUPO (o pulsas "Ctrl + G" o usas el men "ORDENAR" > "GRUPO" ), se convertirn en
un objeto agrupado (Pista: la lnea de estado que se encuentra debajo siempre te
informa de lo que est seleccionado). Ahora si arrastras, cambias el tamao o giras
este objeto, todas las partes de este grupo se mueven y transforman como si fueran
un nico objeto.

Importante: los objetos agrupados estn generalmente convertidos en un nico


grfico cuando exportas tu pgina web.

Al desagrupar (haz clic derecho y selecciona DESAGRUPAR o pulsa "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 automticamente el elemento dentro del grupo.

Cambia o edita cualquiera de los colores por separado usados dentro de un grupo
seleccionndolos y haciendo clic en un color o lnea de color, o abriendo el editor de
color. Consulta el apartado sobre cambio de colores para ms informacin.

Convertir texto en un grfico


Como se mencionaba arriba, solo un nmero limitado de fuentes estn disponibles en
navegadores web. Si quieres utilizar una fuente diferente en un botn o,
digamos, como un encabezado, puedes hacerlo asegurndote de que se ha convertido
a un grfico, y todo lo que necesitas es agrupar el objeto para que esto ocurra
automticamente. Todava puedes editar el texto dentro del grupo, pero los grupos se
convierten automticamente en grficos cuando se exporta la pgina web.

www.magix.es
Primeros pasos 51

Por lo tanto, todo lo que tienes que hacer para incluir una fuente como esta es
agrupar. No es necesario que est agrupada con otro, puede agruparse consigo
misma si seleccionas GRUPO del men ARREGLO o presionas "Ctrl+G".

Nota tcnica: al exportar estos grupos como imgenes en una pgina web, cualquier
texto del grupo se utiliza como texto alternativo de HTML en la imagen (salvo que
fijes explcitamente otro texto alternativo para el grupo). Esto significa que los
motores de bsqueda pueden indexar el texto y que las herramientas utilizadas por
las personas con problemas en la visin tambin reconocern y leern este texto, a
pesar de que el texto no aparece directamente en la pgina web. Si no quieres que el
texto alternativo se utilice de esta forma, puedes ignorarlo si fijas otro texto
alternativo para el grupo en la pestaa Imagen en Herramientas > Propiedades web.

Grupos suaves (soft groups)


Hay otro tipo de grupo denominado "Grupo suave" que es un conjunto de objetos
conectados de una forma ms suelta . Consulta el captulo Manejo de objetos para
ms informacin.

Grupos anclados
Cuando aplicas anclaje a un objeto respecto al texto, se coloca dentro de un grupo
anclado. Consulta Grficos anclados (en la pgina 222) para ms informacin sobre
los objetos anclados.

Grupos de repeticin
Cuando haces que un objeto se repita, se coloca dentro de un grupo de repeticin.
Consulta Objetos repetidos (en la pgina 143) en el captulo Manejo de objetos para
ms detalles.

Objetos repetidos
En tu documento o pgina web es muy comn que ciertos elementos se repitan en
todas las pginas como, por ejemplo, los botones de navegacin, los encabezados o
los logotipos. MAGIX Web Designer 11 Premium te ofrece la posibilidad de repetir
cualquier elemento en el mismo lugar de las pginas del sitio. Cuando actualices una
de las copias, todos los cambios se reflejarn automticamente en todas las pginas.

Consulta la seccin Objetos repetidos (en la pgina 143) en el captulo Manejo de


objetos para ms detalles.
52

Creacin de botones, banners y otros grficos


web
Web Designer es una herramienta genial para crear cualquier grfico web para utilizar
con otros programas y otras herramientas de autora web. Puedes dibujar estos
objetos desde el comienzo, utilizando las herramientas de dibujo o utilizar los cliparts
web de la GALERA DE DISEOS . Simplemente dibuja, disea o importa cualquier
elemento de la GALERA DE DISEOS a una pgina en blanco. Maniplalo segn tus
deseos, cmbiale el tamao, el color y el texto o fuentes, y luego exporta el elemento
como PNG o JPG.

Por ejemplo, as se crea un grfico de botn individual a partir de una plantilla:

Abre la GALERA DE DISEOS y luego la categora Botones web (o Iconos,


Banners o la categora que necesites).
Haz doble clic sobre un diseo para abrirlo en un nuevo documento. Edtalo segn tus
deseos, puedes:
Cambiar su tamao (o girarlo) con la HERRAMIENTA DE SELECCIN
Cambiar el color con un clic en los colores apropiados en el extremo izquierdo
de la Lnea de colores y escogiendo "Editar".
Cambiar el texto con la HERRAMIENTA DE TEXTO

Una vez que ests satisfecho con el resultado, selecciona el


objeto y exprtalo como PNG o JPG con los botones de la
barra de pgina web (estos se encuentran en la barra
desplegable del smbolo de exportacin HTML).

Para casi todos los grficos, como botones, encabezados, conos y otros objetos no
fotogrficos deberas usar formato PNG. Para elementos que contienen fotos o partes
texturizadas a partir de fotos, entonces JPEG ser un mejor formato. Si ests
guardando una foto girada o una con una sombra suave o borde suave, entonces
deberas guardarla en un formato PNG, pero debes considerar que este archivo ser
mucho ms grande que el JPEG.

Si haces clic en el botn CONFIGURACIN en el dilogo Exportar archivo, accedes a un


panel de control avanzado que te permite optimizar la imagen

www.magix.es
Primeros pasos 53

Aqu puedes comparar las dos versiones diferentes de la misma imagen, una junto a
la otra. Por ejemplo, puedes comparar un JPEG con una versin en PNG del mismo
grfico para evaluar la calidad o el tamao del archivo; o comparar dos imgenes PNG
optimizadas de forma diferente. Consulta el captulo de referencia del dilogo de
exportacin (en la pgina 474) en el manual en PDF. En el ejemplo anterior, la
compresin JPEG se ajust para obtener un tamao de archivo ptimo.

Enlaces, botones y barras de navegacin


Puedes aadir un enlace web a cualquier objeto, un botn, un grfico o algn texto.

Selecciona el objeto y simplemente haz clic en el icono en la barra superior para


introducir la direccin web que quieres enlazar.
54

Introduce la direccin web que quieras para enlazar en el campo.

La pestaa ENLACE del dilogo de enlace te permite controlar lo que ocurre si haces
clic en el objeto vinculado en la pgina. Puedes saltar a cualquier otra pgina web
(puedes seleccionar rpidamente un enlace a cualquier otra pgina dentro de tu
pgina web con el men ENLAZAR A) y puedes decidir si quieres que se abra as la
pgina en una ventana separada. Tambin puedes enlazar a cualquier capa emergente
si ya las has creado.

Por lo tanto, para definir uno de tus botones como enlace, simplemente
seleccinalo (haz clic en el mismo en la HERRAMIENTA DE SELECCIN ), haz clic
en el icono e introduce la direccin web o selecciona una de las pginas de la
lista desplegable y haz clic en APLICAR . Ya has terminado.

www.magix.es
Primeros pasos 55

Cuando hayas creado un enlace a un objeto puedes cambiar rpidamente su


funcionamiento con tan solo hacer clic sobre el mismo. Aparecer un popup con los
detalles y opciones para Cambiar o Eliminar el enlace.

Cambiar texto de botn


Es muy simple en la HERRAMIENTA DE TEXTO, haz clic en el texto del botn y edtalo.

Consejo: si haces triple clic en el texto del botn, seleccionar toda la lnea de texto
para un reemplazo ms sencillo al tipear.

Botones MouseOver (rollover)


Te habrs dado cuenta de que la mayora de botones se resaltan cuando mueves el
cursor del ratn por encima de los mismos en tu navegador. Esto se llama un
MouseOver o, algunas veces, efecto rollover. Es completamente automtico para la
mayora de botones utilizados en las plantillas o para la seccin de botones de la
GALERA DE DISEOS . Pero tambin puedes crear tus propios botones MouseOver:
consulta la seccin "Capas" ms abajo.

Aadir nuevos botones


En la GALERA DE DISEOS cada tema tiene una coleccin de grficos de botones que
puedes arrastrar hacia la pgina. Por lo general hay dos tipos de botones. Los
llamados botones extensibles se alargarn para adaptar el botn de etiqueta de texto.

Adems, en ELEMENTOS DE PGINA Y WIDGETS , hay una categora que contiene un


conjunto de diseos de botones generales que se pueden agregar a tu pgina de la
misma forma.

O puedes copiar cualquier botn ya existente. Puedes copiar y pegar, aunque un


shortcut ms rpido es arrastrar con el botn derecho del ratn apretado. (Este es un
shortcut general para copiar cualquier objeto). Ahora puedes editar el texto y
enlazarlo como desees.

Consejo: si mantienes presionada la tecla "Ctrl" mientras arrastras, la operacin de


arrastre ser perfectamente horizontal o vertical, facilitando en gran medida la
creacin de una lnea o una columna de botones.
56

Barras de botones (barras de navegacin)

La mayora de pginas web, y la mayora de los diseos de plantillas que


suministramos, tienen una fila o una columna de botones para navegar en la pgina
web o en otros lugares. Esto se llama barra de navegacin y MAGIX Web Designer 11
Premium incluye una compatibilidad especial para estas barras. Para editar una barra
de navegacin, haz doble clic sobre ella o clic derecho y escoge EDITAR BARRA DE
NAVEGACIN del men contextual. Se abrir el dilogo de barra de navegacin. All
podrs cambiar los nombres de los botones, enlaces y consejos de herramientas,
agregar y eliminar botones, cambiar el orden y hasta agregar mens y submens.

Al hacer doble clic sobre el campo de URL, se abrir el dilogo Enlace que es el mismo
dilogo que se utiliza para fijar enlaces en objetos normales, tal como se ha descrito
anteriormente en este captulo y en detalle en el captulo del dilogo de propiedades
web. Puesto que no puedes aplicar un efecto de transicin a un enlace de una barra de
navegacin, los controles de transicin de enlace estn desactivados.

En el dilogo de propiedades de la barra de navegacin tambin puedes activar la


opcin BARRA DE NAVEGACIN DEL SITIO. Esto hace que la barra aparezca
automticamente en las nuevas pginas que agregas a tu sitio y los botones/enlaces
agregados a la barra tambin se aaden a cada pgina nueva. Sin embargo, no puedes
editar tu barra en el lienzo si esta opcin est activada, solo puedes hacerlo mediante
este dilogo.

Para actualizar una barra de navegacin en todas las pginas (si no es una barra de
navegacin del sitio) haz clic y escoge REPETIR EN TODAS LAS PGINAS . Esto har que
la barra de botones se convierta en un objeto y lo copiar de la pgina actual a todas
las otras en la misma ubicacin.

Lee el captulo Barras de navegacin (en la pgina 382) para toda la informacin
detallada sobre barras de navegacin.

Tus propios iconos en las pestaas de los


navegadores (favicon)
Es posible que quieras que tu propio icono personalizado, por ejemplo, un logo,
aparezca en las pestaas de tu pgina web cuando se muestran en un navegador.
Web Designer te permite hacerlo si aplicas el nombre "favicon" a tu icono de pestaa
personalizado.

Para crear un "favicon", arrastra o dibuja la imagen que quieres usar en tu pgina web.
La imagen puede tener cualquier tamao, puesto que se ajustar automticamente al
tamao correcto al mostrarse en un navegador.

www.magix.es
Primeros pasos 57

Haz clic en el objeto y luego en el botn "Nombres" a la derecha de la barra


de informacin de la HERRAMIENTA DE SELECCIN .

En el dilogo "Nombres", escribe "favicon", en el campo APLICAR NOMBRES , luego haz


clic en AGREGAR y finalmente en CERRAR .

Haz una vista previa de tu pgina web en tu navegador preferido. La forma ms fcil
de hacerlo, es hacer clic en uno de los iconos de vista previa y en la ventana de vista
previa de MAGIX Web Designer 11 Premium, para luego escoger uno de los
navegadores web en la parte superior derecha de la ventana de vista previa.

Tu pgina web se mostrar con el icono personalizado, tal como se muestra en el


ejemplo ms abajo.

Puedes utilizar un solo favicon por pgina web. Publica tu pgina web y visualzala
para ver tu favicon.

Herramientas de dibujo
Web Designer te ofrece todas las herramientas grficas
que necesitas para crear cualquier objeto grfico en tu
pgina, as como una variedad de elementos grficos
previamente diseados en la GALERA DE DISEOS . Existen
varias herramientas de dibujo bsicas que te permiten
crear rectngulos, elipses, polgonos regulares, estrellas o
cualquier forma que desees.

Web Designer suministra herramientas de dibujo vectoriales lo que significa que


puedes cambiar el tamao, editar la forma y cambiar el color sin perder calidad.
Puedes ampliar para ver el detalle ms nfimo y todas las ediciones pueden
deshacerse.

Atributos actuales (estilos)


Un "atributo" es una caracterstica de un objeto que puedes modificar en MAGIX
Web Designer 11 Premium. Por ejemplo, los atributos de una forma incluyen su color,
el ancho del contorno y su color de contorno.

Tal como se menciona anteriormente, puedes cambiar los atributos de un objeto


despus de haberlo dibujado, si lo seleccionas y luego cambias su color de relleno, el
ancho de la lnea o cualquiera de sus atributos. Pero MAGIX Web Designer 11
58

Premium tambin realiza un seguimiento de los atributos "actuales" que son aquellos
que se aplican a objetos nuevos cuando se crean.

Configuracin manual de los atributos actuales


Si, por ejemplo, quieres que el prximo rectngulo que dibujes sea rojo, asegrate de
que nada est seleccionado (pulsa Esc o haz clic en una parte vaca de una pgina) y
luego haz clic sobre el color rojo en la lnea de colores. Has fijado que el color de
relleno actual sea rojo. Ahora, cuando dibujes una nueva forma, su relleno ser rojo.
Puedes fijar otros atributos de la misma manera, siempre fijndote que no haya nada
seleccionado antes de escoger el valor del atributo.

Configuracin automtica de atributos


Por defecto, MAGIX Web Designer 11 Premium actualiza automticamente los
atributos para que coincidan con los del ltimo objeto que has dibujado o
seleccionado. Entonces si, por ejemplo, haz dibujado un rectngulo y lo has hecho
verde, la prxima forma que dibujes ser tambin verde. Si tienes un rectngulo azul
en tu diseo y deseas dibujar otro igual, entonces selecciona primero ese rectngulo
azul (esto hace que los atributos sean los actuales) y, entonces, la prxima forma que
dibujes tambin ser azul. Entonces, al hacer clic sobre un objeto, fijas todos los
atributos actuales para que coincidan con ese objeto.

Esto te permite utilizar los objetos existentes como una "paleta" de los estilos
disponibles. Haz clic sobre un objeto para seleccionarlo y luego dibuja objetos nuevos
con este estilo.

Puedes desactivar este comportamiento en la PESTAA GENERAL (en la pgina 488)


del dilogo HERRAMIENTAS > OPCIONES . Selecciona la opcin PREGUNTAR ANTES DE
APLICAR EL ATRIBUTO ACTUAL . Ahora, Web Designer te preguntar antes de cambiar
los atributos actuales a aquellos que has utilizado recientemente.

Grupos de atributo
Muchos diseos consisten en una combinacin de formas cerradas con relleno y
formas abiertas (lneas en que los puntos de inicio y fin no coinciden). En general, no
se desea utilizar los atributos de una forma abierta para una cerrada, ni viceversa. Por
lo tanto, los atributos para las formas abiertas y cerradas se conservan separados y se
conocen como grupos de atributos. Fijar los valores de un grupo no afecta al otro
grupo. Entonces, por ejemplo, si seleccionas un rectngulo con relleno sin contorno
no cambiar el ancho de lnea actual a cero para las formas abiertas.

Por los mismos motivos, los atributos de texto forman un tercer grupo de atributos. El
grupo de atributos de texto solamente se fija cuando seleccionas objetos de texto o
cuando fijas los atributos de forma manual mientras te encuentras en la herramienta
de texto.

www.magix.es
Primeros pasos 59

Atributos exentos
Algunos atributos no se fijan como actuales de forma automtica, an cuando la
opcin "Dar a nuevos objetos los atributos ms recientes" est activada. Esto es
porque algunos atributos pueden causar problemas si se convierten en actuales.

Por ejemplo, si has aplicado una difuminacin de 10 pxeles a un objeto grande (para
hacer los bordes menos ntidos) y luego dibujas una forma de 10 pxeles de tamao,
entonces la nueva forma sera invisible si el atributo de difuminacin estuviera fijado.

Otros atributos pueden afectar la forma en que los diseos se exportan, o aumentar
significativamente el tiempo de renderizacin de ese diseo, por lo que no deberan
aplicarse de no ser necesario.

Los ejemplos de los atributos que se copian automticamente:


Colores de relleno, estilos de relleno, ancho de lnea, color de lnea, estilo de
lnea, estilo de unin de lnea, estilo de extremo de lnea, puntas/extremos de
flechas, fuente de texto, tamao de fuente de texto, mrgenes de texto.

Los ejemplos de los atributos que no se copian automticamente:


Difuminacin, transparencia, sombras, biselado, 3D.

Restauracin de atributos actuales


Puedes restablecer los grupos de atributos actuales, si pulsas ESC cuando ningn
objeto est seleccionado. Si hay objetos seleccionados, pulsar ESC quitar la
seleccin, as que pulsa nuevamente la tecla ESC para restaurar los atributos a su
valor por defecto.

Herramienta de formas
El EDITOR DE FORMAS te permite crear imgenes detalladas basadas en
vectores y editar tambin el contorno de cualquier forma.

Para formas predeterminadas como rectngulos o elipses, si quieres editar el


contorno de tus formas de caracteres de texto, debes convertir primero el objeto en
una forma editable. Puedes hacerlo si utilizas el shortcut "Ctrl + 1". Despus puedes
usar el EDITOR DE FORMAS para realizar diversas ediciones de vectores avanzadas.
Consulta la seccin de referencia (en la pgina 149, en la pgina 155) para ms
informacin acerca del uso de esta poderosa herramienta.

La herramienta de lneas rectas y flechas


La HERRAMIENTA DE LNEAS RECTAS te facilita el dibujo de lneas rectas de un
solo segmento y el agregado de extremos de flechas.
60

Simplemente haz clic y arrastra sobre la pgina para dibujar una lnea recta. Puedes
hacer clic sobre una lnea existente para seleccionarla y, una vez seleccionada, puedes
hacer clic y arrastrar de cualquier extremo para moverlo.

Agregar extremos de flechas con la herramienta de lneas


rectas
La barra de informacin tiene dos listas desplegables a la izquierda, que te permiten
escoger un extremo de punta para cada extremo de la lnea seleccionada.

Punta de flecha
Extremo posterior de la flecha
Tamao del extremo de la flecha
Trayectoria invertida

La barra deslizante de la barra de informacin te permite cambiar el tamao de los


extremos de flecha de la lnea seleccionada actualmente. O puedes introducir un valor
de porcentaje al campo de texto del tamao a la derecha de la barra deslizante.

Por defecto, los extremos de lnea se crean con un ancho 6 veces mayor que el ancho
de la lnea, y esto se toma como el tamao 100%, como indica la barra deslizante de
tamao. Si haces la lnea ms ancha, el ancho del extremo de la flecha tambin se
actualizar. Por lo tanto, introduce un valor menor que 100% para reducir el tamao
de los extremos de la flecha o mayor que 100% para aumentarlo. A pesar de que la
barra deslizante solo llega a un mximo de 800%, puedes entrar porcentajes mayores
en el campo de texto.

Trayectoria invertida
Presiona el botn Trayectoria invertida de la barra de informacin para
intercambiar la punta y el final de la flecha de la lnea seleccionada.

Agregar ms segmentos de lnea


Las lneas creadas con la HERRAMIENTA DE LNEAS RECTAS son, por supuesto,
completamente compatibles con las otras herramientas de dibujo. Entonces, si
quieres agregar ms segmentos a una lnea, curvarla o tal vez convertirla en una
forma cerrada, utiliza el EDITOR DE FORMAS .

www.magix.es
Primeros pasos 61

Herramienta de rectngulo
Para dibujar un rectngulo, selecciona la HERRAMIENTA RECTNGULO y
arrstrala por la pgina. Vers una forma con relleno slido a medida que
arrastras por la pgina, que te indicar el color de relleno y de lnea, y los
bordes de la forma que ests dibujando.

Haz clic sobre "esquinas curvas" en la barra de informacin para crear un


rectngulo redondeado, o arrastra el control deslizante de la esquina curva para
ajustar el redondeo.

Arrastra desde cualquier esquina de los controles deslizantes para redimensionar un objeto.

Arrastra y suelta un color desde la Lnea de colores a tu forma para cambiarle el


color. Consulta Colorear formas (en la pgina 38). Con la HERRAMIENTA DE SELECCIN
puedes arrastrarla, girarla y cambiar su tamao segn lo desees. Consulta
herramienta de seleccin (en la pgina 29). Puedes colocar este rectngulo detrs de
los otros objetos como imagen de fondo si pulsas Ctrl+B para "Al fondo". Como
alternativa, si se encuentra frente a los dems objetos (Ctrl+F), puedes hacer clic
derecho y seleccionar CONTORNEAR TEXTO para hacer que el texto de la pgina fluya
alrededor de la parte externa de esta forma (otra herramienta de autora web de Web
Designer).

Herramienta de relleno
Puedes agregar fcilmente un relleno de color con gradacin 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
direccin, el ngulo o la extensin de la graduacin.

Rectngulo redondeado con relleno con gradacin


62

Nota: si arrastras la herramienta de relleno sobre un objeto agrupado como un panel


de texto, el relleno afecta a todo el grupo. Para evitarlo, debes seleccionar solo el
objeto que desees rellenar. Puedes hacerlo de distintas maneras. Un solo clic con la
herramienta de relleno seleccionar nicamente ese objeto, as como un clic en la
herramienta de seleccin con la tecla Ctrl presionada (esto es conocido como
"seleccin interna", ya que selecciona un objeto dentro del grupo). Cuando lo
arrastres rellenar solo el objeto seleccionado.

Para editar el principio o el color del relleno, arrastra y suelta un color desde la lnea 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 gradacin de varios niveles haciendo que se vea la flecha
de relleno (seleccinala con la herramienta de relleno), luego arrastra un color de la
lnea de colores y sultalo cuidadosamente en la lnea 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 crculo con un relleno circular.

La sombra es otra elipse con un relleno de color de gradacin y difuminado (ver abajo)

Herramienta de transparencia

Los navegadores ms modernos con compatibles con efectos de transparencias


avanzados, como lo hace Web Designer. Puedes ajustar la transparencia de cualquier
grfico o foto para hacerlo transparente. Prubalo en tu ejemplo rectngulo.
Simplemente selecciona la herramienta de transparencia y ajusta la barra deslizante
larga en la barra de informacin.

Ms que eso, Web Designer es compatible con la transparencia con gradacin.


Funciona de forma similar al relleno de color con gradacin. En la herramienta de
transparencia, simplemente arrastra a travs de tu forma y puedes ver que la
transparencia desaparece. Puedes ajustar el grado de transparencia de cada
terminacin de la flecha de relleno haciendo clic en la terminacin de la flecha o
ajustando la barra deslizante de transparencia.

Haz un vista previa y vers que tambin funciona en tu navegador.


www.magix.es
Primeros pasos 63

Difuminacin
ste es un trmino grfico para armonizar las esquinas de los objetos. Web Designer
proporciona un control de difuminacin que permite difuminar cualquier objeto,
grfico, texto o foto, proporcionndole un borde borroso que se mezcla con el fondo.
El control de difuminacin no es una de las herramientas de la izquierda, sino uno de
los controles que se ubican en la barra superior. Prubalo en tu forma de rectngulo.
Selecciona la forma y haz clic en el control de difuminacin de la barra superior.

La sombra debajo del dibujo de la pelota tiene un borde difuminado. La combinacin


de todos estos controles te permite producir rpidamente grficos de capas
asombrosos para tu pgina web, todo directamente en Web Designer sin necesidad
de utilizar ninguna otra herramienta grfica.

ste es un ejemplo de un rectngulo redondeado


con una gradacin de color, gradacin de
transparencia y bordes difuminados con un poco
de texto arriba.

Esta tiene un relleno de gradacin de color desde


verde oscuro hasta verde claro de izquierda a
derecha. Tambin tiene una transparencia
graduada desde la parte superior hasta abajo. El
difuminado otorga un borde suave. Crear este
tipo de imagen lleva solo unos pocos segundos y
se convierte automticamente al grfico
indicado, cuando guardas tu pgina web. En
Web Designer puedes crear cualquier tipo de
grfico, foto, texto con transparencia y
simplemente "funciona". Web Designer puede
tambin importar casi todos los tipos de
archivos grficos, desde Adobe EPS, hasta
Photoshop PSD, Cmara RAW y ms.

Nota tcnica: Web Designer convierte automticamente todo tipo de vector grfico
en imgenes PNG, un PNG de canal alfa, si se ha utilizado transparencia. Utiliza
capas CSS para repetir el orden de aparicin de las capas en Web Designer. Esto es
compatible con todos los navegadores web modernos.
64

Herramienta de sombra
Un efecto grfico muy popular es crear una sombra suave debajo de un grfico o un
texto. Esto sirve para elevar el objeto del fondo.

La HERRAMIENTA DE SOMBRA te permite aadir una sombra suave a cualquier


objeto, texto, grfico o foto. Selecciona la HERRAMIENTA DE SOMBRA y
simplemente arrastra el objeto. Puedes ajustar el desenfoque de sombra y la
transparencia utilizando los controles de la barra de informacin.

Texto con una sombra suave.

Para ajustar la posicin de una sombra existente, ve a la HERRAMIENTA DE SOMBRA y


arrastra sobre sombra.

Grficos de ejemplo

Este botn combina muchas de las funciones descritas ms abajo: fue creado a partir
de la combinacin de formas difuminadas y utilizando transparencia con gradacin (el
efecto de reflexin blanco). El texto tiene una sombra suave y el botn tiene una
sombra de resplandor. Todo est agrupado. (No necesitas crear el botn, ya que
aparece en la categora "Botones" de la GALERA DE DISEOS ).

La gran ventaja de los grficos vectoriales, en comparacin con los grficos de "mapa
de bits" creados en software de edicin como Photoshop, es que puedes volver a
colorear, editar, rotar y cambiar el tamao del botn sin prdida de calidad. Agrndalo
y vers que mantiene la nitidez:

Sobre la ampliacin puedes volver a colorear de manera ms fcil. Tan slo


selecciona, haz clic en un color y elige el color que quieres reemplazar de la lista que
se muestra en el cuadro de dilogo "Reemplazar color" que aparece. Puedes incluso
extenderlo como lo desees: todo lo que hagas en Web Designer es no destructivo (lo
que significa que puedes editar siempre sin prdida de calidad).
www.magix.es
Primeros pasos 65

Aquello que normalmente lleva mucho tiempo y procedimientos en otro software


para grficos, es cosa de nios en Web Designer.

Capas, MouseOver (rollover) y elementos


emergentes
Como ya se mencion anteriormente, todos los objetos tienen un orden de ubicacin
en la pgina: desde el objeto ms al fondo hasta el objeto en primer plano.

Estos objetos estn ubicados unos encima de otros.

Adicionalmente, todos los objetos pueden posicionarse en capas nombradas. Cada


capa puede tener cualquier cantidad 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.

Las capas se controlan desde la GALERA DE PGINAS Y CAPAS de la barra de


galeras.
En Web Designer, las capas se utilizan para suministrar funciones MouseOver
(algunas veces llamadas "rollover") en tu pgina web. stas incluyen botones
resaltantes (se resaltan cuando pasas el cursor sobre los mismos) y otros efectos
emergentes como un panel de texto que contiene una descripcin detallada de
producto. Tambin puedes aplicar una transicin a una capa para que aparezca en tu
pgina web con una animacin.

Efectos MouseOver
Hay dos tipos de efectos mouseover. Primero, el que se utiliza en botones mouseover,
en los que cualquier objeto con direccin web puedes mostrar un objeto grfico
superpuesto que aparece en una capa llamada MOUSEOVER. Ve ms abajo para ms
detalles. Hay otra posibilidad an 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 pgina. Esta capa popup puede contener texto, grficos, fotos o cualquier
combinacin de estos elementos. Ms informacin, abajo.
66

Las capas MouseOff y MouseOver


Todos los objetos principales en tu pgina web han sido colocados en la capa inferior,
conocida normalmente como MOUSEOFF. Los botones que se destacan cuando
mueves el cursor del ratn sobre ellos en tu pgina web, tienen un grfico adicional en
la capa, conocido como MOUSEOVER .

Si abres la Galera de capas puedes mostrar u ocultar cualquier capa si colocas o


quitas la seleccin en la casilla de visibilidad (columna izquierda bajo el smbolo de
ojo). Esta es una forma de mostrarte cmo pueden verse los elementos de
MouseOver en tu pgina web.

La capa actual siempre est destacada en la Galera de capas (la capa de MouseOff
en el diagrama de arriba) y esta es la capa en la que todos los objetos nuevos se
dibujarn. Para colocar objetos en cualquier otra capa, simplemente haz clic en la
capa requerida en la Galera de capas, y asegrate de que los smbolos del ojo y del
candado estn abiertos.

Nota: la capa MouseOver debe estar siempre por encima de la capa MouseOff.

Para editar los objetos en una capa, los smbolos tanto de "ojo" como de "candado"
deben estar abiertos, esto significa que puedes ver y editar la pgina (tal como se
ilustra arriba en la capa MouseOff).

www.magix.es
Primeros pasos 67

Botones mouseover (rollover)


Casi todos los botones de diseo acabado en la GALERA DE DISEOS tienen un efecto
mouseover en Web Designer. Estn creados con dos versiones de cada botn, el
botn principal en la capa MouseOff y el botn "resaltado" en la capa MouseOver.

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 versin. Si mueves, arrastras o cambias un botn en la
capa MouseOff, la otra versin en la capa MouseOver cambiar asimismo aunque no
puedas verlo. Esto se efecta utilizando Grupos suaves (en la pgina 51).

Orden de capas en documentos de pgina web


Si tu documento de pgina web tiene efectos MouseOver, capas popup y quizs
tambin efectos MouseOver en estas capas popup, debers seguir algunas reglas
importantes sobre cmo ordenar las capas en tu documento. Si no sigues estas reglas
de orden, es posible que algunos efectos no funcionen.

Si tienes en cuenta las capas una a una desde el fondo hasta el primer plano (que
significa ir hacia arriba en la GALERA DE PGINAS Y CAPAS ), primero deben
encontrarse todas las capas estticas. Se trata de capas que siempre son visibles y
que no se usan como popups. En la mayora de los diseos habr solo una: la capa
MouseOff. Pero ciertos diseos pueden tener varias, en cuyo caso debern ser las
primeras capas en el orden.

La siguiente es la capa MouseOver, en caso de que hubiera efectos MouseOver en las


capas. Esto contiene los estados de MouseOver para todos tus botones MouseOver.
Luego, debe encontrarse la capa "MouseDown", si has agregado efectos MouseDown
a las capas estticas.

Tu siguiente capa podra ser una capa popup. Si los objetos de este grupo tienen
efectos MouseOver, entonces la siguiente capa que siga a la capa popup debe ser la
capa que contiene dichos efectos. Debe tener un nombre que comience con
"MouseOver", p. ej. "MouseOverPopup1". Luego, si la capa popup tambin tiene
efectos MouseDown, deber seguir una capa cuyo nombre comience con
"MouseDown" y que contenga todos esos efectos.

A continuacin puedes tener otra capa popup a la que debe seguirle de nuevo otra
capa MouseOver y MouseDown para esa capa popup. Y as sucesivamente. Puedes
tener tantas capas popup como quieras.

Por lo tanto, para resumir lo explicado anteriormente, el orden de las capas debe
seguir, en general, lo que indica la lista siguiente, que se muestra en el mismo orden
que en la GALERA DE PGINAS Y CAPAS (del primer plano al fondo) Todas las capas
son opcionales y puedes nombrar las capas como t quieras, a excepcin de los
caracteres en negrita que identifican las capas especiales MouseOver y MouseDown.
68

MouseDown popup n
MouseOver popup n
Capa popup n
...
MouseDown popup 1
MouseOver popup 1
Capa popup 1
MouseDown
MouseOver
Capa esttica n
...
Capa esttica 2
MouseOff

Ten en cuenta que solo tienes que preocuparte por estas reglas de orden si ests
construyendo pginas complejas con mltiples efectos popup. Si ests usando los
diseos de plantillas provistos en la GALERA DE DISEOS , no tendrs problemas con el
orden de las capas de tu sitio web.

Mover objetos entre capas


Hay varias formas de mover objetos entre capas. Primero, selecciona el objeto o los
objetos que quieras mover, y, a continuacin:

CORTA el objeto (Ctrl+X o haz clic derecho y selecciona CORTAR ). Asegrate de


que la capa de destino es la capa actual (mostrada con , haz clic en la capa si
no es as) y luego haz clic derecho en PEGAR o PEGAR EN LUGAR. Ten en cuenta
que si cortas o copias mltiples elementos que se encuentran en diferentes
capas, la estructura de capas se conservar al pegar. Los elementos se pegarn
en la misma capa de la que se cortaron/copiaron en vez de en la capa actual. Si
quieres pegar todos los elementos en la capa actual e ignorar la estructura de
capas, usa la opcin PEGAR EN LA CAPA ACTUAL . Si quieres mantener la estructura
de las capas, escoge PEGAR EN EL LUGAR DE LA CAPA ACTUAL . Estas opciones de
pegado tambin se encuentran en la barra desplegable del portapapeles en la
barra superior, as como tambin en el men EDITAR .
Haz clic derecho y escoge ARREGLO y luego MOVER A LA CAPA DE
ADELANTE /MOVER A LA CAPA DE ATRS para mover los objetos seleccionados a
una capa ms arriba o abajo.
Asegrate de que la capa de destino est seleccionada como la capa actual y
luego encuentra el elemento seleccionado en la GALERA DE PGINAS Y CAPAS
(haz clic en el botn LOCALIZAR ), haz clic derecho sobre el elemento y
selecciona MOVER A LA CAPA ACTUAL .

www.magix.es
Primeros pasos 69

Aplicacin de transiciones a las capas popup


Puedes aplicar una transicin a una capa popup para controlar como aparecer la
capa y tambin como se cerrar.

1. Haz clic en la capa en la GALERA DE PGINAS Y CAPAS y luego en el botn


PROPIEDADES en la parte superior de la galera.
2. Haz clic en la pestaa CONFIGURACIN DE POPUP del dilogo de propiedades de
capa.
3. Escoge un EFECTO DE TRANSICIN de la lista desplegable y mueve la barra
deslizante para fijar la velocidad de la transicin en segundos.
4. Escoge la forma en que quieres que se cierre la capa de popup con ayuda de
este campo. Djalo sin marcar si quieres que la capa popup permanezca abierta
hasta que la cierres manualmente, o mrcala si quieres que se cierre cuando
hagas clic en otra parte de la pgina web.
5. Haz clic en APLICAR .

Nota: La capa mouseover aparece y desaparece cuando pones y quitas el cursor


sobre el objeto disparador. Si empleas un mtodo de clic para visualizar la capa (del
dilogo de Enlace), la capa se muestra si haces clic en el objeto y se oculta cuando
haces clic en cualquier otro lugar de la pgina (o cuando haces clic en el botn para
cerrar la capa de popup si has desactivado la opcin "Cerrar popup
automticamente" que se muestra arriba).
70

Capas popup
Una alternativa ms potente te permite visualizar los contenidos de cualquier capa al
pasar el cursor o hacer clic sobre cualquier objeto. Esto se puede utilizar para una
gran variedad de efectos popup diferentes, como fotos popup, mens o descripciones
de objetos detalladas.

Para hacer esto, posiciona todos los objetos que quieras como popup en una nueva
capa (en la GALERA DE PGINAS Y CAPAS haz clic en NUEVA CAPA mientras est
seleccionada una capa; no utilices la capa MouseOver), luego define la propiedad
MouseOver (pestaa MOUSEOVER del dilogo de Animacin web) del objeto original
para activar la visualizacin de esta capa cuando pases el cursor sobre cualquier
objeto. Por ejemplo, puedes hacer que un popup como este aparezca cuando pases el
cursor sobre un texto:

Aqu tienes los pasos para crear un texto popup similar a este:

1. Haz clic en NUEVA CAPA en la GALERA DE PGINAS Y CAPAS mientras est


seleccionada una capa para crear una nueva.
2. Dibuja un rectngulo redondeado con la HERRAMIENTA DE RECTNGULO, haz clic
en un parche de color (plido) en la LNEA DE COLOR para darle un color de
relleno. Para una buena medida dale una sombra suave (selecciona la
HERRAMIENTA DE SOMBRA y arrastra del rectngulo).
3. Crea un bloque de texto en la parte superior de tu rectngulo. Selecciona la
HERRAMIENTA DE TEXTO y arrastra en sentido diagonal a travs del rectngulo.
Escribe tu texto. Si ahora quieres ocultar la capa popup, quita la seleccin de la
casilla con el ojo de tu nueva capa.
4. De vuelta en la capa base (MouseOff) (haz clic en la GALERA DE PGINAS Y
CAPAS para definir esta capa como la actual), selecciona el texto que quieras que
active el popup utilizando el mtodo usual (en la herramienta de texto). A
continuacin abre el dilogo Animacin web (clic derecho y selecciona
ANIMACIN WEB... ) y en la pestaa MOUSEOVER escoge la nueva capa del men
desplegable MOSTRAR CAPA POPUP. Haz clic en ACEPTAR .
5. Haz una vista previa y prueba tu efecto MouseOver.

Si quieres que el popup solo aparezca cuando haces clic, selecciona la opcin
MOSTRAR CAPA POPUP en la pestaa ENLACE del dilogo de Propiedades web (en la
pgina 272).

www.magix.es
Primeros pasos 71

Nota: La capa MouseOver aparece y desaparece cuando pones y quitas el cursor del
ratn sobre el objeto trigger. Si empleas un mtodo de clic para visualizar la capa, la
capa se revela si haces clic en el objeto y se oculta cuando haces clic en cualquier
otro lugar de la pgina.

Fotos pop-up
Hay una segunda forma ms fcil de mostrar fotos ampliadas de miniaturas que no
implica crear nuevas capas. Ver aqu (en la pgina 43). Este mtodo 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.

Publicacin de tu pgina web


Para subir tu pgina web a Internet de forma instantnea puedes publicarla en
TaskPilot, que ofrece un servicio de alojamiento web gratuito, o bien publicarla en otro
espacio web. Publicarla en TaskPilot resulta ms sencillo porque est integrado en
Web Designer. Selecciona "ARCHIVO" >"PUBLICAR" pgina web. Luego inicia sesin en
TaskPilot o pulsa en el enlace PUBLICAR EN OTRO ALOJAMIENTO WEB .

TaskPilot

Pulsa el botn REGISTRARME si todava no dispones de una cuenta en TaskPilot:


registrarse es gratis, fcil y rpido. Introduce tu e-mail y contrasea: haz clic en
MANTENERME REGISTRADO para evitar tener que iniciar sesin en futuras sesiones con
Web Designer.

Cuando aparezca el dilogo de publicacin de TaskPilot, haz clic en el botn PUBLICAR


para poner tu pgina web en la base de tu espacio web o introduce el nombre de una
subcarpeta si quieres publicar varias pginas. Para conseguir una direccin de pgina
web diferente, pulsa el botn NUEVA DIRECCIN DE PGINA WEB.

Otros alojamientos web

Introduce los detalles FTP para tu espacio de alojamiento web: estos datos los provee
la empresa de alojamiento web.

Necesitas:
Direccin del alojamiento
Nombre de usuario
Contrasea
Subcarpeta
URL de la pgina web publicada

Consulta el apartado principal Publicar pgina web (en la pgina 318) para ms
informacin.
72

Transferencia de datos
1. Tras hacer clic en EXPORTAR (o PUBLICAR ), Web Designer abre una pequea
ventana que muestra el progreso de la transmisin de datos y avisa cuando la
publicacin se ha completado. Si has introducido la URL de tu pgina web con
los detalles FTP, puedes acceder directamente a ella desde aqu.
2. Como alternativa, tan pronto como la transferencia finalice, podrs abrir una
ventana de navegador e ir a la URL de la pgina web publicada.

Nota: si introduces una subcarpeta en la pestaa "Publicar" del dilogo "Propiedades


web", la pgina se guardar ah.

Nota: muchos servidores utilizan nombres de archivo que distinguen entre


maysculas y minsculas. As, por ejemplo, la direccin
web "xara.com/productos.htm" no es lo mismo que "xara.com/Productos.htm".
Para reducir la confusin y la probabilidad de errores, Web Designer obliga a que
todos los nombres de pgina se escriban en minsculas y contengan solo caracteres
permitidos. Esto significa que no estn permitidos los espacios en los nombres de
pgina. Sugerimos utilizar un guin bajo como separador alternativo.

www.magix.es
Manejo de documento 73

Manejo de documento

Iniciar un nuevo documento


Principalmente, hay cuatro tipos diferentes de documentos en MAGIX Web Designer
11 Premium: pgina web, presentacin, foto y animacin. Para iniciar un nuevo
documento, selecciona "ARCHIVO" > "NUEVO"

As se abre un submen con varios documentos de plantilla predefinidos por los que
empezar.

La primera es la plantilla por defecto y se utiliza para crear el nuevo documento


despus de iniciar MAGIX Web Designer 11 Premium. La plantilla de animacin es la
plantilla por defecto para los documentos con animaciones.

El botn NUEVO DOCUMENTO de la barra de control estndar crea un nuevo


documento con la plantilla por defecto (shortcut "Ctrl + N").

Puedes guardar tus propias plantillas con el comando "ARCHIVO" > "GUARDAR
PLANTILLA" : consulta "Cambiar el documento de plantilla (en la pgina 487)" para
ms detalles.

Abrir un documento existente


Para abrir un documento existente:

Arrastra y suelta un archivo. Selecciona el archivo en el explorador de Windows


o en tu escritorio y arrstralo hasta el documento abierto para importarlo o
hasta cualquier otra parte de la ventana de Web Designer para abrir el
documento.
O, haz doble clic sobre un archivo de Web Designer.
O, para abrir un archivo usado recientemente, seleccinalo en ARCHIVO > ABRIR
RECIENTE
O, selecciona ARCHIVO > ABRIR (Shortcut "Ctrl+O").

O, haz clic sobre el botn ABRIR en la barra de control ESTNDAR .

Se mostrar el dilogo de apertura. El dilogo te permite una seleccin mltiple de


archivos. Haz clic y pulsa "Ctrl" para seleccionar varios archivos o haz clic y pulsa
"Shift" para seleccionar varios archivos

Al igual que en las ventanas de exploradores, puedes cambiar la vista del


archivo para que se vea junto con sus detalles o como vista en miniatura con
este botn.
74

Si VER VISTA PREVIA en la esquina superior derecha est activado, el archivo


seleccionado se ver en una vista previa an ms grande (esto no funciona en el caso
de una seleccin de varios archivos).

Compartir documento en mltiples ubicaciones


Web Designer es compatible con varias caractersticas innovadoras relacionadas con
el servicio de unidad en la nube. Estos servicios brindan almacenamiento gratis de
archivos en la nube, una pequea herramienta que puedes instalar en el escritorio de
tu PC que sincronizar automticamente en la nube los archivos que guardes en tu
disco duro.

Web Designer sabr si has cambiado los archivos y los cargar automticamente.
Esto significa que puedes abrir el archivo en mltiples equipos y, si haces un cambio y
guardas el archivo en uno, se actualizar en el Web Designer de los dems. Adems,
puedes optar por compartir el archivo en la nube con otra persona y, si ella hace
cambios al archivo y los guarda, tu versin tambin se actualizar, y viceversa.

Esto no soluciona el problema de contradicciones al editar. Es decir, que si editas el


archivo al mismo tiempo que otra persona, Web Designer te indicar que se ha
realizado una edicin y te dar la opcin de abrir el archivo actualizado en un nuevo
documento.

www.magix.es
Manejo de documento 75

La ventana de MAGIX Web Designer 11


Premium

Barra de ttulo
Nombre del archivo que se visualiza
Barra de botones estndar
Barra de galeras
Barra de informacin
Barra de herramientas
Reglas
Pgina
Tablero de dibujo
Lnea de colores
Barra de estado
Indicadores de arrastre/ajuste en vivo
Barra de herramientas web
Pestaas de documentos para todos los archivos abiertos
76

La ventana de Web Designer es similar a una hoja de papel convencional sobre un


caballete o un tablero de dibujo. El rectngulo blanco representa la hoja de papel (la
carilla o pgina). El borde gris es el tablero de dibujo.

Puedes cambiar el tamao de la pgina con un clic derecho y escogiendo OPCIONES DE


PGINA y luego la pestaa TAMAO DE PGINA (en la pgina 495).

Documento seleccionado y barra de ttulo


Puedes abrir ms de un archivo en simultneo en Web Designer. Vers todos los
documentos abiertos como pestaas en la parte superior del espacio de trabajo.

El documento actual se muestra en el espacio de trabajo y el nombre se seala en gris


en las pestaas de documento. Haz clic derecho en la pestaa de un documento para
obtener un men de las acciones que se pueden realizar. El tipo de documento actual
est indicado en la esquina superior izquierda de la ventana de Web Designer, junto a
las opciones del men. El documento actual recibe todas las entradas. Cualquier
cambio que no haya sido guardado en un documento se indica con una estrella tras el
nombre del archivo.

Las pestaas muestran todos los documentos abiertos y la pestaa del documento actual est
marcada en gris.

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, reordenndolas o creando y ocultando barras.

La ventana por defecto muestra la barra de botones ESTNDAR con los botones que se
utilizan con mayor frecuencia:

Puedes personalizar la barra de control ESTNDAR de la misma forma que las otras
barras de control.

Estos iconos con un tringulo indicador en la esquina inferior derecha cuentan con
barras desplegables. Si colocas el cursor del ratn sobre estos iconos, vers la barra
desplegable con ms iconos.

Para ms informacin sobre la personalizacin de barras de control consulta el


captulo "Personalizacin de Web Designer" (en la pgina 497).

www.magix.es
Manejo de documento 77

Barra de informacin
Esta es una barra de control especial. Su contenido cambia segn la herramienta que
selecciones. Las barras de informacin para algunas herramientas especficas estn
descritas en sus respectivos captulos.

Las barras de informacin no pueden personalizarse.

Barra de informacin de la herramienta de seleccin

Barra de herramientas principal


Esta es la barra de control que contiene inicialmente todas las
herramientas disponibles en Web Designer (ver izquierda). Puedes
personalizar la barra de herramientas o mover herramientas a otras barras
de control.

Algunos de los smbolos de la barra de herramientas tienen un pequeo


tringulo indicador en la esquina inferior derecha. Esto significa que est
disponible una barra desplegable con ms smbolos de herramientas.
Mantn el cursor del ratn sobre el smbolo para que aparezca la barra
desplegable. Luego podrs llevar el cursor del ratn sobre cada smbolo de
la barra para ver un consejo de herramienta con la indicacin de su
funcionamiento.

Haz clic sobre una herramienta para seleccionarla (algunas herramientas


tambin tienen shortcuts de teclado).
Para ms informacin sobre la personalizacin de barras de control
consulta el captulo "Personalizacin de Web Designer" (en la pgina
497).

Reglas
Puedes ocultar reglas, cambiar el punto cero (origen) y
utilizarlas para crear lneas gua. Para ms informacin, lee
"Reglas (en la pgina 92)".
78

La barra de estado

Objetos seleccionados
Opciones disponibles
Indicadores
Cursor del ratn 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 tiempo
real y la posicin X/Y del cursor.

Los indicadores
Estos aparecen a la derecha de la barra de estado:

Indicador Live Drag


El indicador muestra si live drag se encuentra activado o no (por defecto est
activado). Haz doble clic sobre el indicador para activar/desactivar el live drag,
todo el objeto se mueve (no solo el contorno), lo que facilita juzgar el efecto de la
edicin en tiempo real. El dibujo con las herramientas de dibujo libre, lneas
rectas, Quickshape, rectngulos y elipses tambin se realiza en tiempo real con
esta con esta opcin. Si tu PC no puede trabajar con un documento
particularmente complejo, esta opcin se apagar automticamente para
garantizar que la edicin siga siendo rpida y eficiente.
Indicador de ajuste
Este indicador est activo cuando se ha seleccionado la opcin VENTANA >
AJUSTAR A OBJETOS . Muestra cuando mueves un punto cerca de la distancia de
ajuste de un objeto. Para ms informacin sobre el ajuste, consulta "Trabajar con
objetos (en la pgina 130)".

Coordenadas X-Y
Web Designer muestra las medidas relativas a la esquina inferior izquierda de la
pgina. Sin embargo, esto puede configurarse. Para ms informacin, lee el captulo
Trabajar con objetos.

Modo de pantalla normal/completa


En el modo de pantalla normal, parte de la ventana est ocupada por la barra de ttulo,
la barra de men y las barras de desplazamiento. Esto puede no ser conveniente si
necesitas la mayor superficie de edicin posible. Web Designer tiene otro modo de
www.magix.es
Manejo de documento 79

pantalla llamado "pantalla completa" que muestra un monitor ms ordenado. Puedes


configurar cada modo de pantalla de la forma que quieras. Por ejemplo, puedes tener
tu propia configuracin de las barras de control. La configuracin se guarda y se aplica
cada vez que cambias entre los modos de pantalla.

La pantalla normal/completa se controla a travs de VENTANA > PANTALLA COMPLETA


o con un clic derecho y la opcin PANTALLA COMPLETA ("8" del teclado numrico).

Para ver la barra de men en modo de pantalla completa, mueve el cursor hasta la
parte superior de la pantalla.

Abrir una segunda ventana


Es posible que quieras abrir una segunda ventana con el mismo documento para:

obtener una vista ampliada o reducida del documento;


ver otra parte del documento;
obtener dos vistas de la misma rea con dos calidades diferentes.

Las configuraciones de calidad estn descritas ms adelante.

Escoge Ventana > Nueva vista para abrir otra ventana. Puedes tener el mismo
documento abierto en diferentes ventanas.

Seleccin de la ventana que se quiere visualizar


Cada ventana que est abierta se muestra como una pestaa debajo de la barra de
informacin. Haz clic en una pestaa para ver la ventana o clic en el men VENTANA y
escoge un nombre para la ventana en la parte inferior.

Orden de mltiples ventanas


"VENTANA > ORDENAR VISTAS" > te ayuda a organizar mltiples ventanas. Cada
ventana tiene su propia barra de ttulo pero ninguna barra de control. Haz clic sobre
una ventana para que sea la ventana actual. Con "Ctrl + F6" puedes pasar por las
ventanas en secuencia.

ORDENAR VISTAS muestra las ventanas ordenadas verticalmente o, en caso de ms de


tres ventanas, como superpuestas.

Minimizar ventanas mltiples


Al minimizar una de las ventanas, se ve un icono en el fondo de la ventana principal
de Web Designer. Para volver a abrir la ventana haz doble clic.
80

Cambiar el valor de zoom


Muchas veces es til aumentar la vista del documento para examinar los detalles o
reducir la vista para obtener una impresin 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 tamao del documento y de los objetos permanece igual (el cambio de tamao de
documento se describe ms adelante). Para cambiar el valor de zoom puedes usar la
herramienta de ZOOM, el ratn o las barras de control.

Algunos valores de zoom tienen asignados shortcuts: los nmeros 1, 2, 3, 4 colocan el


zoom entre 100% y 400%. El nmero 5 lo lleva al 50%.

Uso de la herramienta de zoom


Para ampliar o reducir la vista:

Selecciona la herramienta de ZOOM de la barra principal de herramientas.


O pulsa Alt+Z para cambiar entre la herramienta actual y la herramienta de
ZOOM .
O pulsa y mantn pulsada las teclas Alt+Z para cambiar temporalmente a la
herramienta de ZOOM (suelta Alt+Z para volver a la herramienta previa).
O +F7 para seleccionar la herramienta de ZOOM .

Cambiar el valor de zoom utilizando el ratn


Si tu ratn tiene ruedita:
Pulsa Ctrl y gira la rueda del ratn para cambiar el nivel de zoom.

Tambin puedes configurar una tecla del ratn para el zoom. Adems, puedes
cambiar la accin de la rueda del ratn entre desplazamiento y zoom en
Herramientas > Opciones > Pestaa del ratn (en la pgina 493). La accin opuesta
est disponible pulsando la tecla Ctrl.

Alternativamente, selecciona la herramienta de ZOOM:

Haz clic para ampliar.


+clic para reducir el valor de zoom (ver ms del documento).
Arrastra el ratn diagonalmente para crear un rectngulo. Al soltar la tecla del
ratn, el rea dentro del rectngulo se ampliar para adaptarse al tamao de la
ventana.

www.magix.es
Manejo de documento 81

Cambiar el zoom utilizando la barra de informacin/barra


de control de zoom
Hay una barra desplegable en la barra de herramientas estndar, que te brinda acceso
a las funciones de zoom, sin tener que ir a la herramienta de zoom.

Mantn el cursor del ratn sobre el smbolo del zoom de la barra de


herramientas estndar para ver la barra desplegable.

Para cambiar el zoom:


Shortcut: Ctrl + R. Haz clic en el botn ZOOM ANTERIOR. Este es el valor de
zoom antes de la configuracin actual. Usar este botn 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 se seguir
manteniendo.
Shortcut "1" Haz clic en el botn Zoom a 100%. El factor del zoom cambia al
100%

Shortcut "Ctrl + + J". Haz clic en el botn ZOOM AL DIBUJO . La ventana


muestra todos los objetos del documento.

Shortcut "Ctrl + + P". Haz clic en el botn ZOOM A LA PGINA . La ventana


muestra toda la pgina o pares de pginas.

Shortcut "Ctrl + + Z". Haz clic en el botn ZOOM A LA SELECCIN . El objeto u


objetos seleccionados ocuparn toda la ventana.

Introduce un valor en el campo de texto. Pulsa "" para


implementar el cambio o selecciona algn valor de
zoom predeterminado incluyendo los mencionados
anteriormente (pgina, dibujo, seleccionado, anterior)
en el men desplegable.

Desplazar el documento dentro de la ventana


La forma ms rpida y fcil de desplazar el documento es utilizar el botn central del
ratn (que muchas veces es tambin la ruedita). Haz clic y pulsa la tecla del ratn y
mueve el ratn. Suelta el botn para volver a la herramienta anterior.

Para mover el documento dentro de la ventana tambin puedes:

Usar las barras de control y las flechas a los costados de la ventana.

La visualizacin de las barras de desplazamiento es opcional. Escoge Ventana >


Barras > Barras deslizantes para desactivarlas
82

Usa la rueda del ratn para desplazar el documento hacia arriba y hacia abajo
(Shift + rueda del ratn para izquierda a derecha)

Puedes cambiar la accin de la rueda del ratn entre desplazamiento y zoom en


Herramientas > Opciones > Pestaa del ratn. La accin opuesta est disponible
pulsando la tecla Ctrl.

O selecciona la herramienta de DESPLAZAMIENTO de la barra de


herramientas principal (shortcut+F8).

O pulsa la barra espaciadora o Alt+X para cambiar entre la herramienta actual y


la herramienta de DESPLAZAMIENTO.
O pulsa y mantn pulsada la barra espaciadora o Alt+X para cambiar
temporalmente entre la barra de DESPLAZAMIENTO (y suelta la tecla para volver
a la herramienta anterior). Despus puedes usar el ratn para desplazar el
documento por la ventana.

La barra de informacin de la herramienta de DESPLAZAMIENTO es la misma que la


barra de informacin de la herramienta de ZOOM (descrita anteriormente).

Cambiar el tamao de pgina


Cuando se abre un nuevo documento en Web Designer el tamao de pgina es 760 x
700 pxeles (SVA pgina web). Sin embargo, si lo deseas puedes cambiar el tamao
de pgina para que sea compatible con otras resoluciones de pantalla como VGA.

1. Escoge en el men "HERRAMIENTAS - > OPCIONES".


2. De ser necesario, escoge la pestaa de tamao de pgina.
3. Selecciona el tamao de pgina que deseas.

Si seleccionas PERSONALIZAR en la seleccin de tamao puedes configurar un ancho


y un alto personalizado en los campos de abajo.

Cada pgina del documento (pgina web exportada) puede tener una tamao
diferente. Con la opcin TODAS LAS PGINAS DEL SITIO WEB CON EL MISMO TAMAO
puedes determinar un tamao de pgina para que se aplique a todas las pginas del
documento.

Puedes cambiar el alto de la pgina arrastrando el borde inferior de la


pgina con la herramienta de seleccin.

www.magix.es
Manejo de documento 83

Pginas mltiples en el documento


Un documento de MAGIX Web Designer 11 Premium puede tener mltiples pginas.
Cada pgina se exporta a una pgina en HTML independiente, es decir, cada
documento en MAGIX Web Designer 11 Premium corresponde a una pgina web.

Por defecto, cuando abres o creas un nuevo documento web, Web Designer muestra
solamente una pgina. Los documentos impresos, sin embargo, se visualizan por
defecto en vista de multipgina. Haz clic derecho en una pgina o su tablero de
dibujo y selecciona o desactiva VISTA MULTIPGINA para cambiar entre modos de
presentacin.

La pgina actual
Si haces clic en una pgina de un documento multipgina, se convertir en la pgina
actual.

Debes estar situado en la pgina actual cuando desees introducir, duplicar o


mover pginas, como pasaremos a explicarte en las secciones siguientes.

Puedes saber en qu pgina del documento te encuentras actualmente


mediante los indicadores situados en las esquinas de la pgina.

Introducir pginas en tu documento


Haz clic derecho sobre una pgina y escoge PGINA NUEVA o NUEVA DOBLE PGINA.
Se insertar una nueva pgina en blanco despus de la pgina actual o haz clic
derecho sobre una pgina y escoge DUPLICAR PGINA ACTUAL o DUPLICAR DOBLE
PGINA ACTUAL . Un duplicado de la pgina actual se insertar detrs de la pgina.

La nueva pgina ser la


misma que la pgina original
incluyendo su tamao y
orientacin, e incluir todo
su contenido, de manera tal
que la puedas utilizar como
plantilla para nuevos
contenidos.
Tambin puedes utilizar las
opciones del men "EDITAR >
PGINAS "

Adems, la barra de herramientas estndar cuenta con una barra desplegable que te
permite aadir, duplicar y eliminar pginas rpidamente.
84

Mantn el cursor del ratn sobre cada smbolo de la barra para ver un consejo de
herramienta para cada operacin. Puedes agregar una nueva pgina en blanco,
duplicar la pgina actual o eliminarla.

Copiar y pegar pginas


Puedes copiar y pegar pginas enteras en el documento actual o pegar pginas en
otro documento. Esto copia las dimensiones de pgina, las capas y otros atributos de
la pgina, adems de todos los objetos en la pgina.

Para copiar la pgina actual, borra cualquier seleccin actual pulsando Esc o haz clic
en una parte vaca de la pgina o del rea de trabajo. En la barra de estado aparecer
"No hay objetos seleccionados". Haz clic en una parte en blanco de la pgina y
selecciona COPIAR PGINA (o pulsa "Ctrl + C").

Cuando pegas una pgina copiada, se aade inmediatamente despus de la pgina


actual. Para pegar usa las teclas "Ctrl + V" o haz clic derecho en la pgina y
selecciona PEGAR > PGINA en el men contextual.

Nota: si el documento en el que se pega una pgina tiene la opcin TODAS LAS
PGINAS DEL DOCUMENTO IDNTICAS activada en ARCHIVO> OPCIONES DE PGINA ,
las dimensiones de la pgina pegada sern reemplazadas por las dimensiones de
pgina del documento. Entonces, la nueva pgina tendr las mismas dimensiones
que las otras pginas del documento.

Mover pginas dentro del documento


El modo ms fcil de cambiar entre pginas en tu documento es arrastrar la pgina en
miniatura en la galera pginas y capas (que est fijada a la parte derecha por
defecto). Tambin puedes seleccionar ms de una pgina a la vez y arrastrar para
reordenarlas.

Como alternativa para mover la pgina actual:

Selecciona "EDICIN" > "PGINAS" > "MOVER PGINA HACIA ARRIBA" o haz clic
derecho y selecciona MOVER PGINA HACIA ARRIBA para cambiar la pgina actual
por la anterior.
Selecciona "EDICIN" > "PGINAS" > "MOVER PGINA HACIA ABAJO" o haz clic
derecho y seleccionaMOVER PGINA HACIA ABAJO para cambiar la pgina actual
por la posterior.

Estas opciones de men sern desactivadas si ests en la primera o la ltima pgina


del documento respectivamente.

www.magix.es
Manejo de documento 85

Eliminar pginas de tu documento


Para eliminar la pgina actual de tu documento haz clic derecho y selecciona
ELIMINAR PGINA ACTUAL o ve a "EDICIN" > "PGINAS" > "ELIMINAR PGINA ACTUAL" .
La pgina actual y todos sus contenidos sern eliminados. O selecciona una o ms
pginas en la galera de pginas y capas y pulsa el botn "Eliminar" o la tecla de
borrado.

Navegar entre pginas


Adems de los mtodos usuales para moverse dentro de un documento (como la
barra deslizante y la ruedecilla del ratn), existen otras formas de navegar a travs de
las pginas:

Hacia arriba: se mueve hacia arriba del documento (retrocede a la pgina anterior).
La cantidad de desplazamiento depende de tu nivel de zoom. Cuanto ms alejado
ests del documento (zoom out), ms grande ser el desplazamiento.

Ctrl + Re. Pg. (page up): va hacia el centro de la pgina anterior.

Hacia abajo: se mueve hacia abajo del documento. La cantidad de desplazamiento


depende de tu nivel de zoom. Cuanto ms alejado ests del documento (zoom out),
ms grande ser el desplazamiento.

Ctrl + Av. Pg: va hacia el centro de la pgina anterior.

O haz clic en la flecha que apunta hacia arriba o hacia abajo


en la barra de estado de acuerdo a dnde te quieres
desplazar:

La barra de estado tambin es til para saber qu pgina/s ests visualizando


actualmente.

Nota: todos estos movimientos son relativos a las pginas que ests visualizando,
no a la pgina actual.

Galera de pginas y capas


Tambin puedes utilizar la galera de Pginas y capas para administrar
convenientemente las pginas en tu documento. Te permite ver, aadir, duplicar,
eliminar, reorganizar y renombrar pginas desde una sola vista. Para ms informacin,
consulta Galera de pginas y capas (en la pgina 419).
86

Guardar el documento
Esta seccin explica cmo guardar los documentos en el formato de Web Designer
(su formato nativo). Para ms detalles sobre exportar documentos en otro formato,
lee el captulo "Importacin y exportacin (en la pgina 463)". Te recomendamos que
siempre guardes los documentos de forma regular. Si no lo haces, es posible que lo
lamentes si hay un corte de electricidad repentino o si tu PC se cuelga de repente, ya
que perders muchas horas de trabajo invertidas en un documento complicado.
Asegrate de que la funcin de copia de seguridad automtica est activada para que
se realicen copias regulares de los documentos mientras trabajas. Consulta la seccin
Copias de seguridad automticas (en la pgina 88) a continuacin para ms detalles.

Opcin Guardar (en el men Archivo)


(Shortcut Ctrl+S o clic sobre el botn Guardar en la barra de control
ESTNDAR ).

Esta opcin te ofrece una forma rpida de volver a guardar el documento con el
mismo nombre de archivo. La opcin no est disponible salvo que hayas realizado
cambios y todava no los hayas guardado. Para un nuevo documento que todava no
se ha guardado en disco, la opcin acta como "Guardar como" (descrita a
continuacin).

Guardar como (en el men Archivo)


Esta opcin abre un dilogo que te permite guardar el documento con un nuevo
nombre o en otro directorio. Esta opcin es til para realizar copias de seguridad de
Web Designer.

Guardar todo (en el men Archivo)


Esto acta como una serie de comandos de GUARDAR o GUARDAR COMO para todos
los documentos que se encuentran abiertos actualmente.

Directorios de compatibilidad
Algunos documentos, que se utilizan para crear pginas web, tienen archivos
externos de referencia porque estos no pueden ser integrados al archivo de diseo
.web. Por ejemplo, un archivo Flash (swf) de tu pgina web. Debes mantener el
archivo Flash junto al archivo de diseo porque si no, cuando quieras exportar la
pgina web, esta no funcionar de forma correcta. Otra razn por la que es
importante mantener ambos archivos juntos es para cuando quieras enviar el diseo a
alguien o para cuando quieras transferirlo a otro equipo.

MAGIX Web Designer 11 Premium ofrece un directorio opcional de compatibilidad


para los archivos externos que se encuentra a la derecha del archivo de diseo.

www.magix.es
Manejo de documento 87

Nombres para el directorio de compatibilidad


El archivo de diseo y su directorio de compatibilidad correspondiente se identifican
fcilmente 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 diseo 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 diseo,
recuerda que debes mandar tambin el directorio de compatibilidad.

Cuando cargues un diseo que tiene un directorio de compatibilidad y luego escoges


la opcin "Guardar como", MAGIX Web Designer 11 Premium tambin copiar todo el
directorio de compatibilidad (si existe uno).

Contenido del directorio de compatibilidad


Si utilizas el marcador de lugar (en la pgina 290) del dilogo PROPIEDADES WEB para
insertar una referencia a un archivo externo en tu diseo de la pgina web, MAGIX
Web Designer 11 Premium copiar automticamente ese archivo al directorio de
compatibilidad. Si no existe el directorio de compatibilidad se crear uno.

Ten en cuenta que si realizas modificaciones al objeto del marcador posteriormente,


el archivo original no se borrar automticamente del directorio de compatibilidad. Si
no necesitas ms ese archivo, debers eliminarlo manualmente.

Tambin puedes copiar manualmente archivos al directorio de compatibilidad.


MAGIX Web Designer 11 Premium no eliminar ningn archivo, independientemente
de si estos aparecen en el diseo o no. Esto es as porque hay muchas formas
distintas de colocar referencias a archivos externos en el archivo de diseo. Por
ejemplo, se puede insertar un cdigo complejo de HTML en el diseo que contenga
una referencia a un archivo externo de tu directorio de compatibilidad. O tambin se
puede tener un archivo externo que contenga una referencia a otro archivo externo.
No hay forma de que MAGIX Web Designer 11 Premium pueda estar seguro de que
el archivo no va a ser utilizado en la pgina web, por eso no los elimina.

Exportacin de pginas web con directorios de


compatibilidad
Cuando exportas un documento de pgina web, se copiarn todos los archivos de
directorio de compatibilidad a la carpeta que contenga todas las imgenes de tu
pgina web. Si exportas "miSitio.web" a "index.htm", los archivos de la carpeta
"miSitio_web_archivos" se copiarn a la carpeta "index_htm_archivos".
88

Cerrar el documento
Para cerrar el documento:

Seleccionar "ARCHIVO" > "CERRAR".


O pulsa "Ctrl + F4", o tambin "Ctrl + W".
O bien haz clic sobre la X ms pequea de las dos que se encuentran en la
esquina superior derecha.
O incluso haz clic derecho en la pestaa del documento para ver un men de
contexto sensible con una serie de opciones de guardar y cerrar tanto para una
sola pestaa cono para todas las pestaas abiertas.

Haz clic derecho en una pestaa para visualizar mltiples opciones de guardar y cerrar.

Copias de seguridad automticas


MAGIX Web Designer 11 Premium guardar como opcin copias de seguridad de tus
documentos abiertos mientras trabajas. Esto te ayudar a evitar que pierdas tu
trabajo en el caso de un fallo elctrico o de un cierre anormal del programa. Tambin
es til si deseas volver a una versin anterior de tu documento. Para activar o
desactivar las copias de seguridad automticas, abre el dilogo
HERRAMIENTAS >OPCIONES y escoge la pestaa COPIAS DE SEGURIDAD .

www.magix.es
Manejo de documento 89

Copias de seguridad de documentos abiertos


Para activar las copias de seguridad, selecciona este campo y escoge cmo te
gustara que se hagan las copias de seguridad. El periodo sugerido es de 10 minutos,
lo que significa que un documento abierto se guardar si han pasado ms de 10
minutos desde que se ha guardado por ltima vez (o desde que se cre o abri el
documento).

Ten en cuenta que una vez que el periodo configurado haya pasado desde la ltima
copia de seguridad, la prxima 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 est modificando. En el uso normal,
es poco probable que no haya periodos inactivos de 15 segundos o ms, por lo que
permite realizar una copia de seguridad poco despus. De todas formas, si ests
editando activamente durante un periodo extendido de tiempo es posible que
transcurra bastante ms tiempo que el configurado entre dos copias de seguridad.

La funcin de copia de seguridad automtica no guarda los cambios de los


subdocumentos abiertos. Cuando se ejecuta una copia de seguridad programada, solo
se guarda el documento principal en su estado actual y sin los cambios no guardados
del grupo. Por esta razn, se recomienda guardar regularmente los cambios de
edicin interna en el documento principal.

Cuando se realiza una copia de seguridad, vers una barra de progreso en la parte
inferior de la ventana de MAGIX Web Designer 11 Premium mientras se finaliza el
procedimiento.

Ubicacin de la copia de seguridad


Utiliza el botn Explorar si quieres cambiar la carpeta en la que estn guardadas tus
copias de seguridad.

Puedes acceder a los documentos de copia de seguridad en cualquier momento en la


opcin de men ARCHIVO>ABRIR RECIENTE>COPIAS DE SEGURIDAD . Esto abre un
dilogo de archivos con la carpeta de copias de seguridad, de forma que puedas
navegar, abrir o eliminar cualquiera de los archivos de copia de seguridad.

Revisiones
Por defecto, se guardan 10 revisiones de cada diseo en tu carpeta de copias de
seguridad, pero puedes escoger cambiar este nmero en el campo de revisiones. Las
revisiones que excedan la cantidad establecida, se eliminarn automticamente. 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.
90

ADVERTENCIA: Ten en cuenta que si tienes mltiples documentos que comparten


el mismo nombre de archivo en diferentes carpetas en tu ordenador, sus copias de
seguridad tambin compartirn el nombre en la carpeta de copias de seguridad. Por
lo tanto, intenta usar nombres de archivo nicos para tus diseos con el propsito
de evitar que las copias de seguridad de un diseo sobrescriban otras con el mismo
nombre.

Documentos sin ttulo


Las copias de seguridad de los documentos que has creado y que no has guardado se
almacenarn con el nombre "Untitled" seguido de un nmero y la fecha/hora. Este
nombre y nmero corresponden a los que se muestran en la barra de ttulo cuando
ests editando documentos sin guardar.

ADVERTENCIA: como los documentos sin guardar se denominan Untitled1,


Untitled2, etc., las copias de seguridad de estos documentos se sobrescriben
relativamente rpido. Por lo tanto, deberas guardar los documentos importantes
con un nombre exclusivo de tu eleccin para poder identificar fcilmente las copias
de seguridad de ese documento en el directorio de copias de seguridad.

Guardar copias de seguridad de documentos abiertos al


cerrar el programa
La pestaa "Copias de seguridad" del dilogo "Opciones" te permite activar laCOPIA
DE SEGURIDAD AUTOMTICA Y RESTAURACIN . Cuando esta opcin est activada, al
cerrar MAGIX Web Designer 11 Premium, no se te preguntar si quieres guardar los
documentos modificados que todava estn abiertos. Por el contrario, se realiza una
copia de seguridad de todos los documentos abiertos en la carpeta de copias de
seguridad y el programa se cierra. Luego, al iniciar nuevamente el programa, los
mismos documentos se cargan automticamente para que puedas continuar
trabajando desde donde los has dejado.

Ten en cuenta que si tiene cualquier vista abierta de un subdocumento de edicin


interna, estas se cerrarn sin notificacin y se guardarn en el documento principal
cuando se cierre el programa y se hace una copia de seguridad del documento
principal. Las vistas del subdocumento de edicin interna no se vuelven a abrir
cuando se reinicia el programa. Consulta edicin dentro de grupos.

Recuperacin tras cierres anormales del programa


Si has activado las copias de seguridad automticas y el programa se cierra de forma
anormal (debido a un corte de electricidad, por ejemplo), el programa debera
detectarlo al reiniciarse. De ser as, te ofrecer la posibilidad de restaurar la copia de
seguridad ms reciente de cada documento que se encontraba abierto en el momento
de la ltima copia de seguridad.

www.magix.es
Manejo de documento 91

El cierre anormal no se detectar si no se ha realizado ninguna copia de seguridad


desde el ltimo cierre normal del programa.

Copias de seguridad al cerrar el sistema


Si cierras Windows sin cerrar el programa primero, todos los documentos abiertos se
guardarn en la carpeta de copias de seguridad aun cuando la opcin "Guardar copias
de seguridad de documentos abiertos al cerrar el programa" no est activada. Esto
permite que el cierre del sistema se realice sin que MAGIX Web Designer 11 Premium
lo interrumpa para preguntarte acerca de los documentos modificados sin guardar. La
prxima vez que inicies el programa, se te preguntar si quieres restaurar o no los
documentos que estaban abiertos en el momento del cierre del sistema.

Recuperacin de copias de seguridad


Puedes acceder a las copias de seguridad de tus documentos con Archivo>ABRIR
RECIENTES ->COPIA DE SEGURIDAD . Esto abre un dilogo de archivos con la carpeta de
copias de seguridad, de forma que puedas navegar, abrir o eliminar cualquiera de los
archivos de copia de seguridad. Es una buena idea utilizar este dilogo para limpiar
viejas copias de seguridad de forma peridica.

Ten en cuenta que cuando cargas un documento de copia de seguridad no se asocia


automticamente con el archivo de diseo del que se ha realizado la copia de
seguridad. Se trata como un documento independiente con sus propios derechos. Por
lo tanto, si decides conservar la copia de seguridad deberas usar ARCHIVO>GUARDAR
COMO para guardarlo en algn lugar con un nombre adecuado.

Cuadrcula en pantalla
Para ayudarte a disear tu documento, Web Designer puede mostrar una cuadrcula
en la pantalla (la cuadrcula aparece solamente en la pantalla, no se exporta ni se
imprime). La cuadrcula te ayuda a alinear objetos (similar a utilizar una hoja de
grficos como ayuda para dibujar).

Haz clic derecho y escoge "MOSTRAR CUADRCULA/GUAS" > "MOSTRAR CUADRCULA"


para activar y desactivar la visualizacin de la cuadrcula o escoge "AJUSTAR A" >
"AJUSTAR A CUADRCULA" . Tambin puedes escoger la opcin "VENTANA" > "AJUSTAR
A CUADRCULA" .

En este caso, los puntos de cuadrcula actan como imanes y, al mover objetos, estos
se ajustan al punto de cuadrcula ms cercano. Por defecto los documento web tienen
activado "AJUSTE A CUADRCULA", con una cuadrcula de 1 pxel.

El tipo de cuadrcula (isomtrica/rectangular), el punto 0,0 (el origen) y el espaciado


entre los puntos de la cuadrcula se configuran en la pestaa CUADRCULA Y REGLA (en
la pgina 492) del dilogo de opciones. Cualquier cambio que hagas se aplicar solo
al documento seleccionado.
92

El ajuste a los objetos magnticos tambin est activado por defecto para los
documentos web. El ajuste de objeto es una forma muy precisa de alinear lneas,
puntos y bordes de los objetos a cualquier otro objeto para que se toquen.

Puedes usarlo para alinear los centros de los objetos o para alinear objetos respecto al
centro de la pgina o para alinearlos de forma horizontal o vertical en cualquier parte
en el centro de la pgina o en la esquina de la misma.

Para activar el ajuste de los objetos, haz clic en el botn AJUSTAR A OBJETOS o
haz clic derecho y escoge "AJUSTAR A" > "AJUSTAR A OBJETOS" . Tambin
puedes escoger la opcin "VENTANA" > "AJUSTAR A CUADRCULA" .
Consulta Manejo de objetos (en la pgina 130) para ms detalles sobre el ajuste de
cuadrculas y el ajuste a objetos.

Reglas
Las reglas estn desactivadas por defecto. Para activarlas:

Haz clic derecho y escoge "MOSTRAR CUADRCULA/GUAS" > "MOSTRAR REGLAS"


para activar y desactivar la visualizacin de la cuadrcula.
Pulsa "Ctrl + Shift + R".
O selecciona "VENTANA" > "BARRAS" > "MOSTRAR REGLAS".

Web Designer utiliza las reglas para:

controlar los mrgenes, tabulaciones y sangras (en la pgina 216) en la


HERRAMIENTA DE TEXTO .
para informarte la parte de la pgina que ests viendo;
mostrar la posicin X-Y actual del cursor;
aplicar lneas gua. Si la opcin "VENTANA" > "AJUSTAR A CUADRCULA " est
activada, las lneas gua se ajustan a las divisiones de las reglas. Para ms
informacin sobre lneas gua, lee el apartado guas y lneas gua en el captulo
Manejo de objetos (en la pgina 130).

Cuando creas o cambias el tamao de objetos, puedes utilizar las reglas para
controlar el tamao. Tambin puedes utilizar la HERRAMIENTA DE SELECCIN para un
trabajo ms exacto. Lee Seleccin de objetos para ms informacin.

Las reglas pueden verse sobre el borde izquierdo y el borde superior de la ventana.
Una lnea punteada sobre cada regla sigue la posicin actual del cursor.

Las unidades y nmeros de las divisiones de las reglas son los mismos configurados
para personalizar la cuadrcula en pantalla. Estos valores se configuran utilizando la
pestaa "Cuadrcula y regla (en la pgina 492)" del dilogo "Opciones". Las unidades
actuales y los factores de cambio de tamao se visualizan en la esquina superior
derecha de la regla.

www.magix.es
Manejo de documento 93

Mostrar/ocultar reglas
Haz clic derecho y escoge "MOSTRAR CUADRCULA/GUAS" > "MOSTRAR REGLAS" ("Ctrl
+ Shift + R") para activar y desactivar las reglas. Los cambios se aplicarn a la ventana
actual y a las siguientes ventanas que abras. No afecta a las otras ventanas abiertas.

Cambiar los puntos cero de las reglas


Muchas veces es fcil medir los objetos si alineas el punto 0,0 de la regla con el
objeto. Para mover el punto 0,0 arrastra el cuadrado de la interseccin de ambas
reglas.

Puedes arrastrar vertical u horizontalmente a lo largo de las reglas o hasta cualquier


otra parte de la ventana de edicin de Web Designer. A medida que lo hagas, una
lnea punteada te mostrar la nueva posicin.

Esto tambin mueve el origen de la cuadrcula de forma que las divisiones de la regla
siempre se encuentren alineadas con la cuadrcula.

Tambin puedes mover el punto cero desde la pestaa CUADRCULA Y REGLA del
dilogo de opciones (descrito a continuacin)

Calidad de imagen
Hay cinco configuraciones de calidad disponibles en el men VENTANAS >CALIDAD
que afectan la forma en que el documento aparece en MAGIX Web Designer 11
Premium:

Slo contorno. Ahora, con antialiasing completo para una mayor calidad de
visualizacin de la pantalla
Contornos con pasos de transicin
Color total (sin antialiasing)
Alta calidad (antialising total y suavizado de imagen)
Muy alta calidad (el mejor antialiasing de la industria. La nueva visualizacin de
fotos bicbica aumenta la calidad de fotos reducidas).

COLOR TOTAL muestra el documento a color, pero con el antialiasing desactivado.


94

La configuracin CONTORNO muestra solamente el contorno de las formas (se dibujan


como wire frames). Esto facilita la seleccin de objetos que se encuentran detrs de
otros objetos.

La configuracin de calidad no tiene efecto en la forma en que el documento exporta


o imprime, excepto en el caso de exportaciones de mapas de bits que utilizan la
configuracin de calidad actual.

La tecla de restriccin
La tecla "Ctrl" tiene una funcin especial en Web Designer. Restringe la accin de la
funcin actual de alguna manera. Por ejemplo, normalmente puedes girar un objeto a
cualquier ngulo. Pero en Web Designer, si pulsas la tecla "Ctrl" mientras giras un
objeto, la rotacin est restringida a una serie de ngulos predeterminados. Por
defecto, el objeto girar solamente en mltiplos de 45 grados y a cualquier rotacin
en que un borde recto importante del objeto quede vertical u horizontal.

La lnea negra que se encuentra a la


izquierda puede girarse a cualquier
ngulo dentro del crculo. A la derecha se
encuentra la misma lnea, pero al
presionar "Ctrl", solo puede rotarse hasta
las posiciones indicadas.
De forma similar, restringir un rectngulo crea un cuadrado perfecto y restringir una
elipse crea un crculo perfecto. Si sueltas la tecla "Ctrl", ya no estarn restringidos.

La funcin de restriccin de ngulo se define en OPCIONES -> GENERAL -> RESTRICCIN


DE NGULO (en la pgina 491).

www.magix.es
Manejo de documento 95

Galeras
MAGIX Web Designer 11 Premium usa galeras para suministrar acceso conveniente
a bibliotecas externas de contenido como plantillas, fuentes, colores, cliparts, atribu-
tos de lneas y mapas de bits/fotos. Esta seccin de la ayuda suministra informacin
general sobre caractersticas que son comunes a mltiples galeras. Las secciones
individuales describen caractersticas especficas a una galera en particular.

Por defecto, la GALERA DE PGINAS Y CAPAS est abierta en el modo Pginas (y muestra solo
pginas, no sus capas) y est fijada en la parte derecha de la ventana de Web Designer.

Pgina y capas
Diseos
Mapa de bits
Lneas
Rellenos
96

La GALERA DE PGINAS Y CAPAS te muestra y te permite manipular las pginas de tu


documento y las capas dentro de cada pgina.

Las GALERAS de DISEOS y RELLENOS te permiten escoger entre diferentes plantillas y


estilos suministrados con MAGIX Web Designer 11 Premium.

La GALERA DE MAPAS DE BITS te muestra los mapas de bits y fotos que ests
utilizando en todos los documentos abiertos.

Algunas galeras se describen en detalle ms adelante.

Ver una galera


Para visualizar una galera:

1. Haz clic o pasa el cursor sobre la pestaa vertical de la galera que se encuentra
a la derecha del espacio de trabajo (la barra de galeras). La galera se abrir
automticamente. Al quitar el cursor de la galera, esta se cerrar
automticamente.
2. Para mantener una galera abierta mientras trabajas, haz clic en el botn
OCULTAR AUTOMTICAMENTE que se encuentra en la esquina superior derecha.
El botn OCULTAR AUTOMTICAMENTE se transforma en un alfiler con la punta
hacia abajo para indicar que la galera est fijada al espacio de trabajo.
3. Para cerrar una galera fijada, consulta Cerrar una galera (en la pgina 103).
4. Si quieres que las galeras dejen de abrirse automticamente al hacer
MouseOver, desactiva la opcin BARRA DESPLEGABLE del men "Herramientas" >
"Galeras".

Galera no fijada: la galera se cierra al quitar el cursor de la misma.

Galera fijada: la galera permanece abierta aunque quites el cursor de la


misma y, adems, puedes moverla y fijarla (en la pgina 97) donde quieras.

Nota: por defecto, las GALERAS DE LNEAS y RELLENOS no muestran su ttulo hasta
que no se hayan abierto, sino sus iconos individuales. Web Designer siempre
muestra el ttulo de la ltima galera que has visto.

www.magix.es
Manejo de documento 97

Mover y fijar una galera


Puedes liberar cualquier galera de la barra de galeras, si deseas moverla a una
ubicacin ms prctica en el espacio de trabajo. Tambin puedes fijar la galera (o un
grupo de galeras, consulta Agrupar galeras) en la parte superior, inferior, derecha o
izquierda del espacio de trabajo.

Puedes mover una galera a cualquier lugar del espacio de trabajo

Para mover una galera:

1. Abre una galera y haz clic en el botn OCULTAR AUTOMTICAMENTE para fijar la
galera. El botn muestra un alfiler hacia abajo para indicar que la galera puede
moverse y fijarse en otro lugar.
2. Haz clic en la barra de ttulo de la galera y arrastrar para moverla. Puedes dejar
que la galera "flote libremente" por cualquier lugar del espacio de trabajo o
puedes fijarla en una nueva ubicacin.

Si mueves cualquiera de las galeras, las otras la acompaarn como si fuera un grupo.
Accede a una galera individual con un clic sobre su pestaa en la parte inferior del
grupo o haz clic y arrastra la pestaa de la galera alejndola del grupo.

Mapa de bits
Lnea
Relleno
98

Si haces clic y arrastras la barra de ttulo de una galera que puedes fijar, aparecern
flechas en el espacio de trabajo que te indicarn los lugares en donde puedes fijar la
galera.

Al arrastrar una galera, aparecern flechas de fijacin en la parte central, superior, inferior,
izquierda y derecha del espacio de trabajo. Arrastra la galera hasta una flecha para fijarla all.

Ejemplo de una galera que se ha fijado a la derecha del espacio de trabajo.

www.magix.es
Manejo de documento 99

Para fijar una galera:

1. Haz clic y arrastra la galera hasta la flecha que apunta a la ubicacin en donde
quieres colocar la galera. Por ejemplo, si quieres colocar la galera en la parte
superior de la pantalla, muvela hacia la flecha que seala hacia la parte superior
del espacio de trabajo.
2. Cuando el cursor llega a la flecha, un recuadro gris transparente indica la nueva
ubicacin de la galera.
3. Suelta el botn del ratn para fijar la galera. Ahora, cuando cierres u ocultes
automticamente la galera, la pestaa se mostrar en esta nueva ubicacin.
4. Pasa el cursor o haz clic sobre la pestaa para volver a abrir la galera.

Nota: para mover las galeras a su posicin por defecto, escoge BARRAS DE
CONTROL del men VENTANA , haz clic en GALERAS y finalmente en RESTAURAR .

Agrupacin de galeras
Puedes arreglar dos o ms galeras de forma que se encuentren cerca unas de otras.

1. Para posicionar una galera para que quede adyacente a una que has fijado
anteriormente, haz clic y arrastra la segunda galera hasta las cuatro flechas del
centro del espacio de trabajo.
2. Suelta cuando te encuentres sobre la flecha que indica en direccin a la primera
galera que has movido. La segunda galera se fija junto con la primera.

Tambin puedes agrupar galeras y mover todo el grupo a una nueva ubicacin si, por
ejemplo, ests trabajando principalmente con dos o tres galeras que quieres que se
encuentren cerca unas de otras y a las que deseas acceder fcilmente.
100

Ejemplo de un grupo de galeras con pestaas de galera en la parte inferior. Haz clic y arrastra
para agregar o quitar una galera del grupo.

Para agrupar galeras:

1. Desactiva el botn OCULTAR AUTOMTICAMENTE en una de las siguientes


galeras: MAPAS DE BITS, LNEAS , RELLENO, . La galera se agrupar
automticamente con las otras cinco galeras y se mostrarn como pestaas en
la parte inferior del grupo.
2. Para quitar una galera de un grupo, haz clic en su pestaa y arrstrala hacia
afuera.
3. Haz clic en una pestaa para abrir una galera del grupo.
4. Para agregar una galera a un grupo, haz clic y arrastra la galera hasta el grupo.
Aparecern cuatro flechas en el centro del grupo.
5. Arrastra y suelta la galera en el cuadrado del centro de estas flechas para que
Web Designer la agregue al grupo y su pestaa se agregue al final del grupo.
6. Cuando fijas un grupo de galeras, todas las galeras dentro del grupo tambin
estn fijadas. Al ocultar automticamente o cerrar un grupo de galeras, vers
todas las pestaas de las galeras del grupo en el borde del espacio de trabajo
ms cercano a la ltima ubicacin en donde se encontraban fijadas.

www.magix.es
Manejo de documento 101

Uso de las galeras


Para plegar o desplegar una seccin en una galera:

Haz clic sobre el icono PLEGAR/DESPLEGAR .


O haz doble clic sobre el ttulo de la seccin.
O haz clic derecho sobre una seccin para ver el men pop-up. Selecciona
PLEGAR/DESPLEGAR seccin. El men pop-up tambin tiene opciones para abrir la
seccin siguiente o la anterior.

La ilustracin muestra la galera desplegada. Otras galeras son similares.

Los botones de la parte superior dependen de la galera (p.ej. RELLENO y TRANSP son
opciones especficas de la GALERA DE MAPA DE BITS .) De todos modos, la mayora de
las galeras presenta estos botones:

APLICAR inserta el tem seleccionado de la galera. Haz clic sobre un tem para
seleccionarlo.

OPCIONES abre un men en donde puedes escoger:


102

BUSCAR : se describe ms adelante en la bsqueda de un nombre de tem.


ORDENAR : se describe ms adelante en el orden de los tems en una galera.
PROPIEDADES : permite controlar el tamao de los iconos y la cantidad de
informacin que se muestra en la galera.
Aadir (galeras de clipart, rellenos y fuentes): descrito a continuacin en aadir
tems en una galera.
ELIMINAR (galeras de clipart, rellenos y fuentes): descrito a continuacin en
eliminar secciones de una galera.

Seleccionar tems
Para seleccionar un tem:

Haz clic sobre un tem para seleccionarlo.


O haz clic sobre un tem, despus +clic sobre otro tem: todos los tems entre
los dos puntos se seleccionarn.
O Ctrl+clic para aadir ese tem a la seleccin.

Reordenar tems en la galera


En algunas galeras, "OPCIONES - > ORDENAR" abre un campo de dilogo. Puedes
ordenar por nombre y, dependiendo de la galera, por otros criterios. Los controles de
clave primaria controlan el orden inicial. Para algunos parmetros como tipo o
longitud de nombre, es posible que haya dos o ms archivos con el mismo tipo o
longitud de nombre. Estos archivos pueden ordenarse usando la clave secundaria.

Aadir a la galera
Es posible que quieras aadir tems extra para estas galeras. (slo es posible en las
galeras de DISEOS & RELLENOS ). Para esto:

1. Copia los archivos que quieres aadir a un nuevo directorio usando el explorador
de Windows.
- Para la GALERA DE CLIPARTS , estos archivos pueden ser cualquier tipo de la
amplia gama de archivos de vectores o mapas de bits.
- Para la GALERA DE RELLENOS puede ser cualquiera de los formatos de mapa
de bits compatibles con Web Designer (listados en importacin y
exportacin (en la pgina 464)).
2. En cada galera, pulsa el botn "DISEOS DE DISCO/RELLENOS" . Se abrir una
ventana de dilogo.
3. Usa este dilogo para seleccionar el directorio que quieres aadir.
4. Haz clic en "AADIR" . Esto crea una nueva seccin en la galera.

www.magix.es
Manejo de documento 103

Si despus quieres aadir ms tems a la carpeta:

1. Copia los archivos nuevos en la carpeta existente.


2. En la galera, pulsa el botn "DISEOS DE DISCO/RELLENOS" . Se abrir una ventana
de dilogo.
3. Usa este dilogo para seleccionar el directorio que quieres aadir.
4. Haz clic en "ACTUALIZAR" para actualizar la seccin en la galera.

Eliminar secciones de una galera


Para eliminar una seccin de una galera (vlido slo para las galeras de CLIPARTS y
RELLENOS ):

1. Haz clic sobre el ttulo de la seccin o secciones que quieres eliminar.


2. Haz clic en "ELIMINAR" .

Si posteriormente quieres volver a utilizar la seccin, aade la carpeta a la galera


(descrito anteriormente).

Cerrar una galera


Por defecto, el botn OCULTAR AUTOMTICAMENTE de las galeras est activado (es
decir, que el botn OCULTAR AUTOMTICAMENTE que se encuentra en la esquina
superior derecha no est fijado). De esta forma, la galera se cerrar automticamente
cuando alejes el cursor.

Sin embargo, si has desactivado el botn OCULTAR AUTOMTICAMENTE (galera


fijada), tendrs que cerrar la galera de forma manual.

Para cerrar una galera liberada, haz clic en el botn CERRAR que se encuentra en la
parte superior derecha de la galera. La galera se cerrar y su pestaa se mostrar en
la barra de galeras.

Para cerrar una galera fijada, haz clic en OCULTAR AUTOMTICAMENTE (alfiler) o
CERRAR en la parte superior derecha de la galera. La galera se cierra y su pestaa se
mostrar en el lugar del espacio de trabajo en donde la hayas fijado.

Para volver a abrir la galera, pasa el cursor sobre ella o haz clic sobre la pestaa.

Nota: para eliminar una galera completamente, selecciona GALERAS de men


HERRAMIENTAS y selecciona la galera que quieres eliminar.
104

Eliminar una galera del espacio de trabajo


Por defecto, cuando cierras una galera, Web Designer la regresa a la barra de galeras
para que puedas volver a abrirla acercando el cursor a su cono o pestaa. Sin
embargo, puedes configurar a Web Designer para que elimine cualquier galera del
espacio de trabajo si no la necesitas.

Para eliminar galeras del espacio de trabajo, realiza una de las siguientes opciones:

Escoge GALERAS del men HERRAMIENTAS y selecciona la galera que quieres


eliminar. La galera seleccionada desaparecer del espacio de trabajo. Si quieres
volver a ver la galera, ve a GALERAS en el men HERRAMIENTAS y escoge la
galera que quieres volver a ver.
Escoge BARRAS DE CONTROL del men VENTANA y ve hacia abajo en la lista de
barras de control disponibles para ver las GALERAS . Haz clic en el recuadro
GALERAS para ver la barra de herramientas de galeras. Haz clic en CERRAR . En la
barra de herramientas Galeras que aparecer en la parte superior del espacio de
trabajo, puedes activar una galera si haces clic en su barra de herramientas.

Deshacer y rehacer
Qu son las funciones deshacer y rehacer?
Todos cometemos errores o cambiamos de parecer. Web Designer facilita la
correccin de errores o de cambios no deseados. Todas las acciones que haces se
guardan en una "lista de deshacer". Esto te permite deshacer no solo la ltima
operacin, sino volver hacia atrs deshaciendo varias operaciones. Por lo tanto,
puedes experimentar libremente sabiendo que siempre puedes eliminar lo que no
quede bien.

La funcin deshacer
Deshacer cancela el efecto de la ltima operacin. Para deshacer una
operacin:

Haz clic sobre el botn DESHACER de la barra de control ESTNDAR.


O escoge Editar > Deshacer (la formulacin exacta te dice cul es el paso
deshacer, por ejemplo, deshacer escala).
O pulsa Ctrl+Z.
O pulsa la tecla de coma (en cualquier herramienta salvo la herramienta de
TEXTO ).

Puedes repetir la funcin deshacer para seguir retrocediendo por la secuencia de las
operaciones previas.

www.magix.es
Manejo de documento 105

La funcin rehacer
Rehacer cancela la funcin deshacer anterior. Para rehacer la ltima operacin:

Haz clic sobre el botn REHACER de la barra de control ESTNDAR.


O escoge Editar > Rehacer (la formulacin exacta te dice cul es el paso rehacer,
por ejemplo, rehacer escala).
O pulsa Ctrl+Y.
O pulsa la tecla de punto (en cualquier herramienta salvo la herramienta de
TEXTO ).

La funcin rehacer solo puede aplicarse inmediatamente despus de la funcin


deshacer. No puedes rehacer tras modificar el documento (por ejemplo, moviendo o
aadiendo un objeto).
106

Trabajar con objetos

La herramienta de seleccin
La HERRAMIENTA DE SELECCIN es la herramienta principal para seleccionar,
mover, girar y cambiar el tamao de los objetos. Generalmente se utiliza
ms que cualquier otra herramienta y es la herramienta central para
manipular documentos.

Dimensiones de seleccin
% de controles de tamao
Bloquear relacin de aspecto
Girar e inclinar
Voltear
Escalar anchos de lnea
Aplicar nombres

Para utilizar la HERRAMIENTA DE SELECCIN :

Haz clic sobre la HERRAMIENTA DE SELECCIN en la BARRA DE HERRAMIENTAS


PRINCIPAL .
O pulsa "Alt + S", "V" o "F2".

Cuando cambies a la HERRAMIENTA DE SELECCIN , si hay objetos seleccionados


dentro de un grupo u otro tipo de objeto compuesto, se seleccionar el objeto
principal (grupo) en su lugar.

Puesto que la herramienta de SELECCIN es la herramienta ms utilizada, existe un


shortcut adicional para permitirte cambiar a esta herramienta para realizar una
seleccin u otra operacin y volver rpidamente a la herramienta anterior. Si ests
utilizando otra herramienta puedes cambiar fcilmente a la herramienta de
SELECCIN :

Pulsa y libera Alt+S para cambiar a la herramienta de SELECCIN . Pulsa otra vez
para regresar a la herramienta anterior.

Seleccionar objetos
Para seleccionar un solo objeto haz clic en cualquier parte visible del objeto.

www.magix.es
Trabajar con objetos 107

Cambiar seleccin de objetos


Una vez que el objeto est seleccionado, puedes utilizar las siguientes teclas para
cambiar la seleccin:

Fin selecciona el objeto de atrs.


Inicio selecciona el objeto de adelante.
"Tab" selecciona el objeto siguiente hacia atrs.
+Tab selecciona el objeto siguiente hacia adelante.

Los objetos del frente y el fondo se describen en Trabajar con objetos (en la pgina
106).

Marco de seleccin
Para seleccionar varios objetos, pulsa y mantn pulsada la tecla del ratn. Al arrastrar
el ratn se dibuja un rectngulo de seleccin y todos los objetos dentro del rectngulo
quedarn seleccionados.

Algunos programas de dibujo llaman a este rectngulo "marco de seleccin".

Si hay algn objeto que no te permite dibujar un rectngulo porque el objeto se


mueve, pulsa "" mientras arrastras el rectngulo de seleccin.

Ampliar seleccin
Para seleccionar objetos adicionales:

+clic sobre ellos.


O +arrastrar el ratn. Esto dibuja un rectngulo de seleccin y aade los
objetos dentro del rectngulo a la seleccin.

Seleccionar bajo
Pulsa Alt para seleccionar objetos que se encuentran debajo de otros objetos. Con
Alt+clic puedes pasar por varios objetos superpuestos.

Seleccin interna
Puedes seleccionar un objeto que est dentro de un grupo u otro objeto contenedor
pulsando "Ctrl" mientras haces clic sobre el objeto. Es lo que se llama seleccin
interna. El objeto sobre el que haces clic ser siempre seleccionado, incluso si est
dentro de varios niveles de grupos anidados. Cuando se tiene un nido de grupos tan
profundo, en ocasiones se quiere seleccionar solo uno de los grupos anidados (un
grupo que est dentro de otro). Podrs hacerlo fcilmente si mantienes presionadas
las teclas "Alt" y "Ctrl" mientras haces clic. El primer clic de tal tipo seleccionar el
grupo del nivel superior (tal como lo hace un clic normal). Haz clic de nuevo y se
108

seleccionar el siguiente grupo segn su orden en el nido. Contina haciendo clic para
avanzar en la estructura del grupo hasta que se seleccione el grupo que deseas.

Ten en cuenta que algunas operaciones no se pueden realizar si hay un objeto interno
seleccionado. Por ejemplo, el marco de seleccin y la copia con clic derecho no
funcionan para la seleccin interna.

Mover objetos seleccionados debajo o dentro


Si necesitas mover un objeto seleccionado que se encuentra debajo de otros o dentro
de un grupo, no podrs simplemente arrastrarlo, porque se seleccionar y arrastrar
otro objeto. Para evitar esto, pulsa "Ctrl + Alt" y comienza a arrastrar. Esto arrastrar
siempre el objeto seleccionado. Puedes soltar las teclas una vez que hayas
comenzado a arrastrar.

O puedes utilizar las teclas de flechas de tu teclado para desplazar el objeto.

Seleccin y capas
No puedes seleccionar objetos que se encuentran en capas bloqueadas o invisibles.

Consulta "Galera de pginas y capas (en la pgina 419)" para obtener ms detalles
sobre capas.

Seleccionar todos los objetos


Para seleccionar todos los objetos:

Escoge Edicin > Seleccionar todo.


O pulsa Ctrl+A.

Deseleccionar un objeto
Para deseleccionar todos los objetos:

Haz clic en cualquier lugar sin usar del documento.


O escoge Edicin > Borrar seleccin.
O pulsa Esc.

Para deseleccionar un objeto entre muchos:

+clic sobre el objeto. Esto deselecciona el objeto. Los otros objetos


permanecen seleccionados.

www.magix.es
Trabajar con objetos 109

Marcadores de seleccin
Cada objeto seleccionado muestra un marcador de seleccin para sealar 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 tambin
describe lo que est seleccionado.

Controles deslizantes de lmites de seleccin


Los controles deslizantes de lmites de seleccin te permiten cambiar el tamao y
extender los objetos seleccionados. Para leer ms informacin sobre este tema ve a
Extender o reducir objetos. Varios clics sucesivos sobre un objeto cambia entre
mostrar los controles de lmite de seleccin y rotacin.

Tab
Si hay un objeto seleccionado, pulsar Tab y +Tab cambiar la seleccin al objeto
anterior y siguiente en el documento.

Mover objetos
Para deslizar un objeto sobre la pgina

1. Escoge la herramienta de SELECCIN .


2. Arrastra el objeto hasta la posicin deseada. Pulsa Ctrl para limitar la direccin
de movimiento a uno de los ngulos de restriccin.
110

Puedes definir los ngulos de restriccin. Consulta el captulo Personalizacin de


Web Designer.

Pulsa Ctrl+Alt y podrs arrastrar el objeto seleccionado aunque el cursor no se


encuentre encima de l. Esto es til cuando el objeto seleccionado se encuentra
oculto tras otro objeto o cuando es parte de un grupo. Suelta Ctrl+Alt despus de
comenzar a arrastrar el objeto, salvo que quieras restringir el movimiento.

Tambin puedes mover objetos usando las teclas de flecha. Esto se describe en la
prxima pgina.

Soltar una copia


Durante un movimiento (y mientras pulsas la tecla izquierda del ratn) haz clic
derecho o pulsa + del teclado numrico para soltar una copia del objeto. El objeto
original no se mueve. Puedes hacer esto todas las veces que quieras para crear una
serie de objetos duplicados.

O, de la misma forma, pulsa la tecla derecha del ratn y arrastra. Esto arrastrar
inmediatamente una copia del objeto. Haz clic izquierdo para dejar una copia en la
posicin actual del ratn.

Rellenos
Generalmente, si mueves un objeto, su relleno tambin se mover:

Movimiento normal de izquierda a derecha de un objeto con relleno lineal.

Esto tambin es aplicable al girar, doblar, extender o cambiar el tamao de objetos.

Web Designer tambin puede mover el objeto pero no el origen del relleno. Para
hacer esto, pulsa la tecla - en el teclado numrico durante el movimiento.

El mismo movimiento pero pulsando la tecla - (menos) durante el arrastre.

www.magix.es
Trabajar con objetos 111

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.)

El desplazamiento no se ve afectado por el ajuste magntico ni de cuadrcula. (Los


ajustes se describen ms adelante).

Modificadores de desplazamiento
Para modificar la distancia de desplazamiento, utiliza estas combinaciones de teclas
mientras usas las flechas:

Ctrl 5 veces la distancia normal


10 veces la distancia normal
Ctrl + l/5 de la distancia normal
Alt 1 pxel
Alt + 10 pxeles

Puedes cambiar la distancia normal de desplazamiento en la pestaa GENERAL de


Herramientas > Opciones. (Consulta el captulo Personalizacin de Web Designer (en
la pgina 491).

El desplazamiento funciona en la mayora de las herramientas.

Cortar, copiar y pegar


Estas funciones te permiten mover o copiar un objeto en el mismo documento o entre
diferentes documentos. Debes hacer lo siguiente:

1. Selecciona el objeto.
2. Para eliminar el objeto, elige " EDITAR" > "CORTAR " (o "Ctrl + X"). Para copiar el
objeto pero no eliminarlo, escoge "EDICIN" > "COPIAR" (o "Ctrl+C"). Las dos
opciones colocan el objeto (o una copia del objeto) en el portapapeles.
3. Escoge "EDITAR" > "PEGAR ", "Ctrl + V" o "INSERTAR ". Esto pega el contenido del
portapapeles en el documento.

Ten en cuenta que si los objetos que copias se encuentran en la misma capa,
entonces puedes pegar esos objetos en cualquier capa, si conviertes primero esa capa
en la capa actual y luego escoges "EDITAR" > "PEGAR" > "PEGAR EN CAPA" o "PEGAR EN
EL LUGAR 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.

Esto te permite copiar los datos en capas dentro de un documento o a un documento


diferente. Cualquier capa que falte en el documento de destino se crea
automticamente con esta operacin. Por ejemplo, si copias un botn de MouseOver,
112

que tenga un objeto en la capa MouseOff y otro objeto en la capa MouseOver, a otro
documento, las capas MouseOff y Mouseover se crearn si todava no existen y se
copiarn los objetos de los botones sobre ellas.

"Ctrl + Shift + V" o "EDITAR" > "PEGAR EN LUGAR" pega el contenido del portapapeles
en la misma posicin X/Y desde la que fueron cortadas o copiadas, o en la misma
posicin en relacin al final de la pgina en el caso de objetos del pie de pgina. Esto
solo se aplica a objetos cortados o copiados 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.

Si se provee una serie de formatos en el portapapeles, MAGIX Web Designer 11


Premium te mostrar un dilogo titulado PEGADO ESPECIAL para que puedas elegir el
formato en el que deseas pegar el objeto. Al pegar en un texto, puede que tengas la
opcin de pegar el texto sin formato o en formato Rich Text (formato de texto
enriquecido).

Adems, es posible que veas las siguientes opciones de pegado, segn el contenido
del portapapeles:

Pegar texto sin formato


Pega el texto del portapapeles en el documento sin formato.

Pegar formato/atributos
Conserva el formato (p. ej. el tipo y tamao de fuente) o los atributos de estilo (p. ej.,
el color de la lnea y del relleno) del objeto que se pega.

Pegar posicin
Esta opcin aplica la posicin de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, que se mueve a exactamente la misma posicin que el
objeto copiado. Si se han copiado mltiples elementos en el portapapeles, Web
Designer los trata como a un grupo y mueve al objeto actual seleccionado a la
posicin del grupo copiado como un todo. El objeto seleccionado actualmente se
pega o se mueve a la posicin central del objeto copiado o al grupo de objetos.

Pegar tamao
Esta opcin aplica el tamao de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, cuyo tamao se reajusta (en torno a su centro) al tamao
exacto del objeto copiado.

Si al pegar el tamao tienes muchos elementos seleccionados, no se redimensiona el


tamao de la seleccin como un todo, sino que cada uno de esos objetos se convierte
al tamao del objeto copiado. Por ejemplo, si copias una foto de 200x200 pxeles,
www.magix.es
Trabajar con objetos 113

luego seleccionas otras 10 fotos y seleccionas "Pegar tamao", las 10 fotos se


convierten a 200x200 pxeles. Este es un modo rpido de convertir un montn de
objetos a un tamao determinado.

Pegar reemplazo de seleccin


Esto es similar a PEGAR POSICIN , solo que el objeto copiado en el portapapeles
reemplaza al objeto seleccionado actualmente y mantiene la posicin del elemento
borrado. El objeto copiado se pega en la posicin central del objeto borrado.

Pegar en la capa actual


Igual que PEGAR EN LUGAR , pero el objeto se pegar solamente en la capa actual. Esto
es til si quieres ver u ocultar el objeto pegado cuando se muestran capas encima o
debajo.

Pegar en el lugar de la capa actual


Igual a PEGAR EN LA CAPA ACTUAL , pero el objeto se pegar en la capa actual en la
misma posicin desde la que lo has copiado.

Eliminar objetos del documento


Primero selecciona los objetos que quieres eliminar. Puedes cortar los objetos al
portapapeles o eliminarlos.

Cortar objetos
Selecciona "Edicin > Cortar", o pulsa "Ctrl + X". Los contenidos del portapapeles
sern sobrescritos y podrs pegar el objeto o los objetos borrados en el lugar deseado.

Eliminar objetos
Escoge "Edicin > Eliminar", pulsa "Supr" o haz clic sobre el botn ELIMINAR de
la barra de control ESTNDAR.

En este caso los objetos eliminados no se colocarn en el portapapeles. Si eliminas


accidentalmente un objeto, puedes recuperarlo con deshacer.

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.

Tambin puedes duplicar un objeto mientras lo mueves, giras, doblas o cambias su


tamao. Mientras lo arrastras (y mientras pulsas la tecla izquierda del ratn) haz clic
derecho o pulsa + del teclado numrico para soltar una copia del objeto. El objeto
114

original no se mueve. Puedes hacer esto todas las veces que quieras para crear una
serie de objetos duplicados.

Una forma sencilla de crear una o ms copias de un objeto alineado horizontal o


verticalmente, es arrastrar el objeto, pulsar Ctrl para limitar el movimiento y despus
hacer clic derecho (o pulsar + del teclado numrico) para cada copia.

Para sustituir rpidamente una lnea de objetos, dibuja uno, despus arrstralo mientras pulsas
la tecla Ctrl y haz clic derecho para cada copia que quieras crear.

Duplicar
Escoge Edicin > Duplicar o pulsa Ctrl+D. La copia aparecer un poco hacia la
derecha y abajo del objeto original.

La distancia de duplicacin puede cambiarse. Lee el captulo Personalizacin de


Web Designer (en la pgina 492).

Clonar
Escoge Edicin > Clonar o pulsa Ctrl+K. Esto coloca una copia exactamente arriba del
original. La clonacin es una forma fcil de crear formas concntricas.

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 lnea negra de 1 pt.

www.magix.es
Trabajar con objetos 115

Mover objetos hacia adelante o hacia atrs


Las ilustraciones complejas tienen objetos apilados uno sobre otros, igual que este
blanco.

El blanco de la izquierda est construido a partir de tres crculos apilados uno sobre otro.

Para asegurar que los objetos se superpongan en el orden correcto, muchas veces
necesitas cambiar el orden desde adelante hacia atrs. (El objeto de adelante siempre
cubre a los de abajo y los otros objetos siempre cubren a los que estn ms abajo.
Cada nuevo objeto que creas se coloca arriba de los anteriores.)

El men Arreglo te ofrece las cuatro opciones siguientes:

TRAER AL FRENTE (Ctrl + F): esto convierte al objeto seleccionado en el objeto de


ms arriba. Por lo tanto, ocultar todos los objetos que cubra.
MOVER ADELANTE (Ctrl + + F): esto mueve el objeto un nivel hacia el frente,
como si estuviera subiendo un peldao de una escalera.
MOVER ATRS (Ctrl + + B): esto mueve el objeto un nivel hacia atrs.
LLEVAR ATRS (Ctrl + B): esto coloca el objeto atrs de todo.

Estas opciones mueven los objetos hacia adelante y hacia atrs en la misma capa.
MOVER A LA CAPA AL FRENTE y MOVER A LA CAPA DE ATRS te permiten mover los
objetos entre las capas visibles. (Las capas invisibles no se tienen en cuenta al mover
objetos).

Ms informacin sobre capas en el captulo Capas (en la pgina 419)

Girar utilizando el ratn


Para ver los controles deslizantes de rotacin (en lugar de los de modificacin de
tamao) en una forma seleccionada en la herramienta de seleccin, haz clic de nuevo
sobre la forma seleccionada.

Arrastra una flecha de una esquina. Mientras arrastras, el objeto gira alrededor del
centro de transformacin. La barra de informacin muestra el ngulo de rotacin
actual.
116

" + arrastrar" para hacer girar un objeto alrededor de su centro (el centro de
transformacin ser ignorado).

Para realizar una rotacin limitada, pulsa "Ctrl" mientras rotas. Esto significa que el
objeto rotar solo a una seleccin limitada de ngulos Rotar a mltiplos del valor del
ngulo de restriccin, que por defecto es de 45. Pero adems, incluir ngulos a los
cuales est alineado cualquier borde recto significativo del objeto vertical u
horizontalmente. Esto hace ms fcil, por ejemplo, rotar un rectngulo que ha sido
girado ligeramente, de manera que el rectngulo quede derecho de nuevo (alineado
con la pantalla). O hacer cualquier lnea recta de una forma tanto vertical como
horizontal. Estos bordes tienen que ser al menos un 25% del ancho o alto de la forma
para considerarse significativos durante una rotacin restringida.

Puedes definir los ngulos de restriccin. Consulta el captulo "Personalizacin de


Web Designer (en la pgina 491)".

Para crear una copia mientras realizas un giro, pulsa la tecla "+" del teclado numrico
mientras giras o haz clic con la tecla derecha del ratn.

Girar objetos
Esta opcin es parte de la herramienta de SELECCIN .

Si el modo de rotacin est activado, el centro de transformacin (alrededor


del cual el objeto gira) aparece inicialmente en el centro del objeto, tal como
se ve en este pequeo blanco.

Haz otro clic sobre el objeto para poner la herramienta de seleccin en el modo de
rotacin.

Arrastra el centro de transformacin al lugar que desees.

Atencin: si se mueve el centro de rotacin, se mantendr en esta posicin para


cualquier objeto seleccionado hasta que todos los objetos ests deseleccionados; as
el punto volver al centro de cualquier objeto seleccionado.

Rotacin con ngulos exactos (utilizando la barra de


informacin)
Introduce un ngulo en el campo de rotacin 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.

Haz clic sobre las flechas a la derecha para desplazar el


ngulo de rotacin.

www.magix.es
Trabajar con objetos 117

Girar objetos en el modo de cambio de tamao

Tambin es posible girar y doblar un objeto si no te encuentras en el modo de


rotacin. Usando el modo de cambio de tamao, mueve el cursor hasta las reas
pequeas cerca de los controles deslizantes de lmites de seleccin, tal como se
muestra arriba. El cursor cambiar a un icono de rotacin para indicar que puedes
girar o doblar el objeto arrastrando el ratn.

Cambio del tamao de objetos (escalar)


Esta opcin es parte de la herramienta de SELECCIN .

Botn Escalar anchos de lnea


Con el botn ESCALAR ANCHOS DE LNEA , al cambiar el tamao
de un objeto, tambin se cambiar el ancho de sus lneas. Si
desactivas este botn, el ancho de las lneas no se modificar.

Puedes activar este botn durante el arrastre y pulsando la tecla / del teclado
numrico.

Este control tambin determina si los valores X, Y, ancho y alto de la barra de


informacin incluyen el ancho del contorno o pincel. Muchas veces es til ver y
controlar el tamao exacto de la forma excluyendo el ancho de la lnea.

Botn Bloquear relacin de aspecto


Con el botn BLOQUEAR RELACIN DE ASPECTO , la relacin de
aspecto ancho:altura permanece constante cuando cambias el
tamao del objeto.
118

En otras palabras, la forma mantiene las mismas proporciones que el original. Se


recomienda dejar este botn activado la mayora del tiempo para garantizar que los
objetos no se deformen al cambiar su tamao.

Si este botn est desactivado, puedes cambiar la relacin de aspecto al cambiar el


tamao del objeto. Es decir, que puedes extender el objeto de una forma u otra
arrastrando un control deslizante de esquina o introduciendo un nuevo tamao.

Adaptar el tamao de las fotos (solo documentos web)


Cuando arrastres los controles deslizantes de una foto en un documento web, la
imagen no se agrandar o har ms pequea (lo que no suele ser til y hace que la
foto se deforme) sino que se cortar. Si quieres que la imagen se deforme, mantn la
tecla Alt pulsada mientras efectas el desplazamiento.

Cambiar tamao utilizando el ratn


La herramienta de
SELECCIN debe
encontrarse en el modo de
cambio de tamao (los
controles deslizantes de
lmite son cuadrados). De
ser necesario, haz clic sobre
el objeto para cambiar al
modo de cambio de
tamao.

Arrastra uno de los controles deslizantes de esquina. El objeto cambiar de tamao a


medida que muevas el cursor diagonalmente. La barra de informacin muestra el
cambio de tamao actual. El tamao del objeto se encontrar dentro de la escala
delimitada por el control deslizante que hayas arrastrado y el opuesto. Si quieres
utilizar otro punto fijo del objeto para realizar la rotacin, mueve el centro de
transformacin al punto deseado y usa los botones de la barra de informacin para
cambiar el tamao.

Pulsa "" mientras arrastras para cambiar el tamao del objeto alrededor de su
centro. Esto funciona independientemente de la posicin del centro de
transformacin. "Ctrl + arrastra" aumenta el tamao del objeto en mltiplos de su
tamao original (x2, x3 y sucesivamente).

Para crear una copia mientras cambias el tamao (dejando el original en su lugar),
haz clic derecho o pulsa la tecla "+" del teclado numrico.

Si arrastras los controles deslizantes laterales, el objeto se extender o reducir. Esta


operacin se explica detalladamente en la seccin Extender o reducir objetos.

www.magix.es
Trabajar con objetos 119

Cambiar tamao utilizando la barra de informacin

Introduce el valor en el campo CAMBIAR TAMAO DE TEXTO y pulsa "".


Los valores menores que 100% reducen el objeto. 50 reduce el tamao del
objeto a la mitad.
Los valores mayores que 100% aumentan el tamao del objeto. 200
duplica el tamao del objeto.

Si el botn BLOQUEAR ASPECTO est activado, puedes introducir el valor en


cualquier campo de texto para cambiar el tamao del objeto de acuerdo al
porcentaje deseado. Si este botn est desactivado, puedes introducir valores
individuales para el ancho y el alto.

Como alternativa, escribe el tamao deseado del objeto en los campos de texto
AL o AN .

Si el botn BLOQUEAR RELACIN DE ASPECTO est activado, esto cambia el tamao del
objeto pero mantiene su relacin de aspecto. Puedes introducir cualquier tamao en
cualquier unidad como, por ejemplo, 1 cm.

Si cambias el tamao utilizando los botones de la barra de informacin (o recuadros


de nmeros), siempre se realizar el cambio de tamao alrededor del centro de
transformacin. Puedes posicionar el centro en cualquier lugar del objeto, tal como se
ha descrito en la seccin "Girar objetos".

Redimensionar grupos
Si redimensionas un grupo usando sus controles deslizantes laterales, se intentar
conseguir un cambio de tamao de forma inteligente ms que simplemente
concentrar los miembros del grupo. Esto es til generalmente cuando se intenta hacer
una variante ms estrecha adecuada para mviles de una pgina web ms ancha:
necesitas hacer que objetos anchos como los encabezados y los pies de pginas se
ajusten a un ancho de pgina ms pequeo.

Tomemos como ejemplo este grupo de pie de pgina:


120

El resultado que se obtiene tendra este aspecto:

El texto conserva el mismo tamao y las esquinas redondeadas se mantienen.

Este efecto funciona mejor con unos grupos que con otros dependiendo del diseo y
complejidad del grupo. Si simplemente prefieres concentrar el resultado de forma que
se reduzca el tamao de cada miembro del grupo, tan solo mantn pulsada la tecla
Alt mientras arrastras el cursor.

Como puedes ver, se ha reducido el texto y las esquinas ya no son redondeadas. Esto
puede ser til para ciertos grupos, por lo general los grficos que no incluyen textos o
esquinas redondeadas.

Voltear objetos
Esta opcin es parte de la herramienta de SELECCIN . Un clic sobre los
botones para VOLTEAR da vuelta el objeto vertical u horizontalmente a
partir del centro de transformacin.

El tamao y la relacin de aspecto no cambian, el objeto simplemente se voltea.

Extender o reducir objetos


Esto es similar a cambiar el tamao de los objetos, salvo que el objeto cambia de
tamao en una sola direccin. La extensin o reduccin del objeto son bsicamente la
misma accin, pero en sentido contrario.

Extender o reducir objetos utilizando el ratn


La herramienta de SELECCIN debe encontrarse en el modo de cambio de tamao.
(Los controles deslizantes de seleccin son cuadrados.) De ser necesario, haz clic en
el objeto para activar el modo de cambio de tamao.

Utiliza los controles deslizantes superiores, inferiores y laterales, en lugar de los


controles deslizantes de esquina para extender o reducir una forma slo en una
dimensin. Ten en cuenta que slo se muestran estos controles deslizantes en los

www.magix.es
Trabajar con objetos 121

rectngulos que no tienen una foto en su interior porque extender otros objetos en
una sola dimensin rara vez produce resultados correctos (las fotos se distorsionan).

Arrastra uno de los controles


deslizantes laterales. El objeto
cambiar de tamao en la direccin
de arrastre. La barra de informacin
muestra el cambio de tamao
actual.

El botn BLOQUEAR RELACIN DE


ASPECTO se ignora.

Haz clic derecho o pulsa "+" del teclado numrico mientras arrastras para extender o
reducir una copia el objeto (dejando el original en su lugar).

Extender o reducir objetos utilizando la barra de informacin


El BOTN BLOQUEAR ASPECTO debe estar desactivado (si est activado, cambiars el
tamao del objeto en vez de extenderlo o reducirlo).

Introduce el valor en el campo de texto del ancho o alto (segn corresponda) y pulsa
"". Tambin 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.

Si est activada la opcin BLOQUEAR ASPECTO , el objeto no se modificar.

Inclinar objetos
Esta opcin es parte de la herramienta de SELECCIN .

A la izquierda se encuentra el objeto original; a la


derecha el objeto inclinado horizontalmente.

Inclinar utilizando el ratn


Cambia la herramienta de SELECCIN al modo de rotacin/doblado haciendo clic
sobre el objeto. (Los controles deslizantes de seleccin tienen forma de flecha).

Arrastra una de las flechas laterales, superiores o inferiores para inclinar el objeto. Ten
en cuenta que slo se muestran estos controles deslizantes en los rectngulos que no
tienen una foto en su interior porque inclinar otros objetos rara vez produce
resultados correctos (las fotos se distorsionan).
122

A medida que arrastras, el objeto se inclinar en la direccin


del movimiento (vertical u horizontal).

La barra de informacin muestra el ngulo de


inclinacin actual.

+ arrastra para inclinar el objeto alrededor del centro. Pulsa "Ctrl" para limitar la
direccin de inclinacin a uno de los ngulos de restriccin. Para crear una copia
mientras arrastras, haz clic derecho o pulsa la tecla "+" del teclado numrico (dejando
el original adonde estaba antes). O haz clic derecho con el ratn para crear copias
instantneas; si quieres copias adicionales haz clic izquierdo.

Tambin puedes inclinar el objeto con la herramienta de seleccin en el modo de


cambio de tamao, utilizando las reas de inclinacin. Para ms informacin ve a la
seccin Girar objetos en el modo de cambio de tamao (en la pgina 117).

Inclinar utilizando la barra de informacin


Para inclinar horizontalmente introduce un ngulo en el
campo de inclinacin y pulsa "".

La herramienta de moldes
La herramienta de MOLDE sirve para distorsionar las imgenes. Se utiliza tanto
para crear perspectivas (es decir, girar en tres dimensiones) o distorsiones a
partir de envolturas.

Barra de informacin de la herramienta de moldes

Malla
Eliminar molde
Separar molde
Girar molde
Copiar molde
Envolturas
Pegar molde de envoltura
Perspectiva
Pegar molde de perspectiva

www.magix.es
Trabajar con objetos 123

La barra de informacin contiene dos juegos predeterminados de formas de molde.


Simplemente haz clic sobre un botn para aplicar el molde predeterminado. El botn
de la izquierda de cada grupo es el molde por defecto "sin distorsin" que puedes
editar manualmente despus de aplicarlo.

Perspectivas
La herramienta de MOLDE te permite aplicar perspectiva a
las formas para darles un sentido de profundidad.

Puedes aplicar perspectivas a todos los tipos de objetos,


incluyendo texto y mapas de bits. Ten en cuenta que los
mapas de bits pierden la perspectiva si despus aplicas
una transicin o los conviertes en formas editables.

1. Selecciona el o los objetos.


2. Selecciona la herramienta de MOLD
(shortcut + F6).
3. Escoge una de las opciones de perspectiva:

El botn de la derecha (pegar perspectiva) se


describe ms adelante.

Web Designer dibuja un rectngulo alrededor del objeto o seleccin. Puedes arrastrar
los controles deslizantes de cada esquina del rectngulo para crear el efecto de
perspectiva.

Puedes girar, cambiar de tamao e inclinar el objeto con perspectiva utilizando la


herramienta de SELECCIN .

Es posible que quieras mover los controles deslizantes sin volver a dibujar el objeto
con perspectiva (esto acelera el redibujo de la pantalla).

Para realizar esto, selecciona el botn SEPARAR MOLDE . Para readaptar el


objeto, desactiva el botn.

Usar puntos de fuga


A medida que reduces el tamao de los lados del molde de perspectiva, vers un
"punto de fuga" de destino. Esto es similar a los puntos de fuga en los dibujos
convencionales de perspectivas.

Puedes utilizar puntos de fuga para obtener una perspectiva consistente para varios
objetos.
124

Todos los objetos comparten un punto de fuga comn en la cruz pequea.

La malla de perspectiva
Este botn pinta una serie de puntos en una cuadrcula que te permite una
vista previa del grado de distorsin en perspectiva de un objeto.

Utilizar moldes
Es posible que quieras aplicar la misma perspectiva a varios objetos. Para lograr esto,
debes crear una forma de molde, copiarla en el portapapeles y despus utilizarla para
otros objetos. Una forma de molde en perspectiva debe tener cuatro lados rectos.

Esta es una forma de Estas no son aceptables. El objeto de la izquierda tiene


molde aceptable. demasiados lados (deben ser cuatro). El objeto de la derecha tiene
lados curvos (deben ser rectos).

Eliminar una perspectiva


Haz clic sobre ELIMINAR para quitar la perspectiva.

Si el objeto seleccionado tiene ms de una perspectiva o envoltura, slo se eliminar


la que se ha aplicado ms recientemente.

Girar el objeto dentro del molde


Muchas veces vers que el molde es la forma correcta, pero el objeto debe
girarse. Puedes girar el objeto con un clic sobre el botn girar contenido.

Envolturas
La herramienta de moldes te permite envolver formas de diferentes maneras.
El efecto es similar a una hoja de hule o globo que puedes extender en
cualquier direccin.

Puedes envolver todo tipo de objetos excepto los mapas de bits.

www.magix.es
Trabajar con objetos 125

Ejemplo de texto con envoltura

La aplicacin de una envoltura es similar a la aplicacin de una perspectiva:

1. Selecciona el o los objetos.


2. Selecciona la herramienta de MOLD
(shortcut + F6).
3. Escoge una de las opciones de envoltura:

El botn de la derecha es similar al botn pegar perspectiva que se describe ms


adelante.

En principio, el botn de la izquierda no modifica el objeto. Los otros botones


modifican inmediatamente el objeto.

Para editar el molde despus de aplicarlo:

1. Arrastra cualquiera de los controles deslizantes de esquina.


2. O haz clic en un control deslizante de la esquina y arrastra los controles
deslizantes de curva.

El ejemplo de arriba muestra los 4 controles deslizantes de curva de las esquinas que
se han arrastrado hacia afuera para doblar el contenido del molde.

Tambin puedes girar, cambiar el tamao e inclinar el objeto con envoltura utilizando
la herramienta de SELECCIN .

La malla de moldes
El botn de malla muestra una serie de puntos que te permite ver
previamente la distorsin que la envoltura dar al objeto.

Moldes de envoltura
Puedes crear un molde de envoltura a partir de cualquier forma con cuatro lados, que
puedes distorsionar a tu gusto y despus utilizar como molde de envoltura con un clic
sobre PEGAR ENVOLTURA de la BARRA DE INFORMACIN de la herramienta de moldes.
126

Editar formas de molde


Puedes editar la forma de los moldes de sobres de cartas o en perspectiva con la
herramienta de edicin de formas (o con los controles deslizantes de edicin con la
herramienta de seleccin, de ser mostrada). Segn el tipo de molde, hay algunas
restricciones:

No puedes aadir controles deslizantes a un molde de envoltura o de


perspectiva, porque tiene que permanecer como una forma con cuatro lados
No puedes cambiar una lnea recta por una curva en un molde de perspectiva.

Ajuste
El ajuste facilita el posicionamiento de esquinas o puntos especficos de objetos en
lugares precisos. Puede utilizarse para alinear esquinas a un punto o lnea especfico o
para espaciar objetos en intervalos regulares utilizando la cuadrcula.

MAGIX Web Designer 11 Premium ofrece tres tipos de ajuste:

Ajustar a cuadrcula
Ajuste magntico
Ajustar a lneas gua u objetos gua

Ajustar a cuadrcula es muy til para espaciar los objetos en intervalos precisos o
cambiar el tamao en mltiplos exactos de un valor determinado. Las lneas gua se
utilizan para alinear esquinas (aunque usar objetos guas es ms poderoso) y,
finalmente, el ajuste magntico es una forma general de posicionar lneas, puntos o
esquinas arriba de otras lneas puntos o esquinas de objetos cercanos.

Ajustar a cuadrcula
Si se ha seleccionado AJUSTAR A CUADRCULA, los puntos de cuadrcula funcionan
como imanes. Haz clic derecho en el portapapeles y escoge "AJUSTAR A " > "AJUSTAR
A CUADRCULA" o utiliza la opcin del men "VENTANA" > "AJUSTAR A CUADRCULA" ,
(o pulsa "." (separador decimal) del teclado numrico). Puedes controlar el espaciado
de la cuadrcula en el dilogo de opciones (haz clic derecho y escoge OPCIONES DE
PGINA o utiliza la funcin "HERRAMIENTAS " > "OPCIONES ") en la pestaa de
Cuadrcula y Reglas. Por defecto, las plantillas de documento web tienen el ajuste a la
cuadrcula activado con un solo pxel, por lo que, en general, todos los objetos y
posiciones son pxeles enteros.

Al arrastrar objetos, los bordes se ajustarn a los puntos de cuadrcula. Si el tamao


del objeto es tal, que ambas esquinas opuestas no pueden ajustarse, la esquina que se
ajustar depende de la direccin en la que se est arrastrando el objeto.

www.magix.es
Trabajar con objetos 127

Este ejemplo muestra una cuadrcula con 5 subdivisiones entre las divisiones mayores. La forma
tiene un contorno gris muy ancho. Como el objeto se arrastr hacia abajo a la izquierda, los
bordes inferiores izquierdos se han ajustado al punto de cuadrcula ms cercano.

Nota: el espaciado de cuadrcula por defecto es 50 pxeles para las lneas principales
con 50 subdivisiones. Esto significa que la cuadrcula tiene un espaciado de un pxel
de pantalla y puede parecer que no se estuviera trabajando a un nivel normal de
100%. Si amplas la imagen a 500%, vers que se ajusta de forma correcta.

Como alternativa, cambia los valores de cuadrcula a, por ejemplo, 10 subdivisiones, lo


que significa que los puntos de cuadrcula estn en lmites de 5 pxeles.

Ajuste y ancho de lnea


El control ESCALAR ANCHOS DE LNEA de la barra de
informacin de la HERRAMIENTA DE SELECCIN afecta a
cualquier tipo de ajuste que se est aplicando a los
bordes de los objetos, incluyendo sus contornos.

El ejemplo muestra una forma con un contorno gris muy grueso. Tambin muestra
una lnea negra delgada, el contorno de la forma en s mismo (puedes ver que el
contorno grueso est dibujado de forma igual a cada lado del centro de la lnea, por lo
que se encuentra parcialmente dentro de la forma y parcialmente fuera).

Si la opcin escalar anchos de lnea est activada, el ancho del contorno es importante
y "ajustar a la cuadrcula" ajustar los bordes de los objetos, incluyendo los contornos,
a las cuadrculas. Ajustar a objetos te permitir realizar el ajuste respecto de los
bordes o las lneas centrales de los contornos. Si los contornos, tal como aparecen en
la pantalla son pequeos y hay poca diferencia entre estas dos posiciones de ajuste,
128

entonces tendr prioridad el ajuste a los lmites. Por lo tanto, ampla la vista si quieres
ajustar a los centros de los contornos en este caso.

Si la opcin escalar anchos de lnea est desactivada, "ajustar a la cuadrcula" y


"ajustar a objetos" realizarn el ajuste a las lneas centrales de los objetos e ignorarn
los anchos del contorno.

Como el ajuste prioriza la opcin escalar anchos de lnea, los lmites utilizados para el
ajuste son siempre los mismos lmites que se indican en la barra de informacin de la
HERRAMIENTA DE SELECCIN .

Ajuste magntico de objeto (ajustar a objetos)


Con el ajuste magntico a objetos es ms fcil posicionar objetos de forma precisa
respecto a otros o al centro o bordes de la pgina. Por ejemplo, si quieres que varias
lneas comiencen precisamente en el mismo punto o quieres que una lnea se junte
con precisin al borde de un crculo, el uso del ajuste magntico te ser muy til.

Puedes usar esto para alinear los centros de los objetos o para alinear objetos
respecto al centro de la pgina o para alinearlos de forma horizontal o vertical en
cualquier parte en el centro de la pgina. El ajuste magntico funciona si mueves o
amplas el tamao de los objetos con la HERRAMIENTA DE SELECCIN .

Para activar y desactivar la alineacin magntica a objetos, haz clic en el


botn AJUSTAR A OBJETOS en la barra de herramientas de la parte superior.
Como alternativa, haz clic derecho sobre el tablero de dibujo y escoge
"AJUSTAR A" > "AJUSTAR A OBJETOS" o utiliza la opcin del men
"VENTANA" > "AJUSTAR A OBJETOS" . Tambin puedes activarlo y
desactivarlo si pulsas la "s" mientras arrastras.

Haz clic y arrastra el objeto que quieres ajustar. A medida que arrastras, Web
Designer muestra un icono de imn, lneas azules y puntos rojos cuando te
encuentras cerca de un "punto de inters" al que puedas ajustar el objeto.

Indicadores de ajuste

Los indicadores de ajuste se muestran siempre que ocurre un ajuste. Es decir, siempre
que el objeto que ests arrastrando se encuentre en el sector de un punto de inters

www.magix.es
Trabajar con objetos 129

en el documento (que puede ser otro objeto o una parte de la pgina). Web Designer
se ajusta respecto al punto de inters y el cursor del ratn se convierte en un imn
que te indica que se ha realizado un ajuste. Tambin recibirs otras indicaciones
dinmicas en la pantalla que te informarn que se ha realizado un ajuste.

Un punto rojo significa que el ajuste se ha realizado respecto a un punto


especfico.
Una lnea azul indica que el ajuste se ha realizado respecto a alguna
caracterstica de otro objeto (p. ej. el borde de un rectngulo).
Una lnea naranja indica que se ha realizado un ajuste respecto a una
caracterstica de una pgina (esquinas, bordes, centro).

Las lneas que indican el ajuste parpadean para mostrar que son indicadores
temporales en tiempo real y para que puedas diferenciarlas de los colores del fondo.

La distancia de ajuste se controla a travs de la pestaa RATN del dilogo de


OPCIONES ("HERRAMIENTAS" > "OPCIONES" o clic derecho sobre una pgina y
OPCIONES DE PGINA ).
130

Puedes especificar dos distancias de ajuste en la seccin "Radios de ajuste


magntico", que controlarn cun cerca los objetos tendrn que estar antes de
ajustarse. El tamao del crculo alrededor de los puntos (punto) y la distancia hacia
ambos lados de las lneas (lnea). En general, lo mejor es que el valor de punto sea
mayor que el valor de lnea, de forma que sea ms fcil ajustar a los puntos extremos
de las lneas.

Personalizacin de Web Designer contiene detalles del dilogo de opciones.

Difuminacin (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 difuminacin. Un ejemplo es cuando
se fusionan dos mapas de bits para evitar un borde marcado entre ellos.

El control de difuminacin se encuentra sobre el lado


derecho de la barra superior despus del botn de
galeras.

Para difuminar un objeto:


1. Selecciona el objeto o los objetos que quieres difuminar.
2. Introduce un tamao numrico para la difuminacin en el campo de texto.
O
Haz clic en la flecha para ver la barra deslizante emergente. A medida que
arrastres la barra deslizante los objetos se difuminarn.

La difuminacin fusiona los bordes de los objetos o los hace borrosos.

Si has seleccionado varios objetos, la difuminacin aparecer alrededor de cada


objeto. Si has agrupado los objetos, la difuminacin aparecer alrededor del conjunto
de objetos agrupado.

Objetos gua y lneas gua


Los objetos gua y las lneas gua son objetos de una capa especial: la capa gua. Una
capa gua se crea automticamente cuando creas una lnea gua (ver a continuacin)
o puede crearse de forma manual con un clic derecho en la GALERA DE CAPAS y
seleccionando CREAR UNA CAPA GUA. Lee el captulo "Capas para ms informacin
(en la pgina 419)".

www.magix.es
Trabajar con objetos 131

Usa la opcin AJUSTAR A GUAS del men Ventana (o la tecla 2 del teclado numrico)
para activar el ajuste a objetos gua.

Cualquier objeto colocado en la capa gua se convierte en un objeto gua. Esto puede
ser cualquier objeto incluyendo lneas en cualquier ngulo, formas irregulares y
QuickShapes. Puedes crear, eliminar y cambiar el tamao de los objetos de la capa
gua al igual que en las otras capas, pero los objetos se vern con contornos de puntos
rojos y el ancho de lnea o color de relleno se ignorar. Esta informacin se guardar, y
si posteriormente mueves el objeto desde la capa gua a una capa normal, el ancho de
lnea y los colores se vern nuevamente.)

Puedes usar los objetos gua para dibujar lneas de construccin como lneas que
pasan a travs de un punto imaginario para un dibujo en perspectiva.

Colocar objetos en la capa gua


Primero asegrate de que haya una capa gua en la GALERA DE PGINAS Y CAPAS, (ver
ms arriba). Puedes crear objetos directamente en la capa gua si la seleccionas y
creas objetos de forma usual.

Tambin puedes cortar o


copiar objetos desde otras
capas y pegarlos en la capa
gua. Para pegar objetos en la
misma posicin relativa a la
capa gua utiliza el shortcut
"Ctrl+ Shift+ V".

La galera de pginas y capas muestra la capa gua


seleccionada encima de otras dos capas.

MOVER A LA CAPA DE DELANTE y MOVER A LA CAPA DE ATRS en el men ARREGLO (o


hacer clic derecho y seleccionar "ARREGLO" > "MOVER A LA CAPA DE DELANTE/ DE
ATRS") ignora la capa gua y, por ello, no puede utilizarse para mover objetos a esta
capa.

Crear un lnea gua


Las lneas gua son lneas verticales u horizontales que sirven para alinear rpida y
fcilmente una serie de objetos en la pgina.

Activa las reglas (Ctrl+L).


Arrastra desde una regla hasta la pgina o
Doble clic sobre la regla para crear una lnea gua alineada al punto de clic.

Esto crea automticamente una capa gua y coloca la lnea gua en esa capa.
132

O, usa la galera de capas:

1. Clic derecho sobre la galera de capas y escoge PROPIEDADES


2. De ser necesario, escoge la pestaa Guas.
3. Selecciona horizontal o vertical.
4. Haz clic en Nuevo.
5. Introduce la posicin deseada.

Eliminar una lnea gua


Utiliza la herramienta de seleccin para arrastrar la lnea gua hasta la regla apropiada
(la regla vertical para lneas gua verticales, la regla horizontal para horizontales).

O haz clic derecho sobre la lnea gua y escoge Eliminar.

Resumen de shortcuts del teclado numrico


+ crea una copia mientras arrastras, cambias de tamao, doblas, etc. El objeto
original no se modifica.
/ conserva el ancho de lnea intacto al cambiar de tamao el objeto.
- conserva el relleno sin cambios al mover, cambiar de tamao, doblar, etc.
* activa y desactiva el ajuste magntico.

Conflictos en el diseo de pginas


Si demasiados objetos de la pgina intentan afectar la posicin o tamao de otros en
diferentes maneras, se mostrar un aviso de error que dice:

EL CAMBIO SOLICITADO EN EL DISEO DE LA PGINA NO SE PUEDE PROCESAR POR SER


DEMASIADO COMPLEJO. SIMPLIFICA LA PGINA E INTNTALO DE NUEVO.

Para solucionarlo debers disminuir las interacciones entre los objetos de la pgina.
Esto significa realizar cosas como lo siguiente:

Agrupar (en la pgina 133) o combinar en grupos suaves los elementos que
deberan moverse en conjunto
Eliminar la opcin Push si no es necesaria en objetos que tambin se extiendan o
tengan posiciones de "Pie de pgina" o "Automtica" (en la pgina 146) en la
pgina
Establecer la posicin de la pgina como "Fija" o "Pie de pgina"
Eliminar la marca de extensin
Eliminar el contorneo (en la pgina 220)

www.magix.es
Trabajar con objetos 133

Agrupar y desagrupar objetos


Las herramientas de sombra y transparencia ofrecen diferentes resultados,
dependiendo si se trata de objetos agrupados o no. Para ms informacin, lee el
captulo Transparencia (en la pgina 252) y Sombras (en la pgina 257).

Muchas veces crears formas complejas a partir de varios objetos diferentes. La


opcin Arreglo >Agrupar, te permite unir estos objetos para que parezcan un solo
objeto. Despus podrs seleccionar los objetos agrupados y copiarlos, moverlos,
escalarlos o realizar cualquier otra operacin sobre todo el grupo.

Para crear un grupo


1. Selecciona todos los objetos que quieres incluir en el grupo.
2. Escoge Arreglo > Agrupar (o Ctrl+G) para crear el grupo.

Desagrupar objetos
1. Selecciona el grupo.
2. Escoge Arreglo > Desagrupar (o Ctrl+U).

Despus de esto, todos los objetos individuales quedarn seleccionados.

Eliminar objetos de un grupo


1. Desagrupar los objetos.
2. +clic sobre los objetos que quieres eliminar. Esto los deselecciona, mientras
los otros objetos permanecen seleccionados.

Puedes escoger Arreglo > Agrupar para volver a agrupar los objetos restantes.

Seleccionar un objeto dentro de un grupo


(Por ejemplo, para cambiar su color.) Ctrl+clic sobre el objeto. (Tambin puedes
utilizar esto para seleccionar un "grupo dentro de un grupo".) Si pulsas Tab o +Tab,
la seleccin dentro del grupo se mover al objeto siguiente o anterior. Una vez que
has seleccionado un objeto dentro del grupo, puedes utilizar Alt+clic para seleccionar
el objeto debajo del objeto seleccionado.

Esto se llama "seleccionar dentro".


134

Grupos y capas
Ms informacin sobre capas en el captulo Capas (en la pgina 419)

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 automticamente en el objeto de adelante).

Si los objetos se encuentran en ms de una capa, el grupo se crear en la capa que


contenga el objeto ms cercano al frente.

Cambiar colores en un grupo


La mayora de los grupos utilizan ms de un color simple y a veces es til cambiarlos
(por ejemplo para cambiar los colores de un botn formado por un grupo de objetos).
Podras hacerlo simplemente desagrupndolos o usando SELECCIONAR INTERIOR para
cambiar el color de cada objeto individualmente, y reagruparlos despus. Pero una
forma ms rpida es seleccionar el grupo y hacer clic en un color. Si el grupo contiene
varios colores, aparecer un dilogo que te permitir elegir cul reemplazar con el
color que has seleccionado. O abre el EDITOR DE COLOR y su lista de colores incluir la
misma lista de colores que se ha usado en el grupo. Selecciona el color que quieres
editar.

Grupos suaves (soft groups, en ingls)


Los grupos normales, como se explic en "Agrupar y desagrupar objetos" (en la
pgina 132), solo se colocan en una capa, no pueden estar en varias capas al mismo
tiempo. Los GRUPOS SUAVES te permiten conectar objetos a travs de distintas capas.

Si seleccionas un componente de un grupo suave, tambin se seleccionarn otros


componentes del mismo grupo suave, incluso los que son invisibles o se encuentran
bloqueados. Esto significa que cuando muevas, gires o transformes un componente
de un grupo suave, todos los otros objetos tambin se modificarn de forma similar.

La barra de estado te indica cuando un grupo suave ha sido seleccionado.

Los grupos suaves son prcticos para cuando quieres mantener juntos los objetos que
estn relacionados. Por ejemplo, los estados MOUSEOFF y MOUSEOVER de un botn
web se agrupan en un grupo suave para que el otro estado tambin guarde los
movimientos o transformaciones.

Creacin de grupo suaves


Para crear un grupo suave, selecciona todos los objetos que quieras incluir en el grupo
y luego escoge "ARREGLO > APLICAR GRUPO SUAVE" (o pulsa "Ctrl + Alt + G"). Ten en
cuenta que si el grupo suave va a tener componentes en capas invisibles o
www.magix.es
Trabajar con objetos 135

bloqueadas, tendrs que hacer esas capas temporalmente visibles y editables


utilizando la galera de capas para poder seleccionar los objetos y agruparlos en un
grupo suave.

Un objeto no puede ser miembro de ms de un grupo suave y los grupos suaves no


pueden ser parte de otros grupos suaves.

Eliminacin de grupos suaves


Para deshacer un grupo suave, seleccionar "ARREGLO > ELIMINAR GRUPO SUAVE " (o
pulsa Ctrl + Alt + U). Los objetos no sern borrados, pero no ya estarn asociados
en un grupo suave.

Sincronizacin de texto
En algunas circunstancias, los objetos de texto de un grupo suave se sincronizan para
que, si editas el texto de uno, tambin se actualice en los dems. Esta funcin exista
antes de la introduccin de las COPIAS LIVE y las COPIAS LIVE son mucho ms flexibles
y potentes, por lo que esta funcin ya no es tan til como sola serlo. Sin embargo,
muchas plantillas y elementos de la GALERA DE DISEOS todava la utilizan y tambin
se usa generalmente para botones MouseOver, en donde ambos estados del botn
deben tener la misma etiqueta todo el tiempo. Cuando se cambia la etiqueta del
estado desactivado, el estado MouseOver tambin cambia para coincidir.

Adems, muchas veces pueden obtenerse efectos "similares a las sombras" si colocas
dos o ms copias de texto muy cerca entre s pero con un leve desplazamiento. Al
editar una, se cambiarn las dems en sincronizacin.

Para mantener la sincronizacin, los objetos de texto deben:

encontrarse en el mismo grupo suave


tener el mismo texto al momento de la creacin de un grupo suave
y contar con recuadros de lmite superpuestos o encontrarse en diferentes capas
o diferentes frames de animacin.

Si quieres que el texto se mantenga sincronizado en otras circunstancias, utiliza las


COPIAS LIVE .
136

Alineacin
As puedes alinear o distribuir de forma precisa dos o ms objetos.

Alineacin rpida
Selecciona los objetos que deseas alinear y haz clic derecho en la seleccin para
escoger ALINEAR del men desplegable, luego escoge una de las opciones siguientes:

Para alinear los objetos verticalmente, selecciona BORDES IZQUIERDOS ,


CENTROS o BORDES DERECHOS.
Para alinear los objetos horizontalmente, escoge BORDES SUPERIORES , CENTROS o
BORDES INFERIORES .

Alineacin y distribucin del espacio


Si, adems de alinearlos, quieres distribuir el espacio entre los objetos, seleccinalos,
haz clic derecho sobre la seleccin y escoge "ALINEAR" > "ALINEACIN" para ver el
dilogo de alineacin de objetos. Como alternativa, escoge "ARREGLO" >
"ALINEACIN" ("Ctrl + + L").

El pequeo diagrama en la parte superior del


dilogo te muestra el efecto al seleccionar cada
opcin. Los objetos seleccionados en el
documento no cambiarn hasta que pulses
APLICAR .

El dilogo de alineacin es un dilogo no modal,


lo que significa que puedes dejarlo abierto y
continuar trabajando sobre el documento al
mismo tiempo. Por lo tanto, puedes cambiar
herramientas, dibujar y cambiar la seleccin del
objeto y despus seleccionar una de las opciones
de alineacin.
Si te has equivocado al seleccionar, puedes
cambiar a la seleccin y hacer clic sobre el botn
APLICAR para configurar la ltima alineacin. Esto
puede ahorrarte mucho tiempo.

www.magix.es
Trabajar con objetos 137

Dentro
Esta seccin del dilogo controla los lmites dentro de los que alineas o distribuyes los
objetos. Las opciones son:

LMITES DE SELECCIN : los lmites son los bordes


externos de los objetos seleccionados. Esta posicin
relativa no tiene efecto en la pgina.

LMITES DE UN OBJETO DE ATRS : los lmites son los


bordes externos del objeto seleccionado que se
encuentre atrs de todo. Este objeto no ser afectado
por el alineamiento.
Puedes utilizar esto para definir el objeto de
"referencia" cuando quieres alinear varios objetos en
una fila, por ejemplo. Con las opciones normales de
los "lmites de la seleccin" el objeto que se
encuentre ms a la izquierda ser el objeto de
referencia (el que no se mover).
PGINA/S : si los objetos se encuentran en una sola
pgina, los lmites son los bordes de pgina. (Esto te
permite, por ejemplo, centrar objetos en la pgina o
alinear a partir del borde de pgina.)

Alineacin
Para alinear objetos para que, por ejemplo, sus bordes izquierdos queden alineados a
la izquierda:

1. Selecciona los objetos y luego haz clic derecho sobre la seleccin.


2. Escoge "ALINEAR " > "BORDES IZQUIERDOS " de la lista desplegable.

Los objetos seleccionados se movern para alinearse al borde izquierdo. Como


alternativa:

1. Escoge "ALINEAR " > "ALINEACIN " o pulsar "Ctrl + Shift + L" o escoge
ALINEACIN del men ARREGLO para abrir el dilogo Alineacin de objetos.
2. Selecciona la opcin "DENTRO" deseada, por ejemplo, lmites de seleccin.
3. Selecciona ALINEAR A LA IZQUIERDA para la posicin horizontal.
4. Deja la posicin vertical SIN CAMBIOS.
5. Haz clic en APLICAR .
138

Los objetos seleccionados se movern para alinearse al borde izquierdo.

Todas las opciones de alineacin actan de forma similar. Mostramos solamente el


ejemplo de alineacin izquierda para ser breves. Experimenta para aprender las otras
opciones.

Para seleccionar rpidamente cualquier otra combinacin de alineacin vertical y


horizontal, haz clic en el diagrama:

Un solo clic alinea la posicin horizontal y vertical a la posicin de clic de


cualquiera de las nueve combinaciones superior-centro-inferior/izquierda-
centro-derecha.
"Ctrl + clic" no cambia la posicin horizontal y arregla los objetos en una lnea
alineada respecto a la parte superior, central o inferior.
"+ clic" no cambia la posicin vertical y arregla los objetos en una columna
alineada respecto a la izquierda, al centro o a la derecha.

Distribuir
Las opciones de distribucin posicionarn los objetos seleccionados de forma regular
dentro del rea (generalmente los lmites de seleccin, pero tambin puede ser la
pgina o doble pgina.)

Todas las opciones de distribucin funcionan de forma similar. Los siguientes


ejemplos muestran las diferentes opciones verticales para alinear objetos:

DISTRIBUIR BORDES SUPERIORES : las partes superiores


de los objetos se distribuyen de forma regular. La
distribucin de BORDES INFERIORES es la inversa: la
parte inferior de los objetos se distribuye de forma
regular.

DISTRIBUIR CENTROS : los centros de los objetos se


distribuyen de forma regular.

DISTRIBUIR EN ESPACIOS IGUALES : los objetos


presentan espacios regulares entre uno y otro.

Las opciones de posicin horizontal son similares, pero funcionan en direccin


horizontal.

www.magix.es
Trabajar con objetos 139

Si, por ejemplo, quieres distribuir esta coleccin de elipses para que presenten
espacios iguales y sus bordes superiores estn alineados:

Selecciona las formas


Abre el dilogo de alineacin (Ctrl+Mays+L)
Asegrate de que la seccin DENTRO muestre la
opcin LMITES DE SELECCIN
Selecciona la posicin horizontal: distribuir
centros
Selecciona la posicin vertical: alinear arriba
Haz clic en APLICAR .

Ahora se vern as, con espaciado horizontal


equidistante y alineacin superior.

Recuerda que si te has equivocado, siempre puedes deshacer la operacin.

Copiar estilos - pegar atributos


Esto te permite copiar atributos (como el modelo de lnea o el color de relleno) entre
objetos. Es una forma rpida de aplicar mltiples atributos a un objeto.

El cuadrado tiene un color, sombra,


estilo de lnea y relleno especficos. Si se
copia y se pegan los atributos al crculo
del centro, el resultado ser el crculo de
la derecha.

1. Selecciona el objeto cuyos atributos quieres copiar.


2. Copia la seleccin al portapapeles. ("EDICIN" > "COPIAR " o "Ctrl + C".)
3. Selecciona los objetos a los que quieres aplicar los atributos.
4. Escoge "EDICIN" > "PEGAR ATRIBUTOS" o "Ctrl + Shift + A".

El objeto permanece en el portapapeles hasta que lo sustituyas con otra operacin


"copiar" o "cortar". Esto te permite repetir la funcin de "pegar" todas las veces que
quieras.

Libreras de estilos
Es bastante fcil utilizar esta tcnica para crear documentos que pueden utilizarse
como libreras de estilo. Crea una serie de pequeos objetos con un relleno, color y
otros estilos de atributos. Despus, la forma ms sencilla de utilizar uno de estos
estilos es:

Haz clic sobre el objeto fuente, "Ctrl+C" para copiar el estilo


140

Ve al objeto de destino (que puede encontrarse en otro documento, "Ctrl+Tab"


para cambiar rpidamente entre documentos), haz clic en el objeto para aplicar
el estilo
Pulsa "Ctrl+Shift+A" para aplicar los atributos

Atencin: la mayora de los atributos puede copiarse de esta forma, incluyendo


sombras, valores de difuminacin, 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.

ClipView
El ClipView te permite ocultar o "recortar" partes de una forma dentro de una forma
ms grande. El efecto es similar a la opcin Interseccin de formas, descrita en el
captulo Manejo de formas (en la pgina 176). La diferencia es que la opcin
interseccin de formas corta los objetos, mientras que la opcin ClipView
simplemente oculta las partes fuera del objeto ClipView. Adems, puedes ajustar la
posicin de los objetos dentro del ClipView.

Para crear un ClipView:

1. El objeto "ventana" debe encontrarse detrs de los


dems objetos del ClipView. De ser necesario,
desplzalo hacia atrs. En este ejemplo, la elipse
oscura es el objeto ventana. Como alternativa dibuja
la forma "ventana" en la capa de mscara (en la
pgina 267)
2. Selecciona todos los objetos que quieres incluir en el
ClipView (incluyendo el objeto "ventana", salvo que
se encuentre en la capa de mscara).
3. Escoge ARREGLO > APLICAR CLIPVIEW ("Q"). Todo el
objeto "ventana" permanece visible adems de las
partes de los dems objetos que cubren el objeto
"ventana".

Configurar el color de fondo del ClipView


El color de relleno del objeto original se utiliza como el color de fondo del ClipView.
Entonces, o bien configuras este color antes de crear el ClipView o utilizas
"seleccionar dentro" (Ctrl+Clic) sobre el fondo y despus modificas el color.

Seleccionar forma de corte


Esto selecciona solamente la forma que has utilizado para hacer el corte.
Efectivamente, esta es la "ventana" a travs de la que se vern los otros objetos en el
clipview. Una vez que la has seleccionado puedes moverla, transformarla o ajustarla a
tu clipview.
www.magix.es
Trabajar con objetos 141

Seleccionar objetos cortados


Esto selecciona todos los objetos en el clipview que se estn cortando. Por lo tanto,
una vez que los has seleccionado puedes arrastrarlos dentro del clipview para ajustar
su posicin relativa a la forma de corte.

Seleccionar objetos en el ClipView


Puedes "seleccionar dentro" pulsando la tecla Ctrl y haciendo clic en el objeto
deseado. Esto es muy similar a seleccionar objetos dentro de un grupo que se ha
descrito anteriormente en este captulo. (Los objetos ClipView son un tipo de grupo).
Ahora puedes realizar la mayora de operaciones de edicin sobre el objeto.

Eliminar un ClipView
Selecciona el objeto y escoge el men Arreglo > Eliminar ClipView.

ClipView de borde suavizado


Si est seleccionado todo el objeto ClipView, puedes ajustar el control de
DIFUMINACIN de la barra superior para dar al objeto un borde de difuminacin suave.

Nota: puedes colocar objetos ClipView dentro de otros objetos ClipView.

Nombrar objetos
Puedes aplicar nombres a cualquier objeto del MAGIX Web Designer 11
Premium, utilizando la opcin "Aplicar, quitar o verificar nombres de objetos"
en la barra de informacin de la HERRAMIENTA DE SELECCIN .

La aplicacin de nombres es un mecanismo que tiene una variedad de usos que sern
explicados a continuacin. El uso ms comn es para formar series de objetos.

Ejemplos del uso de nombres

Animaciones Flash: los nombres para las animaciones Flash se usan para marcar
objetos a los que se les aadirn animaciones con el exportador Flash. Lee el captulo
sobre Flash (en la pgina 434) para ms detalles.

Objetos repetidos: se utiliza una convencin especial de nombres para identificar un


objeto que aparecer en la misma posicin y con la misma forma en mltiples
pginas. Esto te permite editar una copia del objeto y actualizar todas las otras copias
para que estn iguales. Ver el captulo "Objetos repetidos" (en la pgina 143) en
Primeros pasos.
142

El dilogo carece de modo as que puedes cambiar la seleccin mientras el diolog


est abierto. Muestra los nombres para la seleccin actual. El campo de texto superior
del dilogo te indica cuntos objetos estn seleccionados actualmente.

Aadir nombres
Para aadir un nombre a un objeto, selecciona el objeto y abre el dilogo
APLICAR/ELIMINAR NOMBRES utilizando el botn de la BARRA DE INFORMACIN DE LA
HERRAMIENTA DE SELECCIN .

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 AADIR . 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
seleccin actual. Si hay ms de un objeto seleccionado, solo se mostrar una lista de
los nombres aplicados si todos los objetos de la seleccin tienen la misma serie de
nombres. Si no es as, vers la palabra "<muchos>" indicando que se han aplicado
distintos nombres para los diferentes objetos de la seleccin.

Para quitar un nombre de un objeto seleccionado, haz clic en el nombre en la lista


"Nombres aplicados" y luego haz clic en el botn ELIMINAR .

www.magix.es
Trabajar con objetos 143

Objetos repetidos
En las pginas web es muy comn que ciertos elementos se repitan en todas las
pginas como, por ejemplo: los botones de navegacin, los encabezados o los logos.

Web Designer te ofrece la posibilidad de repetir cualquier elemento en el mismo lugar


de las pginas del sitio. Cuando actualizas una de las copias, Web Designer aplica
automticamente esos cambios a todas las pginas que tienen una copia del objeto
repetido.

En la mayora de las plantillas de diseo se repiten los botones principales de


navegacin. Puedes convertir a cualquier objeto, como un botn, en un objeto
repetido si haces clic derecho y escoges la opcin REPETIR EN TODAS LAS PGINAS. El
objeto se copia en el mismo lugar en todas las pginas y vers el smbolo de objeto
repetido en la esquina superior derecha. Si realizas ms cambios a este elemento,
todas las copias se actualizarn automticamente.

Sin embargo, si la barra est configurada como BARRA DE NAVEGACIN DEL SITIO
aparecer automticamente en todas las pginas de tu sitio y no es necesario que la
conviertas en un objeto repetido.

Los textos de logos y pies de pgina generalmente se configuran como objetos que se
repiten. Esto significa que puedes editarlos en una sola pgina, y que el objeto se
actualizar automticamente en todas las otras pginas.

Nota: se utiliza la pgina actual como fuente original para actualizar los elementos
repetidos de todas las pginas.

El recuadro rojo es el smbolo de objeto repetido y se muestra en todas las instancias del objeto
repetido.
144

Si no quieres una copia de un objeto que se repite en la pgina, solo tienes que
borrarla de esa pgina. Al editarlo, el objeto repetido se actualiza solamente en las
pginas que ya lo contienen. Esto significa que puedes escoger qu pginas de tu
documento deben tener el objeto que se repite y cuales no deben tenerlo.

Si quieres repetir un objeto en solo unas cuantas pginas de una pgina web extensa
puedes hacer lo siguiente:

1. Primsero, repite tu objeto en todas las pginas de tu sitio web, usando "Arreglo"
> "Repetir en todas las pginas".
2. Selecciona uno de los objetos repetidos y cpialo al portapapeles ("Ctrl + C").
3. Pulsa la tecla "Eliminar" y selecciona la opcin "Eliminar de todas las pginas"
cuando se indique.
4. Ahora simplemente pega el objeto repetido en cada pgina donde lo quieras
copiar.

Edicin del contenido de un objeto repetido


Cuando Web Designer crea un objeto repetido, los elementos repetidos se colocan en
un grupo de repeticin similar a un grupo normal. Si vas a una pgina inferior que
contiene un objeto repetido en la GALERA DE PGINAS Y CAPAS, puedes ver que hay
un grupo repetido que contiene a cada objeto repetido de esa pgina.

Web Designer coloca a cada objeto repetido dentro de un grupo de repeticin.

www.magix.es
Trabajar con objetos 145

Si deseas editar un elemento que se encuentra dentro de este grupo, pulsa Ctrl y haz
clic sobre el elemento para seleccionarlo dentro del grupo de repeticin. Tambin
puedes hacer doble clic sobre un grupo para editarlo en una nueva vista de
subdocumento (o haz clic en l y escoge ABRIR del men de contexto). Contendr
solamente el contenido del grupo y no el grupo en s mismo, para que puedas
seleccionar directamente a los elementos del grupo con un clic.

Como alternativa, si vas a una herramienta especfica, en general puedes hacer clic
directamente en cualquier objeto al que pueda aplicarse la herramienta y se
seleccionar dentro de su grupo de repeticin (o de cualquier otro grupo). De esta
forma, puedes seleccionar, por ejemplo, una Quickshape que se encuentra dentro de
un grupo de repeticin, si vas a la herramienta de Quickshape y haces clic sobre la
forma. Al igual que con otras ediciones que realices a un objeto repetido, cualquier
edicin que hagas dentro de un grupo de repeticin se aplicar a todas las instancias
de ese objeto repetido en otras pginas.

Fijacin de un objeto repetido


Puedes fijar un objeto repetido, si haces clic sobre l y escoges FIJAR OBJETO
REPETIDO . Una vez fijado, el objeto no puede seleccionarse. De todas formas, si
realizas una modificacin a otras copias de ese objeto repetido en otras pginas que
no estn fijadas, se cambiarn todas las copias, incluyendo la copia fijada.

Detencin de la repeticin de objetos


Haz clic derecho sobre un objeto y escoge DETENER ACTUALIZACIN para desactivar la
repeticin de un objeto o de todas las copias de ese objeto en tu sitio web. Tambin
podrs hacerlo si escoges DETENER ACTUALIZACIN del men ARREGLO. Se te
preguntar si quieres dejar de repetir el objeto seleccionado o todas las copias del
objeto. Escoge la opcin TODOS . Ahora, cada copia puede editarse de forma
independiente y la prxima vez que realices un cambio, los otros objetos no se
actualizarn.

Utiliza esta opcin cuando, por ejemplo, hayas utilizado ARREGLO > REPETIR EN TODAS
LAS PGINAS para copiar un objeto en todas las pginas de tu sitio web, pero luego
quieras modificar dichos objetos para que sean diferentes en cada pgina de forma
que dejen de estar conectados entre s.

DETENER ACTUALIZACIN tambin es til si quieres crear una copia de un objeto


repetido en una pgina (p. ej., un pie de pgina o un logotipo) y no quieres que esa
copia se actualice. En este caso, escoge la opcin SOLO ESTA COPIA, cuando se te
pregunte.

Ten en cuenta que no puedes usar DETENER ACTUALIZACIN en barras de


navegacin que tengan la opcin BARRA DE NAVEGACIN DEL SITIO activada en el
DILOGO DE BARRA DE NAVEGACIN . Esto es porque las barras de navegacin del
146
sitio se actualizan siempre en toda la pgina. Consulta el captulo Barras de
navegacin para ms informacin sobre las barras de navegacin.

Eliminar objetos repetidos


Si no quieres una copia de un objeto que se repite en la pgina, solo tienes que
borrarla de esa pgina. MAGIX Web Designer 11 Premium te preguntar si deseas
eliminar solo esa copia o todas las copias del objeto repetido. Al pulsar "Ctrl +
Eliminar" se eliminarn el objeto repetido seleccionado sin preguntar si se quieren
eliminar todas las copias o solo una.

Pies de pgina y objetos que se amplan con la


pgina.
Normalmente en un documento de pgina web no todas las pginas tienen la misma
longitud y puede que tengas objetos que quieras que permanezcan a una distancia fija
del final de la pgina, incluso cuando la alargas o acortas. Estos elementos se llaman
objetos de pie de pgina. Puede que tengas tambin formas que conforman el fondo
de tu pgina, que deben extenderse o contraerse si cambia el largo de la pgina, de
modo que siempre se ajusten a la pgina adecuadamente. El submen POSICIN EN LA
PGINA del men contextual te permite hacer que los objetos se comporten de estas
maneras.

Haz clic derecho sobre un objeto y mira el submen POSICIN EN LA PGINA . Este
men te permite controlar la forma en que el objeto se comporta cuando cambias el
tamao de la pgina. Las primeras cuatro entradas del submen se comportan como
un grupo de botones de radio, es decir, que solo puedes seleccionar uno para cada
objeto cada vez.

Fijo
Esta es la opcin por defecto y la configuracin adecuada para la mayora de los
objetos de un documento. La posicin del objeto es fija con respecto a la parte
superior de la pgina de forma que no se mover aun cuando cambies la longitud de
la pgina.

Pie de pgina
As se marca el elemento como objeto de pie de pgina. Siempre mantendr la misma
distancia con respecto a la parte inferior de la pgina, de forma que si amplas la
pgina, el objeto se mover hacia abajo en la misma proporcin. Si copias el objeto y
utilizas la opcin PEGAR EN EL LUGAR para insertarlo en una pgina con un tamao
diferente, el objeto se ubicar a la misma distancia de la parte inferior de esa otra
pgina.

Si configuras un objeto repetido como pie de pgina, se colocar a la misma distancia


de la parte inferior de cada pgina.

www.magix.es
Trabajar con objetos 147

Automtico
Esta opcin es especialmente til para plantillas de pgina y objetos repetidos.
Permite que un objeto se comporte como un pie de pgina, solo si se encuentra en la
mitad inferior de una pgina. Si mueves el objeto a la mitad superior de la pgina, se
comportar como un objeto fijo. La lgica de esta reaccin reside en que los objetos
que son pie de pgina se necesitan en general cerca de la parte inferior de la pgina.

Esta es la configuracin por defecto para los objetos repetidos. En otras palabras, si
configuras un objeto cerca del borde de la pgina como repetido, se colocar a la
misma distancia del borde inferior de todas las pginas en las que aparece. Pero si lo
mueves a la mitad superior de la pgina, ya no se tratar como un elemento de pie de
pgina.

Ampliar con la pgina


Si configuras a un objeto con AMPLIAR CON LA PGINA , la parte superior del objeto no
se mover. Pero la parte inferior del objeto se desplazar para mantener la distancia a
la parte inferior de la pgina. Por lo tanto, el objeto se escalar en sentido vertical. En
general, esta opcin es til solamente para objetos que forman parte del fondo de una
pgina. Por ejemplo, muchas de las plantillas de pginas web de la galera de diseos
tienen rectngulos de colores en la capa de fondo de pgina que forman parte del
diseo de la pgina. En general, estn configurados como AMPLIAR CON LA PGINA
para mantener un diseo perfecto con cualquier longitud de pgina.

Objetos de desplazamiento
Los objetos de desplazamiento son especialmente tiles en las plantillas de pginas
porque ayudan a mantener el diseo de la pgina cuando el texto se extiende o se
acorta. Los objetos de desplazamiento no se superponen unos con otros, por lo que si
amplas o mueves uno de forma que invada el espacio de otro, lo "desplazar" hacia
abajo en la pgina. Y si un objeto de desplazamiento se sale del final de la pgina, esta
se ampla automticamente.

Para convertir un objeto en objeto de desplazamiento, haz clic derecho sobre l y


escoge DESPLAZAMIENTO... del submen POSICIN EN LA PGINA . Aparecer el dilogo
de DESPLAZAMIENTO.
148

Selecciona la casilla "Desplazamiento" para activar esta opcin para los objetos
marcados. Luego puedes cambiar los mrgenes inferior y superior, si lo deseas. Por
defecto, los mrgenes inferior y superior estn bloqueados conjuntamente: si quieres
configurarlos de forma independiente haz clic en el botn de bloqueo. El valor del
margen superior determina cun cerca pueden estar los objetos de desplazamiento
entre s, hasta que uno se desplace para dar lugar al otro. De esta forma impide que
otros objetos de desplazamiento se acerquen demasiado. De la misma forma, el valor
del margen inferior especifica cun cerca puede estar de otro objeto de
desplazamiento situado debajo antes de que lo desplace. Tambin define la distancia
mnima que debe mantenerse entre el objeto y el extremo inferior de la pgina (la
pgina se extender de ser necesario), ya que por lo general no deseas que el objeto
se encuentre justo sobre el borde de la pgina.

El campo AMPLIAR LADOS te permite hacer que el objeto de desplazamiento se


comporte como si fuera ms ancho de lo que es en realidad. Esto significa que puedes
hacer que desplace a los objetos que se encuentran debajo (o que se lo empuje desde
arriba) aun si existe una separacin horizontal entre los objetos. Entonces, por
ejemplo, un rectngulo de 100 pxeles de ancho con una configuracin de
desplazamiento con AMPLIAR LADOS de 50 pxeles, se comportar como si tuviera
200 pxeles de ancho respecto al desplazamiento.

Como se menciona arriba, cuando un objeto de desplazamiento se alarga desplazar


otros objetos de desplazamiento debajo del mismo fuera de la pgina y , si es
necesario, la pgina se alargar. Pero, qu ocurre si el objeto de desplazamiento se
acorta de nuevo (porque se haya borrado parte del texto de un objeto de texto, por
ejemplo)? Ahora hay espacio para que los objetos de desplazamiento debajo vuelvan
a desplazarse hacia arriba en la pgina. Por lo tanto, mientras que los objetos
comenzaron pegados antes de que el texto fuera borrado, esto es exactamente lo que
sucede a continuacin: los objetos de desplazamiento inferiores suben, cubriendo el
hueco que en caso contrario se hubiera generado. De igual manera y donde sea preci-
so, el final de la pgina se desplazar hacia arriba, haciendo la pgina ms corta.

En resumen, aplicar "Desplazamiento" a los elementos principales de tu pgina ayuda


a mantener su disposicin cuando se aade o elimina contenido de la misma.
www.magix.es
La herramienta de edicin de formas 149

La herramienta de edicin de formas


La herramienta de EDICIN DE FORMAS es la herramienta principal para crear
curvas, lneas y formas precisas, as como para editar y modificar las lneas y
las formas.

Aadir/Cambiar/Editar indicador
Crear curva
Crear lnea
Unin en curva
Unin marcada
Separar en puntos
Eliminar puntos
Invertir trayectoria
Posicin de los controles deslizantes
Suavizado

La barra de informacin, que se muestra arriba, ofrece una amplia variedad de


controles, incluyendo un control numrico muy preciso.

Todas las lneas y formas en MAGIX Web Designer 11 Premium estn formadas a
partir de una secuencia de curvas y secciones de lnea. Muchas veces, las curvas se
denominan Bzier, en honor al primer matemtico en describirlas.

Estas secciones o segmentos de una lnea estn sealados por pequeos controles
deslizantes negros. Puedes arrastrar, aadir y eliminar estos controles deslizantes
para manipular la forma de la lnea o contorno.
150

Dibujar una linea o forma

Puedes utilizar cualquiera de las siguientes herramientas para dibujar lneas y formas:
HERRAMIENTA DE MANO ALZADA Y PINCEL ("F3").
HERRAMIENTA DE LNEAS RECTAS Y FLECHAS
HERRAMIENTA DE EDICIN DE FORMAS ("F4").

La HERRAMIENTA DE MANO ALZADA Y PINCEL es la forma ms simple de dibujar lneas,


curvas y formas, y funciona igual que un lpiz.

La HERRAMIENTA DE LNEAS RECTAS Y FLECHAS es la mejor opcin si quieres dibujar


pequeos segmentos de lneas rectas o aadir extremos de flecha a cualquier tipo de
lnea.

La HERRAMIENTA DE EDICIN DE FORMAS es la mejor herramienta para dibujar curvas y


lneas precisas. Es tambin la herramienta principal para editar lneas y formas.

Nota: aunque no es la barra de herramientas de la herramienta de dibujo,


tambin puedes usar la HERRAMIENTA DE PLUMA para crear formas precisas.
Tiene funcionalidad limitada y funciona como la herramienta de lnea de otros
programas de dibujo. Para usar la HERRAMIENTA DE PLUMA , escoge BARRAS DE
CONTROL del men VENTANA y haz clic en la casilla PALETA DE BOTONES . Luego
haz clic en el icono HERRAMIENTA DE PLUMA en la paleta de botones.

La herramienta de mano alzada y pincel


Puedes utilizar esta herramienta para dibujar libremente como si fuera un
lpiz. Tambin puede utilizarse para crear pinceladas, lo que se describe ms
adelante. Mientras utilizas esta herramienta, la barra de estado te suministra
informacin sobre cmo utilizarla.

1. Coloca el cursor en el lugar donde debe comenzar la lnea.


2. Pulsa y mantn pulsada la tecla del ratn.
3. A medida que arrastras el cursor por el documento, dibujars una lnea en
tiempo real.
4. Suelta la tecla del ratn para finalizar la lnea.

Despus de dibujar libremente una


lnea puedes controlar el suavizado
de la curva (la cantidad de puntos
Suavizado Indicador de
de control) ajustando la barra
readaptacin
deslizante de control de suavizado
de la barra de informacin.

www.magix.es
La herramienta de edicin de formas 151

Los valores bajos hacen que la lnea siga el movimiento del ratn de forma ms
cercana al crear ms puntos de control, mientras que los valores ms altos producen
curvas ms suaves con menos puntos de control.

Los valores bajos son menos suaves Los valores altos ofrecen curvas ms
suaves

Puedes cambiar el suavizado en cualquier momento hasta que realices otras


ediciones a la lnea (el indicador de readaptacin te indicar en la barra de
informacin si todava puedes hacer modificaciones al suavizado).

Borrar durante el dibujo


Antes de soltar el botn, puedes eliminar parte de la lnea si pulsas la tecla Shift. El
icono del lpiz se dar la vuelta para que puedas utilizar la goma. Ahora podrs borrar
hacia atrs en la lnea. Suelta para continuar dibujando.

Dibujo de segmentos rectos con la herramienta de dibujo


libre
Mientras dibujas libremente una lnea, presiona Alt y mueve el cursor hasta la nueva
posicin, al soltar Alt la lnea ser recta. Puedes continuar dibujando la lnea o pulsar
nuevamente Alt para dibujar otro segmento. Recuerda que puedes utilizar Ctrl para
limitar el ngulo de la lnea. Si solo quieres dibujar muchos segmentos individuales de
lneas rectas, utiliza la herramienta de lneas rectas descrita ms abajo.

Extender una lnea


Asegrate de haber seleccionado la lnea (un solo clic sobre la forma o la lnea
mientras te encuentras en la herramienta de DIBUJO LIBRE Y PINCEL lo har). Ahora, si
te mueves hasta el final de la lnea, un pequeo smbolo + junto al icono del lpiz te
indicar que puedes dibujar para aadir una nueva seccin de dibujo libre a la lnea.
152

Unir dos lneas


Selecciona ambas lneas ("Shift+clic" en la segunda lnea para aadirla a la seleccin)
y ahora podrs dibujar desde el final de una lnea hasta el final de la otra. Un pequeo
+ al lado del lpiz (aparece despus de una pausa) te indica que te encuentras sobre
el extremo.

Cerrar una forma


Una forma es un objeto cerrado sin controles de inicio ni fin. Slo las formas pueden
tener un relleno de color.

Para cerrar una forma:

1. Crea un objeto abierto cuyo punto de control de fin se


encuentre cerca del punto de control de inicio. Todos los
puntos de control - salvo el de fin - deberan encontrarse en
las posiciones deseadas.
2. Coloca el cursor sobre el control deslizante de fin.
3. Arrastra el control deslizante de fin hasta el control
deslizante de inicio y suelta la tecla del ratn. Los dos
controles deslizantes se unirn.

O:

1. Crea un objeto abierto con todos los controles deslizantes en


sus posiciones correctas. No dibujes el segmento de lnea
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 lnea y cerrar la
forma.
O:

1. Escoge la herramienta de EDICIN DE FORMAS .


2. Haz clic sobre un punto de fin para seleccionarlo.
3. Pulsa la tecla Enter.

O:
1. Usa la herramienta de DIBUJO LIBRE Y PINCEL para crear el segmento final.

Cualquiera de estas opciones cerrar la forma. Si hay un color de relleno actual, la


forma se llenar con ese color.
www.magix.es
La herramienta de edicin de formas 153

Editar lneas/formas con la herramienta de


dibujo libre y pincel
No puedes modificar directamente las formas creadas con las herramientas de
rectngulo, elipses o quickshape. Primero debes convertirlas en formas editables con
"ARREGLO > CONVERTIR A FORMAS EDITABLES ". Consulta "Trabajar con formas" para
ms informacin.

Puedes utilizar la herramienta de DIBUJO LIBRE Y PINCEL para editar lneas (o el


contorno de las formas) y simplemente dibujar la seccin de la lnea que quieres
modificar. Por ejemplo, para editar el objeto:

Selecciona el objeto que quieres editar.

Mueve el lpiz de dibujo libre sobre una parte de la lnea. Una ~


mostrar cuando el lpiz se encuentra en su posicin.

Dibuja la lnea requerida y despus mueve el lpiz hasta el


segundo punto de la lnea existente. Una ~ te indica nuevamente
cuando el lpiz se encuentra en la posicin correcta.

Al soltar la tecla del ratn, la seccin de la lnea se sustituir.

Modo Bosquejo
Esta opcin es til si ests dibujando rpidamente muchas lneas
independientes cercanas unas a otras, tal vez con una tableta de dibujo.

Al trabajar de esta forma, generalmente no quieres editar las lneas existentes que has
dibujado, sino dibujar nuevas lneas con cada trazo. Pero como se ha descrito
anteriormente, si inicias una operacin de dibujo en una lnea existente o sobre su
punto final, esa lnea existente se modifica. Entonces, cuando haces un bosquejo, es
posible que modifiques lneas sin quererlo con tus pinceladas, en vez de dibujar
nuevas lneas como las que queras.
154

Para solucionar este problema, activa el modo de bosquejo. Ahora, si colocas el cursor
del ratn sobre una lnea existente o un punto de extremo, vers que se hace una
breve pausa antes de que el cursor del ratn cambie para indicar que la lnea se
editar o extender. Esta pausa significa que puedes seguir editando lneas existentes
si lo deseas, pero que no lo hars sin intencin cuando quieres trazar nuevas lneas.

Estilos de pincel
La herramienta de DIBUJO LIBRE Y PINCEL tambin puede utilizarse para aplicar
distintos estilos de trazos sobre el trazado de la lnea. Entonces, puedes convertir una
lnea slida con un ancho especfico en una lnea con ancho variable o utilizar uno de
los estilos de pincel, como "airbrush" o marcador de fieltro, etc.

Es importante comprender que la lnea puede continuarse editando por lo que, a


diferencia de la mayora de programas de dibujo y optimizacin de fotos, puedes
seleccionar la lnea posteriormente y ajustar la forma de la lnea y el trazo del pincel.
Esto se describe en el apartado PINCELES ms adelante en este captulo.

La herramienta de lneas rectas y flechas


Esta herramienta facilita el dibujo de segmentos individuales de lneas rectas y el
agregado de extremos de flecha a cualquier lnea, de forma que es ms fcil y prctico
que hacerlo con la galera de lneas.

Dibujo y edicin de lneas rectas


Simplemente haz clic y arrastra sobre la pgina para dibujar una lnea recta. Puedes
hacer clic sobre una lnea existente para seleccionarla y, una vez seleccionada, puedes
hacer clic y arrastrar de cualquier extremo para moverlo.

Agregar extremos de flechas


La barra de informacin tiene dos listas desplegables a la izquierda, que te permiten
escoger un extremo de punta para cada extremo de la lnea seleccionada.

Punta de flecha
Extremo posterior de la flecha
Tamao del extremo de la flecha
Trayectoria invertida

www.magix.es
La herramienta de edicin de formas 155

La barra deslizante de la barra de informacin te permite cambiar el tamao de los


extremos de flecha a la lnea seleccionada actualmente. O puedes introducir un valor
de porcentaje en el campo de texto del tamao a la derecha de la barra deslizante. Por
defecto, los extremos de lnea se crean con un ancho 6 veces mayor que el ancho de
la lnea, y esto se toma como el tamao 100%, como indica la barra deslizante de
tamao. Si haces la lnea ms ancha, el ancho del extremo de la flecha tambin se
actualizar. Por lo tanto, introduce un valor menor que 100% para reducir el tamao
de los extremos de la flecha o mayor que 100% para aumentarlo. A pesar de que la
barra deslizante solo llega a un mximo de 800%, puedes entrar porcentajes mayores
en el campo de texto.

Trayectoria invertida
Presiona el botn TRAYECTORIA INVERTIDA de la barra de informacin para
intercambiar la punta y el final de la flecha de la lnea seleccionada.

Agregar ms segmentos de lnea


Las lneas creadas con la herramienta de lneas rectas son, por supuesto,
completamente compatibles con las otras herramientas de dibujo. Entonces, si
quieres agregar ms segmentos a una lnea, curvarla o tal vez convertirla en una
forma cerrada, utiliza la herramienta de edicin de formas.

La herramienta de edicin de formas


La HERRAMIENTA DE EDICIN DE FORMAS es la herramienta principal para
crear curvas, lneas y formas precisas, as como para editar y modificar las
lneas y las formas.

Aadir/Cambiar/Editar indicador
Crear curva
Crear lnea
Unin en curva
Unin marcada
Separar en puntos
Eliminar puntos
Invertir trayectoria
Posicin de los controles deslizantes
Suavizado
156

La barra de informacin, que se muestra arriba, ofrece una amplia variedad de


controles, incluyendo un control numrico muy preciso.

Todas las lneas y formas en MAGIX Web Designer 11 Premium estn formadas a
partir de una secuencia de curvas y secciones de lnea. Muchas veces, las curvas se
denominan Bzier, en honor al primer matemtico en describirlas.

Estas secciones o segmentos de una lnea estn sealados por pequeos controles
deslizantes negros. Puedes arrastrar, aadir y eliminar estos controles deslizantes
para manipular la forma de la lnea o contorno.

Algunos objetos como QuickShapes, rectngulos, elipses y texto tienen que


convertirse en formas editables, antes de poder utilizar la HERRAMIENTA DE EDICIN
DE FORMAS para modificarlos. Para ello, selecciona un objeto y marca "ORDENAR " >
"COMBINAR FORMAS " > "AADIR FORMA".

Para dibujar un segmento de lnea recto


Para comenzar una lnea recta en la herramienta de EDICIN DE FORMAS
1. Haz clic donde quieras comenzar la lnea. (Puedes comenzar una lnea 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 sealar que est seleccionado.
2. De ser necesario, selecciona el botn CONVERTIR EN LNEA de la barra de
informacin. (Shortcut L). Esto te garantiza que el prximo clic dibujar un
segmento de lnea recto.

Haz clic donde quieras colocar el prximo control deslizante o haz clic y arrastra y
despus suelta el botn del ratn cuando la lnea sea correcta. Esto crea un segmento
de lnea y selecciona el nuevo control deslizante del extremo.

www.magix.es
La herramienta de edicin de formas 157

Mezclar lneas curvas y rectas


Para crear un objeto que es una mezcla de segmentos rectos y curvos, cambia entre
los botones CONVERTIR EN CURVA y CONVERTIR EN LNEA mientras creas el objeto
(tambin puedes pulsar L o C en el teclado).

Nota: Tambin puedes usar el shortcut "X" para crear unin en vrtice o "S" para
crear una unin fluida mientras usas el EDITOR DE FORMAS . Estos afectan la forma en
que dos segmentos de lnea se unen. Una unin en vrtice crea dos controles Bzier
independientes que puedes editar de forma separada. Con una unin en vrtice
puedes crear un ngulo recto. Una unin fluida crea una unin simtrica que funciona
como un balancn. Si arrastras uno de los controles Bzier hacia abajo, el control
opuesto va hacia arriba.

Para dibujar un segmento de lnea curvo:


Esto es similar a iniciar una lnea recta (descrito
anteriormente).

1. Haz clic donde quieras comenzar la lnea.


2. De ser necesario, selecciona el botn CONVERTIR EN CURVA . (Shortcut C)
3. Haz clic o arrastra (igual que lo descrito para las lneas rectas) para crear un
segundo control deslizante y un segmento curvo se aadir a la lnea.

Un segmento curvo tiene CONTROLES DE CURVA asociados con el control deslizante de


punto seleccionado. Puedes arrastrarlos para ajustar el ngulo y el radio de la curva.
158

Extender la lnea.
Asegrate de seleccionar un punto de control deslizante que se encuentre en un
extremo (contorno rojo) y despus haz clic para aadir una nueva seccin de lnea o
curva. Cada clic sucesivo coloca un nuevo punto de control deslizante y dibuja un
nuevo segmento de lnea a partir del punto de control deslizante seleccionado.

Finalizar la lnea
+ clic completa la lnea (mantnla seleccionada), o pulsa "Esc" para terminar la
lnea y deseleccinala. El prximo clic crear una nueva lnea.

Aadir un nuevo punto de control


La herramienta de EDICIN DE FORMAS tiene tres modos dependiendo si no hay
ningn punto de control seleccionado (un clic iniciar una nueva lnea), si est
seleccionado un control del extremo de la lnea (un clic aadir una nueva seccin) o
si est seleccionado uno o ms controles (puedes arrastrar o cambiar los controles
deslizantes).

En el modo actual, la barra de informacin muestra lo


siguiente:

NUEVO :
clic para comenzar una nueva lnea.
AADIR :
clic para extender la lnea.
CAMBIAR : arrasta o elimina puntos de control.

Esto solo es aplicable a la herramienta de edicin de formas.

Al final de una lnea:

Selecciona la lnea, despus:

1. De ser necesario, haz clic en el punto de fin para seleccionarlo.


2. Coloca el cursor y haz clic para aadir una nueva seccin.

www.magix.es
La herramienta de edicin de formas 159

En el medio de una lnea:

Selecciona la lnea, despus:

1. Haz clic sobre la lnea para aadir un nuevo punto de control sobre la lnea.
2. Arrastra el punto de control a la posicin deseada.

Al inicio de una lnea:


Si el punto de fin est seleccionado y haces clic sobre el punto de inicio, la forma se
cerrar. Esto se describe en "Cerrar una forma" (en la pgina 152). Para aadir un
nuevo control deslizante en el inicio de una lnea:

1. Termina la lnea con + clic.


2. Haz clic en el punto de inicio.
3. Coloca el cursor en posicin y haz clic.

Seleccionar mltiples puntos de control


Es posible que quieras seleccionar varios puntos de control para, por ejemplo,
eliminarlos o moverlos como un grupo o cambiar una regin de puntos a lneas curvas
o rectas. Para esto:

1. Selecciona un punto de control con un clic.


2. + clic sobre otros puntos de control para seleccionarlos. ( + clic tambin
elimina la seleccin).
- O + Ctrl+clic sobre un punto de control para seleccionar todos los puntos
de control de la lnea.
- O arrastra el cursor del ratn diagonalmente para crear un rectngulo de
seleccin. Todos los puntos de control que se encuentren dentro del
rectngulo se seleccionarn.
- O + arrastra el cursor del ratn diagonalmente para crear un rectngulo de
seleccin. Esto aade todos los puntos dentro del rectngulo a aquellos que
ya estn seleccionados.
3. Si la lnea tiene uno o ms puntos de control seleccionados:
- Fin mueve la seleccin al final de la lnea.
- Inicio mueve la seleccin al comienzo de la lnea.
- Tab mueve la seleccin al prximo punto de control hacia el fin de la lnea.
- + tab mueve la seleccin al prximo punto de control hacia el inicio de la
lnea.
160

Los puntos de inicio y fin son importantes cuando se aplican flechas (en la pgina
166).

Eliminar puntos
Selecciona el o los puntos de control tal como se describe
anteriormente y haz clic sobre el botn ELIMINAR PUNTOS (barra de
informacin del EDITOR DE FORMAS ) o pulsa la tecla Supr.

Mover puntos de control - Herramienta de


edicin de formas
Puedes mover el o los controles deslizantes seleccionados:

Arrastra los controles deslizantes usando el ratn.


O utiliza las teclas de flechas de tu teclado.

O para mover un solo control deslizante, introduce los valores nuevos en los campos
de texto de la barra de informacin (ver ms abajo).

Utilizacin de los campos de texto de la barra de


informacin
Los dos campos de texto
centrales siempre
muestran las
coordenadas X/Y del
punto seleccionado.

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 pgina. Puedes cambiar esto en la pestaa "Cuadrcula y regla (en la pgina 492)"
en el dilogo de opciones.

Si el punto seleccionado se encuentra al final de una seccin de lnea curva, los


campos izquierdos muestran la longitud y el ngulo de la lnea. Puedes ajustar estos
valores introduciendo uno nuevo y pulsando Intro.

www.magix.es
La herramienta de edicin de formas 161

Longitud y ngulo para la lnea recta


Posicin del punto seleccionado
Posicin del control de la curva

Suavizar una lnea


Solo con herramienta de edicin de forma.

Las formas importadas de un examinador pueden contener puntos innecesarios sobre


las lneas. Las lneas con demasiados puntos pueden ser poco manejables y reducir la
velocidad de renderizacin. MAGIX Web Designer 11 Premium puede suavizar la lnea
para eliminar puntos innecesarios.

Selecciona todos los puntos de la parte de la lnea que quieres suavizar. (Lee ms
arriba). Es probable que la forma ms sencilla de seleccionar una gran cantidad de
puntos sea la seleccin con arrastre sobre la regin en la HERRAMIENTA DE EDICIN DE
FORMAS .

Arrastra la barra de suavizado del final de la barra


de informacin de la EDICIN DE FORMAS .

Los puntos eliminados se recuerdan para que puedas realizar otros cambios al
suavizado de la lnea con solo ajustar la barra deslizante. Los puntos eliminados se
eliminan cuando realizas otra edicin a la lnea como, por ejemplo, arrastrar un
control deslizante.

Consejo: para asegurarte de que no se borren puntos importantes, comprueba que


no estn seleccionados. ( + clic sobre un punto seleccionado para eliminar la
seleccin).
162

Restringir la lnea
Cuando arrastras un punto de control y pulsas la
tecla de restriccin (Ctrl), el movimiento se
limitar al ngulo de restriccin (controlado en el
dilogo de OPCIONES , en la pestaa GENERAL ). Al
arrastrar un control deslizante de curva, el
ngulo est restringido.

Convertir una lnea recta en una curva (y


viceversa)
1. Selecciona los puntos de control de los dos finales del segmento de lnea.
2. Haz clic en CONVERTIR EN LNEA o CONVERTIR EN CURVA en la barra de
informacin o pulsa L o C en tu teclado.

Despus de cambiar el tipo de lnea, es posible que quieras mover los controles de
curva para una transicin ms suave entre los segmentos de lnea curvos y rectos.

Puedes seleccionar varios segmentos de lnea y convertirlos. Los puntos de control de


ambos extremos del segmento deben estar seleccionados.

Cambiar curvas
Uso del control de curva
Arrastrar el control de curva ajustar la curva de los segmentos de curva contiguos.

Mueve los controles deslizantes de curva hacia o desde


el punto de control para arrastrar la curva en la direccin
requerida.

www.magix.es
La herramienta de edicin de formas 163

Arrastrar el segmento de lnea


Tambin puedes cambiar la curva, arrastrando el segmento de lnea entre los puntos.

Nota la diferencia entre arrastrar una lnea para cambiar su forma y hacer clic en la
lnea para aadir un nuevo punto de control. Arrastrar un segmento de lnea recto lo
cambia a un segmento de lnea curvo.

Crear uniones en punta


Generalmente, MAGIX Web Designer 11 Premium dibuja una curva suave a travs de
un punto de control. Para esto, los dos controles de curva a cada lado del punto de
control estn unidos. Si se mueve un control de curva, tambin se mover el otro.

Muchas veces quieres crear una unin en punta. Para esto, necesitas desvincular los
controles de curva:

1. Haz doble clic sobre el punto de control.


2. O selecciona el punto de control y:

Haz clic sobre el botn UNIN EN PUNTA Z o pulsa Z en tu teclado.

Ahora puedes mover cada control de curva de forma independiente.

Crear uniones en curva


Para convertir una unin en punta en una curva:

1. Haz doble clic sobre el punto de control.


2. O selecciona el punto de control y:

Haz clic sobre el botn UNIN EN CURVA S o pulsa S en tu teclado.

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.
164

Equilibrar curvas
El equilibrio hace que los dos controles deslizantes de la curva se encuentren a la
misma distancia del punto, lo que resulta en curvas ms simtricas y suaves. Para
equilibrar una curva, selecciona el control deslizante del punto, luego arrastra uno de
los controles deslizantes de curva mientras mantienes la tecla SHIFT presionada. A
medida que arrastras uno de los controles deslizantes de la curva, el otro se mover
para ser exactamente opuesto y tener la misma distancia desde el control deslizante
del punto.

Unir lneas
Para unir lneas ambas tienen que estar seleccionadas (los deslizantes de punto se
muestran en ambas lneas): Con la herramienta de SELECCIN , mantn presionado
"" y haz clic en las lnea para seleccionarlas (si ya te encuentras en la herramienta
de EDICIN DE FORMAS , pulsa "Alt + S" si quieres ir a la herramienta de SELECCIN ,
para seleccionar la segunda lnea, presiona " + clic", y luego "Alt + S" para volver a la
herramienta de EDICIN DE FORMAS .

El modo de seleccin de objetos est explicado en detalle en el captulo "Seleccin


de objetos (en la pgina 106)".

Una vez que ambos objetos estn seleccionados, en la herramienta de EDICIN DE


FORMAS , arrastra el control deslizante del extremo de la lnea hasta el extremo de la
otra lnea. Mientras arrastras, el cursor del ratn mostrar un smbolo + para indicar
que las lneas se unirn.

www.magix.es
La herramienta de edicin de formas 165

Si los extremos de ambas lneas ya se encuentran uno muy cerca del otro, pero no
estn unidos, puedes ampliar el tamao con el zoom, o alejar el punto de fin y
despus volverlo a arrastrar para llevarlo hasta el punto de fin y ver el "+" que indica
que las lneas se unirn.

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, slo puedes unir
lneas y no formas. Las formas son objetos cerrados y, por lo tanto, no tienen
controles deslizantes de fin.

Cambiar el ancho de lnea (grosor)


Para cambiar el ancho de la lnea o del contorno de una forma, primero selecciona el
objeto o los objetos:

Introduce un nuevo valor para el ancho de lnea en el campo de texto


de la barra de control ESTNDAR o escoge del men uno de los
grosores de lnea por defecto.

El grosor de la lnea se mide tradicionalmente en puntos (abreviado pt.) 1 punto es


1/72 de una pulgada o aprox. 0,3mm, o un poco menos del grosor de un pxel de
pantalla si se visualiza al 100% del zoom

Puedes usar cualquiera de las unidades de medida estndar de MAGIX Web


Designer 11 Premium.

Puedes introducir el valor del ancho en cualquier unidad y MAGIX Web Designer 11
Premium lo convertir al nmero correcto de puntos. Por ejemplo, puedes introducir
0,5cm y obtendrs una lnea con un grosor de medio centmetro, pero el campo del
ancho de lnea indicar un valor cercano a 14pt.

Si no has seleccionado ningn objeto y cambias el valor del grosor de la lnea, esto
cambiar el ancho por defecto para todas las nuevas lneas.

Nota: el ancho de lnea cero es un caso especial y no debera utilizarse. Esto dibuja
una lnea de un pxel. El tamao verdadero depender del dispositivo en el que se
visualizar el dibujo. En el monitor, un pxel es claramente visible y nunca se ve con
antialiasing. En dispositivos como impresoras o imagesetters, que presentan una
resolucin mucho ms alta, la lnea es casi invisible. (Las lneas con ancho cero de
archivos importados se convierten a 0,25 pt.)
166

Galera de lneas
La GALERA DE LNEAS puede utilizarse para aplicar una gama de estilos o atributos de
lnea como, trazos de pincel, plantillas con guiones, puntas de flecha y ms.

Para ver la GALERA DE LNEAS :

Selecciona "HERRAMIENTAS > GALERA DE LNEAS "


O haz clic en la pestaa GALERA DE LNEAS en la barra de GALERAS.

La GALERA DE LNEAS est separada en secciones. Para abrir o cerrar una seccin, haz
clic en el pequeo icono de carpeta de la ventana de la galera.

Ancho de lnea
Tipo de unin
Extremo de lnea

Para aplicar cualquier estilo o atributo de lnea desde la galera puedes:

www.magix.es
La herramienta de edicin de formas 167

arrastrar y soltar el estilo deseado desde la galera hasta la forma o lnea;


hacer doble clic sobre el estilo deseado en la galera;
seleccionar el estilo y despus hacer clic sobre el botn APLICAR .

Ancho de lnea
El campo de texto que se encuentra encima de la galera es una copia del campo de
texto de la barra de control estndar.

Trazos de pincel
Hay varias secciones que muestran una seleccin de varios estilos de pincel.

Modelo de guin
Esta seccin ofrece una seleccin de estilos de lnea con guiones.

Puntas de flecha
La mejor forma de aplicar una punta de flecha es utilizar la HERRAMIENTA DE LNEAS
RECTAS Y FLECHAS (en la pgina 154), tal como se ha descrito anteriormente en este
captulo. Sin embargo, tambin puedes utilizar la galera de lneas. Arrastra y suelta la
punta de flecha desde la galera hasta el extremo apropiado de la lnea.

Como alternativa para aplicar una punta de flecha:

Haz doble clic sobre la punta de flecha en la galera.


O, selecciona la punta de flecha deseada y pulsa APLICAR .

Web Designer tiene dos tipos de diseos de flecha: comienzo y fin. Si la lnea ya tiene,
por ejemplo, una punta de flecha de comienzo, la punta de flecha aplicada se colocar
automticamente en el extremo final de la lnea.

Si la lnea no tiene puntas de flecha y pulsas el botn APLICAR o haces doble clic sobre
un estilo para aplicarlo, la punta de flecha se colocar al final de la lnea.

El tamao de la punta de flecha depende del ancho de la lnea. Las lneas ms anchas
tendrn puntas de flecha proporcionalmente ms 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 lnea.
168

Para informacin general sobre galeras, consulta Manejo de documentos (en la


pgina 95).

Cambiar el tipo de unin


Este control en la parte superior de la GALERA DE LNEAS configura el estilo de las
esquinas.

Para cambiar una lnea existente, selecciona la


lnea.
Para cambiar el tipo de unin actual, deselecciona
todas las lneas.
Selecciona el tipo deseado del men.

Cambiar extremo de lnea


Este control en la parte superior de la GALERA DE LNEAS configura el estilo de los
extremos de la lnea.

Para cambiar una lnea existente, selecciona la


lnea.
Para cambiar el extremo de lnea por defecto,
deselecciona todas las lneas.
Selecciona el tipo deseado del men.

www.magix.es
Manejo de formas 169

Manejo de formas

Herramientas de dibujo y forma

Usa cualquiera de estas herramientas para crear formas regulares.

HERRAMIENTA DE RECTNGULO ("M")


HERRAMIENTA DE ELIPSE ("L")
HERRAMIENTA DE FORMA RPIDA ("Shift + F2")

La HERRAMIENTA DE RECTNGULO crea rectngulos y cuadrados. La HERRAMIENTA DE


ELIPSE crea crculos y elipses. La HERRAMIENTA QUICKSHAPE crea polgonos, estrellas y
smartshapes.

Crear rectngulos y cuadrados


Para crear un rectngulo:utiliza la herramienta de RECTNGULO (" + F3" o
"M").

Haz clic y arrastra para dibujar un nuevo rectngulo.

Crear un cuadrado
Para crear un cuadrado en vez de un rectngulo, pulsa Ctrl mientras arrastras.

Creacin y edicin de rectngulos con esquinas


redondeadas
Para que las esquinas de tu rectngulo sean redondeadas, seleccinalo y luego
pulsa el botn "Esquinas redondeadas" en la barra de informacin de la
HERRAMIENTA DE SELECCIN .

Puedes arrastrar los controles deslizantes de las esquinas para ajustar el dimetro de
las esquinas redondeadas.
170

Para cambiar el tamao de los rectngulos ve a la HERRAMIENTA DE RECTNGULO (y


arrastra los controles deslizantes de las esquinas) o a la HERRAMIENTA DE SELECCIN .

Ten en cuenta que si cambias la relacin de aspecto de una esquina redondeada de


un rectngulo utilizando la herramienta de seleccin (extendiendo slo una
dimensin), la relacin de aspecto de las esquinas redondeadas no cambiar. Pero si
seleccionas varios objetos o si extiendes un grupo con un rectngulo con esquinas
redondeadas, la relacin de aspecto de las esquinas no se mantendr.

Crear crculos y elipses


Para crear una elipse o un crculo:

Selecciona la herramienta de ELIPSES (" + F4" o "L") de la barra de


herramientas principal.

Los botones RADIO Y DIMETRO de la barra de informacin crean automticamente


crculos.

Radio
Dimetro
Creacin con lmites

Selecciona la opcin RADIO para dibujar crculos. El lugar en dnde empieces a


arrastrar ser el centro del crculo.

Selecciona la opcin DIMETRO. Ahora el lugar en dnde empieces a arrastrar


determinar el borde del crculo.

Con el botn de CREACIN CON LMITES seleccionado, arrastra el ratn a travs del
lienzo y se crear una elipse. Para crear un crculo en vez de una elipse, pulsa "Ctrl"
mientras arrastras.

Puedes convertir una elipse en un crculo en cualquier momento haciendo doble clic
sobre un control deslizante.

www.magix.es
Manejo de formas 171

Smartshapes
Usa la HERRAMIENTA QUICKSHAPE para insertar SMARTSHAPES: una
coleccin de formas tiles ya preparada como flechas, globos de dilogo,
campos de texto y componentes geomtricos.

Con la HERRAMIENTA QUICKSHAPE seleccionada, haz clic en el botn INSERTAR de la


barra de informacin y elige entre las formas disponibles en el men desplegable. Si
seleccionas RECTNGULO , ELIPSE, PANEL DE TEXTO o GLOBO DE DILOGO la forma se
colocar directamente en tu documento.

Las otras opciones abrirn el CATLOGO DE CONTENIDO ONLINE, donde estn


disponibles numerosas formas. Elige una forma e imprtala simplemente en tu
documento haciendo doble clic o haciendo clic en el botn IMPORTAR . Tambin
puedes acceder a smartshapes a travs de la GALERA DE DISEOS y el men principal
INSERTAR .

Smartshapes de flecha, globo de dilogo y segmento de tarta.

Edicin de smartshapes
Smartshapes viene con controles deslizantes predefinidos, lo que te permite editar las
formas de forma fcil e intuitiva. Simplemente modifica o curva una flecha o para
editar un globo de dilogo usando los controles deslizantes, por poner algn de
ejemplo. Los controles deslizantes aparecen cuando seleccionas la forma usando la
HERRAMIENTA QUICKSHAPE , y si pasas sobre el control deslizante, la barra de estado te
da una prctica descripcin de la funcin.

Cuando ests en la herramienta de seleccin, haz doble clic sobre cualquier


smartshape y esto te lleva a la herramienta quickshape, de forma que puedes
arrastrar el ratn sobre los controles deslizantes de la forma.
172

Las smartshapes originales (a la izquierda) y las versiones editadas (a la derecha) que muestran
los controles deslizantes de smartshapes.

Con el globo de dilogo, los controles deslizantes te permiten cambiar las


dimensiones del globo, aadir una curvatura, controlar el rea de texto y modificar el
tamao y orientacin de la flecha del globo.

Cuando smartshape contiene texto, puedes editarlo: cambia su tamao y fuente, etc.
as como para cualquier otro texto, usando la HERRAMIENTA DE TEXTO.

Para cambiar los colores de una smartshape, puedes seleccionar la forma y hacer clic
en los colores sobre la lnea de colores o abrir el EDITOR DE COLOR . O arrastra el color
desde la lnea de color y sultalo sobre el elemento. Donde hay mltiples colores en la
forma, el dilogo Reemplazamiento de color (en la pgina 189) aparecer
permitindote elegir qu color quieres cambiar.

Hay muchas smartshape diferentes y vers ms aparecer con el tiempo segn el


programa vaya buscando nuevas formas modificadas en Internet cuando inicias el
programa. As que mantente al tanto para agregar nuevas formas.

www.magix.es
Manejo de formas 173

Crear polgonos y estrellas


Usa la herramienta QUICKSHAPE para crear una forma simtrica regular con esquinas
en punta o redondeadas. Luego puedes arrastrar los extremos para doblar los lados y
cambiar la cantidad de lados o convertir el objeto en una elipse, un polgono o una
estrella.

1. Selecciona la herramienta QUICKSHAPE (" + F2") de la barra de


herramientas desplegable.
2. Selecciona CREAR POLGONOS o FORMAS DE ESTRELLA de la barra de
informacin.
3. Selecciona la cantidad de lados en el men o introduciendo el valor en el
campo de texto.

Modos de creacin: Radio/Dimetro/Lmites


Polgono
Elipse
Formas de estrella
Esquinas redondeadas
Restaurar bordes
Nmero de lados
Men de elementos editables
Edicin de campos
Insertar smartshapes

Para crear un polgono o estrella arrastra el ratn exactamente de la misma manera


que para un crculo o elipse usando los botones de creacin de lmites, dimetro o
radio para controlar el punto de origen de tu forma.

Desde el centro hacia afuera (botn RADIO).


O desde una esquina externa (botn de DIMETRO).
O crea en diagonal un rectngulo imaginario que encierre el polgono (CREACIN
CON LMITES ) lo que te permite distorsionar el polgono o la estrella.
174

Polgonos o estrellas con esquinas redondeadas


Selecciona el botn ESQUINAS CURVADAS o haz
doble clic sobre un punto de esquina.

El polgono tiene controles


deslizantes adicionales
(controles deslizantes de
radio) donde comienza el
redondeo. Para aumentar o
disminuir el radio, arrastra
cualquiera de los controles de
radio.
Para eliminar las esquinas redondeadas:

Haz clic en el botn ESQUINAS CURVADAS .


O doble clic sobre el control deslizante.

Editar polgonos y estrellas


La herramienta SELECCIN te permite mover, girar, doblar y cambiar el tamao de una
forma. (La herramienta SELECCIN se describe en Manejo de objetos (en la pgina
106)).

Usando la herramienta QUICKSHAPE puedes cambiar el tamao o rotar:

Arrastra los controles deslizantes de esquina.


O selecciona TAMAO Y ROTACIN del men ELEMENTOS EDITABLES . Introduce
los valores requeridos en los campos de texto.

Tambin puedes desplazar los valores usando los botones de la derecha.

Para mover:

Arrastra el control deslizante del centro de la forma.


O utiliza las teclas de flechas de tu teclado.
O selecciona CENTRO en el men ELEMENTOS EDITABLES . Introduce los valores
X/Y deseados en los campos de texto.

Aplica o elimina las esquinas redondeadas con un clic sobre el botn


ESQUINAS CURVADAS .

www.magix.es
Manejo de formas 175

Cambia el polgono a una elipse haciendo clic en el botn CREAR ELIPSE o


haciendo doble clic en el centro del polgono.

Haz un polgono con forma de estrella haciendo clic en el botn FORMAS DE


ESTRELLA . O haciendo doble clic en un lateral.

Arrastra los lados para curvarlos. Mueve el cursor sobre la esquina del polgono (se
convertir en una flecha). Ahora puedes arrastrar los lados.

A la izquierda se encuentran los polgonos


originales. Simplemente arrastra los lados para
crear lados curvos.
"Ctrl+doble clic" sobre el lado o un clic sobre RESTAURAR BORDES para que los lados
vuelvan a ponerse rectos.

Cambia la cantidad de lados introduciendo el nmero en el men o


seleccionando una de las opciones.

Edicin de estrellas
Para aumentar o disminuir la profundidad de la forma de estrella:

Arrastra un control deslizante de estrella o


selecciona RADIO Y DESPLAZAMIENTO DE LA
ESTRELLA del men de ELEMENTOS EDITABLES .
Introduce los valores requeridos en los campos La forma original est a la izquierda.
de texto.
O arrastra los lados para curvarlos:

La forma original est a la izquierda.

Tambin puedes desplazar los valores usando los botones de la derecha.

Desplazamiento desde el centro


Desplazamiento angular

Si haces "Ctrl + arrastrar" un lado de una estrella, todos los lados se desplazarn de
forma simtrica. Si pulsas "Ctrl + " y arrastras, se desplazar el par de lados como
imagen reflejada. "Ctrl+doble clic" sobre el lado o un clic sobre RESTAURAR BORDES
para que los lados vuelvan a ponerse rectos.
176

Combinar formas
La opcin del men ARREGLO > COMBINAR FORMAS te ofrece una amplia gama de
opciones avanzadas para combinar formas con el objetivo de crear nuevas formas
como, aadir, separar o cortar. Puedes utilizar la combinacin de formas en cualquier
tipo de objeto, incluido los mapas de bits.

Crear agujeros en las formas


Escoge ARREGLO> COMBINAR FORMAS > SUSTRAER FORMAS . Esto es similar a utilizar
unir formas (descrito anteriormente). Las diferencias son:

La forma de arriba (o el grupo de arriba) recibe un agujero de las otras formas.


Los atributos y colores de lnea de las formas subyacentes no se modificarn.
Combinar formas modifica las lneas fsicamente. La nica forma de restaurar las
formas originales es utilizar deshacer.
La cantidad de formas superpuestas no tiene efecto.

Fusionar varias formas en una sola


Por ejemplo, para crear la forma de la derecha a partir de las tres formas de la
izquierda:

1. Crea dos crculos y el rectngulo.


2. Selecciona las tres formas.
3. Haz clic derecho y escoge "COMBINAR FORMAS" > "AADIR FORMAS" .

La nueva forma tomar los atributos y colores de la forma de arriba (en este caso el
rectngulo de la ilustracin.)

Interseccin de formas
Con FORMAS DE INTERSECCIN , el nuevo objeto se crea de esas partes de las formas
inferiores que estn cubiertas por el objeto de arriba.

Selecciona las formas que quieres utilizar y la


forma de arriba.

www.magix.es
Manejo de formas 177

Escoge ARREGLO> COMBINAR FORMAS >


FORMAS DE INTERSECCIN . Esto crea una
nueva forma. La forma de arriba desaparece.

Los atributos y colores de lnea de las formas subyacentes no se modificarn. Las


reas no cubiertas por la forma de arriba se eliminarn. La forma de arriba puede ser
un grupo para una sustraccin para completa. (Los grupos se describen en el captulo
Manejo de objetos (en la pgina 133)).

Separar una forma


Si quieres separar una lnea o una forma: selecciona un punto de control existente de
la lnea o contorno de la forma, o crea uno nuevo donde quieres separar la lnea (clic
sobre la lnea en la herramienta de EDICIN DE FORMAS; ver arriba). Haz clic sobre el
botn SEPARAR EN PUNTOS o pulsa la B de tu teclado.

Si separas una lnea, el cambio no ser visible. Sin embargo, si mueves un punto de
control, solo se mover una parte de la lnea. Si separas una forma, se convertir en
una lnea. El relleno desaparecer.

Nota: cortar formas (parte de Arreglo > Combinar formas) te permite separar
formas en dos formas individuales. Esta funcin se describe en el captulo Trabajar
con formas (en la pgina 177).

Cortar formas
MAGIX Web Designer 11 Premium te permite cortar formas en dos o ms partes.
Puedes usar un objeto slido o una lnea. Por ejemplo, para cortar un segmento de un
crculo:

1. Crea un crculo y un tringulo arriba


2. Seleccinalos.
3. Escoge ARREGLO> COMBINAR FORMAS >
CORTAR FORMAS . Las esquinas del
tringulo cortarn el crculo en dos
formas. El tringulo desaparecer.
4. Ahora puedes arrastrar el segmento fuera
del crculo.
178

Tambin puedes utilizar una lnea para cortar un objeto:

La lnea debera estar dibujada completamente a travs del objeto y extenderse ms


all. (Como se muestra en la ilustracin.) Si la lnea es demasiado corta, slo se
realizar un pequeo corte.

Divisin de formas complejas


Si utilizas las opcin ENTRECRUZAR TODAS LAS FORMAS , los objetos seleccionados se
cortan por las lneas de la interseccin.

Tres rectngulos seleccionados con un


borde de 1 px.

"ARREGLO" > "COMBINAR FORMAS" >


"ENTRECRUZAR TODAS LAS FORMAS"
divide las formas por las lneas de
interseccin. Los bordes de 1 pt.
muestran los contornos de las nuevas
formas.
Luego podrs separar los rectngulos
para ver las nuevas formas.

Los atributos y colores de lnea de las formas entrecruzadas no se modificarn.

www.magix.es
Trabajar con colores 179

Trabajar con colores


MAGIX Web Designer 11 Premium te permite controlar la aplicacin, creacin y
modificacin de los colores de los objetos. Para documentos simples, puedes escoger
los colores de la paleta de colores en pantalla, la lnea de colores. Las operaciones de
color ms avanzadas se describen ms adelante.

La lnea de colores
La lnea de colores se muestra en la parte inferior de la ventana. Te permite ver los
colores de relleno y lnea, te da acceso al editor de colores y proporciona la paleta de
colores predefinidos incluyendo la opcin "sin color".

MUESTRA DE COLOR: la parte exterior de la muestra de color en el extremo


izquierdo muestra la lnea de colores, mientras que el centro muestra el color de
relleno. Estos son los colores de cualquier objeto seleccionado o los atributos de
color actuales si no se ha seleccionado ningn objeto.

Este botn permite el acceso al editor de color (en la pgina 183).


SELECTOR DE COLOR: usa la pipeta para escoger un color de cualquier parte del
documento o cualquier parte de la pantalla del ordenador. Consulta Usar la
pipeta para escoger colores (en la pgina 184), para ms detalles.
SIN COLOR: haciendo clic aqu puedes aplicar un "relleno sin color". Con
"Shift+clic" puedes aplicar "sin color" a una lnea. Ten en cuenta que no es lo
mismo que 100 % transparente. "Sin color" y transparencia son diferentes. Una
forma a la que se le aplica transparencia sigue siendo una forma slida, mientras
que una forma rellenada con "sin color" queda hueca. El botn SIN COLOR
tambin se puede utilizar para restaurar los colores originales de una foto a la
que se le haya aplicado un color continuo.
Marcador de color de relleno actual
Marcador de color de lnea actual

Si la longitud de la lnea de color excede la ventana, puedes desplazarte por la lnea de


colores con la barra de desplazamiento inferior o arrastrando la lnea de color con "Alt
+ arrastrar".

MAGIX Web Designer 11 Premium te ofrece varias opciones para el tamao


visualizado de la lnea de colores (descrito en Personalizacin de Web Designer)
180

Colores de la lnea de colores

Colores con nombre (originales): primero se encuentran los colores con nombre
(si se encuentran presentes en el documento, ver ms abajo). Los colores con
nombre se utilizan para asignar colores originales a las plantillas y diseos, para
que el esquema de color de un diseo pueda cambiarse sin tener que editar cada
objeto de forma individual.
Colores vinculados: son aquellos colores que estn relacionados con una sombra
o un matiz y se muestran de forma diferente en la lnea de color (pequeos
rectngulos redondeados), de modo que resulta mucho ms fcil distinguir los
colores con nombres independientes de aquellos que estn vinculados a un color
principal. Leer el captulo Creacin de un tinte, una tonalidad o un color
vinculado (en la pgina 194).
Colores de paleta: hay una paleta "estndar" de 46 colores predefinidos. Hay 5
sombras de 7 colores estndar y 10 sombras de grises, negros y blancos. Los
colores de la paleta estndar no se pueden editar (es decir, no son colores con
nombre) y tienen una seleccin simple y limitada de colores que se utilizan para
aplicarlos a objetos (ya sea arrastrando hasta el objeto o mediante clic).

Los marcadores pequeos en los iconos de color muestran cul 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 lnea.
Los marcadores en forma de cruz muestran los atributos de color activo, si
no hay ningn objeto seleccionado. El color de lnea 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 tambin escogiendo un color con el selector de color de un objeto


existente, consulta Usar la pipeta para escoger colores (en la pgina 184). Los
marcadores de lnea de colores se actualizan inmediatamente e indican el color del
objeto bajo la pipeta al arrastrarlo alrededor.

Reordenar los colores de la lnea de color.


Es posible que prefieras cambiar el orden de los colores de la lnea de color.
Simplemente pulsa Ctrl y arrastra los colores sobre la lnea. Con esto tambin se
reordenar la GALERA DE COLORES . Slo los colores con nombre pueden ser
reorganizados en la lnea de color.
www.magix.es
Trabajar con colores 181

Men contextual de la lnea de colores


Haz clic derecho sobre un color de la lnea de colores para ver un men contextual
con las siguientes opciones:

EDITAR Abre el editor de color para editar el color con


nombre (no disponible para los colores de la paleta)
ESTABLECER COLOR DE RELLENO Configura este color como el color de relleno o de
/ ESTABLECER COLOR DE LNEA lnea del objeto seleccionado
REEMPLAZAR COLORES Esta opcin se muestra solo cuando el objeto
seleccionado tiene partes con mltiples componentes
o mltiples colores,
RENOMBRAR Cambiar el nombre del color con nombre (no
disponible para los colores de paleta)
ELIMINAR Borra el color con nombre (no disponible para los
colores de paleta)

Si el objeto seleccionado es un mapa de bits, tambin puedes consultar las opciones


CONFIGURAR COLOR OSCURO DE TONO CONTINUO / CONFIGURAR COLOR CLARO DE
TONO CONTINUO. Consulta Coloreado de mapa de bits (en la pgina 246) para ms
informacin.

Con un clic derecho sobre la opcin "sin color", las opciones de color de relleno y lnea
se reemplazarn por ELIMINAR COLOR DE RELLENO / ELIMINAR COLOR DE LNEA.

Aplicar colores de relleno y lnea con arrastrar y


soltar
Para aplicar un color de relleno a un objeto (seleccionado o sin seleccionar),
arrastra un color desde la lnea de colores y sultalo en el centro de la forma.
Para establecer el color de lnea o contorno, suelta el color sobre el contorno en
vez de sobre el centro.
Para cambiar el color actual de relleno, arrastra un color a un espacio en blanco.
Para cambiar el color de fondo de la pgina, arrastra un color hasta el fondo de
pgina.
Para cambiar cualquier color en un objeto complejo o multicolor como un botn,
panel de texto, forma con relleno graduado, etc. suelta el color en cualquier
parte del objeto.

Al arrastrar colores, un indicador al lado del cursor te dir cul 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 pgina 249).
182

Establecer color de lnea (cuando se arrastra sobre una lnea).

Establecer color de relleno actual (cuando se arrastra sobre un espacio vaco).

Establecer color de inicio de relleno con gradacin (cuando se arrastra sobre el


inicio de un relleno).
Establecer color final de relleno con gradacin (cuando se arrastra sobre el final
de un relleno).
Establecer color de fondo de pgina o tablero de dibujo (cuando se arrastra un
color hasta la pgina o tablero de dibujo).

En vez de arrastrar y soltar, si has seleccionado un objeto, puedes hacer un simple clic
sobre la lnea de color. As se abre el Men contextual de color de lnea.

En los otros casos, puedes modificar el color de la lnea con "Shift" + clic sobre la lnea
de color.

Si has seleccionado una foto o una forma con relleno de mapa de bits, un clic sobre el
color de lnea muestra el men contextual con opciones de contorno incluidas. Color
continuo 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 oscuro es negro. Puedes configurar ambos colores
continuos a travs del men contextual de la lnea de colores (leer ms arriba).
Consulta Colorear mapa de bits (en la pgina 246) para ms informacin.

Para establecer la opcin "sin color" en un relleno o


lnea, realiza los pasos descritos anteriormente, pero
escoge la opcin "Sin color" en vez de un color.

Editar el color de un objeto


Para editar el color de relleno del objeto o objetos seleccionados:

Selecciona "HERRAMIENTAS" > "EDITOR DE COLOR" ("Ctrl + E").


O haz clic sobre el icono EDITOR DE COLOR en la lnea de colores.
O haz clic derecho sobre el objeto y selecciona COLOR DE RELLENO
O haz doble clic sobre el icono de color de lnea y relleno actual en la lnea de
colores (al borde del panel ms a la izquierda).

Para editar el color de lnea del objeto o objetos seleccionados

" + clic" sobre el icono EDITAR COLOR


O haz doble clic sobre el icono de color de lnea y relleno actual (al borde del
panel ms a la izquierda).

www.magix.es
Trabajar con colores 183

Esto muestra el EDITOR DE COLOR que te permite seleccionar cualquier color del
espectro. A diferencia de la mayora de los programas grficos, el Editor de color
puede permanecer en pantalla mientras continuas trabajando. Cambiar para reflejar
el color de los objetos seleccionados, y el poder arrastar la esquina inferior derecha
para redimensionar la ventana del EDITOR DE COLOR te permite ajustar el color del
objeto seleccionado fcilmente y con precisin.

Aplicacin de un color de fondo para el texto


Para aplicar un color de fondo para el texto, es decir, un color de fondo para destacar
el texto...

Destaca texto con la HERRAMIENTA DE TEXTO (EN LA PGINA 197) o selecciona


objetos de texto con la HERRAMIENTA DE SELECCIN (en la pgina 29)
Haz clic derecho sobre un color en la LNEA DE COLORES .
Selecciona ESTABLECER FONDO DE TEXTO

Para quitar el color de fondo...

Selecciona el texto
Haz clic derecho sobre SIN COLOR en la LNEA DE COLORES (en la pgina 179)
Selecciona la opcin ELIMINAR FONDO DE TEXTO

El editor de color
El editor de color se utiliza para cambiar el color de los objetos del documento.
184

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 lnea 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 aqu para seleccionar cualquier tonalidad del tono seleccionado.
Arrastra aqu para seleccionar cualquier tono.
Arrastra aqu para aumentar el tamao de la ventana.

La forma ms fcil de crear un color nuevo es seleccionar un tono de la lnea de color


inferior. Todos los matices de este tono se vern en la seccin superior: tan solo haz
clic o arrastra desde la seccin superior para seleccionar el nuevo color. Vers que los
objetos seleccionados cambian de color a medida que los ajustas en el editor de color
(lo que se llama "vista previa en tiempo real").

Por ejemplo, para seleccionar un color rosa, que es un matiz plido del rojo,
selecciona el color rojo en la seccin inferior y despus escoge un rojo muy plido
(rosa) en el rea superior derecha de la seccin superior.

Color previo y actual


Mientras arrastras hasta el editor de color, las dos pequeas muestras que se
encuentran en la esquina superior derecha del Editor de color muestran el color actual
y el previo (antes de que comenzaras con la edicin). Esto es til cuando quieres
realizar un cambio pequeo y comparar entre el color nuevo y el anterior.

Usar la pipeta para escoger colores


En vez de seleccionar tintes y tonalidades en el EDITOR DE COLOR puedes escoger un
color de cualquier parte del documento o de tu monitor, incluso de otras ventanas y
programas.

Para ello haz clic y arrastra la pipeta. A medida que arrastres, vers que el editor de
color toma el color que se encuentra debajo de la pipeta. Suelta el botn del ratn
cuando tengas el color deseado. Esta es una forma fcil y rpida de utilizar el mismo
color o copiar colores de fotos o de un objeto a otro.

Si el objeto bajo el cursor del ratn es complejo (p. ej. tiene aplicada una
transparencia) y el color no se puede determinar, se aplicar el color RGB de la
pantalla.
www.magix.es
Trabajar con colores 185

La muestra de color abre un pequeo popup en el cursor


del ratn que indica el color que se est probando en ese
momento. Este ser o el nombre de color de la paleta, el
nombre ya fijo de un color o el modelo y valor del color.

Operaciones de color avanzadas


Haz clic sobre VER OPCIONES AVANZADAS en el editor de color para ver la
parte inferior del dilogo que te ofrece ms opciones.

Sin color de relleno


Convertir color con nombre en local para frame/capa
Renombrar color con nombre
Valores de colores HSV
Valor de color hex RGB
Modelo de color (HSV, RGB o escala de grises)
Para leer ms sobre tipos de colores, consulta el captulo Creacin de un
tinte, una tonalidad o un color vinculado (en la pgina 194).

Aqu puedes introducir valores precisos RGB (o HSV). En general, se introduce un


color hexadecimal RGB para los grficos web. Los campos H , S y V te permiten
especificar el color con un valor porcentual HSV (valor de saturacin de tinte). En el
campo # puedes introducir el valor RGB en nmeros hexadecimales (0-F).

Aqu tambin estn disponibles los botones de "Sin color de relleno" y de "Ayuda".
186

Colores locales y colores originales


Web Designer tiene dos tipos de colores:

Los COLORES LOCALES se utilizan en un solo 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
mtodo ms 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 pgina como los botones o las barras de
navegacin. Cualquier edicin que se realice a un color con nombre se reflejar
en todos los objetos o partes del dibujo que usen ese color. Tambin puedes
copiar colores originales entre documentos. Los colores originales aparecen en
la lnea de colores. Si el diseo ya tiene colores originales y cargas o pegas
plantillas de la GALERA DE DISEOS 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 la mayora de plantillas para que coincidan
perfectamente con los diferentes colores originales de los elementos que
importes.

Importante: si seleccionas un objeto de la pgina que tiene un color con nombre y lo


modificas con el editor de color, el color se convertir en un color local en vez de un
color con nombre (porque se supone que si intentas editar el color del objeto, eso es
lo que quieres. Si lo que quieres hacer es cambiar el color con nombre y todas las
veces en las que se utiliza, entonces debes editar el color con nombre (en la pgina
190)).

Esquemas de colores originales


Muchos de los temas web ofrecidos en la GALERA DE DISEOS y en los paquetes de
plantillas que pueden adquirirse por separado incluyen esquemas de colores
alternativos que pueden aplicarse fcilmente a los sitios web que utilizan el mismo
tema para transformar el esquema de color de forma instantnea. Los esquemas de
color se pueden encontrar por lo general dentro de cada tema de la GALERA DE
DISEOS bajo TEMAS PARA PLANTILLAS DE PGINAS WEB , despus de todos los diseos
de pgina y elementos grficos independientes que conforman el tema. Todos tienen
"Esquema de color" en su ttulo en la GALERA DE DISEOS , por lo que pueden
identificarse fcilmente.

Para aplicar un esquema de colores a tu sitio web, simplemente arrastra el esquema


desde la GALERA DE DISEOS y sultalo en tu pgina. Puedes intentar aplicar los
www.magix.es
Trabajar con colores 187

esquemas de colores de un tema a un sitio web creado a partir de plantillas de otro


tema. Pero obtendrs resultados mezclados y algunos esquemas no funcionarn
correctamente con algunos temas. Por lo tanto, para mejores resultados, utiliza los
esquemas de colores del tema que has utilizado para crear tu sitio.

Uno de los esquemas de color que se ofrecen con cada tema concuerda con los
colores por defecto utilizados por ese tema. Esto te permite regresar fcilmente a los
colores originales, si lo prefieres, despus de experimentar con esquemas
alternativos.

Creacin de tus propios esquemas de colores


Es muy fcil crear tus archivos de esquemas de colores, que puedes compartir con los
usuarios de Web Designer para que ellos los utilicen en las pginas web creadas con
el mismo tema.

1. Carga una de las plantillas de pgina para el tema. Escoge una que muestre
todos los colores del tema de forma ms efectiva. De ser necesario, puedes
agregar ms elementos a la pgina para incluir toda la gama de colores
temticos.
2. Edita los colores con nombre del tema uno por vez, tal como se describe a
continuacin en la seccin "Edicin de colores con nombre" (en la pgina 190).
3. Una vez que ests 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. Tambin 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", podras llamarlo
"BetaThemeColorSchemeAzul.web".

Para comprobar tu esquema de colores, arrstralo y sultalo desde el explorador de


archivos hasta la pgina con los colores temticos por defecto. La pgina debera
cambiar de color instantneamente con tu esquema de colores.
188

Creacin de nuevos colores con nombre


Si quieres usar el mismo color en diferentes partes del dibujo, y si existe la posibilidad
de que quieras cambiarle el color en el futuro, se recomienda que crees un COLOR CON
NOMBRE . Esto es fcil en MAGIX Web Designer 11 Premium:

Selecciona el objeto que tiene el color que quieres usar y luego haz clic en NUEVO
COLOR CON NOMBRE en el EDITOR DE COLOR .

Haz clic para crear un nuevo color con nombre

Asgnale al color un nombre adecuado, como "color del coche" y haz clic en crear.
Vers el color nuevo aadido en la LNEA DE COLOR .

Ahora podrs aplicar el color a cualquier objeto como lo haces habitualmente,


arrastrndolo de la lnea de color y luego soltndolo, o solo con un clic (o con un clic
en el botn derecho para usarlo como lnea de color) para aplicarlo como color de
relleno. Cuando editas un color con nombre, todos los objetos que usen este color
cambiarn.

www.magix.es
Trabajar con colores 189

Reemplazar colores
Con Web Designer es ms fcil volver a colorear objetos agrupados complejos como
botones, paneles de texto, barras de navegacin, etc., ya que te ofrece una lista de
colores usados que te ayuda a elegir cual quieres reemplazar.

El dilogo de reemplazo de colores te permite seleccionar que color quieres reemplazar en el


grupo.

Puedes volver a colorear un elemento de una de las siguientes maneras:

Arrastra el color desde la lnea de color y sultalo sobre el elemento.


Selecciona un elemento y haz clic en un color de la lnea de color.
Selecciona el elemento y abre el EDITOR DE COLOR (Ctrl+E).

El editor mostrar una lista de colores de elemento en el men desplegable en la parte


superior. Selecciona el que quieres editar y usa el editor de color como de costumbre.

Ten en cuenta que al reemplazar los colores en grficos de esta forma, puedes
reemplazar el uso de colores con nombre por colores locales sin nombre, o
viceversa. As, por ejemplo, podras tomar un botn que tiene el "tema de color 1" y
reemplazarlo por el "tema de color 2". A partir de entonces, al editar el "tema de
color 2" en tu documento se cambiar tambin el color del botn. O bien, si
reemplazas el tema de color 1 con un color local, el botn ya no estar asociado a
ningn tema de color. Y puedes usar esta funcin para aplicar de forma rpida
colores con nombre en grficos que originalmente no estaban diseados para usar
tales colores.
190

Si seleccionas el elemento pluma, el "Editor de color" mostrar las gama de colores de reemplazo
disponibles.

Ten en cuenta que, cuando seleccionas un objeto con mltiples colores, la lista
desplegable del editor de color te muestra nicamente estos colores. El color de
relleno local, la lnea de color local y la lista de colores con nombre no estn
incluidas en la lista en este contexto para evitar hacer la lista demasiado larga y
confusa.

Cambiar color de fondo


Arrastra un color desde la lnea de colores y sultalo en el fondo de la pgina o del
tablero de dibujo para establecer su color. Si hay mltiples colores en el fondo, se
mostrar el dilogo "Color de reemplazo" para que elijas que color reemplazar.
Funciona igual que como se ha descrito arriba para los grupos con mltiples colores.

Para usar el editor de color para cambiar los colores de fondo, haz clic derecho en la
pgina y selecciona "FONDO DE PGINA" >"EDITAR COLOR DE PGINA" , o sobre el fondo
del tablero de dibujo y selecciona "TABLERO DE DIBUJO FONDO" >"EDITAR COLOR DEL
TABLERO DE DIBUJO" .

Editar colores con nombre


Hay cuatro modos diferentes de ver el color en el EDITOR DE COLOR para poder
editarlo:

Escoge del men en el EDITOR DE COLOR .


O haz clic sobre el color en la LNEA DE COLORES y selecciona EDITAR del men
que aparece.
www.magix.es
Trabajar con colores 191

O arrastra y suelta un color de la lnea de color sobre el EDITOR DE COLOR .


O bien arrastra y suelta un color de la GALERA DE COLORES (explicado ms
adelante) sobre el EDITOR DE COLOR .

Ahora podrs editar el color como lo desees. Todos los objetos que utilizan ese color
se actualizarn automticamente para mostrar el nuevo color en todas las pginas de
tu documento.

Renombrar colores con nombre


Mientras editas un COLOR CON NOMBRE, haz clic derecho sobre el EDITOR DE COLOR y
selecciona RENOMBRAR

O haz clic izquierdo sobre el color en la lnea de colores y escoge RENOMBRAR .

Eliminar colores con nombre


Para eliminar un color con nombre, haz clic sobre el color en la lnea de colores y
selecciona ELIMINAR .

Eliminar colores no utilizados


Para eliminar los colores no utilizados de la Lnea de color, abre la galera de colores y
selecciona una gama de colores (haz clic sobre uno y Shift+clic sobre otro), despus
pulsa el botn Eliminar. Se te preguntar si quieres eliminar solamente los colores no
utilizados. Sin embargo, ten en cuenta que los colores con nombre no utilizados, se
eliminarn automticamente cuando se guarda o carga un documento.

Importacin de colores con nombre


Al importar un diseo al documento actual (p.ej. al importar desde la GALERA DE
DISEOS , importar de un archivo XAR o pegar objetos de otro diseo), si alguno de los
nombres de los colores importados coincide con el nombre de los del diseo actual,
pero mantiene diferentes valores de color, aparecer una alerta como la siguiente:

Si deseas que lo objetos importados adopten los colores de tu diseo actual, elige la
opcin IGUALAR . Esto hace que todos los objetos que usan un nombre de color dado
utilicen la muestra existente de dicho color tal y como aparece en el documento
actual.
192

Si por el contrario deseas que los objetos importados mantengan sus propios colores,
selecciona la opcin NO IGUALAR . As se aaden nuevos nombres de colores a tu
diseo, con un nmero aadido al nombre de los colores para distinguirlos de los
colores que ya estn en el diseo actual. De esta forma los objetos importados
mantendrn sus propios colores.

Observa que si importas objetos de mltiples diseos diferentes y eliges siempre NO


IGUALAR , acabars con un gran nmero de nombres de colores diferentes en tu lnea
de color. Esto casi nunca resulta til. Por ello una alternativa mejor es usar la funcin
"Reemplazar color" descrita arriba para cambiar los colores de los objetos donde no
quieras que adopten los colores tema de tu documento.

La misma entrada se muestra si hay diferencias en la definicin del "estilo de texto"


entre el documento y el diseo importado. Ver esta entrada no significa
necesariamente que haya diferentes definiciones del nombre de color: podra deberse
tan solo a diferencias de "estilo de texto". Consulta la seccin de "Estilos de texto" del
captulo de "Manejo de texto" para ms detalles.

La entrada de "igualar" arriba incluye una casilla de NO PREGUNTARME DE NUEVO. Si


haces clic aqu, la opcin que elijas se aplicar a todas las importaciones futuras sin
preguntarte de nuevo. Sin embargo esto solo se aplica durante la sesin actual, por lo
que despus de reiniciar el programa se te preguntar de nuevo, en relacin a la
prxima importacin, cuando haya alguna discrepancia con los colores.

Usar la opcin IGUALAR significa que puedes escoger una plantilla, cambiar sus
colores de tema, importar a continuacin ms plantillas del mismo tema y los diseos
importados adoptarn automticamente los colores de tema que has modificado.

Por ejemplo, importa un botn grfico rojo de la GALERA DE DISEOS , cambia su color
de tema principal de rojo a verde, luego importa un logo grfico rojo del mismo tema y
elige la opcin IGUALAR . Cuando el logo aparece en tu diseo, en vez de ser rojo
habr recogido automticamente el color de tema verde escogido. Como en la
mayora de los temas el nombre del color de tema principal es "Color de tema 1",
tambin obtendrs buenos resultados al importar grficos de diferentes temas e
igualando los colores.

Convertir color con nombre en local para frame/capa


Cuando pulsas este botn, se crea un nuevo color con nombre que es idntico
al que que has seleccionado.
Este nuevo color ser aplicado a todos los objetos en el frame o capa actual que utiliza
el color con nombre seleccionado. Esto significa que con un clic puedes localizar para
frame/capa. Entonces puedes editar el color original y el localizado por separado. Esta
opcin es til cuando ests creando animaciones y quieres que el color de un objeto
cambie a medio camino de la animacin. Este botn se oscurece a no ser que ests
editando un color con nombre que tambin es usado en otro frame o capa.

www.magix.es
Trabajar con colores 193

Colores normales, tintes, tonalidades y colores


vinculados
Colores normales
Estos son los colores individuales que aplicas a los objetos.

MAGIX Web Designer 11 Premium tambin puede vincular un color a otro color, es
decir, cuando cambia el color principal, el color vinculado tambin cambiar. Hay tres
formas de vincular un color a su: TINTE, TONALIDAD y COLORES VINCULADOS . Esta es
una tcnica muy til que te permite, por ejemplo, volver a cambiar el color un dibujo
con tonalidades complejas con un slo clic. Algunos de los cliparts modelo utilizan
esta tcnica.

Tintes
Los tintes estn vinculados a otros colores (llamados colores principales) y son
siempre una versin ms plida que el principal. Tienen dos usos principales:

Cuando quieres crear tonalidades ms plidas de un color principal y es posible


que quieras cambiar el color principal en el futuro y que los tintes se actualicen
automticamente.
Para extender el rango de colores disponibles de las tintas de impresin. 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
ests utilizando solamente tinta negra y blanca, podrs crear varias tonalidades
de gris. Si ests imprimiendo con una gama limitada de colores (generalmente
es ms econmico 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, tambin 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 ms claros y ms oscuros basados en un color principal. Si
se cambia el color principal, se modificarn tambin las tonalidades asociadas. Por
ejemplo, un dibujo de un coche puede utilizar tonalidades para las regiones con ms
luz y tonalidades de la carrocera. Una simple edicin al color principal cambiar todos
los colores, pero las tonalidades se mantendrn iguales. Por lo tanto, configurar
tonalidades es una forma muy til de modificar colores.
194

Para obtener mejores resultados, el color principal debe ser un color saturado "puro".
Si se utiliza el modelo de color HSV, la saturacin y el valor deberan ser 100%. Al
verlo en el EDITOR DE COLOR , la cruz debera encontrarse en la esquina superior
izquierda.

Colores vinculados
Los colores vinculados son similares a las tonalidades, pero permiten ms flexibilidad.
Tambin estn 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 versin ms o menos saturada del principal, pero que el
tinte y la tonalidad sean las del principal.

Creacin de un tinte, una tonalidad o un color


vinculado
Ve arriba para leer la seccin sobre TINTES , TONALIDADES y COLORES VINCULADOS . Te
ser til para cuando quieras encontrar el color principal de una tonalidad ms 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
tambin cambie su tonalidad. Por ello, de ser necesario, primero asgnale un nombre
al color (ver Creacin de nuevos colores con nombre (en la pgina 187)).

Para crear un tinte, una tonalidad o un color vinculado:

1. Selecciona el objeto o los objetos a los que quieres aplicar el color.


2. Abre el EDITOR DE COLOR con las opciones avanzadas.
3. Selecciona la opcin "color normal" en el men desplegable situado en la parte
inferior del dilogo y elige entre las opciones TINTE, TONALIDAD, o VINCULADO.
4. En el men desplegable del COLOR ORIGINAL , selecciona el color con nombre al
que quieres aadirle un vnculo.
5. Ajusta el TINTE, la TONALIDAD o el COLOR VINCULADO en la parte superior del
editor de color.

Si no aparecen las opciones de tinte, tonalidad y color vinculado en el men


desplegable de "tipo de color", esto probablemente significa que an no has creado un
color con nombre al que le quieres agregar un vnculo, o tambin puede ser que ests
editando el nico color con nombre del diseo.

www.magix.es
Trabajar con colores 195

A la izquierda vers que el nuevo color tiene un poco de tinte del color original "amarillo", por
ello el editor slo suministra tintes ms claros del color original. A la derecha si seleccionas la
opcin tonalidad podrs elegir cualquier tonalidad ms clara o ms 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 lnea de colores y as puedas
encontrarlo ms fcilmente cuando lo necesites. Haz clic sobre el cono con forma de
etiqueta para crear un nuevo nombre para un color. Ahora aparecer en la lnea de
color para que lo puedas escoger y colocar sobre otros objetos.

Editar el color principal


El objetivo principal de utilizar tintes, tonalidades y colores vinculados es que siguen
los cambios que se realizan al color principal. Para ver el resultado, intenta editar el
COLOR CON NOMBRE que es el principal (arrstralo de la LNEA DE COLOR hasta el
EDITOR DE COLOR y modifica el color.) Vers que los objetos con el tinte, tonalidad o
color cambian en sincronizacin con el color principal.

NOTA: ten cuidado de no editar el color de los objetos sobre la pgina a la que has
aplicado colores con NOMBRE, TINTES , TONALIDADES o COLORES VINCULADOS porque
se convertirn en COLORES LOCALES .
196

Trabajar con textos

Introduccin
Las opciones de edicin de texto de MAGIX Web Designer 11 Premium son similares
a los editores de texto o procesadores de texto, pero adems suministra una amplia
gama de caractersticas que no encontrars en esos programas.

Puedes aumentar o ampliar el texto a un tamao muy grande.

Puedes aplicar la gama de atributos y efectos normales de MAGIX


Web Designer 11 Premium: rellenos, difuminacin, transparencia,
tonalidades de color, sombras y continuar editando el texto.

Puedes convertir los contornos de las letras en formas que pueden


editarse al igual que cualquier forma normal.

Adaptar texto a la curva. Todo el texto puede girarse, inclinarse y extenderse.

www.magix.es
Trabajar con textos 197

Terminologa
FUENTE o TIPO DE FUENTE: un conjunto de caracteres con un estilo consistente.

FAMILIA DE FUENTES : un conjunto de fuentes similares. Por ejemplo, Garamond y


Garamond Italic son fuentes diferentes pero pertenecen a la misma familia
Garamond.

JUSTIFICACIN: una forma alternativa de describir a la alineacin de texto. Al texto


alineado a la izquierda muchas veces se lo denomina justificado a la izquierda.

MONOESPACIADO : todos los caracteres individuales de una fuente monoespacio


tienen el mismo ancho. Muchas veces se las denomina fuentes con ancho fijo. Muy
til para listados de programas. Courier es la fuente monoespacio ms comn. La
mayora de las fuentes son fuentes con espaciado proporcional, es decir, que el ancho
de los caracteres vara.

PUNTO : el tamao del texto o fuentes se miden en puntos (pt). 1 pt es


aproximadamente 1/72 pulgadas, por lo que un texto de 72 pt es tiene aprox. 1
pulgada de altura, a pesar de que las fuentes de un tamao determinado pueden
variar.

La herramienta de texto
Usa la HERRAMIENTA DE TEXTO ("F8") para introducir o editar texto.

Barra de informacin de la HERRAMIENTA DE TEXTO , lado izquierdo

Fuente
Tamao de fuente
Estilo
Negrita
Cursiva
Subrayado
198

Barra de informacin de la HERRAMIENTA DE TEXTO , lado derecho

Justificar
Superndice/Subndice
Espaciado de lnea
Lista con vietas
Lista numerada
Quitar sangra
Colocar sangra
Corrector de ortografa
Espaciado de prrafos

MAGIX Web Designer 11 Premium es compatible con tres tipos bsicos de objetos de
texto

Lneas de texto simple: haz clic sobre la pgina y escribe.


Columnas de texto: haz clic y arrastra para crear una columna y despus escribe.
reas de texto: haz clic y arrastra en sentido diagonal para crear un rea
rectangular. Despus escribe.

Despus de haber creado un objeto de texto puedes transformarlo (girarlo, inclinarlo,


cambiar su tamao) y puedes aplicar todos los atributos normales, color de relleno,
transparencia, difuminacin, etc. utilizando las herramientas normales. Tambin
puedes vincularlo a una curva. El texto permanecer editable.

www.magix.es
Trabajar con textos 199

Men de fuente

Popup de tamao de fuente en tiempo real


Fuentes usadas en el documento actual
Fuentes compatibles con la web
Fuentes de Google
Todas las fuentes instaladas
Variantes de estilo disponibles para la fuente seleccionada. No todas las fuentes
tienen variantes

El men de fuente muestra todas las fuentes instaladas y est dividido en cuatro
secciones. El apartado superior muestra las fuentes que se estn usando actualmente
en el documento. El segundo apartado muestra las fuentes compatibles con la web.
Estas son las fuentes que puedes usar sin problemas para las pginas web, ya que son
200

admitidas por los navegadores y dispositivos ms comunes. Consulta el apartado


"Fuentes compatibles con la web". La tercera seccin muestra las fuentes de Google
disponibles que tambin pueden usarse de forma segura en la pginas web, y la
seccin final presenta una lista alfabtica de todas las fuentes instaladas. Cada
nombre de fuente se visualiza en el men usando su propio tipo de letra, lo que hace
ms fcil la seleccin.

Aquellas fuentes para las cuales estn disponibles varios estilos se muestran con
pequeos tringulos negros en el lado derecho del men. Tan solo mantn el cursor
del ratn sobre el nombre de una fuente durante un segundo o dos y aparecer un
pequeo submen a la derecha del men principal que proporciona una lista de las
variantes disponibles de esa fuente. Mientras se visualiza el submen puedes mover
el cursor del ratn por encima para seleccionar la variante de la fuente deseada.

Fuentes compatibles con la web


Estas fuentes son compatibles para su uso en pginas web porque la inmensa
mayora de los PCs y otros dispositivos las tendrn instaladas. Tambin puedes usar
cualquiera de las cientos de fuentes de Google en tu pgina. Incluso puedes usar otras
fuentes que tengas instaladas, siempre que la licencia de la fuente lo permita:
consulta la seccin FUENTES PARA PGINAS WEB incluida abajo.

Vista previa de fuente en tiempo real


Si mantienes el ratn sobre cualquier entrada del men de fuentes por una fraccin
segundo, el texto seleccionado en el documento ser actualizado para poder tener
una vista previa de esta fuente. No ser un cambio permanente hasta que no hagas
clic sobre la fuente requerida. Si mueves el cursor del ratn sobre el men volvers a
la fuente inicial hasta que te poses sobre otra entrada. Esto es ideal para obtener una
vista previa muy rpida de gran cantidad de fuentes.

Si pulsas la tecla "Shift" mientras navegas por el men de fuentes, habr una pequea
pausa antes de que se vea la fuente seleccionada. Esta opcin es prctica porque la
vista previa instantnea ralentiza la navegacin a travs del men; y si tienes varias
fuentes seleccionadas este proceso ser an ms lento.

Vista previa de tamao de fuente en tiempo real


Junto al men de tamao de fuente se encuentra una barra deslizante emergente
igual a la que se utiliza en otras partes de Web Designer. Esto brinda un control de
tamao de letra directo y ajustar el tamao de fuente del texto seleccionado en
tiempo real a medida que arrastras la barra deslizante.

Haz clic para ver la opcin emergente para el tamao de la fuente


www.magix.es
Trabajar con textos 201

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
podrs arrastrar la barra deslizante o usar la rueda del ratn sobre el control para
ajustar rpidamente los valores. En este caso, podrs ajustar el tamao de punto
usando la rueda del ratn para ver los resultados directamente en la pgina del
documento mientras trabajas.

Otra forma de utilizar la barra deslizante emergente es "pulsar + arrastrar + soltar"


sobre el botn y la barra. Esto es un modo ligeramente ms directo de ajustar el
control (requiere menos clics).

Navegacin instantnea del men de fuente


Mientras el men de fuente es mostrado, puedes escribir los carcteres iniciales del
nombre de fuente, y el men se desplazar hasta esa seccin de la lista. Por ejemplo,
si escribes "ver", se desplazar instantneamente y localizar la fuente "Verdana".

Fuentes de Google
Web Designer te da la opcin de usar una de las cientos de fuentes Google. Son
fuentes web de fuentes abiertas y gratuitas que tienen la ventaja de estar presentadas
por Google, por lo que no tienes que cargar archivos de fuentes con tu pgina web: tu
navegador buscar las fuentes directamente en los servidores alojamiento de fuentes
de Google.

Las fuentes estn totalmente integradas en Web Designer, por lo que puedes navegar
y buscar a lo largo de la lista de fuentes utilizando el BUSCADOR DE FUENTES para
descargarlas e instalarlas en tu propio PC.
Para comenzar a usar fuentes Google, tan
solo haz clic en AADIR del men de
fuentes para detener el buscador de
fuentes.

El buscador de fuentes de Google muestra


alguna de las fuentes disponibles y familias de
fuentes.

Puedes buscar fuentes introduciendo el


nombre de fuente en la casilla de
bsqueda o desplzarte hacia abajo por la
lista para encontrar una fuente adecuada.
Restringe tu bsqueda seleccionando
estilos de fuente en las listas de casillas a
la izquierda y usa la barra de desplazamiento con vista previa para ver la fuente en
diferentes tamaos.
202

Haz clic en la fuente elegida y se te preguntar si quieres descargarla e instalarla. En


muchos PC Windows, y dependiendo de tu configuracin Windows, se solicitar
permiso para la instalacin, que realiza un programa de instalacin de fuentes
independiente. Cada fuente que instales aparecer en la seccin fuentes de Google
del men de fuentes.

Algunas fuentes Google, como EXO, proveen una amplia gama de pesos En estos
casos el significado de la opcin "Negrita" cambia ligeramente. Los valores de peso de
las fuentes pueden estar entre 100 (fuentes muy ligeras o delgadas) a 900 (fuentes
muy pesadas o negras). En lugar de seleccionar siempre un peso de negrita dado, al
aplicar negrita (pulsando el botn "B", o usando "Ctrl+B" cuando se edita el texto)
sucede lo siguiente:

Peso del texto principal Peso seleccionado cuando se aplica


"B"

100 a 300 (Delgado/Extra ligero/ligero 400 (Normal)

500 a 500 (Normal/Medio 700 (Negrita)

600 a 900 (Seminegrita/Negrita/Extra etc.) 900 (Negro)

Por supuesto, no tienes por qu utilizar las fuentes exclusivamente para pginas web.
Como las fuentes son TrueType tambin se pueden usar en cualquier documento (p.
ej. un PDF).

Si envas otro usuario de Web Designer un archivo .xar o .web que contenga fuentes
de Google, se les preguntar, respecto a como cargar el documento, si quieren
descargar e instalar la fuente.

Nota: algunos navegadores no renderizan fuentes de Google tan efectivamente


como otros, por lo que es siempre una buena idea probar tus pginas web con varios
navegadores para asegurarte de que la calidad de las fuentes es aceptable.

Smbolos de la fuente Font Awesome


Los smbolos de la fuente Font Awesome son una amplia seleccin de iconos
expansibles. Puedes insertarlos en el texto o en tu documento como grficos
independientes.

Los smbolos se dividen en varias categoras como iconos de aplicacin web, iconos
de marca, iconos de editor de texto, iconos direccionales, etc. y se pueden encontrar
en el MEN "INSERTAR" > "SMBOLOS DE FUENTE FONT AWESOME" Tan solo desplzate
hacia abajo para ver la lista completa.

www.magix.es
Trabajar con textos 203

Algunos de los smbolos de la fuente Font Awesome.

Insertar smbolos en el texto


Coloca el cursor de la HERRAMIENTA DE TEXTO en el punto del texto donde quieres
colocar el icono y haz clic en un icono de la coleccin. El carcter del smbolo se
inserta en el texto.

Cuando insertas smbolos en el documento de esta forma, los caracteres de smbolos


usan la fuente Font Awesome. Si posteriormente publicas tu documento como HTML,
vers un cuadro que te advierte que la fuente Font Awesome ser publicada con tu
documento o en tu pgina web porque requiere dicha fuente. Esto no supone ningn
problema, ya que la licencia de la fuente Font Awesome permite tal uso.

El smbolo de Font Awesome insertado como fuente usando la herramienta de texto

Insertar smbolos como grficos


Para insertar un icono como un grfico de vector expansible tan solo tienes que
asegurarte de que el cursor de texto no est presente antes de hacer clic en el
smbolo que se debe insertar. Para quitar el cursor de texto, cambia a la herramienta
de seleccin o a otra herramienta excepto la herramienta de texto.

El smbolo aparecer en el centro del espacio de trabajo (ten en cuenta que puede
estar tras el dilogo de Font Awesome). Usa la herramienta de seleccin para moverla
donde quieras en tu documento o redimensionarla, etc.
204

Cuando insertas un smbolo de esta forma, tu documento ya no necesita la fuente


Font Awesome porque se ha convertido en un grfico o insercin. De esta forma, si
publicas un HTML no vers la advertencia de la fuente Font Awesome mencionada
anteriormente.

Smbolo Font Awesome insertado como grfico

Texto simple
Si quieres escribir una pequea cantidad de texto simple, coloca el cursor donde
quieres introducir el texto y haz clic. Aparecer un cursor rojo y podrs comenzar a
escribir con tu teclado.

Si te has equivocado, pulsa "Supr "o "Retroceso" de la forma usual.

Al pulsar "Enter" se completa la lnea e inicia una lnea de texto debajo. El espaciado
entre lneas se controla en el campo de texto de espaciado en la barra de informacin.

El texto bsico no es adecuado para grandes prrafos, ya que no hay salto de lnea
automtico (puesto que el ancho es ilimitado). Usa mejor una columna de texto o un
rea de texto en su lugar (ver ms abajo).

Por defecto, el texto no tiene color de contorno. Con "Shift + clic" sobre un color de la
lnea de color le dars un color de contorno al texto seleccionado (el grosor puede
ajustarse como siempre a travs del control de ancho de lnea). Probablemente
querrs establecer el tipo de unin de lnea (en la pgina 168) para redondearla y
darle un aspecto ms suave (controlen la parte superior de la GALERA DE LNEAS ).

El ancho de lnea est definido Cambiar el ancho de lnea (el grosor) (en la pgina
165). La aplicacin de color est descrita en Manejo de colores (en la pgina 179).

Puedes seguir introduciendo texto incluso despus de la rotacin o de haber aplicado


un relleno o ajustado el texto a una lnea.

www.magix.es
Trabajar con textos 205

Texto en una columna


Si ests introduciendo una gran cantidad de texto a lo largo de varias lneas, es posible
que una columna te resulte ms til. Cambiar el ancho de la columna adaptar
automticamente el texto. Para escribir una columna de texto:

1. Selecciona la herramienta de TEXTO.


2. Mueve el cursor del ratn al lugar de inicio de la columna.
3. Arrastra hacia la derecha para crear una lnea horizontal del ancho de la
columna. Esta lnea roja te muestra el ancho de la columna. Nunca se imprime.
4. Introduce el texto. No necesitas pulsar al final de una lnea. Cuando el texto llega
al final de la columna sigue automticamente en una nueva lnea.

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 pgina. Por lo tanto, debes
comenzar a tipear inmediatamente despus de haber arrastrado la lnea de ancho de
la columna.

En vez de tipear el texto, puedes crearlo en un editor de texto, copiarlo al portapapeles


y copiarlo en MAGIX Web Designer 11 Premium. Copiar y pegar es compatible con el
texto con formato RTF.

Las palabras slo se separan en las lneas si se introduce un guin.

El efecto de el guin en un texto fluido.

Si introduces Ctrl+- (tecla menos) se insertar un guin suave que aparecer


solamente si la palabra puede terminarse al final de la lnea. 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 guin normal, la palabra
se separar al final de la lnea. Se llama guin "suave" porque cuando la palabra
aparece en el medio de una lnea, el guin desaparece (a diferencia de un guin
normal o el carcter menos), por lo que el guin se introduce slo si es necesario.

Al editar texto, el guin suave funciona como un carcter invisible (no ocupa
espacio), pero puede reconocerse en el texto moviendo las flechas izquierda/derecha
sobre el lugar en donde se encuentra el carcter.

Un guin rgido puede insertarse utilizando Ctrl+Shift+- (tecla menos). Un guin


rgido no causar ninguna separacin. Esto es til en situaciones en las que las
palabras presentan guiones pero no deben separarse al final de las lneas.
206

Cambiar el ancho de la columna


Arrastra uno de los dos controles deslizantes al final de la lnea.

Cambiar el ngulo de la columna


Pulsa +arrastra uno de los controles deslizantes al final de la lnea para cambiar el
ngulo de la columna. Como alternativa, pulsa Ctrl y arrastra para limitar la lnea a
ngulos restringidos. Tambin puedes utilizar la herramienta de SELECCIN y girar el
objeto de forma normal.

Para ms informacin sobre ngulos restringidos, lee el captulo Introduccin a


MAGIX Web Designer 11 Premium (en la pgina 94).

reas de texto
Si haces clic y arrastras diagonalmente sobre la pgina usando la herramienta de
TEXTO , crears un rea de texto rectangular. El cursor se posicionar en la esquina
superior izquierda y podrs introducir texto y pegar.

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 aadir o eliminar texto en un rea, desbordar a o desde las reas de
texto conectadas. Si el texto sobrepasa el final del rea de texto se ver de color gris, a
pesar de que podrs continuar editando el texto de forma normal.

Conexin de reas de texto, flujo de texto


Cuando un texto sobrepasa la parte inferior del rea de texto, aparece una flecha roja
al final del rea. Si arrastras este indicador sobre cualquier otra rea de texto, el texto
fluir hasta la nueva rea de texto y las dos reas se conectarn. Esto se muestra con
una flecha de flujo.

rea de texto en exceso sobre el rea de texto con la flecha roja.

www.magix.es
Trabajar con textos 207

Si el cursor de texto se encuentra en un rea con texto en exceso, haz clic y arrastra
sobre la pgina para crear una nueva rea de texto. La nueva rea de texto se
conectar automticamente y el texto fluir hasta la nueva rea.

Consejo: puedes hacer fluir un texto desde un rea a otra en cualquier pgina,
incluso en pginas anteriores. Si necesitas que el texto fluya a un rea que se
encuentra varias pginas adelante, probablemente sea ms fcil utilizar el mtodo
anterior, aunque si reduces la imagen a un tamao de texto pequeo podrs
arrastrar la flecha por las pginas.

Para desconectar un rea de texto de otra, arrastra el indicador y sultalo lejos de las
reas de texto. O haz clic en la flecha de flujo en la parte inferior del rea de texto y
selecciona DESVINCULAR FLUJO DE TEXTO .

Si eliminas un rea de texto que est conectada con otra, solo se eliminar el rea. El
texto volver a fluir a las reas de texto restantes.

Pginas de mltiples columnas


Puedes usar dos o ms reas de texto en tu pgina, vinculadas tal como se
describe arriba, para crear un diseo de pgina de mltiples columnas. Sin
embargo, Web Designer te ofrece una forma ms rpida de hacerlo.
Selecciona el rea de texto que quieres colocar en varias columnas o coloca
el signo de intercalacin en l y haz clic en el botn COLUMNAS de la barra de
informacin de la HERRAMIENTA DE TEXTO . O haz clic derecho sobre el texto y
escoge COLUMNAS del men contextual.

Aparecer el dilogo de
columnas...

Dilogo de columnas

Por defecto, la cantidad de columnas que se muestran coincidir con la cantidad de


reas de texto vinculadas de la pgina actual. No obstante, puedes cambiar este
nmero para adaptarlo a la cantidad de columnas que quieres incluir. Si quieres un
diseo de 3 columnas, introduce 3. Tambin puedes especificar el tamao del espacio
entre las columnas. Cuando hayas finalizado, pulsa CONVERTIR . Tus reas de texto se
transformarn en un conjunto de columnas con espacios iguales.
208

El ancho total del conjunto de reas de texto se mantiene cuando utilizas el dilogo de
columnas, por lo que si las reas de tu texto original cubran nicamente la mitad
izquierda de tu pgina, las columnas creadas tambin cubrirn esa mitad. Por lo tanto,
si quieres que las columnas abarquen todo el ancho de la pgina, mueve o
redimensiona las reas de texto de forma que cubran todo el ancho y luego utiliza el
dilogo de columnas para que estas tengan el mismo tamao y espaciado.

Una pgina de 1 columna transformada en una pgina de 3 columnas.

Tambin puedes utilizar el dilogo de columnas para reducir la cantidad de columnas


de la pgina si as lo deseas.

En el caso de que el mismo arreglo de columnas se encuentre en otras pginas (y


correspondan al mismo flujo de texto), se te preguntar si quieres aplicar los cambios
a las columnas de todas esas pginas tambin (tal como se describe en los cambios
de reas de texto). Es decir, que si usas el dilogo de columnas podrs convertir de
inmediato un documento entero de una sola columna en un documento de mltiples
columnas, o viceversa, siempre que el flujo de texto sea nico.

Saltos de columna
Inserta un salto de columna en un rea de texto usando la HERRAMIENTA DE TEXTO
para hacer clic derecho en el punto del texto en el que quieres introducir el salto.
Luego selecciona "INSERTAR" > "SALTO DE COLUMNA" . O utiliza el shortcut
(Ctrl+Shift+Intro).

www.magix.es
Trabajar con textos 209

Un salto que se inserta en la mitad de la columna central (izquierda) desplaza el texto a la


siguiente columna (derecha).

Todo el texto despus del salto de columna aparecer en la siguiente rea de texto
vinculada del flujo actual, ya sea en la misma pgina o en la siguiente.

Saltos de pgina
Inserta un salto de pgina en un rea de texto usando la HERRAMIENTA DE TEXTO para
hacer clic derecho en el punto del texto en el que quieres introducir el salto. Luego
selecciona "INSERTAR" > "SALTO DE PGINA" . O utiliza el shortcut (Ctrl+Intro).

Todo el texto despus del salto de pgina aparecer en la siguiente rea de texto
vinculada en la prxima pgina.

Cambiar el tamao de las reas de texto


Con la HERRAMIENTA DE TEXTO , puedes hacer clic y arrastrar cualquiera de los
controles deslizantes de esquina. El texto del rea tomar el formato adecuado para
adaptarse al nuevo tamao. Si cambias el tamao de un rea de texto con la
HERRAMIENTA DE SELECCIN , ocurre lo mismo: el texto en s mismo no cambia de
tamao sino solo el rea de texto; el texto se reacomoda para adaptarse al nuevo
tamao. Si lo que deseas es modificar el tamao del texto del rea de texto, ve a la
HERRAMIENTA DE TEXTO , selecciona todo el texto con Ctrl+A y cambia el tamao de
fuente en la barra de informacin de HERRAMIENTA DE TEXTO .

Puedes girar el rea de texto, utilizando la HERRAMIENTA DE SELECCIN de forma


normal y el texto fluir a lo largo del rea de texto girada.
210

El flujo del texto no se ve afectado si giras una de las reas de texto.

Mantn pulsada la tecla "Ctrl" mientras giras para limitar el ngulo de rotacin a 90
y a los ngulos alineados a la pantalla. Si usas la herramienta de texto, puedes hacer
clic y arrastrar los controles deslizantes de las esquinas. El texto del rea cambiar de
formato para ajustarse al nuevo tamao. Si modificas el tamao de un rea de texto
con la herramienta de seleccin ocurre lo mismo: el texto en s mismo no cambia de
tamao sino solo el rea; el texto se reacomoda para adaptarse al nuevo tamao. Si lo
que deseas es modificar el tamao del texto del rea de texto, ve a la herramienta de
texto, selecciona todo el texto con Ctrl+A y cambia el tamao de fuente en la barra de
informacin de herramienta de texto.

Cantidad de palabras
La cantidad total de palabras y caracteres del texto actual se indica en la barra de
estado. Esto tambin muestra la cantidad de palabras excedidas. Si est seleccionada
cualquier regin de texto, se mostrar la cuenta de la seleccin.

Texto siguiendo una curva


Para colocar un texto a lo largo de una curva de tu eleccin:
1. Crea un texto bsico, un texto en
una columna o un rea de texto
(ver ms arriba).
2. Selecciona tu objeto de texto y
una curva.
3. Escoge ARREGLO > ADAPTAR
TEXTO A LA CURVA .

Como alternativa, selecciona una curva o lnea y despus, en la herramienta de


TEXTO , haz clic sobre la lnea donde quieres que el texto comience y escribe. Esto
adaptar automticamente el texto a lo largo de la lnea. Cuando alcances el final de

www.magix.es
Trabajar con textos 211

la lnea, el texto continuar en una nueva lnea inmediatamente por debajo de la


anterior. Si no quieres que el texto siga en otra lnea, pulsa "Shift y clic" sobre la lnea.

Para ocultar una curva, selecciona la herramienta de EDICIN DE FORMAS y configura


el color de la lnea en SIN COLOR o un ancho de NINGUNO. Tambin puedes editar la
curva de forma usual.

La aplicacin de color est descrita en Trabajar con colores (en la pgina 179).

Ajustar el margen izquierdo y derecho de un texto sobre


una curva
Si ests comenzando a escribir o colocar una columna de texto sobre una curva,
puedes cambiar la posicin de inicio y fin de los controles deslizantes rojos.
Simplemente arrstralos sobre la curva segn lo desees. Si centras el texto, se
encontrar entre estos dos mrgenes.

Cambiar lados de la lnea


Haz clic derecho sobre el texto y selecciona la opcin de men INVERTIR TEXTO EN LA
CURVA . Como alternativa, si cambias la direccin de la lnea (herramienta de EDICIN
DE TEXTO , botn INVERTIR TRAYECTORIA de la barra de informacin), entonces el texto
cambiar al otro lado de la lnea o, en el caso de una forma cerrada, se mover desde
el interior al exterior de la forma.

Editar texto
Haciendo doble clic sobre un objeto de texto en cualquier herramienta te llevar a la
herramienta de TEXTO y posicionar el cursor en la posicin de clic en el texto.

Pueden utilizarse todas las funciones de cursor y operaciones usuales de un


procesador de texto. Por ejemplo:

Haz clic donde deseas colocar el cursor.


Utiliza las teclas de flechas que van hacia la izquierda, la derecha, hacia arriba o
abajo.
Utiliza "Ctrl + teclas de flechas que van hacia la izquierda y derecha" para mover
una palabra hacia la derecha o hacia la izquierda.
Pulsa "Inicio" o "Fin" para desplazarte al inicio o fin de la lnea.
Pulsa "Ctrl + Inicio" o "Ctrl + Fin" para desplazarte al inicio o fin del objeto de
texto.

Seleccin de texto:
"Shift+ cualquiera" de las teclas anteriores para seleccionar el texto
Doble clic para seleccionar una palabra
Triple clic o "Ctrl + L" para seleccionar toda la lnea de texto
212

Cuatro clics (4x) seleccionan un prrafo


O arrastra sobre el texto en la herramienta de texto para seleccionar el texto
"Ctrl + A" seleccionar todo el texto dentro del objeto de texto (debes
encontrarte en la herramienta de TEXTO.)

Si has seleccionado texto, cualquier cambio que realices se aplicar solamente a la


regin de texto seleccionada. Si slo se encuentra el cursor en el texto, entonces
cualquier atributo, por ejemplo, otro color, aparecer solamente cuando introduzcas
texto nuevo.

Seleccionar todo el objeto de texto


Existe un shortcut para seleccionar todo el objeto de texto. En vez de utilizar Ctrl+A o
arrastrar a lo largo del texto, simplemente pulsa la tecla ESC . Esto elimina el cursor
pero selecciona todo el texto (la barra de estado confirmar 1 objeto de texto). Esto
facilita la aplicacin de un efecto o atributo a toda la historia de texto.

Por ejemplo, para cambiar el tamao de la fuente de todo el objeto de texto, pulsa ESC
y selecciona un nuevo tamao de la barra de informacin.

Cambiar maysculas o minsculas


Pulsar Ctrl+W cambiar la mayscula o minscula del texto detrs del cursor y
mover el cursor. Entonces, si te das cuenta de que has tipeado una seccin de texto
con la tecla Maysculas activada, coloca el cursor al inicio y pulsa Ctrl+W.

Puedes cambiar la mayscula o minscula de la regin de texto seleccionada de la


misma forma. El cursor no se mover.

Comillas inteligentes
Si escribes comillas ' o ", Xtreme las convertir automticamente en comillas de
apertura o cierre estticamente adecuadas. Esto significa que 'esto' cambiar a esto
y "comillas" en comillas. Esta caracterstica es lo suficientemente inteligente para
comprender el uso de comillas simples dentro de las palabras, para que, por ejemplo,
si escribes en ingls la palabra 'don't' no se convierta en dont.

Introducir caracteres especiales


Existen shortcuts tiles para insertar caracteres especiales como o . Lee la
seccin Caracteres especiales (herramienta de texto) (en la pgina 525) en el
captulo "Mens y shortcuts de teclado".

Todos estos shortcuts (con la excepcin del espacio rgido) son compatibles con
Microsoft Word.

www.magix.es
Trabajar con textos 213

Insertar texto de ejemplo ('Lorem Ipsum')


Cuando se compone un diseo de pgina es una prctica comn que se utilice un
texto de ejemplo que contiene palabras en pseudo-latn (que no significan nada) y
que tiene la apariencia general de un texto tpico en ingls (o en otros idiomas
latinos). El texto comienza as: "Lorem ipsum dolor sit amet..."

Nota histrica. este mismo texto ha sido utilizado como texto de ejemplo por ms
de 500 aos en la industria de la imprenta, e incluso partes de las frases en latn se
han escrito hace ms de 2000 aos.

Para insertar un prrafo 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 ms largo presiona esta combinacin de teclas un par de veces.

Corrector ortogrfico
La HERRAMIENTA DE TEXTO incluye un corrector de ortografa: haz clic en el
icono de CORRECTOR DE ORTOGRAFA/AUTOCORRECCIN en la barra de
informacin de la HERRAMIENTA DE TEXTO y vers un men desplegable.

Para usar el corrector de ortografa selecciona


"REVISAR ORTOGRAFA MIENTRAS SE ESCRIBE ".
Ahora todas las palabras de tu documento que
no se reconocen y aquellas que vas escribiendo
aparecen subrayadas con una lnea de guiones.
Para corregir un error ortogrfico, haz clic
derecho y el men contextual te sugerir
opciones. Selecciona simplemente una de las
sugerencias para sustituir la palabra subrayada.
ff

Seleccin de idioma
Haciendo clic en el icono del corrector de ortografa aparece un men con todos los
idiomas para los cuales hay diccionarios instalados. Por defecto, el idioma
seleccionado corresponder a la configuracin local. Puedes elegir diferentes idiomas
para diferentes objetos de texto de modo que en tu documento puedes utilizar texto
en mltiples idiomas si fuera necesario.

Para cambiar el idioma asociado con el objeto de texto, selecciona el objeto de texto y
a continuacin selecciona el idioma requerido en el men del corrector de ortografa
de la herramienta de texto. Ahora, el objeto de texto ser revisado con el diccionario
de la lengua que elegiste.
214

Si quieres introducir numerosos objetos de texto utilizando un idioma diferente al


seleccionado por defecto, puedes cambiar el actual atributo de idioma de texto de
modo que no tienes que cambiar individualmente el idioma de cada objeto de texto.
Para ello asegrate de que no has seleccionado nada (haz clic sobre un rea vaca de
tu diseo utilizando la herramienta de seleccin). A continuacin elige en la
herramienta de texto el idioma que quieras usando el men del corrector de
ortografa. Se te preguntar si deseas fijar el atributo de idioma de texto actual. Haz
clic en "Fijar" para confirmarlo. De ahora en adelante cada nuevo objeto de texto que
crees se asociar al idioma elegido. Ten en cuenta que dicho atributo actual no se
cargar de nuevo cuando guardes y cargues tu diseo. Por lo tanto debers repetir el
procedimiento anterior para fijar el atributo de idioma de texto actual la prxima vez
que cargues el documento, si quieres seguir introduciendo nuevos objetos de textos
usando el mismo idioma.

Si hay un objeto de texto cuya ortografa no quieres revisar en absoluto, selecciona el


objeto y elige la opcin "Sin idioma (ignorar") del men del corrector de ortografa.

Diccionario de usuario
Las palabras que utilices regularmente y que no se encuentren en el diccionario
suministrado por MAGIX Web Designer 11 Premium pueden aadirse a tu propio
diccionario personal. Haz clic con el botn derecho del ratn y selecciona "Aadir 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.

Autocorreccin
Haz clic en el smbolo de CORRECTOR ORTOGRFICO/AUTOCORRECCIN de la
barra de informacin de la HERRAMIENTA DE TEXTO para utilizar la funcin de
autocorreccin. Escoge OPCIONES DE AUTOCORRECCIN... del men
desplegable.

Se abrir un cuadro de dilogo que te permitir aadir y reemplazar palabras, as


como smbolos del teclado, por smbolos del catlogo de fuentes Awesome (en la
pgina 202). Esta funcin siempre est activada por defecto pero puedes desactivarla
dentro del cuadro de dilogo.

Est disponible una seleccin de elementos tiles y tambin puedes aadir los tuyos.
Haz clic en AADIR para crear un nuevo campo y luego escribe una palabra o carcter
en la columna REEMPLAZAR , a continuacin haz clic en la columna CON para introducir
una sustitucin, o haz clic en ELEGIR SMBOLO para elegir un reemplazo del catlogo de
FUENTES AWESOME . El smbolo que escojas aparecer en la columna CON . Haz clic en
ACEPTAR para cerrar el cuadro de dilogo.

Ahora cuando escribas una palabra o carcter de la lista de opciones, se reemplazar


por tu palabra, carcter o smbolo alternativo.
www.magix.es
Trabajar con textos 215

Entonces, por ejemplo, si deseas que al escribir Rwd se reemplace automticamente


por "diseo web adaptativo", simplemente pulsa el botn AADIR e introduce "rwd"
en el campo REEMPLAZAR y "diseo web adaptativo" en el campo CON . Todo el texto
del cuadro de dilogo debe escribirse en minsculas, pero el reemplazo intenta ser
inteligente respecto al uso de maysculas o minsculas.

Entonces, si escribes...

"RWD" se reemplazar por "DISEO WEB ADAPTATIVO"


"rwd" se reemplazar por "diseo web adaptativo"
"Rwd" se reemplazar por "Diseo Web Adaptativo"

Buscar y reemplazar
La funcin Buscar y reemplazar realiza una bsqueda en vivo para que a medida que
buscas algo, el texto se explora y se marca en tiempo real.

Para buscar texto, selecciona en el men EDITAR > BUSCAR/REEMPLAZAR... o pulsa


CTRL+ALT+F y vers el siguiente dilogo:

Introduce la palabra de bsqueda y se resaltar en el texto. Puedes escoger buscar


solamente en la historia o pgina actual o en todo el documento (el texto fluye por
todas las pginas).

La opcin TODA LA PALABRA buscar solamente todas las palabras que coincidan con
el texto de bsqueda. Por ejemplo, si buscas la palabra, "met", no se resaltar "metro".
La opcin COINCIDIR MAYSCULAS Y MINSCULAS solamente buscar la letra exacta.
Si buscas, por ejemplo, "aBc" en esta opcin, no encontrars "abc".
216

Cmo sincronizar el texto empleando Grupos


suaves
En algunos diseos es posible que necesites que mltiples objetos de texto muestren
siempre el mismo texto, pero con estilos diferentes. Por lo general, cuando quieres
cambiar el texto mostrado en estos objetos, debes editar cada uno de forma
individual.

Aadiendo a un grupo suave objetos de texto relacionados de esta forma, puedes


asegurarte de que siempre mostrarn el mismo texto. Para aadir los objetos de texto
relacionados a un grupo suave, primero asegrate de que todos ya poseen
exactamente el mismo texto (de lo contrario no se sincronizarn todos). A
continuacin selecciona todos usando la herramienta de seleccin. Luego escoge
"ARREGLAR" > "APLICAR GRUPO SUAVE" ("Ctrl + Alt + G").

Ahora, cuando edites el texto de un objeto, los dems se actualizarn


automticamente, an cuando se encuentren en otras capas diferentes del
documento. Ten en cuenta que esta sincronizacin funciona incluso si algunos de los
objetos se encuentran en capas bloqueadas o invisibles.

Para deshacer un grupo suave, selecciona "ARREGLO" > "ELIMINAR GRUPO SUAVE "
("Ctrl + Alt + U"). Lee la seccin de grupos suaves del captulo Manejo de objetos (en
la pgina 134) para obtener ms informacin sobre grupos suaves.

Tabulaciones, mrgenes y sangras


Reglas
Para ajustar las tabulaciones, mrgenes y sangras, necesitas activas las reglas del
documento.

Para esto:

Escoge Ventana > Barras > Reglas.


O pulsa Ctrl++R (este es un nuevo shortcut).
O pulsa Ctrl+L (si no te encuentras en la herramienta de TEXTO).

Las caractersticas de texto avanzadas slo aparecern en la regla cuando ests


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.

Al arrastrar los mrgenes o tabulaciones en la regla de la herramienta de texto, vers


una gua vertical temporal que te facilitar alinear las tabulaciones o mrgenes a otros
objetos de la pgina.

www.magix.es
Trabajar con textos 217

Mrgenes y sangras
Cualquier cambio que realices se aplicar al prrafo de texto actual, es decir, el
prrafo en el que se encuentra el cursor de texto. Por el contrario, si has seleccionado
una regin de texto, el cambio se aplicar a los prrafos de la regin 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 ms de una historia de texto,
selecciona los objetos de texto en la herramienta de SELECCIN , despus cambia a la
herramienta de TEXTO y realiza los cambios correspondientes.

Margen izquierdo . Arrastra esto para cambiar el margen izquierdo del texto.

Margen de la primera lnea. Arrastra para cambiar el margen izquierdo de la


primera lnea del prrafo (til para listas, como se muestra abajo).
Margen derecho. Arrastra esto para cambiar el margen derecho del texto.

Demostracin del margen izquierdo y el margen de la primera lnea

Demostracin de un margen derecho


218

Texto siguiendo una curva


Si has adaptado una sola lnea de texto a la curva utilizando la opcin ADAPTAR TEXTO
A LA CURVA , la lnea de curva ser el margen.

Si has hecho clic sobre la lnea o has adaptado una columna de texto a una curva o
lnea, entonces vers indicadores de margen izquierdo y derecho (pequeos
cuadrados rojos) que puedes arrastrar a lo largo de la lnea para ajustar los mrgenes
utilizados para la justificacin.

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 prximo punto de tabulacin.
Slo necesitas definir una nueva posicin de tabulacin, si deseas utilizar otro
espaciado.

Estas tabulaciones por defecto se muestran como "L" sobre la regla:

Tabulaciones estndar indicadas con "L"

Tabulaciones personalizadas
Para crear una posicin de tabulacin personalizada, haz clic sobre la regla en el lugar
don de quieres colocar la tabulacin. Se sustituirn las tabulaciones por defecto hasta
esa posicin de la regla.

Por ejemplo:

El tringulo indica una tabulacin personalizada

Para colocar ms de una tabulacin, haz clic varias veces sobre la regla.

Para desplazar una tabulacin personalizada arrstrala a lo largo de la regla.

Para eliminar una tabulacin arrstrala fuera de la regla (las tabulaciones por defecto
retornarn).

www.magix.es
Trabajar con textos 219

Tipos de tabulaciones personalizadas


Puedes configurar diferentes tipos de tabulaciones personalizadas. Por defecto, las
tabulaciones personalizadas estn alineadas a la izquierda. Esto significa que el texto
se alinear con la tabulacin a la izquierda del texto. Para cambiar el tipo de
tabulacin, haz clic sobre el icono de tabulacin sobre la regla.

Estn disponibles los siguientes tipos de tabulacin personalizada. Puedes escoger


diferentes tipos de tabulaciones, puesto que no ests limitado a utilizar un solo tipo
de tabulacin en una historia.
Alineacin izquierda: el texto se alinear con la tabulacin a la izquierda.

Alineacin derecha: el texto se alinear con la tabulacin a la derecha.

Alineacin central: el texto se centrar a partir de la tabulacin.

Alineacin al decimal: los puntos decimales en el texto se alinearn con la


tabulacin. Esto es til para crear listas, sin importar la longitud del nmero, los
puntos decimales se alinearn con al tabulacin.
220

Cmo crear sangras francesas


La sangra francesa es cuando la primera lnea del prrafo tiene un margen negativo, o
el margen se encuentra ms a la izquierda que el margen izquierdo normal. Las listas
con nmero o vietas son ejemplos de sangra francesa.

Para crear una sangra francesa:


1. Arrastra el margen izquierdo hacia adentro.
2. Haz clic sobre la regla lejos del margen izquierdo (crea una nueva tabulacin) y
arrastra esta tabulacin hasta el margen izquierdo.
3. Ahora todas las lneas comenzarn con sangra; puedes insertar cualquier
carcter o nmero y pulsar Tab para moverlo hasta el margen izquierdo. Y (al
igual que con el prrafo) todas las lneas siguientes de texto tendrn sangra
hasta el margen izquierdo.

Texto alrededor de objetos


Puede hacer que cualquier objeto en MAGIX Web Designer 11 Premium sea rodeado
por texto, de modo que el texto fluya alrededor del objeto, en vez de aparecer debajo.
Esto facilita la presentacin de pginas que contienen pasajes largos de texto
combinados con fotos y grficos. Una vez que has insertado los objetos, puedes
ajustar las posiciones de grficos y fotos, y el texto se adaptar automticamente y
fluir alrededor de ellos.

Puedes escoger que el texto rodee solamente en una capa, lo que evita que el texto lo
haga en las otras capas y, adems, evita que los objetos de capas superiores rodeen al
texto.

www.magix.es
Trabajar con textos 221

Hacer que un objeto se rodee de texto


Para que el texto rodee al objeto, haz clic derecho y selecciona la opcin CONTORNEAR
TEXTO . El texto de la misma capa que se encuentre debajo del objeto, lo rodear con
un margen por defecto de 5 pxeles entre el texto y el objeto. Ten en cuenta que
contornear el texto slo funciona si el texto est debajo de los objetos, si el texto est
encima no funciona.

Como alternativa, haz clic derecho sobre el objeto y selecciona CONTORNEO Y


ANCLAJE DE TEXTO para ver el dilogo correspondiente.

Haz clic en la casilla CONTORNEAR TEXTO ALREDEDOR DE ESTE GRFICO.

Si lo deseas, establece un margen para la distancia entre el texto y el objeto. Si deseas


una altura y un ancho diferentes para el margen, haz clic en el smbolo de candado e
ingresa el margen de altura en H (horizontal) y el ancho en V (vertical). Haz clic en
OK .

Para desactivar que el texto rodee al objeto, haz clic derecho sobre el objeto y vuelve
a escoger CONTORNEAR TEXTO para desactivarlo. O haz clic derecho y selecciona
CONTORNEO Y ANCLAJE DE TEXTO para ver el dilogo correspondiente. Haz clic en la
casilla CONTORNEAR TEXTO ALREDEDOR DE ESTE GRFICO para desactivar la opcin y
haz clic en ACEPTAR .

Ten en cuenta que las lneas individuales de texto no responden al contonear objetos,
solo lo hacen las reas con texto y columnas de texto.

Para que el texto texto fluya alrededor del objeto solamente en su misma capa,
consulta Propiedades de capa (en la pgina 426).
222

Grficos anclados
Puedes colocar cualquier grfico o grupo para anclarlo a una posicin en un texto, de
forma que al mover el texto, el objeto de grfico se desplace para mantener la misma
posicin relativa. Sin embargo, el anclaje se debera usar para objetos que estn fuera
de los mrgenes del texto (p. ej. una foto que est a la derecha d izquierda de una
columna de texto), o tras el texto. Usa la incrustacin para objetos que estn dentro
de los lmites del texto (ver abajo).
1. La forma ms rpida de anclar un grfico o un grupo es hacer clic y escoger la
opcin ANCLAR AL TEXTO. Sin embargo, si quieres tambin editar las propiedades
de anclaje, puedes hacer clic en el objeto y seleccionar CONTORNEO Y ANCLAJE DE
TEXTO para ver el dilogo del mismo nombre.
2. Haz clic en la casilla MOVER GRFICO CON EL TEXTO.
3. Por defecto, la opcin MOVER SOLO VERTICALMENTE tambin est seleccionada,
de forma que el grfico anclado se mover solamente en sentido vertical a
medida que se edite el texto. Esta es normalmente la opcin ms til: si quieres
que el objeto siga la posicin de anclaje tambin horizontalmente, fijar el objeto
es por lo general una opcin mejor.
4. Un smbolo de ancla aparecer en la parte superior izquierda del objeto para
indicarte que est anclado.
5. Con la HERRAMIENTA DE SELECCIN o la HERRAMIENTA DE TEXTO, haz clic y
arrastra el smbolo de ancla hasta que aparezca una flecha roja.
6. Mueve el extremo de la flecha y sultala en la ubicacin en la que quieres anclar
el objeto. Un signo de intercalacin (una "T" invertida) te indicar la posicin de
anclaje.
7. A medida que edites el texto alrededor de este signo de intercalacin, el punto
de anclaje y el objeto de anclaje se movern junto con el texto.

Un objeto anclado muestra un smbolo de anclaje y una flecha que seala al punto de anclaje,
marcado con un signo de intercalacin. Estos desaparecern mientras escribes, salvo que te
encuentres cerca del punto de anclaje.
www.magix.es
Trabajar con textos 223

Nota: si arrastras la flecha de anclaje a un lugar de la pgina en la que no hay texto,


la flecha se convertir en un ancla roja que indica que las propiedades de anclaje del
objeto se perdern si lo sueltas all. Esto tambin ocurre cuando la flecha se suelta
en el mismo objeto.

Sin embargo, ten en cuenta que el objeto anclado no se mover fuera del rea de la
pgina como resultado de mover el punto de anclaje. El objeto anclado solo se mover
hasta el borde de la pgina.

Este es un ejemplo de una columna de texto con diversos elementos grficos a la izquierda. Cada
uno de estos est anclado al inicio de una lnea de texto inmediatamente a la derecha.

Es posible anclar cualquier objeto o grupo de grficos, incluyendo grupos con texto,
como el ejemplo del panel lateral, que se muestra arriba.

Tambin es posible anclar objetos para que aparezcan arriba o debajo del texto. El
ejemplo del grfico de flor azul plido, que se muestra arriba, est anclado de esta
forma y fluir junto con el texto.

NOTA : si un objeto anclado tambin est configurado para que el texto se contornee,
solo ocurrir con el texto respecto del que el objeto est anclado.
224

NOTA : el contorno de texto es restringido para los objetos que se repiten; el texto
dentro de un grupo repetido se contornear solamente respecto de los objetos
dentro del grupo repetido. Los objetos individuales con configuracin de contorneo
dentro de un grupo repetido, solamente lo hacen respecto del texto dentro del grupo
repetido. Los grupos repetidos como un todo pueden contornear cualquier texto que
se encuentre debajo del grupo en la pgina.

Mover objetos anclados


Cuando agregas o eliminas texto, el objeto se mueve a medida que el texto fluye, pero
siempre mantendr su posicin relativa respecto al punto de anclaje. Puedes mover
un grfico anclado arrastrndolo de la forma usual. Esto cambia su posicin relativa
respecto del punto de anclaje, pero no mueve el punto de anclaje, que permanece
visible al final de la flecha del smbolo de anclaje si haces clic y mueves el grfico.

Si quieres mover el punto de anclaje a otra ubicacin dentro del texto, haz clic y
arrastra el smbolo de anclaje para crear una nueva flecha y arrastrarla a su nueva
ubicacin.

Si cortas y pegas el texto que contiene el signo de intercalacin, el objeto anclado


tambin se cortar y pegar.

Visualizacin del punto de anclaje


El punto de anclaje del texto anclado solamente es visible si haces clic en el objeto
anclado con la HERRAMIENTA DE SELECCIN o si haces clic en el rea que rodea al
texto en la HERRAMIENTA DE TEXTO.

Cuando haces clic en una regin de texto con la HERRAMIENTA DE TEXTO , se


mostrarn los puntos de anclaje con el smbolo de la "T" invertida y una flecha desde
el punto de anclaje hasta el smbolo de anclaje en la parte superior izquierda de cada
objeto anclado. Entonces, la forma ms sencilla de ver todos los puntos de anclado
para cualquier texto es hacer clic en l con la HERRAMIENTA DE TEXTO.

Sin embargo, cuando comienzas a editar el texto, el signo de intercalacin, la flecha y


el smbolo de anclaje desaparecen temporalmente hasta que dejas de escribir. Si te
encuentras cerca del punto de anclaje, Web Designer muestra el signo de
intercalacin, junto con la flecha que seala al smbolo de anclaje para indicarte que te
encuentras cerca.

Grupos suaves (soft groups, en ingls)


Puedes pegar Grupos suaves (en la pgina 134) de la misma forma, aun cuando parte
de un grupo se encuentra en otra capa. Por ejemplo, los botones Web con efectos
mouse over o pop-up en otras capas, pueden anclarse de esta forma.

www.magix.es
Trabajar con textos 225

Eliminar un ancla
Para eliminar un ancla de un objeto, haz clic derecho y selecciona nuevamente
ANCLAR AL TEXTO para desactivar la opcin. Ahora, cuando hagas clic en el objeto con
la HERRAMIENTA DE SELECCIN o en el texto en la HERRAMIENTA DE TEXTO, ya no vers
el smbolo de anclaje.

Grficos incrustados
Puedes insertar un objeto en el texto para que se comporte igual que un carcter.
Simplemente copia el objeto al portapapeles ("Ctrl+C"), ve a la herramienta de texto,
coloca el cursor de texto en la posicin en la que quieres insertar el objeto y pgalo
("Ctrl+V").

Puedes seleccionar, copiar, pegar y eliminar el objeto incrustado junto con el texto
que lo rodea, al igual que si fuera un carcter de texto. Sin embargo, tambin puedes
seleccionarlo y transformarlo con la herramienta de seleccin.

Te recomendamos utilizar esta tcnica de incrustacin en vez del anclaje, porque es


ms eficiente en trminos del proceso requerido para dar formato al texto.

Lista con vietas y numeradas


Utiliza los botones de las listas con vietas y numeradas de la barra de informacin de
la HERRAMIENTA DE TEXTO para ingresar rpidamente listas con vietas o numeradas.
Puedes hacer clic derecho sobre una lista numerada y escoger PROPIEDADES DE LA
LISTA del men contextual para cambiar el orden del esquema de nmeros en tu
lista. Tambin puedes usar cualquier grfico como vieta o nmero de tu lista.
Consulta el captulo Herramienta de texto (en la pgina 196) para ms informacin.

Lista con vietas


Puedes convertir cualquier texto en una lista con vietas si seleccionas el texto
y luego escoges el botn de lista con vietas de la barra de informacin.

Cada prrafo de texto se convierte en una vieta independiente. Si pulsas "Intro" al


finalizar una lnea al final de la vieta, la prxima lnea tambin comenzar con una
vieta.
226

Para finalizar la lista con vietas, pulsa Intro al final de la ltima vieta y luego vuelve
a pulsar Intro en la nueva lnea con vieta. Esto elimina la ltima lnea con vieta y te
permite comenzar a introducir texto normal nuevamente.

Puedes incluir listas con vietas secundarias si pulsas el botn de sangra de la


barra de informacin. Esta sangra crea una lnea con vieta y cambia el estilo
de la vieta para diferenciarla de la principal.

Ejemplo de una lista de vietas secundaria

Para mover un punto de vieta desde la lista secundaria hasta la principal,


simplemente coloca el texto del cursor en la lnea y pulsa el botn para quitar
sangra.
Por lo tanto, realizar arreglos en las listas de vietas es fcil con los botones para
agregar y quitar sangras.

Lista numerada
Puedes crear y editar listas numeradas de la misma forma que se ha descrito
para las listas con vietas pero con el botn de listas numeradas.

Puedes escoger el esquema numerado que se utiliza para cada lista con el dilogo 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.

www.magix.es
Trabajar con textos 227

En el dilogo puedes escoger entre una variedad de esquemas de numeracin y


tambin introducir el valor que debe utilizarse en la primera entrada de la lista. Luego,
el nmero se aumentar automticamente para las siguientes entradas de la lista.

Lista con vietas y nmeros con grficos


Puedes usar cualquier grfico para las vietas o nmeros de una lista. Puedes disear
listas con tus propias vietas o nmeros con las herramientas de dibujo o texto, o bien
con los diseos de vietas de la galera de diseos (en ELEMENTOS DE PGINA>
ELEMENTOS GRFICOS > VIETAS ). Por ejemplo, puedes crear un crculo simple con la
herramienta de elipse, rellenarlo, aplicarle una sombra y copiarlo en el portapapeles.
Luego destaca con la herramienta de texto la lista a la que quieres aplicar el estilo.
Haz clic derecho sobre la lista y escoge Pegar como vieta del men. El diseo
aparecer como una vieta para cada entrada de la lista.

En el caso de una lista numerada, el procedimiento es el mismo, salvo que agrupas un


elemento de texto con tu grfico y luego escoges Pegar como nmero para sustituir
los nmeros o elementos de texto de tu lista. El objeto de texto en el grupo se utiliza
para mostrar el nmero.

Estilos de texto
Los ESTILOS DE TEXTO son una forma muy til de modificar la apariencia del texto en
todo el documento con unos pocos clics.

Un ESTILO DE TEXTO es un conjunto con nombre de atributos, como fuente, tamao,


color, espaciado y otras propiedades de texto. Por ejemplo, el encabezado principal al
comienzo de este documento puede tener un estilo llamado "Encabezado 1", el
subencabezado ms pequeo, como el de esta seccin, y todos los encabezados de
seccin equivalentes, un estilo llamado "Encabezado 2"

Al actualizar la definicin de "Encabezado 2", por ejemplo, a una fuente diferente,


todos los encabezados similares se actualizarn instantneamente.

Lo mismo ocurre con el texto principal, que muchas veces se denomina "cuerpo de
texto", tiene un estilo en particular, que en Web Designer se llama "Texto normal". Al
228

actualizar ese estilo para que su fuente sea, por ejemplo, Times New Roman de 12
puntos, todo el "Texto normal" del documento puede cambiarse de una sola vez, sin
tener que seleccionar y aplicar el mismo cambio de fuente una y otra vez.

Los ESTILOS DE TEXTO seran, entonces, como la funcin "Colores con nombre" que
tambin es compatible con Web Designer, en la que puedes actualizar el "Color tema
1" a un nuevo color para que todas las partes del documento que utilicen ese color lo
cambien al nuevo.

Barra de informacin de estilos de texto


En la BARRA DE INFORMACIN DE LA HERRAMIENTA DE TEXTO hay un men desplegable
de estilos que te permite crear estilos, aplicarlos a cualquier texto y actualizar la
definicin del estilo.

Por defecto, hay un pequeo grupo de estilos predefinidos, incluyendo el "Texto normal" y tres
estilos de encabezado, del Encabezado 1 al 3.

Estilo de prrafo y estilo de carcter


Los estilos de texto estn disponibles en dos variedades. Estilos de prrafo y estilos
de carcter.

Un estilo de prrafo se seala con el smbolo en el men de estilo. Un smbolo A


seala un estilo de carcter.

Los estilos de prrafo se aplican a todo el apartado y tambin se utilizan para


encabezados. No es posible aplicar un estilo de prrafo a una seccin ms pequea
que un prrafo. Es decir, que no puedes aplicar un estilo de prrafo a una sola palabra
dentro de un apartado. Si lo intentas, entonces todo el prrafo cambiar a este estilo.

Simplemente coloca el cursor de texto en cualquier lugar de la lnea y selecciona un


estilo de prrafo del men de estilos: todo el prrafo cambiar a ese estilo.

Por otra parte, los estilos de carcter pueden aplicarse a cualquier seccin del texto,
incluso a un solo carcter. Por ejemplo, si quieres destacar algunas palabras de tu
texto con un color diferente, el estilo de carcter te vendra ideal. La ventaja es que

www.magix.es
Trabajar con textos 229

puedes cambiar luego el color (o fuente, etc.) de todas estas palabras destacadas con
solo actualizar el estilo.

Crea un estilo de carcter haciendo clic en CREAR ESTILO en el men desplegable


Estilo y activa la opcin ESTILO DE CARCTER del cuadro de dilogo para crear un
nuevo estilo de texto. Para ms informacin consulta Creacin de nuevos estilos.

En los estilos de prrafo pueden definirse todos los atributos de texto, salvo las
propiedades de las listas numeradas o con vietas. Los estilos de carcter solo
pueden definir atributos de texto que pueden aplicarse a un solo carcter, como
color de texto, tamao y grosor de fuente, etc.

Actualizacin de los estilos de texto


Para actualizar una definicin de estilo:

1. selecciona un poco de texto que tenga el estilo que quieres actualizar.


2. Aplica los cambios que deseas, como otra fuente o tamao de fuente.
3. Selecciona "Actualizar estilo" del men desplegable de estilos en la barra de
informacin de texto.

Por ejemplo, para cambiar todo el "Texto normal" a otra fuente, selecciona algunas
palabras del estilo "Texto normal", cambia la fuente (y cualquier otro atributo) y luego
selecciona "Actualizar estilo" "Texto normal" del men de estilos de la barra de
informacin de la herramienta de texto.

Cuando tienes pginas de la variante RWD, se puede actualizar el estilo de texto para
una variante individual. Esto es til, por ejemplo, cuando necesitas que el texto de una
variante de mvil sea ms o menos grande o de una fuente diferente. Para actualizar
el estilo de una variante individual, cambia el texto como arriba y selecciona
ACTUALIZAR ESTILO EN ESTA VARIANTE del men desplegable Estilo en la barra de
informacin Texto. Ver Diseo de web adaptativo (en la pgina 297) para ms
informacin sobre variantes.

Nota: cuando actualizas un estilo a partir de una seleccin de texto, el estilo


actualizado vuelve a aplicarse a la seleccin. Por lo tanto, si seleccionas algunos
caracteres de, por ejemplo, el Encabezado 1, cambias su color y luego actualizas el
estilo "Encabezado 1" todo el prrafo cambiar a este nuevo color (porque es un
estilo de prrafo y solo puede aplicarse a todo el apartado).

Redefinicin de estilos de texto


Muchas veces quieres que un estilo de texto existente tenga un aspecto similar a un
texto al que todava no has aplicado un estilo de texto. Tal vez has importado texto de
algn otro documento. No podrs aplicar el estilo existente a ese texto porque
perdera su aspecto. En su lugar, utiliza la opcin ACTUALIZAR OTRO ESTILO PARA QUE
COINCIDA en el men de estilo.
230

1. Coloca el cursor de texto dentro del texto (o selecciona parte del texto).
2. Selecciona ACTUALIZAR OTRO ESTILO PARA QUE COINCIDA... del men desplegable
de estilos en la barra de informacin de texto.
3. Escoge el estilo que deseas actualizar del cuadro de dilogo ACTUALIZAR ESTILO
PARA QUE COINCIDA... .
4. Activa los recuadros correspondientes para decidir si deseas que el estilo de
texto haga coincidir nicamente el nuevo texto o todo el texto similar del
documento. Quita la seleccin de APLICAR A TODO EL TEXTO SIMILAR EN ESTE
DOCUMENTO si quieres que el estilo se aplique nicamente al prrafo en donde
se encuentra el cursor de texto.
5. Haz clic en APLICAR. Ahora, has redefinido el texto como el estilo de texto
seleccionado.

La opcin APLICAR A TODO EL TEXTO SIMILAR EN ESTE DOCUMENTO es til para aplicar
estilos de texto a documentos existentes que todava no utilicen estilos de texto,
como PDF importados. Para poder aplicar un estilo a todo el texto similar del
documento, el texto de ms del 50% de un prrafo debe tener la misma fuente y
tamao de fuente, y tambin debe tener la misma configuracin de alineacin y
sangra (con una pequea tolerancia).

Estilos basados en otros estilos


En Web Designer, puedes crear un estilo a partir de otro. Supongamos que deseas
otra variante del estilo de Encabezado 2 que sea idntico, pero con otro color; debers
crear un nuevo estilo a partir del "Encabezado 2" en el dilogo CREAR ESTILO. Esto
significa que si actualizas el "Encabezado 2" para que, por ejemplo, tenga una nueva
fuente o tamao, el nuevo estilo tambin tendr la nueva fuente o tamao.

Los nuevos estilos de carcter se basan normalmente en el "Estilo de prrafo


subyacente", pero solo con los cambios que deseas. Por lo tanto, esto significa que si
aplicas un estilo de carcter que solo establece el color de texto a una palabra, y luego
alteras el estilo del prrafo, esta palabra cambiar para adaptarse a excepcin de su
color.

Creacin de nuevos estilos


Para crear un estilo completamente nuevo, selecciona alguna parte del texto al que
quieras aplicar el estilo, escoge el men CREAR ESTILO del men desplegable de estilos
o de la BARRA DE INFORMACIN DE LA HERRAMIENTA DE TEXTO.

Si deseas crear un nuevo estilo de prrafo, te recomendamos seleccionar y aplicar los


cambios a todo un apartado, antes de seleccionar la opcin del men CREAR ESTILO.

www.magix.es
Trabajar con textos 231

Este dilogo muestra un nuevo estilo, (NuevoEstilo2) que se crea como ESTILO DE
PRRAFO , a partir del estilo ENCABEZADO 2 ya existente. La opcin PRRAFO SIGUIENTE
determina el estilo que se utilizar cuando comiences a escribir el prximo apartado.

La seccin inferior del dilogo muestra la definicin completa de este estilo. En este
caso, puedes ver que se basa en el Encabezado 2, con solo un cambio de color.

Para crear un estilo que no se base en ningn otro estilo, es decir, que no herede
ningn atributo de otro estilo, selecciona (Sin estilo) de la opcin "Basado en:" tal
como se muestra a continuacin.

El dilogo muestra que estoy creando un NuevoEstilo2 que es un estilo de prrafo y


que no me estoy basando en ningn otro estilo. Esta seccin inferior enumera todos
los atributos que crean este estilo; en el ejemplo puedes ver que utilic la fuente
Palatino, de 12 pxeles y que he aplicado sangra. Los otros atributos listados aqu
tambin se han tomado del texto seleccionado, es decir, que este estilo consiste en
una definicin completa con una lista de todo el texto posible. En este caso, al
introducir texto en este estilo, el "Prrafo siguiente" (es decir, cuando pulses Intro)
tendr el mismo estilo.
232

Eliminacin de estilos: los estilos que no se utilizan en ningn lugar de un


documento se eliminan automticamente al guardar y volver a cargar el documento.
Sin embargo, los estilos por defecto (texto normal y los encabezados de 1 a 3) no se
eliminan jams.

Eliminacin de estilos
La lista de ESTILOS en el men ESTILOS incluye la entrada SIN ESTILO. Si seleccionas
esta opcin, el estilo (de prrafo o de carcter) se quitar de la seleccin y el texto
regresar al formato por defecto.

Propiedades de estilo
Si quieres cambiar la definicin de un estilo, como el estilo en el que se basa, o
simplemente mirar su definicin, puedes usar la opcin PROPIEDADES del men de
estilos. Necesitas seleccionar texto que tenga un estilo aplicado antes de hacerlo a fin
de indicar el texto que deseas editar.

Aparecer el dilogo PROPIEDADES DE ESTILO, que tiene el mismo aspecto que el


dilogo CREAR ESTILO.

La descripcin del estilo en la parte inferior del dilogo describe las diferencias
respecto al estilo en que se basa. Por lo tanto, si deseas ver todos los atributos del
estilo, selecciona temporalmente SIN ESTILO en la listaBASADO EN para ver una
descripcin completa. No olvides restablecerlo el estilo correcto en BASADO EN o
hacer clic para cancelar el dilogo si no quieres cambiar el estilo.

Aplicar estilos de texto


Cambiar el tamao de fuente
Existen diversas formas de cambiar el tamao de la fuente:

Introduce un nuevo valor en el campo de texto de tamao de la barra de


informacin y pulsa .
O selecciona una opcin de la lista desplegable TAMAO DE FUENTE en la barra
de informacin.
O utiliza la barra deslizante emergente de tamao de fuente (en la pgina 200).
O aumenta/disminuye el tamao de fuente con Ctrl + + > y Ctrl + + <. Esta
opcin se aplica solamente si todas las partes de texto seleccionadas tienen el
mismo tamao de fuente.
O utiliza la herramienta de SELECCIN para cambiar el tamao de todo el objeto
de texto.

www.magix.es
Trabajar con textos 233

Negrita y cursiva
Haz clic sobre el botn NEGRITA o CURSIVA de la barra de informacin
("Ctrl + B" o "Ctrl + I")

Esta opcin aplica la variante negrita o cursiva de la fuente actual.

Subrayado de texto
Haz clic en el botn de subrayar en la barra de informacin para subrayar el
texto seleccionado.

El color de subrayado y el tamao deriva automticamente del color y tamao del


texto.

Destacar texto
Para aplicar un color de fondo para el texto, es decir, un color de fondo para destacar
el texto...

Destaca texto con la HERRAMIENTA DE TEXTO


Haz clic derecho sobre un color en la LNEA DE COLORES .
Selecciona ESTABLECER FONDO DE TEXTO del men

Para ms detalles, consulta Aplicacin de un color de fondo para el texto (en la pgina
183).

Justificacin o alineacin de texto


La justificacin siempre se aplica a toda la lnea. Cualquier regin seleccionada se
ignorar.

Justificacin IZQUIERDA: el borde izquierdo del texto se alinea a la posicin inicial


de clic.
Justificacin CENTRAL : centra el texto alrededor de la posicin de clic.
Justificacin DERECHA: el borde derecho del texto se alinea a la posicin inicial de
clic.
Justificacin COMPLETA: esto slo se aplica cuando el texto sigue a una curva o
se encuentra en una columna y cuando haya al menos una lnea completa de
texto para justificar.
234

Al usar texto simple la posicin inicial de clic de la pgina se toma como origen de
la justificacin de texto.

Superndice y subndice
Haz clic en el botn apropiado sobre la BARRA DE INFORMACIN .
superndice
Texto normal subndice

Agregar y quitar sangras


Agregar sangra a un prrafo de texto.

Quitar sangra a un prrafo de texto.

Espaciado de lnea
El espaciado de lnea te permite cambiar el espacio entre dos
lneas (afecta el espaciado vertical).

El espaciado de lnea se mide en porcentajes (120%) o puntos (12pt). Puedes


introducir el valor de espacio de lnea en el campo de texto o hacer clic sobre las
flechas para desplazar los valores.

La configuracin de porcentajes tiene como beneficio de que cambia de tamao si


cambias el tamao de la fuente. Si se aplica un porcentaje a una lnea de texto con
varios tamaos de fuente, se utilizar el tamao ms grande. Por ejemplo, si una lnea
contiene texto 90% y 100%, el espaciado de lnea se calcular a partir del 100%.

Espaciado de prrafos
Los dos ltimos campos de la barra de informacin de la herramienta
de texto te permiten configurar el espacio antes y despus de los
prrafos.

Esto es particularmente til cuando quieres configurar espacios de media lnea entre
los prrafos.

Al igual que en Microsoft Word, cuando utilizas el espaciado arriba y abajo de los
prrafos, el espaciado es el valor mayor entre ambos (no se acumula). El espaciado
arriba del prrafo mover el primer prrafo hacia abajo en un marco de texto.

www.magix.es
Trabajar con textos 235

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 botn de enlace en la barra de
herramientas de WEB .

Esto abre el dilogo de PROPIEDADES WEB con la pestaa ENLACE seleccionada. En esta
pestaa puedes elegir si quieres vincular un URL, otra pgina 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
pestaa PGINA WEB del dilogo de PROPIEDADES WEB (men HERRAMIENTAS-
>PROPIEDADES WEB ). Asimismo puedes fijar el color que aparece cuando el usuario
mueve el cursor del ratn 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 pgina web
usando las listas desplegables, o bien puedes hacer clic en el botn EDITAR para abrir
el EDITOR DE COLOR mediante el cual puedes elegir el color que quieras.

Asimismo, si fuera necesario tambin puedes sobrescribir los colores globales de los
enlaces de texto para enlaces individuales. En la pestaa de enlaces del dilogo de las
propiedades web, deselecciona la opcin "Utilizar los colores de enlace de pgina web
usuales". A continuacin el enlace seleccionado adoptar el color de texto que fijaste
en el documento, en lugar del color global del enlace de texto.

Texto dentro de grupos para pginas web


Al exportar un documento como pgina web, todos los grupos sern exportados
como imgenes. De este modo, ningn texto dentro de un grupo podr ser
seleccionado y copiado como texto por un visitante de tu pgina web.

Esto suele ser apropiado para botones grficos, ttulos, logotipos, etc., ya que el texto
forma parte del grfico. Sin embargo puede que tengas ms piezas de texto
importantes dentro de grupos que desees mantener como texto en tu pgina web
exportada. Para hacer esto, solo tienes que aplicar el nombre especial "Texto HTML"
a tu objeto de texto. La forma ms fcil de hacer esto se explica a continuacin:
236

1. Escoge la HERRAMIENTA DE TEXTO y haz clic en el texto para insertar el cursor de


texto.
2. Pulsa Esc para seleccionar todo el objeto de texto.
3. Abre el dilogo de nombre ("HERRAMIENTAS" > "NOMBRES..." ).
4. O bien selecciona el nombre de TEXTO HTML de la lista desplegable APLICAR
NOMBRE " si ya lo has utilizado en el documento actual, o bien teclea el nombre
de "Texto HTML". A continuacin haz clic en AADIR para aadir el nombre.

Ahora, cuando exportes tu pgina web, tu texto permanecer como texto y el resto
del grupo se convertir en imagen. Todos los paneles de texto suministrados por la
GALERA DE DISEOS 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 rotacin, por lo que no puedes
utilizar este nombre para forzar que el texto con rotacin sea exportado como texto.
En este caso, el nombre se ignora.

Copiar estilos de texto


Es fcil copiar el estilo de cualquier texto a otra regin de texto utilizando la opcin
PEGAR ATRIBUTOS :

Selecciona la regin fuente cuyo estilo quieres copiar. Esto puede ser tambin
una sola palabra (slo haz doble clic).
Selecciona Edicin > Copia (o Ctrl+C).
Selecciona la regin de texto a la que quieres aplicar el estilo.
Selecciona Edicin > Pegar atributos (Ctrl + Majs + A).

Si el cursor de texto se encuentra posicionado en algn texto cuando PEGAS


ATRIBUTOS , los atributos del prrafo se pegarn a este otro (p.ej. tabulaciones,
mrgenes). Si has seleccionado una regin de texto, entonces PEGAR ATRIBUTOS
insertar todos los atributos visuales del texto fuente.

Aplicar atributos a historias de texto completas


Si el cursor se encuentra en un objeto simple o una columna de texto, Esc
seleccionar todo el objeto de texto. Puedes aplicar un atributo, por ejemplo, un color,
y todo el objeto de texto se modificar. Esto es con frecuencia ms rpido que realizar
seleccionar todo (Ctlr+A).

Con las reas de texto este mtodo slo funciona si se han seleccionado todas las
reas de texto. Puedes hacer esto en la herramienta de SELECCIN con un clic y +clic
sobre las diferentes reas de texto para seleccionarlas. Pero este mtodo slo es
posible si las reas de texto se encuentran en una sola pgina. Si tu historia de texto
fluye por diferentes pginas y quieres cambiar todo el texto, entonces ser necesario
Seleccionar todo (Ctrl+A) y despus aplicar los atributos deseados.

www.magix.es
Trabajar con textos 237

Copiar / Pegar texto con formato (RTF)


Puedes copiar texto con formato desde otras aplicaciones como editores o
procesadores de texto y copiarlo en MAGIX Web Designer 11 Premium como texto y
las fuentes, mrgenes y espaciado de lneas se conservarn. 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
opcin 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 tambin funciona al revs. Puedes copiar texto de Web Designer y pegarlo en
otras aplicaciones compatibles con Rich Text y el estilo (fuente, tamao, colores,
mrgenes, etc.) se conservar. Esto funciona solamente si copias de un objeto de
texto simple o de un nico texto fluido.

Algunas aplicaciones, como Microsoft Word, tienen una opcin 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 grfico).

Incrustacin de fuentes en el documento


MAGIX Web Designer 11 Premium guarda las formas de caracteres de todas las
fuentes usadas en tu documento. Esto significa que si pasas tu archivo de diseo a
otra persona o transfieres el archivo a otro equipo, el texto seguir teniendo la misma
apariencia, incluso si las fuentes correctas no estn instaladas.

Incrustacin de fuentes en un sitio web


La mayora de los documentos de sitios web utilizan nicamente fuentes compatibles
con la web, que son fuentes que estn instaladas en la mayora de los equipos y otros
dispositivos, de forma que pueden utilizarse sin inconvenientes en cualquier pgina
web. Sin embargo, puedes utilizar casi cualquier fuente en un sitio web (siempre que
los permisos de la fuente te lo permitan), puesto que Web Designer publicar
automticamente la fuente en tu sitio de forma que el texto aparezca correctamente
en todos los equipos, independientemente de si est instalada o no.

Para ayudar a tu pgina a cargar de manera ms rpida, tan solo se incluyen


caracteres Western en la fuente incrustada, a menos que tu documento use otro tipo
de caracteres tambin.

Cuando exportes o realices una vista previa de un documento que utiliza fuentes que
no son compatibles con la web, Web Designer te mostrar un aviso con la lista de
fuentes que se incrustarn en tu pgina web. Esta caracterstica te recordar que tu
238

sitio incluye fuentes incrustadas. Tambin puedes ver qu fuentes se estn utilizando
en tu documento junto con sus permisos en "ARCHIVO" > "INFORMACIN DEL
DOCUMENTO..." Consulta Permisos de fuentes (en la pgina 238) para ms
informacin.

Algunas fuentes no permiten la incrustacin en un documento ni en una pgina web.


Web Designer detecta estas fuentes y emite una alerta independiente si intentas
utilizar estas fuentes en un documento de sitio web. En ese caso, debers cambiar a
una fuente que sea compatible con la web, una fuente de Google o cualquier otra que
s permita la incrustacin.

Permisos de fuentes
Al integrar fuentes existen cuatro niveles de permisos de fuentes, es decir, cuatro
niveles de uso segn la licencia de la fuente. Estos cuatro niveles son los siguientes:

1. Instalable: el nivel ms permisivo. Permite incorporar la fuente en el documento


e instalarla de forma permanente en el equipo del invitado.
2. Editable: muestra la fuente que se incorporar en el documento, pero solo
permite utilizarla de forma temporal en el sistema.
3. Impresin y vista previa: permite incorporar la fuente en el documento, pero
nicamente para su impresin y visualizacin.
4. Restringido: la fuente no puede incorporarse en el documento.

Adems de las advertencias que Web Designer te muestra con la lista de las fuentes
que se incorporarn en tu sitio web, podrs tambin ver los niveles de permisos si
miras la INFORMACIN DEL DOCUMENTO . Ve a "ARCHIVO" > "INFORMACIN DE
DOCUMENTO..." .

Cuadro de dilogo de informacin del documento que muestra las fuentes junto con sus permisos
de integracin.

www.magix.es
La herramienta de relleno 239

La herramienta de relleno

Crear un relleno de color con gradacin


El proceso de creacin de un relleno diferente es casi igual para todos los tipos
de relleno:
1. Selecciona el objeto o los objetos a los que quieres aplicar el relleno.
2. Selecciona la herramienta de RELLENO ("G")
3. Selecciona el tipo de relleno del men desplegable.
4. Haz clic y arrastra hasta el objeto para crear el relleno. O arrastra uno de los
controles deslizantes de relleno para ajustar el tamao y posicin del relleno

MAGIX Web Designer 11 Premium suministra una vista previa interactiva del relleno a
medida que arrastras.

Mientras arrastras, aparecer una flecha de


relleno que indica la direccin del relleno. Los
controles deslizantes se pueden seleccionar y
arrastrar para ajustar la posicin y el ngulo
del relleno.

Relleno de colores
Selecciona uno de los controles deslizantes de relleno y haz clic sobre un color de la
LNEA DE COLORES o abre el EDITOR DE COLOR y elige un nuevo color. Puedes pulsar
"Tab" para cambiar entre los controles deslizantes de relleno.

Tipos de relleno
Web Designer dispone de estos tipos de relleno de color:

RELLENO LISO : la forma recibe un color o tono parejo en toda la


superficie.

RELLENO LINEAL : el color cambia gradualmente de un color a


otro.

RELLENO CIRCULAR : el color cambia a partir de un punto en


forma circular.
240

RELLENO ELPTICO : similar al relleno circular, salvo que el cambio


se realiza en forma elptica.

RELLENO CNICO : el cambio de color gira alrededor de un punto.


El efecto es de un cono iluminado desde un lado con el lado
opuesto con otro color.
RELLENO DE ROMBOS : similar al relleno elptico, solo que el
relleno son como rombos.

RELLENO DE TRES COLORES : muestra tres colores diferentes,


como si hubiera luces iluminando el objeto.

RELLENO DE CUATRO COLORES : lo mismo que el relleno de tres


colores, pero con cuatro colores.

RELLENO DE MAPA DE BITS : el objeto se rellena con una o ms


copias de un mapa de bits o foto. Todas las fotos que ves en
MAGIX Web Designer 11 Premium son formas con relleno de
mapa bits (por lo general rectngulos, por supuesto). Puedes
utilizar cualquier foto o cualquier mapa de bits de las galeras de
MAPAS DE BITS o RELLENOS .

NUBES FRACTALES : produce un relleno aleatorio con parches que


es especialmente til para nubes y neblina.

PLASMA FRACTAL : un relleno aleatorio de parches que presenta


un mayor contraste que el relleno de nubes fractales.

La herramienta de RELLENOS te permite aplicar estos tipos de relleno a los objetos


seleccionados, as como editar y ajustar los rellenos.

Seleccionar dentro automticamente


En la herramienta de relleno, se aplica automticamente la opcin "Seleccionar
dentro" si haces clic sobre un objeto, es decir, que se selecciona parte de un grupo en
vez del grupo como un todo. Esto facilitar tu trabajo con fotos y rellenos dentro de
grupos. Si quieres cambiar el atributo de relleno de un grupo (que no es muy
probable) necesitas seleccionar el grupo utilizando la HERRAMIENTA DE SELECCIN .

www.magix.es
La herramienta de relleno 241

Barra de informacin de herramienta de relleno

Tipo de relleno
Segmentacin de relleno
Efecto de relleno
Nombre de mapa de bits
Perfil
Control deslizante/resolucin de relleno
Color/grano del control deslizante

TIPO DE RELLENO selecciona el tipo de relleno. Si seleccionas de este men:


con un objeto seleccionado, aplica el relleno al objeto
sin un objeto seleccionado, establece el actual tipo de relleno, el cual se usa para
objetos nuevos dibujados.

SEGMENTACIN DE RELLENO se utiliza al aplicar mapas de bits y rellenos fractales. Las


opciones se describen ms adelante en los rellenos de mapas de bits. La
segmentacin de relleno cambia la repeticin del efecto de relleno. Las opciones son:

Simple: el relleno se utiliza una sola vez, independientemente del tamao del
objeto.
Repetir/Mosaico repetido: el efecto se repite hasta llenar todo el objeto.
Invertir mosaico repetido: slo disponible en rellenos fractales y de mapas de
bits. Esto es similar al mosaico repetido, pero uno de cada dos mosaicos est
invertido.

Las opciones de segmentacin de


relleno no estn disponibles para
los rellenos cnicos. Todos los
otros tipos de relleno pueden
repetirse. Esto puede producir
efectos muy tiles.

Un relleno elptico con repeticin dentro de una


forma de elipse

El EFECTO DE RELLENO se utiliza para todos los tipos de rellenos, con excepcin de los
rellenos de 3 y 4 colores. Controla el desvanecimiento del relleno desde el color de
inicio al color de fin:
242

TRANSICIN (FADE) :crea una transicin entre dos colores de forma lineal.
ARCO IRIS :
realiza una transicin siguiendo el borde ms corto del modelo de
color HSV. Por ejemplo, una transicin de amarillo a cian ser amarillo-verde-
cian.

Esta opcin no tiene efecto alguno cuando los dos colores son negro, blanco y gris.

ALT ARCO IRIS : similar a la opcin arco iris salvo que la transicin se realiza
siguiendo el borde ms extenso de la rueda de color. Por ejemplo, la transicin
de amarillo a cian ser amarillo-rojo-magenta-azul-cian.

El NOMBRE DE MAPA DE BITS muestra un men desplegable con vistas en miniatura de


todos los mapas de bits de la GALERA DE MAPAS DE BITS y es una forma sencilla de
seleccionar el mapa de bits que necesitas para rellenarlo.

Con el PERFIL DE RELLENO puedes determinar la graduacin de la "transicin de color"


desde el comienzo y hasta el fin del relleno. Esto se aplica a todos los tipos de relleno,
excepto a los rellenos lisos, los de tres y cuatro colores y los rellenos de mapa de bits
(al menos que sea un mapa de bits con un color de tono continuo). Para cambiar el
perfil de un relleno:

1. Selecciona el objeto con relleno.


2. En la barra de informacin de la HERRAMIENTA DE RELLENO haz clic en PERFIL . Esto
abrir el cuadro de dilogo de PERFIL .
3. Selecciona un perfil predefinido de la lista desplegable o arrastra los
deslizadores para crear un perfil personalizado. La opcin superior en la lista
desplegable (la lnea directa) crea una transicin lineal entre el comienzo y el fin
del relleno.

Aqu se ven tres tipos distintos de rellenos con escala de grises con sus correspondientes cuadros
de dilogos de perfil. El del centro, que viene por defecto, es una transicin lineal de negro a
negro.

www.magix.es
La herramienta de relleno 243

CONTROL DESLIZANTE DE RELLENO : indica si el control deslizante de inicio o fin est


seleccionado. Este campo queda en blanco para rellenos lisos.

RESOLUCIN (slo rellenos de mapas de bits y fractales): muestra la resolucin del


mapa de bits (siempre que no hayas seleccionado un control deslizante de relleno).
Puedes introducir una nueva resolucin para cambiar el tamao del mapa de bits. Las
resoluciones bajas muestran los pxeles individuales del mapa de bits. Muy pocas
veces se necesita una resolucin mayor que 150 DPI, incluso para utilizacin de
tipografa.

COLOR DE CONTROL DESLIZANTE DE RELLENO (excepto el relleno de mapas de bits):


indica el color aplicado al control deslizante de relleno seleccionado.

Rellenos lisos
Para aplicar o cambiar un relleno liso:

1. Selecciona un relleno liso del men de tipos de relleno.


2. Elige un color de LNEA DE COLORES .

La lnea de colores se describe en Manejo de colores (en la pgina 179).

Rellenos lineales
As se utilizan los 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 ratn en el lugar donde debe comenzar el relleno. (Esto
tambin puede ser fuera del objeto).
3. Arrastra el cursor hasta la posicin de fin del relleno. (Tambin puede
encontrarse fuera del objeto).

La flecha que se dibujar sobre el objeto seleccionado, se denomina flecha de relleno.


Esta flecha muestra la direccin y el alcance de la gradacin del relleno. Ambos
extremos de la flecha pueden marcarse con un clic.
244

Desplazamiento de los controles de inicio y fin de un


relleno
Modificacin de la direccin y el tamao de la gradacin de un relleno:

1. Desplaza el cursor sobre el control deslizante que quieres mover. Al


encontrarse sobre el control deslizante, el aspecto del cursor cambiar.
2. Arrastra el control deslizante.

Cambiar colores de un relleno


Para cambiar el color de un relleno:
Arrastra el color desde la LNEA 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 lnea 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 sealado),
simplemente haz clic sobre un color.

La lnea de colores se describe en Trabajar con colores (en la pgina 179).

Cada mtodo cambia el color de un solo control deslizante; no se cambia ningn otro
control deslizante seleccionado, o:

1. Selecciona el control deslizante (o controles deslizantes, tambin funciona con


objetos mltiples) correspondiente.
2. Escoge el color deseado de la lnea de colores.
3. Esto cambia todos los controles deslizantes de relleno seleccionados.

Rellenos circulares
Para los rellenos circulares, la aplicacin del relleno,
movimiento de los controles deslizantes y el cambio de los
colores son iguales a los rellenos lineales. El control
deslizante de inicio es el centro del relleno.

Los rellenos circulares son tiles para crear efectos de sombras. Cambiar el aspecto
alto/ancho del objeto cambia automticamente un relleno circular a un relleno
elptico (ver a continuacin).

Una forma rpida de aplicar un relleno circular:

+arrastra para crear un relleno circular.


www.magix.es
La herramienta de relleno 245

Rellenos elpticos
La aplicacin de un relleno elptico es similar a la aplicacin
de rellenos lineales. A medida que arrastras el cursor del
ratn, creas un crculo con dos controles deslizantes de fin.
Despus puedes arrastrar estos controles deslizantes para
crear una elipse adecuada.

+ arrastrar conserva la relacin de aspecto del relleno. Ctrl+arrastrar limita la


rotacin a los ngulos de restriccin configurados. El desplazamiento de controles
deslizantes y el cambio de colores es igual que para los rellenos lineales.

Rellenos de mapa de bits

Tipo de relleno
Segmentacin de relleno
No utilizado
Nombre de mapa de bits
Resolucin
No utilizado

La Galera de mapa de bits se describe en La galera de mapa de bits (en la pgina


333) en el captulo Trabajar con fotos, para Galera de rellenos, lee ms abajo (en la
pgina 250).

El relleno de mapas de bits es el tipo de relleno ms impactante. Te permite utilizar


cualquier foto o textura como relleno de cualquier forma y te ofrece control directo
sobre el tamao, ngulo, posicin y mosaico. Tambin puedes colorear los rellenos de
mapas de bits. Puedes utilizar cualquier tipo de mapas de bits, incluyendo fotos JPEG
y canal alfa (semi-transparentes).

Cuando importas un archivo de foto en MAGIX Web Designer 11 Premium (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 lnea 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:
246

Arrastra un mapa de bits desde la GALERA DE MAPA DE BITS o desde el


explorador de Windows, manteniendo Shift presionada y soltando, o bien
Arrastra un relleno desde la GALERA DE RELLENOS hasta una forma (en este caso,
no es necesario mantener Shift presionada antes de soltar)
Selecciona "Mapa de bits" del men desplegable de la izquierda de la BARRA DE
INFORMACIN de la HERRAMIENTA DE RELLENO , y luego selecciona el mapa de bits
requerido del men desplegable de nombres de mapas de bits (solo muestra
mapas de bits que hayan sido cargados previamente).

Puedes rellenar un objeto con un mapa de bits o mltiples repeticiones del mapa de
bits.

Mosaico simple (foto) Mosaico repetido Repetir invertido: los mosaicos se


adaptan de forma perfecta.

El relleno tiene tres controles deslizantes. Para ello, utiliza Cambiar el tamao y la
posicin del relleno de mapa de bits (en la pgina 248). Una forma alternativa de
configurar el tamao del mapa de bits es introducir la resolucin en el campo de la
barra de informacin. Primero tienes que deshacer la seleccin 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 resolucin dpi.

Sustitucin de los rellenos de mapa de bits


Si una forma ya contiene un mapa de bits, o es una foto, entonces solamente puedes
arrastrar y soltar un nuevo mapa de bits desde cualquier fuente, como el Explorador
de Windows, y se sustituir el mapa de bits existente. La nueva imagen se adaptar a
la forma de forma exacta. Al hacer esto tambin se sustituirn las otras instancias de
la foto en la pgina actual si estas se encuentran en el mismo GRUPO SUAVE .

Si presionas SHIFT al sustituir una foto de esta forma, la posicin, escala y rotacin del
relleno de mapa de bits se conservar.

www.magix.es
La herramienta de relleno 247

Coloreado de mapa de bits


Puedes colorear cualquier mapa de bits o relleno de foto pulsando simplemente sobre
un color en la LNEA DE COLOR (asegrate de no haber seleccionado ningn control
deslizante de relleno, al hacer clic sobre la imagen). Esto crear un tono contnuo
(tcnicamente tono dual) que flucta entre el negro y el color seleccionado. Tambin
puedes hacer clic derecho en la lnea de color y seleccionar 'ESTABLECER COLOR CLARO
DE TONO CONTINUO ' o bien 'ESTABLECER COLOR OSCURO DE TONO CONTINUO '.

Por ejemplo, para convertir una foto a blanco y negro, slo necesitas hacer clic en el
color blanco de la lnea de color.

Para cancelar cualquier color aplicado, escoge SIN COLOR


para cualquiera de los controles deslizantes. Esto restaura
el color original del mapa de bits.

El campo RESOLUCIN de la BARRA DE INFORMACIN muestra la resolucin que puede


modificarse moviendo los controles deslizantes de relleno o introduciendo un valor.

Cambio del tamao y la posicin del relleno de mapa de


bits
Si pulsas Shift, haces clic y arrastras hasta una forma que ya contiene un relleno de
mapa de bits, se crear un nuevo relleno de mapa de bits cuyo centro se encontrar
en el punto del clic. Si mantienes pulsada la tecla Ctrl tambin, el ngulo se limitar,
de forma que te ser ms fcil crear un mapa de bits vertical.

Una vez que has creado el relleno, puedes arrastrar


hasta cualquier lugar de la imagen para reposicionar el
relleno dentro de la forma.

Al pasar el ratn sobre los controles deslizantes de


relleno exteriores, el cursor del ratn se convertir en
un cursor de "rotacin". Si arrastras los controles
deslizantes externos, el relleno de mapa de bits se
ampliar, pero manteniendo la relacin de aspecto; si
pulsas "" mientras arrastras, se cambiar el tamao
vertical y el horizontal de forma independiente y el
relleno se doblar. La barra de informacin muestra la
resolucin del relleno de mapa de bits (puedes ajustar
la resolucin y, por lo tanto, el tamao del mapa de
bits, introduciendo un nuevo valor).
248

Un ejemplo

Para rellenar la elipse de la izquierda con la foto central:

1. Arrastra la foto o archivo de mapa de bits desde el Explorador de Windows (o


desde la Galera de mapas de bits si ya se ha utilizado en el documento) hasta la
elipse y luego arrstrala mientras pulsas la tecla "Shift". La herramienta de
relleno se convertir en la herramienta actual.
2. Ahora podrs ajustar el ngulo y tamao de la imagen arrastrando los controles
deslizantes de relleno.

El ejemplo anterior tiene una sombra simple. Lee el captulo sobre la herramienta de
sombras (en la pgina 257) para ms informacin.

Relleno fractal
MAGIX Web Designer 11 Premium es compatible con dos tipos de rellenos fractales
que son modelos de relleno naturalistas creados matemticamente. 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.

El control GRANO de la BARRA DE INFORMACIN te permite controlar la proporcin de


granos del modelo. Los valores bajos resultan en un modelo suave, mientras que los
valores altos dan modelos con granos ms marcados.

Puedes ajustar el tamao y posicin 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 resolucin y
granos.

www.magix.es
La herramienta de relleno 249

Relleno fractal con nubes. A la izquierda con valor de grano 1, a la derecha con valor de grano 50.

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 resolucin. El grano controla el flujo del modelo.
La resolucin establece el tamao del mapa de bits fractal y la impresin de los
pxeles individuales.

Puedes cambiar los colores de inicio y fin de un relleno fractal. Selecciona los
controles deslizantes centrales o externos y despus aplica el color utilizando la lnea
de colores o la galera de COLOR . Para cancelar el color aplicado, escoge Sin color.

Gradaciones de color de varios niveles


Muchos de los tipos de rellenos con gradacin de color (lineal, circular, elptico,
cnico, rombos) son compatibles con rellenos de gradacin 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 aadir un nuevo nivel de color a una graduacin, selecciona la herramienta de


relleno para que se vea la flecha de relleno y despus:

Arrastra un color hasta el lugar correspondiente de la flecha de relleno.


O haz doble clic sobre la flecha de relleno para crear un nuevo control de relleno
y despus haz clic sobre un color o abre el EDITOR DE COLOR .

Puedes reposicionar los controles deslizantes de relleno simplemente arrastrndolos.


250

Si un control deslizante de relleno se encuentra seleccionado, pulsa Tab para


seleccionar el siguiente. Si el EDITOR DE COLOR est abierto, se actualizar para reflejar
el nuevo control deslizante de relleno

Para eliminar un control deslizante de nivel, seleccinalo con un clic y pulsa la tecla
Supr.

La galera de rellenos
La GALERA DE RELLENOS contiene texturas de mapas de bits que pueden utilizarse
para rellenos. Slo cuando utilizas un relleno se copia en el documento.

Para ver la GALERA DE RELLENOS :


Escoge HERRAMIENTAS > GALERAS > GALERA DE RELLENOS .
O pulsa " + F11".

IMPORTAR : importa el mapa de bits seleccionado en el documento. Una copia del


mapa de bits aparece en la GALERA DE MAPAS DE BITS . Tambin puedes arrastrar y
soltar el mapa de bits hasta una parte en blanco de la pgina. Esto es en general ms
fcil que hacer clic en IMPORTAR .

RELLENAR : importa y aplica el mapa de bits seleccionado como:

Un relleno de mapa de bits en los objetos seleccionados (de existir).


www.magix.es
La herramienta de relleno 251

O, si ningn objeto es seleccionado, inserta el mapa de bits en el documento


como un nuevo objeto de foto.

Tambin 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 galera de MAPAS
DE BITS o la GALERA DE RELLENOS: al arrastrar mapas de bits desde la GALERA 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 adaptacin posible
para la forma. Este comportamiento es diferente al que ocurre al arrastrar desde la
galera de mapa de bits porque en general las texturas se aplican desde la galera de
rellenos y normalmente tienen forma de mosaico y no adaptadas.

TRANSP : (transparencia) importa y aplica el mapa de bits seleccionado como:

Un mapa de bits transparente al objeto seleccionado (de existir).


O configura el atributo de transparencia actual.

OBTENER RELLENOS : descarga rellenos gratis de Xara.

FONDO : establece el relleno seleccionado como fondo de pgina.

ELIMINAR : borra el relleno o carpeta seleccionada.

RELLENO DE DISCO : aade nuevos rellenos de tu disco duro o un CD.

OPCIONES : te permite seleccionar el tamao de los smbolos de vista previa y si se


debe mostrar informacin completa sobre el mapa de bits, as como buscar y ordenar
los rellenos.

DETENER DESCARGA : si tienes una conexin lenta y la descarga de Internet se demora,


puedes detener la descarga y continuarla ms tarde.

Buscar y ordenar estn descritos en el captulo Trabajar con documentos (en la


pgina 95).

Trabajar con documentos (en la pgina 95) incluye informacin general sobre
galeras.
252

Transparencia
La herramienta de TRANSPARENCIA te permite determinar cunto de los
colores y objetos subyacentes se podrn ver a travs de un objeto.

Forma
Tipo de transparencia
Segmentacin
Nombre de mapa de bits
Perfil
Control deslizante/Resolucin
Cantidad de transparencia

Puedes controlar el nivel de transparencia desde completamente opaco a


completamente transparente. Web Designer, con su amplia gama de gradaciones de
transparencia, te ofrece ms que otros paquetes de dibujo.

Puedes aplicar transparencia lisa o con gradacin a todos los tipos de objeto,
incluyendo mapas de bits.

Algunos usos de la transparencia:

Simular agua o vidrio.


Si quieres que los objetos se desvanezcan en partes de objetos o se mezclen con
el fondo.
Las transparencias de nubes o de niebla son especialmente ptimas para esto.
Utilizando el tipo especial de transparencia puedes iluminar, oscurecer y aplicar
efectos especiales a objetos y fotos.
Crear puntos iluminados o reflejos.

www.magix.es
Transparencia 253

El parabrisas tiene mltiples objetos superpuestos con distintas transparencias. El


reflejo del centro es un blanco 100% opaco que se va desvaneciendo poco a poco de forma
elptica.

Aplicar transparencia plana


Se llama transparencia "plana" porque todas las partes de los objetos tienen la misma
transparencia, a diferencia de la transparencia con gradacin.

1. Selecciona el o los objetos.


2. Selecciona la herramienta de transparencia (shortcut F6)
3. Arrastra la barra deslizante de transparencia en la barra de informacin

MAGIX Web Designer 11 Premium 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.

Aplicar transparencia con gradacin


La transparencia con gradacin funciona de forma muy similar a los rellenos de color
(en la pgina 239) con gradacin. Debes arrastrar sobre los objetos en la
HERRAMIENTA DE TRANSPARENCIA para crear una transparencia con gradacin. Tienes
a disposicin una gama similar de formas de transparencia: la ms sencilla es la lineal,
pero tambin puedes utilizar transparencias circulares o elpticas:

1. Selecciona el o los objetos.


2. En la HERRAMIENTA DE TRANSPARENCIA , arrastra a lo largo de los objetos para
crear un desvanecimiento lineal a lo largo del objeto.
3. Selecciona formas de transparencia alternativas del men desplegable de la
barra de informacin

Puedes seleccionar y ajustar la posicin y la intensidad de transparencia utilizando los


controles deslizantes del objeto.
254

Lee Rellenos (en la pgina 239) para ms informacin sobre cmo manipular los
controles deslizantes de relleno y las diferentes formas de relleno (en este caso,
formas de transparencia)

Transparencia con gradacin de varios niveles


Del mismo modo que puedes aadir varios niveles a un relleno con gradacin, puedes
hacer lo mismo con una transparencia con gradacin. Esto te permite, por ejemplo,
aplicar una gradacin desde opaco a transparencia de 50%, volver a transparencia de
25%, volver al opaco, etc.

Puedes definir el nivel de transparencia en cada nivel seleccionando un control


deslizante y ajustando la barra deslizante. Aade niveles adicionales haciendo doble
clic en la lnea de transparencia con graduacin.

Consulta el captulo Rellenos (en la pgina 239) para ms informacin sobre el uso de
controles deslizantes.

Tipos de transparencia
Web Designer es compatible con los principales tipos de transparencias que se
utilizan en muchas otras aplicaciones, como las siguientes:
Normal (Mezcla)
El color del objeto se mezcla con el color de los objetos subyacentes. El efecto es
similar a distribuir una capa fina de color (o pintura) sobre los objetos subyacentes.

Multiplicar (Vidriera)
El efecto es similar a ver los objetos subyacentes a travs de un vidrio de color. Es
ideal para la simulacin de cristal y para oscurecer objetos con criterio selectivo. Los
colores de los objetos a los que se aplica Multiplicar son:

Blanco: sin efecto en los colores de los objetos subyacentes.


Gris y blanco: oscurece los colores de los objetos subyacentes.
Otros colores: oscurece los colores subyacentes hacia el color saturado (rojo
claro sobre rojo claro resulta en rojo medio; verde sobre rojo da negro).

Tcnicamente, el proceso es sustractivo en el espacio de color RGB.

Trama (Blanqueador)
Trama no tiene ninguna analoga clara en el mundo fsico. Es til para crear puntos
destacados cuando la fuente de luz no es blanca. El color del objeto con aplicacin de
Trama:

Gris y blanco: aclara los colores de los objetos subyacentes.

www.magix.es
Transparencia 255

Negro: sin efecto en los colores de los objetos subyacentes.


Otros colores: aclara los colores subyacentes hacia el color sin saturacin. (Rojo
claro sobre rojo claro se convierte en rojo plido; verde sobre rojo se convierte
en amarillo).

Tcnicamente, el proceso es aditivo en el espacio de color RGB.

Para estos tipos de transparencia, la barra deslizante controla la cantidad de


transparencia desde opaco (transparencia 0%) hasta completamente transparente
(100%).

Al aplicar una transparencia plana al objeto tambin se aplica una transparencia a la


lnea alrededor del objeto. No es posible configurar diferentes transparencias, pero
puedes eliminar la lnea con la opcin sin color o seleccionando el ancho de contorno
"ninguno". Para crear un objeto con un relleno transparente y una lnea no
transparente, utiliza un tipo de transparencia no plana.

Para ms informacin sobre colores, consulta Manejo de colores (en la pgina 179).

Ten en cuenta que los documentos de Web Designer que contengan tipos de
transparencia antiguos todava se referirn a ellos con sus nombres originales a
pesar de que ya no sean compatibles con Web Designer. Busca el nombre entre
parntesis en la lista de transparencias para identificarlos.

Perfil
Puedes ajustar el "gradacin de la transicin de color" entre el comienzo y el fin de las
transparencias. Esto se aplica a todas las distintas graduaciones de transparencia
excepto a las de tres y cuatro puntos (en dnde esta opcin no est disponible).

Para cambiar el perfil de una transparencia:

1. Selecciona el objeto.
2. En la barra de informacin de la herramienta de TRANSPARENCIA , haz clic en
PERFIL . Esto abrir el cuadro de dilogo de PERFIL .
3. Selecciona un perfil predefinido de la lista desplegable o arrastra los
deslizadores para crear un perfil personalizado. La opcin superior en la lista
desplegable (la lnea recta) crea una transicin lineal entre el comienzo y el fin
de la transparencia.
256

Mapas de bits
Las galeras de mapas de bits y rellenos se describen en el captulo Trabajar con
mapas de bits (en la pgina 327).

Cuando seleccionas un tipo de transparencia de MAPA DE BITS , se utiliza un mapa de


bits por defecto. Haz clic en NOMBRE DE MAPA DE BITS en la barra de informacin de
transparencia o utiliza las galeras de mapas de bits o rellenos para cambiar el mapa
de bits utilizado. (Clic sobre el botn TRANSP en la galera o arrastrar y soltar desde la
galera).

Por defecto, los colores ms claros de un mapa de bits son los ms transparentes.
(Por supuesto, puedes modificar la cantidad relativa de transparencia
posteriormente).

Control deslizante / resolucin


Si has seleccionado un control deslizante, este campo te indica cul es. Si no hay
ningn control deslizante seleccionado y se est utilizando una transparencia de
mapa de bits, controla el DPI.

Aplicar transparencia a varios objetos


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 estn
agrupados y aplicas transparencia, cada objeto individual recibir una transparencia
por separado y obtendrs un efecto diferente si los objetos estn superpuestos.

Transparencia individual (izquierda) o transparencia de grupo (derecha)

Mezclar transparencias individuales y de grupo


Puedes combinar los mtodos descritos anteriormente para crear combinaciones
complejas de transparencia. Por ejemplo, puedes aplicar un 50% de transparencia a
un objeto, despus agruparlo y aplicar tambin transparencia al grupo. Tambin
puedes aplicar primero transparencia al grupo y despus aplicar atributos a objetos
individuales dentro de un grupo. Simplemente pulsa Ctrl, haz clic sobre el objeto y
cambia sus atributos.

www.magix.es
Sombras 257

Sombras

La herramienta de sombra
La herramienta de SOMBRA (shortcut Ctrl+F2) te permite aplicar, eliminar y
modificar sombras semitransparentes (o "suaves").

Sin sombra
Tipos de sombras
Nitidez de la sombra
Transparencia de la sombra
Posicin de la sombra

MAGIX Web Designer 11 Premium tiene tres tipos de sombras:

Pared (Wall): la sombra se proyecta detrs del objeto.


Suelo (Floor): el objeto parece estar parado verticalmente sobre una superficie.
Brillo (Glow): la sombra se utiliza para aadir 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 resolucin y puedes modificar su
tamao sin prdida de calidad.

Aplicar una sombra


Aplicar una sombra de pared
Para aplicar una sombra de pared:

1. Selecciona el objeto.
258

2. Escoge la herramienta de SOMBRA .


3. Selecciona el botn PARED de la barra de informacin de la
herramienta de SOMBRA.
4. Puedes arrastrar la sombra desde o hacia el objeto para
crear ms o menos distancia entre el objeto y la pared
imaginaria.

Como alternativa para crear una sombra de pared:

1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA.
3. Arrastra desde el centro del objeto en direccin a la sombra.

Aplicar una sombra de suelo


1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botn SUELO de la barra de
informacin de la herramienta de SOMBRA.
4. Arrastra hacia o desde el objeto para cambiar el
tamao o la direccin radial. El ngulo puede tener
hasta 70.

Aplicar un efecto de resplandor


Aadir un resplandor o halo detrs de un objeto puede crear grficos muy
asombrosos.

Para crear un efecto de resplandor:

1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botn RESPLANDOR de la barra de
informacin de la herramienta de SOMBRA.
4. Arrastra hacia o desde el objeto para cambiar el
tamao del resplandor.

www.magix.es
Sombras 259

Desenfocar los bordes de la sombra


Esto cambia el tamao 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 estn desenfocadas
levemente, puesto que es ms realista.

Para desenfocar los bordes de la sombra:

1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA.
3. En la barra de informacin de la herramienta de SOMBRA, arrastra la barra
deslizante o introduce un valor en el campo de texto de la derecha.

Cambiar la transparencia de la sombra


Una sombra semitransparente es ms
realista que una sombra slida. Pero
puedes cambiar el nivel de transparencia
de la sombra para adaptarla a tus
necesidades.

Para cambiar la transparencia:

1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA.
3. En la barra de informacin de la herramienta de SOMBRA, arrastra la barra
deslizante de transparencia o introduce un valor en el campo de texto de la
derecha.

Cambiar el color de sombra o el efecto de


relleno
Despus de aplicar una sombra a un objeto, puedes cambiar el color de la sombra o el
efecto de relleno. Puedes aplicar cualquiera de los efectos de color de MAGIX Web
Designer 11 Premium incluyendo rellenos multinivel.
260

Cmo cambiar el color de la sombra:

Para ms informacin sobre colores y la lnea de colores lee el captulo Trabajar con
colores (en la pgina 179).

La forma ms fcil es arrastrar y soltar un color desde la lnea de color hasta la


sombra. (Asegrate de soltar el color sobre la sombra y no sobre el objeto.)
Como alternativa, tienes a disposicin este mtodo un poco ms complejo pero
que te permite el control absoluto sobre el color:
1. Selecciona la sombra utilizando la herramienta de SELECCIN . (Asegrate de
seleccionar la sombra y no el objeto).
2. Utiliza el EDITOR DE COLOR para editar el color.

Eliminar una sombra


Para eliminar una sombra suave:

1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA.
3. Selecciona el botn SIN SOMBRA de la barra de
informacin de la herramienta de SOMBRA.

Aplicar una sombra a varios objetos


El resultado de aplicar una sombra depende de la agrupacin de los objetos:
Si los objetos estn agrupados, las sombras superpuestas se fusionan (no se
oscurecen al superponerse).
Si los objetos no estn agrupados, cada objeto recibir una sombra individual.
Las partes superpuestas de las sombras se vern ms oscuras.
Si has seleccionado varios objetos con sombra, los cambios se aplicarn a todas
las sombras.

www.magix.es
Sombras 261

Seleccin de objetos con ayuda de la


herramienta de sombras
Antes de colocar una sombra a un objeto debes marcarlo. La forma usual de
seleccionar un objeto es a travs de la herramienta de SELECCIN . Sin embargo,
tambin puedes utilizar la herramienta de SOMBRAS para marcar un objeto con un
simple clic.

Copiar sombras a otros objetos


Una vez que una sombra se ve de la forma que deseas, puedes copiarla a otros
objetos utilizando la opcin PEGAR FORMATO/ATRIBUTOS . Simplemente copia el
objeto que tiene la sombra (EDICIN > COPIAR ), selecciona el objeto o los objetos a los
que quieres pegarle la sombra y escoge EDICIN > PEGAR FORMATO/ATRIBUTOS .
262

Biseles

La herramienta de bisel
La herramienta de BISEL (shortcut Ctrl+F3) da a los objetos una apariencia de
profundidad en vez de que parezcan planos sobre la pgina.

Los biseles tienen su propia resolucin, por lo que puedes modificar su tamao sin
perder calidad.

Tipo de bisel
Lista de tipo de barra deslizante
Valor numrico y de barra deslizante para el parmetro seleccionado
Bisel externo
Bisel interno
Estilo de unin

Puedes aplicar biseles a casi todos los tipos de objetos. Las excepciones son:

Partes de bloques de texto (como una sola letra): el bisel se aplica a todo el
texto.
A la curva seguida por un texto.
Objetos con contorno
Efectos en vivo (el bisel se aplicar al objeto antes de aplicar el efecto, si el
efecto es en vivo o a la caja circundante del efecto si el efecto est bloqueado).

Aplicar un bisel
Para aplicar un bisel a un solo objeto:

1. Selecciona el objeto
2. Escoge la herramienta de BISEL .
3. Escoge la forma de bisel de la lista TIPO DE BISEL . La opcin NINGUNO elimina
todos los biseles aplicados.

www.magix.es
Biseles 263

Aplicar un bisel a varios objetos


El resultado de un bisel sobre varios objetos, depende de la agrupacin de los objetos:

Si los objetos estn agrupados, los biseles que se superponen se fusionan. El


color de bisel es el mismo al del objeto trasero.
Si los objetos no estn agrupados, cada objeto recibir un bisel individual. El
color de bisel es el mismo al del objeto.

Modificar un bisel
Puedes cambiar el ngulo y elevacin de la luz y cambiar la forma, direccin y tamao
del borde del bisel.

Direccin del bisel


Los biseles pueden encontrarse dentro o fuera del objeto. Los biseles externos hacen
los objetos ms grandes, mientras que los biseles internos no cambian el tamao del
objeto.

Para cambiar la direccin del bisel.

1. Selecciona el objeto.
2. Haz clic en el botn INTERNO o EXTERNO.

Cambiar la fuente de luz del bisel


El efecto de bisel se crea con una luz que brilla a lo ancho del objeto y que ilumina la
forma (perfil) del bisel. Puedes cambiar la direccin y la altura de la luz, as como su
intensidad (contraste).

Cambiar el ngulo de luz (direccin horizontal):

1. Selecciona el objeto.
2. Arrastra la flecha para cambiar la posicin de la fuente de luz.

No puedes mover el centro de la flecha, sino solamente la punta


de la flecha.
264

Para establecer un ngulo preciso, selecciona NGULO DE LUZ de la lista TIPO DE


BARRA DESLIZANTE . Y despus arrastra la barra o introduce un valor en el campo de
texto.

Si has seleccionado varios objetos con bisel, el ngulo de luz se cambiar para todos
los biseles. Si arrastras la flecha, se cambiar slo el bisel (o biseles) de la flecha.

Cambiar la intensidad de la luz (contraste)


Para cambiar la intensidad de la luz:

1. Selecciona el objeto.
2. Selecciona CONTRASTE de la lista TIPO DE BARRA DESLIZANTE . Y despus arrastra
la barra o introduce un valor en el campo de texto.

Si has seleccionado varios objetos con bisel, los cambios se aplicarn a todos los
biseles. Los colores utilizados en el bisel afectan el contraste. Por ejemplo, los colores
fuertes (saturados) requieren ms contraste que los colores dbiles para obtener el
mismo efecto. Para mejor resultados, es posible que debas ajustar el contraste para
cada objeto.

Cambiar la elevacin de la luz (ngulo vertical)


Esto te permite mover la luz desde cualquier posicin arriba del objeto (90) hasta el
costado del objeto (0).

1. Selecciona el objeto.
2. Selecciona ELEVACIN DE LA LUZ de la lista TIPO DE BARRA DESLIZANTE . Despus
arrastra la barra o introduce un valor en el campo de texto.

Para obtener biseles redondeados se recomienda una elevacin de luz de 30. Con
este ngulo, el bisel se mezcla suavemente con el objeto.

www.magix.es
Biseles 265

Cambiar el tamao del bisel


Cmo cambiar el tamao del bisel:

1. Selecciona el objeto.
2. Arrastra cualquiera de las flechas externas para extender el
bisel.

Como alternativa:

1. Selecciona el objeto.
2. Selecciona TAMAO de la lista TIPO DE BARRA DESLIZANTE .
3. Despus arrastra la barra o introduce un valor en el campo de texto.

Cambiar la forma del bisel


1. Selecciona el objeto
2. Escoge la herramienta de BISEL .
3. Escoge la forma de bisel de la lista TIPO DE BISEL .

Cambiar el color del bisel o el efecto de relleno


Despus de aplicar un bisel a un objeto, puedes cambiar su color o el efecto de
relleno. Puedes aplicar cualquiera de los efectos de color de MAGIX Web Designer 11
Premium incluyendo rellenos multinivel.

Para ms informacin sobre colores y la lnea de colores lee el captulo Trabajar con
colores (en la pgina 179).

Cmo cambiar el color del bisel:

La forma ms fcil es arrastrar y soltar un color desde la lnea de color hasta el


bisel. (Asegrate de soltar el color sobre el bisel y no sobre el objeto.)

Como alternativa, tienes a disposicin este mtodo un poco ms complejo pero que
te permite el control absoluto sobre el color:

1. Selecciona el bisel utilizando la herramienta de SELECCIN . (Asegrate de


seleccionar el bisel y no el objeto).
2. Utiliza el EDITOR DE COLOR para editar el color.
266

Cambiar el estilo de unin del bisel


Despus de aplicar un bisel a
un objeto, puedes cambiar la
forma de las esquinas
(uniones).

Cmo cambiar el estilo de la unin de bisel:

1. Selecciona el objeto.
2. Haz clic sobre el botn de unin apropiado en la barra de informacin de la
herramienta de BISEL .

Miter Redondo Bisel

Eliminar un bisel
Para eliminar un bisel:

1. Selecciona el/los objeto/s cuyo bisel quieres eliminar.


2. Escoge la herramienta de BISEL .

Escoge NINGUNO de la lista TIPO DE BISEL .

www.magix.es
Mscaras 267

Mscaras
En MAGIX Web Designer 11 Premium las herramientas de mscara no se muestran
en la barra de herramientas principal al inicio. Si quieres usar estas herramientas,
puedes encontrarlas en la paleta de botones.

Para abrir el botn paleta selecciona BARRAS DE CONTROL ... del men VENTANA y
desplzate por la lista hasta la parte inferior. Ahora haz clic en la casilla al lado del
icono de "Botn paleta". (O haz clic derecho sobre un rea vaca o cualquier barra de
botones y elige "Botn paleta" del men popup).

Si quieres usar estas herramientas a menudo puedes moverlas desde el "Botn


paleta" arrastrndolas hasta la barra de herramientas. (Mantn pulsada la tecla
"Alt", luego arrastra el botn y sultalo sobre la barra de herramientas sobre alguno
de los iconos existentes).

Crear una mscara


En Web Designer se utiliza una mscara para proteger parte de una foto de una
posible distorsin. Por ejemplo, cuando se usa la herramienta de ESCALA BASADA EN
EL CONTENIDO/ ZOOM para extender o ampliar una foto, a veces quieres proteger
parte de la foto para evitar que se distorsione con la operacin. Utiliza una mscara
para marcar el rea a proteger.

Para crear una mscara selecciona una de las herramientas de mscara de la barra
desplegable de herramientas de mscara y sala para pintar una mscara rosa sobre
tu foto en las partes que quieres proteger. Para ello, el PINCEL DE MSCARA (la primera
herramienta de la barra desplegable) es normalmente la herramienta ms til.

Las reas enmascaradas muestran un relleno de color rosa y tienen un efecto de


"hormigas en marcha" alrededor del borde. Cualquier parte de los objetos cubierta por
el rea rosa ser protegida cuando se lleve a cabo una operacin compatible con la
mscara.

Las herramientas de regin de foto y mscara


Las herramientas para el dibujo de mscaras estn en la barra de herramientas
de mscaras desplegable.

La barra de herramientas de mscara desplegable.


268

La HERRAMIENTA DE DIBUJO DE MSCARA es la herramienta de mscara por


defecto y te permite "dibujar" sobre el rea que quieres ocultar. Elige un
tamao de pluma de la barra de informacin y crea una forma de mscara
pasndola sobre el objeto. Si mantienes presionada la tecla "Shift" a la vez que
el botn izquierdo del ratn podrs borrar partes de la mscara.
Usa la herramienta de mscara a mano alzada para dibujar formas cerradas
alrededor de las reas u objetos a los que quieres aplicar una mscara igual
que lo haras con un lpiz. Como las herramientas de mano alzada y pincel,
tambin la barra de informacin tiene un control suavizado y puedes mantener
pulsada la tecla "Shift" para borrar tu lnea mientras dibujas.
La herramienta MSCARA RECTANGULAR te permite arrastrar un rea de
mscara rectangular. Puedes modificar tu forma usando la configuracin de
ancho y alto de la barra de informacin.
Usa el botn MOSTRAR MSCARA O REGIN para activar o desactivar la
mscara o regin. Esta opcin no las elimina, por lo que puedes volver a
activarlas, pero mientras est desactivada, la mscara o regin no afectar a
ninguna operacin.
El botn INVERTIR MSCARA invierte el rea enmascarada de forma que las
zonas no enmascaradas sean ahora las que tengan la mscara.

Usa el botn ELIMINAR MSCARA para quitar el efecto en todas las formas.

Tanto la funcin INVERTIR como la de ELIMINAR aparecen tambin en la barra de


informacin.

La barra de informacin tambin ofrece una opcin para activar y desactivar el


contorno de la mscara o regin. En general, esto es nicamente til cuando utilizas
estas herramientas para editar regiones dentro de grupos de fotos. Esta funcin
desactiva nicamente el contorno, por lo que NO es igual al botn MOSTRAR
MSCARA O REGIN descrito anteriormente, que activa o desactiva toda la mscara o
regin. Para ms detalles consulta Grupos de fotos (en la pgina 329).

Para ms informacin sobre la caracterstica de control suavizado consulta en la


herramienta Mano alzada y pincel.

Editar mscara.
En la mayora de los casos editas la mscara usando las mismas herramientas de
mscara descritas arriba. Pero las formas que conforman una mscara son en realidad
formas normales colocadas en una capa especial de mscara, por lo que en algunos
casos puede ser til editar formas sobre ella. Utiliza la GALERA DE PGINA Y CAPA

www.magix.es
Mscaras 269

para acceder a la capa de mscara. Te ser til para los ms finos detalles de las
formas de mscaras o si quieres mover una mscara de posicin o incluso para crear
una mscara suave.
1. Haz clic en la herramienta de seleccin y abre la galera de pginas y capas.
2. Haz clic en la capa de mscara para activarla.
3. Selecciona la forma de mscara que quieras modificar y cmbiala de posicin o
tamao como necesites.
4. Haz doble clic en la forma para editarla usando la HERRAMIENTA DE FORMA . O
bien, si has creado la forma usando la herramienta de mscara de rectngulo, un
doble clic te permitir la edicin con la HERRAMIENTA DE RECTNGULO. (EN LA
PGINA 169)

Mscaras suaves
Una mscara suave es una mscara que incluye una variedad de niveles de mscaras,
en vez de consistir simplemente en partes con y sin mscara. Por ejemplo, una parte
de una imagen pueden tener aplicada un 50% de mscara de forma que la operacin
que se aplique luego tenga nicamente el 50% de efecto en esa parte. O una forma
de mscara puede tener una mscara graduada que abarque de 0% a 100%. Si se
utiliza despus esa mscara con la HERRAMIENTA DE OPTIMIZACIN DE FOTO para dar
ms brillo a la imagen, el efecto tendr esa misma graduacin.

Crear una mscara suave


Puedes crear mscaras suaves si aplicas la herramienta de transparencia a tus formas
de mscaras en la capa de mscaras. Crea en primer lugar las formas de mscara.

Cambia a la herramienta de seleccin y abre la galera de pginas y capas.


Extiende la pgina para ver las capas y haz clic en la capa de mscara para
activarla.
Haz clic sobre la forma de mscara en el espacio de trabajo y selecciona la
herramienta de transparencia.
Arrastra por la forma de mscara para crear una mscara suave graduada lineal.

Operaciones que utilizan la mscara


Cortar, copiar, eliminar
Estas operaciones son tiles cuando se utilizan junto con mscaras para cortar trozos
de fotos, pero tambin puedes usarlas con cualquier objeto.

1. Selecciona una de las herramientas de mscara de la barra desplegable de


HERRAMIENTA DE MSCARA y dibuja la forma de mscara que desees.
2. A continuacin, cambia a la HERRAMIENTA DE SELECCIN y selecciona el dibujo o
foto que deseas editar
3. Selecciona ahora una de las opciones del men EDICIN para realizar cualquier
operacin de cortar/copiar/pegar.
270

La mscara rectangular se usa para crear una mscara (izquierda). Cortar o borrar quita las
partes no enmascaradas de la foto (derecha).

En el ejemplo de la izquierda, la mscara se ha invertido. Ahora, cuando cortes o elimines, el rea


de mscara en rosa est protegida y todo lo dems se eliminar.

Duplicar, clonar
Esto copiar solamente las partes no en mscara del dibujo o foto. La opcin Clonar
coloca una copia exactamente sobre el original.

Modificacin de tamao de foto con contenido


Para proteger parte de una foto ante cambios de escala:

1. Selecciona una de las herramientas de mscara de la barra de herramientas de


mscara desplegable y dibuja la forma de mscara que desees alrededor del
rea que quieres proteger.
2. Ahora ve a la herramienta "Cambio de tamao teniendo en cuenta el contenido"
(barra desplegable de herramientas de foto en la barra de herramientas
principal) y haz clic sobre la foto.

Consulta la funcin Cambio de tamao teniendo en cuenta el contenido (en la


pgina 368) para ms informacin.

www.magix.es
Mscaras 271

Herramienta de optimizacin de foto


Utiliza una mscara para aplicar brillo, contraste, saturacin, temperatura o
enfoque/desenfoque a cualquier parte de una foto.

1. Selecciona una de las herramientas de mscara de la barra de herramientas de


mscara desplegable y dibuja la forma de mscara que desees alrededor del
rea que quieres proteger.
2. Ahora ve a la herramienta de optimizacin de foto (barra de herramientas de
foto desplegable sobre la barra de herramientas principal) y haz clic sobre la
foto.
3. Usa los "Controles de optimizacin" de la barra de informacin de la
herramienta de fotos.

Los usuarios avanzados quiz quieran usar mscaras suaves para introducir efectos
graduados en la operacin de optimizacin de foto. Consulta los captulos
Herramienta de fotos y Manejo de fotos para ms informacin.

Combinar formas
El men "ARREGLO" > "COMBINAR FORMAS" contiene una serie de funciones que te
permiten combinar las formas de mltiples maneras. Estas operaciones funcionan con
la mscara. Por ejemplo, recorta una parte de una foto (cookie estilo cter).

1. Selecciona una de las herramientas de mscara de la barra desplegable de


herramientas de mscara y pinta cualquier forma de mscara que necesites.
2. Cambia a la herramienta de seleccin y escoge el dibujo o foto que quieres
segmentar.
3. Selecciona "ARREGLO" > "COMBINAR FORMAS" > "SEGMENTAR" .

Copiar formas a la capa de mscara


Puede que prefieras dibujar formas de mscara usando las herramientas de dibujo
normales en lugar de las de mscara, o incluso usar una forma existente de la capa de
mscara. Resulta particularmente til cuando trabajas con mscaras suaves, donde
ests aplicando niveles o transparencias sobre los objetos de mscara. En la
"Herramienta de seleccin", elige la forma y copia o crtala. Ahora cambia a una de
las herramientas de mscara y haz PEGAR . Utiliza PEGAR EN EL LUGAR si deseas que la
forma aparezca exactamente en el mismo lugar desde el cual se copi o cort.

Para copiar las formas desde la capa de mscara hasta cualquier otra, haz la inversa.
Selecciona las formas mientras ests en una herramienta de mscara, luego cambia a
la HERRAMIENTA DE SELECCIN , y pega.
272

Dilogo de propiedades web


El dilogo de propiedades web es un dilogo con mltiples pestaas que te permite
aadir y configurar la mayora de las caractersticas relacionas con la web en MAGIX
Web Designer 11 Premium y fijar diferentes propiedades web en objetos, pginas y en
toda tu pgina web. Para abrirlo, haz clic derecho sobre un objeto y escoge
PROPIEDADES WEB o utiliza la opcin del men "HERRAMIENTAS" > "PROPIEDADES
WEB" (shortcut Ctrl + Shift + W).

Tambin puedes acceder a cada pestaa del dilogo con los botones de la barra
desplegable de propiedades web, disponible en la barra de herramientas de pgina
web.

Pestaa Enlace
Pestaa Pgina web
Pestaa Pgina
Pestaa Imagen
Pestaa MouseOver
Pestaa Marcador de posicin
Pestaa Publicar
Pestaa Analytics (en la pgina 296)
Editar barra de navegacin

El dilogo carece de modo as que puedes dejarlo abierto mientras seleccionas


diferentes pginas y objetos en tu documento. As es ms rpido y fcil configurar las
propiedades de diferentes objetos y pginas en tu pgina web. Utiliza el botn
ACEPTAR para aplicar tus cambios y cerrar el dilogo, o bien utiliza el botn APLICAR
para aplicar tus cambios sin cerrar.

Ten en cuenta que si tu documento actual es un diseo de animacin, el dilogo


PROPIEDADES WEB aparece de forma modificada con algunos controles diferentes y
muchos otros desactivados porque no se aplican a las animaciones. Lee el captulo
sobre Animaciones para informarte sobre cmo usar este dilogo con diseos de
animacin.

Las siguientes secciones abarcan cada una de las pestaas correspondientes.

www.magix.es
Dilogo de propiedades web 273

Pestaa Enlace

La configuracin de esta pestaa se aplica al objeto, a los objetos o al texto


seleccionados. Por lo general, esta pestaa se utiliza para aadir un enlace a un objeto
en tu pgina web (por ejemplo un botn o una foto), o bien para aadir texto de modo
que cuando un usuario visita tu pgina y hace clic en el objeto/texto, es remitido a
otra pgina. Puedes agregar enlaces a otras pginas de tu sitio web, a una direccin
URL o a una ventana emergente.

Tambin puedes aplicar efectos de transicin a los enlaces, de forma que la pgina de
destino del enlace (ya sea externa o una de las pginas de tu sitio) aparezca con la
transicin que selecciones. Las transiciones para los enlaces solo pueden utilizarse
cuando en enlace se abre en una nueva pgina, de lo contrario, estarn desactivadas.
274

Para agregar un enlace a algunas palabras de un prrafo, ve a la HERRAMIENTA DE


TEXTO y selecciona el texto al que quieras agregar el enlace. A continuacin configura
el enlace en esta pestaa.

La seccin principal de esta pestaa te permite escoger qu debe ocurrir cuando se


hace clic en el objeto o texto seleccionado.

Enlazar a una direccin web


Para vincular esta direccin, introduce una direccin web. Si mantienes seleccionado
el recuadro "CORREGIR DIRECCIN AUTOMTICAMENTE ", tu direccin, 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 direccin del enlace una direccin de correo


electrnico y as, al hacer clic en el enlace, se abrir el programa de correo electrnico
del usuario con el campo Para: rellenado. Asimismo, puedes especificar la lnea del
asunto, agregar direcciones de correo electrnico CC o CCO para copiarlas en el
correo electrnico, o incluso especificar el cuerpo de texto estndar que deseas
utilizar.

tunombre@elsitioquequieras.com asunto:correo electrnico de la pgina web


cc:otro@elsitioquequieras.com coo:yotromas@elsitioquequieras.com cuerpo:correo
electrnico autogenerado

Nota tcnica: MAGIX Web Designer 11 Premium codifica tu direccin de correo


electrnico para reducir las probabilidades de que robots de correo basura
encuentren tu correo electrnico de la pgina web. Esto requiere que Javascript est
permitido en el navegador (actualmente > 95%) de los navegadores).

Enlazar a...
Selecciona esta opcin si deseas enlazar a otra pgina en el sitio web actual o, si ests
creando una presentacin, si quieres incluir un enlace al paso siguiente o previo de la
presentacin. La lista desplegable te permite seleccionar la pgina o el paso al que
deseas enlazar. Tambin puedes escoger esta opcin para enlazar a un objeto al
borde superior de la pgina (se crea un salto rpido desde el final de una larga pgina
hasta el inicio).

CONSEJO: si tu documento de sitio web tiene varias pginas, asignar a cada una un
nombre facilita la configuracin y mantenimiento de los enlaces de tu pgina porque
la lista de pginas contendr los nombres de las pginas y no solo "Pgina 2",
"Pgina 3", etc.

www.magix.es
Dilogo de propiedades web 275

Consulta la seccin PESTAA PGINA (en la pgina 282) a continuacin para


ms detalles sobre cmo configurar los nombres de pgina o editar los
nombres en la GALERA DE PGINAS Y CAPAS .

Adems de una entrada para cada pgina en tu sitio, la lista desplegable tambin
contiene entradas especiales PRXIMA PGINA/PASO DE PRESENTACIN, PGINA
ANTERIOR/PASO DE PRESENTACIN y PARTE SUPERIOR DE PGINA .

Pgina anterior/Prxima pgina

Utilzalo para agregar un enlace hacia una pgina anterior o posterior de tu sitio web.
En el caso de enlaces de este tipo, el orden de las pginas se establece segn el orden
de pgina que aparece en MAGIX Web Designer 11 Premium. La opcin "siguiente"
en la ltima pgina configura un enlace a la primera pgina y la opcin "anterior" en la
primera pgina, a la ltima.

Paso de presentacin anterior/siguiente

Utiliza esta opcin para agregar un enlace que te lleve al paso siguiente o anterior de
la presentacin, si tu sitio web es una presentacin. El orden de la presentacin
tambin est determinado por el orden de los pasos tal como aparecen en MAGIX
Web Designer 11 Premium, al igual que "pgina anterior/siguiente".

Parte superior de la pgina

Si quieres enlazar a la parte superior de una pgina particularmente larga, crea un


objeto al final de la pgina (por lo general un objeto de texto o un botn) y selecciona
entonces la opcin para enlazar "PARTE SUPERIOR DE LA PGINA" . El enlace te llevar
directamente a la parte superior de la pgina.

Enlazar a una referencia


Esta opcin te permite hacer que el usuario salte a una parte especfica de cualquier
pgina de tu sitio web.

Para configurar un punto de referencia, primero ve a la pgina y determina hacia


dnde quieres que lleve el enlace. Selecciona el objeto y agrega un nombre con un clic
derecho y la opcin NOMBRES... . A continuacin selecciona el objeto para el cual
quieres crear el enlace y escoge en la lista suministrada por la opcin "Enlazar a una
referencia" el nombre de la referencia que ya creaste.

Observa que cuando creas un enlace vinculado a un objeto que se encuentra muy
abajo en la pgina, el navegador web bajar la pgina automticamente para mostrar
tu objeto de referencia.

NOTA : no puedes aplicar una transicin a un enlace a una referencia.


276

Enlace al archivo
Esta opcin de enlace es til si quieres agregar un documento, pelcula u otro archivo
a tu sitio web para que est a disposicin 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
opcin Enlace al archivo y utiliza el botn EXPLORAR para buscar el archivo en tu
ordenador. El nombre del archivo aparece en el campo de texto a la izquierda del
botn Explorar. Con un clic en Aceptar, el enlace se aplicar.

Adems de aplicar el enlace, MAGIX Web Designer 11 Premium ha hecho una copia
de tu archivo y la ha colocado en la carpeta de soporte para tu diseo. Esta es una
carpeta que se guarda junto con tu archivo .web o .xar. Si tu diseo 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 captulo Manejo de documentos (en la pgina
86) para ms informacin acerca de las carpetas de soporte.

Nota: como el archivo se copiar en la carpeta de soporte de tu diseo, debers


actualizar esta copia cada vez que modifiques el archivo original y quieras publicar la
versin modificada. O puedes repetir el proceso de enlace y buscar el archivo
actualizado. De igual forma, si mueves o copias tu diseo a otro ordenador o le das
una copia a alguien, debes asegurarte de enviar tambin la carpeta de soporte del
archivo de diseo porque contiene una parte muy importante de tu pgina web.

NOTA : no puedes aplicar una transicin a un enlace a un archivo.

Capa popup
Puedes aadir el contenido que quieras en una capa separada de tu pgina y puedes
hacer que este contenido se muestre como un popup solo cuando el usuario hace clic
en un enlace. Por ejemplo, podras agregar un texto descriptivo sobre una foto que se
encuentre en tu pgina web y hacer que el texto solo aparezca cuando el usuario haga
clic en la foto.

Para aadir una capa de popup, primero tienes que agregar la propia capa
mediante la GALERA DE PGINAS Y CAPAS y luego agregar tu contenido de
popup a esa capa.
Consulta el captulo GALERA DE PGINAS Y CAPAS para ms informacin. A
continuacin puedes seleccionar la capa de la lista de capas que encontrars junto a
la opcin de "Capa popup".

Tambin puedes agregar un efecto de transicin que se aplica cuando la capa


aparece. En la GALERA DE PGINAS Y CAPAS , abre las propiedades de capa para poder

www.magix.es
Dilogo de propiedades web 277

aplicar una transicin directamente a una capa (en la pgina 68) para lograr un efecto
de animacin cuando aparezca el contenido de la capa. Puedes tambin hacer clic en
el botn "Configuracin" al lado de la capa popup en la pestaa de "Enlace" para
acceder a las mismas propiedades de capa.

Ahora cuando un visitante haga clic en el objeto aparecer el contenido de la capa.


Con un clic en cualquier otro lugar de la pgina, el popup desaparece de nuevo por
defecto. Pero puedes hacer que la capa popup permanezca arriba hasta que el
visitante la cierre explicitamente. Tan solo desbloquea la casilla CERRAR POPUP
AUTOMTICAMENTE del dilogo de propiedades de la capa. Entonces se incluye un
botn de cierre en el borde superior del popup y permanece en pantalla hasta que se
presiona el botn de cerrar.

Ten en cuenta que tambin puedes acceder a las propiedades de capa haciendo clic
en el botn "Configuracin..." al lado de la opcin capa popup en el dilogo "Enlace".

Ten en cuenta que todo el contenido de la capa popup se carga en cuanto el usuario
visita tu pgina. Entonces, si quieres ofrecer muchas fotos con ventanas emergentes,
utiliza la caracterstica Foto emergente descrita a continuacin.

Foto emergente
Esta opcin te ofrece una forma muy fcil de aadir fotos emergentes y otras
caractersticas de la galera de fotos a tu sitio web, sin agregar capas. Simplemente
importa tu foto y utiliza la HERRAMIENTA DE SELECCIN para reducir el tamao
correctamente de modo que aparezca como una pequea miniatura de foto en tu
pgina web. Luego seleccinala y escoge la opcin FOTO EMERGENTE.

Haz clic en el botn CONFIGURACIN junto a esta opcin para ir a la PESTAA IMAGEN ,
en donde puedes fijar el tamao de la foto emergente y escoger entre otras opciones.
Consulta la seccin pestaa Imagen a continuacin (en la pgina 285) para ms
detalles. Al seleccionar la opcin foto emergente en esta pestaa Enlace, tambin se
selecciona la casilla foto emergente en la pestaa Imagen, es decir, que ambos
activan el mismo comportamiento de popup.

Utilizar colores habituales para enlaces de sitios web


Esta opcin te permite decidir cmo deben aparecer los enlaces de texto. Por defecto,
esta opcin est seleccionada, lo que significa que el enlace de texto tendr el color
que definiste para toda la pgina web. Puedes configurar este color en la pestaa
Pgina web (vase el apartado de la pestaa Pgina web).

Si deseleccionas esta opcin, el enlace de texto seleccionado mantendr el color que


le diste en la pgina. Por lo tanto, puedes asignar colores distintos a los diferentes
enlaces, si lo deseas.
278

Abrir enlace en:


Esta opcin no hace nada si una de las opciones "Capa popup" o "Popup foto" est
seleccionada. Pero de cara a otros enlaces te permite definir cmo el navegador web
debe cargar la pgina web de destino. Por defecto, est configurado como "Sin
especificar", lo que por lo general significa que el navegador abrir el enlace en la
misma ventana del navegador que la ventana o el enlace.

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).

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 pgina principal del navegador,
sustituyendo todos los frames existentes.

Si quieres que el enlace se cargue en un frame especfico en el navegador, teclea el


nombre del frame en este campo.

rea que permite clic


Esta opcin te permite especificar en qu rea del objeto se debe hacer clic para
invocar el enlace. Sin embargo, no es compatible con pginas web HTML (el
rectngulo que rodea el objeto siempre se usa); slo funciona si se exporta a flash.

FORMA DE OBJETO : El usuario debe hacer clic exactamente en el contorno del objeto
para invocar el enlace.

RECTNGULO RODEANDO OBJETO: El usuario puede hacer clic en cualquier parte del
rectngulo que est rodeando el objeto (caja circundante) para invocar el enlace.

www.magix.es
Dilogo de propiedades web 279

Pestaa Pgina web

La configuracin en esta pestaa se aplica a todo el documento o a toda la pgina


actual, por lo que no importa qu objeto o pgina hayas seleccionado.

TTULO, DESCRIPCIN Y PALABRAS CLAVE : estos campos se han descrito en la seccin


Pestaa Pgina (en la pgina 282). Opcionalmente puedes configurar estos campos
para que se apliquen a cada pgina de tu sitio, a no ser que la configuracin para una
pgina de la pestaa "Pgina" los anule. Por ejemplo, una pgina que no tenga su
propio ttulo en la pestaa Pgina, obtendr el ttulo especificado aqu.

CDIGO HTML (ENCABEZADO) Y CDIGO HTML (CUERPO): estos botones tienen el


mismo objetivo que los botones cdigo HTML (encabezado) y cdigo HTML
(cuerpo) de la seccinpestaa Pgina y te permiten introducir una gran cantidad de
cdigo HTML en la seccin del encabezado o del cuerpo de las pginas de tu sitio
web.
280

Si se ha especificado cdigo aqu en la PESTAA PGINA WEB, se incluir en todas las


pginas del sitio junto con el cdigo especificado para cada pgina en la pestaa
Pgina. De esta forma puedes incluir un cdigo en cada pgina y, adems, te puedes
agregar ms cdigo a las pginas que lo requieran.

Colores para enlaces de sitios web


Esta seccin de la pestaa "Pgina web" te permite controlar cmo los enlaces de
texto deben aparecer en tu pgina web.

SUBRAYAR TEXTOS CON ENLACES : el subrayado se suele usar para resaltar en el texto
los enlaces que permiten clic, por lo que esta opcin est seleccionada por defecto.
Desactvala si no quieres que tus enlaces de texto aparezcan subrayados.

MOUSEOFF : aqu puedes elegir el color que quieras para todos tu enlaces de texto. 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 botn "Editar" para abrir el
editor de color y elegir cualquier otro color.

MOUSEOVER : los enlaces de texto cambiarn a este color cuando un usuario mueva el
cursor del ratn por encima de ellos.

VISITADO : enlaces de texto que conduzcan a una pgina que el usuario ya ha visitado
se visualizan en este color en lugar de en el color MouseOff.

Adaptar a bordes de pgina


Esta opcin est activada por defecto. Si tienes objetos en tu sitio web que
sobrepasan los bordes de la pgina web, haz clic en esta opcin para recortar estos
objetos de modo que solo sea visible la parte que est sobre la pgina. Desactiva esta
casilla si quieres que el objeto fluya sobre el borde de la pgina de forma que la
porcin que sobrepasa el tablero de dibujo se muestre de todas formas.

Ten en cuenta que si tienes una pgina invisible (lo que ocurre por defecto para
nuevos documentos web o si has aplicado "sin color" a tu pgina), no se puede
hacer clip a los bordes de pgina aun cuando esta opcin est activada.

Presentaciones web
Haz clic en la opcin PGINA WEB DE PRESENTACIN para convertir una pgina web
existente en una presentacin.

Nota: si creas un documento de presentacin y escoges PRESENTACIN DE 955


PIX del men NUEVO , la casilla PGINA WEB DE PRESENTACIN se activa
automticamente.

www.magix.es
Dilogo de propiedades web 281

CLIP A LOS BORDES DE LA PGINA (activado por defecto): si tienes objetos en tu pgina
web que sobrepasan los bordes de la pgina web, haz clic en esta opcin para
recortar estos objetos a la porcin visible en la pgina web. Quita la seleccin de esta
casilla si quieres que el objeto fluya sobre el borde de la pgina de forma que la
porcin que sobrepasa el tablero de dibujo se muestre de todas formas.

Nota: si tienes transiciones aplicadas a una capa o transiciones de pasos de una


presentacin que aparecen desde los lados, la parte inferior o la parte superior de la
pgina, al desactivar esta opcin, la transicin aparecer desde el borde de la
ventana del navegador en vez de desde el borde de la pgina.

Retina (activado por defecto)


Cuando esta opcin est activada, Web Designer exportar versiones en alta
resolucin de cada imagen en tu pgina web, adems de las imgenes en resolucin
de pantalla normal. Esto significa que los dispositivos con pantallas de muy alta
resolucin reproducirn imgenes de mayor calidad.

Para ms informacin consulta Imgenes de alta resolucin (en la pgina 327).

Opciones de exportacin web


El dilogo OPCIONES DE EXPORTACIN WEB te permite elegir como quieres publicar tu
sitio web. Puedes elegir entre exportarlo como SITIO WEB CONVENCIONAL (con un
archivo HTML separado para cada pgina), donde haces clic a travs de las pginas
usando la navegacin convencional, o como SUPERSITE (el sitio completo como un
nico archivo HTML), lo que te permite presentar tu pgina con transiciones
animadas entre pginas o como un arreglo horizontal o vertical de pginas, para que
los usuarios puedan explorarla con toques de pantalla en mviles y tabletas.

La configuracin por defecto para el dilogo es PGINA WEB CONVENCIONAL .

Ver Supersites (en la pgina 303) para ms detalles sobre las opciones de
visualizacin y para aadir capas.
282

Pestaa Pgina

Las opciones en esta pestaa se aplican a la pgina actual, no al objeto ni a los objetos
seleccionados. La pgina actual se indica con lneas de ngulo negras en la parte
exterior de cada esquina de la pgina. Todos los campos en esta pestaa son
opcionales: no necesitas necesariamente rellenar estos campos para cada pgina de
tu web.

Si quieres tener el mismo ttulo, descripcin y palabras clave en cada pgina de tu


sitio web, puedes configurarlo una sola vez en la pestaa Pgina web en lugar de
hacerlo para cada pgina.

NOMBRE DE ARCHIVO DE LA PGINA : utiliza este campo para establecer el nombre que
quieres que se utilice para esta pgina, al exportarla. As, si quieres que la pgina se
exporte como "inicio.htm", configura este campo como "inicio".
www.magix.es
Dilogo de propiedades web 283

En general, la primera pgina de un sitio web se denomina "index.htm" o "inicio.htm"


porque si un visitante especifica una URL con el nombre de dominio y sin el nombre
de pgina (como www.xara.com), el servidor web generalmente lo lleva
automticamente a la pgina index.htm, si esta existe. Ten en cuenta que los
caracteres que introduces en este campo se escriben automticamente en
minsculas y que no se permiten los caracteres acentuados y algunos otros
caracteres no alfanumricos. Esto tiene como objetivo reducir los posibles de
problemas de compatibilidad con los diferentes servidores web cuando publicas tu
pgina web.

TTULO DE PGINA: puedes escoger un ttulo para tu pgina. Si est definido, los
navegadores web lo usan para mostrar el ttulo de la pgina en el marco de la ventana
del navegador o en la pestaa. A modo de ejemplo, en el momento de redaccin la
pgina inicial de www.xara.com tiene el ttulo "Graphics Software by Xara" que, como
puedes ver, se muestra en el navegador web si visitas la pgina.

Avanzado: el ttulo se inserta en el encabezado de la pgina con el elemento HTML


"<ttulo>".

DESCRIPCIN DE LA PGINA : es posible que los motores de bsqueda muestren este


texto de descripcin de la pgina en los resultados de las bsquedas cuando un
visitante encuentre tu pgina mediante una bsqueda en Internet. Los navegadores y
otros servicios web tambin pueden mostrar la descripcin de la pgina.

Avanzado: la descripcin se introduce como metadatos en el encabezado de la


pgina
(<meta name="description" ..).

PALABRAS CLAVE DE LA PGINA: aqu puedes ingresar palabras clave que deseas que
los motores de bsqueda reconozcan para que los visitantes encuentren tu sitio.
Introduce palabras que los visitantes potenciales puedan buscar cuando quieran
encontrar pginas y sitios como el tuyo.

Para aquellos familiarizados con HTML, las palabras clave se introducen en el


encabezado de la pgina como metadatos:

Avanzado: las palabras clave se introducen como metadatos en el encabezado de la


pgina
(<meta name="palabras clave" ..).

CDIGO HTML (ENCABEZADO): haz clic para abrir el dilogo de cdigo HTML
(encabezado), en donde puedes pegar o escribir cdigo HTML directamente en el
encabezado de tu pgina web. El cdigo se inserta sin modificarse antes de la etiqueta
de cierre "</encabezado>".
284

CDIGO HTML (CUERPO): haz clic para abrir el dilogo de cdigo HTML, en donde
puedes pegar o escribir cdigo HTML directamente en el cuerpo de tu pgina web. El
cdigo se inserta sin modificarse antes de la etiqueta de cierre "</cuerpo>".

Estos dilogos deben utilizarse con cuidado porque insertar cdigo o comandos
invlidos en tu pgina pueden generar serios problemas en toda la pgina web. Si
necesitas insertar el mismo cdigo exacto para todas la pginas de tu sitio web,
puedes usar el botn de cdigo HTML (encabezado) y cdigo HTML (cuerpo) en la
pestaa Pgina web de este dilogo, en vez de introducirlo para cada pgina individual
en la pestaa Pgina.

EFECTO DE TRANSICIN: escoge un efecto de transicin que se mostrar cuando un


visitante abra tu pgina web. Por ejemplo, si seleccionas una transicin fade para una
pgina, cuando un visitante haga clic en esa pgina, en vez de cargarse directamente,
aparecer gradualmente. Sin embargo, no puedes aplicar un efecto de transicin de
esta manera a una pgina externa, sino que debes usar la opcin Transicin de enlace
de la pestaa "Enlace" para hacerlo. Puedes aplicar los siguientes efectos de
transicin a una pgina:

Instantnea (por defecto) El contenido de la nueva pgina, capa o paso aparecer


directamente
Aparecer desde El contenido de la nueva pgina, capa o paso aparecer
desde diversas direcciones
Desaparecer desde El contenido de la pgina actual desaparecer en
diversas direcciones
Transicin El contenido de la nueva pgina aparecer de forma
gradual
Desaparecer en negro El contenido de la pgina actual cambiar a una
pantalla en negro y el contenido de la nueva pgina
aparecer gradualmente.
Obturador Una barra negra se mueve a lo ancho de la pantalla
desde la derecha y oscurece el contenido viejo. Al
regresar revela el contenido de la nueva pgina.
Separacin y aparicin El nuevo contenido aparece, se divide en dos mitades
vertical/horizontal que se unen de forma vertical u horizontal.

VELOCIDAD (EN SEG.): arrastra la barra para escoger una velocidad para la transicin
de entre 0 y 5 segundos.

Por defecto, cuando aplicas una transicin, los objetos solamente aparecern o
desaparecern desde la esquina de la pgina web. Si quieres que los objetos
aparezcan desde las esquinas de la ventana del navegador, en vez de desde las
esquinas de la pgina, desactiva la opcin de los bordes CLIP A LA PGINA en la
pestaa Pgina web (en la pgina 279) del dilogo de propiedades web.

www.magix.es
Dilogo de propiedades web 285

Nota tcnica: las transiciones de pgina primero cargan la pgina de destino en un


iFrame oculto y luego revelan ese iFrame con el efecto visual. Luego, la pgina de
destino vuelve a cargarse de forma normal. Esta segunda carga de la pgina de
destino, generalmente no se nota, pero, dependiendo de la velocidad de la mquina
y de la versin del navegador que se utilice (especialmente los navegadores ms
antiguos), muchas veces la pgina parpadea un momento al final de la transicin de
pgina.

Pestaa Imagen

Fotos emergentes
Esta seccin de la PESTAA IMAGEN te permite aadir fotos emergentes y otras
caractersticas de la galera de fotos a tu pgina web. Simplemente importa tu foto y
utiliza la HERRAMIENTA DE SELECCIN para reducir el tamao correctamente de modo
que aparezca como una pequea miniatura de foto en tu pgina web. Luego, mientras
la foto todava est seleccionada, selecciona el campo foto emergente en esta
pestaa. Escoge el tamao que quieres dar a la foto emergente en el campo de ancho
(valor por defecto: 500 pxeles). Haz una vista previa de tu pgina y haz clic en la
miniatura de tu foto en tu pgina, ahora vers aparecer la ventana emergente con tu
foto.

Al activar la funcin de foto emergente en el campo de la pestaa IMAGEN , tambin se


selecciona automticamente la opcin correspondiente de la pestaa ENLACE. Esto es
286

porque con un clic sobre la foto vers la foto emergente, de forma que no puedes
agregar otro enlace al mismo objeto. Es decir, que cualquier enlace que hayas
configurado previamente en el objeto mediante la pestaa Enlace desaparecer.

Una gran ventaja de estas ventanas emergentes frente a las capas emergentes (tal
como se describen anteriormente en la seccin de la pestaa 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 mtodo es ms adecuado para presentar un gran
nmero de fotos en una pgina de galera, ya que en un primer momento slo se
cargan las pequeas miniaturas, permitiendo as que la pgina se cargue ms
rpidamente.

Observa que esta caracterstica funciona con otros objetos adems 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 restriccin.

Ttulo de la ventana emergente


Utiliza este campo para agregar un ttulo a la foto seleccionada, que se mostrar
sobre la foto emergente. Ten en cuenta que debes activar tambin esta opcin de
ttulo en el dilogo de opciones de foto emergente (ver a continuacin) porque, por
defecto, los ttulos no se muestran.

Opciones de la foto emergente


Haz clic en el botn OPCIONES para abrir el dilogo OPCIONES DE FOTO EMERGENTE .
Aqu puedes escoger entre una variedad de opciones que cambian la forma en que se
presentan tus fotos emergentes.

www.magix.es
Dilogo de propiedades web 287

Opciones de la ventana emergente


Las siguientes opciones cambian la apariencia de la foto emergente.

OSCURECER PGINA MIENTRAS LA VENTANA EMERGENTE EST ABIERTA : con esta opcin
seleccionada, toda la pgina 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 pgina.

MOSTRAR SOMBRA DETRS DE LA VENTANA EMERGENTE : esta opcin coloca una


sombra detrs de la ventana de la foto emergente para que se destaque del fondo de
la pgina.

MOSTRAR TTULO DE LA IMAGEN : si has introducido texto de ttulo (lee ms arriba)


para cada una de tus fotos, esta opcin hace que el ttulo aparezca sobre la foto
emergente.

Ten en cuenta que el texto del ttulo es independiente del texto de subttulo que se
muestra debajo de la foto. Lee a continuacin para ms informacin sobre los textos
de subttulo.

Opciones de la galera
Las siguientes opciones activan las caractersticas de galera para tus fotos
emergentes.

MOSTRAR LOS CONTROLES DE NAVEGACIN DE LA GALERA : activa esta opcin para que
los controles de la galera se vean sobre la foto emergente.
288

Esto aparece arriba de la foto cuando se coloca el cursor del ratn sobre la foto.
Permite al visitante ver las otras fotos emergentes en la pgina 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 automtico en el que cada foto se muestra durante algunos segundos para
luego pasar a la siguiente.

MOSTRAR GUIN CINEMATOGRFICO AL FINAL DE LA FOTO: con esta opcin se ver una
cinta cinematogrfica 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 cinematogrfica, sin tener que cerrar primero la
ventana emergente de la foto.

INICIAR PASE DE FOTOS AUTOMTICAMENTE : activa esta opcin cuando quieras que se
inicie un pase de fotos cuando un usuario hace clic en tus fotos emergentes. Tambin
puedes escoger cuntos segundos debe mostrarse cada foto cuando el pase de fotos
est funcionando.

Ten en cuenta que slo las fotos incluidas en la galera de fotos son aquellas fotos que
se encuentran en la pgina actual que estn configuradas como ventanas emergentes.
Todas las otras fotos en tu pgina no aparecern en la galera, por lo que debes
asegurarte de usar la pestaa Enlace del dilogo de propiedades web para activar la
opcin foto emergente en todas las fotos que quieras que se incluyan en la galera.

Subttulos de imagen
De forma opcional puede mostrarse un subttulo debajo de cada foto emergente.
Introduce el texto del subttulo en este campo en la pestaa Imagen.

Observa que esta caracterstica funciona con otros objetos adems 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 restriccin.

www.magix.es
Dilogo de propiedades web 289

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 pgina en lugar de la imagen si sta no est disponible por alguna razn.

Tipo de imagen web


Debido a la naturaleza de las pginas web HTML, la mayora de los objetos que ves y
puedes seleccionar en la pgina MAGIX Web Designer 11 Premium deben convertirse
en imgenes de mapas de bits durante el proceso de exportacin de tu pgina web.
Todo esto sucede de forma automtica si realizas una vista previa y la exportacin,
pero los controles de esta pestaa te conceden cierto control sobre cmo se crean
estas imgenes.

Recuerda que cada grupo, forma, encabezado, logotipo, foto, fondo de panel, etc. se
exporta por separado como imagen. Viendo cmo se agrupan los objetos en tu
diseo, puedes controlar cmo numerosas imgenes son exportadas para componer
tu pgina web. Por ejemplo, si tienes dos formas separadas en tu diseo que no estn
agrupadas conjuntamente, se exportarn como dos imgenes separadas. Puedes
agrupar las dos formas (Ctrl+G), as se exporta una sola imagen.

Este apartado sobre la pestaa Imagen te permite especificar cmo el objeto


seleccionado actualmente debe ser exportado como una imagen. Por defecto, MAGIX
Web Designer 11 Premium lo decidir por ti. Esto significa que como regla general las
fotos se exportarn como JPEG (suele ser el mejor formato para fotos) y otros objetos
se exportarn como PNG (suele ser el mejor formato para grficos). Las fotos que se
rotaron en la pgina 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 opcin apropiada. Si la opcin JPEG est seleccionada,
puedes tambin escoger la calidad JPEG para esta imagen. Una calidad superior
implica que el tamao del archivo JPEG es mayor.

Propiedades de MouseOver (animaciones web)

Las propiedades MouseOver forman parte del cuadro de dilogo ANIMACIONES WEB .
Al hacer clic en este icono, se abre la pestaa MouseOver del cuadro de dilogo
Animaciones web, lo que te permite establecer lo que debe suceder cuando un
visitante pasa el cursor del ratn sobre el objeto seleccionado. Entonces, por ejemplo,
puedes animar el MouseOver con una amplia seleccin de efectos, establecer un
texto popup o una capa completa de contenido cuando un visitante pase el cursor del
ratn sobre una foto u otro objeto de tu pgina web. Para ms detalles consulta
Animaciones web (en la pgina 431).
290

Pestaa Marcador de lugar

La pestaa Marcador de posicin de utiliza para aadir y editar manualmente los


widgets editables. Estos son widgets que insertas en tu pgina web al introducir
manualmente el cdigo HTML para el widget o al importar un archivo Flash o de
pelcula. En general, no debers utilizar la pestaa Marcador de lugar para los widgets
que agregues de la GALERA DE DISEOS , porque el cdigo y los archivos que hacen
que estos widgets funcionen se manejan automticamente. Consulta el captulo
Widgets de pgina web (en la pgina 408) para ms detalles.

www.magix.es
Dilogo de propiedades web 291

Para convertir cualquier objeto normal en un marcador de lugar para un widget,


seleccinalo y abre esta pestaa del dilogo Propiedades web. Escoge si deseas que el
widget se base en cdigo HTML que has obtenido de un sitio web de widget, un
archivo Flash o un archivo grfico. Navega en busca del archivo o pega el cdigo
HTML. Haz clic en ACEPTAR y el objeto se convertir un marcador de lugar.

Esto significa que el objeto representa las dimensiones y la posicin del contenido que
has agregado, pero que al exportar tu pgina web, el objeto se sustituye con el cdigo
o archivo verdadero que has insertado.

Sin embargo, existe una forma ms sencilla de aadir archivos o cdigos a tu sitio.
Simplemente arrastra y suelta los archivos Flash o GIF animados desde el explorador
de archivos de Windows hasta tu pgina. Se generar automticamente una imagen
de marcador de posicin y se colocar en tu pgina. Una copia del archivo se aade a
la carpeta de soporte de tu diseo para que se exporte y publique con tu sitio. Al
exportar y publicar tu sitio, la imagen del marcador de posicin se sustituye por el
archivo verdadero que has importado.

De la misma forma, si has copiado cdigo HTML de la pgina web de widgets de un


tercero, puedes pegar el cdigo en MAGIX Web Designer 11 Premium (asegrate de
que te encuentres en la HERRAMIENTA DE SELECCIN cuando lo hagas y no en la
HERRAMIENTA DE TEXTO porque, de lo contrario, se insertar como texto). MAGIX
Web Designer 11 Premium detecta el HTML y lo utiliza para renderizar una imagen de
marcador de posicin que aparecer en tu pgina. Tambin puedes agregar un
marcador de posicin para el cdigo HTML directamente en el cuerpo o en el
encabezado de una pgina con un clic en los botones cdigo HTML (cuerpo) o cdigo
HTML (encabezado), que abrirn un dilogo en donde podrs pegar o editar cdigos
largos, de ser necesario.

Al exportar o publicar tu sitio, el marcador de posicin se sustituye por el cdigo


verdadero para que el widget funcione. Consulta el captulo Widgets de pgina web
(en la pgina 408) para ms detalles.

Reemplazar con Flash


Selecciona esta opcin para sustituir el objeto del marcador de lugar con una
animacin flash. Utiliza el botn Explorar para localizar el archivo Flash (.swf) que
quieres usar.

A continuacin , el archivo elegido se copiar automticamente al directorio de


compatibilidad para el diseo actual de modo que cuando exportes tu pgina web, el
archivo se incluir en el directorio _htm_archivos junto con todas las dems imgenes
generadas para tu pgina web. Lee el captulo Trabajar con documentos para obtener
informacin sobre los directorios de compatibilidad.
292

Reemplazar con un archivo grfico


Selecciona esta opcin si quieres insertar un grfico o una imagen en tu pgina web
en lugar del objeto del marcador de lugar (por ejemplo PNG, GIF u otro archivo de
imagen compatible con el web.). Utiliza el botn Explorar para seleccionar el archivo.

A continuacin , el archivo elegido se copiar automticamente al directorio de


compatibilidad para el diseo actual de modo que cuando exportes tu pgina web, el
archivo se incluir en el directorio _htm_archivos junto con todas las dems imgenes
generadas para tu pgina web. Lee el captulo Trabajar con documentos para obtener
informacin sobre los directorios de compatibilidad.

Reemplazar con cdigo HTML


Con esta opcin, puedes pegar cdigo HTML que has obtenido de otra seccin del
cuerpo o encabezado de tu pgina web, por ejemplo, entre las etiquetas
<body></body> o <head></head>. Por ejemplo, muchos sitios proveen widgets que
puedes agregar a tu pgina si pegas el HTML aqu. Sigue las instrucciones que ofrece
el proveedor. En la mayora de los casos necesitas agregar solamente cdigo al
cuerpo, pero algunos widgets requieren que incluyas algn tipo de cdigo en el
encabezado.

Tal como se mencion anteriormente, puedes simplemente pegar el cdigo HTML


directamente en la pgina en vez de insertarlo en este dilogo (siempre que te
encuentres en la HERRAMIENTA DE SELECCIN ). Al hacerlo de esta forma, aparecer
automticamente una imagen de marcador de posicin de aspecto similar al widget
verdadero, por lo que se recomienda utilizar este mtodo para insertar cdigo HTML.

Advertencia: debes tener cuidado e insertar solamente cdigo que sabes que es
seguro y que proviene de una fuente de fiar. El cdigo invlido o roto afectar tu
pgina web publicada porque MAGIX Web Designer 11 Premium simplemente
inserta el cdigo tal y como t lo suministras, sin modificar ni revisar, cuando
exportas tu pgina web.

Si utilizas mdulos de Xara (www.xaraonline.com), puedes pegar un snippet (trozo)


de mdulo en este campo para agregar tu mdulo a tu pgina web.

Si el cdigo HTML que introduces contiene una referencia a archivos externos que se
supone deben encontrarse en tu pgina web, debers copiar estos archivos externos
en la carpeta de soporte para tu diseo. Lee el captulo Manejo de documento (en la
pgina 73) para obtener informacin sobre las carpetas de soporte. Una vez en la
carpeta de soporte, los archivos se copiarn automticamente a la carpeta _htm_files
de tu sitio web al exportarlo. Por lo tanto, tambin es necesario asegurarte que
cualquier referencia a estos archivos en el cdigo HTML se encuentre en la ubicacin
correcta.

www.magix.es
Dilogo de propiedades web 293

He aqu un ejemplo simple para explicarlo de forma ms clara. Supn que yo quiero
insertar una pequea pieza de cdigo HTML que aade una imagen en mi pgina
web. El cdigo HTML que yo agregue necesitar una referencia al archivo de imagen
en algn lugar. Primero copio el archivo de imagen, digamos "milogotipo.gif", en la
carpeta de soporte de mi documento. Si el documento es "mipagina.web", la carpeta
de soporte ser "mipagina_web_archivos". Yo s que cuando exporte esta pgina
web, la exportar al nombre "mipagina.htm". Esto significa que todas las imgenes
generadas para mi pgina web y una copia de "milogotipo.gif" que puse en la carpeta
de soporte, se exportarn al directorio "mipagina_htm_archivos". Por lo tanto, en el
cdigo HTML que inserto tengo que incluir una referencia al archivo de imagen en esa
ubicacin. Por lo tanto, puedo insertar:

<img src="mipagina_htm_archivos/milogotipo.gif" />

Observa que esto hace referencia al archivo de imagen en la ubicacin del directorio
de la imagen exportada (_htm_archivos) y NO en el la carpeta de soporte
(_web_achivos) directamente, ya que nicamente el directorio de la foto exportada se
copia en el servidor web junto con mi pgina web cuando se publique la pgina.

Obviamente, si realmente solo quiero poner una imagen en mi pgina web, es mucho
ms fcil importar directamente la imagen a MAGIX Web Designer 11 Premium! Pero
esto es un ejemplo simple que muestra cmo agregar un cdigo HTML que contiene
una referencia a un archivo externo. Consulta Integracin de YouTube, Flash y otros
widgets (en la pgina 34) para ms ejemplos.

Aadir cdigo al encabezado de pgina


Algunos cdigos tienen que ir en el encabezado del cdigo HTML exportado (<head>
tag) y no en el cuerpo (<body> tag) como aparece por defecto.

Para ello, haz clic en el botn de cdigo HTML (encabezado) situado en el marcador
de posicin, en la pgina web o en la pestaa de pgina del cuadro de dilogo de
propiedades e introduce o copia el cdigo.

Objetos de marcador de lugar


El objeto de marcador de lugar en realidad est incluido en tu pgina web y puede
mostrarse al usuario en algunas circunstancias. Por ejemplo, si has aadido una
animacin flash y el usuario que visita tu pgina no tiene instalado Flash en su
navegador web, o si lo tiene deshabilitado, el navegador mostrar en su lugar la
imagen del marcador de lugar.

Por lo tanto, es una buena idea hacer de tu marcador de lugar algo ms avanzado que
slo un rectngulo negro! Podras utilizar una imagen esttica que se parezca al
contenido flash. O quizs podras usar un grupo como marcador de lugar que incluya
un mensaje de texto que pida al visitante instalar Flash para que as pueda ver el
contenido flash.
294

Animacin web

Haz clic en el icono ANIMACIN WEB para abrir el dilogo con el mismo nombre. Las
animaciones web te permiten tomar un objeto de tu documento web y crear
rpidamente una respuesta animada a una accin como MouseOver, un clic del ratn
o un toque de la pantalla. Puedes activar capas popup o un texto popup. Puedes hacer
que los objetos vayan apareciendo a medida que te desplazas hacia abajo por una
pgina y tambin controlar todas estas animaciones con una amplia variedad de
efectos.

Para ms detalles consulta Animaciones web (en la pgina 431).

Objetos sticky y stretchy

Haz clic en el icono OBJETOS STICKY Y STRETCHY para abrir el dilogo de objetos sticky
y stretchy. El dilogo te permite seleccionar objetos que permanecern fijos en una
posicin en la ventana del navegador (sticky). Tambin puedes configurar objetos
para que se extiendan para cubrir el ancho o alto de la ventana (stretchy).

Consulta Objetos sticky y stretchy (en la pgina 306) para ms informacin.

Pestaa Publicar

En la pestaa PUBLICAR configuras o cambias la configuracin, lo que te permite


publicar tu pgina en Internet. Sin embargo no necesitas visitar este dilogo antes de
publicar: la operacin de publicacin te indicar que introduzcas los detalles
requeridos si no los has especificado todava. Consulta el Captulo de publicacin para
ms informacin.

www.magix.es
Dilogo de propiedades web 295

Haz clic en el botn CONFIGURACIN para conformar la configuracin tanto de


MAGIX MUNDO ONLINE como de OTROS ALOJAMIENTOS WEB (VA FTP).
Haz clic en el botn GUARDAR EN EL PERFIL para guardar los detalles actuales en
un perfil.
Selecciona la opcin que incluye tu pgina en la galera de pginas de usuarios
de Web Designer marcando INCLUIR MI PGINA WEB EN LA GALERA DE USUARIOS .
Marca la casilla PUBLICACIN RPIDA (SOLO ARCHIVOS CAMBIADOS) para volver a
publicar solo los nuevos archivos en tu pgina web.
Marca la casilla SALVAR CONFIGURACIN DE PUBLICACIN EN EL DOCUMENTO si
deseas mantener los detalles FTP para este documento en particular.
Marca la casilla GUARDAR CONTRASEA EN EL DOCUMENTO para guardar la
contrasea de FTP en el documento (no recomendado para uso normal y no
disponible para MAGIX ONLINE WORLD).

Consulta el captulo principal Publicar pgina web (en la pgina 318) para tener toda
la informacin sobre como publicar tu pgina.
296

Pestaa Analytics

Pestaa Google Analytics con una muestra de cdigo de seguimiento.

La pestaa Google Analytics te ofrece una forma rpida y fcil de aadir un cdigo de
seguimiento a tus pginas permitindote controlar el trfico de tus pginas web
usando las herramientas de informacin de Google.

Necesitas tener una cuenta con Google para usar las funciones de Analytics: haz clic
en el botn "PGINA WEB DE ANALYTICS" para visitar la pgina y crear una cuenta, si
aun no tienes una, o para administrar una cuenta existente.

Sigue las siguientes instrucciones para obtener tu cdigo de seguimiento y cpialo en


la pestaa Analytics. Ahora podrs hacer el seguimiento de datos a travs de la
pgina web Google Analytics de tu pgina publicada.
www.magix.es
Diseo web adaptativo 297

Diseo web adaptativo

Acerca de RWD
Con el uso en aumento de dispositivos mviles para acceder a Internet, tambin
aumenta la demanda de diseos de sitios web hechos a la medida de los formatos de
mviles y tabletas.
Aunque los dispositivos mviles tales como telfonos tienen navegadores web
excelentes capaces de visualizar cualquier pgina web, un sitio web optimizado para
mviles no debera requerir del uso del zoom para ver el texto. Esto significa
normalmente que el contenido principal ser una nica columna de tamao un punto
mayor para que se pueda leer mejor en el mvil de un vistazo. Las pginas web en los
mviles normalmente tienen un contenido reducido y se pueden navegar con toques
de un solo dedo para desplazar y navegar.
Podras crear dos sitios web separados, uno diseado para mviles de pantalla
estrecha y otro para pantallas de escritorio tradicionales ms anchas, pero repetir el
contenido en dos pginas web separadas puede ser tedioso y una prdida de tiempo,
especialmente si tienes que hacerlo cada vez que actualizas los textos o imgenes.
El diseo web adaptativo (RWD por sus siglas en ingls) es una tcnica que permite a
tus sitios web responder de forma dinmica al tamao de la pantalla. En lugar de
tener dos pginas web separadas, es decir, dos pginas HTML separadas, tendrs una
sola pgina web que puede cambiar su diseo dependiendo del tamao de la pantalla
(y la resolucin) del dispositivo que se est usando para ver la pgina web.

Dos variantes del mismo sitio web. La primera es como se ve en una pantalla ancha, la segunda
es para pantallas estrechas como las de dispositivos mviles. La columna de texto es ms
estrecha y las imgenes y los elementos de pgina estn organizados para adaptarse a una
pantalla ms estrecha.
298

"Retina" adaptativa o control de resolucin HiDPI


Los dispositivos mviles y tabletas se diferencian de la mayora de navegadores web
de escritorio en que admiten grficos de una resolucin mayor. Web Designer admite
esto de forma totalmente automtica y producir tanto imgenes de resolucin
normal como Hi-DPI o Retina para todos los grficos y fotos. La pgina web utiliza
entonces de forma inteligente la versin adecuada de la imagen dependiendo de la
resolucin del dispositivo de navegacin.

Los navegadores ms viejos como IE8 y anteriores no admiten RWD, por lo que solo
mostrarn la variante principal de tu sitio web.

Variantes mltiples
Crear sitios RWD puede llegar a implicar una programacin compleja de Javascript.
Pero al ser Web Designer una herramienta destinada a diseadores de programacin
cero, el usuario todava tiene todo el control para el diseo web espontneo y
totalmente libre: tambin puede crear mltiples variantes del mismo sitio web.
Puedes crear una variante diseada para dispositivos mviles de pantallas estrechas,
quiz otro diseo para tabletas intermedias de pantalla pequea y otra variante para
un escritorio de pantalla ancha tradicional.

Lo importante es que el contenido, es decir, el texto, las fotos, los grficos y los
esquemas de colores, se comparten entre las variantes. El segundo punto importante
es que las variantes de capa mltiple para cada pgina no son archivos separados,
sino que forman parte de un solo archivo HTML que puede cambiar de forma
dinmica e instantnea de una capa a otra dependiendo del ancho del navegador.

Para cada variante que creas, puedes adaptar la capa tanto como desees. Puedes
modificar el tamao y recolocar elementos en la pgina y esto se comparte entre las
variantes. Edita el texto para la variante de mvil estrecha y el texto se actualiza para
las otras variantes. Tambin puedes elegir actualizar el estilo de texto (en la pgina
227) de una variante y que se apliquen los cambios solo a esa variante. O puedes
decidir que quieres diferentes contenidos o grficos en una variante: las variantes de
mviles normalmente tienen un contenido reducido.

Cuando aades o borras una pgina en una variante, automticamente crea o elimina
la pgina en otras variantes. As que tu pgina siempre tiene los mismos arreglos de
pgina en todas las variantes.

Hay que poner los nombres de las pginas web en orden para que se puedan
compartir a travs de las variantes. Si no se le pone nombre al sitio, entonces se le
aplica uno automticamente.

www.magix.es
Diseo web adaptativo 299

Crear pginas web RWD desde las plantillas


Con mucho la forma ms sencilla de comenzar a utilizar variantes es usar uno de los
diseos de plantillas de pginas web de la GALERA DE DISEOS o del CATLOGO DE
CONTENIDO : puedes ver que plantillas vienen con variantes por la (R) al lado del
nombre de la carpeta. Tan solo haz doble clic en la plantilla de una pgina web para
abrirla y editarla.

Cuando abras una plantilla vers dos pestaas de documento, una ser la del
documento principal del sitio web llamada variante principal y otra plantilla ms
estrecha llamada variante de mvil. Web Designer muestra cada variante en una
pestaa separada, de forma que puedes cambiar entre las variantes de forma fcil y
rpida. Te puede ser de ayuda organizar tus documentos web usando la opcin de
men "VENTANA" > "ORGANIZAR VISTAS" para alinear tus variantes una junto a otra.

Crear sitios web RWD desde sitios existentes


Para crear una variante desde un sitio web existente tienes que abrir el dilogo
VARIANTES DE PGINA WEB. Cualquiera de los siguientes pasos te permitir hacerlo:

Haz clic en "HERRAMIENTAS" > "VARIANTES DE PGINA WEB" > "VARIANTES DE


PGINA WEB" .
Haz clic derecho en la pestaa de documento y seleccionar "VARIANTES DE
PGINA WEB" para abrir el dilogo y tambin para ver tus variantes.
Haz clic derecho en cualquier lugar del rea de trabajo y selecciona "VARIANTES
DE PGINA WEB" > "VARIANTES DE PGINA WEB" para ver el dilogo.

Variantes de pgina web

Haz clic en el botn CREAR y elige un ancho de diseo en pxeles. Las dos variantes
arriba describen pginas web d 760 pxeles para la variante principal y una variante
de mvil que tiene por defecto un ancho de 480 pxeles. Lo que sucede es que el
navegador web que se visita con un ancho de 620 pxeles o mayor ver la variante
mayor mientras que un navegador con un ancho menor de 620 pxeles ver la
variante de mvil.
300

Puedes ver y editar las dimensiones de las variantes existentes haciendo clic en el
botn PROPIEDADES... .

Cuando creas una nueva variante, todo el contenido de la pgina web principal
aparece en su mayora inalterado, pero el tamao de pgina cambia y el fondo de
pgina se ajusta. Depende de ti si quieres volver a ajustar el diseo como desees para
esta capa. Puedes mover los elementos alrededor de la pgina libremente, reducir el
ancho de las columnas de texto, cambiar el tamao y la posicin de las imgenes y
tendrs que hacerlo para todas las pginas de tu variante de sitio web.

Puedes cambiar el ttulo y el ancho de pxel de una variante en cualquier momento


haciendo clic en los botones PROPIEDADES y luego ACTUALIZAR del dilogo.

Nota: el punto de inflexin entre dos variantes est a medio camino entre los anchos
de las dos. As en el caso arriba descrito para anchos de navegador inferiores a 620,
mostrar el ms estrecho y en el caso de los anchos por encima, mostrar el ms
ancho. Tenlo en cuenta tambin porque la mayora de los dispositivos mviles
siempre tratan de ajustar el contenido del navegador a la pantalla, no importa que tu
pgina web sea ms ancha que los pxeles de su pantalla: se reducir para adaptarlo
al navegador.

Compartir a travs de variantes


Cuando creas una variante nueva, la mayora del contenido se comparte o se
comparte en tiempo real a travs de todas las variantes, pero el tamao y la posicin
de ese contenido es propio de cada variante.

Si editas el texto, se cambiar en todas las variantes.


Si cambias el tamao de los objetos, el cambio se aplicar a una sola variante
(es probable que quieras que los objetos tengan diferentes posiciones y
tamaos en las diferentes variantes.
Si arrastras y sueltas una foto en una foto existente, se reemplazar en todas las
variantes.
Si editas la forma de una foto, la recortas o cambias el relleno (el tamao de
imagen, la rotacin o la posicin dentro del marco de la foto), entonces estos
cambios solo afectan a esa variante. Esto es til porque significa que puedes, no
solo cambiar el tamao y posicin de las fotos en la variantes, sino tambin
cambiar su relacin de aspecto y el recorte de la imagen.

Haz clic en un objeto para ver si est compartido en tiempo real o no.

www.magix.es
Diseo web adaptativo 301

Esta foto tienen un marcador de doble


lnea en el ngulo superior, lo que
indica que est compartida en tiempo
real en una o ms variantes.

Puedes modificar el tamao, recortar y


ajustar el relleno como necesites y el
cambio seguir afectando solo a esa
variante. Pero si sustituyes la foto, por
ejemplo colocando una foto encima,
entonces cambiarn todas las
variantes.

Cuando creas un objeto nuevo (por ejemplo un rea de texto, una foto o un grfico)
en principio no se comparte entre las variantes. Si quieres compartirlo, usa el men
"HERRAMIENTAS" > "VARIANTES DE PGINA WEB" o tan solo haz clic derecho en el
elemento y selecciona "VARIANTES DE PGINA WEB" > "COMPARTIR CON TODAS LA
VARIANTES" . Selecciona "DEJAR DE COMPARTIR CON VARIANTES" si no quieres que un
objeto se comparta entre las variantes. Este men tambin te da la opcin de borrar el
objeto de todas la variantes.

Nota tcnica: si tienes variantes diferentes de fotos, es decir, diferentes tamaos,


recortes o posicin de relleno, entonces Xara tiene que crear mltiples versiones de
la foto para la pgina web publicada. Sin embargo esto no tiene costes de
rendimiento (no ralentiza tu pgina web), ya que el navegador web carga en un
principio la versin correcta y luego, en el fondo, descarga las imgenes de las otras
variantes. Esto significa que la versin inicial que ests mirando (en el mvil o en la
versin de escritorio) se descargar tan rpido como pueda, pero que si cambias el
ancho de tu navegador o la orientacin, cambiar de forma inmediata a la otra
versin.

Variantes y objetos repetidos


Cuando los objetos repetidos (en la pgina 143) como las barras de navegacin, los
encabezados y los pies de pgina aparecen en varias variantes, no pueden
compartirse a travs de ellas. En lugar de eso, cada variante tiene su propio conjunto
de objetos repetidos separado.

Variantes y barras de navegacin


Es probable que quieras un diseo de barra de navegacin en una variante ms
estrecha. Las barras de navegacin en cada variante son independientes, de modo
que puedes adaptarlas como sea necesario, incluido el cambio de diseo de la barra,
arrastrando un diseo de barra de navegacin de la GALERA DE DISEOS y soltndolo
en la barra existente en la variante que quieres cambiar. Puede que quieras, por
ejemplo, una barra horizontal para pginas web anchas y una vertical para
dispositivos estrechos.
302

Una solucin eficiente de espacio para las barras de navegacin en una variante de
pgina web para mviles estrechos es tener un solo botn de navegacin con un
men de enlaces a otras pginas en el sitio web en lugar de una barra con un botn
para cada pgina. Ver Barras de navegacin de botn nico (en la pgina 387) para
ms detalles.

Publicacin de variantes
Publicar tu pgina web con variantes es fcil y no difiere de publicar una pgina web
normal. Tu pgina web es capaz de determinar la resolucin del dispositivo de
visualizacin de forma automtica y proporcionar la variante adecuada en relacin al
ancho que tenga.

Puedes probarlo cambiando el ancho de tu navegador web cuando hagas la vista


previa de tu pgina: hazlo ms estrecho y vers como cambia instantneamente para
mostrar la variante mvil de tu pgina web.

www.magix.es
Supersites 303

Supersites

Sobre las Supersites


Los navegadores web modernos admiten muchos efectos HTML5 y CSS3 avanzados,
permitiendo la creacin de pginas web mucho ms dinmicas y atractivas
visualmente.

Las Supersites utilizan estos efectos para permitirte aadir transiciones de pgina
dinmicas animadas y opciones de visualizacin para tus pginas web cuando un
usuario va haciendo clic al navegar por tu pgina web..

Las animaciones de Supersites implican la aceleracin de hardware, que es admitida


por casi todos los navegadores modernos, incluyendo aquellos de telfonos y
tabletas, para asegurarse una animacin rpida y fluida.

Mientras las Supersites no resultan adecuadas para las pginas web complejas y
grandes, son especialmente apropiadas para las pginas pequeas o para
documentos web, presentaciones y para cualquier ocasin en que se requiera un
contenido de estilo diapositiva. Las presentaciones (en la pgina 396) se publican
siempre como Supersites.

Las opciones de visualizacin verticales u horizontales permiten al usuario deslizarse


a travs de las pginas usando un ratn o incluso con toques de pantalla a travs de
las pginas cuando se usa una tableta u otro dispositivo mvil. Las pginas se
presentan como una lista de desplazamiento nica. Alternativamente una seleccin
de transiciones de pgina ofrece una amplia gama de transiciones entre las que elegir.

Habilitar Supersites
Abre el dilogo OPCIONES DE EXPORTACIN WEB para ver las opciones
Supersite."HERRAMIENTAS" > "OPCIONES DE EXPORTACIN WEB". O tambin haz clic
derecho en tu pgina y abre el dilogo PROPIEDADES WEB y haz clic en "PGINA WEB" >
"OPCIONES DE EXPORTACIN WEB".
304

Dilogo de opciones de exportacin web

Elige la opcin SUPERSITE y selecciona. Puedes seleccionar las opciones de


desplazamiento VERTICAL u HORIZONTAL o las TRANSICIONES DE PGINA .

Si escoges una opcin de desplazamiento VERTICAL u HORIZONTAL , puedes


especificar el espacio entre las pginas individuales en unidades de pxel (1 a 1000 px
con una distancia por defecto de 8 px). La pequea ventana de vista previa mostrar
tu opcin para que tengas una idea del resultado final.

Para aplicar una transicin de pgina, selecciona TRANSICIONES DE PGINA y elige


entonces un EFECTO DE TRANSICIN del men desplegable. Puedes controlar la
velocidad de transicin y tambin que las pginas tengan la opcin ADAPTAR TAMAO
A LA PANTALLA , de modo que se redimensionen de forma automtica para adaptarse
a la ventana del navegador. El efecto de transicin que elijas se aplicar a todas las
pginas de tu sitio web. Nuevamente, la pequea ventana de vista previa se
actualizar para mostrar tu eleccin.

Si quieres aadir una transicin especfica a una pgina individual, entonces ve a la


pestaa PGINA en el DILOGO DE PROPIEDADES WEB y aplica all la transicin. La
configuracin de las transiciones a nivel de pgina tiene prioridad frente a aquellas
configuraciones para el sitio web completo en las OPCIONES DE EXPORTACIN WEB .

Ten en cuenta que la opcin ADAPTAR TAMAO A LA PANTALLA solo funciona


realmente bien para las pginas cortas y donde las pginas de tu sitio web tengan el
mismo alto y ancho. Si usas esta opcin con pginas largas, el resultado no es bueno
porque el navegador encoger la pgina de modo que su alto se ajuste al alto del
navegador o dispositivo.

www.magix.es
Supersites 305

Necesitas hacer una vista previa de tu pgina web en un navegador web


separado para ver si las animaciones para la transicin funcionan bien (mejor
que usar la ventana de vista previa del navegador incorporado, ya que no te
muestra las animaciones de forma fluida). Haz clic en el botn Vista previa
de pgina web de la barra de herramientas y luego haz clic en uno de los
iconos del navegador en el extremo superior derecho de la ventana de vista
previa para ver las transiciones en un navegador web separado que tienes en
tu dispositivo.

Seleccin de iconos de navegacin en la ventana de vista previa de pgina web.


306

Objetos sticky y stretchy

Objetos sticky
Algunos sitios web tienen elementos de pgina que permanecen fijos en la pantalla y
se desplazan en ella cuando navegas hacia abajo, como los controles de navegacin o
los iconos de redes sociales. En general, estos permanecen en el borde superior de la
ventana del navegador, algunas veces hacia la izquierda o derecha, y no pueden
desplazarse fuera de la ventana. El beneficio de los objetos sticky es que siempre
quedan visibles. Entonces podrs, por ejemplo, contar con acceso directo a la
navegacin de pginas sin tener que volver hacia arriba en la pgina.

Puedes convertir cualquier objeto en "sticky", como un grfico, un mapa de bits (o


foto) o un objeto de texto. Tambin puedes aadir animaciones a los objetos sticky.
Para ms informacin consulta Animaciones web (en la pgina 431).

Enlaces externos ubicados como objeto sticky en el extremo derecho de la ventana de navegador.

Para convertir un objeto en sticky o stretchy, seleccinalo primero y luego


haz clic en el icono de PROPIEDADES WEB

o selecciona la opcin del men "HERRAMIENTAS" > "OBJETOS


STICKY/STRETCHY..."
o simplemente haz clic derecho sobre el objeto y selecciona OBJETO
STICKY/STRETCHY... del men desplegable.

Esto abrir el dilogo PROPIEDADES DEL OBJETO STICKY/STRETCHY . Puedes activar o


desactivar la funcin con la casilla.

www.magix.es
Objetos sticky y stretchy 307

Dilogo de propiedades del objeto sticky

Para los objetos sticky en la mitad superior de tu pgina, la distancia entre el objeto y
el extremo superior de la pgina determina la distancia desde la parte superior de la
ventana del navegador en la pgina publicada. Entonces, si colocas el objeto a 20 px
desde el extremo superior de la pgina, estar fijo a 20 px del extremo superior en la
ventana del navegador y el contenido de la pgina se desplazar debajo de l.

Si el objeto est ms cerca del extremo inferior de la pgina que del superior, se fijar
respecto del extremo inferior de la ventana del navegador. Entonces, si fijas el objeto
sticky a 20 px del extremo inferior de la pgina, el objeto estar siempre a 20 px del
extremo inferior de la ventana del navegador.

Todos los objetos sticky que coloques en tu pgina (o que se superpongan levemente
con la pgina) estarn centrados horizontalmente en la ventana del navegador, para
que siempre aparezcan en la pgina sin importar el ancho de la ventana del
navegador, ya que la pgina tambin estar centrada en la ventana del navegador. Si,
por el contrario, quieres que el objeto se fije sobre el extremo izquierdo de la ventana
de navegador, coloca el objeto hacia la izquierda. De forma similar, si quieres que se
fije sobre el extremo derecho, colcalo sobre la derecha.

Esta es una ilustracin de elementos colocados sobre los extremos de una pgina
tpica o respecto de ellos.
308

La etiqueta describe el lugar en donde aparecer un elemento colocado en esa ubicacin de la


pgina cuando se visualice en la ventana del navegador.

As aparecer la pgina en la ventana del navegador.

Los elementos sticky en general permanecen en la parte superior del resto de la


pgina, por lo que estarn ordenados para que se encuentren delante de todo el
contenido. Sin embargo, puedes colocar objetos sticky detrs del contenido de la
pgina, si los colocas en la capa de fondo del tablero de dibujo (en la pgina 315).

Haz vista previa de la posicin de tu objeto sticky en el navegador web incluido


utilizando uno de los botones de vista previa web.

www.magix.es
Objetos sticky y stretchy 309

Objetos stretchy
Los objetos stretchy ayudan a crear diseos en los que no existen lmites evidentes
entre las pginas y el fondo de la pgina cubre toda la ventana del navegador y se
extiende para cubrir todo el ancho del navegador. Puedes hacer que cualquier
rectngulo o imagen se extienda para cubrir la ventana del navegador tanto en
sentido horizontal como vertical, si utilizas el dilogo Stretchy (el mismo dilogo que
los controles sticky). Estos elementos stretchy estn pensados como fondos de
pgina y, por lo tanto, aparecen detrs del otro contenido de la pgina. Es posible que
quieras colocarlos en una de las capas de fondo (en la pgina 311).
Sin embargo, tambin puede que quieras que un objeto sticky tenga el ancho o altura
completos, por lo que los objetos stretchy que tambin son sticky aparecern delante
del contenido de tu pgina principal.

Por ejemplo, es posible que quieras colocar un encabezado sticky sobre el extremo
superior de tu pgina web con una barra de navegacin sticky sobre l.

El navegador tiene un encabezado stretchy y sticky que cubre la parte superior de su ventana. El
contenido de la pgina se desplazar debajo del encabezado que permanecer visible.
310

Los objetos stretchy pueden fijarse de forma que se ESCALEN o formen en MOSAICO
con las opciones del dilogo. En la mayora de los casos querrs que un objeto
stretchy se redimensione para que se ajuste a la ventana del navegador, por lo que
escogers la opcin para escalar. Esto funciona muy bien con fotos y rectngulos con
relleno liso.

Si usas un rectngulo con un relleno con textura, querrs utilizar "mosaico" en lugar
de la opcin escalar, para que la textura tenga la misma apariencia en cualquier
ventana de navegador. En estos casos, selecciona la opcin mosaico. Si tienes un
relleno con gradacin vertical, tambin debers elegir la opcin mosaico.

Notas de uso: se supone que extenders nicamente rectngulos e imgenes


rectangulares. La caracterstica stretchy no ser til con otras formas.

Cambio de tamao de fotos

Puedes hacer que una imagen stretchy cubra el ancho completo de la ventana del
navegador. En este caso, la imagen se ampliar si aumentas el ancho del navegador,
pero lo har dentro de la altura de la imagen existente (de forma que no crecer en
sentido vertical y empujar todo hacia abajo a medida que ensanchas el navegador).
Esto significa que la imagen se recortar progresivamente en sentido vertical a
medida que crece verticalmente (la relacin de aspecto de la foto no se alterar jams
porque el resultado sera muy pobre).

Si quieres utilizar una foto como elemento stretchy, amplalo al ancho completo de la
pgina y luego selecciona ANCHO COMPLETO en el cuadro de dilogo
STICKY/STRETCHY . Luego podrs decidir si quieres que la imagen se ample respecto a
la parte superior, al centro o a la parte inferior, usando los controles provistos. La
opcin stretchy ALTURA COMPLETA funciona de la misma manera pero para las
imgenes que se extienden verticalmente (menos til).

Una imagen de ancho completo puede redimensionarse respecto a la parte superior,


centro o parte inferior de la imagen.

Una imagen de altura completa puede redimensionarse respecto a la parte izquierda,


central o derecha de la imagen.

Nota de resolucin: Es necesario que la foto sea una imagen de alta resolucin (en la
pgina 327) porque se ampliar para adaptarse al ancho del navegador, lo que
podra ser un tamao de pantalla de alta definicin de aproximadamente
2000 pxeles de ancho. Por lo que si utilizas una imagen de resolucin baja o media,
el resultado ser una imagen borrosa cuando se la ample al ancho mximo.

www.magix.es
Objetos sticky y stretchy 311

Combinaciones de objetos sticky y stretchy


La tabla muestra qu tipos de objetos funcionan con cules combinaciones sticky y
ancho/altura (stretchy).

Tipo de objeto Sticky Ancho/Altura

Texto S No
Imgenes (incluidos grupos) S S
Marcadores de lugar/widgets S No
Paneles de texto S No
Grupos suaves S S
Sticky NC S
Ancho/altura total S NC
Objetos en la capa de fondo de pgina S S
Objetos en la capa de fondo de tablero de S S
dibujo
Animaciones de aparicin de objetos S No
Barras de navegacin S No
Objetos en capas popup S S

Importante: Algunos widgets de la versin 10 de la galera no son compatibles con las


nuevas caractersticas de animacin y sticky si se utilizan en la misma pgina o en el
mismo supersite, por lo que es probable que debas reemplazarlos con las versiones
actualizadas de la galera de diseos. Haz clic aqu
http://support.xara.com/index.php?/Knowledgebase/Article/View/816/ para ms
informacin en el sitio de asistencia.
312

Fondos de pgina web


La mayora de diseos de pgina en la GALERA DE DISEOS tienen dos tipos de fondo.
Un fondo de tablero de dibujo amplio que se extiende a lo largo del fondo de toda la
ventana del navegador cuando exportas tu pgina. Sobre l est el fondo de pgina
con todos los otros elementos que constituyen la pgina web.

Por defecto las plantillas de la galera de diseo contienen una variante principal y una
mvil dentro del mismo documento web.

Fondo del tablero de dibujo o del navegador


Fondo de pgina

Configurar los colores del fondo de pgina o tablero de dibujo


Cuando creas un nuevo documento en blanco ("ARCHIVO" > "NUEVO" ) la pgina es
transparente (sin color) por defecto, por lo que tan solo vers el color del tablero de
dibujo tras ella, que es blanco por defecto. Esta rea de pgina es donde colocas todos
los elementos de tu pgina web. Tambin vers un contorno gua rectangular suave
que muestra los lmites de la pgina sobre el tablero de dibujo. Puedes desactivar
esta gua si quieres (haz clic derecho en la pgina y desactiva "FONDO DE PGINA" >
"MOSTRAR TAMAO DE PGINA".

Si arrastras un color desde la lnea de colores al tablero de dibujo y lo sueltas, todo el


fondo de la pgina adoptar ese color. Sucede esto porque el fondo de pgina es por

www.magix.es
Fondos de pgina web 313

defecto transparente, reflejndose as el color del tablero de dibujo subyacente. Y esto


es exactamente lo que vers en el navegador cuando realices una vista previa de tu
pgina.

Sin embargo, tambin puedes configurar el tablero de dibujo en un solo color, tal
como se describe ms arriba, y luego fijar el rea alrededor de la pgina en otro color.
Tan solo suelta un color sobre el fondo de pgina para configurar su color. Ahora, al
hacer la vista previa de tu pgina vers que el color de fondo de la ventana del
navegador tiene el color del tablero de dibujo y el fondo de pgina cuenta con su
propio color.

Puedes utilizar el editor de colores para modificar los colores. Haz clic derecho sobre
la pgina y selecciona "FONDO DE PGINA" > "EDITAR COLOR DE PGINA" para abrir el
editor de color. Entonces podrs editar el color de la pgina. Para editar el color del
tablero de dibujo, haz clic derecho sobre el tablero de dibujo y selecciona "FONDO DEL
TABLERO DE DIBUJO" > "EDITAR COLOR DEL TABLERO DE DIBUJO" .
314

Para restablecer el color blanco del fondo del tablero de dibujo, haz clic derecho sobre
el tablero de dibujo y selecciona "FONDO DEL TABLERO DE DIBUJO" > "RESTABLECER" .
Para restablecer el fondo de pgina a su color transparente por defecto, haz clic
derecho en el fondo de pgina web y selecciona "FONDO DE PGINA" > "RESTABLECER".

Si tienes ms de una pgina en tu documento de pgina web y quieres aplicar un


fondo y colores del tablero de dibujo globalmente, es decir, en cada pgina de tu
documento de sitio web, puedes hacerlo fcilmente. Haz clic derecho sobre el tablero
de dibujo o sobre el fondo de pgina y selecciona COPIAR FONDO DE TABLERO DE
DIBUJO o COPIAR FONDO DE PGINA y selecciona entonces PEGAR TABLERO DE
DIBUJO/FONDO DE PGINA EN TODAS LAS PGINAS.

Fondos de plantilla y cambio de color de fondo


MAGIX Web Designer 11 Premium te permite arrastrar y soltar una gama de fondos
de pgina diseados previamente desde la GALERA DE DISEO directamente en tu
documento web. Elige entre la seleccin de fondos del apartado FONDOS DE PGINA
WEB de la galera. Puedes personalizar las texturas con tus propios colores
arrastrndolos desde la lnea de colores sobre el fondo o usando clic derecho sobre el
fondo y abriendo el men "FONDO DE TABLERO DE DIBUJO" > "EDITAR COLOR DE
TABLERO DE DIBUJO" para desplegar el editor de color.

Cuando cambias el color de un fondo que est compuesto por una serie de colores,
Web Designer te preguntar qu color quieres cambiar. Puede que estos sean colores
con nombre (como sera en el caso de que estuvieras trabajando con uno de los
temas de plantillas prediseadas para pginas web, o con colores que hayas
nombrado previamente, o incluso podran ser colores locales si estuvieras cambiando
tu propia seleccin de color) Consulta "Reemplazar colores" para ms informacin.

Ten en cuenta que cuando arrastres uno de los fondos de pgina web disponibles
sobre el fondo del tablero de dibujo, reemplazar todos los objetos que estn
actualmente en la capa del tablero de dibujo, y a este respecto es una operacin
destructiva.

Fondos fijos no desplazables


Normalmente, si tienes una pgina web larga por la que te puedas desplazar en el
navegador, el fondo del navegador se desplaza con ella, por lo que el contenido de la
pgina permanece en la misma posicin en relacin al fondo. Pero puede fijar el fondo
para que no se desplace con el contenido de la pgina. Haz clic derecho sobre el
tablero de dibujo y selecciona "FONDO DE TABLERO DE DIBUJO" > "FIJO" . Entonces,
cuando hagas una vista previa, el contenido se desliza sobre el fondo fijo mientras te
desplazas (para ver este efecto, asegrate de que tu pgina es suficientemente larga
como para que el navegador muestre la barra de desplazamiento).

www.magix.es
Fondos de pgina web 315

Para cambiar al estado por defecto, selecciona "FONDO DE TABLERO DE DIBUJO" >
"DESPLAZAMIENTO" .

Usar fotos como fondo.


Crear fondos de foto.
Si quieres crear un fondo propio de foto o de textura de mapa de bits en lugar de
personalizar un fondo prediseado de la galera de diseos, es muy fcil de hacer.

Primero, importa la foto o textura en tu documento, tal y como lo haras para subirla a
tu pgina web. Entonces haz clic en la foto y escoge entre CONFIGURAR PGINA COMO
FONDO o CONFIGURAR TABLERO DE DIBUJO COMO FONDO , dependiendo de cual quieras
configurar.

Segmentacin
En funcin de la naturaleza y tamao de la imagen, puede que quieras que la imagen
se repita a modo de mosaico para rellenar el fondo. Para cambiar esta configuracin,
haz clic derecho en el fondo de pgina o de tablero de dibujo (dependiendo de nuevo
de lo que quieras cambiar) y selecciona o desbloquea la opcin "mosaico" en el
submen Fondo de pgina/ Fondo de tablero de dibujo.

Rellenar la ventana del navegador


Al usar una foto como fondo del tablero de dibujo (que se convierte en el nuevo fondo
del navegador) hay una opcin ms. Puedes hacer que la foto cambie de tamao en
relacin al tamao de la ventana del navegador del visitante. Tan pronto como la
ventana de navegador cambie de tamao, la foto lo hace tambin para adaptarse. Haz
clic derecho en el tablero de dibujo y selecciona "FONDO DE TABLERO DE DIBUJO" >
"RELLENAR LA VENTANA DEL NAVEGADOR" .

Capas de fondos de pgina o de tablero de


dibujo
Si abres la GALERA DE PGINAS Y CAPAS vers tanto la CAPA DE FONDO DE PGINA
como la CAPA DE FONDO DE TABLERO DE DIBUJO. Estas capas contienen objetos que
montan ambos fondos en tu documento.

Estas capas se encuentran generalmente bloqueadas, por lo que no puedes


seleccionarlas para editar su contenido. Sin embargo, puedes desbloquearlas en la
GALERA DE PGINAS Y CAPAS y realizar cierto tipo de edicin limitada para
personalizar el fondo de tu pgina o tablero de dibujo. Tan solo haz clic en los
smbolos de bloqueo al lado de las capas para desbloquearlas. Una vez
desbloqueadas, puedes hacer actual una capa de fondo (de forma que se dibujan
nuevos objetos sobre ella) o editar los objetos sobre ellas al igual que para las capas
normales.
316

Si has elegido, por ejemplo, un color diferente para el fondo de pgina, habrs visto un
rectngulo que qued seleccionado (mira en la barra de estado) cuando hiciste clic en
el fondo de pgina. Ahora puedes editar de forma limitada este rectngulo, insertarle
un relleno con gradacin con la HERRAMIENTA DE RELLENO o redondear sus esquinas
con la HERRAMIENTA DE RECTNGULO .

Si has colocado elementos en el tablero de dibujo (posiblemente tengas grficos,


fotos u otros trabajos aun no terminados que no quieras que aparezcan como parte
de tu documento web) estos elementos no aparecern cuando hagas una vista previa
de la pgina web. Si quieres que aparezcan como parte del fondo, entonces muvelos
hasta la capa FONDO DE TABLERO DE DIBUJO.

Las dos estrellas estn sobre la capa del tablero de dibujo y por lo tanto aparecen como parte de
la pgina cuando se haga una vista previa en la ventana del navegador.

Ten en cuenta que una vez que hayas desbloqueado la capa de un fondo, se
comportar exactamente como cualquier otra capa abierta. De este modo, cuando
hagas clic derecho sobre un objeto en la capa de fondo desbloqueada, vers el men
de capa normal relativo a los objetos sobre la capa y no el men de la capa de fondo
propiamente, cosa que ves cuando la capa est bloqueada por defecto.

Variantes y fondos de diseo web adaptativo


Con un sitio web de diseo web adaptativo (en la pgina 297), el color principal o el
diseo del fondo de tablero de dibujo (el rea alrededor de la pgina que determina el
fondo de la ventana del navegador cuando se publica la pgina) puede cambiar de
una variante a otra, y cada pgina y cada variante de pgina se exporta con su propio
rectngulo de tablero de dibujo.

Las excepciones a esta regla son los Supersites (en la pgina 303) verticales y
horizontales. Como puede mostrarse nicamente un fondo, en la primera pgina solo
se utilizar el fondo del tablero de dibujo de la primera variante.

Puedes colocar objetos adicionales en la capa de fondo de tablero de dibujo y estos


pueden variar tambin entre las variantes de las pginas. As que, por ejemplo,
www.magix.es
Fondos de pgina web 317

puedes tener una forma superpuesta en el borde de la pgina y esta puede colocarse
todava de forma diferente en cada variante u omitirse en algunas.

Desplazamiento de la parte superior de la pgina


Generalmente, si configuras la pgina y el tablero de dibujo con diferentes colores, al
hacer la vista previa vers que la pgina se extiende hasta la parte superior de la
ventana del explorador. No puedes ver el color del tablero de dibujo encima de tu
pgina. Sin embargo, puedes aadir un desplazamiento para que haya cierto espacio
entre tu pgina y el navegador web.

Para agregar un desplazamiento, debes cambiar el origen de la pgina. Generalmente,


el origen de la pgina est configurado en la esquina superior izquierda de tu pgina.
Al mover el origen hacer arriba 20 pxeles, por ejemplo, agregas un margen de 20
pxeles a la parte superior de tu pgina cuando se visualiza en un navegador web.

Puedes cambiar el origen de dos formas. La forma ms sencilla es abrir el dilogo


HERRAMIENTAS > OPCIONES y en la pestaa CUADRCULA Y REGLA aumentar el valor de
la coordenada Y del punto de origen. En general, esto est configurado como el
tamao vertical de tu pgina, por lo que debes aumentar el tamao del margen de
desees ver. Entonces, por ejemplo, si tu pgina tiene 700 pxeles de alto, cambia el
valor Y de la coordenada de origen de 700 a 720 para agregar un desplazamiento de
20 pxeles.

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 botn de
cruce, ubicado en el lugar en que la regla vertical se cruza con la horizontal, en la parte
superior izquierda de lienzo. Ahora, ests desplazando por la posicin original, por lo
que coloca la distancia vertical apropiada sobre la esquina izquierda superior de tu
pgina.

Cambiar la posicin horizontal del origen no tiene efecto en la posicin horizontal de


tu pgina, por lo que no deberas modificarla.
318

Publicar pgina web

Publicacin al sitio web TaskPilot M


Para subir tu pgina web a Internet de forma instantnea puedes publicarla en
TaskPilot o MAGIX Online World (ambas opciones te ofrecen un servicio de
alojamiento web gratuito) o bien publicarla en otro espacio web. Publicarla en
TaskPilot resulta sencillo porque est integrado en Web Designer.

Los usuarios de MAGIX Online World todava pueden publicar all de forma usual,
pero los nuevos usuarios ya no pueden registrarse para este servicio. Los nuevos
usuarios que desean hacer uso del servicio de alojamiento web gratuito utilizarn
TaskPilot. Los usuarios de MAGIX Online World deben hacer clic en PUBLICAR EN UN
ALOJAMIENTO WEB ALTERNATIVO... y luego seguir las instrucciones del dilogo "MAGIX
ONLINE WORLD" > "CONFIGURACIN" .

Selecciona "ARCHIVO" > "PUBLICAR PGINA WEB " o haz clic en el icono
publicar en la barra de herramientas de la pgina web.

La primera vez que hagas esto vers aparecer el dilogo de inicio de sesin de
TaskPilot.

Inicia sesin con tu nombre de usuario y contrasea TaskPilot: se te habr


suministrado ya con la compra o al registrar Web Designer en la pgina web de
MAGIX. Otros usuarios pueden hacer clic en el botn REGISTRO GRATUITO para

www.magix.es
Publicar pgina web 319

obtener un nombre de usuario y contrasea para MAGIX de forma inmediata. Puedes


optar por no cerrar sesin, lo que significa que cuando salgas de Web Designer y
vuelvas a entrar, no debers volver a iniciarla.

Una vez que hayas iniciado sesin vers el siguiente dilogo:

Selecciona la direccin de tu pgina web en el men desplegable. Tambin puedes


introducir el nombre de una subcarpeta, p. ej., "pgina 1", y vers cmo se aade al
final de tus direcciones web en el campo superior. Te ser til si quieres publicar
varias pginas en la misma cuenta de TaskPilot: puedes poner cada una en una
subcarpeta diferente. Tambin es conveniente si quieres aadir una contrasea para
proteger una carpeta.

Haz clic en PUBLICAR . Tu pgina web se publicar y vers la ventana de transferencia


de datos que te indica el progreso de la publicacin. Cuando la publicacin haya
terminado, podrs navegar por tu pgina web a travs del enlace que aparece en la
ventana de transferencia de datos. Publicar en TaskPilot genera automticamente un
mapa de bits que vers como un archivo mapadebits.xml en tu espacio web de
TaskPilot. Es una lista de las pginas en tu sitio web y ayuda a los buscadores a
encontrar y hacer una lista de todas las pginas de tu sitio.

El botn PROTECCIN POR CONTRASEA te lleva a TaskPilot, donde podrs controlar el


acceso a carpetas configurando las contraseas. Puedes crear una lista de contactos
que podrs organizar en grupos de usuarios. Quienes deseen visitar el rea de
proteccin por contrasea tendrn que facilitar una direccin de correo electrnico y
una contrasea para poder acceder.

El botn CENTRO DE CONTROL te llevar a TaskPilot, donde podrs administrar tu


cuenta as como navegar, ver y eliminar archivos que hayas cargado en tu espacio
web.

Haz clic en el botn NUEVA DIRECCIN WEB si quieres elegir una direccin web
diferente para tu pgina web. Puedes comprar, por ejemplo, tu propio nombre de
dominio (p. ej., xara.com), en lugar de que tus direcciones web incluyan magix.net. Si
adquieres otras direcciones web, estas aparecern en "Tu pgina web" en la lista
desplegable superior cuando vuelvas a publicar. Utiliza la opcin "Actualizar" de esa
lista para actualizarla en caso de que no incluya todas las direcciones que esperabas
ver.
320

Publicacin en un alojamiento web alternativo


Si no quieres publicar en TaskPilot, tan solo selecciona PUBLICAR EN UN ALOJAMIENTO
WEB ALTERNATIVO... del cuadro de dilogo que aparecer cuando hagas clic en el
cono de publicacin en la barra de herramientas superior.

As se abrir la pestaa PUBLICAR del dilogo Propiedades de web donde puedes


configurar los detalles FTP de una empresa alternativa de alojamiento web.
Tambin puedes configurar o cambiar otras propiedades, lo que te permitir
publicar tu sitio web en Internet, sin que tengas que volver a realizarlo cada vez que
quieras publicar. Los usuarios de MAGIX Online World (MOW por sus siglas en
ingls) tambin pueden publicar a travs del cuadro de dilogo CONFIGURACIN DE
MAGIX ONLINE WORLD .

Debers obtener los detalles FTP de tu empresa de alojamiento web. Estos son:

Direccin de alojamiento
Nombre de usuario
Contrasea
Ruta completa de carpetas (incluidas las subcarpetas de ser necesario) que tu
empresa de alojamiento web te exige para la publicacin.

Pestaa de publicacin del cuadro de dilogo de propiedades web

www.magix.es
Publicar pgina web 321

1. Elige en que alojamiento FTP deseas publicar. En este caso escogers OTROS
ALOJAMIENTOS WEB (VA FTP) .
2. Haz clic ahora en CONFIGURACIN... para personalizar tu configuracin de FTP.
Se abrir el siguiente dilogo...

Dilogo de configuracin de otros alojamientos web

1. Elige cmo quieres conectarte en el men desplegable: las opciones son FTP o,
los dos protocolos ms seguros, FTPS o SFTP.
2. En el campo Direccin FTP del alojamiento, introduce la direccin FTP de tu
alojamiento web. Suele ser el mismo nombre de tu dominio, si lo tienes. Por
ejemplo, para usuarios de MAGIX Online World sera Ftp.MAGIX-online.com.
3. En el campo "Nombre de usuario FTP", introduce tu nombre de usuario.
4. En el campo Contrasea FTP, introduce tu contrasea FTP.
5. El campo opcional "Subcarpeta" permite publicar la pgina web en una
subcarpeta. Si creas una subcarpeta aqu, todas las pginas del sitio web se
publicarn en esa carpeta. El hecho de publicar en una subcarpeta o no,
depender de las condiciones de tu servicio de alojamiento web: en algunos no
necesitars publicar en una subcarpeta, mientras que otros exigen que publiques
en una subcarpeta "pblica" o "www", por ejemplo. Antes de publicar la pgina
web, tienes que comprobar la ruta completa de la carpeta FTP en la que tu
empresa de alojamiento web te exige que publiques, ya que los requisitos varan
considerablemente. Por ejemplo, si la empresa de alojamiento web quiere que
322

publiques en http://tudominio.com/public_html, entonces tienes que introducir


"public_html" en el campo de subcarpeta.
6. Si quieres un mapa del sitio para tu pgina, o si deseas que se incluya tu pgina
en la galera de usuarios Xara http://www.xara.com/websitegallery, debes
introducir la URL completa de tu pgina publicada en el campo URL de pgina
web. Para el mapa del sitio web se genera automticamente un archivo llamado
mapadelsitio.XML. Es una lista de las pginas en tu sitio web y ayuda a los
buscadores a encontrar y hacer una lista de todas las pginas de tu sitio. Si no
has especificado una URL aqu, al exportar tu pgina web, no se crear el mapa
de sitio.
7. Haz clic en el botn "Explorar espacio web" para examinar, ver y eliminar
archivos que has subido a tu servidor FTP (opcional). Tambin puedes
establecer una ruta de subcarpetas que aparecer automticamente en el
campo de subcarpeta (opcional).
8. Cuando hayas terminado, haz clic en Aceptar para volver a la pestaa "Publicar"
del dilogo "Propiedades web".
9. Haz clic en Aceptar. Web Designer muestra un dilogo para confirmar los
detalles de publicacin que est a punto de utilizar. Haz clic en Publicar.

Dilogo de detalles de publicacin

Transferencia de datos
1. Tras hacer clic en "Publicar", Web Designer abre una pequea ventana que
muestra el progreso de la transmisin de datos y te indica cuando la publicacin
se haya completado. Si has introducido la URL de tu pgina web con los detalles
FTP, puedes acceder directamente a ella desde aqu.
2. Como alternativa, tan pronto como la transferencia finalice, podrs abrir una
ventana de navegador e ir a la URL de la pgina web publicada.

Nota: si introduces una subcarpeta en la pestaa "Publicar" del dilogo "Propiedades


web", la pgina se guardar ah.

Importante: si no has asignado ningn nombre de pgina especfico en la galera de


pginas y capas, el nombre que exportes en ltimo lugar se utilizar como base para
todas las pginas de tu sitio web. Por ejemplo, si abres una plantilla de pgina web,
la exportas como "test" a tu sistema de archivos y la publicas a continuacin, se

www.magix.es
Publicar pgina web 323

publicar como test.htm en el servidor web y las pginas adicionales sern


test_2.htm, test_3.htm etc.

"index.htm" es el nombre comn para la primera pgina de una web.

Nota: muchos servidores utilizan nombres de archivo que distinguen entre


maysculas y minsculas. As, por ejemplo, la direccin
web "xara.com/productos.htm" no es lo mismo que "xara.com/Productos.htm". Para
reducir la confusin y la probabilidad de errores, Web Designer obliga a que todos los
nombres de pgina se escriban en minsculas y contengan solo caracteres
permitidos. Esto significa que no estn permitidos los espacios en los nombres de
pgina. Sugerimos utilizar un guin bajo como separador alternativo.

Protocolos FTP seguros


Adems del protocolo de transferencia de archivos (FTP por sus siglas en ingls),
Web Designer tambin admite los protocolos ms seguros FTPS y SFTP. Algunos
alojamientos web te exigen cargar tu sitio utilizando uno de estos protocolos en vez
de FTP, ya que no es tan seguro.

Haz clic en el men desplegable CONECTAR USANDO: en el cuadro de dilogo


CONFIGURACIN DE OTROS ALOJAMIENTOS WEB y vers las siguientes opciones:

Selecciona una de las tres opciones: la opcin FTP usual o FTPS y SFTP que son ms
seguras. Debers saber qu protocolos de FTP admite tu empresa de alojamiento web
para completar los detalles FTP descritos anteriormente.

En general, lo que ocurre es que FTPS se asigna al puerto 21 mientras que SFTP se
asigna al puerto 22 como parte de la direccin IP del alojamiento. Esto es algo de lo
que no debes ocuparte porque Web Designer lo gestiona automticamente por ti,
pero a veces, para brindar mayor seguridad, el administrador del sistema del anfitrin
asigna un nmero de puerto diferente y, si esto es as, tendrs que introducir el nuevo
puerto de forma manual como parte de la direccin FTP del alojamiento.

En este ejemplo, el nmero de puerto se ha cambiado a 22098 y, por lo tanto, se ha aadido a la


direccin del alojamiento como :22098.
324

Para ms informacin, consulta nuestro artculo de la Base de datos de conocimiento


http://www.xara.com/support/sftp/ sobre la publicacin utilizando protocolos de
FTP seguros.

Inclusin de la pgina web en la galera de


usuarios
El campo INCLUIR MI PGINA EN LA GALERA DE USUARIOS solo est disponible si has
aadido una URL vlida (o si usas TaskPilot/MAGIX Online World). Si seleccionas
esta opcin, despus de publicar tu pgina, se la enviar para que se considere su
inclusin en la galera de pginas web creadas por usuarios de Web Designer.

Para ms detalles, visita la galera en http://www.xara.com/websitegallery


http://www.xara.com/websitegallery o haz clic en el botn Ms informacin.

Explorar espacio web


Si has completado los campos de direccin de FTP, el nombre de usuario FTP y la
contrasea de FTP, haz clic en el botn opcional Explorar espacio web para navegar,
ver y eliminar los archivos que has cargado a tu servidor FTP.

Puedes ver los archivos y abrir las carpetas para ver el contenido de las subcarpetas.
Tambin puedes eliminar uno o muchos archivos. Selecciona mltiples filas con un
clic mientras pulsas Shift o Ctrl, tal como lo haces en el Explorador de Windows. Haz
clic en un encabezado de columna para ordenar los archivos segn el criterio de esa
columna.

Navega por la lista de archivos que has cargado a tu servidor ftp

www.magix.es
Publicar pgina web 325

Regresa a la vista de archivos original que habas abierto al lanzar el dilogo


Explorar espacio web
Te lleva a las carpetas de un nivel superior

Elimina un archivo o mltiples archivos seleccionados

Publicacin rpida (solo archivos modificados)


Deja la casilla PUBLICACIN RPIDA (SOLO ARCHIVOS MODIFICADOS) seleccionada. De
esta forma la publicacin ser ms rpida en la mayora de los casos, ya que solo los
archivos modificados desde la ltima publicacin son publicados de nuevo.

Guardar la configuracin de publicacin en el


documento
Deja activa la casilla GUARDAR LA CONFIGURACIN DE PUBLICACIN EN EL DOCUMENTO
para que se conserven guardados los detalles de publicacin que has introducido en el
documento actual. Esto significa que siempre que abras el documento, tendr ya los
detalles de publicacin en l, por lo que puedes realizar actualizaciones fcilmente.

Cuando actives la casilla "Guardar configuracin de publicacin en el documento",


tambin podrs activar la casilla "Guardar contrasea" (no disponible para la
publicacin en TaskPilot ni en MAGIX Online World). Selecciona esta casilla tambin
para guardar la contrasea FTP para el documento actual, si ests seguro de que eso
es lo que quieres. Esto no es recomendable, ya que significa que cualquiera que se
haga con una copia de tu archivo de diseo puede publicar en tu pgina web sin tener
que saber o introducir tu contrasea.

Cambiar entre cuentas TaskPilot/MAGIX Online World

Solo puedes trabajar sobre una cuenta TaskPilot/MAGIX Online World al mismo
tiempo porque con MAGIX Web Designer 11 Premium solo puedes estar registrado
en una nica cuenta de este tipo a la vez. Por lo tanto, si quieres publicar una pgina
web en una cuenta TaskPilot/MAGIX Online World diferente, necesitas cerrar sesin
primero usando "COMPARTIR " > "SALIR ". Luego puedes volver a registrarte en otra
cuenta TaskPilot/MAGIX Online World y publicar como se describe arriba.

Del mismo modo, si cargas un documento de pgina web que contenga unos datos de
acceso a TaskPilot/MAGIX Online World diferentes a los de la cuenta en la que ests
actualmente registrado, vers aparecer el dilogo de registro del servicio si tratas de
publicar ese documento, de forma que puedas registrarte en la cuenta
correspondiente al mismo (de este modo se cerrar automticamente la sesin actual
de TaskPilot/MAGIX Online World).
326

Guardar perfiles
Los perfiles te permiten guardar los detalles de publicacin en tu equipo, de modo que
puedas recuperarlos y usarlos de nuevo en el futuro sin tener que introducirlos de
nuevo.

En PERFIL , haz clic en el botn GUARDAR PERFIL e introduce un nombre de perfil


adecuado. Ahora puedes seleccionar el perfil de la lista de perfiles en la parte superior
del dilogo, de forma que puedes usarlos en otros documentos sin tener que
reinsertarlos. Puedes guardar un perfil tanto con configuracin TaskPilot/MAGIX
Online World como FTP.

Nota: puedes eliminar un perfil seleccionando en la lista de PERFIL y haciendo clic en


el botn ELIMINAR junto a l.

Documentos web y PDF


Tal vez la forma ms usual de distribuir documentos impresos a una mayor cantidad
de personas sea mediante archivos PDF que se ofrecen como descarga. Desde el
punto de vista del diseo, los sitios webs y HTML estn estrictamente restringidos.
Cada navegador muestra el texto de forma diferente y la disponibilidad limitada de
fuentes hace casi imposible asegurar que tu cliente ver exactamente tu diseo. Por
esto, los folletos, informes y todo tipo de documento en los que el diseador quiera
conservar el control preciso del diseo, fuente, disposicin y paginacin se crean
como PDF.

Sin embargo, el formato PDF tiene una desventaja: requiere instalar plug-ins o
programas adicionales para poder visualizarlos. Designer Pro X9 presenta una nueva
forma de publicar en estilo "impreso" o documentos de tipo DTP que no implica la
utilizacin de PDF.

Libre uso de fuentes. La capacidad de utilizar una amplia variedad de fuentes.


Puedes usar tus fuentes instaladas (las fuentes que se incluyen
automticamente siempre que la licencia lo permita) o las ms de 600 fuentes
de Google Fonts.
Fotos y grficos de alta resolucin. Diseo libre: combina grficos y texto en
cualquier lugar de la pgina.
Resultados "lo que ves es lo que obtienes" con pxeles precisos. El documento
que diseas en Designer Pro es exactamente lo que ver quien lo mire, con las
mismas fuentes, diseo y paginacin.
Sin necesidad de instalar ningn plug-in o lector independiente. Las pginas se
crean en HTML5. Tu documento es un documento web.
Este formato es compatible con todos los navegadores modernos, incluyendo
dispositivos porttiles y tablets, y podrs desplazarte rpidamente y de forma
fluida por todo el documento.

www.magix.es
Trabajar con fotos 327

Trabajar con fotos

Introduccin
Actualmente, las fotos son una parte integral de casi todo trabajo creativo, de sitios
web, flyers, folletos, DTP y ms.

El Manejo de fotos en Web Designer es diferente al que puedes haber usado con
otros programas de diseo grfico.

En MAGIX Web Designer 11 Premium 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 tamao de una foto, no ests alterando realmente la foto
original, sino que slo ests modificando una copia visual. La imagen original con la
resolucin total se guarda en el archivo .web de modo que posteriormente puedes
editar, volver a cambiar el tamao o aplicar cualquiera de las opciones de edicin de la
herramienta de fotos sin ninguna prdida de calidad. Incluso puedes "descortar" fotos
recortadas.

El manejo de fotos es increblemente rpido. Puedes abrir una foto de 50 megapxeles


y efectuar cualquiera de las operaciones de optimizacin y girar la imagen con su
resolucin total en tiempo real.

Este captulo cubre los principios bsicos de manipulacin de fotos e imgenes de


mapas de bits en MAGIX Web Designer 11 Premium. El funcionamiento de la
Herramienta de fotos est contemplado en el captulo Herramienta de fotos.

Imgenes de alta resolucin


Las imgenes de alta resolucin del mismo tipo que las imgenes de dispositivos
Retina(R) de Apple se pueden crear ahora automticamente con Web Designer.

Para poder aprovechar las pantallas de tipo Retina es necesario, por lo general, crear
todas tus fotos y grficos de pginas web con una resolucin al menos de 96 dpi: esto
es el doble de pxeles por pulgada tanto vertical como horizontalmente, lo que cuatro
veces ms pxeles por pulgada cuadrada. La parte negativa es que tus archivos sern
ahora ms de cuatro veces mayores, reduciendo la velocidad de tu pgina web para
todos tus visitantes. Para aquellos visitantes de tu web que no tienen pantallas de alta
resolucin esto es ciertamente injusto.

Web Designer resuelve este problema creando de forma automtica fotos y grficos
de alta resolucin y actuando de manera inteligente al cargar los grficos con la
resolucin adecuada para el navegador que se est usando.
328

Esto significa que no se penaliza con una reduccin de la velocidad para aquellos
visitantes sin Retina, pero aquellos que tienen navegadores de alta resolucin
conseguirn ver la imgenes al doble de resolucin y pginas web de mayor cantidad.

La creacin de imgenes de alta resolucin est activada por defecto: cuando


exportes tu pgina web, un visitante Retina o de alta resolucin ver las imgenes y
grficos con mayor resolucin, mientras que un visitante estndar ver imgenes de
resolucin normal. Lo nico que tienes que hacer: asegrate de que las imgenes que
quieres que aparezcan con alta resolucin estn guardadas en tus pginas web con
una resolucin mayor que 100 dpi, ya que este es el punto lmite en el cual Web
Designer asume que quieres que la imagen se renderice como alta definicin.
Imgenes con una resolucin inferior a 100 dpi permanecern como imgenes de
definicin estndar. No tendrs que preocuparte de esto por lo general, ya que, con la
funcin activada por defecto, todas las imgenes se optimizan a 192 dpi en el dilogo
OPTIMIZAR FOTO , por lo que quedan por encima del umbral de creacin de imgenes
de alta resolucin.

Ten en cuenta que debido a las imgenes de mayor tamao y al hecho de que se
necesitan tanto las imgenes de alta resolucin como las de resolucin normal,
publicar pginas Retina lleva ms tiempo que publicar pginas no Retina. Si deseas
deshabilitar la funcin, ve a la pestaa "PROPIEDADES DE WEB" > "PGINA WEB"
situada en el men HERRAMIENTAS , o bien haz clic derecho sobre tu documento web
y selecciona "PROPIEDADES DE PGINA WEB" > "PGINA WEB" . Entonces desactiva la
casilla IMGENES RETINA (ALTA DEFINICIN) en la parte inferior del dilogo.

Si desear volver a formatear una pgina de definicin estndar creada con una
versin anterior de Designer a una con imgenes de alta resolucin, ten en cuenta
que tendrs que importar fotos de nuevo a Web Designer con la funcin Retina
activada.

Consulta Optimizar fotos y mapas de bits para ms informacin sobre la resolucin


de imgenes.

Objetos de fotos
En Web Designer las fotos (o mapas de bits) son simplemente otro tipo de objeto en
la pgina. Puedes arrastrar y soltar fotos en la pgina de tu explorador, y luego puedes
redimensionarlas, girarlas, copiarlas y moverlas como cualquier otro objeto. Puedes
ajustar la transparencia, incluso la transparencia con gradacin, difuminar los bordes y
cortar y recortar formas extradas de fotos con gran facilidad. la opcin de
transparencia te deja mezclar, combinar o crear fotos compuestas.
www.magix.es
Trabajar con fotos 329

Donde en otros programas deberas usar capas, en MAGIX Web Designer 11


Premium cada objeto est sobre su propia capa y, tambin con cada objeto de la
pgina, puede traerlo hacia el frente o hacia atrs de otros objetos.

Grupos de foto
Si editas una foto con alguna herramienta, como la HERRAMIENTA DE OJOS ROJOS
INTEGRADA , la foto se agrupa con otros objetos que modifican la imagen de alguna
forma. Por ejemplo, con la HERRAMIENTA DE OJOS ROJOS , las formas de elipse que se
utilizan para modificar las reas de ojos rojos de la foto se agrupan con la foto en s
misma. Esto se llama GRUPO DE FOTO y lo vers en la lnea de estado cuando
selecciones una de estas fotos modificadas.

Al igual que un grupo usual, el grupo mantiene a la foto unida con los dems objetos
que se aadieron para modificarla, pero las HERRAMIENTAS DE FOTO y otras
herramientas lo tratan como si fuera una foto usual. En general, los grupos de foto se
colocan automticamente dentro de un objeto de ClipView, que recorta los objetos
que superponen los bordes de las fotos hasta los lmites de la foto misma. Por ello,
cuando seleccionas un grupo de fotos en la lnea de estado generalmente muestra
que has seleccionado un "grupo de foto recortado". Consulta el apartado Clipview (en
la pgina 140) de Manejo de objetos para obtener informacin sobre clipviews.

Diferencias entre los grupos de foto y las fotos:


Los grupos de fotos renen una foto simple y algunas ediciones vectoriales.
Puedes arrastrar una foto por su forma de corte en la HERRAMIENTA DE RELLENO
pero no puedes hacer lo mismo con los grupos de fotos (selecciona dentro y
mueve la foto base o haz clic derecho para abrir el men contextual y
seleccionar los objetos recortados y luego arrstralos en la herramienta de
seleccin).
Algunas operaciones convertirn los grupos de fotos en fotos.

Si quieres convertir un grupo de fotos en un objeto de foto comn, puedes usar


HERRAMIENTA > OPTIMIZAR FOTO para hacerlo. Pero ten en cuenta que esto es
destructivo y que luego no podrs modificar ninguna de las ediciones que aplicaste a
la foto. Otras operaciones, como la modificacin de tamao con contenido y el
contone, tambin convierten grupos de foto en fotos planas porque estas operaciones
no pueden preservar la estructura del grupo de foto. Cuando un grupo de foto debe
convertirse de esta forma, aparece primero un mensaje de advertencia.
330

Importacin de fotos
MAGIX Web Designer 11 Premium es compatible con una muy amplia gama de tipos
de fotos o mapas de bits, incluyendo JPEG, PNG, TIFF e imgenes RAW de cmaras
digitales, as como muchos tipos ms. El trmino "mapa de bits" es el trmino general
que abarca todos los tipos, pero intercambiable con la palabra "foto".

El modo ms fcil 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 .

Al importar fotos de alta resolucin (cualquier imagen con ms de 1.920 pxeles de


alto o ancho) en un documento web (incluyendo presentaciones), MAGIX Web
Designer 11 Premium cambia automticamente el tamao de la foto para ajustarlo al
tamao de pantalla HD, sin preguntar si deseas importarla con una resolucin menor.
Para un documento web, aun con el tamao reducido, debera haber ms que
resolucin suficiente en tus fotos para resultados de alta calidad en tu pgina web,
por lo que raramente es necesario importar imgenes de cmaras digitales con su
resolucin completa para usar en la web.

Sin embargo, si ests importando una foto grande en un documento animado, MAGIX
Web Designer 11 Premium te preguntar si deseas importar una versin de menor

www.magix.es
Trabajar con fotos 331

resolucin de tus fotos. Si el documento incluir muchas fotos, es posible que quieras
utilizar esta opcin de resolucin reducida. De lo contrario, si contiene varias fotos, el
tamao del archivo de diseo ser mucho ms grande de lo que debera ser (porque
contiene una copia de cada una de tus fotos) y es posible que no dispongas de
memoria suficiente en tu equipo para cargar, editar y exportar tu documento.

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 foto (desde el Explorador de Windows o desde la
galera de mapas de bit) hasta una foto existente, esta se reemplazar pero
mantendr el mismo contenedor o tamao de frame. Esto facilita la sustitucin de
fotos en plantillas. Puedes usar la HERRAMIENTA DE RELLENO para ajustar el tamao, la
posicin y el ngulo de la foto dentro de su contorno. Esto no es vlido para
documentos de foto (en la pgina 351), donde al soltar una foto en la pgina 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 rotacin
que la foto anterior. Esto es til para cuando ajustes manualmente la escala o rotacin
de un relleno y luego quieres sustituir la imagen por otra que tenga la misma relacin
de aspecto.

Si existen mltiples copias de la misma foto en una pgina, en el mismo grupo suave,
por ejemplo, una pequea vista en miniatura y una versin ms grande en una capa
popup, cuando haces clic y arrastras para reemplazar, todas las copias de la foto de
ese grupo suave se reemplazarn con la foto nueva.

Sustitucin de mltiples fotos en simultneo


La mayora de las plantillas web incluidas en la GALERA DE DISEOS te permitir
reemplazar varias imgenes al mismo tiempo, si arrastras y sueltas muchos archivos
de imagen desde el Explorador hasta el lienzo. O utiliza la opcin ARCHIVO >
IMPORTAR y selecciona varias imgenes en el dilogo de archivo (Ctrl+clic aade la
seleccin actual, Shift+clic te permite seleccionar un rango de archivos).

Las fotos entrantes se utilizan para sustituir las imgenes en el documento. De la


misma forma que cuando importas fotos individuales, se te preguntar si deseas
importar versiones de tamao reducido, si tus fotos son muy grandes. La sustitucin
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
sustitucin contina a partir de la siguiente foto sin reemplazar. As, puedes llenar
rpidamente el diseo con tus fotos.
332

Si importas ms fotos de las que pueden acomodarse en la pgina actual, tambin se


sustituirn las fotos de las siguientes pginas con las fotos entrantes restantes. Si
todava quedan fotos entrantes, la pgina actual se duplica todas las veces que sea
necesario para acomodar todas tus fotos.

Esto significa que puedes crear rpidamente una pgina web con una galera de tus
fotos. Simplemente escoge una plantilla de galera de la GALERA DE DISEOS y luego
importa todos los archivos de fotos que desees. La pgina se copia todas las veces
que sea necesario para que entren todas tus fotos. Asegrate de escoger la opcin de
tamao reducido si importas muchas fotos.

Utilizacin de fotos como relleno


Tambin puedes usar cualquier mapa de bits como relleno para cualquier forma de
dibujo. Simplemente arrastra el archivo sobre la forma (que puede ser de tu sistema
de archivos, o de las Galeras de mapas de bits o de rellenos), y presiona "Shift" antes
de soltar. Esto sustituir el color de relleno existente por un mapa de bits, adaptado al
objeto. Puede usar otra vez la HERRAMIENTA DE RELLENO para ajustar el tamao, la
posicin y el ngulo.

Tamao de foto inicial


Cuando importas una foto grande, su tamao se reduce a HD (1920 x 1080), si es
ms grande, en documentos animados e impresos se te preguntar primero. Su
tamao se modifica a 500 pxeles de ancho en la pgina.

Para reducir el tamao, solamente arrastra desde una de las esquinas usando la
herramienta de seleccin, o introduce un nuevo ancho en el campo de la barra de
informacin de la herramienta de seleccin.

Si reemplazas una foto mediante arrastrar y soltar, entonces la foto se adaptar


exactamente al contenedor, es decir, su tamao y la resolucin depender del tamao
del contenedor.

Copias de memoria cero


Una de las diferencias ms revolucionarias entre Web Designer y otros softwares es
que, cuando copias cualquier foto en la pgina, realmente no realiza una nueva copia
completa de la foto original importada, sino que muestra simplemente otra "vista" de
la imagen original. El motor de renderizacin de Web Designer es lo suficientemente
rpido como para mostrar cualquier cantidad de copias de la misma imagen al vuelo.
Esto te permite ahorrar gran espacio de memoria y reduce drsticamente el tamao
de los archivos.

www.magix.es
Trabajar con fotos 333

Esto no limita lo que puedes realizar con cada copia, puesto que se tratan de forma
completamente independiente. Cada copia no tiene que ser idntica. Puedes editar
cada una como quieras, redimensionndola, girndola, cortndola, colorendola o
aplicndole una amplia gama de efectos de foto y de transparencia. Todo, sin ocupar
espacio en la memoria ni aumentar el tamao del archivo original.

Este ejemplo muestra las copias separadas de la misma imagen, cada una manipulada
de un modo diferente. Cada una conserva la resolucin total del JPEG original
importado, como puedes ver en la imagen de la derecha. La memoria (RAM y el
tamao de archivo) no es superior al tamao de JPEG original.

La galera de mapa de bits


El captulo Manejo de documentos (en la pgina 95) cuenta con informacin general
acerca de las galeras.

La GALERA DE MAPA DE BITS muestra todo los mapas de bits o fotos usadas en
cualquier documento, con la informacin de su tamao de pxeles y el tamao de
archivo.

Puedes abrirla con clic en la barra de galeras, desde el men HERRAMIENTAS >
GALERAS , o con "F11".
334

Este ejemplo muestra la GALERA DE MAPAS DE BITS para el documento de arriba, y


muestra la imagen JPEG original de la joven que es integrada al archivo .web nativo.
Como se menciona anteriormente, todas las copias de esta imagen se muestran
directamente desde el archivo original, y slo se muestra la imagen sola y no las
cuatro variantes que aparecen en la pgina.

Se muestra la siguiente informacin de ayuda acerca de la imagen original:

Nombre de archivo del JPEG original


El tipo de archivo, en este caso un JPEG, y el tamao de archivo, 1.006 K. (Este
es el tamao original del archivo, y tambin cunto lugar de archivo .web
ocupar esta imagen.)
Las dimensiones de pxeles del original, el tamao de megapxeles (en este caso
slo inferior a 2 MP)
La profundidad de color, en este caso "24 bit", a veces se denomina color
verdadero (true color). La imagen Xara es una imagen de 4 bit.
La resolucin original de la imagen, en estos casos 96 dpi
www.magix.es
Trabajar con fotos 335

La GALERA DE MAPAS DE BITS siempre contiene un mapa de bits por defecto, con la
imagen de Xara en gris. 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 tambin
como marcador de posicin.

Como con todas las galeras, puedes arrastrar los objetos de la galera a la pgina para
crear una nueva copia. O puedes seleccionar una imagen en la galera y hacer clic en
uno de los botones superiores. El apartado siguiente muestra detalladamente cmo
utilizar los controles de la GALERA DE MAPAS DE BITS , que en su mayora estn
pensados para usuarios ms avanzados.

Relleno de formas con un mapa de bits


Selecciona la forma en la pgina, luego selecciona el mapa de bits en la galera y haz
clic en el botn de relleno. O bien, arrastra la imagen de la GALERA DE MAPAS DE BITS
y sultala en cualquier forma mientras mantienes pulsada "Shift". Puede ajustar el
tamao, el ngulo, etc. en la HERRAMIENTA DE RELLENO.

Ajuste de una transparencia de mapa de bits


Esto es para los usuarios ms avanzado. Puedes usar cualquier mapa de bits como
una mscara de transparencia sobre cualquier forma rellena o mapa de bits. La
luminosidad del mapa de bits afecta la transparencia del objeto seleccionado. El
tamao de transparencia del mapa de bits, la rotacin y segmentacin pueden ser
controlados desde la barra de informacin de la HERRAMIENTA DE TRANSPARENCIA (en
la pgina 252).

Eliminar imgenes de la galera


Cuando eliminas un mapa de bits de la pgina, permanece en la GALERA DE MAPAS DE
BITS . Cualquier mapa de bits no utilizado ser eliminado del archivo cuando sea
guardado y vuelto a abrir. Sin embargo puedes eliminar cualquier mapa de bits
seleccionndolo y apretando el botn SUPRIMIR . Si el mapa de bits es usado en el
documento, ser sustituido en el mapa de bits estndar de Xara.

Ajuste del fondo de la pgina para un mapa de bits


Selecciona el mapa de bits en la galera y haz clic en el botn FONDO. Se abrir un
men que te permite elegir entre la configuracin del FONDO DEL TABLERO DE DIBUJO o
el FONDO DE PGINA . Cuando configuras el fondo del tablero de dibujo, si la imagen es
ms estrecha que la pgina, se asume que quieres tener la imagen en mosaico para
rellenar por completo el fondo del navegador. De otra forma la imagen se aplica como
un nico segmento. Puedes cambiar esta configuracin haciendo clic derecho en el
tablero de dibujo y buscando en el submen "Fondo de tablero de dibujo".

Tambin puedes aplicar una imagen en el fondo sin usar esta galera: tan solo haz clic
en la imagen y consulta las opciones en el men contextual.
336

Consulta Fondos de pgina web (en la pgina 311) para ms informacin.

Guardar
Seleccionando el mapa de bits y haciendo clic en GUARDAR , guardars 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.

Propiedades del mapa de bits


El botn PROPIEDADES te mostrar la informacin del mapa de bits seleccionado en la
galera. Esta opcin tambin te da la posibilidad de evitar que se suavicen las
imgenes cuando se amplan los mapas de bits. Por lo general, todos los mapas de
bits se suavizan cuando se amplan, o se agrandan con el zoom en la pantalla. Hay un
cuadro de seleccin en el dilogo de Propiedades para desactivar esta caracterstica
para que puedas ver cada pxel cuando amplas con el zoom.

Esto tambin proporciona la informacin de las propiedades de animacin del mapa


de bits. Esto es realmente aplicable slo a imgenes GIF animadas.

ANIMACIN GIF:

RETARDO (el tiempo en que el frame es dejado en pantalla)


RESTAURAR: La configuracin de GIF animado fija lo que ocurre entre cada frame
de un GIF animado. Nada significa que no se efecta ninguna accin. Numerosos
navegadores interpretan que esto significa lo mismo que la opcin Conservar
como es. Conservar como es visualiza los frames uno encima de otro - esto deja
visibles muchos frames en un stack si algunos son transparentes. Algunos
navegadores borran la animacin antes de reproducir ms loops, mientras que
otros no. El fondo restaura el rea cubierta por el color de fondo del GIF (blanco,
por lo general). Restaurar anterior restaura el rea cubierta por el frame
dejndola como era antes de visualizarse el frame. Esto algunos navegadores lo
interpretan como borrar la imagen y mostrar el fondo, mientras que otros
navegadores lo interpretan como mostrar el frame encima del frame anterior.
Como los navegadores lo interpretan de modo diferente, debers experimentar
hasta conseguir los resultados deseados.

Archivos JPEG integrados


Los archivos JPEG estn enormemente comprimidos en relacin a su estado original,
siendo hasta 10 veces ms pequeos que la imagen original. En el ejemplo de arriba,
la imagen original no comprimida requiere ms de 7 MB de memoria, pero en la
GALERA DE MAPAS DE BITS slo tiene 1 MB. Una reduccin muy significativa. Por eso
las imgenes JPEG son el tipo de archivo estndar para la fotografa digital y para
utilizar en Internet.

www.magix.es
Trabajar con fotos 337

Cuando arrastras y sueltas un archivo JPEG (o usas las opciones de men "Abrir" "o
Importar") el JPEG original es almacenado en el documento, y esto es lo que queda
guardado en el archivo .xar cuando guardas tu documento.

Es importante entender como se diferencia de otras herramientas de grficos, tanto


en software de dibujos vectoriales como de programas de edicin de fotos. Otros
productos descomprimirn la imagen y almacenarn la imagen no comprimida
"cruda" en la memoria y el archivo nativo cuando lo guardas en disco. Lo que no es
ms que una copia completa de la imagen original cruda, como se menciona
anteriormente. Haz cuatro copias de tu foto y guarda el archivo, y ser cuatro veces
ms grande. En MAGIX Web Designer 11 Premium el archivo no se agranda, no
importa cuantas copias hagas.

Al incrustar el archivo JPEG original en vez de guardar la imagen no comprimida,


existe un ahorro de tamao de archivo mayor a 7:1 comparado con otros programas
de diseo grfico. Al haber cuatro copias completas de la imagen significa, en este
caso particular, que la memoria usada es ms bien 30 veces menor. Por lo tanto,
representa un enorme ahorro de tamao (y de tiempo) en comparacin a otras
herramientas de grficos*.

*Es fcil para comprobar. Importa un JPEG a tu editor de grficos favorito, haz cuatro copias, y
haz algunos pequeos cambios en ellas, colorendolas, rotndolas, o desenfocndolas. Luego,
guarda el archivo nativo y compralo con el tamao del JPEG original, y el equivalente archivo
.Xar. Un archivo .Xar nativo tendr aprximadamente el tamao del JPEG original, no importa
cuntas copias de la imagen sean hechas.

Extraccin del JPEG original


Haz clic derecho sobre cualquier imagen en la GALERA DE MAPAS DE BITS y escoge la
opcin de men GUARDAR para guardar el JPEG original en tu sistema de archivos.

Calidad de visualizacin de fotos


MAGIX Web Designer 11 Premium puede mostrar fotos en uno de cinco niveles de
calidad. Las dos primeras configuraciones, suavizan los pxeles de pantalla para evitar
pxeles 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 imgenes mediante sampleo bicbico. Esto permite ver
CALIDAD (POR las imgenes en la mejor calidad, en particular para imgenes
DEFECTO) grandes de alta resolucin que son altamente reducidas o
ampliadas con zoom.
ALTA CALIDAD Antialiasing activado, pero las imgenes se renderizan lento y con
una calidad baja.
338

COLOR TOTAL Sin antialiasing, por lo que se ven los pxeles individuales. Esto
puede ser til cuando amples con el zoom y necesites ver
claramente los pixeles de la imagen por separado. El
inconveniente es que las imgenes generalmente se ven pobres
cuando reduces o amplas 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 DE pasos de una transicin. MAGIX Web Designer 11 Premium no es
TRANSICIN compatible con transiciones pero los archivos .xar importados
pueden contenerlas.
CONTORNO Slo se ven los contornos de los objetos. Esto es til para buscar y
seleccionar objetos que son difciles de ver debido a otros objetos
que se encuentran delante o detrs de ellos.

Hay un control adicional que te permite frenar todo antialiasing o suavizado de


imagen en imgenes que son reducidas o ampliadas con zoom. En otras palabras, en
vez de una imagen suavizada, vers todos los pixeles cuando amples con zoom. Abre
la GALERA DE MAPAS DE BITS y haz clic derecho sobre la imagen y seleccione
"propiedades". En el dilogo desactiva la seleccin de "Suavizar al aumentar tamao".
Ahora, no importa la calidad que utilices para la imagen (y todas las copias), siempre
se visualizarn los pxeles no suavizados cuando amples o reduzcas con zoom.

Atencin: Si usas el control de Desenfoque/Enfoque de la Herramienta de fotos,


entonces las imgenes tienen que ser mostradas en la calidad mxima. As que si
piensas que la calidad de visualizacin ha dejado de funcionar, es casi seguro que
has desenfocado o enfocado la imagen con la Herramienta de fotos.

Guardar y exportar fotos


Al seleccionar la opcin GUARDAR siempre se guardar un archivo .web nativo. Para
guardar una foto como JPEG, PNG u otro tipo de archivo de imagen, es necesario usar
la opcin EXPORTAR o el shortcut "Ctrl + Shift + E".

Hay dos conos disponibles en la barra superior que son shortcuts para
guardar la seleccin como JPG o PNG. Estos se encuentran en la barra
desplegable cuando colocas el cursor sobre el icono de exportacin
HTML.

Recomendamos guardar las fotos como JPEG (a veces llamado JPG), ya que ofrece la
mejor relacin tamao/calidad.

Cuando exportas JPEG o PNG, aparece la opcin CONFIGURACIN en el dilogo


Guardar. Al seleccionar esta opcin se obtienen muchas alternativas de exportacin

www.magix.es
Trabajar con fotos 339

avanzadas y se pueden comparar diversos ajustes e incluso tipos de archivos


alternativos como por ejemplo PNG.

Cuando exportas un JPEG, aparece una ventana con una vista previa de exportacin
donde puedes ajustar muchas opciones de exportacin y comparar ajustes
alternativos o tipos de archivo alternativos como PNG.

La ventana de vista previa de exportacin te permite ajustar el tamao, la resolucin,


la calidad del JPEG y, adems, seleccionar entre 3 tipos de archivos de exportacin
alternativos. Los valores por defecto deberan ser los correctos para todas las tareas
comunes y puedes pulsar simplemente el botn de exportacin para guardar tu foto.

Aspectos para tener en cuenta al exportar:

Primero selecciona el objeto o los objetos que quieres exportar


El tamao por defecto de la imagen exportada ser del tamao que veas en la
pantalla con el zoom al 100%.

La ventana de Vista previa de exportacin (en la pgina 474) est descrita ms


detalladamente aqu.

Consejo: Puedes controlar la calidad de JPEG en el dilogo configuracin de


exportacin de la pestaa de Opciones. El valor estndar y recomendado es 85%.

El sistema JPEG est diseado de


manera tal que un ajuste de 85 es el
valor ptimo. Te recomendamos que no
guardes archivos JPEG con calidad del
100%, ya que los resultados son
visualmente idnticos a la calidad del
85%, slo que el tamao de archivo y
uso de memoria aumenta drsticamente
sin beneficio alguno.

Se puede bajar la calidad por debajo de 85 para que se vea ms rpido la pgina en la
web. La ventana de vista previa muestra la calidad de cualquier valor que selecciones.

Consejo: Si crees que vas a seguir editando la imagen exportada, como cambiar el
tamao de la imagen, te recomendamos que guardes el archivo .web tambin. Esto
preservar la imagen original sin prdida de calidad.
340

Ejemplo para cambiar el tamao de una foto y guardarla


en JPEG.
este proceso es muy rpido y simple:

Suelta tu foto en MAGIX Web Designer 11 Premium (en una pgina en blanco o
en la barra de ttulo)
Ve a la herramienta de seleccin, arrastra el control deslizante de una esquina
para cambiar el tamao de la imagen, o introduce el ancho o la altura requerida
en los campos correspondientes de la barra de informacin. El tamao de la
imagen ser correcto cuando est al 100%.

Haz clic en el botn "Exportar seleccin como JPG" en la barra superior.


Introduce un nombre de archivo, haz clic en el botn CONFIGURACIN si
necesitas controlar la compresin o simplemente haz clic en GUARDAR .

Para guardar la imagen en formato PNG, repite los mismos pasos de arriba pero
selecciona la opcin PNG en el men desplegable del tipo de archivo.

Atributos de la edicin de fotos


Todas las ediciones realizadas con la HERRAMIENTA DE FOTO (en la pgina 353), como
cambiar el brillo, el contraste, el color, los valores de enfoque o desenfoque, sern
guardadas sobre la foto como atributos de Web Designer.

Tal como puedes cambiar el color de una forma o de una lnea 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 edicin no destructiva). Otra
forma de explicar esto es que MAGIX Web Designer 11 Premium slo guarda una lista
de las ediciones aplicadas a tu foto; puedes cambiar, quitar o aadir nuevas ediciones.
Siempre podrs recuperar la foto original sin retocar, incluso luego de haber cambiado
el brillo, haberle cambiado el tamao, o incluso luego de haberla cortado o recortado.

Los atributos se pueden copiar y pegar entre distintos objetos. Esto no slo se aplica
solamente a los atributos tradicionales como el color o el ancho de la lnea, tambin
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 funcin "copiar/pegar atributos".

Esto tambin vale para todos los otros atributos de la foto, como color y ancho de
lnea, coloreado de foto (contoning), sombras, etc.; todos estos atributos se pueden
copiar de una foto a otra usando la misma tcnica.

www.magix.es
Trabajar con fotos 341

Editar el contorno de las fotos


Puedes utilizar la herramienta de EDICIN DE FORMA para ajustar directamente el
contorno exterior de una foto. De la misma manera, puedes aplicar contornos para
cualquier forma, sombra, etc.

Utilizando la HERRAMIENTA DE EDICIN DE FORMA


puedes achicar o agrandar la forma de sus
esquinas. Este ejemplo tambin tiene un contorno
negro y una sombra suave. Para restaurar la
imagen a la forma rectangular original, selecciona
"deshacer corte" en el modo de corte en la barra
de informacin de la HERRAMIENTA DE FOTOS .
Cuando se editan las fotos de esta forma, se
tratan como si fueran una forma vectorial normal
con relleno de mapa de bits. Por eso puedes usar
las herramientas de edicin para crear una lnea o
cambiar la forma, e incluso puedes usar la
HERRAMIENTA DE RELLENO para ajustar el tamao,
el ngulo y la posicin del relleno de la foto
adentro de la forma.

Recortar fotos
La forma ms fcil de recortar una foto es
arrastrarla mientras te encuentras en la
HERRAMIENTA DE OPTIMIZACIN o tambin
puedes arrastrar uno de los 8 controles
deslizantes alrededor de la foto para ajustar el
borde de cualquier foto seleccionada.

Para un manejo ms avanzado del recorte, selecciona el BOTN CLIP en la


herramienta de fotos de la barra de informacin, ya que te permitir definir la
relacin de aspecto, as como usar el recorte numrico preciso.

Asimismo encontrars un botn Deshacer corte que borra cualquier rectngulo de


corte y restaura la imagen original.

Una funcin importante es que la herramienta de recorte es realmente dinmica, en


otras palabras, el recorte no es destructivo y el borde del recorte puede ajustarse
luego para mostrar partes ocultas de la foto. Si realmente quieres cortar, es decir,
realizar un recorte destructivo que elimine las partes invisibles de una imagen, utiliza
la funcin Optimizar foto.
342

Recortar fotos con una mscara


Si quieres crear formas de foto no rectangulares o cortar partes de una foto, utiliza
una mscara. Primero selecciona la foto y luego la HERRAMIENTA DE MANO ALZADA de
la barra desplegable de herramientas de mscara.

Usa la "Herramienta de mano alzada" para dibujar una forma de mscara


cerrada alrededor de la parte de la foto que quieres recortar.

Cambia a HERRAMIENTA DE SELECCIN y selecciona la foto bajo la mscara o elimina la


seleccin (presiona "Esc"). Ahora al copiar ("Ctrl+C"), se copiar solamente la parte
sin mscara de la foto en el bfer de pegado. Ahora pulsa "Eliminar" y la parte sin
mscara se eliminar. O presiona "Ctrl+C" para cortar. Tambin puedes usar la
mscara para aplicar operaciones de forma "ARREGLO" > "COMBINAR " con ella.

Consulta el captulo Mscaras (en la pgina 267) para ms informacin acerca del
uso de mscaras.

Herramienta Capturar pantalla


Esta herramienta ofrece algunas ventajas con respecto al mtodo mencionado
anteriormente, incluyendo la opcin de capturar el cursor del ratn en la imagen.
BRELA CON HERRAMIENTAS > CAPTURA DE PANTALLA.

www.magix.es
Trabajar con fotos 343

REA DE PANTALLA: aqu puedes escoger el rea de pantalla que quieres capturar.
Puedes capturar toda la pantalla, la ventana activa en su totalidad o simplemente el
contenido de la ventana activa sin el borde de ventana.

OPCIONES: aqu puedes escoger si deseas incluir el cursor en la captura de pantalla.


Tambin puedes decidir si deseas capturar una sola imagen o mantener la
herramienta activada durante la sesin para poder realizar capturas consecutivas
cada vez que pulsas el shortcut asignado.

La seccin de resultado te permite escoger la forma en que manejars la imagen de


pantalla. Por defecto, se insertar directamente en el diseo actual de MAGIX Web
Designer 11 Premium. Como alternativa puedes tambin guardar cada captura de
pantalla como archivo BMP (mapa de bits de Windows) o PNG en cualquier carpeta.
Los archivos creados se denominarn "ScreenCapture", "ScreenCapture1,
"ScreenCapture2" y as sucesivamente. Selecciona la CARPETA DE DESTINO para los
archivos con el botn EXPLORAR...

Puedes definir casi cualquier combinacin de teclas (Shift, Alt, Ctrl + tecla) para
activar la captura de pantalla. Simplemente haz clic en el campo de shortcut y
despus selecciona la combinacin de teclas deseada, p. ej. "Ctrl+S". El shortcut
escogido aparecer en el campo de shortcut. Si se superpone con cualquier otro
shortcut definido en MAGIX Web Designer 11 Premium recibirs una advertencia en
la parte inferior del dilogo, pero esto no importar si estn abiertas otras ventanas al
tomar capturas de pantallas. Presiona RESTAURAR para regresar al shortcut
seleccionado previamente.

En vez de utilizar una tecla de shortcut para tomar la captura de pantalla, puedes usar
la opcin TIEMPO. Esto es til en los casos en que cualquier movimiento en el teclado
cambia la pantalla que quieres capturar, como en el caso de un consejo de
herramienta que es probable que desaparezca cuando presiones una tecla. Selecciona
la opcin de tiempo e introduce el valor de retraso en segundos. La captura de
pantalla se tomar automticamente una vez que haya transcurrido el tiempo
especfico. El temporizador comenzar ni bien hagas clic en el botn INICIAR .

Al pulsar el botn INICIO se cerrar el dilogo de captura de pantalla y se activar el


shortcut de sistema. Cambia a la ventana que quieres capturar y pulsa la combinacin
deseada o espera que el tiempo pase si has escogido la opcin de tiempo. La captura
de pantalla se toma y se inserta en Web Designer o se guarda en el archivo segn la
opcin escogida. Si has seleccionado "Capturar siempre" puedes tomar capturas de
pantalla adicionales si presionas la combinacin nuevamente (esto no est disponible
con la opcin de tiempo). Para desactivar la herramienta si has escogido esta opcin,
cierra MAGIX Web Designer 11 Premium para cerrar la sesin. Como alternativa,
vuelve al dilogo de captura de pantalla y escoge la opcin "una sola vez" y toma una
captura de pantalla ms.
344

Colorear fotos
Selecciona una foto, haz clic en la lnea de colores y elige en el men para aplicar un
color continuo 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.

Si haces clic en LNEA DE COLORES ,


puedes seleccionar cualquier color,
sea ste el color claro o el oscuro del
tono continuo (contone). Tambin
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 ests
editando en el color claro u oscuro.
Puedes restaurar el color original de la foto haciendo clic en el pequeo cuadrado
blanco cuadriculado del extremo izquierdo de la lnea de colores, o haz clic derecho
sobre la foto y selecciona la opcin "restaurar color".

Si quieres colorear una foto que est dentro de un grupo, pulsa "Ctrl+click" para
seleccionarla dentro del grupo y aplica el tono continuo como se describe arriba.

Cambiar el tamao, rotar y reposicionar la foto


dentro de su propio marco
MAGIX Web Designer 11 Premium trata las fotos como si fueran un rectngulo 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

www.magix.es
Trabajar con fotos 345

contorno se puede editar completamente. Entonces, cuando recortes o edites el


contorno de la forma, no estars afectando al relleno.

Las fotos y los mapas de bits de la pgina siempre estn "contenidos" dentro del
contorno de una forma. No slo puedes cambiarle la forma al contorno, sino que
tambin puedes ajustarle el tamao, el ngulo y la posicin de la foto dentro de su
marco (frame) utilizando la HERRAMIENTA DE RELLENO . Selecciona la foto, ve a la
HERRAMIENTA DE RELLENO y podrs 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.
Para cambiar el tamao, arrastra el cursor sobre una de las puntas de las flechas,
alejndote 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.

En la barra de informacin de la herramienta de


relleno puedes seleccionar la opcin de "mosaico
repetido" y la imagen se llenar con un mapa de bits
segmentado. Si arrastras los controles deslizantes de
relleno, podrs cambiar las dimensiones de la
segmentacin dentro de la imagen o realizar una
rotacin. Si realizas la misma accin pero con una
imagen gigante con muchos pxeles, podrs ver la
velocidad con la que trabaja MAGIX Web Designer
11 Premium.
346

Si cuentas con un grupo de fotos en vez de un objeto comn 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 comn 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 podrs
modificar ninguna de las ediciones que aplicaste a la foto.

Enderezar horizonte
Es muy fcil enderezar el horizonte torcido de una imagen. Slo 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 bsicamente son flechas que muestran la
extensin del relleno en el interior de la forma.
Arrastra uno de los extremos de las flechas para cambiar el tamao de la
imagen o para rotarla.

La siguiente imagen tiene un paisaje con un horizonte torcido, que ha sido creada con
la funcin de "creacin de panormicas".

Utilizando la herramienta de relleno, arrastra una de las flechas para rotar o cambiar el
tamao 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.

www.magix.es
Trabajar con fotos 347

Ver una foto ampliada en su tamao completo


El botn ZOOM A 1:1 en la barra de informacin de la herramienta de foto ajusta el
zoom de forma que la imagen seleccionada se muestre en su tamao completo, en
donde cada pxel de la imagen corresponde a un pxel de pantalla. Esto es til si
quieres editar una imagen que se ha reducido en la pgina, pero quieres verla en su
tamao completo mientras trabajas en ella.

Darle el tamao completo a una foto


El botn AMPLIAR FOTO A 100% en la barra de informacin de la herramienta de foto
hace que la foto seleccionada actualmente se ample al tamao completo de la
pgina. As, una foto que se ha reducido a 500 pxeles de ancho, pero cuyo original
tena 1000 pxeles de ancho, se ampliar nuevamente a su valor original. Si el zoom
del documento es 100%, significa que cada pxel de la imagen corresponder a un
pxel en la pantalla.

Optimizacin de fotos y mapas de bits


Con la resolucin siempre en aumento y el tamao de archivo de los JPEGs de cmara
digital, si tienes un documento que contiene muchas imgenes, el tamao del archivo
se puede agrandar muy rpidamente Por ejemplo, un documento multipgina que
contiene 20 JPEGs de mxima resolucin, cada uno de los 5 Mb producirn un
archivo .xar de ms de 100 Mb*.

Adems, estas fotos por lo general estn innecesariamente en alta resolucin. Reducir
una foto de una cmara digital de 8 megapxeles a 5 cm (2 pulgadas) de ancho en la
pgina, tendr como resultado una imagen de 1500 dpi. Pese a que una imagen de
alta resolucin tiene una mayor flexibilidad para la impresin (y puedes ampliarla o
agrandar pequeas partes de la foto), esta es mucho ms alta de lo necesario
respecto a lo requerido incluso para la impresin comercial de mayor calidad, y
todava ms en el caso de grficos web o productos HTML.

Si seleccionas una pequea parte de la imagen o cortas solo una pequea parte de tus
fotos, podra haber grandes partes de imagen oculta fuera del rea visible. Este
"recorte en vivo" es una gran funcin para la edicin, ya que puedes retornar el
recorte, alterar el tamao, la posicin o la escala y todo permanece lo ms ntido
posible. Sin embargo, puede que quieras eliminar las partes invisibles en los
documentos finalizados.
348

La imagen de mariposa para recortar todava mantiene adjunto el resto de la foto. Si


vas a la HERRAMIENTA DE RELLENO podrs ver esto fcilmente si cambias el tamao
del relleno dentro del contorno. Por lo tanto, las partes de la imagen fuera de la
mariposa probablemente sern superfluas para tu documento final.

Haz clic derecho sobre una foto y escoge OPTIMIZAR FOTO o "HERRAMIENTAS" >
"OPTIMIZAR FOTO..".. Este dilogo permite realizar tres funciones importantes:

Eliminar partes invisibles de las fotos


Reducir la resolucin de las fotos
Convertir PNG o mapas de bits en JPEG incrustados para optimizar el tamao de
archivo

Si seleccionas esta opcin del men para cualquier mapa de bits, se abrir el dilogo
OPTIMIZAR FOTO .

www.magix.es
Trabajar con fotos 349

Para imgenes JPEG la configuracin por defecto hace que la foto se optimice a JPEG
192dpi (resolucin de pantalla retina) en el tamao que aparece en tu pgina, o 96 dpi
si la opcin retina no est activada (pestaa PGINA WEB del dilogo PROPIEDADES
WEB ). En general, esto es lo que quieres de las fotos de tu sitio web.

Al optimizar imgenes diferentes a JPEG, Web Designer decidir automticamente si


es mejor optimizarla a PNG o JPEG, segn la propia naturaleza de la imagen. Puedes
hacer clic en el botn CONFIGURACIN de este dilogo, si quieres cambiar cualquier
configuracin, como el formato de imagen utilizado para la optimizacin, la calidad
JPEG, etc.

Puedes cambiar la resolucin utilizada en este dilogo, si escoges el tamao fsico que
deseas para la imagen optimizada (ancho/alto en pxeles) o si introduces un dpi
diferente (p. ej. 150 dpi si quieres calidad de impresin).

Si escoges la opcin de dpi, el valor que introduzcas se recuerda y se convierte en el


valor por defecto para la sesin actual. Tambin puedes mantener la resolucin actual
de la foto si seleccionas ACTUAL de la lista PPI. Tambin puedes escoger optimizar
como PNG (produce imgenes ms grandes pero mayor calidad para grficos e
imgenes de texto) o cambiar la calidad usada para la optimizacin JPEG (mayor
calidad significa tamao ms grande). Si tu foto se corta, solo la parte visible de la
imagen se preserva en la imagen optimizada. Para imprimir, una resolucin de 150dpi
ofrece muy buenos resultados, pese a que 300dpi ofrece la impresin comercial de
mejor calidad (la mayora no pueden distinguir entre 150dpi y 300dpi y , sin embargo,
300dpi requiere cuatro veces ms memoria o espacio de archivo).

Advertencia: "OPTIMIZAR FOTO" es una operacin "destructiva". Cuando guardes el


documento, las partes de la imagen que se hayan quitado se perdern, y la
resolucin se cambiar definitivamente (obviamente, puedes deshacer los cambios
mientras tengas el archivo abierto durante la edicin).
350

Puedes optimizar mltiples fotos al mismo tiempo si quieres que todas tengan el
mismo dpi. Selecciona las fotos que quieras optimizar y luego elige la opcin
OPTIMIZAR como se ha descrito ms arriba. Si tus fotos tienen diferentes
dimensiones, la opcin para optimizar segn el tamao de pxeles estar desactivada
y debers escoger el dpi requerido.

O puedes utilizar "HERRAMIENTAS" > "OPTIMIZAR TODAS LAS IMGENES" para


optimizar todas las imgenes de mapas de bits de tu documento en una sola
operacin. El proceso de optimizacin convertir las imgenes grandes que no sean
JPEG en imgenes JPEG ms pequeas, si el programa decide que la imagen puede
almacenarse y exportarse en JPEG sin una prdida de calidad inaceptable.

Ten en cuenta que despus de optimizar la foto, la foto original sin optimizar
permanece en la GALERA DE MAPAS DE BITS . Esto significa que todava se encuentra
en la memoria y que el espacio de almacenamiento requerido en tu diseo no se
habr reducido. Tan solo guarda tu diseo y vulvelo a cargar despus de optimizar
para eliminar las imgenes originales ms grandes.

Convertir objetos o dibujos a mapas de bits


Puedes crear fcilmente un mapa de bits a partir de un objeto, o partir de una parte de
tu dibujo, incluso si estn compuestos por otros mapas de bits. Los mapas de bits
pueden tener cualquier tamao o resolucin y tambin pueden tener transparencias.
Tambin puedes crear mapas de bits con un nmero reducido de colores, que puede
ser til para el uso en la web.

Crear un mapa de bits a partir de objetos:

1. Selecciona el/los objeto/s en la pgina


2. Haz clic derecho y selecciona CREAR UNA COPIA DE MAPA DE BITS o selecciona
CREAR UNA COPIA DE MAPA DE BITS en el men ARREGLO (Ctrl + Shift + C).
3. En el dilogo, selecciona la profundidad de color, el tamao y otras opciones.

Para obtener un mximo de calidad, selecciona una profundidad de color de un color


verdadero, o si quieres tener transparencia, selecciona "true color + alpha" (la
transparencia alpha es un trmino tcnico). Puedes crear mapas de bits con menos
colores si seleccionas una profundidad de color de 256 colores o menos. Esto te
permite tener control sobre las opciones de "dithering" y paleta. Estas opciones se
describen en la seccin Exportar mapas (en la pgina 474).

Ten en cuenta que siempre se crean imgenes en formato PNG (el tipo de imagen
con ms calidad). Pero recuerda que las fotos a color completo requieren mucha
memoria y espacio de archivo. Utiliza la opcin de optimizacin de foto para
convertir las imgenes en PNG en imgenes JPEG integradas para reducir el tamao
del archivo.

www.magix.es
Trabajar con fotos 351

Documentos fotogrficos
A veces es mejor trabajar con una foto sola, en vez de con un "objeto" en una pgina.
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 fotogrfico de varias maneras:

Arrastra una foto desde tu explorador hacia la barra de ttulo o la barra de


herramientas de la ventana de Web Designer.
Selecciona "Archivo > Abrir" y selecciona una foto.
Crea un documento fotogrfico en blanco seleccionando "ARCHIVO > NUEVO >
FOTO VACA ".

Los documentos fotogrficos de Web Designer se diferencian de los documentos


tradicionales en lo siguiente:

No hay una pgina en blanco visible. Las dimensiones de pgina se ajustan a las
dimensiones de la foto, amplindose automticamente si aades cualquier otro
objeto.
Los documentos fotogrficos tienen una cuadrcula de 1 pxel por defecto. La
funcin para ajustar la cuadrcula tambin viene activada. Esto hace ms fcil y
preciso tu trabajo de corte y recorte de reas.
El tablero o pasteboard (el rea alrededor de la foto) tiene un color ms oscuro.
Esto facilita la distincin rpida entre los documentos fotogrficos y los
documentos de dibujo.
El zoom del documento est ajustado de modo tal que la foto cubra toda la
pgina, y la herramienta de fotos se abrir automticamente.
Si sueltas documentos fotogrficos adicionales sobre la foto principal, estars
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) permitindote ver la
imagen entera.
Las imgenes no se reducen a un tamao de 500 pxeles 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%, vers el tamao total de
la imagen.
Las opciones de suavizado de pxeles se han cambiado. Por defecto, se aplica el
modo de visualizacin en alta calidad. Esta es la mejor forma de ver imgenes
reducidas y las imgenes 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 pxeles estar desactivado.

En lo que respecta a todas las otras funciones, los documentos fotogrficos funcionan
como los otros documentos normales de MAGIX Web Designer 11 Premium. Puedes
usar cualquiera de las herramientas de dibujo y de texto como lo haces
habitualmente. Si quieres crear un documento fotogrfico con un tamao especfico,
puedes cambiar el lienzo o el tamao de la pgina seleccionando "HERRAMIENTAS >
OPCIONES y la pestaa "PGINA " para introducir las dimensiones.
352

En documentos fotogrficos, se permitirn dos controles extra. Los botones ANTERIOR


y SIGUIENTE cambiarn a la imagen anterior o siguiente en la carpeta desde donde se
abri la imagen. Esto cerrar la imagen actual, por lo que se te pedir que guardes el
archivo.

Edicin de archivos de fotos


Puedes utilizar MAGIX Web Designer 11 Premium para editar fcilmente tus fotos
JPEG y guardar el archivo modificado. A diferencia de la mayora de los editores de
fotos, puedes realizar repetidas ediciones sin prdida de calidad, a pesar de que el
formato JPEG es un formato con prdida. Esto es porque MAGIX Web Designer 11
Premium puede guardar tus ediciones sin prdida, 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
11 Premium en la lista "Abrir con". La foto se abrir como un documento de foto. 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 11
Premium tambin guarda tu foto en su formato .xar 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 extensin .web. El archivo .xar incluye tu foto
original sin las modificaciones aplicadas y, por supuesto, detalles de tus ediciones.

Si posteriormente cargas el archivo JPEG modificado para continuar editndolo,


MAGIX Web Designer 11 Premium buscar en la carpeta principal para ver si hay un
archivo .xar disponible para esta foto. De ser as, se abrir este archivo .xar en vez de
tu archivo JPEG y podrs continuar editando desde donde has dejado. Cuando vuelvas
a guardar, el archivo JPEG se sobrescribir nuevamente y el archivo .xar se actualizar
y guardar en la carpeta principal.

Por supuesto, si no quieres sobrescribir tu archivo JPEG con los cambios, puedes usar
la opcin 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 GALERA DE
MAPAS DE BITS , haces clic derecho sobre la foto y escoges la opcin GUARDAR .

www.magix.es
La herramienta de fotos 353

La herramienta de fotos

Introduccin
Con la herramienta de fotos podrs recortar fotos o ajustar sus niveles de brillo y
nitidez de forma muy directa y rpida, incluso con las imgenes con muy alta
resolucin. Esta herramienta provee:

Auto-optimizacin con un clic de tus fotos; esto es particularmente bueno para


imgenes subexpuestas.
Ajuste manual de brillo, contraste, saturacin de color, temperatura del color de
la foto y desenfoque o nitidez de las fotos.
Corte de imgenes. Se trata de 'corte en vivo', lo que significa que podrs cortar
y deshacer el corte todas las veces que quieras.
Una funcin de "comparacin" con un solo clic para comparar rpidamente los
cambios respecto al original.
Funcin sencilla para copiar/pegar fotos que aumenta las ediciones entre
imgenes diferentes.

Todas estas operaciones son interactivas con actualizacin en vivo. Cuando ajustas
los valores, la imagen se actualiza al instante. Son tambin no destructivas, lo cual
significa que tu imagen original no se cambia y siempre puedes hacer o deshacer
cualquier ajuste. Tambin est disponible una herramienta para ojos rojos.

Ventajas de la herramienta de fotos


Esta herramienta tiene tres beneficios principales:

1. Es no destructiva.
2. Es muy rpida, aun para imgenes muy grandes.
3. La edicin fotogrfica no requiere memoria.

Para ms informacin respecto a estos beneficios en comparacin con otras


herramientas de edicin de fotos, consulta el captulo Manejo de fotos.

Utilizacin de la herramienta de fotos


Para acceder a las HERRAMIENTAS DE FOTO, mueve el cursor del ratn sobre el
icono de la cmara en la barra de herramientas principal en la parte izquierda
de la ventana. Aparecer una barra desplegable con iconos para cada una de
las herramientas de foto.
354

Si ests en la herramienta de seleccin, haz doble clic en una foto para cambiar a la
HERRAMIENTA DE FOTO .

Los primeros seis botones de la barra de informacin 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 ms adelante.

Funciones comunes para fotos


Los siguientes botones estn disponibles en la barra de informacin cuando te
encuentras en las herramientas para fotos Optimizacin, Clip, Ojos rojos o Cambio de
tamao con contenido.

Controles para rotar 90

Los dos iconos de rotacin 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 11 Premium, la foto se
carga en un nuevo documento de foto porque Web Designer presupone que quieres
editar o ver la foto misma, ms 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 informacin 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 travs 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.

Consulta Trabajar con documentos para ms informacin en Documentos


fotogrficos.

www.magix.es
La herramienta de fotos 355

Zoom 1:1
Selecciona una foto y haz clic en el botn zoom 1:1.

El factor del zoom para el documento est establecido de forma que la foto
seleccionada se muestre 1:1 (un pxel de la foto es igual a un pxel de la pantalla).
Utiliza esta opcin si quieres trabajar en una foto a tamao completo en un
documento en donde has reducido el tamao de la foto.

Ampliar foto a 100%


La funcin AMPLIAR FOTO A 100% hace que la foto seleccionada actualmente
se ample al tamao completo de la pgina.

As, una foto que se ha reducido a 500 pxeles de ancho, pero cuyo original tena
1000 pxeles de ancho, se ampliar nuevamente a su valor original. Si el zoom del
documento es 100%, significa que cada pxel de la imagen corresponder a un pxel
en la pantalla. Si el zoom del documento es 100%, significa que cada pxel de la
imagen corresponder a un pxel en la pantalla.

Herramienta de optimizacin
Haz clic en el cono de la cmara para ingresar a la HERRAMIENTA DE
OPTIMIZACIN .

Con la HERRAMIENTA DE FOTOS podrs recortar fotos o ajustar sus niveles de brillo y
nitidez de forma muy directa y rpida, incluso con las imgenes con muy alta
resolucin. Esta herramienta te provee:
Optimizacin automtica con un clic de tus fotos, especialmente til para fotos
subexpuestas.
Ajuste manual de brillo, contraste, saturacin de color y desenfoque o nitidez de
las fotos.
Corte de imgenes. Se trata de "corte en tiempo real", lo que significa que
podrs cortar y deshacer el corte todas las veces que quieras.
Correccin de la dominante de color o el balance de blancos.
Una funcin de "comparacin" con un solo clic para comparar rpidamente los
cambios respecto al original.
Funcin copiar/pegar fotos sencilla que aumenta las ediciones entre imgenes
diferentes.

Todas estas operaciones son interactivas con actualizacin en tiempo real Mientras
ajustas los valores, la imagen se actualiza de forma instantnea. Son tambin no
destructivas, lo cual significa que tu imagen original no se cambia y siempre puedes
hacer o deshacer cualquier ajuste.
356

Los primeros seis botones de la izquierda de la barra de informacin (no se ilustran arriba) son
comunes a todas las herramientas y estn descritos anteriormente

Optimizacin automtica
Brillo
Contraste
Saturacin de color
Temperatura del color
Control de tonos
Desenfoque/Enfoque
Comparacin con el original

En esta herramienta puedes ajustar el brillo, el contraste, la saturacin, la


temperatura, el tono, el desenfoque y el enfoque. Puedes introducir directamente
valores a los campos de texto o usar la barra deslizante emergente para ajustar los
valores de forma interactiva.

Pop-ups deslizantes
Los pop-up deslizantes pueden ser utilizados de una o dos maneras:

1. Haz clic y suelta la flecha pop-up. El control deslizante se quedar en pantalla y


podrs ajustar los valores todas las veces que quieras, solo tienes que arrastrar
el control deslizante. Otra alternativa es que mantengas presionado el botn del
ratn sobre el control y puedes usar la rueda del ratn para realizar pequeos
ajustes hacia abajo o hacia arriba. El control deslizante desaparecer cuando
hagas clic en otro lugar del documento.
2. O haz clic y mantiene presionado el botn del ratn y arrastra el cursor sobre la
barra deslizante para ajustar el valor. Cuando sueltes el ratn el pop-up
desaparecer. Esta forma de trabajar es ms rpida porque solo tiene que hacer
clic y soltar para cambiar los valores.

www.magix.es
La herramienta de fotos 357

Auto-optimizacin
Si haces clic en el botn "OPTIMIZAR" se realizar un anlisis general del brillo y el
contraste de la imagen y la imagen se optimizar automticamente para obtener una
mejor imagen. Esto es muy efectivo para las imgenes oscuras subexpuestas. Luego
de haber aplicado la auto-optimizacin a una foto podrs ajustar los valores que han
sido asignados con la optimizacin, usando los controles que se encuentran a la
derecha del botn "optimizar". Si haces clic sobre el botn "COMPARAR" se restaurar
la imagen original, y si haces clic otra vez sobre el mismo botn volvers a los valores
de optimizacin anteriores.

Brillo/Contraste/Temperatura del color/Saturacin/Tono


Brillo Contraste Saturacin Temperatura del
color

La imagen se actualiza al instante mientras ajustas los valores. La saturacin cambia


la intensidad del color. Si le colocas el valor mnimo -100, la imagen ser en blanco y
negro. El manejo de la temperatura del color hace que una imagen sea ms "clida" o
"fra". El control de tono se aplica a un tinte de color particular de la imagen y te
permite controlar la intensidad del color seleccionado.

Tono

El regulador de tono controla la intensidad


del color seleccionado.

Desenfoque / Enfoque

Este control desenfoca las imgenes 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 imgenes. Y aplica
la opcin de "enfoque" solo a imgenes que han sido reducidas mucho.

Uso de mscaras o regiones


Si deseas optimizar nicamente un rea especfica de tu foto, utiliza primero las
herramientas de regin de foto (en la pgina 267) para marcar el rea de la foto que
deseas modificar. O utiliza una herramienta de mscara para proteger las partes de la
foto que no quieras modificar.
358

Luego cambia a la herramienta de optimizacin y realiza las modificaciones. La


mscara o regin se utiliza para limitar las partes de la foto a las que se aplica la
operacin de optimizacin y luego obtendrs una regin dentro del grupo de fotos.
Cuando esta regin est seleccionada dentro del grupo de fotos, su contorno se
mostrar como "hormigas en movimiento". Para seleccionar una regin dentro de un
grupo de fotos, pulsa Ctrl y haz clic sobre ella o seleccinala desde la galera de
pginas y capas (en la pgina 85) en donde aparecer como un regin dentro de un
grupo de fotos (en la pgina 329). Si observas la lnea de estado tambin podrs darte
cuenta de si hay una regin o mscara seleccionada dentro de un grupo de fotos.

Ten en cuenta que casi siempre debers aplicar difuminacin a una regin dentro de
un grupo de fotos para suavizar sus bordes y mezclar el efecto de optimizacin de
forma ms fluida en la foto. Las regiones con bordes duros son tiles en muy pocas
ocasiones. Para ms detalles consulta la herramienta de difuminacin. Puedes aplicar
y ajustar la difuminacin en la regin dentro del grupo de fotos una vez que
selecciones dentro, o puedes aplicar difuminacin a la mscara o regin antes de
utilizar el efecto de optimizacin.

Foto izquierda con sombra parcial; foto derecha optimizada con brillo y difuminacin para
suavizar y mezclar el contorno.

Si quieres hacer ajustes a la forma de una regin dentro de un grupo de fotos, vuelve a
la herramienta de mscara o regin y realiza los cambios asegurndote de que la
regin o mscara est seleccionada (vers el contorno como "hormigas en
movimiento"). Mientras te encuentras en las herramientas de regin o mscara,
puedes seleccionar las regiones dentro de un grupo de fotos con Ctrl + clic.

Si quieres trabajar en regiones seleccionadas dentro de un grupo de fotos sin


ver el contorno en movimiento, puedes desactivar temporalmente los
contornos con el botn correspondiente de la barra de informacin de las
herramientas de regin y mscara.

Los contornos volvern a activarse una vez que elimines la seleccin o vayas a otra
foto o documento.
www.magix.es
La herramienta de fotos 359

En MAGIX Web Designer 11 Premium las herramientas de mscara no se muestran


en la barra de herramientas principal al inicio. Si quieres usar estas herramientas,
puedes encontrarlas en la paleta de botones. Para ms detalles consulta Regiones de
foto y mscaras (en la pgina 267).

Comparar y restaurar el original


El botn COMPARAR puede ser utilizado para restablecer todos los valores de las
herramienta OPTIMIZAR que vienen por defecto, y as vuelve la foto a su estado
original. Pulsa el botn comparar por una segunda vez y recuperars tus valores
previos. Por lo tanto, puedes utilizar el botn "Comparar" para cambiar rpidamente
de tu foto editada a la foto original para ver los efectos de los cambios que has hecho.

Debido a que todos los cambios de optimizacin o de niveles son "no destructivos", si
pulsas "Comparar" simplemente estars eliminando los atributos de optimizacin, y
de esta forma volvers a la imagen original. El botn "Comparar" puede ser utilizado
en cualquier momento despus de haber modificado la imagen.

Recortar o cortar imgenes


El modo ms fcil de cortar una foto es arrastrar el cursor sobre la foto o a lo largo de
la misma habiendo seleccionado la HERRAMIENTA DE OPTIMIZACIN . El corte se
efecta al instante de soltar el ratn. La foto cortada resultante tiene controles
deslizantes de clip alrededor de la misma donde puedes ajustar posteriormente los
bordes del recorte.

Esta es una operacin no destructiva, lo que significa que puedes ajustar el rea de
corte despus 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
rectngulo. Por ello se llama recorte y no corte, aunque tiene el mismo objetivo.
360

Herramienta de corte
Como alternativa, puedes entrar en la HERRAMIENTA DE CORTE si seleccionas el icono
de corte de la barra de informacin para fotos. Esto suministra una gama de opciones
de recorte adicionales. Puedes introducir un valor exacto de pxeles y escoger entre
varias relaciones de aspecto de recorte.

Para un corte interactivo y algunas opciones ms en relacin con las


relaciones de aspecto, entra en el MODO DE CORTE con el botn HERRAMIENTA
DE CORTE .

La barra de informacin se ver as:

Mientras arrastras el cursor sobre la foto, el rectngulo de corte se ver resaltado.


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 regin cortada de lugar si la arrastras
con el cursor.
Selecciona el botn CORTAR o haz doble clic dentro del rea de corte para
realizar un corte.

Podrs darte cuenta si una foto ha sido cortada o no si miras la barra de estado que
dir "foto cortada".

Borrar
Presiona el botn "BORRAR" , o haz clic fuera del rea de corte marcada para vaciar el
rectngulo de corte actual.
www.magix.es
La herramienta de fotos 361

Regla de los tercios


Existe una norma fotogrfica que ayuda a componer fotografas y que se denomina la
"Regla de los tercios". En pocas palabras significa que debes colocar los objetos
importantes de tus fotos en tercios del ancho de la imagen. Por ejemplo, en general es
mejor colocar el horizonte en el tercio inferior de la imagen que justo en el centro.
Cuando arrastras una regin de clip a travs de tus lneas de fotos, se muestran las
lneas en los tercios a lo ancho y a lo largo de la imagen para ayudarte a posicionar los
objetos para seguir esta norma de composicin.

Consejo: busca "Regla de los Tercios" en Google para obtener ms informacin.

Deshacer corte
Pulsa el botn DESHACER CORTE sobre cualquier foto cortada seleccionada para
restaurar la foto original. Esto restaura el rectngulo de corte, que puedes ajustar o
borrar si haces clic fuera de l. El botn DESHACER CORTE en la HERRAMIENTA DE
CORTE cambiar el contorno de cualquier foto cortada, y tambin las formas creadas
arbitrariamente que contengan un relleno de mapa de bits, a un contorno de
rectngulo de la foto completa o a un mapa de bits utilizado como relleno. Puede ser
que tengas que seleccionar el botn "Borrar" para borrar el rectngulo de recorte (o
haz clic fuera del rectngulo).

Ajustando la regin cortada


Debido a que el botn "Deshacer corte" restaura el rectngulo de corte (mostrando el
rea de afuera ms oscura), puedes realizar finos ajustes a una foto cortada). Solo
selecciona la foto, pulsa el botn "Deshacer corte" y ajusta los lados del rectngulo de
corte como requieras. Haz doble clic dentro de la foto para cortarla otra vez.

Ancho / Alto
Luego de dibujar un rectngulo de corte puedes introducir valores directamente
dentro de los campos de ancho y alto en la barra de informacin fijar valores exactos
a las dimensiones del rectngulo de corte.

Bloquear aspecto
Selecciona el recuadro "BLOQUEAR ASPECTO" para mantener la relacin de aspecto del
rectngulo de corte mientras lo arrastras. Los botones de radio a la derecha del check-
box determinan la relacin de aspecto utilizada. Selecciona "ACTUAL" para mantener
la relacin de aspecto de la foto antes de cortarla. Ten en cuenta que el rectngulo de
corte cambia automticamente entre la forma orientacin de paisaje y retrato a
medida que arrastras el cursor hacia una esquina del rectngulo. Entonces si lo
arrastras lateralmente, tiende a crearse un corte con orientacin paisaje. Si lo
arrastras hacia abajo, entonces se crear una regin cortada con orientacin retrato.
362

Las relaciones de aspecto ms comunes para recortes predeterminados disponibles


son 4:3 (mayora de cmaras digitales para consumidores y televisores y monitores
de estilo antiguo), 3:2 (filmadoras tradicionales y cmaras digitales SLR de alta
calidad) y 16:9 (relacin de aspecto para televisores con pantalla ancha).

Puedes anular la opcin "bloquear aspecto" si pulsas "Ctrl" mientras arrastras el ratn.
De modo que si ests arrastrando un rectngulo de corte (o ajustando uno) sin la
relacin de aspecto bloqueada, mientras ests pulsando "Ctrl" entonces se mantendr
el aspecto de la ltima relacin de aspecto seleccionada. De la misma forma, si tienes
la opcin "bloquear aspecto" activada y presionas "Ctrl", se desbloquear
temporalmente el aspecto bloqueado.

Cortar en documentos fotogrficos


En el modo foto hay una cuadrcula de 1 pxel que se aplica a la foto (cuando tiene 96
dpi, la resolucin por defecto) y el rectngulo de corte se ajustar a la cuadrcula. Esto
hace muy fcil realizar un corte con una exactitud de pxel por pxel. Para realizar
ajustes muy precisos o del tamao de 1 pxel se recomienda operar en modo foto y
acercarse con el zoom para poder ver los pxeles ms claramente. Ver Documentos
fotogrficos (en la pgina 351) para ms informacin.

Notas para la herramienta de foto


1. Puedes seleccionar diferentes fotos mientras usas las HERRAMIENTAS DE FOTO
con solo hacer clic sobre ellas. Tambin puedes seleccionar fotos que se
encuentran en un grupo.
2. Si haces clic y arrastras mientras te encuentras en la HERRAMIENTA DE
OPTIMIZACIN , 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 botn DESHACER CORTE en la HERRAMIENTA DE CORTE cambiar el contorno de
cualquier foto cortada, y tambin las formas creadas arbitrariamente que
contengan un relleno de mapa de bits, a un contorno de rectngulo de la foto
completa o a un mapa de bits utilizado como relleno. Es posible que tengas que
seleccionar el botn "Borrar" para borrar el rectngulo de recorte (o haz clic
fuera del rectngulo).
4. Todas las operaciones para las fotos pueden deshacerse. A diferencia de las
fotos tradicionales o de los editores de pxeles, aqu la foto original no se altera
hasta que optimices la foto para hacer que los cambios sean permanentes. 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 edicin son no destructivas y
sin prdidas) y sin que el tamao del archivo se modifique.
5. Todas las opciones de la HERRAMIENTA DE FOTO, incluyendo el control de niveles,
operan sobre los objetos rellenos con mapas de bits, y tambin sobre las fotos
individuales.

www.magix.es
La herramienta de fotos 363

6. Si abres una foto en MAGIX Web Designer 11 Premium (con ARCHIVO ->ABRIR ),
se abrir como un documento de foto. Despus de editarla, puedes sobrescribir
la foto, si escoges la opcin ARCHIVO->GUARDAR ("Ctrl+S"). Tambin 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 captulo Manejo de
fotos para ms informacin.

La herramienta de ojos rojos


La herramienta de OJOS ROJOS te permite eliminar rpidamente los efectos
de ojo rojo de los rostros de las fotos.

Haz clic en el smbolo anterior para ingresar en el modo de ojos rojos. Luego:
Ampla la vista de los ojos rojos, con la HERRAMIENTA DE ZOOM (EN LA PGINA 80)
o simplemente utiliza Ctrl+rueda del ratn.
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 crculo.
Repite los pasos anteriores para cada ojo rojo de tu foto.
364

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. Despus, puedes
pulsar la tecla eliminar para quitar el parche.

Tambin puedes ir a la herramienta QuickShape y editar el parche del ojo rojo


seleccionado de la misma forma en que editas las elipses normales en tus
documentos.

Por lo tanto, de ser necesario puedes dar forma elptica a los parches de ojos rojos si
esto lo coloca mejor en el rea de ojo rojo. Lee la ayuda de la Herramienta
QuickShape para informacin sobre su utilizacin para editar elipses. Sin embargo,
para la mayora de las fotos los parches circulares por defecto son suficientes para
eliminar los efectos de ojos rojos.

Al borde de la elipse de ojo rojo se le aplica una difuminacin de 3 pxeles, para que
no se produzca un corte duro en el rea de donde se elimina el ojo rojo. Puedes
ajustar fcilmente este valor de difuminacin si seleccionas la elipse de ojo rojo
(como se ha mencionado anteriormente) y ajustas el valor de difuminacin con el
control de difuminacin principal (del lado derecho de la barra superior), de la misma
forma que editas el valor de difuminacin de las formas usuales.

Despus de aplicar la herramienta de ojo rojo, los parches de ojo rojo estn 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, necesitars pulsar Ctrl
mientras haces clic sobre la elipse (lo que se llama una operacin "seleccionar
dentro"). Lee el captulo sobre Trabajar con fotos para informacin acerca de los
Grupos de foto (en la pgina 329).

Haz clic sobre el botn LIMPIAR TODO en la barra de informacin de la herramienta de


ojos rojos para eliminar todas las elipses de ojo rojo de la foto seleccionada
actualmente.

www.magix.es
La herramienta de fotos 365

Efectos en tiempo real


Introduccin
NOTA: esta herramienta est incluida en la versin de 64 bits de Web Designer
Premium por razones legales, para documentos que usan efectos de sombra o de
difuminacin de mapas de bits, los cuales funcionan en la versin de 64 bits. La
versin de 64 bits no es compatible con los plug-ins normales de 32 bits de
Photoshop y los efectos de 64 bits no estn incluidos en el producto.

Los efectos en tiempo real son efectos de mapas de bits que pueden aplicarse a un
objeto utilizando herramientas del "Editor de imagen de Xara" o plug-ins de Adobe
Photoshop. La lista de efectos en vivo disponibles se ve en la barra de informacin
de la herramienta de Efectos en vivo con un clic sobre el botn "Nuevo".

Aadir un nuevo efecto


Lista de efectos aplicados en orden
Editar el efecto seleccionado
Resolucin del efecto en tiempo real
Eliminar el efecto actual
Bloquear/desbloquear efectos
Eliminar todos los efectos
Configurar para buscar plug-ins

Aplicar un efecto en vivo


Para aplicar un efecto en vivo:

1. Selecciona el objeto o los objetos de forma usual.


2. Selecciona la herramienta de EFECTOS EN VIVO.
3. Haz clic sobre el botn NUEVO en la parte izquierda de la barra de informacin.
Esto mostrar una lista dividida en partes de los efectos disponibles. El primer
conjunto de efectos de la lista son los efectos del XARA PICTURE EDITOR . El
segundo conjunto son los efectos suministrados por las herramientas incluidas
en MAGIX Web Designer 11 Premium DIFUMINACIN y SOMBRA. El tercer
conjunto son los efectos de plug-ins "nuevo estilo" de Photoshop y el ltimo
conjunto son los efectos "estilo antiguo" de Photoshop (lee ms adelante para
obtener una explicacin de estos diferentes tipos).
366

4. Selecciona de la lista el efecto que quieres aplicar.


5. Esto mostrar un dilogo o herramienta del efecto. Puedes ajustar varios
controles y generalmente podrs ver una vista previa del efecto en el dilogo.

Una vez que has finalizado, haz clic sobre ACEPTAR para volver a MAGIX Web
Designer 11 Premium.

Editar formas
Si aplicas un efecto en vivo a una forma o texto, podrs seguir editando el objeto sin
problema. Cada ve que lo editas, el efecto en vivo se vuelve a aplicar
automticamente al objeto. Para efectos bloqueados, esto no es posible y debes
eliminar el efecto usando el botn ELIMINAR de la barra de informacin de los efectos
en vivo, despus editar la forma y finalmente volver a aplicar el efecto.

Bloquear efectos
Cuando cambias el tamao o giras un objeto que tiene aplicado un efecto en vivo,
Web Designer lo considera una edicin y vuelve a generar el efecto. Sin embargo, es
posible que esto no sea lo que quieres, por lo que a veces es til bloquear un efecto.

Los plug-ins de "viejo estilo" de Photoshop ya estn BLOQUEADOS al aplicarlos. Esto


significa que la capa subyacente no puede editarse. Tambin puedes bloquear un
efecto en vivo para que permanezca fijo al cambiar el tamao o girar el objeto, como
si estuvieras girando o cambiando el tamao de un mapa de bits.

Como ejemplo de esto, imagina un plug-in que siempre aplica ondas horizontales. (El
efecto en vivo "Televisin" muestra algo similar). Aplica este efecto a la forma y vers
una lnea horizontal sobre ella. Si despus giras la forma, querrs que las ondas giren
tambin? De ser as, bloquea el efecto antes de la rotacin. Si, por el contrario, quieres
que el efecto de ondas horizontales se vuelva a aplicar en el rectngulo girado, dejar el
efecto sin bloquear.

Cuando un efecto en vivo est bloqueado, el efecto gira con el objeto (izquierda).

Si envas los diseos a otras personas para que los carguen pero no tienen los plug-in
utilizados en el diseo, no vern los efectos aplicados. Para evitar este problema,
puedes bloquear los efectos. Los efectos bloqueados se guardan como mapas de bits
en el documento, de forma que todos pueden verlos, incluso si no tienen los plug-ins
que generaron los efectos.
www.magix.es
La herramienta de fotos 367

Para bloquear un efecto, selecciona el objeto o los objetos y despus haz


clic en el smbolo del CANDADO de la barra de informacin de los EFECTOS
EN VIVO . Para desbloquear un efecto que has bloqueado de esta forma,
vuelve a hacer clic sobre el CANDADO.

Todava puedes modificar la resolucin del efecto. Es posible que quieras utilizar una
resolucin mayor para la impresin que si solamente quieres trabajar en pantalla.

Resolucin de los efectos en vivo


Para la utilizacin en pantalla y web, se recomienda no modificar la resolucin por
defecto de 96 DPI (la misma que la resolucin de pantalla). Si necesitas una imagen
con resolucin mayor, por ejemplo, si quieres imprimir o exportar un mapa de bits de
alta resolucin, puedes aumentar este valor a 150 DPI o ms. Cuanto mayor sea la
resolucin, ms tiempo se necesitar para generar o volver a generar el efecto
(porque tiene que trabajar con un mapa de bits mucho ms grande) y ms memoria
se necesitar.

Puedes configurar la resolucin de un efecto en vivo como "automtico" en vez de


escoger un valor DPI fijo. Con esta configuracin, el efecto se volver a generar
automticamente cuando sea necesario y con la resolucin ms apropiada. Por
ejemplo, si imprimes un diseo que contiene efectos en vivo, cualquier efecto
configurado como AUTOMTICO se regenerar en la resolucin de impresin si
todava no se encuentra en esa resolucin o en una mayor. En un diseo grande con
muchos efectos, esto puede hacer que la impresin sea ms lenta porque cada efecto
debe volver a generarse en alta resolucin.

Puedes cambiar la resolucin que se utiliza para renderizar los efectos en la pestaa
EFECTOS Y PLUG-INS del dilogo de OPCIONES . El valor por defecto es 96 DPI. Una vez
que modificas esta configuracin, todos los efectos que apliques posteriormente se
realizarn con la resolucin seleccionada. Cambiar la configuracin no modificar la
resolucin de los efectos que ya se han aplicado.

Para ms informacin sobre el dilogo de opciones, lee el captulo Personalizacin


de Web Designer.

Para cambiar la resolucin de un efecto que ya se ha aplicado, utiliza el control de DPI


en la barra de los EFECTOS EN VIVO.

Guardar y transferir archivos


Cuando transfieres un archivo a otra persona, no podr ver los efectos aplicados,
salvo que tenga instalados los mismos plug-ins (esto es similar a los problemas con
las fuentes: el receptor necesita tener instaladas todas las fuentes utilizadas en el
diseo para ver una representacin precisa del texto en el documento). Para
garantizar que el receptor pueda ver los efectos de tu diseo, bloquea los efectos
antes de guardar.
368

Cuando est cargado un diseo que utilice efectos que no estn instalados, se emitir
un aviso para notificar al usuario que es posible que el diseo no se vea de la forma
pensada por el diseador.

Dado que los efectos bloqueados se guardan como mapas de bits en el archivo Xara,
los archivos sern ms grandes que para los efectos en vivo sin bloquear.

Copiar efectos en vivo


Para ms informacin sobre copiar y pegar, lee el captulo Trabajar con objetos (en
la pgina 111).

Puedes copiar efectos en vivo en tu diseo desde un objeto a otro utilizando PEGAR
ATRIBUTOS , de la misma forma que copias todos los dems atributos. Simplemente
selecciona el objeto con el/los efecto/s que quieres copiar y escoge Edicin > Copiar.
Despus selecciona el objeto u objetos a los que quieres copiar los efectos y escoge
Edicin > Pegar atributos.

Ten en cuenta que no puedes copiar efectos de plug-in de "viejo estilo" de Photoshop
de esta forma porque esos efectos no tienen la capacidad de volverse a aplicar.

Cambio de tamao teniendo en cuenta el


contenido
En Web Designer la herramienta CAMBIO DE TAMAO TENIENDO EN CUENTA EL
CONTENIDO no se presenta en la barra principal desde el inicio. Si quieres usara esta
herramienta puedes encontrarla en la PALETA DE BOTONES.

Para abrir la paleta de botones selecciona BARRAS DE CONTROL... del men VENTANA
y desplzate por la lista hasta el final. Ahora haz clic en la casilla al lado del elemento
PALETA DE BOTONES . (O puedes hacer clic derecho en un rea vaca de cualquier
barra de botones y elegir PALETA DE BOTONES del men desplegable).

Si quieres usar esta herramienta a menudo puedes moverla fuera de la "Paleta de


botones" arrastrndola sobre la barra de herramientas. (Mantn "Alt" pulsado,
arrastra el botn y sultalo sobre un icono de la barra de herramientas).

Se puede arrastrar el botn de cambio de tamao teniendo en cuenta el contenido


sobre la herramienta de foto desplegable si te aseguras de que est abierto antes de
que sueltes el botn, pero ten en cuenta que no se situar en esta posicin cuando
vuelvas a reiniciar el programa.

Web Designer incluye ahora la posibilidad de ampliar las fotos con una nueva tcnica
que conserva las proporciones de los aspectos clave de la misma.

www.magix.es
La herramienta de fotos 369

El ojo humano es particularmente sensible a los cambios en la proporcin de aspecto


de los objetos usuales y la mayora de las personas puede reconocer cuando algo es
incorrecto en las imgenes que se han extendido o reducido levemente.

Aqu hay una foto de ejemplo del famoso


arco Torii en Japn. Claramente el arco es el
objeto principal de esta foto.

Aqu la foto se ha
extendido utilizando
el mtodo de
extensin normal de
la HERRAMIENTA DE
SELECCIN . Aun con
esta extensin
moderada, es obvio
que las proporciones
del arco se han
distorsionado de
forma incorrecta.

Extender utilizando "Cambio de tamao teniendo en cuenta el contenido". Sigue pareciendo


perfectamente natural. Las proporciones se han conservado, aun con esta extensin extrema, que
es dos veces ms ancha que el original. La lnea de la costa extendida contina pareciendo
natural.
370

Preparar tu foto
La funcin de modificacin del tamao con contenido forma parte de las herramientas
de FOTO.

Selecciona tu foto y de la barra desplegable de la herramienta de foto,


selecciona el BOTN DE CAMBIO DE TAMAO CON CONTENIDO. El extremo
derecho de la barra de informacin muestra ahora un conjunto de botones.

Selecciona una foto, ve a herramienta de foto y la barra de informacin debera tener


el aspecto siguiente;

Primero haz clic en el botn PREPARAR para preparar la foto para el cambio de
tamao. Esto inicia un anlisis de la foto para calcular qu partes de una imagen se
pueden estirar y qu partes se deben mantener. Este proceso puede tomar un tiempo
dependiendo de la resolucin de la foto y de cuntos procesadores tenga tu PC.

Para una imagen con una resolucin realmente alta, se recomienda reducir la
resolucin de imagen si no necesitas la resolucin mxima. Haz esto antes de
seleccionar los botones Preparar. Para reducir la resolucin de tu foto, selecciona el
botn OPTIMIZAR e introduce un ancho en pxeles o una resolucin en dpi en le
dilogo. El tamao de la imagen en la pgina no cambiar, solo cambia la resolucin o
el nmero de pxeles de la foto. Despus de preparar la imagen aparecern nuevas
flechas de modificacin de tamao en los lados de la foto. Simplemente tira de stas
para ampliar o reducir la imagen en la direccin deseada.

Optimizar
Las fotos que han sido preparadas para permitir la modificacin de tamao con
contenido tienen datos adicionales guardados junto a las mismas para permitir
ajustes posteriores. Cuando guardas un documento, estos datos adicionales tambin
se guardan, por lo que puedes cargar este documento y continuar ajustando el ancho
y la altura sin necesidad de realizar otra operacin Preparar.

Cuando termines de modificar el tamao de la foto, se recomienda que "fijes" los


cambios utilizando la funcin Optimizar. Esto convertir la imagen ampliada de nuevo
en una imagen JPEG incrustada, a cualquier resolucin, y as se guardar el tamao de
archivo de forma sustancial.

Restablecer
Si haces clic en el botn "Restablecer", se restablece la imagen volviendo a su estado
original y borrando cualquier reduccin o cualquier mscara que se pueda haber
aplicado.

www.magix.es
La herramienta de fotos 371

Uso de mscaras con la funcin "Cambio de tamao


teniendo en cuenta el contenido"
Si utilizas la herramienta de mscara podrs tener mayor control para evitar que las
reas protegidas de la foto se distorsionen. Las reas con mscara no se
distorsionarn de ninguna forma. Lee el captulo Mscaras (en la pgina 267) para
ms informacin acerca de las mscaras. Igualmente encontrars a continuacin un
resumen sobre la uso de mscaras con el cambio de tamao teniendo en cuenta el
contenido.

Para proteger una o ms reas de la foto contra la distorsin:

1. Selecciona una de las herramientas de mscara de la barra desplegable


HERRAMIENTAS DE MSCARA y selecciona la parte o partes de la foto que quieres
proteger.
2. Ahora ve a la herramienta "Cambio de tamao teniendo en cuenta el contenido"
y haz clic en la foto.

Ahora, cuando uses el botn PREPARAR , esta rea estar protegida contra la
distorsin. Es posible que necesites seleccionar la foto para habilitar el botn
PREPARAR .

Nota: puedes enmascarar ms de la mitad de la imagen. La operacin de


preparacin dar un error si pruebas esto.

Ajustar una mscara o aadir una nueva mscara


No puedes aadir una mscara a una imagen que ya has extendido. Si deseas aadir
una nueva mscara o ajustar la existente, tienes las siguientes opciones:

1. Haz clic en el botn RESTABLECER y dibuja una nueva mscara.


2. Haz clic en deshacer la cantidad de veces necesarias para regresar a la mscara
y despus utiliza las herramientas de dibujo normales para ajustar las formas de
la mscara.
3. O bien, antes de seleccionar los botones PREPARAR , copia la mscara al
portapapeles. Si deseas utilizarla posteriormente, RESTABLECE la imagen, vuelve
a activar la HERRAMIENTA DE MSCARA y pega la forma en la capa de mscara.

Existe otra alternativa en la que puedes "fijar" una imagen extendida utilizando la
funcin OPTIMIZAR y despus aplicar la nueva mscara. En la mayora de los casos
esto no es recomendable porque produce resultados de menor calidad que al
restablecer la imagen y aplicar la mscara a la imagen original.
372

Zoom de foto teniendo en cuenta el contenido


Una alternativa al cambio de tamao con contenido en que la foto conserva su
tamao pero el contenido se ampla de forma inteligente. Aqu se ilustra un ejemplo
del efecto.

Utiliza la barra de zoom de la barra de informacin para


controlar el zoom de la foto con contenido.

La imagen conserva el mismo tamao pero el programa detecta y ampla


automticamente el contenido "interesante". Ten en cuenta que esto no es un recorte
de la chica, sino que todos los elementos, nubes y csped que aparecen en el original
estn ampliados en la versin ampliada. El programa detecta automticamente que el
surfer es la "regin de inters" por lo que lo ampla.

Otro ejemplo:

El programa ha determinado que las flores, no las hojas del fondo, son el rea de
inters, por lo que ha ampliado esas partes. Con la funcin de mscara puedes
proteger cualquier parte de la imagen de la distorsin a pesar de que estos dos
ejemplos anteriores no utilizan ninguna mscara.

www.magix.es
La herramienta de fotos 373

Modificacin de tamao con contenido alternativa


Cuando amplas fotos hay dos formas alternativas de modificar la imagen. El mtodo
de arrastrar las flechas de tamao a veces no ofrece un buen resultado con algunos
tipos de imagen.

Sin embargo, si pulsas la tecla Alt mientras arrastras un extremo de los controles
deslizantes laterales en la herramienta de modificacin de tamao con contenido, se
utilizar una escala inteligente diferente con un algoritmo que tendr mejores
resultados en algunas fotos.

Notas acerca de Cambio de tamao teniendo en cuenta el


contenido
Solo puedes comprimir la imagen a la mitad de su ancho o alto inicial
Si guardas un documento con una foto que se ha preparado para el cambio de
tamao teniendo en cuenta el contenido, entonces se guardar la informacin de
cambio de tamao en el documento. La ventaja es que despus puedes reajustar
la foto utilizando la caracterstica para tener en cuenta el contenido. Existe una
gran ventaja de tamao de archivo significante de guardar las fotos de esta
forma.

Creacin de panormicas
MAGIX Web Designer 11 Premium incluye una herramienta que puede unir
hasta 8 fotografas automticamente para convertirlas en una nica
panormica de alta resolucin.
La creacin de una panormica de alta calidad puede tornarse en un proceso muy
tcnico y complejo. En general requiere la utilizacin de un equipo y lentes especiales
para obtener fotografas con la misma alineacin y exposicin. Con la herramienta
para crear panormicas que viene con el MAGIX Web Designer 11 Premium no
necesitars nada de esto y puedes utilizar una cmara digital de uso diario y podrs
crear imgenes panormicas de alta excelente calidad en tan solo un par de minutos.

Caracterstica de esta herramienta:

Clculo automtico de distancia focal para optimizar imgenes y minimizar el


efecto "ojo de pez"
Ajustes: distorsin de barril (automatic barrel), distorsin de cojn (pin cushion)
y efecto vieta
Correccin automtica de exposicin
Deteccin automtica de puntos superpuestos compartidos y unin
"transparente" de lneas
Recorte automtico del resultado final

Para crear una panormica debes sacar una serie de fotos desde un lugar en donde te
encuentres parado en una posicin central con respecto al objeto a fotografiar.
374

Idealmente cada foto se superpondr con la prxima en un 30%, aunque funcionar


con ms o menos superposicin.

El proceso de creacin de una panormica es muy simple:

1. Importa cada una de las fotos. No es necesario que intentes colocar las
superposiciones de forma correcta.
2. Selecciona todas las fotos que desees unir.
3. Haz clic en el botn PANORMICA en la barra desplegable de la HERRAMIENTA DE
FOTO .

Comenzar el proceso de unin (stitching) y continuar como proceso de fondo. Se


abrir una ventana emergente (pop-up) que te indicar el progreso por los distintos
estadios, aunque podrs seguir utilizando el MAGIX Web Designer 11 Premium
normalmente mientras avanza. Cuando est completo el proceso, la imagen
panormica ser importada a la pgina. Ten cuenta que esta no reemplaza las
imgenes originales y puedes borrarlas si no las necesitas.

Tres ejemplos de fotos de un paisaje. Cada foto se superpone con la otra (en este caso un poco
ms de lo necesario).

La imagen panormica final es el resultado de la unin sin transiciones del grupo de fotos
originales.

www.magix.es
La herramienta de fotos 375

Optimizar imgenes
El MAGIX Web Designer 11 Premium siempre une las fotos en alta resolucin, incluso
si has reducido el tamao de la imagen en la pgina. Esta caracterstica es muy
prctica porque produce resultados de mxima calidad con la resolucin ms alta
posible. Pero esto s quiere decir que la composicin de una panormica necesita un
par de minutos. Por eso, a veces es mejor reducir la resolucin de las imgenes antes
de crear la panormica, especialmente si solo necesitas un resultado final con una
resolucin de calidad mediana, como para la web.

Para reducir la resolucin de cualquier imagen, reduce la imagen en la pgina al


tamao requerido y luego utiliza la opcin "HERRAMIENTAS > OPTIMIZAR FOTO". Ten
en cuenta que la herramienta para crear una panormica (panorama stitcher)
funciona mejor con imgenes en alta resolucin (ya que de esta forma le es ms fcil
al programa encontrar los partes que se repiten en las diferentes fotos para realizar la
unin).

Cuando est lista la imagen panormica se guardar como una imagen PNG en el
MAGIX Web Designer 11 Premium. Este es el formato de mejor calidad pero ocupa
mucha memoria y espacio de archivo, especialmente si es una panormica en alta
resolucin. (La GALERA DE MAPA DE BITS te indicar cunto espacio necesita). Por
ello, es recomendable que reduzcas la resolucin de la imagen final y luego la
conviertas a JPG. Para realizar esta accin, utiliza nuevamente la opcin
"HERRAMIENTAS ->OPTIMIZAR FOTO".

Notas:
La herramienta creadora de panormicas (panorama stitcher) requiere que
todas las fotos tengan el mismo tamao y resolucin.
En la medida de lo posible no saques fotos a objetos en movimiento. Esto puede
llegar a confundir el sistema ya que el mismo objeto puede llegar a aparecer en
distintos lugares de la misma foto, o directamente ni figurar.
Intenta mantener el horizonte a la misma altura en cada foto.

Consejo: Si sacas las fotos con estilo retrato puedes obtener una cobertura mxima
vertical.

Actualizaciones para el Panorama Studio


Si as lo deseas puedes descargar una versin ms flexible y poderosa del programa
Panorama Studio. Esta actualizacin te ofrece ms herramientas y controladores para
la creacin de una panormica. Los usuarios de Designer Pro reciben este programa
gratis con el producto en el CD.

Si el Panorama Studio est instalado se te ofrecer la opcin de utilizarlo en lugar de


la versin estndar cuando seleccionas el botn "Panormica".
376

Herramienta de extrusin 3D
La HERRAMIENTA DE EXTRUSIN ofrece una rpida y sencilla posibilidad para convertir
formas 2D y textos en extrusiones 3D con efectos de luz y sombras de alta calidad. Se
basa en la tecnologa de Xara 3D utilizada.

Te permite realizar -arrastrando con el ratn a la pantalla- rotaciones de objetos 3D


en tiempo real, la adaptacin de la profundidad de extrusin y el desplazamiento de
tres fuentes de luz en un espacio 3D alrededor del objeto.

La barra de informacin permite la seleccin de los tipos de bordes que se podrn


visualizar a lo largo de la extrusin. Puedes optar entre una seleccin de ms de 25
tipos de contornos.

Extrudir una forma


Para cambiar una forma 2D a un objeto extrudido 3D, ve a la herramienta de
extrusin en la barra de herramientas principal y simplemente haz clic y
arrastra el objeto para rotarlo dentro del espacio 3D.

Inicialmente se le da una profundidad por defecto a la extrusin. El color del frente de


la forma 3D tendr el color del relleno de la forma original y el color de la extrusin
www.magix.es
Herramienta de extrusin 3D 377

(los costados del objeto 3D) ser del mismo que el color de la lnea de la forma. Luego
de haber creado una extrusin, mueve el cursor del ratn sobre el objeto 3D. Vers
que el cursor ir cambiando de smbolos en la pantalla para indicar qu ocurrir si
haces clic y arrastras a otros puntos del diseo:

Vers esto cuando el cursor del ratn est sobre el frente o el reverso del
objeto. Si haces clic y luego arrastras el ratn, el objeto girar en el espacio
3D.
Esto se puede visualizar cuando el cursor del ratn se encuentra sobre la
extrusin (costados del objeto extrudido). Si haces clic y luego arrastras el
ratn cambiars la profundidad de la extrusin.

Vers esto cuando el cursor del ratn se encuentra sobre la extrusin y


mantengas presionado el botn "Ctrl". Haciendo clic y luego arrastrando el
ratn cambiar el tamao del bisel (ver abajo).

Barra de informacin de Herramienta de


extrusin

Extrusin On/Off
Lista de tipo de barra deslizante
Valor numrico y de barra deslizante para el parmetro seleccionado
Tipo de bisel
Barra deslizante y valor del tamao de bisel
Luces On/Off
Brillo/Mate
Esquina con inglete/Esquina redonda

Puedes ajustar un objeto 3D extrudido de forma manual, directamente en la pgina


como se describe ms arriba, o seleccionndolo y utilizando los controles de la barra
de informacin de la Herramienta de extrusin.

Activar o desactivar (on/off) la extrusin


EXTRUSIN ON/OFF

Una vez que una forma o un objeto ha sido extrudido las modificaciones que se le
pueden realizar al objeto original son limitadas. Por ejemplo, si has extrudido una
378

forma, no es posible editar la forma con la "herramienta de edicin de forma" porque


ya no es ms una forma simple de 2D con la que puedes interactuar. Sin embargo, si
utilizas este control puedes "desactivar" temporariamente la extrusin para poder
visualizar y modificar el objeto subyacente utilizando otras herramientas, antes de
volver a activar la extrusin otra vez. Luego de realizar la modificacin y de activar la
extrusin, la extrusin se volver a aplicar a tu objeto 2D modificado, con todos los
mismos atributos 3D que tena antes de haber desactivado la extrusin.

Ten en cuenta que en algunos casos si cambias mucho la forma del objeto mientras
la extrusin est desactivada (p. ej. cuando transformas un objeto a una forma
completamente diferente), puede ocurrir que los atributos de la extrusin 3D que
hayas aplicado no se haya conservado. En estos casos puedes utilizar PEGAR
ATRIBUTOS para copiar los atributos de una copia de tu extrusin original antes de la
modificacin. Ver Copiando estilos: pegar atributos (en la pgina 139).

Profundidad de la extrusin
La forma ms fcil de ajustar la profundidad de la extrusin es que hagas clic y luego
arrastres el cursor sobre la extrusin como ha sido explicado arriba. Aunque tambin
para realizar ajustes puedes utilizar la barra deslizante, que se encuentra en la parte
izquierda de la barra de informacin de la herramienta de extrusin. Asegrate de
haber seleccionado PROFUNDIDAD DE EXTRUSIN en la lista desplegable a la izquierda
de la barra deslizante (esta es la configuracin que viene por defecto). La profundidad
de la extrusin actual se puede visualizar en el campo numrico a la derecha de la
barra deslizante, tambin puedes introducir al campo tus valores para la profundidad
de la extrusin.

Tipo y tamao del bisel


El tipo de bisel determina el perfil que tendrn los costados, los bordes y las esquinas
de la extrusin 3D. El tipo de bisel que se activa por defecto es el bisel con esquinas
redondeadas. La lista desplegable del tipo de bisel tiene una larga seleccin de
distintos tipos de biseles de las que puedes elegir. Puedes ajustar el tamao del bisel
utilizando la barra deslizante a la derecha de la lista de tipos de bisel. A la derecha de
la lista de tipos de bisel se encuentra un campo numrico que muestra el tamao
actual del bisel, y si quieres puedes introducir otro tamao de bisel.

Un atajo (shortcut) alternativo para ajustar el tamao del bisel es que arrastres el
cursor al costado del objeto 3D mientras mantienes presionado el botn "Ctrl" (con la
herramienta de extrusin activada).

Luces
LUCES ON/OFF

Si activas las luces podrs ajustarlas a tu gusto en el espacio 3D . Hay tres luces a las
que se les puede asignar un color propio y una posicin especfica en el diseo.
www.magix.es
Herramienta de extrusin 3D 379

En este ejemplo, el color del frente de la


forma ser blanco. Pero vers que se ve
verde porque hay una luz verde que ilumina
casi directamente la "cara" (frente) de la
forma.
Podrs optimizar los objetos 3D en tu
diseo ajustando sus colores y las
posiciones de las tres luces.

Detrs del objeto hay una luz de color beige/naranja y otra de color prpura. Ambas
luces generan reflejos en los costados, y si cambias el color o la direccin de las luces
que se encuentran detrs del objeto, los reflejos de las luces tambin cambiarn.

Para mover una luz alrededor del objeto 3D, arrastra la flecha de la luz. Si sueltas la
luz detrs del objeto 3D (ya no la podrs seleccionar), puedes recuperarla utilizando
la barra deslizante de la izquierda en la opcin "Extrudir" de la barra de informacin.
Selecciona uno de los ngulos de luz de la lista desplegable (por ejemplo: "Luz 2
ngulo 1") a la izquierda de la barra deslizante. La luz se mover alrededor del objeto
3D de tu diseo. Las distintas opciones de "ngulos de luz" de esta lista desplegable
te permiten mover todas las luces en cualquier direccin del espacio 3D para lograr
las posiciones que desees. Sin embargo, en general tambin obtendrs buenos
resultados arrastrando las flechas de luz a la pgina.

Para cambiar los colores de las luces, slo tienes que arrastrar los colores de la barra
de colores y soltarlos directamente sobre las flechas de luz. Para editar el color de la
luz con el editor de color, haz doble clic en la flecha de luz que quieres cambiar y el
editor de color se abrir con el color de la luz que hayas seleccionado. Ahora podrs
editar los colores de la luz. Con el editor de color abierto, mientras haces clic en las
diferentes flechas de luz, en el frente (cara) y en los costados de la extrusin, el color
seleccionado de la lista desplegable del editor de color cambia para que coincida con
el de la seleccin; as podrs seleccionar y cambiar rpidamente los diferentes colores
de tu extrusin.

Brillo / Mate
Utiliza este botn para hacer la superficie del objeto 3D ms o menos
reflectante. Con la opcin de brillo y la luz posicionada en el lugar correcto
detrs del objeto, la luz rebotar en los costados del objeto creando un efecto.

Esquina con inglete / Esquina redonda


Puedes elegir entre esquinas CON INGLETE o REDONDAS para tu objeto
3D. Las esquinas con ingletes tienen bordes cuadrados y las redondas
producen bordes redondeados.
380

Texturas y fotos
Cuando extrudas una foto, la foto se ver en el frente (cara) del objeto 3D. Puedes
crear impresionantes efectos 3D de fotos en un par de segundos con tan slo
importar una foto y luego aplicarle una extrusin.

Este efecto se genera cuando realizas una extrusin de una foto y la giras un poco, creando una
copia reflejada por medio de la herramienta de seleccin, y ajustando el ngulo 3D para que
coincidan. Luego se le da una transparencia graduada para crear un reflejo ms oscuro.

Puedes utilizar cualquier foto o textura para el frente de tu extrusin. Puedes importar
tu imagen y realizarle una extrusin como se explic arriba, o arrastra y suelta una
imagen sobre el frente de una extrusin existente mientras presionas "Shift". Se habr
aplicado la foto o la textura en el frente (cara) del objeto extrudido.

Extrudir texto
Puedes realizar una extrusin a un texto de la misma forma que se le puede realizar a
una forma. Haz clic y arrastra el ratn sobre el texto mientras utilizas la herramienta
de extrusin. Como es de esperar, si haces esto a varias palabras esto puede ser un
proceso lento y no es recomendable.

www.magix.es
Herramienta de extrusin 3D 381

Como el texto en general es negro, al menos que cambies el color de la extrusin


resultante tambin ser totalmente negro (esto hace difcil su visualizacin). Por ello,
se recomienda cambiar el color antes de realizar la extrusin (aunque puedes
cambiarlo luego con slo hacer clic en un color).

Como ocurre con otros objetos extrudidos, si quieres editar el texto, slo tienes que
desactivar la extrusin utilizando el botn de la izquierda de la barra de informacin
para realizar extrusiones, edita el texto y luego vuelve a activar la extrusin con el
mismo botn.

Copiar atributos de una extrusin 3D


Puedes copiar y pegar el estilo de una extrusin 3D, de un objeto 3D a otro. Esta
opcin funciona de la misma forma que para todos los atributos en el Web Designer.
Simplemente copia la fuente del objeto extrudido al portapapeles y luego selecciona
uno nuevo, despus selecciona EDITAR -> PEGAR ATRIBUTOS . Ten en cuenta que esta
accin slo pegar los atributos 3D sobre otros objetos 3D extrudidos. Por ello,
primero tienes que extrudir una forma antes de pegarle los atributos 3D.

Esto copiar todos los atributos 3D tales como la profundidad de la extrusin, los
colores de la luz, tipo de bisel, y los colores del frente del objeto y los bordes.

Insertar sombras detrs del objeto


Utilizando la herramienta de sombra puedes optimizar el efecto 3D colocando una
sombra tenue detrs del objeto. Slo tienes que aplicar herramienta de sombra y
arrastrarla sobre el objeto 3D.

El ejemplo de la izquierda es un ejemplo de una sombra de pared y el de la derecha es de una


sombra de suelo.
382

Barras de navegacin
La mayora de los sitios web tienen una barra de navegacin horizontal o vertical,
desde la que puede accederse a todas las pginas importantes.

MAGIX Web Designer 11 Premium incluye funciones especiales para las barras de
navegacin, que facilitan la insercin, edicin y eliminacin de botones. Los botones
de una barra de navegacin pueden ajustar el ancho para coincidir automticamente
con sus etiquetas y se reposicionan automticamente cuando realizas cambios. Hasta
puedes agregar mens y submens desplegables a tus barras y hacer que se puedan
agregar o eliminar botones automticamente al agregar o eliminar pginas.

Los usuarios avanzados pueden crear sus propias barras a partir de diseos de
botones propios y modificar los diseos de botones existentes en una barra de
navegacin para aplicar su nuevo diseo en toda la barra.

Web Designer y las barras de navegacin


La mayora de los sitios web tienen una barra de navegacin horizontal o vertical,
desde la que puede accederse a todas las pginas importantes.

MAGIX Web Designer 11 Premium incluye funciones especiales para las barras de
navegacin, que facilitan la insercin, edicin y eliminacin de botones. Los botones
de una barra de navegacin pueden ajustar el ancho para coincidir automticamente
www.magix.es
Barras de navegacin 383

con sus etiquetas y se reposicionan automticamente cuando realizas cambios. Hasta


puedes agregar mens y submens desplegables a tus barras y hacer que se puedan
aadir o quitar botones automticamente al agregar o eliminar pginas.

Los usuarios avanzados pueden crear sus propias barras a partir de diseos de
botones propios y modificar los diseos de botones existentes en una barra de
navegacin para aplicar su nuevo diseo en toda la barra.

Usar de barras de navegacin de plantillas


La galera de diseos contiene una amplia variedad de barras de navegacin de
plantillas para tu uso. Son tanto barras horizontales como verticales y son
completamente personalizables. Tan solo arrastra y suelta una barra desde la galera
hasta tu pgina. O reemplaza una barra existente soltando la nueva encima: la nueva
barra adopta todos las etiquetas de los botones, enlaces y mens de la barra
reemplazada.

Cuando sueltes la barra puede que se te sugiera ajustar el esquema de color del
documento si no es el mismo que el de la barra. Puedes usar el color de la funcin de
reemplazo de color para cambiar los colores de la barra: todo esto sin tener que
desagrupar la barra en sus diferentes objetos. Tan solo selecciona la barra y haz clic
sobre un color de la lnea de colores, o si est abierto el editor de color, elige el color
que desees editar desde la lista de colores desplegable.

Consulta Esquemas de colores de temas (en la pgina 186) para ms informacin


sobre edicin de temas de colores y mira en "Reemplazar colores" para saber como
puedes personalizar los colores fcilmente.

Tambin se puedes crear barras de navegacin desde cualquier diseo de botn: si


quieres crear tu propia barra, consulta ms adelante en la seccin correspondiente
de este captulo.
384

Dilogo Propiedades de la barra de navegacin


La mejor forma de editar las etiquetas, enlaces y otros atributos de una barra de
navegacin y de agregar o eliminar botones, es utilizar el dilogo de propiedades de la
barra de navegacin. Haz doble clic sobre una barra para abrir el dilogo o un clic
derecho sobre la barra y escoge "EDITAR BARRA DE NAVEGACIN " del men
contextual.

La mitad superior del dilogo te permite establecer diversas propiedades de la barra


de navegacin. La parte inferior te permite agregar y eliminar botones y mens y
editar las etiquetas y enlaces de cada botn y entrada del men.

Orientacin
Escoge la orientacin horizontal o vertical que desees para tu barra de navegacin.
Para las barras de navegacin verticales generalmente querrs que los botones
tengan el mismo ancho (el ancho del botn ms ancho), para obtener una barra
rectangular. Consulta la opcin AJUSTAR TODOS LOS BOTONES A LA ETIQUETA MS
ANCHA a continuacin para controlar esto.

Justificado
Escoge el comportamiento que deseas para tu barra cuando cambie su longitud al
editar etiquetas o aadir/quitar botones. Una barra horizontal JUSTIFICADA A LA

www.magix.es
Barras de navegacin 385

IZQUIERDA crecer hacia la derecha a medida que agregas ms botones o extiendes la


longitud de las etiquetas de los botones. El extremo izquierdo de la barra
permanecer en el mismo lugar en la pgina. 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 opcin central si, por ejemplo, quieres que la barra de
navegacin horizontal se centre en la parte superior de tu pgina.

Para barras verticales, las opciones de justificacin cambian a Arriba, Centro y Abajo.
En el caso de las barras verticales, la configuracin determina si la barra crece hacia
arriba (Abajo), hacia abajo (Arriba) o en ambos sentidos (centro) al agregar botones.

Ajustar el ancho de los botones a las etiquetas


Activa esta opcin si quieres que los botones se extiendan, reduzcan o crezcan para
ajustarse al texto de la etiqueta. Si esta opcin est desactivada, tus botones
conservarn el mismo tamao de forma que una etiqueta que sea demasiado extensa
para el botn sobrepasar los extremos del botn.

Mismo ancho para todos los botones


Esta opcin est disponible slo si la opcin "Ajustar el ancho de los botones a las
etiquetas" est activada.

Selecciona esta opcin para hacer que todos los botones tengan el mismo ancho que
el botn ms ancho de la barra. Para las barras de navegacin 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
tamao, pero requiere ms espacio, por lo que es posible que no puedas incluir tantos
botones en la barra si esta opcin est activada.

Espaciado de botn
Aqu puedes escoger el espacio entre cada botn en la barra de navegacin horizontal
si no quieres que cada botn se encuentre justo arriba de su vecino. Simplemente
introduce la cantidad de pxeles de espacio que te gustara y observa el resultado de
inmediato.

El orden de los botones coincide con el orden de la pgina


Al activar esta opcin, el orden de los botones de la barra de navegacin coincidir
con el orden de las pginas del documento. Si cambias el orden de las pginas en la
GALERA DE PGINAS Y CAPAS , la barra de navegacin tambin se reordenar. Esto es
especialmente til para las barras de navegacin de los sitios web con
presentaciones, en los que es importante mantener el orden lineal de las pginas y
para los que deseas que los botones de la barra tengan el mismo orden de las pginas
de la presentacin.
386

Barra de navegacin del sitio


Esta es una opcin muy importante en el DILOGO BARRA DE NAVEGACIN que activa
los enlaces automticos, es decir, que los botones y los enlaces se agregarn solos a
medida que agregas pginas. Adems, todos los cambios que hagas a la barra se
reflejarn en todas las pginas del sitio tan pronto como cierres el dilogo Barra de
navegacin.

Por lo general activas esta opcin si quieres que tu barra de navegacin aparezca en
todas las pginas de tu sitio web. Sin embargo, puedes eliminar manualmente la barra
de algunas pginas si as lo deseas.

Esta barra de navegacin del sitio tambin es til para completar automticamente
las entradas de men en un solo botn de barra de navegacin despus de convertirlo
desde un botn mltiple de barra de navegacin. Ver Botn nico de barra de
navegacin (en la pgina 387) para ms informacin.

Desplazamiento y tranformacin de una barra de


navegacin del sitio
Si mueves una barra de navegacin del sitio sobre la pgina, la barra tambin se
mueve en todas las pginas en las que aparece. De la misma forma, si cambias el
tamao de la barra con la HERRAMIENTA DE SELECCIN, la transformacin se aplica a
todas las copias de la barra en otras pginas. No puedes realizar ninguna otra
transformacin de una barra de navegacin con la HERRAMIENTA DE SELECCIN
(rotacin, extensin, cambio de tamao en una sola dimensin).

Enlace automtico de pginas


Cada vez que agregues una nueva pgina a tu sitio, un enlace a esa pgina se
agregar a tu barra de navegacin del sitio y la nueva pgina obtendr una copia de la
barra, si todava no la tiene. Si tu barra cuenta con un botn sin usar, entonces ese
botn se enlazar con la nueva pgina. Si todos los botones ya contienen un enlace,
se agregar un nuevo botn al final de la barra y se lo enlazar con la nueva pgina. En
ambos casos, la etiqueta del botn se modifica para que coincida con el nombre de la
nueva pgina, si tiene un nombre o a "Nueva pgina" si no lo tiene. Generalmente
querrs editar de inmediato la nueva etiqueta en el dilogo de la barra de navegacin.

Si eliminas una pgina de tu sitio web, el botn de la barra de navegacin del sitio que
contiene el enlace con esa pgina se eliminar automticamente en todas las pginas
de tu sitio.

Activacin y desactivacin de las barras de navegacin del


sitio
Al activar y desactivar la opcin de navegacin del sitio en el dilogo de barra de
navegacin, el cambio se refleja en todas las copias de esa barra.
www.magix.es
Barras de navegacin 387

Eliminacin de una barra de navegacin del sitio de una


pgina
Si quieres que la barra de navegacin del sitio no aparezca en una pgina en particular
de tu sitio, simplemente haz clic en ella para seleccionarla en esa pgina y pulsa
Eliminar. Se te preguntar si quieres eliminar la barra de esa pgina sola o de todas.

Sin embargo, tras eliminar la barra de una o ms pginas, si luego desactivas la opcin
de barra de navegacin del sitio (tal vez para editar el diseo de botones que no
puede realizarse con esta opcin activada), y luego vuelves a activarla, la barra se
aadir automticamente a todas las pginas del sitio que no la contengan.

Barras de navegacin del sitio y plantillas


Todas las plantillas de pginas nicas en la GALERA DE DISEOS cuentan con barras
de navegacin configuradas para ser barras de navegacin del sitio al cargarlas desde
la galera para iniciar un nuevo documento de pgina web. Esto significa que puedes
crear rpidamente un pequeo sitio web con todas las pginas enlazadas a la barra
sin tener que agregar botones ni enlaces de pgina de forma manual. De la misma
forma, todas las plantillas de pginas web tienen barras de navegacin del sitio
activadas. Si no quieres este comportamiento, desactiva la opcin de barra de
navegacin en el DILOGO DE BARRA DE NAVEGACIN .

Las barras de navegacin independientes presentadas con cada tema en la galera no


tienen la opcin de barras de navegacin del sitio activada. Esto es porque es
probable que un usuario que agregue manualmente una barra no quiera que la barra
apareza en todas las pginas. De todas formas, esta opcin puede activarse
fcilmente en el dilogo de barra de navegacin de ser necesario.

Otros aspectos interesantes


Si eliminas un botn que refiere a una de tus pginas o si cambias el enlace para que
refiera a otro lugar, no se realizar accin alguna para restaurar un enlace de botn a
la pgina. Se asume que has decidido que no quieres utilizar un enlace directo a esa
pgina en tu barra de navegacin del sitio. Los nuevos botones y enlaces de pgina
solamente se crean cuando se agrega una pgina.

Barras de navegacin de botn nico


Las pginas diseadas para ser visualizadas en dispositivos mviles pequeos tienen
poco espacio para barras de navegacin horizontales o verticales, por lo que se
necesita una solucin ms eficiente en relacin al espacio. Usar una barra de
navegacin con un nico botn y un men es una de las soluciones que funcionan
bien, no importa cuantas pginas tenga el sitio.
388

Barra de navegacin vertical de botn nico

Para hacer una barra de navegacin de botn nico de una barra normal, tan solo abre
el dilogo PROPIEDADES DE LA BARRA DE NAVEGACIN (haz doble clic sobre la barra de
navegacin) y borra todos los botones menos uno. Ahora borra los enlaces del botn
(haz clic en el campo URL al lado del botn en el dilogo y elige NO APLICAR en el
dilogo de enlace). Ahora puedes comenzar a aadir entradas de men al botn de
forma manual en el dilogo de la barra de navegacin o se puede aadir una entrada
de men de forma automtica para cada pgina en tu sitio web. Para aadir los
enlaces de forma automtica, activa la opcin BARRA DE NAVEGACIN DE PGINA WEB
en el dilogo (o desactvala y actvala de nuevo si ya estaba activada). Vers que tu
men se completa con un enlace a cada pgina de tu sitio web. Edita los nombres de
cada entrada en el men si no quieres que sean los mismos nombres que las pginas.

Hay una seleccin de diferentes diseos de barra de navegacin en la GALERA DE


DISEOS dentro de "WIDGETS Y ELEMENTOS DE PGINA" > "BARRAS DE NAVEGACIN" .
Tambin cada uno de los temas que hay en Temas de pginas web (general) tienen
sus propios diseos de barra de navegacin. Cambia el diseo de tu barra de
navegacin arrastrando un nuevo diseo de la galera de diseos y soltndolo en tu
barra.

IMPORTANTE: ten en cuenta que algunas barras de navegacin tienen diseos de


primer y ltimo botn que difieren del diseo de los botones centrales. Estas barras
de navegacin no son adecuadas para un botn nico porque si se queda el botn
central solo, su diseo es poco probable que sea atractivo, por lo que el dilogo de
propiedades de la barra de navegacin no te permite borrar los botones de la derecha
y la izquierda de estas barras para dejar solo el central. Por lo que elige un diseo de
barra de navegacin donde todos los botones de la barra tengan la misma apariencia.

www.magix.es
Barras de navegacin 389

Todos los botones iguales: adecuado


para barras de navegacin de botn
nico.

Diseos de botn final diferentes: no


adecuado para barras de navegacin
de botn nico.

Para convertir una barra de navegacin de botn nico en una barra de botones
mltiples normal, tan solo aade ms botones y borra las entradas de men del
primer botn si no se requiere ningn men.

Botones y mens
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 DILOGO DE BARRA DE
NAVEGACIN . Cada fila de la tabla corresponde a un botn de la barra o a una entrada
en un men de uno de los botones.

Agregado y edicin de botones


Para agregar un botn, haz doble clic sobre la primera columna, en el lugar donde dice
"Doble clic para agregar botn". Se agregar una nueva fila debajo de la fila
correspondiente al ltimo botn. O haz clic en el botn AADIR en la parte inferior del
dilogo para agregar un botn detrs del botn seleccionado. Puedes comenzar a
editar de inmediato la etiqueta para el nuevo botn. Para completar la edicin de la
etiqueta, pulsa Intro o haz clic en algn lugar fuera de la etiqueta.

Puedes editar cualquier etiqueta de botn si haces clic en la fila apropiada para
seleccionarlo y luego haces clic en la primera columna para iniciar la edicin de la
etiqueta.

Para fijar el enlace de un botn, haz doble clic en el campo de la URL o, si la fila ya
est seleccionada, simplemente haz clic en ella. Aparecer el DILOGO ENLACE DE
PROPIEDADES WEB . Este debera parecerte familiar, puesto que es el mismo dilogo
Enlace (en la pgina 273) que utilizas para agregar otros enlaces a tu pgina y estn
disponibles las mismas opciones. Algunas opciones estn desactivadas porque no
390

son aplicables a las barras de navegacin ni a los enlaces de men, como la opcin de
foto emergente que slo funciona cuando se aplica a una foto.

Tambin puedes configurar el texto de consejo de herramienta para cada botn en la


tercera columna. Edita el texto de la misma forma en que lo haces con el texto de la
etiqueta. En el sitio web exportado, este texto aparecer como un pequeo consejo de
herramienta emergente cuando se coloque el cursor del ratn sobre el botn o
entrada del men.

Creacin de los botones MouseOver propios


Puedes crear tus propios botones MouseOver desde cero dibujando los elementos
necesarios con rectngulos, texto, etc. Tan solo dibuja las partes principales del botn
en la capa MouseOff (recuerda agruparlo (en la pgina 50)) y coloca la versin
destacada correspondiente en la capa MouseOver. Mientras que la versin MouseOff
tenga un enlace de direccin web, la versin MouseOver se visualizar
automticamente cuando muevas el ratn por encima de la pgina web. (La capa
MouseOver tiene que estar encima de la capa MouseOff).

En otras palabras, otorgas al objeto principal una direccin web utilizando la


opcin de enlace. Despus seleccionas una capa MouseOver en la GALERA DE
PGINAS Y CAPAS y colocas las versiones MouseOver de tu botn en esta capa
para que se superpongan con el objeto con el enlace.

Nota tcnica: cualquier objeto grfico en la capa MouseOver se visualizar si se


superpone como mnimo el 50% con el objeto de la capa MouseOff. Las dos
versiones de botones MouseOver se mantienen sincronizadas con la funcin de
grupos suaves. Si seleccionas un botn en una capa, se selecciona automticamente
la versin de grupo suave en la otra capa, aun cuando la capa est desactivada. Al
editar el texto del botn en una capa, se pondr en sincrona automticamente con la
otra versin del botn.

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, necesitars permitir
ambas capas en la GALERA DE PGINAS Y CAPAS y realizar una seleccin lazo
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, tambin cambiar en la otra capa, aun cuando est oculto. (Ten en
cuenta que este efecto solo funciona si el texto en las capas Off y Over es igual y
cuando los objetos estn agrupados como grupo suave).

Una vez que tengas un botn operativo, puedes convertirlo en una barra de
navegacin. Selecciona el botn (junto con su estado MouseOve