[Tutorial] Criando Favicon no pixlr

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Admin
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
https://bestweb.forumeiro.com

MensagemAdmin Qua Out 05, 2016 3:45 pm

[Tutorial] Criando Favicon no pixlr Theme
Criando Favicon no Pixlr

O editor online Pixlr é muito útil no quesito gráfico, e será utilizado neste tutorial com a finalidade de promover uma base para aqueles que não tem conhecimento algum, iremos trabalhar a elaboração de um Favicon, e qualquer pessoa poderá fazer isso, veja nosso tutorial e aprenda de uma maneira bem tranquila.

[Tutorial] Criando Favicon no pixlr S1BHU8w

--> Tutorias gráficos <--
Criando Favicon no Pixlr


[Tutorial] Criando Favicon no pixlr 2tYNykM Requerimentos
Neste tutorial você não precisa ter nenhum conhecimento, nem mesmo o programa instalado, basta apenas acessar o link do Pixlr para iniciar os trabalhos.
A finalidade deste tutorial é ajudar os administradores a se familiarizarem com uma ferramenta util na elaboração de trabalhos simples, como por exemplo a Favicon de seu fórum!

- Introdução:
Caso você não sabe o que é o Favicon, irei presenta-lo para você!
Favicon é imagem que representará seu fórum na aba do navegador, veja o exemplo do forumeiros:

[Tutorial] Criando Favicon no pixlr R6xwIwS

Como podem ver, o Favicon é a imagem que fica ao lado do nome do fórum, que neste caso está escrito "Novo Tópico"!

Para alterar a Favicon de seu fórum acesse no painel de controle de seu fórum:
Geral Fórum Configurações Geral

[Tutorial] Criando Favicon no pixlr PLaowvL

- Elaboração:
A intenção deste tutorial é apresentar aos usuários do fórum a como elaborar um Favicon, no entanto, primeiro ambos deveram saber como redirecionar uma imagem pronta para que depois possam se desenvolver completamente, então pensando nisso, iremos primeiros redirecionar a imagem, de seu tamanho original para as condições de Favicon que é 16x16.

Então vamos lá, apos ter acessado o site do Pixlr, altere primeiro a língua para a Português:

[Tutorial] Criando Favicon no pixlr KmzFjUn

A opção de idioma está escrito languagem, para achar está opção basta acessar a penúltima opção do menu central do lado direito, como ilustrado na imagem à cima!

Depois de alterada crie um novo arquivo de tamanho 16 x 16:

[Tutorial] Criando Favicon no pixlr 8rFEttu

[Tutorial] Criando Favicon no pixlr 6o3DeyPArrow Nome: Fique a vontade para nomear como quizer
[Tutorial] Criando Favicon no pixlr NhOA5Z4Arrow Predefinidos: Deixe em 800 x 600 px
[Tutorial] Criando Favicon no pixlr LJ9DeVgArrow Largura e Altura: Deixe em 16 x 16 px
[Tutorial] Criando Favicon no pixlr DI22cVWArrow Transparente: Marque está opção
O resultado será este:

[Tutorial] Criando Favicon no pixlr 4n3g32o

Já temos o ficheiro do Favicon pronto, agora falta preenche-lo adequadamente!
Agora, salve a imagem em seu computador para que possamos redireciona-la corretamente ao tamanho do Favicon:

[Tutorial] Criando Favicon no pixlr Group-128

No Pixlr, vá na opção:
Seta roxa Ficheiro Seta roxa Abrir Imagem... (Crt+O):

[Tutorial] Criando Favicon no pixlr UXxjxp4

Agora, iremos utilizar as ferramentas de seleção para que o mesmo seja redirecionando ao tamanho que queremos!
Para isso, basta selecionar Ferramento Letreiro (M):

[Tutorial] Criando Favicon no pixlr 2SUspK8

Selecione a imagem por inteiro:

[Tutorial] Criando Favicon no pixlr WpDYWQD

Depois de selecionado, dê um Crt+C (Copiar), e volte na camada do Favcon (16x16) e dê um Crt+V (Colar):

[Tutorial] Criando Favicon no pixlr 4n3g32o


Após ter colado a imagem, vá no menu principal e selecione:
Seta roxa Editar Seta roxa Transformação Livre... ou dê um Crt+T:

[Tutorial] Criando Favicon no pixlr EOsru0k

Agora iremos fazer a parte principal do trabalho, redirecionar a imagem em um tamanho de Favicon 16x16!

Após ter feito o passo anterior (Transformação livre...), o resultado será este:

[Tutorial] Criando Favicon no pixlr ZL9gIAN

Mas para que tenhamos um bom resultado, no canto inferior direito, deixo em 800%

[Tutorial] Criando Favicon no pixlr Kir20qw

Após esse passo, volte na camada da imagem que iremos redirecionar, e com a tecla Shift apertada redirecione a imagem até caber dentro do espaço do Favicon:

[Tutorial] Criando Favicon no pixlr HsAUWoj

Este é o resultado visto com 800%, para ver se deu certo, deixe em 100% (na aba de navegação, passo anterior)

[Tutorial] Criando Favicon no pixlr 1TuWUdw

Pronto, Favicon feita com sucesso:

[Tutorial] Criando Favicon no pixlr 1TuWUdw

- Salvando o Arquivo:
Após ter feito completamente todos os passos, teremos que salvar a imagem para depois implementa-la no fórum, e para isso basta ir:
Seta roxa Ficheiro Seta roxa Guardar... (Crt+O);

[Tutorial] Criando Favicon no pixlr AjOcDO9

[Tutorial] Criando Favicon no pixlr 6o3DeyPArrow Nome: Deixe como quiser

[Tutorial] Criando Favicon no pixlr NhOA5Z4Arrow Formato: Selecione PNG

[Tutorial] Criando Favicon no pixlr LJ9DeVgArrow Selecione: Ok


[Tutorial] Criando Favicon no pixlr 2tYNykM Resultado Final:

[Tutorial] Criando Favicon no pixlr KYkRphw

[Tutorial] Criando Favicon no pixlr QGUygmL

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissões neste sub-fórum
Não podes responder a tópicos