Software para Web Design

[estudante_php 1]

Galera a pergunta básica: qual o melhor para web design? Photoshop, Fireworks ou Corel Draw?

 

Também alguém pode comentar suas experiências com eles?

 

Qual o mais fácil de aprender para um iniciante?

 

OBRIGADO!

[Elektra 102]

Tenho formação em Webdesign.

 

Para criar layouts a recomendação adequada é >> Fireworks (também permite algumas edições simples em imagens). Mais fácil.

 

Para tratamento de imagens e recursos mais sofisticados >> Photoshop, sem dúvida (também é usado por muitos profissionais para criar layouts). Vale mais a pena aprender.

 

 

Experiência pessoal, tenho ambos, minha preferência vai direto para o Photoshop, uso o CS4 Ex.

 

Meu foco de desenvolvimento é o Flash, em breve, pretendo aprender Illustrator, que oferece mais opções para criar imagens vetoriais.

 

 

Abraços

[Pantoja 5]

Amigo, sem dúvida vale a pena aprender photoshop. Ele faz tudo que o FW faz e MUITO MAIS!

 

Você vai começar fazendo layouts correto? Mas vai que um cliente manda uma foto para você tratar antes de colocar no site. Ai você vai dizer o que pra ele? Ou então terá q aprender correndo PS etc etc...

 

 

vá pelo caminho mais simples, aprenda PS e seja feliz.

 

comece por tutoriais simples e vá aprendendo as ferramentas principais.

 

Inicie assim:

 

Ferramentas de recorte (todas)

Ferramentas de Correção de cor (levels, color balance, Selective colors)

Filtros

PEN TOOL

 

 

depois disso você ja estará apto a fazer otimos trabalhos no PS.

 

 

 

Fiz uma video aula da ferramenta QUICK SELECTION que pode ser bastante útil. Fora que neste mesmo topico voce encontrará uma visão geral de TODAS as ferramentas do photoshop e para que cada uma serve. Vale a pena baixar também.

 

 

 

Abraços mano e desejo boa sorte.

[estudante_php 1]

Mas e o Illustrator serve pra que?

 

