Big Tutorial: Editar e Aplicar Tema PSD - Parte 1

Hey pessoal *-*, como sabem, eu estive algum tempo sem postar aqui no blog; pois estive a preparar um Big Tutorial de três partes, sobre editar e aplicar no blog um Tema PSD. Neste big tutorial, vou disponibilizar um Tema PSD, feito por mim e um Tema Base HTML, codificado por mim, com ajuda de outros blogs. Vou explicar tudo sobre o que têm de fazer, para o aplicar no tema que eu disponibilizo e como alterá-lo no Photoshop.

•• Download do Photoshop CS6
•• Download do Tema PSD
•• Download dos Materiais Utilizados (Paleta de Cores e Fontes)
•• Download do Tema HTML

Ora bem, para começar com o big tutorial, tens de fazer download do Tema HTML, que eu disponibilizo acima. Depois para o aplicares no blog, vai a Modelo → Efetuar Cópia de Segurança / Restaurar → Escolher Ficheiro e seleciona o Tema HTML que eu disponibilizei.

Quando ele estiver carregado no blog, vai aparecer assim (print), já editado e com o Tema PSD. Primeiramente, antes de fazer-mos alterações, temos de ocultar a navbar do blog e remover a attribution.

Para ocultares a navbar do blog, vai a Esquema → Navbar → Desativada.
Para removeres a attribution do blog, vai a Modelo → Editar HTML e procura pela tag: "Attribution". Quando a encontrares remove toda a linha de código em que ela está inserida (print).

Agora vamos remover a miniaplicação "Acerca de Mim". Para isso vai a Esquema do Blog → Acerca de Mim → Remover.

Agora vamos remover a miniaplicação "Arquivo do Blog", que neste momento ainda está invisível, pois ainda não há nenhum post. Para isso vai a Esquema do Blog → Arquivo do Blog → Remover.

Agora, vai a Esquema → Mensagens do Blog → Editar e deixa só marcado o quadradinho de "Mostrar Edição Rápida" e dos "Comentários" (print).

Neste momento o esquema do teu blog, deve estar parecido ou igual  a este (print). Essas duas miniaplicações HTML/JavaScript que estão em branco no esquema, vais utilizá-las mais tarde. Uma para a descrição do blog e outra para o "Welcome" do teu blog.

Neste momento, o teu blog, tem de estar igual a este (print).

Agora, no resto deste post, vou ensinar tudo o que precisam de saber, sobre a Edição do Tema PSD, que eu fiz e disponibilizo lá em cima. Para isso faz o download dele, e do Photoshop CS6 (caso não o tenhas instalado no teu computador) e continua a ler este post.

Antes demais, peço-te que também faças o download dos Materiais Utilizados, e que instales no teu computador as fontes, que podes encontrar na pasta "Fontes".

Depois de teres instalado no teu computador o Photoshop, as fontes instaladas e de teres feito o download do Tema PSD, abre-o. O aspeto será este (print).

Antes de começar-mos a fatiar o tema, para depois o codificar, tens de alterar o "Nome do Blog" e se quiseres as cores ao teu gosto. Só te peço, para não retirares os créditos, caso contrário, terei de tomar medidas.

Para alterares o Nome do Blog, seleciona a ferramenta texto (print), e clica sobre "Nome do Blog". Altera o Nome do Blog, para o nome do teu blog e centra-o no fundo do cabeçalho (print).

Agora, antes de começar-mos com os recortes do tema, para depois codificares, tens de ocultar no Photoshop o grupo "Faixinha na Barra Lateral", clicando no olho (print).

Antes de começar-mos com os recortes, para ser mais fácil de visualizar, vamos ocultar as guias, para isso vai a Visualizar → Mostrar → Guias.

Agora, vamos ter de recortar três partes do tema: a parte do topo (header), um bocado da parte do meio (content) e a parte do final (footer). Nesta imagem (print), podes ver mais ou menos as partes que vão ser cortadas, uma de cada vez (são as partes rodeadas a azul).

Para isso, seleciona a ferramenta de corte (print), e recorta as três partes. Agora vamos recortar a parte do cabeçalho (header), corta mais ou menos, assim (print) e aponta a altura do header (podes vê-la no sítio, onde eu fiz um retângulo a verde no print anterior), pois vai-te ser precisa para a parte da codificação.

Agora vamos recortar a parte dos posts e da barra lateral (content), corta mais ou menos, assim (print). Neste recorte, não precisas de apontar a altura, pois como é uma parte que se vai repetir ao longo do blog, não é necessário.

Agora vamos recortar a parte do rodapé (footer), corta mais ou menos, assim (print) e aponta a altura do footer, pois vai-te ser precisa para a parte da codificação.

Pronto, as três partes estão recortadas; e a primeira parte do Big Tutorial: Editar e Aplicar Tema PSD termina aqui. Espero que tenham gostado e que tenham percebido tudo. Vão treinando, os recortes e assim, porque na próxima parte, vamos começar a colocar o tema no vosso blog.