Introdução
Uma coisa que você notará como você continuar com este tutorial é a facilidade com que este site poderia ser transformado em um blog sobre design, homepage uma empresa de software ou de uma comunidade de fonte aberta. Todos os módulos sobre as laterais direita e esquerda pode ser trocado e mudou-se com facilidade e em torno do conteúdo foi concebido para ser flexível.
Ao longo deste tutorial, você verá uma grande ênfase sobre os princípios e métodos de design Photoshop útil para melhorar o seu fluxo de trabalho e design de web sites. Enquanto este site tem o seu estilo próprio, o principal objectivo deste tutorial não é reproduzir exatamente esse estilo, mais esperança é que você ganhar uma melhor perspectiva de web design no Photoshop que podem melhorar a sua abordagem e acelerar sua produção.
Final Image Preview
Dê uma olhada na imagem que vamos criando. Querem ter acesso aos arquivos PSD completa e cópias download de cada tutorial, incluindo este? Join Psd Plus por apenas R $ 9/month. É possível visualizar a visualização da imagem final abaixo.
Passo 1 - 960 Grid System
Se você ainda não estiver, pule para 960.gs e se familiarizar com o sistema de rede 960 e porque ele vai ser tão útil para este tutorial. Quando você estiver lá não se esqueça de fazer o download do modelo.
Depois de ter baixado o arquivo, descompacte e abra "960_grid_12_col.psd" que pode ser encontrado em 960_download> Modelos> Photoshop. Quando você abrir o arquivo, será evidente a rapidez com que isso permitirá que você a criar e manter a estrutura em projetos web. Tome nota especial das linhas guia, que lhe permitirá criar objetos que se encaixam perfeitamente alinhado com a grade.
Se você seguir as guias até o governante, então você pode ver claramente as dimensões exatas do pixel do grid - com 60px colunas de largura e 10px de cada lado (criação de 20px entre cada coluna). Se você não vir a régua ou o desejo de se livrar dele, então você pode alternar com Command + R.
Os guias são quase irresistível, uma vez que você começar a desenhar o que realmente vai ficar no caminho. Você pode alterná-los clicando em Exibir> Extras ou simplesmente usar o atalho Command + H.
Você vai precisar de mais espaço em sua tela para este tutorial. Expanda a tela (Command + Alt + C) e 1400px por 1340px. Você pode apagar tudo, exceto a camada de fundo. Dê um duplo clique na sua camada de fundo e pressione OK para desbloqueá-lo.Renomeá-lo "BG".
Salvar (Ctrl + S), este arquivo como "my_web_tut01.psd" em sua própria pasta chamada "My tut web" Depois de cada etapa deste tutorial, você deve bater Command + S e cada par de medidas hit Command + Shift + S e salve uma nova cópia "my_web_tut02.psd", "my_web_tut03.psd", etc ... Saving parece um acéfalo para um monte de designers, mas descobri que ainda não parar um monte de profissionais de slacking sobre este assunto.
Etapa 2 - Trabalhando com a grade Parte I
OK, você tem preparado a tela, agora você precisa para desenhar no fundo e área superior. Arraste sobre a régua superior para criar um novo guia, traga-a para 120px. Este será o limite inferior do espaço de cabeçalho. Derrubar mais dois guias para 130px e 140px. Agora existe a mesma largura do espaço entre o cabeçalho eo conteúdo que temos entre as colunas. Está começando a parecer uma boa rede!
Use a Ferramenta Retângulo (U) para desenhar um retângulo preto em toda a área do cabeçalho. Isto pressupõe que você tenha o conjunto padrão preto como a cor de primeiro plano, se você não pode simplesmente pressionar D para redefini-la.Comece o seu retângulo de fora da tela ao longo da guia e terminá-lo fora para o outro lado também. A vantagem de alargar este elemento é que você não verá nenhuma do efeito em relação ao perímetro que você pode querer aplicar a borda inferior do retângulo, como um acidente vascular cerebral, brilho interno, etc Nome do seu retângulo "Header BG. "
Etapa 3 - Trabalhando com a grade Parte II
É hora de começar a bloquear a sua grade. Este projeto é composto de três colunas de conteúdo - na barra lateral esquerda terá uma duração de três colunas, a média / conteúdo principal terá uma duração de sete colunas e barra lateral direita terá uma duração de duas colunas.
Embora as grandes obras para o cabeçalho para colocar em orientações, o restante do projeto será um processo mais fluido, então você não será guias de desenho horizontal entre cada seção. Não se desespere! Você ainda será capaz de alcançar o espaçamento Perfect Pixel, pressionando Shift + Setas enquanto tiver a ferramenta Move (V) selecionados. Cada vez que você faz que a camada selecionada irá mover 10px.
Você estará criando cantos arredondados para este projeto. Cantos arredondados fazer para que seu conteúdo é muito visível seccionado. Olhar para trás a imagem final, você percebe como a "Twitter Feed módulo" há muitas caixas dentro de uma caixa com cantos arredondados? Agora, considerar se os cantos eram nítidas - o "Twitter Feed" não se sentiria como um único módulo tanto.
Você também deve ter em conta que as cores, gradientes e fontes estão ajudando a tornar esta uma entidade definida, mas os cantos arredondados definitivamente ajuda. Além disso estar ciente de que só porque trabalho cantos arredondados para este projeto, há milhares de locais bonitos que não usam cantos arredondados. Dê uma olhada Psdtuts + - cada canto é nítido, porém, outras estratégias, como contraste e acidentes vasculares cerebrais são usados para manter o layout claro. Outras leituras podem ser encontradas aqui e aqui
Discussão design Chega! Selecione os cantos arredondados Tool e defina o raio de canto para 8px.Desenhar uma caixa no topo da coluna à esquerda e à direita, dê-se algum espaço para adicionar conteúdo mais tarde.
4 ª Etapa - Tipografia
Primeiro, crie uma área de texto no meio / área de conteúdo principal e preenchê-lo com um forro de uma cativante como na imagem final. Use a Rockwell fonte ou outra placa-serif 40pt a 48pt com Leading (Line Altura). Rockwell pode ser baixado aqui.
Em seguida, adicione algum texto fictício abaixo e em conjunto com Verdana 12pt com 20pt Leading.Também adicione em um Casal sub cabeçalhos que estão em Verdana Bold 17pt com 30pt Leading.
Agora que você tem os detalhes, vamos falar de tipografia. Uma regra geral de que você vai encontrar repetido em toda a comunidade web design é que um site deve utilizar apenas duas fontes. Neste layout eu escolhi para usar as fontes Rockwell e Verdana. Verdana é uma fonte segura na Web, enquanto Rockwell não é. Devido a isso, todas as instâncias da Rockwell terá de ser imagens quando este projeto é convertido em XHTML / CSS.
Isto significa duas coisas para você. Primeiro, para manter o tempo de carregamento baixo, você deve considerar um uso mínimo de web fontes não seguras. A imagem final, que contém menos de dez casos de Rockwell, a maioria deles ficam em cima de cima de algum elemento gráfico como um botão que já será uma imagem quando a codificação. Segundo, você pode adicionar efeitos como sombras e gradientes ao texto. Estas duas razões combinar com a inclusão da Rockwell, o que é melhor para os elementos tradicionalmente mais decorado de um projeto como cabeçalhos, títulos e botões.
Há uma última consideração que pode ou não se aplicam ao seu projeto e que está tendo em conta as futuras Search Engine Optimization (SEO) de trabalho. O texto, que é baseada em imagem - todas as instâncias da Rockwell para o web design - não são rastreadas e analisadas pelos robôs do Google. Isso significa que você terá de projeto de modo que haverá uma abundância de fontes da Web seguro onde palavras-chave podem ser captados pelo Google.
O próximo ponto sobre tipografia e web design em geral, é a consistência, coerência, consistência! Se você usar Rockwell para um botão, use-o para todos os botões! Se você fizer alguns links cor de rosa, fazer todas as ligações de-rosa! Ser consistente permitirá que o seu projeto para olhar afiado e coeso.
Por último, uma palavra sobre usabilidade e tipografia. Sua cópia necessita de espaço para respirar, dar-lhe uma altura de linha decente e você verá um mundo de diferença. O ilovetypography.com site sugere que a altura da linha deve ser de pelo menos 140% de seu tamanho da fonte. Além disso, você deve estar ciente de que uma área de texto mais amplo do que 600px é uma pressão sobre os olhos, mas se você estiver indo para ir mais seria uma boa idéia para aumentar a altura da linha proporcionalmente. Há sempre mais a aprender sobre tipografia - aqui é um bom começo.
Passo 5 - Cor
Preto e branco é chato, o tempo para um pouco de cor! As cores deste projeto foram inspirados pelo tema Hash Wordpress One
Eu poderia mostrar-lhe como criar uma amostra de costume para carregar com as cores do seu site, mas não pode usar este mesmo. Em vez disso, usando a ferramenta retângulo, você pode simplesmente desenhar uma grade de quadrados grandes, à margem da sua tela e enchê-las com as cores que você estará usando. Eu acho esse método mais rápido e mais acessível.
As cores selecionadas fornecer um contraste grande para dar a profundidade de algum site. Sinta-se livre para usar qualquer combinação que você gostaria, mas, por favor considere contraste, legibilidade e harmonia na escolha de suas cores. Se você está tendo problemas com as cores que você, tente usar oColor Scheme Designer.
As cores deste tutorial são (da esquerda para a direita, de cima para baixo):
- Cinza escuro é # 090909, # 232323 e # 4F4F4F
- Pnks são # f35455, # ff7c7d e # ffb9ba
- Cyans 49afe9 e são # # 67c8ff
- Light Grays afe2ff são, # a8bdc4 e # eaf0f1
Adicionar todos estes retângulos para uma pasta com o nome "amostras". Usando todas as letras maiúsculas para nomes pasta torna visualmente mais fácil de encontrar camadas de pasta quando as camadas começam a ficar confusas. Agora também seria uma boa hora para começar o seu cabeçalho "," da barra lateral esquerda "," MAIN CONTENT "e" barra lateral direita "pastas.Mais uma boa prática para chegar a sua coloração é em camadas para melhorar o seu fluxo de trabalho. Basta botão direito do mouse sobre o ícone do olho ao lado de cada camada para selecionar uma cor.
Passo 6 - Gradients Parte I
Gradientes pode realmente melhorar a sua concepção, porém, se você não tiver cuidado, gradientes pode realmente desabilitar o seu design. Aqui está a minha sugestão: Vá louco com a sua inclinação, apenas tornar tudo muito sutil.
Dê um duplo clique no "Header BG camada" e selecione Gradient Overlay. Clique sobre o gradiente que aparece para abrir o Editor de Degradê. Eliminar todas as amostras, exceto as duas primeiras - plano de fundo e de primeiro plano como transparente. Agora crie um degradê mais escuro o cinza ao cinza médio e prima de novo para acrescentar à Presets. Repita este procedimento até ter oito gradientes de novo - quatro obscuridades para médios e quatro mids de obscuridades. Clique em Salvar para salvar estes em uma nova pasta chamada "Ativo". Em seguida, coloque-o na pasta raiz para este projecto. Agora sempre que você voltar a este projeto ou você terá todos os gradientes ali.
Para seus cabeçalhos BG "camada", use o gradiente médio para iluminar as amostras de cinza escuro.
Passo 7 - Gradients Parte II
Para que sua inclinação sobre o "BG" camada que você vai querer criar um gradiente de pouco mais complexa. Haverá realmente ser dois gradientes no "BG gradiente". Quando chega a hora de código eles serão separados os arquivos de imagem, mas para nós só precisamos de fazer um gradiente complexo.
Observe como há uma pequena secção da gradiente que vai ser da mesma cor? Esta será a cor de fundo do seu arquivo HTML e permitirá que a página web para crescer, mas o gradiente no topo de permanecer no topo e do gradiente no fundo para ficar na parte inferior.
Passo 8 - Trabalho com Illustrator Parte I
Photoshop é um programa fantástico, mas se eu descobrir que você está criando logotipos no Photoshop vou comunicar-lhe a Adobe. Logos deve ser criado em um programa de vetores - para este tutorial vamos usar Illustrator.
Abra um novo arquivo no Illustrator e criar seu logo (Nota: Em projetos reais você nunca deve estar começando o seu design web antes de você ter um logotipo). Enquanto o logotipo neste exemplo usa Rockwell, com uma terceira fonte para o seu logotipo não é muito de uma preocupação. Salve o seu logo no Ativo "pasta onde você colocou o arquivo de gradiente.
Depois de ter este logo, temos de trazer de volta para o Photoshop para alguns estilos. Basta abrir o Photoshop eo Illustrator ao lado da outra e arrastar as peças do seu logotipo sobre o Photoshop. Uma vez que cada parte terá um estilo único, arrastando-os individualmente, em oposição a como um todo vai ajudar quando você iniciar estilo.
Para alinhar as peças separadas trazer uma versão do logotipo inteiro, menor a transparência e usar como um guia para correspondência. Excluí-lo quando estiver pronto. Shift-clique em todas as camadas do logotipo e pressione Command + G para agrupá-los em uma nova pasta. Renomear esta pasta "LOGO" e colocá-lo dentro do HEADERS "pasta".
Cada peça será automaticamente transformar em um objeto inteligente. Isso significa que eles continuarão a agir como um objeto como vetor no Illustrator - que você pode usar a ferramenta Transform (Ctrl + T) livremente, sem perder qualidade.
Etapa 9 - Efeitos
Depois de ter feito sob medida e colocado seu logo, você precisará do estilo dele. Use o gradiente que você criou antes de dar o logotipo alguma profundidade - misturar as cores para cima, mas manter a cor mais escura do gradiente no fundo, para ambas as palavras.
Em seguida, adicione uma sombra de uma das peças. Defina o Blend Mode para Multiply em 100%.Certifique-se de ter Use Global Light selecionado e configurá-lo a 120 graus, com 1px de distância, espalhar 0%, e 1px de tamanho. Ao permitir Global Light você irá definir todos os efeitos com sombras de ser a mesma - lembre-se de coerência, consistência, coerência!
Eu li em torno de pessoas mostrando como copiar e colar estilo de uma camada, enquanto que é um bom método para as camadas que estão muito distantes, aqui estão algumas formas rápidas para mover e duplicar os efeitos. Assim como quando você deseja multiplicar uma camada sobre a tela e na paleta Camadas, segurando a tecla Alt e arrastando uma nova cópia da referida camada - você pode duplicar os efeitos com o mesmo método.
Alt-drag no símbolo fx na camada de origem para a nova camada e vai substituir a nova camada com todos os efeitos da primeira camada. Se você só quer duplicar o Drop Shadow, porém, em vez do símbolo fx, em seguida, Alt-arrastar o efeito individual para uma nova camada e você terá somente que substituir um efeito, ou adicioná-lo sobre se a nova camada não tem é ativado. Use esse método para garantir que todas as camadas do logotipo tem a mesma sombra.
Passo 10 - Gráficos
Selecione a opção "Cabeçalho BG camada". Abra os efeitos e adicionar em uma borda de 1px preta com a posição definida para dentro. Em seguida, dar-lhe um brilho externo que tem o Blend Mode: Multiply, Opacity em 40%, de cor preta e tamanho de 9px.
Volte para o Illustrator e criar algumas formas interessantes e criativas que será usado como fundo de luz para a área do cabeçalho. As formas de cor branca, arrastá-los para o Photoshop, definir seu modo de blend para Screen e sua opacidade em diferentes montantes de 2-10%. Tome um outro olhar para a imagem final, você irá notar que existem muitos círculos e os cursos de círculos utilizados, estes foram todos criados no Photoshop. Para as formas mais complexas, o Illustrator é mais rápido, mas para os círculos que você realmente economizar tempo basta criá-las no Photoshop.
Agora vamos fazer um círculo com apenas um curso mostrando o branco no Photoshop. Criar um círculo preto com a ferramenta Ellipse, em seguida, abra os efeitos para essa camada e dar-lhe um golpe branco.Fechar os efeitos e, em seguida, definir que é Blend Mode para Screen, você vai ver tudo, mas o golpe branco desaparecer. A maior vantagem é a capacidade de alterar a largura do curso simplesmente abrindo os efeitos e editá-lo.
Passe algum tempo brincando com isso, experimentar com diferentes opacidades e composições - funky criar algumas formas que podem ajudar você individualizar este projeto. Não se preocupe se algumas de suas formas são visíveis abaixo do cabeçalho, nós vamos cuidar disso na próxima etapa.
Passo 11 - Masking
Selecione todas as formas e colocá-los em uma pasta acima da "Header BG camada". Comando do mouse sobre a máscara de vetor (a caixa cinza) do "Header BG" para ver todo o cabeçalho selecionado na tela.Agora, selecione a pasta que você acabou de criar e clique no pequeno botão na parte inferior da janela de camadas chamado "Add Layer Mask"
Mascaramento é algo que eu realmente não vejo bastante em minha prática profissional, é muito útil e rápida, ea melhor parte é que é um método não-destrutivo. Considere que você poderia apenas ter aplainado as formas em uma camada e excluída a área de fora. Mas então você quis mudar alguma parte da composição ou o curso em um dos círculos - mascaramento faz voltar atrás e fazer mudanças mais rápidas.
Passo 12 - Gráficos Parte I
Abaixo do cabeçalho você verá alguns gráficos que se assemelham a de cabeça para baixo colinas.Utilizando as cores Swatch e jogar com a transparência que você pode conseguir este olhar.Eventualmente, estes terão de ser adaptado para a telha na horizontal.
Vamos considerar por um segundo estas eo resto dos elementos não funcionais do projeto. Há uma quantidade razoável de, bem, apenas gráficos um pouco aleatório. Qual a contribuição que essas acrescentar ao projeto? Primeiro, os gráficos como este são uma ótima maneira de direcionar o sentir eo humor de um site, uma ótima maneira de ajudar a propagar uma marca.
Enquanto eu quase não têm a perícia para se explicar marcar, vou tentar dar-lhe um rápido resumo para que você possa colocar tudo isso em perspectiva. A marca é tudo sobre uma empresa que um consumidor se sente - as emoções, memórias, sons, cores, experiências, etc Marty Neumeier, em seu livro A Brand Gapexplica muito claramente que "A marca não é o que você diz que é. É o que eles dizem que é. " Assim que isto tudo tem a ver com os gráficos? Bem, enquanto você não pode construir uma marca, você pode ajudá-lo a crescer na mente de um cliente continuamente fornecendo recursos visuais que evocam a essência de sua empresa.
OK, então dê uma olhada na imagem final, o que é dizer a você sobre essa empresa? Meu foco era fazer as cores e as formas de traduzir um sentimento de diversão e funkiness, mas a estrutura e layout de grade estrita dar um sentido de profissionalismo e seriedade. É este o tipo exato que cada empresa pretende construir? Certamente que não, cada empresa deve ser único e cada site expulsar uma aura diferenciada.
Passo 13 - Trabalhando com o fundo
Ocultar tudo, mas o "BG" camada. O pano de fundo deste projeto é emoldurada por um grande retângulo arredondado. Isso adiciona um pouco mais de estrutura e profundidade ao seu design. Desde que você não estará dando o conteúdo principal sua própria caixa como as laterais, este é um bom método para lavagem do gráfico de segundo plano e melhorar a legibilidade. O retângulo branco arredondado 8px tem um raio, o mesmo que as caixas - outro detalhe consistência. Você vai encontrar mais efeitos na imagem abaixo.
Usando o mesmo método com o cabeçalho, trazer algumas formas do Illustrator e deslocá-las para fazer gráficos pouco.Enquanto você continua projetando você provavelmente vai encontrar-se em torno de inquietação com eles para encontrar uma composição que funciona bem. Mix de suas sombras de cores escuras e transparência.
Você pode observar o ícone do logotipo é muito utilizada, uma espécie de lembrete subliminares. Eu tinha um professor de cinema na faculdade que me ensinou que uma imagem, cor, etc precisava ser repetida pelo menos três vezes em um filme para um usuário de lembrar e ter sentido a partir dele. Eu tento usar esse princípio com a minha concepção - o logotipo foi repetida inúmeras vezes (com bom gosto e dentro da razão) com a esperança de que o usuário irá se familiarizar com a empresa e lembre-se o ícone.
Passo 14 - Links, Hover Estados e Projetando Funções
A navegação deste projeto é fortemente influenciado em meu site atual favorito - aviary.com.
A casa pequena gráfica e da palavra casa são um pouco mais brilhante e não há um fundo cinza claro por trás dele - este é para melhorar a usabilidade. Pense como o usuário! Deixá-los saber facilmente qual página eles estão. Maneira comum de fazer isso é através de abas, cor, sublinha, destaques e gráficos extra. Pense sobre estas opções e ser criativo com a sua abordagem.
Para obter links e botões, um estado de foco é uma grande melhoria para a sua usabilidade. Olhar para trás novamente para a imagem final e olhar para alguns dos links. Um planejamento bem feito vai considerar o que estes parecem e como elas funcionarão. Se você não codificar seus próprios sites, use uma pequena imagem de um cursor link para indicar para os programadores que está acontecendo. As funções ocultas como um menu drop-down (foto abaixo) devem ser consideradas e totalmente projetado. À espera de encontrar o seu belo design está emparelhado com alguma gota hediondo suspenso será deixá-lo louco. Se você é o criador, cabe a você a considerar todos estes.
A imagem do cursor link pode ser encontrado como um PNG, juntamente com alguns recursos de desenho mais livre aqui.
Passo 15 - Pixel Fonts
Reparou que emblema NOVO!? Eu só quebrou uma das minhas primeiras regras! Bem, vamos fazer uma pequena excepção para fontes pixel! Pixel fontes não tem nenhum anti-aliasing, isso os torna muito nítidas.Esta crocância muitas vezes pode ser desagradável para um tamanho normal da fonte, mas fontes pixel função maravilhosamente em tamanhos pequenos. Dê uma olhada em como Verdana ilegível ea Geórgia estão em 8pt contra as fontes pixel, uma grande diferença, sim?
Pixel fontes são populares em Flash, que carregar mais rapidamente e manter essa frescura, mas eles trabalham bem em web design também! OK, então agora que você sabe sobre as alegrias de fontes pixel, certifique-se de usá-los com moderação. Para aplicações como este novo pequeno crachá! Ele funciona muito bem, mas na maioria das vezes você não deve usá-los para muitas outras aplicações - ninguém quer ler mais do que algumas palavras em uma fonte pixel. A fonte usada neste exemplo é chamado Uni 5063 e pode ser descarregado gratuitamente a partir Miniml.
Agora, examine os cantos arredondados do menu suspenso. O fundo branco é realmente construído a partir de três retângulos de cantos arredondados. O terceiro foi virado do avesso com a Direct Selection Tool para fazer um canto arredondado interior.
Passo 16 - Texto Styling
Transforme suas laterais brancas e criar guias que dão a cada uma de suas laterais um preenchimento de dez pixels. Adicionar em todo o texto simulado que irá utilizar e duplicar as laterais, conforme necessário.Para estender ou contrato-los verticalmente use a ferramenta de seleção direta para selecionar o fundo quatro pontos de ancoragem e cutucar aqueles baixo ou para cima com o teclado. A próxima etapa é afinar o estilo de todo o texto.
Todo o texto foi organizado em uma hierarquia de importância e foco, e isso é sinalizado através do estilo do texto. O maior tamanho de letra e cor escura (leia-se: maior contraste) é reservado para a manchete principal conteúdo. A manchete sub é maior e mais escuro do que o corpo principal eo corpo principal é maior do que o conteúdo da barra lateral, e assim por diante.Esteja ciente de que todas as cores são das amostras - a coerência, consistência, coerência!
Passo 17 - Styling as laterais
Agora que você organizou todas as caixas de lateral eo texto é colorido de forma apropriada, você pode começar a denominar as caixas. Dê a cada entrada de um gradiente de fundo muito leve e usar a ferramenta de linha para desenhar uma linha horizontal na parte superior do gradiente. Estes irão separar visualmente cada entrada. Dê a caixa lateral uma sombra de luz.
Para o fundo da área de título de seções lateral, desenhar um rectângulo sob a outros estilos / formas e adicionar um Gradiente Overlay de rosa e um curso 1px preenchido com um gradiente horizontal reflecte-de-rosa para o branco. Em seguida, dar a camada de fundo título uma Layer Mask na forma da caixa da barra lateral.
Repita essas etapas para todas as caixas de barra lateral do seu projeto tem. Se você está interessado em criar a caixa de Inscrição newsletter, deixe espaço para ele e vamos cobri-lo no próximo par de passos.
Passo 18 - Trabalhando com o Illustrator Parte II
Para criar esse pequeno gráfico na parte inferior de cada caixa lateral será muito mais rápido se você trabalha com Illustrator apenas um pouco mais. Ilustrador geralmente é configurado para ser no modo de cor CMYK, no entanto, uma vez que você está projetando para a tela o modo de cor terá que ser alterado para RGB. Mudar para o Illustrator e vá para File> Document Color Mode> RGB Color. Em seguida, você vai precisar para extrair o rodapé desejado gráfico.
Agora voltar para o Photoshop, selecione as três amostras de meio de cinza escuro, rosa e turquesa - arrastá-los para Illustrator.Use a ferramenta Conta-gotas (I) no Illustrator para colorir o gráfico como desejar. Arraste o gráfico em Photoshop, tamanho e local em conformidade. Você pode adicionar alguns efeitos também, fui com um leve Drop Shadow e um sutil Gradient Overlay (preto a branco, com um modo de blend do Multiply e Opacity de 10%)
A vantagem deste processo está a ter um objeto inteligente que já está colorido. Se você tivesse que arrastá-lo para o Photoshop e na tentativa de cor as partes individuais que seria um processo mais longo que exige que você rasterize o objeto inteligente e criar mais de uma camada.
Passo 19 - Gráficos Parte II
Eu não vou ficar muito louco nas idéias por trás dos gráficos e de branding como antes, mas eu quero tocar em alguns dos novos gráficos no site. Na imagem final, há uma série de gráficos similares ao do Passo 18, mas eles são um pouco mais complexa. Depois de ter elaborado as formas de seu gráfico abrir os efeitos e adicionar um Gradiente Overlay.
Você pode ver como as cores são dispostas no gradiente para dar a aparência de uma divisão nítida entre os tons mais claros e tons escuros. Tenha em mente que há um número de maneiras de conseguir isso, incluindo o uso de retângulos brancos e máscaras de camada.
Estes gráficos são excelentes para que encerram e personalizar os ícones. Como o ponto de interrogação na seção do corpo principal Did You Know ... qualquer ícone ou símbolo pode ser colocado lá dentro. Os exemplos abaixo ícones uso do livre packSimplício e muitos mais pacotes de ícone livre pode ser encontrada no ícone Pot.
Passo 20 - Buttons
Surpreendentemente, para mim, uma das partes mais difíceis de web design é a criação de botões personalizados. Estes botões seguir o que foi apelidado de "Web Design 2,0" pela comunidade web design.
Primeiro, vamos examinar alguns dos botões na imagem final. Por razões de coerência do texto em cada botão é Rockwell Bold, exceto o botão de login, devido à sua pequena dimensão - Rockwell não funciona bem em tal tamanhos pequenos. Além disso, todos os estilos do texto e os botões de fundo são os mesmos.
Procurando próximo ao botão de zoom que você pode ver alguns dos efeitos mais de perto. Um monte de efeitos utilizados são muito comuns para a criação desse estilo Web 2.0, especialmente um curso 1px ao redor do botão, sombras sobre o texto e da caixa, ícones, algo para dar a impressão de 3D e gradientes.Você pode ver o Siga-nos botão usa todos estes. Para criar o efeito 3D um Drop Shadow Inner foi aplicado para a caixa de fundo. Olhe atentamente e você verá que o texto tem uma sombra muito forte - isto cria a mesma impressão, como se estivesse para duplicar o texto. O exemplar de cor preta de fundo e movê-lo para baixo e à direita um pixel.
Não sinto que haja qualquer maneira certa ou errada para criar botões. Dê uma olhada no que está para fora em torno da Web, brincar com alguns dos efeitos e estabelecer-se em algo que você sente tanto se parece com um botão e é um jogo atraente para o design da web que você está trabalhando.
Passo 21 - Breaking the Grid
Tão importante como é para ter o seu web design segue a grade, ocasionalmente, quebrando a grade aqui e ali, pode ajudar a dar o seu desenho algum personagem. O primeiro lugar que a grade está quebrada neste web design é na área do cabeçalho próximo ao logotipo. Este mashup gráfico facilita a tensão da estrutura de rede e no site dá uma sensação funkier e diferenciadas. Refira-se que a concepção eo conteúdo quebrar a grade visualmente nesta área. A descrição da empresa adere à coluna, mas as rupturas da linha e os gráficos são quase aleatória em sua colocação. O mashup gráfico é composto de formas, gradientes e sombras, você deve estar muito familiarizado com estes até agora 
Outro lugar a grade está quebrada é baixo no boletim de inscrição com um envoltório pouco elegante fita.The wrap doesn't do a whole lot to break the grid visual, but it gives the content a little extra room to push the margins of the content out. The desired effect of the ribbon was that it would steal a little focus and give the page a bit more style. The breaking of the grid is small and subtle, but it really helps improve the design.
..