Como elaborar um projeto de WebSite?

Você pode relacionar os ítens abaixo com a minha postagem sobre projetos. O resultado será um site muito bem organizado.

Preparação

•Estudar as particularidades do serviço e do cliente;

•Observar projetos semelhantes (Beanchmark);

•Definir metas e estratégias;

•Elaborar um formulário para captar a idéia do cliente sobre o projeto.

Documentação

•Confirmações dos objetivos do site (corporativos, marketing, etc.);

•Escolher um modelo de negócios e plano de Marketing;

•Planejar as interações, tecnologias e funcionalidades;

•Escolher um sistema para gerenciar o conteúdo;

•Escolher banco de dados e modelo de backup;

•Regras e responsabilidades;

•Duração das etapa inicial do projeto;

•Validar o início do projeto com um sinal ($) do cliente;

Planejamento

•Título do website;

•Procurar hospedagem e empresa para registrar o domínio;

•Selecionar o domínio e registrar;

•Registrar domínios parecidos com o seu;

•Elaborar a estrutura do website e informações sobre arquitetura;

•Gerar um rascunho do site para primeiras impressões no photoshop;

Layout

•Definir as fontes tipográficas;

•Pesquisar esquema de cores (paletas);

•Verificar se o esquema de cores é equilibrado; não agride nem gera indiferença em quem vê o site;

•Preocupar-se com os padrões de usabilidade e acessibilidade;

•Criação de um layout básico (eu faço no photoshop mesmo) em HTML/CSS para ser submetido à críticas;

Preparação do Conteúdo

•Montar a equipe para fornecer conteúdo (jornalistas, ilustradores)

•Apresentação do Texto (recepção/atualização/criação);

•Arte (fotos/ilustrações);

•Adicionar conteúdo específico para web;

•Distribuição do conteúdo – manter a página principal leve e efetiva;

•Providenciar uma chamada de ação para cada página;

•Definir os direitos de cópia, termos de uso e política de privacidade;

•Detalhar contatos;

•Página sobre (com autor(s), informações da empresa, créditos… );

•Testemunhos, matérias na mídia e prêmios;

•Descrição de produtos;

•Página de perguntas e respostas frequentes;

•Utilizar palavras chave (etiquetas ou tags) para referenciar conteúdo;

•Validar conteúdo através de uma revisão.

Integração do Conteúdo

•Colocar conteúdo no layout;

•Observar com atenção à hierarquia de conteúdo no layout;

•Definir cabeçalhos (h1, h2, …) e parágrafos;

•Adaptar tamanhos de fonte, espaçamento para melhorar a legibilidade;

•Escolher se você vai permitir ao visitante alterar o tamanho da fonte;

•Identificar e adicionar meta tags, meta descrições e descrições nos títulos;

•Nomear links com tags âncoras para lhes dar sentido semântico;

•Fazer os links consistentes e facilitar a identificação (estilos especiais nos links, como feeds ou emails);

•Adicionar tags “alt” sobre todas as imagens imagens;

•Providenciar um texto alternativo para todas as mídias sem “alt” tags;

Design

•Artes originais (fotos, ilustrações …);

•Logo ;

•Desenho do cabeçalho com clara demonstração do propósito do site e predominância da logo com link para a página principal;

•Adicionar um campo de busca visível no cabeçalho ou no topo da coluna direita;

•Projetar uma barra de navegação objetiva;

•Projetar o corpo do site com colunas e um rodapé;

•Certifique-se que o conteúdo ocupa uma parte relevante na página principal;

•Balancear ilustrações/fotos e texto de acordo com o propósito do site;

•Preparar aparência dos anúncios e links patrocinados;

•Visibilidade de testemunhos, matérias e prêmios;

•Certifique-se que o conteúdo e/ou o design dos elementos facilitem a futura visitação ou o compartilhamento das informações;

•Certifique-se que as informações da empresa e o contato são acessíveis (endreço, telefone …) ou seja, que eles levam o seu visitantes a confiarem na existência física da empresa;

