Guia de Artisteer

9
ARTISTEER Página 1 ¿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?

description

Instructivo de uso del programa

Transcript of Guia de Artisteer

Page 1: Guia de Artisteer

ARTISTEER

Página 1

¿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?

Page 2: Guia de Artisteer

ARTISTEER

Página 2

Identificarás el Botón Artisteer, la Barra de Acceso Rápido, la Banda de Opciones y el

Área de trabajo.

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

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

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.

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.

Page 3: Guia de Artisteer

ARTISTEER

Página 3

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.

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.

Page 4: Guia de Artisteer

ARTISTEER

Página 4

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.

Page 5: Guia de Artisteer

ARTISTEER

Página 5

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.

Page 6: Guia de Artisteer

ARTISTEER

Página 6

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.

Page 7: Guia de Artisteer

ARTISTEER

Página 7

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.

Page 8: Guia de Artisteer

ARTISTEER

Página 8

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.

Page 9: Guia de Artisteer

ARTISTEER

Página 9

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!