Guia de Artisteer

ARTISTEER

¿Qué es?

Artisteer es una aplicación Windows que permite diseñar plantillas para páginas web y blogs, tales como Blogger, Joomla, Wordpress, Drupal, y aplicaciones .NET; sin la necesidad de tener conocimientos técnicos y de diseño avanzados.

Con él podrás modificar la estructura de tu blog, la tipografía, los fondos, imágenes, menús, y mucho más, apreciando las ventajas que ofrece:  Al ser un editor WYSIWYG (acrónimo de What You See Is What You Get) para templates, podrás crear diseños geniales y atractivos con sólo hacer clic en las opciones, e inmediatamente verás los cambios reflejados en pantalla.  Dispone de un botón llamado Sugerir que sirve para generar plantillas de forma aleatoria, lo cual te dará muchas ideas al crear la tuya.  Las ideas de diseños que propone se ajustan a los estándares Web.  Incluye numerosos elementos de diseño, desde los fondos a los objetos de fotos y botones.

Comenzando con Artisteer Usaremos una versión portable del programa, es decir que no requiere instalación en la PC. Sólo será necesario tener una copia de la carpeta del programa en pendrive o disco rígido y ejecutar el archivo de la aplicación con el icono del programa. Al abrirse aparecerá la siguiente ventana:

Observa sus partes. ¿Hay elementos similares a los de otros programas que conoces?

Página 1

ARTISTEER Identificarás el Botón Artisteer, la Barra de Acceso Rápido, la Banda de Opciones y el Área de trabajo.

El Botón Artisteer desplegará un menú con las principales operaciones de Archivo, tales como: crear un nuevo archivo, abrir uno ya existente, guardarlo, exportarlo, y realizar una vista previa en el navegador.

También podemos acceder a las activaciones y a información del programa, además de los dos botones que se encuentran en la base del menú, uno para entrar a las opciones del Artisteer y el otro para salir del mismo.

Examina las Opciones y activa la Ventana de inicio rápido al abrir el programa.

Al inicio del programa o al crear un nuevo archivo, verás la ventana de inicio rápido y elegirás el tipo de archivo que deseas crear.

El Área de trabajo mostrará una plantilla base, sobre la cual aplicaremos los cambios deseados hasta obtener nuestra propia plantilla.

Elige Blog en Blogger.com para crear una plantilla para tu carpeta virtual.

Página 2

ARTISTEER

En la Barra de título podrás observar el nombre del programa y el del archivo activo.

La Barra de acceso rápido posee las operaciones de uso más frecuente, tales como Abrir; Guardar; deshacer; rehacer y exportar. Pulsando Más verás las opciones para minimizar o expandir la Banda de opciones.

La Banda de opciones muestra las acciones organizadas en pestañas, tales como Ideas; Color y Fuente; Disposición; Fondo; y muchas más.

Si bien desarrollaremos las acciones que se pueden realizar en cada pestaña, debes tener presente que por las características de este editor, lo ideal es que revises cada pestaña y actives las distintas opciones, comprobando en pantalla el resultado de la acción sobre tu plantilla.



Ideas

Esta pestaña permite generar automáticamente plantillas al azar, modificando el diseño completo o sólo algunos elementos que elijas individualmente. Te sugiere colores, tipografías, disposición de tu plantilla, fondo, hoja, encabezado, menú, diseño de artículo, bloques, botones y pie de página, algo que es de gran ayuda cuando recién se comienza a utilizar el programa.

Artisteer mostrará los cambios al instante, y también podrás hacer una vista previa en los navegadores que tengas instalados.

Página 3

ARTISTEER

Haz clic en “Sugerir Diseño” y aprecia las variadas plantillas que aparecen.



Colores y Fuentes

Permite elegir temas de tres colores predeterminados por el programa (por ejemplo: Mostaza, Brisa del mar, etc.), o elegir individualmente los que queremos utilizar y luego guardarlos como tema. También se puede eliminar un tema.

Puedes ajustar la luminosidad y saturación de los colores elegidos, en base a 4 categorías con ajustes predeterminados: Básico, Normal, Contraste y Pastel.

Para las fuentes se puede elegir el grupo de fuente, la tipografía y su escala.

Haz clic en las distintas opciones, y elige las que te gusten.

Observa los cambios en la plantilla.

Página 4

ARTISTEER



Composición

Le estructura de una página puede contener diversos elementos. En el ejemplo de abajo encontrarás los principales. Desde esta pestaña se elige como deseas que esté compuesta tu página y la ubicación de cada elemento.

