Como criar um template no artisteer

Publicado em 13/07/2010 | Categoria: Artisteer » Tags: | Andressa F. Quadro
A medida que a blogosfera vai crescendo, novos blogs vão surgindo a cada dia. O que todo bom blogueiro quer é certamente se destacar no meio da multidão, ter leitores fiéis e ser bom naquilo que faz. Particularmente acho que um bom blog tem que ter duas características principais: conteúdo de qualidade e um layout bonito e agradável. Certamente esses dois pontos farão com que seu blog se destaque. O conteúdo de qualidade é imprencidivel e o layout é o cartão de vistas do seu blog. Uma maneira de se destacar é criar um layout ao seu gosto, com a sua cara.
Então ai você me pergunta: Pow Andressa não sei nada de Html, Css ou qualquer linguagem da web! E agora?
Muito simples, use o Artisteer!

Artisteer é um ótimo programa para criação/edição de templates para diversas plataformas como Blogger, WordPress, Joomla e outras. A criação do template é muito prática e há duas formas de fazê-lo: A primeira é deixar que o programa mostre sugestões de templates. A segunda é usar um modelo predefenido e fazer todas modificações necessárias.
O programa é muito simples de usar, é quase que alto-explicativo. Portanto demonstrarei as funções principais e nos próximos tutoriais ensinarei a publicar o template corretamente e configurar os menus.
Primeiro de tudo baixe o Artisteer e o instale (se for  o caso). Aqui no blog disponibilizo duas versões do programa. São elas:
Artisteer 2.3 + Crack (versão instalável e sem bugs)
Artisteer 2.4 Portable (possui novos recursos, tais como: header em flash, menu vertical dropdown e estilos diferenciados para a sidebar. No entanto há um pequeno “grande” bug… Ao salvar um projeto e tentar abrir depois o programa não o reconhece. Sendo assim, você deve finalizar e exportar o projeto de uma vez só.

Nota: neste tutorial usarei o Artisteer 2.4 portable

Depois de ter baixado o programa, abra-o. Será exibida está tela de opções
art
Escolha a plataforma que deseja usar dando um clique sobre ela. No exemplo vou usar a plataforma Blogger. Logo será aberto o programa por completo e será mostrado um template padrão. Clique na imagem para amplia-la:
art2
Note que destaquei algumas partes no print acima. As partes destacadas em verde e laranja são as que iremos conhecer e trabalhar. Como disse no início do post você pode usar algum modelo sugerido pelo programa ou ir modificando a partir do modelo padrão (template mostrado no imagem acima). Vamos conhecer cada parte da barra de menus a partir de agora.

Idéias

ideias
Como o próprio nome já diz o menu Idéias mostra sugestões do programa.

  • Sugerir Desenho: mostra sugestões de layouts completos, com cores, fontes e estilos que combinam entre si.
  • Sugerir Cores: troca apenas as cores da página, posts, background, header, fontes, menu e etc;
  • Sugerir fontes: troca a fonte de todo o layout (incluindo as fontes do menu);
  • Sugerir disposição: troca a posição do header, menu e sidebar;
  • Sugerir fundo: troca o background (fundo) da página;
  • Sugerir folha: troca a aparência da folha do template( outer-wrapper do template mínima);
  • Sugerir cabeçalho: troca a aparência do cabeçalho, modificando a altura, desenho e cores do mesmo;
  • Sugerir Menu: modifica a aparência do menu horizontal dropdown que fica acima ou abaixo do cabeçalho;
  • Sugerir desenho do artigo: refere-se a área de postagens;
  • Sugerir barra lateral: modifica a aparência da sidebar, aplicando estilos diferenciados, backgrounds e imagens;
  • Sugerir blocos: troca a aparência dos gadgests dispostos na sidebar;
  • Sugerir menu vertical: modifica a aparência do menu vertical dropdown que fica na sidebar.

Como você pode ver, no menu idéias da pra você fazer seu template completamente e também já da para ter uma boa noção do que se trata as próximas ferramentas.

Cores e fontes:

cor
Esse é o segundo menu para personalização de templates. Como todos os outros ele é meio que alto explicativo. Aqui você pode usar uma sugestão do programa, escolher planos de cores, fontes, tipografica e escala de fonte predefinidos que são mostrados nas opções ou personaliza-los ao seu gosto.As cores e fontes que você escolher nesta área influenciarão em todo o template.

Disposição:

disp
Aqui você escolhe a posição do cabeçalho e do menu horizontal, o número de colunas do seu template e a posição de alguns gadgets.
Caso não queira que seu template tenha cabeçalho ou que não tenha menu horizontal, clique em Disposição de página e escolha a opção referente a sua vontade.
O mesmo é válido para os gadgets pesquisa, arquivo, perfil e menu vertical. Por exemplo: caso não queira que o gadget Pesquisa seja mostrado, clique em Posição da pesquisa e marque a opção Sem blocos.

Fundo:

fund
Neste menu você define o background da página. São vária as opções. Você poderá fazer um fundo com uma cor sólida, com degradê, com uma textura ou ainda usar um background que você já tenha pronto. Algo muito interessante para estrutura do seu template é você definir se quer que o fundo da página fique fixo ou role conforme a página. Para definir isso clique em Opções>> Posição da Textura
pag
Note que destaquei três opções. São elas repetir textura, posição e rolagem. Dependendo do background a ser usado e de sua vontade é interessante você mexer nelas. Exemplo:
Digamos que você tenha carregado uma imagem no tamanho 20×20 para usar como background. Obviamente 20×20 é um tamanho muito pequeno para o fundo de uma página e como não sabemos o tamaho de tela de nossos visitantes está fora de cogitação aumentar o tamanho da imagem de fundo. A forma correta de fazer com que esta pequena imagem seja mostrada por toda a página é ir até a opção Repetir textura e marcar Preecher. Digamos ainda que quero deixar minha página com estilo Twitter, na qual apenas a folha se move e o background permanece no mesmo lugar. Para isso, basta ir até Rolagem e marcar a opção Fixo. E depois de feitas as alterações é só clicar em ok.

Folha:

fol
Neste menu serão definidos os estilos da folha do template (outer-wrapper do template mínima), isto é, a parte onde ficam a área de posts, sidebar, footer e header.Você pode definir se a folha do template terá cantos arredondados, bordas, sombras, backgrounds ou se será transparente.

Cabeçalho:

ca
Aqui você define a imagem do cabeçalho. Você poderá criar uma na hora com os recursos disponibilizados pelo programa ou usar uma que você já tenha armazenada em seu computador. É também nessa parte que são definidos a largura e altura do header e também a posição e fonte do título e descrição do blog.

Menu:

menu
Nesta opção você criará o menu horizontal dropdown. Aqui serão definidos os estilos, fontes e cores da estrutura do menu (navbar ou barra de menu), dos botões nele contido e o submenu.

Artigos:

artig
Nesta área serão definidos os estilos das postagens. Tamanho da fonte do título do post, alinhamento, cores, bordas no post e nas imagens do mesmo, ícones para o footer do post, estilos para o blockquote, tabelas, links e ainda para os títulos.

Barra lateral:

side
Aqui serão definidos os estilos para sidebar. Você poderá colocar um background ou uma imagem no topo da sidebar. Em estilo Bloco, você definirá a aparência dos gadgets.

Menu vertical:

vert
Nesta área você definirá a aparência do menu dropdown vertical que fica posicionado na sidebar. Assim como o menu horizontal você poderá personalizar tudo.

Botões:

botoes
Nesta área você irá escolher o estilos para botões. Os botões que são criados aqui são para uso “especial”. Eles serão mostrados apenas com o uso de uma class extra no link onde você queira mostra-lo. (em um próximo tutorial ensinarei a usar os botões do artisteer).

Rodapé:

foo
E por fim chegamos ao ultimo elemento do template artisteer: o rodapé! Nele serão mostrados links e o copyright além de um ícone de feed. E nesta área você definirá os estilos para tudo.
_____________________________________________________
Ufa! O post foi bastante extenso, mas você terá uma boa noção de como usar o programa. Como eu disse no início o programa é meio que auto-explicativo então não há mistério nenhum em utiliza-lo. Minha dica para você que está iniciando no uso do artisteer é que crie um template de testes para você conhecer melhor o programa e ver como tudo funciona e ir se familiarizando com ele. Fique atento aos próximos tutoriais, mostrarei coisas interessantes e úteis sobre os templates artisteer.
Tutorial escrito e elaborado por Andressa Quadro – Super Dicas PFS.
Copyright © 2010 – TODOS OS DIREITOS RESERVADOS
Todos os direitos reservados 2010-2013
Orgulhosamente desenvolvido em Wordpress