•Se muitas escolhas são disponibilizadas (diferentes produtos do mesmo tipo) destaque claramente o principal para ajudar seus visitantes a escolherem;

•Destaque campos especiais em formulários (erros ou que necessitam de validação);

•Faça com que todos os botões e elementos “clicáveis” sejam destacados ao passar o mause por cima;

•Desenhe um “Favicon”;

•Faça uma revisão do design e envie para o cliente se for necessário;

Funcionalidades

•Construir um banco de dados;

•Implemente um Sistema de Gerenciamento de Conteúdo;

•Defina os Formulários e scripts adicionais;

•Elabore uma Newsletter (boletim de atualizações);

•Customize aplicações;

•Defina as áreas restritas (proteger painel de administração devidamente com login);

Usabilidade

•Fazer URL’s com significado e amigáveis ao visitante;

•Certifique-se que as URL’s são consistentes (www.seusite.com ou seusite.com);

•Se a navegação ou o design ficam confusos o botão de voltar oferece uma alternativa;

•Código otimizado para todos os navegadores atualizados;

•Criar uma página de erro 404;

•Certificar que o visitantes recebe uma confirmação após uma determinada ação;

•Fazer o site amigável para impressão;

•Validação e otimização do (X)HTML, CSS e JavaScript;

•Otimizar o site para que ele possa receber atualizações posteriores;

•Otimizar tamanho de imagens e arquivos;

•Proteção e .htaccess funções (anti-spam, cimpressão, cache, anti-hotlinks, banco de dados … )

Primeiro Teste (off-line – fase alfa)

•Padrões Web;

•Pesquisas de usabilidade e acessibilidade;

•Pesquisas sobre conteúdo, design, identificação;

•Testar links;

•Verificar transações (scripts);

•Corrigir erros e refazer otimização;

Manutenção 1

•Documentação;

•Upload do site para ambiente de uso;

•Colocar scripts de estatísticas e otimização (Analytics, Feedburner, …);

•Configurar agendamento de backup e testar a recuperação do backup;

Treinamento

•Particularidades do CMS, linguagem web;

•(X)HTML/CSS;

•PHP;

•Como construir uma comunidade na web (mídias sociais);

•SEO;

•Web marketing;

Marketing e SEO

•Crear um XML Sitemap;

•Configurar o robot.txt;

•Inserir o site nos motores de busca (Yahoo, Bing);

•Submeter sitemap;

•Comprar ou vender anúncios;

•Newsletter e campanhas de email;

•Monitorar contatos;

•Estimular citações e testemunhos;

•Negociar links;

•Divulgação de nicho (offline);

•Divulgação em mídias sociais (Twitter, Facebook, Digg);

•Eventos, promoções.

Segundo Teste (fase beta)

•Verificar estratégias de SEO;

•Verificar estratégias Marketing;

•Otimização;

•Banco de dados;

•Teste de segurança.

Manutenção 2

•Elaborar um relatório de conclusão e recomendações;

•Queimar CD com o site e arquivos;

•Elaborar um documento seguro com todas as informações de conta (ftp, painel de admin, email’s, …);

•Transferir direitos de cópia para a empresa contratante;

•Atualizar o portfólio;

•Realizar eventos e promoções.

Manutenção 3

•Atividades de Webmaster (feedback do conteúdo, atualizações, novos produtos, … );

•Atualizar sessão de perguntas e respostas;

•Adicionar novas funcionalidades ao site;

•Construir, monitorar e responde a comunidade;

•Colecionar informações estatísticas;

Administração do Processo

•Verificar a evolução do projeto (resultados, metas atingidas, …);

•Revisão do SEO de dois em dois meses;

•Revisão do Plano de marketing e público alvo;

•Atualização da documentação;

•Revisão das regras e responsabilidades;

Se a demanda do cliente for por uma mudança constante ou se ele possui a necessidade de gerenciar email’s da empresa mas não possui um profissional para isso. Faça um contrato com um valor mensal e esteja a disposição para realizar as alterações e orientações necessárias, pode ser o início da prestação de serviços como assessor ou consultor web.

Um forte abraço e sucesso!!!

Removendo o fundo de cabelos

Neste tutorial veremos como é possível criar recortes de cabelo usando os Channels, é de vital importância que a imagem usada seja de alta resolução para um bom resultado.

 

 

 

 

 

 

 

01. Pressione Ctrl+O e abra uma foto qualquer, no caso deste tutorial usaremos a foto abaixo, assim que abrir a foto vá em Window> Channels para abrir a paleta de Channels.

02. Encontre o Channel com maior contraste, no caso deste tutorial o Channel Blue, clique e arraste o Channel até o ícone de Create a New Channel no rodapé da paleta de Channels ou clique com o botão direito do mouse sobre o Channel e escolha a opção Duplicate Channel para criar uma cópia do Channel.

03. Pressione Ctrl+L para abrir a caixa de Levels, arraste os sliders de branco e preto para o centro do gráfico afim de aumentar o preto e branco na imagem.

04. Sua foto deverá ficar parecida com a da imagem abaixo.

05. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra B do teclado para selecionar a Brush Tool, escolha um brush de tamanho médio e pontas duras, deixe todo o interior da imagem preto, pinte qualquer detalhe que esteja em branco, cinza ou que esteja aparecendo dentro da parte em preto, pressione Ctrl+I para inverter as cores, sua imagem ficará como a da foto abaixo.

06. Agora com a tecla Ctrl pressionada clique sobre a miniatura do Channel, isto ativará a seleção ao redor da foto, ative a visibilidade do Channel RGB novamente, vá em Window> Layers para voltar para a paleta de layers, pressione Ctrl+J, clique na layer original e vá em Layer> Hide Layers e você terá o recorte pronto para um novo fundo como na foto abaixo.

site de origem: http://www.photoshop-weblog.com/the-channel-trick-selecting-hair/

Participe deixando seu comentário, dúvida, sugestão, ideias, exemplos ou simplesmente dizendo um "Olá!" na parte de comentários deste Post, sua participação é extremamente importante para o blog e também para todos os leitores que posteriormente terão acesso aos tutoriais e matérias que oferecemos por aqui.

 

Fazendo uma imagem “saltar” para fora do frame

Descrição: Hoje veremos como estilizar uma imagem para que ela “pule” para fora de sua moldura, para isso usaremos diversas ferramentas e recortaremos a imagem.

Descrição: Hoje veremos como estilizar uma imagem para que ela “pule” para fora de sua moldura, para isso usaremos diversas ferramentas e recortaremos a imagem.

01. Pressione Ctrl+O e abra uma foto qualquer no Photoshop, pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção retangular, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra X do teclado para alternar as cores de Foreground e Background, sua cor de Foreground deve ser a branca, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique no documento pare preencher a seleção com a cor branca, vá em Select> Modify> Contract e defina o valor de 15 a 20 pixels, pressione Ok e depois pressione Delete para deletar a parte interna do retângulo, vá em Edit> Transform> Perspective e distorça o retângulo como na foto abaixo, pressione Enter para finalizar a transformação.

02. Pressione a letra W do teclado para selecionar a Magic Wand Tool, a parte interna do retângulo como na foto abaixo.

03. Clique na layer da foto e pressione Ctrl+J para duplicar a parte selecionada para outra layer, clique na layer da imagem original e vá em Layer> Hide Layers para retirar a visibilidade da layer.

04. Clique na layer do frame e defina a opacidade em 50%, clique na layer da imagem original e vá em Layer> Show Layers para ativar a visibilidade da layer, selecione a parte do tanque que sairá do frame.

05. Pressione Ctrl+Shift+I para inverter a seleção, pressione Delete, mova a layer para o topo da paleta de layers, sua imagem deverá ficar como a da foto abaixo.

06. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, deixe esta layer abaixo de todas as outras, escolha um cor qualquer e pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique no documento para preencher a layer com a cor escolhida, no final sua imagem ficará como a da foto abaixo.