Só pensando out-of-box`: e quanto ao Gimp? Qual dessas ferramentas ele poderia "cobrir" ?

[coxao 5]

todos meus amigos que trabalham com web, usam o photoshop e depois muita programação (CSS/PHP/JQUERY)

pois SLICE (recorte) em todo layout é tenso pois hj em dia não se usa mais tabelas pra site, muita coisa pode ser feita na parte de programação através dos estilos (CSS)

 

Illustrator = programa de vetorização

Corel Draw = programa de vetorização

 

nenhum dos profissionasi que conheço PESSOALMENTE usam ou gostaram do fireworks, mas gosto é gosto.... use a ferramenta que você se adapta melhor

[estudante_php 1]

E quanto ao Gimp ?

 

Por favor me explique o seria esse CORTE que todo mundo fala....Com uma situação prática seria melhor ainda! ;)

 

Obrigado!

[Pantoja 5]

E quanto ao Gimp ?

 

Por favor me explique o seria esse CORTE que todo mundo fala....Com uma situação prática seria melhor ainda! ;)

 

Obrigado!

 

 

 

Gimp considero MUITO FRACO. É um editor de imagens como o Photoshop e outros por ai, mas pra mim é apenas mais uma opção no mercado. Ha quem goste, mas sinceramente aconselho tirar suas próprias conclusões poie essa é MINHA OPNIÃO PESSOAL e você poderá pensar diferente.

 

 

Amigo sobre o corte eu explico em meu tutorial que passaei o link acima, chegou a dar uma olhada?

[Elektra 102]

E quanto ao Gimp ?

 

Por favor me explique o seria esse CORTE que todo mundo fala....Com uma situação prática seria melhor ainda! ;)

 

Obrigado!

 

O GIMP é o similar gratuito do Photoshop. Entre as opções free é o que oferece mais recursos.

 

Alguns cursos respeitáveis de webdesign (http://www.sisnema.com.br/) usam apenas softwares open source. Ganhei bolsa para 1 módulo de web neste local.

 

SLICE, em tradução literal, quer dizer >> fatia. Conforme os elementos do seu layout, para agilizar o carregamento, usa-se apenas uma 'imagem' de 1 pixel de largura, e definimos na div o repeat-x ou repeat-y para montar a forma, por exemplo, o fundo de um menu, rodapé, etc.

 

Quanto ao uso do Fireworks para layouts, traz alguns recursos de organização de páginas, que integrado ao DW funciona bem.

Mesmo que crie um layout no PS, o fatiamento é feito no FW.

 

 

Cursos web que não dispensam o ensino do FW:

 

Senac >> http://portal.senacrs.com.br/site/cursosDetalhe.asp?idCurso=12801&idUO=18

 

Alfamídia >> http://www.alfamidia.com.br/v3site.aspx?partnumber=CURPAFORWEB5&idgrupo=2&layout=4 (melhor centro de treinamento Adobe aqui em Porto Alegre, onde faço meus cursos)

 

 

Illustrator (Adobe) e Corel Draw (Corel) são adequados para criar imagens vetoriais, que podem ser ampliadas infinitamente, sem distorções.

Flash também é um programa vetorial para animação interativa, entre outras possibilidades.

 

 

Cada software oferece recursos específicos que complementa os demais.

 

 

Abraços ^_^

[estudante_php 1]

E quanto ao Gimp ?

 

Por favor me explique o seria esse CORTE que todo mundo fala....Com uma situação prática seria melhor ainda! ;)

 

Obrigado!

 

O GIMP é o similar gratuito do Photoshop. Entre as opções free é o que oferece mais recursos.

 

Alguns cursos respeitáveis de webdesign (http://www.sisnema.com.br/) usam apenas softwares open source. Ganhei bolsa para 1 módulo de web neste local.

 

SLICE, em tradução literal, quer dizer >> fatia. Conforme os elementos do seu layout, para agilizar o carregamento, usa-se apenas uma 'imagem' de 1 pixel de largura, e definimos na div o repeat-x ou repeat-y para montar a forma, por exemplo, o fundo de um menu, rodapé, etc.

 

Quanto ao uso do Fireworks para layouts, traz alguns recursos de organização de páginas, que integrado ao DW funciona bem.

Mesmo que crie um layout no PS, o fatiamento é feito no FW.

 

 

Cursos web que não dispensam o ensino do FW:

 

Senac >> http://portal.senacrs.com.br/site/cursosDetalhe.asp?idCurso=12801&idUO=18

 

Alfamídia >> http://www.alfamidia.com.br/v3site.aspx?partnumber=CURPAFORWEB5&idgrupo=2&layout=4 (melhor centro de treinamento Adobe aqui em Porto Alegre, onde faço meus cursos)

 

 

Illustrator (Adobe) e Corel Draw (Corel) são adequados para criar imagens vetoriais, que podem ser ampliadas infinitamente, sem distorções.

Flash também é um programa vetorial para animação interativa, entre outras possibilidades.

 

 

Cada software oferece recursos específicos que complementa os demais.

 

 

Abraços ^_^

 

 

Cara Elektra,

 

 

Seu post foi um dos mais explicativos que já recebi. Valeu pelas dicas também, Pantoja!

 

Porém ficaram algumas dúvidas. Se alguém puder ajudar:

 

 

1) Agora eu entendi o que é fatiamento. Mas, simplesmente cortar uma imagem de fundo de menu pra ficar com 1px não deve ser tarefa difícil (acho). Qual a particularidade de ter q ser feito no Fw e não no Photoshop?

 

 

2) As imagens vetoriais no contexto de um BACKGROUND de web site não seriam necessárias já que backgrounds sequer são aumentados, certo?

 

3) Tem algum open source que trabalhe com imagens vetoriais ?

 

 

Obrigado!!

[Pantoja 5]

1) Agora eu entendi o que é fatiamento. Mas, simplesmente cortar uma imagem de fundo de menu pra ficar com 1px não deve ser tarefa difícil (acho). Qual a particularidade de ter q ser feito no Fw e não no Photoshop?

 

Pode ser feito no PS ou qquer editor de imagens, Gimp por exemplo.

 

 

 

2) As imagens vetoriais no contexto de um BACKGROUND de web site não seriam necessárias já que backgrounds sequer são aumentados, certo?

 

nao entendi.

 

 

3) Tem algum open source que trabalhe com imagens vetoriais ?

 

Sim existe, o INKSCAPE

 

 

 

abraços

[WilliansS 73]

1) Agora eu entendi o que é fatiamento. Mas, simplesmente cortar uma imagem de fundo de menu pra ficar com 1px não deve ser tarefa difícil (acho). Qual a particularidade de ter q ser feito no Fw e não no Photoshop?

 

Pode ser feito no PS ou qquer editor de imagens, Gimp por exemplo.

 

 

 

2) As imagens vetoriais no contexto de um BACKGROUND de web site não seriam necessárias já que backgrounds sequer são aumentados, certo?

 

nao entendi.

 

 

3) Tem algum open source que trabalhe com imagens vetoriais ?

 

Sim existe, o INKSCAPE

 

 

 

abraços

 

Essa 2ª pergunta posso te responder, seguinte:

 

Imagino que tua pergunta faça referência a possivelmente colocar uma imagem vetorial no background certo?, más não dá, funciona assim:

Mesmo quando uma imagem é gerada através de um programa vetorial (Corel ou Illustrator), ela deve ser exportada para algum formato Bitmap, (JPEG, PNG, GIF, etc) e nessa exportação qualquer imagem perde a capacidade de se re-dimensionar sem perder qualidade, resumindo, pelo que sei não tem possíbilidade de por uma imagem vetorial que tenha as qualidades de uma imagem vetorial no background.

 

Apenas pra esclarecer um pouco sobre backgrounds de sites, geralmente o web design utiliza uma imagem de 10px por 10px (visando a leveza do site) e no css usando o repeat-x e repeat-y ela preenche todo o espaço do background do site, criando uma espécie de layout liquido, ou seja, se auto dimentsiona conforme o zoom da página ou a resolução do monitor de quem acessa.

 

* Vale a pena salientar que isso que está em negrito só se aplica no caso de um layout uniforme, ou seja, que é de uma cor só ou segue padrões de quadros.

 

Bom Achoo que é isso, qualquer coisa, se não ficou muito claro, me grita ai... abraços.

[estudante_php 1]

Ah, então LAYOUT líquido e fluido é isto? É quando tenho um picture de 10 px ou whatever que se repete?

 

 

 

 

 

 

 

 

1) Agora eu entendi o que é fatiamento. Mas, simplesmente cortar uma imagem de fundo de menu pra ficar com 1px não deve ser tarefa difícil (acho). Qual a particularidade de ter q ser feito no Fw e não no Photoshop?

 

Pode ser feito no PS ou qquer editor de imagens, Gimp por exemplo.

 

 

 

2) As imagens vetoriais no contexto de um BACKGROUND de web site não seriam necessárias já que backgrounds sequer são aumentados, certo?

 

nao entendi.

 

 

3) Tem algum open source que trabalhe com imagens vetoriais ?

 

Sim existe, o INKSCAPE

 

 

 

abraços

 

Essa 2ª pergunta posso te responder, seguinte:

 

Imagino que tua pergunta faça referência a possivelmente colocar uma imagem vetorial no background certo?, más não dá, funciona assim:

Mesmo quando uma imagem é gerada através de um programa vetorial (Corel ou Illustrator), ela deve ser exportada para algum formato Bitmap, (JPEG, PNG, GIF, etc) e nessa exportação qualquer imagem perde a capacidade de se re-dimensionar sem perder qualidade, resumindo, pelo que sei não tem possíbilidade de por uma imagem vetorial que tenha as qualidades de uma imagem vetorial no background.

 

Apenas pra esclarecer um pouco sobre backgrounds de sites, geralmente o web design utiliza uma imagem de 10px por 10px (visando a leveza do site) e no css usando o repeat-x e repeat-y ela preenche todo o espaço do background do site, criando uma espécie de layout liquido, ou seja, se auto dimentsiona conforme o zoom da página ou a resolução do monitor de quem acessa.

 

* Vale a pena salientar que isso que está em negrito só se aplica no caso de um layout uniforme, ou seja, que é de uma cor só ou segue padrões de quadros.

 

Bom Achoo que é isso, qualquer coisa, se não ficou muito claro, me grita ai... abraços.

[WilliansS 73]

Ah, então LAYOUT líquido e fluido é isto?

 

Isso mesmo, o que me referi a img de 10 px por 10px que se repete infinitamente tanto para X quanto para Y, é uma das (apenas uma das) coisas que são utilizadas em layout liquido, contudo vale a pena salientar que o layout liquido ou fluído é composto de várias partes independente da linguagem usada para faze-lo, seja HTML, CSS, FLASH e por ai vai.

 

Pontos positivos do layout liquido/flúido:

Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução de ecrã do utilziador;

Os conteúdos ocupam toda a área visível do ecrã, permitindo transmitir mais informação;

Deixa de haver espaço vazio à volta do website;

 

Pontos negativos do layout liquido/flúido:

Maior dificuldade na leitura de linhas de texto demasiado longas;

Perde-se o controlo sobre o posicionamento de alguns elementos na página;

 

Então na construção, leve muito em conta o contexto ao qual seu site se adapta, layout liquido é bom más não significa que o fixo tambem não possa ser, ex: um hotsite é preferivel que sejá fixo, pois, só tem uma página, no máximo 2, e a principal intenção de um HOTSITE é chamar atenção para um determinado produto e/ou serviço mesmo.

 

Referente sua 2ª pergunta:

É quando tenho um picture de 10 px ou whatever que se repete?

 

Quando você usa só alguns elementos do layout liquido como por ex: a imagem de 10px repetida em x e y, isso caracteriza um layout chamado por alguns de elástico, ou seja, algumas partes apenas se dimensionam conforme a resolução:

 

Layout Elástico

Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluído. Ou seja, a largura da página é extensível até um certo ponto a partir do qual se torna fixa. Na prática, isto significa que podemos ter uma página que tenha uma largura mínima de 800px e uma largura máxima de 1280px. A partir dos 800px para baixo ou dos 1280px para cima (valores de exemplo), a largura não se altera e a página funciona como uma página com layout fixo.

 

Isto permite ter, ao mesmo tempo, controlo dos elementos na página por parte do webdesigner e controlo da largura da janela por parte do utilizador, eliminando assim alguns pontos negativos identificados nos dois tipos de layouts anteriores.

 

Outro factor interessante é o facto de, num monitor com uma largura muito grande (vamos imaginar um ecrã com 2028px de largura ) o nosso website elástico ocuparia cerca de metade do ecrã e o texto poderia tornar-se demasiado pequeno para se conseguir ler. Ao aumentar o tamanho do texto no browser (Firefox: CTRL+), a largura da página irá aumentar na mesma escala. Desta forma, o website irá aumentar a sua largura máxima consoante o tamanho do texto!

 

Para conseguir este efeito, basta definir a largura máxima da página em unidades “EM”. Desta forma, a largura da página irá comportar-se da mesma forma como o tamanho do texto, ou seja, responde aos comandos do utilizador para aumentar ou diminuir o seu tamanho.

 

Se tiverem um monitor com uma resolução grande (superior a 1024px) podem experimentar aumentar o tamanho do texto agora e verão que a largura desta mesma página irá acompanhar o aumento do texto. Caso a largura da janela seja inferior a 1024px, a página mantém-se fixa e o texto aumenta.

 

FONTE

[Elektra 102]

1) Agora eu entendi o que é fatiamento. Mas, simplesmente cortar uma imagem de fundo de menu pra ficar com 1px não deve ser tarefa difícil (acho). Qual a particularidade de ter q ser feito no Fw e não no Photoshop?

 

Para criar uma slice de 1 pixel usamos o zoom.

 

Não falei que tem que ser feito no FW, mas sim que é o software mais adequado para este tipo de tarefa.

 

Explicar em detalhes é tarefa para um curso É preciso conhecer para compreender as vantagens, depois, terá condições de escolher o que mais lhe agrada.

 

 

2) As imagens vetoriais no contexto de um BACKGROUND de web site não seriam necessárias já que backgrounds sequer são aumentados, certo?

 

Imagens vetoriais são usadas, por exemplo, para um logotipo que será aplicado em diversos locais, em tamanhos diferentes. Você cria uma única arte, com efeitos, máscaras, gradientes, etc., salva em diferentes tamanhos, em um formato mais leve, normalmente JPG, ou se precisar de transparência, em PNG. O Illustrator possui ferramentas mais adequadas à criação gráfica, você pode usar em um impresso, como imagem em uma página html, ou em uma animação. Poupa muito trabalho.

 

 

3) Tem algum open source que trabalhe com imagens vetoriais ?

 

Certamente tem, mas não sei informar.

 

 

Abraços

[coxao 5]

3) Tem algum open source que trabalhe com imagens vetoriais ?

 

Certamente tem, mas não sei informar.

 

 

Abraços

 

INKSCAPE

http://inkscape.org/

[estudante_php 1]

Agora como ficarão as ferramentas de desenho vetorial já que o novo SVG vem ai pra trazer formas (básicas pelo menos) vetoriais via programação.

 

Tem a possibilidade de editar o desenho via Javascript por exemplo!

 

Vai ser uma boa briga neh ?

[Lucas Peperaio 20]

Pra WEB - Fireworks

Pra criação - Photoshop

Vetorial - Corel e Ilustrator

 

aproveite e leia:

50 razões pra não usar o PHOTOSHOP pra Webdesign

[Elektra 102]

Pra WEB - Fireworks

Pra criação - Photoshop

Vetorial - Corel e Ilustrator

 

aproveite e leia:

50 razões pra não usar o PHOTOSHOP pra Webdesign

 

 

Lucas, link excelente! :clap:

 

 

Favoritei direto.

 

 

Abraços :grin: