*artigo retirado do site netmagazine.com
Ser um herói de web design não é apenas usar os efeitos da moda, mas saber usar os fundamentos do design no Photoshop, diz Dan Rose
A frase "Eu gostaria de ser melhor no Photoshop" é proferida por web designers jovens e velhos. No entanto, há algo inerentemente errado com essa afirmação. Isso implica que a nossa competência em um programa de software nos faria designers melhor. A realidade é que apenas saber o básico do Photoshop é suficiente para ser um ótimo web design.Anúncio
1. Primeiro esboço
Ironicamente, o mais essencial no Photoshop nem sequer envolve ligar o computador. Eu posso garantir que você vai gastar menos tempo criando layouts fazendo alguns esboços. Compre um caderno de desenho sólido ou imprima seus próprios modelos ( http://www.raincreativelab.com/paperbrowser/ ) e va à cidade fazer alguns layouts áspero. Em seguida, traduza os esboços para o Photoshop.
2. Use um sistema de grade
Alinhamento e relação de tamanho são dois atributos que seus projetos devem abordar. Prepare-se com um sistema de grade do get-go. A maioria dos sistemas de grade têm modelos PSD com guias e sarjetas para colunas. Está aqui um grupo: 960px , 978px , 1140px .
3. Use as linhas-guias
Não é nada pior do que estar fora por um pixel. Ative as linhas guias - View> Snap e View> Snap to Guides>. Se você implementou um sistema de grade, o encaixe nas guias é um gênio. Com menos squinting na tela, você não vai precisar aaqueles óculos da moda para designers.4. Organize o seu PSD
É uma dor nomear suas camadas e colocá-los em pastas? Com certeza. A maioria dos designers defende a lógica de que você vai gastar mais tempo fazendo isso, mas há razões que mostram que não é verdade. Se você trabalha sozinho, você vai economizar tempo procurando por coisas mais tarde. Se você trabalha com os outros, você estará fazendo um favor para a equipe.
5. Atalhos mestre
A chave para o estrelato Photoshop é a eficiência. Não é apenas saber como fazer algo, mas como fazer algo rapidamente para você não usar um tempo valioso para executar uma função. Alguns atalhos específicos para saber? Comece com Save for Web [cmd + opt + shift + S], Tamanho da imagem [Cmd + Opt + I], Canvas Size [cmd + opt + C]. Não se esqueça Níveis [cmd + L] e Hue / Saturation [cmd + U].* uma pequena contribuição da design Deborah Zandonadi:
As principais Teclas de Atalho do Photoshop
Lista com as principais teclas de atalho das ferramentas do Adobe Photoshop
COMANDOS GERAIS – PALETAS
F1 - Abre o Adobe Help Center (Ajuda Online do Photoshop).
F5 - Mostrar ou esconder a paleta de Predefinições de Pincéis (Brushes).
F6 - Mostrar ou esconder a paleta de Cores, Amostras e Estilos.
F7 - Mostrar ou esconder a paleta de Camadas, Canais e Demarcadores (Layers).
F8 - Mostrar ou esconder a paleta do Navegador, Informações e Histograma (Info).
F9 - Mostrar ou esconder a paleta do Histórico e Ações.
Tab - Mostrar ou esconder todos os componentes da tela.
Shift+Tab - Mostrar ou esconder todos os componentes da tela (com exceção da barra de ferramentas).
ATALHOS PARA BARRA DE FERRAMENTAS
Para alternar entre ferramentas que utilizam a mesma tecla de atalho, utilize Shift. Por ex.: a tecla L seleciona a ferramenta Laço (Lasso), mas se você quiser utilizar a ferramenta Laço Poligonal (Polygonal Lasso), tecle Shift+L.
M - Letreiro Retangular (Rectangular Marquee); Letreiro Elíptico (Elliptical Marquee)
V - Mover (Move)
L - Laço (Lasso); Laço Poligonal (Polygonal Lasso); Laço Magnético (Magnetic Lasso)
W - Varinha Mágica (Magic Wand)
C - Corte Demarcado (Crop)
K - Fatia (Slice); Seleção de Fatia (Slice Select)
J - Pincel Para Recuperação de Manchas (Spot Healing Brush); Pincel de Recuperação (Healing Brush); Correção (Patch); Olhos Vermelhos (Red Eye)
B - Pincel (Brush); Lápis (Pencil); Substituição de Cor (Color Replacement)
S - Carimbo (Clone Stamp); Carimbo de Padrão (Pattern Stamp)
Y - Pincel do Histórico (History Brush); História da Arte (Art History Brush)
E - Borracha (Eraser); Borracha de Plano de Fundo (Background Eraser); Borracha Mágica (Magic Eraser)
G - Degradê (Gradient); Lata de Tinta (Paint Bucket)
R - Desfoque (Blur); Nitidez (Sharpen); Borrar (Smudge)
O - Subexposição (Dodge); Superexposição (Burn); Esponja (Sponge)
A - Seleção de Demarcador (Path Selection); Seleção Direta (Direct Selection)
T - Texto Horizontal (Horizontal Type); Texto Vertical (Vertical Type); Máscara de Texto Horizontal (Horizontal Type Mask); Máscara de Texto Vertical (Vertical Type Mask)
P - Opções da Ferramenta Caneta (Pen); Caneta de Forma Livre (Freeform Pen)
U - Retângulo (Rectangle); Retângulo Arredondado (Rounded Rectangle); Elipse (Ellipse); Polígono (Polygon); Linha (Line); Forma Personalizada (Custom Shape)
N - Observações (Notes); Comentário de Áudio (Audio Annotation)
I - Conta-gotas (Eyedropper); Classificador de Cores (Color Sampler); Medir (Measure)
H - Mão (Hand)
Z - Zoom
D - Cores de Primeiro Plano e Plano de Fundo Padrão (Reset Foreground and Background To Black and White)
Para os seguintes atalhos, não é necessário teclar o Shift para alternar entre as funções, basta pressionar a tecla de atalho novamente
X - Alternar Cores de Primeiro Plano e Plano de Fundo (Change Foregroud to Background)
Q - Alternar entre Editar no Modo Padrão (Pattern Mode); Editar no Modo Máscara Rápida (Quickmode)
F - Alternar para o Modo de Tela Padrão (Pattern Screen); Modo de Tela Cheia com Barra de Menus (Fullscreen w/ Menu Bars); Modo de Tela Cheia (Fullscreen)
Daqui para frente estão os atalhos para comandos do menu, navegação, edição, seleção, texto, camadas, e os mais importantes do Photoshop.
Atalhos para ARQUIVO (File Menu)
Novo… (New) - Ctrl+N
Abrir… (Open) - Ctrl+O
Procurar… (File Browser) - Ctrl+Alt+O
Abrir Como… (Open As) - Ctrl+Alt+Shift+O
Editar no Image Ready (Jump to Image Ready) - Ctrl+Shift+M
Fechar (Close) - Ctrl+W
Fechar Todas (Close All) - Ctrl+Alt+W
Fechar e Ir para o Bridge… (Close and Jump to Bridge) - Ctrl+Shift+W
Salvar (Save) - Ctrl+S
Salvar Como (Save As) - Ctrl+Shift+S
Salvar para Web (Save to Web) - Ctrl+Alt+Shift+S
Reverter (Revert) - F12
Info Sobre Arquivo (File Info) - Ctrl+Alt+Shift+I
Configurar Página (Page Setup) - Ctrl+Shift+P
Imprimir com Visualização (Preview Print) - Ctrl+Alt+P
Imprimir (Print) - Ctrl+P
Imprimir uma Cópia (Print Copy) - Ctrl+Alt+Shift+P
Sair (Exit) - Ctrl+Q
Atalhos para EDITAR (Edit Menu)
Desfazer (Undo) - Ctrl+Z
Avançar uma Etapa (Step Backward) - Ctrl+Shift+Z
Retroceder uma Etapa (Step Forward) - Ctrl+Alt+Z
Atenuar…(Fade) - Ctrl+Shift+F
Recortar (Cut) - Ctrl+X ou F2
Copiar (Copy) - Ctrl+C ou F3
Copiar Mesclado (Copy Merged) - Ctrl+Shift+C
Colar (Paste) - Ctrl+V ou F4
Colar em (Paste Into) - Ctrl+Shift+V
Transformação Livre (Free Transform) - Ctrl+T
Transformar Novamente (Tranform Again) - Ctrl+Shift+T
Configuração de Cores (Color Settings) - Ctrl+Shift+K
Atalhos de Teclado (Keyboard Shortcuts) - Ctrl+Alt+Shift+K
Mudar Preferências (General Preferences) - Ctrl+K
Atalhos para IMAGEM (Image Menu)
Níveis (Levels) - Ctrl+L
Níveis Automáticos (Auto Levels) - Ctrl+Shift+L
Contraste Automático (Auto Contrast) - Ctrl+Alt+Shift+L
Cor Automática (Auto Color) - Ctrl+Shift+B
Curvas… (Curves) - Ctrl+M
Equilíbrio de Cores… (Color Balance) - Ctrl+B
Matiz/Saturação (Hue/Saturation) - Ctrl+U
Remover Saturação (Desaturation) - Ctrl+Shift+U
Inverter (Invert) - Ctrl+I
Tamanho da Imagem (Image Size) - Ctrl+Alt+Y
Atalhos para CAMADAS (Layers Menu)
Nova Camada (New Layer) - Ctrl+Shift+N
Nova Camada por Cópia (Layer via Copy) - Crtl+J
Nova Camada por Corte (Layer via Cut) - Ctrl+Shift+J
Criar/Soltar Máscara de Corte (Create/Release Clipping Mask) - Ctrl+Alt+G
Agrupar Camadas (Group with Previous) - Ctrl+G
Desagrupar Camadas (Ungroup) - Ctrl+Shift+G
Trazer para o Primeiro Plano (Bring to Front) - Ctrl+Shift+]
Trazer para Frente (Bring Forward) - Ctrl+]
Enviar para Trás (Send Backward) - Ctrl+[
Enviar para o Plano de Fundo (Send to Back) - Ctrl+Shift+[
Mesclar Camadas (Merge Down) - Ctrl+E
Mesclar Camadas Visíveis (Merge Visible) - Ctrl+Shift+E
Atalhos para SELECIONAR (Select Menu)
Selecionar Tudo (Select All) - Ctrl+A
Cancelar Seleção (Deselect) - Ctrl+D
Selecionar Novamente (Reselect) - Ctrl+Shift+D
Inverter Seleção (Inverse Selection) - Ctrl+Shift+I ou Shift+F7
Selecionar Todas as Camadas (All Layers) - Ctrl+Alt+A
Difusão… (Feather) - Ctrl+Alt+D ou Shift+F6
6. Ser sutil - tudo com moderação
Como designers, temos a tendência de desacreditar da capacidade do nosso público para perceber o efeito que estamos tentando alcançar. Então nossa resposta é adicionar muito barulho, fazer duros gradientes e uso demasiado de contraste. A combinação perfeita é quando você usa efeitos com alguma graça, e, mais importante, auto-controle.
7. Use composições de camada e objetos inteligentes
Infelizmente, o Photoshop não tem um sistema ótimo para composições como navegação estados. No entanto, você pode alavancar Layer Comps [Window> Layer Comps] para fazer versões de layouts muito bem. Smart Objects [Camada> Objetos Inteligentes> Convert to Smart Object] irá compilar vários elementos em um arquivo que pode ser editado fora do seu PSD.8. Mantenha formas integrantes de objetos vetoriais inteligentes
Não há nada pior do que ter que "fazer o logotipo maior" e perceber que você não pode porque é um gráfico na sua rasterised PSD, ou tentar redimensionar um botão só para descobrir que ele não é mais uma forma. A solução é manter essas formas em formato vetorial. Você pode fazer isso importando-os como vetores ou convertê-los em smart objects (duplo clique na camada, covert to smart object_ antes de rasterise-los.9. Use máscaras de forma inteligente
Máscaras globalizado faz com que para alguns eficiência Photoshop doce. Por exemplo, se você tiver cinco imagens deslizante em seu projeto, agrupá-los e colocar uma máscara sobre a pasta em vez de cada camada individual. É uma solução muito superior do que peneirar 20 máscaras, sem saber qual deles fazer o quê.10. Refinar máscaras para cabelos silhouetting fácil
Quem não detesta ter de cabelo silhueta? Aqui está um truque que funciona bem em vários tamanhos de imagens, não importa o quão louco o penteado. Faça uma máscara grosseira da pessoa, então vá em Select> Refine Mask (Refine Edge em versões anteriores para CS5). Brincar com o raio e ver a mágica acontecer.
11. Percebem sombras com precisão
Pegando carona na última ponta, o sinal de um designer amador é quando você vê sombras muito escuras. Ele traduz que o objeto está sob um holofote. Provavelmente não é o caso. Certifique-se de diminuir a opacidade, e melhor ainda, use uma cor que é um tom escuro do fundo atrás, em vez de preto.12. Ensinar-se a ferramenta caneta
Vale a pena o tempo para ficar bom em usar a ferramenta caneta. É uma daquelas coisas que tendem a evitar, mas se você quiser tirar algumas máscaras crisp ou adicionar ilustração para seus projetos, a caneta é sua arma de escolha. Aperfeiçoar os seus dotes com este tutorial .
13. Sharpen fotos usando passa-alto
Pronto para algum Magia Photoshop? Então, você recebeu uma foto de baixa resolução do seu cliente, e é simplesmente muito embaçado de usar. Duplicar a camada, em seguida, vá em Filter> Other> High Pass. Escolha algo baixa (em torno de 2,0) e em seguida, definir Blending Mode dessa camada para Overlay. Se ele é muito nítida, diminuir a opacidade. Os resultados podem variar.
14. Ser consistente
Cinco azuis diferentes, e nenhum deles é o único da guia de marca? Se esqueça de verificar as cores sendo usadas, especialmente quando exportar imagens. Outra ferramenta útil para a precisão da cor é 0to255.com , que fornece valores hex que arharmoniously mais claras e escuras de uma determinada cor.
15. Não padrão para as configurações padrão
Uma das coisas mais difíceis de afastar a autonomia Photoshop. Se você está tratando o painel Efeitos como uma lista de estilos desejado, você provavelmente não crafting suas configurações para um estado razoável. As configurações padrão são geralmente duras, a fim de mostrar a sua aparência. Suavizar os valores e mudar os ângulos.
16. É nos detalhes
Parte integrante de aperfeiçoar sua arte no Photoshop é fazer com que seu projeto "pixel perfect". Vá para trás com seu PSD, procurando margens borradas em retângulos arredondados ou pesos linha inconsistente. Vale a pena tomar o tempo no Photoshop aperfeiçoar o seu layout (em vez de HTML / CSS).17. Reescrever a história
Não é como uma chatice quando você abrir o painel Histórico e você precisa de 21 passos para trás, só para vê-lo pára no últimos 20? Impedir que isso aconteça novamente, indo para Preferências> Desempenho e aumentando o valor para os Estados-História. Você super-heróis de web design não precisa usar o painel Histórico, porém, não é?18. Personalize o seu espaço de trabalho
Photoshop não é o chefe de você, pixelcrafter. Se você preferir que suas ferramentas na direita e apenas o seu painel Layers aberto, fazê-lo. Você pode até mudar a cor em torno da tela com o botão direito do mouse sobre ele. Guarde o seu espaço de trabalho através do menu no canto superior direito da aplicação.
Nenhum comentário:
Postar um comentário