¿Cómo crear banner y separadores bajo aplicación propietaria_

 

Curso: Gestión de Aprendizaje en Entornos Virtuales
Unidad II: Planificación y Configuración de un Curso en Moodle

 

Guía Práctica 

¿COMO CREAR BANNER Y SEPARADORES? 

El  diseño  de  un  banner  no  es  nada  de  otro  mundo. 
El  diseño  y  la  elaboración  de  un  banner  o  separador  no  es  nada  complicado,  siempre  y 
cuando  se  cuente  con  las  herramientas  básicas  que  permitan  su  construcción,  como  un 
programa  de  dibujo  especializado  y  un  convertidor  de  formatos  de  imágenes  (gif,  jpg, 
jpeg, png). 

 
Para  comenzar,  lo  principal  es  tener  una  idea  fija  de  cuál  será  el  objetivo  del 
banner o separador, (una firma, pagina web, foro, etc) y su tipología (estático o animado), 
con base en ello, se regirá el diseño teniendo mucha imaginación y creatividad.  
 
Existe una gran gama de software para la creación de banner y separadores, desde 
los más básicos como el Paint de Windows y PowerPoint; Especializados como Photoshop, 
CorelDRAW,  Paint  Shop,    Gimp,  entre  otros;  y  los  programas  dinámicos  como  Swish  o 
Flash  MX.  También  existen  software  que  se  dedican  solo  al  diseño  de  banners  como 
Bannershop  GIF  Animator,  Banner  Maker  Pro  y  páginas  WEB  gratuitas  para  creación  y 
descargas  de  banner  como  http://creatubanner.com/,  www.muchografico.com, 
www.sciweavers.org/i2style. 
 
 
 
 
 
 
 
 
 
 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 1/17 

Diseñar en programas básicos 
 

A continuación se presenta una manera fácil y rápida, donde no se necesita ser un 
gran  diseñador,  sin  tener  programas  gráficos  especializados    y  además  realizarlo  en  sólo 
cuestión de minutos.  Los tres elementos básicos que se necesita saber: 

 

 

1.‐ Ajuste de Tamaño:  
Cuando  se  trabajan  imágenes  destinadas  al  manejo  en  la  pantalla  se  utiliza  la 

unidad  denominada  píxel.  Sin  embargo,  cuando  se  realizan  gráficos  que  necesitamos 
imprimir usamos medidas en centímetros o pulgadas. Esta relación a su vez está mediada 
por la resolución de la pantalla. 
  

A continuación se presentan dos tablas que muestran la relación entre las medidas 
utilizadas en la pantalla (resolución) y las dimensiones en milímetros (mm) y pixels (pix). 
 
 
 
 
 
 
 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 2/17 

 
Tabla 1. Dimensiones en píxels, según dimensiones en mm.  y resolución. 

 

Fuente: Asinsten, J. (2009). 
 
Tabla 2. Dimensiones en mm., según cantidad de píxels y resolución. 

 

Fuente: Asinsten, J. (2009). 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 3/17 

En  nuestras  aulas  virtuales  se  puede  observar  la  presencia  de  Banner  y 
Separadores, para identificar diferentes bloques. 

El tamaño del  Banner  recomendado por las unidades de Estudios a Distancia en la 
UNELLEZ es de 800*150 pixeles  con un peso de 250 Kb como máximo. 

 

De  igual  manera,  los  Separadores,  o  cintillos  que  dividen  tanto  temas  como 
actividades y recursos de trabajo, deben tener una medida de 800*27 pixeles con un peso 
máximo de 60 Kb. 

 

2.‐ Foto o Imagen:  

Al  crear  Banner  o  separadores,  se  pueden  incorporar  fotos  o  imágenes,  siempre 
que  sea  de  la  preferencia  del  diseñador,  no  es  obligatorio.  También  se  puede  jugar  con 
degradación de colores, o simplemente hacer el banner  sin fondo y de sólo texto.  

En cuanto al Texto, el titulado del banner no debe poseer un texto muy amplio. Lo 
único que debería contener es un anuncio de texto que permita  promocionar el producto 
o servicio. 

3.‐  Guardado:  

