Aprendendo Photoshop apenas para web design


17

Quero me tornar um web designer, por isso estou assistindo muitos tutoriais em vídeo do Photoshop, mas alguns desses tutoriais não são úteis para o design da web. Por exemplo, alguns filmes são sobre pele, dentes ou desenho de uma flor ou alteração do padrão de uma parede ou coisas assim. Porque eu não tenho nenhum recurso específico para web design, e esses tutoriais são uma espécie de perda de tempo para mim!

Você conhece alguma fonte de tutorial para me ajudar a aprender web design no Photoshop?

O que devo fazer para focar na criação de sites no Photoshop?

Quais partes do Photoshop são necessárias para o design da web e quais não são?

Respostas:


15

Cada ferramenta, pincel, filtro e efeito no Photoshop tem seu próprio objetivo no mundo. Não é fácil "aprender bem esta ferramenta e usá-la para tudo", porque diferentes ferramentas etc. são usadas para diferentes efeitos.

Por exemplo, se você gosta de botões brilhantes levemente 3dish na sua página (eles eram muito populares há algum tempo), seria necessário usar sombra, vários gradientes, máscaras e talvez um pouco de movimento manual com uma ferramenta pincel. Para um fundo, você pode apenas usar uma cor sólida ou gradiente com uma máscara texturizada / estampada.

Como não há "uma parte do Photoshop" para aprender, a melhor coisa a ser feita é tornar-se completo usando as várias ferramentas. Navegue e veja todas as variedades de sites. Anote os recursos que você gosta e tente recriá-los você mesmo. Freqüentemente você pode dissecar os elementos - o objeto possui bordas, gradientes, texturas, fontes de luz etc. - e recriar algo semelhante.

Ao mesmo tempo, não posso me esforçar o suficiente para que haja mais para projetar do que apenas o Photoshop. Minha recomendação seria fazer uma aula de design na faculdade comunitária local (ou qualquer outro local) e ter uma idéia de coisas como equilíbrio, cores, espaço em branco etc. Esses conceitos costumam fazer a diferença entre parecer profissional e parecer a tia de alguém ( que, nesse cenário, não é um designer profissional ) editou um modelo de Geocities.


4
"... há mais para projetar do que apenas o Photoshop." Ouça ouça! +1.
Philip Regan

1
O Photoshop tem uma falta séria de alguns recursos dos quais o design de um layout se beneficiaria ... juntamente com muitas ferramentas vetoriais. Eu poderia mudar para ilustrador e usar o photoshop para outros gráficos especializados. Como personagens, ícones fotorrealistas ...
Muhammad Umer

17

"Quero me tornar um web designer, por isso estou assistindo muitos tutoriais em vídeo do Photoshop"

Você conhece HTML, CSS e JS? Caso contrário, comece primeiro.

O Photoshop é então usado como uma ferramenta para criar os gráficos que acompanham o HTML, CSS e JS.

Não há nada específico de 'design de site' centrado em ferramentas específicas no PhotoShop. É simplesmente uma ferramenta de criação e edição de imagens.


4

Para criar sites, você deve consultar outros modelos também. Considere alguns dos efeitos que você pode usar como descascar páginas, links de barras de navegação. Muito disso não é difícil de fazer no Photoshop, mas exigirá um pouco de pesquisa no Google. Costumo verificar o Dribbble, que é uma comunidade de design maravilhosa. É muito popular, então você certamente verá muitas novas técnicas que os web designers estão implementando.

Mas, para obter uma visão geral, tente trabalhar com um conjunto de tutoriais usados ​​especificamente para criar sites. Mesmo tutoriais realmente básicos. Porque eles descreverão as etapas para você e você poderá replicá-las em projetos futuros. Adicionei 2 ótimos recursos abaixo, espero que você os verifique. Eu garanto que você encontrará o tutorial de modelo para iniciantes que você gosta - e aprenderá muito!


4

Se você deseja criar sites, seria muito melhor trabalhar com o Fireworks do que o Photoshop. O PS é, no fundo, um aplicativo de manipulação de fotos e, embora suas ferramentas possam ser usadas para quadros de arame, elas não são especialmente eficientes. Em outras palavras: usar o PS para web design é como usar o PS como um aplicativo DTP sobre o InDesign. Sim, isso pode ser feito, mas não é uma ótima maneira de fazê-lo, e você perderá a longo prazo.

As vantagens que o Fireworks traz são:

  • muito mais fácil trabalhar com formas vetoriais verdadeiras
  • MUITO mais fácil de definir dimensões de pixel; sem desfoque de traços no alongamento etc.
  • pode definir 'páginas mestras' para fazer alterações de design em todo o site nas suas maquetes, sem precisar refazer todas as imagens
  • mais fácil criar uma biblioteca de controles de interface do usuário comumente usados ​​(valioso para projetar aplicativos da web)
  • Interface do usuário mais próxima da interface típica de aplicativo de desktop, significando uma curva de aprendizado mais superficial

As únicas vantagens reais que o Photoshop traz para a mesa são o fato de que

  • a renderização da fonte é melhor
  • seus colegas conhecerão a aplicação um pouco (melhor)

1
Sim, o Fireworks é melhor; caso contrário, você precisará usar o Illustrator e o Photoshop e alternar entre eles.
Cakey

0

Na nota "há mais para projetar que o Photoshop": achei isso interessante: http://naldzgraphics.net/tips/what-designers-need-to-know-about-typography/


Ele sofre de prosa empolgada e erros gramaticais ocasionais. Posso resumir (e melhorar) em uma caixa de comentários: use bom gosto em todas as coisas, procure e fique muito claro com as seguintes palavras: fonte versus tipo de letra , serifa vs. sem serifa, kerning, rastreamento, espaçamento , guia, alinhamento, nivelado, justificado. O artigo não fornece definições claras ou completas para a maioria delas; as explicações são superficiais e parecem de segunda mão.
Curinga

Também é uma resposta apenas do link.
Curinga

0

O Photoshop é apenas uma ferramenta e, quanto melhor você a conhecer, melhor será capaz de usá-la para fazer o que deseja. No entanto, há mais para projetar do que apenas conhecer o Photoshop.

Essa mentalidade de que você só precisa aprender o Photoshop e ser um designer é o mesmo que se chamar de construtor, porque sabe usar um martelo, ou um mecânico, porque pode usar uma chave inglesa. O design, como tal, faz as coisas funcionarem bem (e provavelmente fica bem no processo), tem muito pouco a ver com conhecer o Photoshop / Illustrator / InDesign / Sketch / o que for, mas como você usa essas ferramentas para realizar suas idéias.

Existem muitos tutoriais ruins no YouTube e muitos bons também. Aprenda a fazer tudo, as técnicas serão valiosas abaixo da linha de qualquer maneira. O Creative Block também possui bons tutoriais. Além disso, examine a teoria das cores, a teoria do layout, a tipografia ( Stop Stealing Sheep Sheep & Descubra como o Tipo Funciona é uma introdução muito boa) e outras habilidades mais tradicionais de design gráfico são habilidades muito mais valiosas para investir seu tempo do que apenas aprender Photoshop.

Além disso, como alguém mencionado anteriormente, aprender HTML / CSS / JS também é uma vantagem definitiva para o trabalho de web design.


-2

Você pode validar seu arquivo PSD para problemas conhecidos de compatibilidade com a web aqui https://www.oss-usa.com/web-preflight?promo=web-preflight é grátis


Olá Nik, bem-vindo ao GDSE e obrigado pela sua resposta. Não vejo como isso responde às perguntas, você poderia elaborar? Obrigado!
Vincent

Tenho experiência em desenvolvimento web e conheci muitos iniciantes em web design. Existem erros comuns que qualquer um pode fazer. Por exemplo, pixels decimais em tamanhos de fonte. Este serviço pode ajudar o novato.
Nik

Obrigado. Seria realmente útil se você gostaria de compartilhar sua experiência e explicar esses erros. Dessa forma, sua resposta ainda terá (muito!) Valor caso o link seja interrompido posteriormente. O apodrecimento do link é o motivo pelo qual não gostamos muito (principalmente) de respostas apenas para links, e o motivo pelo qual votei sua resposta negativamente. Não desanime, por favor, sabemos que usar este site pode ser uma curva de aprendizado. Nós estão felizes em ter você, continuar a contribuir!
Vincent
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.