Fazendo Layout

Para fazer seu layout é preciso do Paint Shop Pro 7. Se não tem esse programa no seu computador terá que baixa-lo, ele está disponível aqui no blog na sessão Downloads (Goodies), vai até lá e siga todos os passos! Depois volte para aprender fazer seu lay personalizado. ;)

1º) Com o Paint Shop Pro 7 instalado no seu computador, pode começar fazer seu layout. Vai na sessão Modelos de Lays (Goodies) aqui no blog e escolha o modelo do seu layout!



2º) Salve o fundo rosa no seu computador. Copie e cole o código HTML (de acordo com seu servidor) em um bloco de notas.



3º) Escolha uma imagem para colocar no seu layout.



4º) Abra o programa Paint Shop Pro 7.



5º) Clique em "Open".



6º) Selecione o modelo salvo no seu computador e clique em "Abrir".



7º) Clique em "Selection" e selecione a parte do texto.



8º) Clique em "Dropper" e clique no fundo rosa.



9º) Clique em "Flood Fill" e clique dentro do texto selecionado para pintar.



10º) Clique em "Selections", depois em "Select None".





Apartir daí, você arruma o lay do jeito que você quiser. A parte rosa fica a imagem, as brancas são as colunas! Vou fazer um layout só pra poder explicar os próximos passos.



11º) Clique em "Magic Wand" e clique no fundo rosa.



12º) Clique com o botão direito na palheta de cores e selecione a cor branca.



13º) Clique em "Flood Fill" e clique no fundo rosa selecionado.



14º) Clique em "Selections", depois em "Invert".



15º) Clique com o botão direito na palheta de cores e selecione uma cor pra pintar as colunas.



16º) Clique em "Flood Fill" e clique em uma das colunas selecionadas pintando-as.



17º) Clique em "Selections", depois em "Select None".



18º) Clique em "Open".



19º) Selecione a imagem do seu layout que está salva no seu computador e clique em "Abrir".



20º) Clique com o botão direito na imagem, depois clique clique em "Copy".



21º) Clique com o botão direito no fundo do layout, depois clique em "Paste As New Selection".



22º) Arraste a imagem até onde desejar.



23º) Clique em "Selections", depois em "Select None".



24º) Clique em "Text" e escreva o que quiser no seu layout.



25º) Clique com o botão direito em "Preset Shapes", depois clique em "Tool Options".



26º) Escolha um shape para enfeitar seu layout (as cores você escolhe na palheta de cores) e enfeite do jeito que você quiser.



27º) Clique em "Layers" - "Merge" - "Merge Visible".



28º) Clique em "Selection" e selecione uma tira fina do final do layout, como mostra a imagem abaixo.



29º) Clique em "Copy".



30º) Clique em "Past New Image".



31º) Essa tira fina é a imagem do background. Salve no seu computador! Para melhor imagem, salve em "Portable Network Grafics (*.png)".



32º) Clique em "Selections", depois em "Select All".



33º) Clique em "Copy".



34º) Clique em "Past New Image".



35º) Essa é a imagem do layout. Salve no seu computador! Para melhor imagem, salve em "Portable Network Grafics (*.png)".





O layout já está pronto! Agora falta arrumar o código HTML para colocá-lo no seu blog.



36º) Abra o bloco de notas que está salvo o código HTML do seu layout. Escolha as cores do seu layout como mostra a imagem abaixo. Na dúvida dos códigos, consulte a Tabela de Cores (Goodies).



37º) Hospede a imagem do background e a imagem do layout (ver tutorial Hospedando Imagens). Coloque os endereços das imagens hospedadas nos locais indicados. No perfil coloque o que quiser, faça o favor de não retirar os créditos! rs.





O código HTML está pronto para ser usado! Salve-o no seu blog e aprecie o resultado. Olhe como ficou o layout que você viu sendo feito: CLIQUE AQUI PARA VISUALIZAR!




Agora é só curtir seu layout personalizado =D Caso ainda tenha dúvidas, deixe um comentário!

