Web design o que usar Photoshop ou Illustrator?


8

O que devo usar para criar sites, Photoshop ou Illustrator?

Existe um software correto ou é mais uma escolha pessoal?


Qual será o seu conteúdo?
SaturnsEye

Essa é realmente uma pergunta baseada em opinião. Existem muitos softwares para criar um site. Ai, Ps, Dreamweaver, diretamente no navegador. Cada um tem seus fãs e detratores.
Vincent Vincent

1
Além disso, estar ciente de que há muitas outras opções do que o Illustrator e Photoshop
espiral

@SaturnsEye Estou aprendendo e estou tentando escolher uma ferramenta.
Giannis

1
@SaturnsEye A estrutura, layout
Giannis

Respostas:


7

Discordo da resposta de Anaksunaman em relação ao Photoshop. No outro dia, tivemos uma pergunta semelhante à que eu respondi ( Organizando PSDs para desenvolvedores ), onde mencionei que, nesta era em evolução, nós, como designers e codificadores, devemos evoluir com o fluxo de trabalho e o uso do Photoshop é arcaico e não serve mais para o design da web, pois um meio eficaz de desenvolvimento. Ainda é uma ótima ferramenta para manipulação de fotos, mas usá-lo para implementar um design de site é inútil para mim.

Vou recomendar (referência: quais são as etapas para criar um site? ) Que uma abordagem melhor possa ser alcançada com o Illustrator, especialmente com o uso de pranchetas. No entanto, não estou me referindo à criação de todo o site no Illustrator. Estou falando sobre a estrutura de arame e a maquete. Você ainda deve projetar no navegador, mas se projetar algum ícone, ele poderá ser concluído no Illustrator e exportado. Se você estiver desenvolvendo branding ou qualquer outra coisa relacionada à impressão, certamente espero que o logotipo que você desenvolveu tenha a forma de vetor e que a forma do vetor possa ser salva como um SVG para uma imagem escalável no design responsivo da web. Portanto, uma maquete simples ou qualquer coisa relacionada a um ícone pode ser exportada como código SVG e incluída em um documento XHTML (referência: fiz um mapa em AI, mas o tamanho do arquivo é ENORME como um svg?)

Sobre o tema da codificação, acredito que o Dreamweaver é inútil e desperdiça dinheiro, e se você perguntar em algumas empresas de desenvolvimento da web com quem conversei, elas riem do Dreamweaver. Tudo bem para novos usuários, mas as pessoas com quem trabalhei que começaram a usar o Dreamweaver dependiam muito da área de visualização do design, em vez de trabalhar no código e na conclusão do código, é um mau hábito para um novo codificador confiar. Você não se lembrará de como codificar corretamente se sempre usar o autocompletar. Existem alguns editores de código excelentes e poderosos que são gratuitos, como o Notepad ++, o Text Wrangler (eu prefiro o BBEDit, que é pago) e o Sublime Text.

Então, uma recapitulação da sua pergunta "Web design, o que usar o Photoshop ou o Illustrator?": A manipulação de imagens usa o Photoshop e o Illustrator para logotipo, maquete, estrutura de arame, ícones e qualquer coisa que possa ser executada como SVG. Após a conclusão da sua maquete, eu trabalhava em um editor de código e desenvolvia o restante do seu site.


1
Você ficaria satisfeito se eu dissesse que fiz grandes partes do meu trabalho no GIMP, Inkscape e Notepad ++? :-P
Anaksunaman

Eu nem mesmo usar o Gimp ou Photoshop muito mais .. Eu descobri que eu tenha que editar imagens Eu só uso o ImageMagick e trabalho remunerado para Adobe =)
DᴀʀᴛʜVᴀᴅᴇʀ

4

photoshop ou ilustrador?

Sim. E também provável

  • papel
  • lápis
  • ferramentas de wireframing
  • javascript
  • html
  • css

Em outras palavras, você tem uma caixa de ferramentas e usará a ferramenta certa para a tarefa específica em questão.


1
O resultado final da sua resposta está correto, mas eu realmente não aprendi nada com a leitura. Alguns exemplos concretos (como na resposta de Darth_Vader) seriam úteis.
Stijn

3

Infelizmente, eu argumentaria que essa não é uma pergunta binária, pois qualquer programa gráfico pode gerar conteúdo para ser usado em um site. Portanto, a esse respeito, é muito mais uma escolha pessoal.