Los  formatos  o  extensiones  que  soportan  los  archivos  para  banner  son  los  GIF, 
usado generalmente para la publicidad en tipo banner y hace de las imágenes más livianas 
en  kb.  JPEG  o  también  denominado  JPG,  otorgan  mejor  calidad  de  resolución  a  las 
imágenes  pero  también  mayor  peso  en  kb  y  los  formatos  PNG,  basados  en  un  algoritmo 
de compresión sin pérdida de calidad. Este formato fue desarrollado en buena parte para 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 4/17 

solventar  las  deficiencias  del  formato  GIF  y  permite  almacenar  imágenes  con  una  mayor 
profundidad  de  contraste  y  otros  importantes  datos,  así  como  soporta  trasparencia  a 
diferencia de imágenes  JPG, pero no de gran peso en kb. 

Ahora bien, llegó la hora de  practicar… para ello te invitamos a realizar cada uno 
de los pasos que te permitirán culminar con éxito esta actividad. 

El programa que se utilizará en este caso es Microsoft Office PowerPoint 2007.  
 

PASOS A SEGUIR PARA LA CREACIÓN DEL BANNER  
 

1.‐ Abrir el programa PowerPoint 

 
Ahora, en lugar de hacer clic para agregar título,  proceda a eliminar los cuadros de 
textos y dejar la hoja en blanco presionando clic en los bordes y tocando la tecla supr. 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 5/17 

2.‐ Dibujar rectángulo 
Para ello en la barra de menús se selecciona INSERTAR y dentro de ella FORMAS 
 
 
 
 
 
 
Se  selecciona  el  tipo  de  rectángulo  a  dibujar,  para  este  caso  se  escogerá  el 
rectángulo  normal.  Al  seleccionar  la  figura  deseada  el  cursor  cambiará  de  forma 
convirtiéndose en una cruz (+)  

+

 
 
 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 6/17 

Con  clic  izquierdo  del  ratón  presionado  arrastramos  el  cursor  dibujando  el 
rectángulo deseado. 

 
 
 
 
 
 
 

 

 

3.‐ Definir Tamaño 
 
Una vez dibujado el rectángulo, se debe definir el tamaño del banner o separador. 

Para  la  realización  de  este  ejemplo    se  tomarán  las  siguientes  medidas    6,773  cm.  de 
ancho    x  1,27  cm  de  alto  (recuerden,  esto  es  una  práctica).  Para  definir  el  tamaño  se 
selecciona  el  rectángulo,  se  le  da  clic  al  botón  derecho  del  ratón  se  y  elige  “Tamaño  y 
Posición”. 

 

 

 

 

 

 

 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 7/17 

Aparece un nuevo menú, donde se establecerá el tamaño del objeto. En este caso 
se hará un banner y la medida debe ser colocada en centímetros (alto = 1,27cm y ancho = 
6,773 cm). Una vez definidas las medidas se selecciona “Cerrar” y listo, así se obtendrá la 
base del banner a diseñar. 

 
 
 
 
 
 
  Si te resulta pequeña la imagen en la pantalla de tu computador, cambia el Zoom 
de la pantalla en el menú Vista, opción Zoom. 

 
 
 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 8/17 

4.‐ Añadir Fondo, Borde y Efecto. 

Al  dibujar  la  base  rectangular  del  banner  este  trae  consigo  algunas  propiedades 
como  color  de  fondo,  borde  y  efecto,  estos  parámetros  pueden  ser  cambiados  y/o 
personalizados.  Para  ello  se  debe  seleccionar  el  rectángulo,  observa  que  en  la  barra  de 
menú aparecerá  “Herramientas de Dibujo Formato”.  Ahora, procede a seleccionar este 
menú. 

 
Existe  varias  herramientas  de  personalización  entre  ellas:  Insertar  Formas,  Estilos 
de  Forma,  Estilos  de  Wordart,  Organizar  y  Tamaño.  Pero  como  en  este  punto  lo  que  se 
quiere es personalizar el fondo, borde y estilo se utilizará “Estilos de Forma”.  
 
