Este Adobe Photoshop tutorial vai mostrar e discutir a forma de utilização Photoshop para a concepção de um web site que será exportado como html e imagem fatias. Isso pode mais tarde ser levados para um html o programa como editor Adobe Dreamweaver. Este é um Adobe Photoshop web design tutorial que ensina como criar uma página da web diretamente na totalidade Photoshop.
Abraham Chaffin Creativecow.net, Cambria, California E.U.A.
Existem muitas maneiras diferentes de abordar a concepção de um site. Alguns optam por projetar a coisa toda em Dreamweaver, Ou fazer um rápido esboço em papel e, em seguida, construir seu site, Enquanto outros preferem uma abordagem design gráfico e uso Photoshop como a ferramenta de desenho. Criação do seu site como um Photoshop arquivo primeiro faz a criação do seu site mais tarde muito mais fácil por várias razões.
O início de qualquer conceito de design é obter uma boa inspiração de algo que você já pode ver. Tais como um pintor recebe inspiração do mundo que os rodeia, Um web designer também irá receber inspiração do que ver. às vezes que é um site existente, Site templates, Ou a partir de uma foto, Gráfico, Ou o logotipo.
Além de uma boa inspiração está reconhecendo o seu público-alvo e concepção em torno de o que eles estão confortáveis com. O layout e estilo deve estar em conformidade com o que alguns o seu público já está a utilizar. Resolução de tela também deve ser considerado quando se conceber um site. A largura da página, e as primeiras vezes da sua página são importantes para o sucesso do seu site. (a tampa é o espectador vê a sua área antes de terem de se deslocar para baixo a página.), Enquanto apenas acomodar grandes resoluções de tela podem tornar seu trabalho mais fácil se você cortar fora uma parte de sua audiência. A maioria dos usuários da web hoje utilizar resoluções de tela maior do que nunca e, no futuro construído sites para pequenas resoluções de tela irá tornar-se menos de um fator, mas por enquanto ela ainda deve ser considerada.
Também é possível para o seu site para ter uma largura flexível para que ele se expande e contratos com base em uma janela do tamanho utilizadores, Esta é a ideal quando se pretende criar um site que irá acomodar todos. Um site criado para acomodar uma janela do tamanho de pelo menos 750 pixels de largura é a ideal. A resolução mínima utilizada pela maioria das pessoas que hoje é de 800 x 600.
As etapas de criação de seu site usando Photoshop são:
1. Usar Photoshop para projetar a aparência eo layout do site que você está querendo.
2. Fatia a imagem em cima Photoshop, Exportando os cortada imagens ou como uma html. Compreensão html formatação contribui muito para interpretar a forma de cortar a imagem para ir para a html.
3. Criar o html modelo para coincidir com a Photoshop o design do site e largar a imagens em fatias ou utilize Dreamweaver para ajustar o html arquivo que Photoshop criada a partir do seu PSD fatias.
O design do site, neste tutorial será construída a partir de uma imagem de Bessie no seu pasto.
Este deve ser um prazer o site =
Criar um cabeçalho gráfico
A primeira parte da concepção de um website em Photoshop está a criar um cabeçalho gráfico para o seu site. O cabeçalho gráfico é a principal parte gráfica do seu site que será visto em primeiro lugar e será o centro de todo o visual do seu site. Obter o acabados cabeçalho gráfico Aqui.
Passos a seguir:
1. Clique aqui Para salvar a imagem. Salvar a imagem em uma nova pasta.
2. Abra o arquivo baixado em Photoshop.
3. Recortar a imagem para 745 x 320 com a vaca logo no lado direito da imagem. Para fazer isso selecione a ferramenta retangular marquesinha (m), Em seguida, sob o estilo dropdown escolher tamanho fixo. Colocar em 745 px de largura e 320 px de altura. Marquesinha sua posição para criar seu cabeçalho e recortar a imagem (imagem menu cultura).
4. Criar um pequeno pixel 10 pluma no topo da imagem. Selecione a ferramenta gradiente (g), Clique sobre o gradiente no topo ferramenta gradiente janela, Definir o início eo fim de cores branca, Definir o início de opacidade para 0% e termina a opacidade a 100%. Fazer uma nova camada e arraste e criar a rampa de acesso no topo exploração turnos para fazer a rampa reta.
5. Clarear a imagem, criando uma outra rampa sobre a imagem enquanto começando na parte inferior e iluminação para o topo (segure shift para manter a rampa de acesso direto). O ponto final da rampa deve ser de cerca de 300 pixels acima da imagem para dar um belo névoa para o gráfico. Isto dá a aparência de um brilhante dia na fazenda vaca.
6. Finalmente vamos para clarear o cabeçalho gráfico ainda mais longe ao criar outra rampa vertical em direção oposta, como o anterior um. O ponto de início deve ser mesmo com o início da vaca logotipo eo Diversãodo deve ser de 1 pixel acima do Diversãodo do gráfico.
7. Salvar o cabeçalho gráfico em uma pasta onde você está indo para criar seu site utilizando para salvar web (Alt + Shift + Ctrl + S). Como salvar um jpg, Otimizada, Em cerca de 70 qualidade.
Seu cabeçalho gráfico foi agora criado. O gráfico pode ser usado de diversas formas em um site modelo. Utilizá-lo para lá da escala completa e embrulhe a navegação e corpo de Textoo em torno dele, Ou reduzida em tamanho e defini-lo em um modelo mais moderno layout.
Conceber um esquema no site Photoshop
O design do seu site deve ter pelo menos três partes distintas que incluem elementos específicos:
1. Cabeçalho
Logotipo
Gráfica banner
Links / botões para o lar, Sobre, E contacto página
2. Corpo
Conteúdo área de Textoo na página
Imagens ou gráficos integrados com o conteúdo
3. Rodapé
Informações sobre direitos autorais
Ligações a política / termos de uso, E voltar ao topo link
Ao criar o layout em desenho Photoshop não se esqueça de deixar espaço adicional para navegação, Texto, Site e expansão no futuro ou você pode encontrar a necessidade de se reformular completamente seu site, pois você não deixa espaço para mais links para páginas em seu projeto. Os seguintes passos são usados para criar o layout para o Photoshop site layout que pode ser Baixe aqui.
Passos a seguir:
1. Criar um novo PSD arquivo x 600 px 745 px e salvá-lo como modelo.psd
2. Coloque o cabeçalho gráfico no documento. (abrir o cabeçalho do arquivo (g_header.Jpg), Selecioná-lo (Ctrl + A), Copiar (CTRL + C), Activar o layout.PSD janela, Colar (Ctrl + V).)
3. Utilizar a ferramenta mover (v) para mover o cabeçalho para o início da mudança para o layout exploração deixar snap no lugar no topo.
4. Abrir o Logotipo, Copie e cole-o em seu layout.
5. Transformar o logotipo (Ctrl + T) e movê-la para o canto superior esquerdo do layout do site.
6. Usando a ferramenta tipo horizontal (t) Criar um pequeno Textoo ligações no céu entre os dois logotipos no topo do guia. Digite a palavra "casa", 4 espaços, "contato", Mais 4 espaços, E, em seguida, "cerca de". Texto deve ser de cerca de 12 pt, Fonte Arial, Utilizando a cor # a6ff94 para uma diversão leve cor verde.
7. Dar ao Textoo uma dropshadow (camada camada estilo dropshadow), com uma distância de 2 e um tamanho de 3.
8. Posição do Textoo utilizando a ferramenta e mover a seta apropriada ao lado do canto superior esquerdo logotipo.
9. Abaixo do menor vaca logo iremos criar alguns grandes navegação / imagem Links:
Usando a ferramenta tipo horizontal (t) do tipo "casa página 1 página 2 página 3 página 4" usando arial, 17 pt fonte preta com Textoo. Colocar cerca de 4 ou 5 espaços entre as palavras para dar a alguns botões espaço.
Criar uma nova camada
E arraste-o abaixo o Textoo que você acabou de criar
Marquesinha retangular com a ferramenta (m) escolher uma área ao redor do maior navegação.
Selecione a ferramenta balde pinte (g) e preencher a área selecionada da nova camada vazia com (# a6ff94), a cor verde.
Tornar esta camada parecido com um botão de ir para o menu layer layer style bisel e emboss. Usar as configurações padrão pressionando ok
Usando a sua única coluna marquesinha ferramenta apagar uma coluna de pixels entre cada palavra no Diversãodo verde sólida camada que você acabou de criar. Isto vai acabar com o chanfro e tornar cada palavra parece um botão separado. Pode ser necessário aumentar o zoom para obter direito de entre as palavras.
8. Duplicar o botão verde camada arrastando-lo para a nova camada botão Ou vá para o menu camada duplicar camada.
9. Selecione o botão verde camada inferior e adicionar um borrão de movimento na camada com uma distância de cerca de 150 pixels por ir ao menu filtro desfoque Motion borrão.
10. Mover a camada desfocada baixo cerca de 10 pixels e menor a opacidade para 20%. Isto dá uma sutil linha sob seu botões para ajudar a dividir o início a partir do conteúdo.
12. Criar uma nova camada atrás do autor Textoo que passará a ser a Diversãodo por trás do Textoo de rodapé, Certifique-se a camada é selecionada.
13. Utilizar a ferramenta retangular marquesinha (m) para selecionar uma área na parte inferior da página, mas um pouco superior ao autor Textoo.
14. Utilizar a ferramenta balde pinte (g) e preencha o espaço com o verde brilhante (# a6ff94).
15. Pluma o rebordo exterior, usando a camada interna brilham estilo (camada menu layer style inner glow), definiu o modo de mistura ao normal, A cor branca (# ffffff) e do tamanho de 10 pixels.
Temos agora uma simples projetado, Diversão, No site Photoshop com um cabeçalho e rodapé. O espaço em branco entre o cabeçalho eo rodapé serão todos os conteúdos Textouais e as imagens que vão preencher na própria página web.
Imagens em corte Photoshop para a web
Agora que temos um simples website concebido com Photoshop vamos cortá-la em pedaços e exportar as peças como um html arquivo que pode ser posteriormente utilizado e modificado em Dreamweaver. Quando cortar seu website design lembrar que cada fatia irá tornar-se uma célula de uma tabela e imagem para tentar manter as fatias como poucas e tão simples quanto possível. Certifique-se e começar e terminar o seu fatias de fora da concepção, sempre que possível, de modo Photoshop não um erro único pixel você pode ter falhado como uma fatia. Abrir o site design fizemos anteriormente, Selecione o slice tool (k), e vamos começar. (rotura ligar para obter melhores resultados - menu Exibir snap (Ctrl + Shift +;), Certifique-se encaixem às camadas está ligado.) Fazer o download do Fatiado PSD arquivo aqui.
Passos a seguir:
Criar uma fatia em torno de todo o gráfico. Início fora do gráfico e terminar fora o gráfico. Isto irá ajudar a dizer Photoshop para não criar algo único pixel gráficos que não queremos.
Fatia do rodapé gráfico começando e terminando no cinza fora do layout. Deixar o rotura encontrar no topo da camada para você.
Fatia do cabeçalho todo o caminho entre o início começando acima do gráfico na cinza e que termina logo abaixo do maior navegação. Isto deve cortar a vaca em dois (oh não! ). Você agora deve ter 3 fatias de seu cabeçalho porção, O seu conteúdo, E seu rodapé.
Fatia de todos os botões, Tenta certificar-se de que você está tirando a mesma posição para cada botão, para que a altura dos botões são os mesmos. Para o menor, Maior botões você pode pular para a parte inferior das imediações fatia.
Seu Photoshop Web design deve ser cortada e agora pronto para salvar para a web.
Exportadores / poupança Photoshop fatias como uma página da web
Nas versões anteriores do Photoshop guardar uma imagem em fatias para a web só poderia ser feito com imageready, mas agora está tudo construído em Adobe Photoshop CS3. A seguinte parte do tutorial irá mostrar-lhe como guardar as fatias website design fizemos no Photoshop como um html arquivo com imagens associadas.
Passos a seguir:
Com o gráfico fatiado aberta escolher menu Arquivo salvar para web e dispositivos (Alt + Shift + Ctrl + S). Isso leva-se a poupar para a web e dispositivos janela.
Sob o Preset dropdown escolher jpeg elevados para a qualidade e tipo de arquivo. (isto é simplesmente uma preferência.)
Clique no menu seta optimizado para abrir o sub-menu e clique em Editar definições de saída de...
Não vamos entrar em detalhes sobre as definições de saída de aqui. Predefinições de escolher as definições dropdown. Utilização anterior e próximo de olhar para todas as configurações.
Clique em OK e salvar. Certifique-se de salvar em um local que você pode localizar facilmente.
Escolher salvar como tipo: html e imagens (*.html )
Definições: Predefinições
Fatias: Todas as fatias
Clique em salvar
Parabéns você já concebido com êxito um site com Photoshop, é cortada, E, em seguida, exportado com sucesso como uma html arquivo! Existem algumas simples modificações que precisam de ser feito no entanto antes da concepção pode ser plenamente utilizado como uma página da Web ou site modelo, mas vou deixar isso para um outro tutorial.
Agora que temos um simples website concebido com Photoshop vamos cortá-la em pedaços e exportar as peças como um html arquivo que pode ser posteriormente utilizado e modificado em Dreamweaver. Quando cortar seu website design lembrar que cada fatia irá tornar-se uma célula de uma tabela e imagem para tentar manter as fatias como poucas e tão simples quanto possível. Certifique-se e começar e terminar o seu fatias de fora da concepção, sempre que possível, de modo Photoshop não um erro único pixel você pode ter falhado como uma fatia. Abrir o site design fizemos anteriormente, Selecione o slice tool (k), e vamos começar. (rotura ligar para obter melhores resultados - menu Exibir snap (Ctrl + Shift +;), Certifique-se encaixem às camadas está ligado.) Fazer o download do Fatiado PSD arquivo aqui.
Criar um pequeno Textoo ligações no céu entre os dois logotipos no topo do guia. Digite a palavra "casa", 4 espaços, "contato", Mais 4 espaços, E, em seguida, "cerca de". Texto deve ser de cerca de 12 pt, Fonte Arial, Utilizando a cor # a6ff94 para uma diversão leve cor verde.
E arraste-o abaixo o Textoo que você acabou de criar