Tutorial criado e elaborado por Mayara Borges. Parte integrante do blog Papo de Princesa. Proibida cópia total ou parcial!

<%ENDIF%><%IF BLOG_ACCEPT_COMMENT%><%ENDIF%> <%IF BLOG_OWNER_MOOD%><%ENDIF%> <%DEFINE POST_TEXT STRING NULL%><%DEFINE POST_TITLE STRING NULL%><%DEFINE POST_DATE STRING NULL%><%DEFINE POST_USER STRING NULL%><%DEFINE POST_DATE_HEADER STRING NULL%><%DEFINE BLOG_POST_QTTY INTEGER 0%><%DEFINE BLOG_LINK_QTTY INTEGER 0%> <%DEFINE LINK_URL STRING NULL%> <%DEFINE LINK_TITLE STRING NULL%> <%DEFINE BLOG_NEIGHBOOR_QTTY INTEGER 0%> <%DEFINE NEIGHBOOR_URL STRING NULL%> <%DEFINE NEIGHBOOR_TITLE STRING NULL%> <%DEFINE BLOG_OWNER_NAME STRING NULL%> <%DEFINE BLOG_CURRENT_DATE STRING NULL%> <%DEFINE ARCHIVE_DATE_BEGIN STRING NULL%> <%DEFINE ARCHIVE_DATE_END STRING NULL%> <%DEFINE ARCHIVE_LINK STRING NULL%> <%DEFINE BLOG_ARCHIVE_QTTY INTEGER 0%> <%DEFINE BLOG_ARCHIVE_LINK BOOLEAN FALSE%> <%DEFINE BLOG_ARCHIVE_PAGE BOOLEAN FALSE%> <%DEFINE BLOG_ARCHIVE_LINK_URL STRING NULL%> <%DEFINE BLOG_ID STRING NULL%> <%DEFINE BLOG_SCRIPT_URI STRING NULL%> <%DEFINE POST_ID STRING NULL%> <%DEFINE BLOG_EMOTICON_HEAD STRING NULL%> <%DEFINE BLOG_EMOTICON_BODY STRING NULL%> <%DEFINE BLOG_EMOTICON_FOOT STRING NULL%> <%DEFINE BLOG_VOTE BOOLEAN FALSE%> <%DEFINE BLOG_RECOMMEND_BLOG BOOLEAN FALSE%> <%DEFINE BLOG_RECOMMEND_POST BOOLEAN FALSE%> <%DEFINE BLOG_ACCEPT_COMMENT BOOLEAN FALSE%> <%DEFINE POST_HAS_COMMENT BOOLEAN FALSE%> <%DEFINE BLOG_TITLE STRING NULL%> <%DEFINE BLOG_TEXT_NO_COMMENT STRING Sem comentários%> <%DEFINE BLOG_TEXT_ONE_COMMENT STRING Um comentário%> <%DEFINE BLOG_TEXT_MORE_COMMENTS STRING Comentários%> <%DEFINE BLOG_COUNTRY STRING NULL%> <%DEFINE BLOG_STATE STRING NULL%> <%DEFINE BLOG_CITY STRING NULL%> <%DEFINE BLOG_DISTRICT STRING NULL%> <%DEFINE BLOG_REGION STRING NULL%> <%DEFINE BLOG_GENDER STRING NULL%> <%DEFINE BLOG_AGE STRING NULL%> <%DEFINE BLOG_LANGUAGE1 STRING NULL%> <%DEFINE BLOG_LANGUAGE2 STRING NULL%> <%DEFINE BLOG_INTEREST1 STRING NULL%> <%DEFINE BLOG_INTEREST2 STRING NULL%> <%DEFINE BLOG_INTEREST STRING NULL%> <%DEFINE BLOG_IM_TYPE STRING NULL%> <%DEFINE BLOG_IM_ID STRING NULL%> <%DEFINE BLOG_OWNER_MOOD BOOLEAN FALSE%>