Dito isto, se você não estiver executando nenhum tipo de codificação imediata (apenas modelos e elementos de exportação para usar etc.), o Photoshop é de longe o produto mais utilizado. Os clientes podem querer ou esperar que você use este produto e, da mesma forma, terceiros que entregam a você (como se você terceirizar o trabalho do logotipo) podem entregar os produtos finais para você no formato .psd. Portanto, é altamente recomendável ter uma cópia do Photoshop, independentemente do que você escolher fazer no dia-a-dia.

Para seu próprio trabalho, os recursos entre o Illustrator e o Photoshop são semelhantes o suficiente, você certamente pode adaptar o Illustrator para produzir designs de web front-end (as partes gráficas). Uma simples pesquisa no Google encontrou esse resultado em algumas configurações básicas do CS5 que ajudariam os web designers. Lembre-se de que o Illustrator é voltado mais diretamente para imagens e impressão baseadas em vetor; portanto, pode ser necessário pensar um pouco fora da caixa se usado para web design.

O Adobe Dreamweaver fica em segundo lugar, atrás do Photoshop, na lista quase obrigatória, provavelmente, pelo menos se você estiver fazendo alguma codificação com o seu design. Para trabalhos iniciantes com código (e alguns problemas de propriedade), o Adobe Muse é uma espécie de alternativa ao Dreamweaver. É claro que existem muitos outros produtos finos que fazem coisas semelhantes, mas, novamente, a popularidade escolhe o Dreamweaver.

Como alternativa, existem vários editores de código gratuitos, como o MS Visual Studio Express, Komodo e Notepad ++ (e você pode até usar o MarkdownPad para algum trabalho básico de conteúdo.) O que você perde ao não usar o Dreamweaver é o WYSIWYG, principalmente porque outros produtos conclusão do código etc. Mas se você realmente deseja o WYSIWYG sem o Dreamweaver, também existem outros produtos.

Se você deseja uma alternativa rasterizada não vetorial ao Illustrator que não é o Photoshop, provavelmente poderá usar os produtos Corel, se desejar, ou o GIMP Image Gnu Image Manipulation Program (GIMP). O GIMP tem a vantagem (como os editores de código alternativos que mencionei) de ser livre.

Qualquer boa ferramenta usada (provavelmente) deve ter algum tipo de opção de "fatia" para exportar os elementos finais do seu modelo (assumindo que eles ainda não foram resolvidos e salvos separadamente). Fora isso, há muito pouco na maneira de "ter" recursos na minha opinião, exceto em nome da conveniência.

Para ser honesto, você literalmente poderia fazer todo o seu design na Web com o MS Paint e o Bloco de Notas se fosse versado o suficiente ...


2

Você pode usar os dois para o design da Web, dependendo da sua escolha, mas quando se trata de fornecer designs da web / estruturas de arame mais cedo, o Illustrator é muito mais rápido e fácil de usar para esta tarefa.



1

Para mim, o Illustrator é fácil, mas você pode fazer quase tudo o que quiser com o Photoshop e, se não puder pagar o pacote completo de nuvens criativas, recomendo que tente encontrar dinheiro suficiente para o Photoshop CC.

Se você puder pagar pela nuvem criativa, recomendo o seguinte:

  1. Adobe Muse CC para estrutura de arame e design de layout
  2. Adobe illustrator CC para ícones, logotipos e outras ilustrações
  3. Adobe Photoshop CC para manipulação e edição de fotos

A musa da Adobe é onde toda a mágica acontece. Ele foi criado por algumas das pessoas que criaram o InDesign e foi projetado para que os designers de impressão possam publicar sites ao vivo na web sem escrever uma única linha de código.

Os modelos não precisam mais estar em formato pdf; em vez disso, você pode criar um design responsivo que o cliente possa realmente entender como funciona no mundo real. Mas se você ainda deseja criar apresentações em pdf, sugiro que você baixe a extensão Awesome screenshot do Chrome, porque não é possível exportar PDF de arquivos png da muse; bem, não que eu saiba de qualquer maneira?

Eu também recomendo que você eventualmente codifique o site e não deixe tudo para refletir, pois criará um site melhor construído a longo prazo.

Também quero mencionar que muitos web designers nem usam software de design, eles simplesmente projetam diretamente no navegador, desde o início.

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.