Faça um quebra-cabeça com sua foto!

Utilizaremos a foto abaixo para fazer nosso quebra-cabeça. Primeiro passo: Abra a foto (menu arquivo/opção abrir).

Utilizaremos a foto abaixo para fazer nosso quebra-cabeça. Primeiro passo: Abra a foto (menu arquivo/opção abrir).

Primeiro passo: Abra a foto (menu arquivo/opção abrir).

Segundo passo: Clique no menu filtro opção textura e escolha a opção chamada de texturizador . Veja a imagem abaixo:

Quando você instala o Photoshop, automaticamente ele instala uma série de texturas. No nosso caso iremos buscar uma textura chamada quebra-cabeças. Veja a tela abaixo:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Terceiro passo : Clique no botão indicado pela seta vermelha, e aparecerá uma opção chamada carregar textura. Feito isso você terá que procurar a pasta onde encontram-se as texturas do photoshop.Veja a imagem abaixo:

 

 

 

 

 

 

 

 

 

 

 

 

Nessa pasta texturas você encontrará a textura quebra-cabeças.

Veja que, à sua direita, aparecem duas barras que deslizam: uma chamada Escala e outra chamada Relevo. Uma terceira opção chama-se Suave.

Escala: altera o tamanho das peças do quebra-cabeça.

Relevo: você pode fazer com que as peças se sobressaiam.

Suave: permite escolher a direção das peças do quebra-cabeça.

Não existe um valor específico para informar. Experimente modificar à seu critério.

Confira o resultado:

Conheça o Photoshop e altere a cor dos Olhos em Imagens

Primeiramente separamos as telas por numeração, para que você compreenda e entenda a seguinte tela.

1- O Photoshop, assim como a maioria dos programas, trabalha com menus, que oferece ao usuário diversas opções de configurações para os seus trabalhos. Exemplos de menus: Arquivo, janela etc.

Logo abaixo dos menus temos a barra de propriedades, que tem como utilidade oferecer opções de configurações das ferramentas usadas no momento.

2- A caixa de ferramentas é essencial no Photoshop. Você deve ficar atento, pois existem opções com uma pequena seta na parte inferior direita indicando que, mantendo o mouse pressionado, outras opções aparecerão.

3- As paletas no Photoshop, assim como as ferramentas, tem sua utilidade, pois através delas conseguimos fazer determinadas configurações.

Toda as paletas são habilitadas pelo menu janela (Window). Dentre todas as paletas a que mais se destaca é a paleta Camada.

Para quê serve a paleta Camada?

A paleta camada é de suma importância, pois através dela conseguimos fazer separações.

Exemplo: Imagine você pegando sua foto e mudando no photoshop a cor do seu cabelo. Imagine que você salve sem ter criado nenhuma camada para ter pintado o cabelo, só que em outro dia você enjoou daquela cor e abriu novamente sua foto e escolheu uma azul. O que aconteceu?

Resposta: Toda a foto, por inteira, ficou azul. Lembre-se de criar separações para suas montagens!

Para criar uma nova camada, basta clicar no menu camada / nova camada, ou na paleta camada clicar no botão criar nova camada.

Para ativar a paleta camada aperte a tecla F7.

Aprenda a mudar a cor dos seus olhos com o Photoshop

Nível: Básico

Aplicativos necessários: Photoshop

Se você é uma pessoa frustrada por não ter nascido com belos olhos azuis ou verdes, ou simplesmente gosta de brincar e realizar modificações em suas fotos, vai adorar esse tutorial, onde ensinaremos como mudar a cor dos olhos utilizando uma ferramenta simples do Photoshop. Para isso, basta escolher uma foto para teste e acompanhar o passo a passo abaixo.

Foto original (Foto: Flickr/bcmom)

Passo 1. Abra a foto escolhida no Photoshop.

Passo 2. Clique em "Edit in Quick Mask Mode" ou aperte a tecla Q.

Passo 3. Selecione a ferramenta "Brush Tool". (letra B)

Passo 4. Clique na seta preta na barra horizontal superior ("Click to open the Brush Preset picker"), ao lado das opções de Brush.

Passo 5. Defina o nível "Hardness" para 0%.

Passo 6. Selecione a cor preta e ajuste o tamanho do Brush ("Master Diameter") com o tamanho da Íris do olho.

Passo 7. Clique sobre a área que terá a cor alterada, deixando-a com uma seleção vermelha.

Passo 8. Aperte novamente a letra "Q", ou clique em "Edit in Standart Mode".

Passo 9. Clique sobre a opção "Select" e, em seguida, selecione a opção "Inverse" (atalho: Ctrl+Shift+I)

 
 
 
 
 
 
 
 
 
 
 
 
 
 
Hue/Saturation (Foto: Reprodução/Anderson Rodrigues)

Passo 10. Clique no menu "Adjustments" e selecione a ferramenta "Hue/Saturation" (atalho: Ctrl+U)

Passo 11. Deslize o cursor pela barra "Hue" até atingir a cor desejada e então clique em "OK".

 
 
 
 
 
 
 
 
 
 
 
 
 
Resultado final (Foto: Reprodução/Anderson Rodrigues)

Simples, não? Agora você poderá realizar vários testes com diferentes tons e deixar seus olhos com a cor que quiser. No exemplo acima, a cor escolhida  foi um tom de verde, mas nada impede que você opte por utilizar cores diferentes em suas fotos.

Como mudar a cor do cabelo no Photoshop

Nível: Intermediário

Aplicativos necessários: Photoshop

O Photoshop é um software completo. São vários os recursos e opções oferecidas aos usuários, e há quem diga que, conhecendo-se todos eles, é possível fazer praticamente qualquer coisa.  o objetivo desse tutorial é ensinar, em apenas alguns passos, como mudar a cor do cabelo de uma foto. Veja abaixo:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Foto original (Foto: Flickr/MyTudut)

 

Passo 1. Escolha uma imagem e abra-a no Photoshop.

Passo 2. Clique em "Edit in Quick Mask Mode" ou aperte a tecla Q.

Passo 3. Passo 3. Selecione a ferramenta "Brush Tool". (letra B)

Passo 4. Clique em "Click to open the Brush Preset picker"(seta preta ao lado das opções de Brush).

Passo 5. Defina o nível "Hardness" para 0%.

Passo 6. Selecione toda a área do cabelo. Para maior precisão, ajuste o tamanho do brush e o nível de zoom.

Passo 7. Terminada a seleção, clique em "Edit in Standart Mode" ou aperte a letra Q novamente.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Menu Hue/Saturation (Foto: Reprodução/Anderson Rodrigues)

 

Passo 8. A área selecionada é todo o resto da foto que não o cabelo. Para inverter a seleção, clique em "Select" e, em seguida, selecione a opção "Inverse" (atalho: Ctrl+Shift+I).

Passo 9. Com o cabelo selecionado, clique em "Adjustments" e selecione o recurso "Hue/Saturation". O atalho para essa função é o comando Ctrl+U.

Passo 10. Na janela da ferramenta, marque a opção "Colorize", no canto inferior direito.

Passo 11. Ajuste a barra "Hue" para definir o tom de cor desejado.

Passo 12. Mova o cursor pela barra "Saturation" para escolher a intensidade da cor.

Passo 13. Na barra "Lightness", ajuste o nível de luminosidade. Cuidado para não escurecer ou clarear muito o cabelo e perder os detalhes.

Passo 14. Clique em "OK" e confira o resultado.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Cabelo com a cor mudada (Foto: Reprodução/Anderson Rodrigues)

Agora você poderá brincar a vontade com as variações de cor do seu cabelo no Photoshop, sem correr o risco de ficar insatisfeito e arrependido. Os mesmos passos acima podem ser aplicados em diferentes situações, como, por exemplo, para mudar a cor de uma camisa ou para mudar a cor dos olhos