El  fondo  del  banner  es  personalizado  en  “relleno  de  forma”  y  este  puede  ser  un 
color  sólido,  degradación  de  color,  imagen  o  textura.  Dependerá  de  la  creatividad  del 
diseñador. 
 
 

 

  
 
 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 9/17 

Para  este  caso  se  utilizará  una  imagen  como  fondo,  para  ello  se  selecciona 
“Imagen”,  se  abrirá  una  ventana  muy  similar  al  explorador  de  Windows,  se  ubica  la 
carpeta donde se encuentra la imagen que se desea como fondo, se selecciona la imagen 
y se le da a “Insertar”. 

 
 
Para  el  Borde  del  banner,  se  selecciona  “Contorno  de  forma”,  donde  se  puede 
personalizar el color del borde, el grosor y estilo de guiones. En este caso se seleccionara 
un  color  verde  que  combine  con  la  imagen  de  fondo,  un  grosor  fino  de  ¼  pto.  para  no 
recargar el banner y un estilo de guiones sólido. 
 
 

 
 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 10/17 

Para agregar efectos al banner, se selecciona “Efectos de Formas”, donde se puede 
agregar  sombras,  reflejo,  bisel,  entre  otros.  Para  este  banner  se  agregará  sombras  en  el 
exterior de desplazamiento al centro y un bisel en forma de círculo. 

 
 
 
 
 
 
 

5.‐ Añadir Elementos Decorativos 
No  es  necesario  agregar  estos  elementos,  pero  si  se  desea  agregar  imágenes  o 

figuras extras al banner se puede hacer. En la barra de menú se selecciona “Insertar”, en 
caso de ser una imagen se le dará clic  a “Imagen”, o de ser una figura básica en “Formas”.  

Un  dato  importante  al  momento  de  agregar  imágenes  se  recomienda  que  estas 
sean  en  formato  png,  porque  vienen  con  fondos  transparentes.    De  lo  contrario  tendrás 
que usar la opción de este menú Volver a colorear y luego  definir color transparente. 

 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 11/17 

Para  este  banner  se  insertará  una  imagen  y  una  forma  básica.  A  continuación  se 
explicarán estas dos formas de inserción. Lo primero que se insertará será la imagen, para 
ello se escogerá “insertar + imagen”. Aparecerá la misma ventana de exploración cuando 
se agregó la imagen de fondo al banner y se hará el mismo procedimiento. 

En  este  caso  la  imagen  seleccionada  es  de  tamaño  superior  al  banner,  para  que 
pueda  ser  utilizada  dentro  del  diseño  se  debe  escalar  o  lo  que  es  lo  mismo  cambiar  su 
tamaño.  Se  puede  hacer  de  manera  libre  tomando  uno  de  sus  extremos  y  arrastrando  el 
ratón hasta el tamaño deseado. 

 

 

 

 

 

 

 

 

 

 

 

 

 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 12/17 

Ahora  se  agregarán  formas  básicas,  para  ello  se  escogerá  “insertar  +  formas”.  Se 
selecciona  la  forma  que  se  desea  dibujar  y  se  van  creando  sobre  el  banner.  Estas  formas 
pueden  ser  personalizadas  tal  cual  como  se  realizó  con  la  base  del  banner  en 
“Herramientas de Dibujo Formato”. 

 
 
 
 
 
 
6.‐ Agregar Texto: 
Para agregar texto al banner se puede hacer de dos maneras, una es insertando un 
cuadro de texto y la otra es insertando un WordArt. Cualquiera de las formas que se elija 
logrará el objetivo. Ambas opciones se encuentran en la Barra de Menú de “Insertar”. 
En este ejemplo se utilizará “WordArt”.  Lo primero que se debe hacer es escoger 
el estilo de forma de texto que se desea aplicar. 

 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 13/17 

Una vez seleccionado el estilo, aparecerá un cuadro de texto que dice: escriba aquí 
el texto 

 
Dándole  clic  en  la  parte  interna  del  cuadro  de  texto  se  podrá  editar  y  escribir  la 
información  del  Banner.  Para  establecer  tamaño  y  fuente  de  letras  se  debe  ir  hacia  la 
barra  de  menú  y  seleccionar  “Inicio”  +  “Fuente”.  Para  este  banner  se  utilizará  fuente  de 
texto tipo Calibri y tamaño 24 

 
  

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 14/17 

