Criando um site a partir do zero - Illustrator ou Photoshop?

Se estou projetando um site do zero e pretendo dividi-lo e codificá-lo no Adobe Dreamweaver posteriormente, devo criar o design do site no Illustrator ou no Photoshop? Por quê?

Resposta literal rápida: entre o Illustrator e o Photoshop, o PhotoShop, como é raster, e o site.

Resposta um pouco mais detalhada: você usaria os dois.

Resposta alternativa: considere usar o Adobe Fireworks. O Fireworks é muito mais fácil de usar quando você pega o jeito para produzir gráficos da web.

Longa palestra chata resposta:

O método "Slice-n-Dice" é um pouco datado. Era popular há uma década, mas atualmente não é realmente a abordagem recomendada. Eu sugiro:

• Use qualquer aplicativo (AI / PSD) para 'esboçar' o site. Sinta-se livre para obter alta fidelidade, mas trate-a apenas como uma maquete.

• Depois de estabelecer isso, comece a criar o site. Mergulhe no HTML / CSS / JS.

• conforme necessário, entre no PhotoShop para criar os elementos gráficos individuais de que você precisa.

Por quê? Bem, projetar no photoshop não conta para o meio em que você está trabalhando. É uma tela fixa e a Web não é uma tela fixa, nem é uma tela padrão. Isso leva a equipe a ter uma idéia perfeita de pixel e a Web simplesmente não é perfeita.

Use o Fireworks ou o Illustrator para criação de logotipo e ícone. Para edição de fotos, use o Photoshop. Para todo o resto, importa muito pouco. Eu sei que houve debates sobre qual software gráfico usar, mas é realmente uma preferência pessoal.

No entanto, lembre-se:

• O Fireworks é melhor para a compactação PNG. Os tamanhos dos arquivos tendem a ser 20% a 30% menores que os do Photoshop.

• Se você souber no futuro, estará criando outro conteúdo que não seja da Web para o site (camisetas, pôsteres, folhetos etc.), é melhor se você iniciar um programa baseado em vetores.

Eu tenho que discordar do DA01.

O fato de um documento da Web não ser uma imagem estática é irrelevante para a utilidade de um editor de gráficos para criar e projetar um site. Sua maquete de design não precisa (e não deveria) ser um protótipo funcional do seu site. A maquete de design é um documento que ajuda a visualizar e esculpir o design estético do seu site.

Só porque uma folha de papel ou quadro branco não possui todas as qualidades mínimas de um documento da Web não significa que ele não possa ser usado para criar uma estrutura de site. Da mesma forma, o fato de a janela do navegador poder ser esticada e redimensionada não afeta o valor das maquetes de design. Qualquer web designer experiente saberá planejar certas partes do layout como elásticas e responder pelas limitações das tecnologias da web. Todos os elementos visuais de um layout ainda podem ser representados em uma imagem plana (é assim que é renderizado na tela depois).

Em segundo lugar, uma abordagem fragmentada ao design não conduz a resultados de qualidade. Você está projetando um layout da Web, não cem widgets isolados. Sem uma maquete do layout completo, você está basicamente dando um tapinha nas coisas sem ter idéia de como deve ser o resultado final. A adição de elementos gráficos individuais, peça por peça, à medida que você fica sem uma visão geral da composição completa, contraria as boas práticas de design. Um design é concluído quando você não tiver mais o que remover, e não quando não tiver mais o que adicionar.

Por fim, leva muito mais tempo para fazer alterações no design do código do que para ajustar uma imagem de maquete. É por isso que você sempre deve planejar seu design em modelos antes de se comprometer com o código. Se você usa um programa de gráficos vetoriais como o Fireworks ou Illustrator ou um programa de varredura como o Photoshop, é com você. Mas você deve sempre elaborar seu design em um editor de gráficos antes de começar a codificá-lo.

Aqui está um bom post explicando isso de uma maneira engraçada :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

aqui está uma explicação melhor de uma fonte muito confiável "http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator"

"Por fim, a decisão de qual ferramenta usar deve ser prescrita pelo titular do concurso, mas, em geral, o Illustrator deve ser usado para logotipos e trabalhos de impressão, enquanto o Photoshop deve ser usado para web design e qualquer design que só seja visto em um computador tela."

Se você precisar "fatiar", poderá usar diretamente o Photoshop sem acessar o Dreamweaver.

Existem duas maneiras de cortar no photoshop, automática e manualmente, selecionando a parte do gráfico que você precisa e salvando-a na Web, uma peça de cada vez.

Sempre que você "corta automaticamente" a geração de HTML, você decide perder o controle sobre o código. No início de sua carreira, está tudo bem, você está aprendendo, mas chegará a um ponto em que você precisará conhecer o código, porque, para otimização, é melhor o código de mão em um editor de texto avançado (por exemplo, o software Ultraedit) fazendo o seu próprio html e css.

O único momento em que acho mais útil a fatia automática é quando tenho que gerar o código da tabela ao projetar para emails.

photoshop para imagem pronta. ou seja, é sobre o conteúdo do site. O cliente não está pagando pelo aprimoramento do seu portfólio. KL

É bastante óbvio que você deve usar o photoshop para maquetes abrangentes de design da web.

Os designs do Illustrator ainda tendem a processar mais lentamente em comparação aos designs do photoshop.

Se você estiver projetando ícones e elementos da web, sugiro que desenhe no ilustrador e coloque esses elementos no photoshop.

Se você criar maquetes no photoshop, poderá facilmente transferir esses documentos para o Fireworks para prototipagem rápida.

O Photoshop será melhor. Ajudará os usuários a cortar.