Tú puedes agregar o quitar cualquiera de ellos, y decidir su ubicación; solamente haciendo clic.

Experimenta diferentes estructuras.

Por ejemplo: configura columnas a izquierda y a derecha.

Página 5

ARTISTEER 

Fondo

Se puede elegir una opción predeterminada, abrir desde un archivo ya existente o simplemente elegir un color y a estos agregarles fulgor, gradiente y textura o imagen que queremos.

Si hacemos clic en opciones se abrirá una ventana en la que podemos colocar la alineación y la transparencia de nuestro fulgor, elegir opciones de textura, la ubicación de la misma y la altura y el contraste del gradiente.

Prueba distintos fondos y sus opciones.



Hoja

Puedes elegir una forma predeterminada de la hoja o crearla tú mismo combinando las opciones de ancho, desplazamiento (desde el borde superior), margen interior, radio, ancho y color del borde, la transparencia y variedad de sombras.

A medida que avances en el diseño de tu plantilla, es conveniente que la guardes. Para ello, utiliza el comando GUARDAR del Botón Artisteer.

El programa genera un archivo de formato .artx que contiene la plantilla editable, es decir, aquella que podrás recuperar y modificar en cualquier momento.

Página 6

ARTISTEER 

Encabezado

Puedes ajustar el ancho y alto de la cabecera, así como características del bloque de texto y su fondo.

También se pueden poner una imagen en primer plano y ajustar su tamaño y posición; un efecto flash; y elegir estilo de título y su color.

Si se quiere escribir un título debes escribirlo en esta pestaña dónde dice título, además del slogan.



Menú

Aquí establecerás cómo quieres que sea cada parte del menú: la barra, los ítems y subitem.

También se encuentra la opción de composición de la página, además de las configuraciones o formatos que se le pueden aplicar al menú, como su estilo y color (que va a estar relacionado con los colores que elegimos desde la pestaña “Colores y Fuentes”).



Artículos

En esta pestaña te permite definir las características del contenido de los artículos, entradas o post. Puedes configurar: 

Una imagen base y su estilo, incluyendo la forma, margen, margen interior del texto, relleno, borde, radio y sombra.



El formato del texto, tanto del cuerpo del artículo, como del título o encabezado, y del pie del mismo.



Otros elementos como los hipervínculos, las citas, las viñetas, las imágenes y las tablas.

Página 7

ARTISTEER 

Barra lateral

Podemos colocarle estilo a la misma con relleno, fulgor o en su defecto no colocarle ninguno.

Se puede determinar su composición al igual que en la pestaña “Composición”. Se puede colocar estilos al bloque: su fondo, el espacio entre sus objetos, el encabezado y el contenido. También ajustar los márgenes, el espacio entre las letras y las líneas, el color del texto, los vínculos, las viñetas. 

Menú vertical

Las mismas opciones que se encuentran en la pestaña “Menú”, aquí las tienes para configurar el menu vertical.



Botones

Se pueden elegir entre estilos de botones ya existentes o en su defecto diseñar tú mismo la forma, el borde, la textura, la gradiente, la sombra, el color de relleno, el color del borde, y las caracterísitcas de la fuente del texto. 

Pie de Página

Hay opciones para darle estilos, como ser, el relleno, la textura, la gradiente, la alineación, el margen interior del texto, su transparencia, la fuente del texto, el ícono de RSS, y el aspecto del hipervínculo.

Página 8

ARTISTEER

Finalizando la plantilla Una vez terminada la plantilla, debes EXPORTARLA en un formato acorde al sitio web donde se va a utilizar. Para ello, presiona el botón Exportar o comando del menú Artisteer y en el cuadro de diálogo que se abre, escribe el nombre de la plantilla que desees y la carpeta donde guardarás los archivos.

Selecciona también la opción "Exportar como un archivo ZIP" para comprimir y empaquetar los archivos de la plantilla. Si exploras el contenido del archivo zip, notarás que hay muchas imágenes y la plantilla en formato .xml. Todos ellos conforman tu plantilla.

Publicar la plantilla en Blogger Inicia sesión en Blogger y activa tu blog.

Ingresa en la sección “Diseño” de tu blog y haz clic en el vínculo "Editar Plantillas HTML" en la barra de pestañas.

Es recomendable que hagas una copia de seguridad de la plantilla que tienes.

Para cargar una plantilla que reemplace a la actual, presiona el botón Examinar, explora tu disco y selecciona el archivo main.xml de tu nueva plantilla. Presiona Subir, y al terminar el proceso, guardar los cambios. ¡Ya deberías ver actualizada tu plantilla!

Página 9