Como  el  texto  de  la  información  del  banner  se  realizó  con  WordArt,  se  puede 
personalizar  los  colores,  borde  y  efectos  del  texto  tal  como  se  ha  hecho  anteriormente 
con  “Herramienta  de  Dibujo  Formato”.  Para  ubicar  el  texto  dentro  del  banner  se  debe 
arrastrar  hasta  la  posición  deseada,  seleccionado  el  cuadro  de  texto  y  ubicando  el  ratón 
cerca  de  cualquier  borde  hasta  que  aparezca  sobre  el  cursor  una  cruz  con  flechas, 
manteniendo el clic izquierdo del ratón presionado se arrastra el texto hasta su ubicación. 

 

6.‐  Guardar como imagen 

Una  vez  culminada  la  creación  y  diagramación  del  banner  o  separador,  se  debe 
agrupar  todos  los  elementos  agregados  en  el  diseño:  el  rectángulo  base,  las  figuras  e 
imágenes adicionales y textos. Para agrupar todos estos elementos se ubica el cursor del 
ratón  unos  centímetros  más  arriba  del  extremo  superior  derecho  del  banner  y 
manteniendo  el  clic  izquierdo  del  ratón  presionado  se  sombrea  el  diseño  de  forma 
diagonal hasta llegar al extremo inferior derecho. (Como indica la flecha) 

 

 

 

 

 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 15/17 

Seleccionados todos los objetos del banner sobre uno de los bordes y presionando 
el clic derecho del ratón se selecciona “agrupar”  

 
Ya  agrupados  todos  los  elementos  del  banner,  ahora  si  se  puede  convertir  el 
diseño  en  una  imagen  y  la  manera  de  hacerlo  es  guardando  el  diseño  como  una  imagen, 
para  ello  con  el  clic  derecho  del  ratón  sobre  el  banner  se  selecciona  la  opción  “Guardar 
como Imagen”  
Aparecerá  un  nuevo  menú  donde  se  debe  colocar  un  nombre  al  archivo  y 
seleccionar el tipo de formato, el cual puede ser cualquiera de los antes descritos (GIF, JPG 
o PNG).  
 
 
 
 
 
 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 16/17 

Una  vez  establecido  el  nombre  del  archivo  y  el  formato  de  extensión  grafica,  solo 
falta darle a “Guardar” y listo.  

Para  concluir  con  este  ejercicio  te  recomendamos  guardar  en  tu  computador  la 
imagen  (banner  diseñado)  en  cada  uno  de  los  formatos  (gif,  jpg,  png)    para  que  puedas 
observar la diferencia en peso Kb y calidad en cada uno de estos archivos. 

Por ejemplo: 
Practica_banner.gif   
Practica_banner.jpg 
Practica_banner.png 
 
  Ingresa  al  explorador  de  tu  computador  y  observa  el  tamaño  en  kb  de  cada 
archivo. 
 
 

TIPS PARA EL DISEÑO DE BANNER Y SEPARADORES 

1.‐ Utilizar los tamaños estándares de banner y separadores. 

2.‐ Tratar en lo posible que el diseño no sea pesado en KB, ya que aquellas personas que 
tienen una conexión de Internet mínima, al cargar las páginas WEB se hace muy lenta. 

3.‐ Una buena combinación de colores hará que el banner sea vistoso. 

4.‐ Debe existir un buen contraste entre fondo y el color de las letras. 

5.‐ El tamaño de texto no debe ser tan grande, utiliza un tamaño de letra módica. 

6.‐ El estilo de letra (fuente) y color del texto, debe combinar con las imágenes de dibujo y 
para que haya equilibrio en el diseño.  

 

REFERENCIAS 

Asinsten,  J.  (2009).  El  beso  de  la  princesa.  Adecuar  los  gráficos  a  las  necesidades  de 
trabajo. Virtual educa, Argentina. 

Diseño Arq. Melvi Lugo.  Colaboración: Prof. Dexi Azuaje ,  Prof. Yasmin Briceño           EaD‐UNELLEZ ‐2012         p. 17/17