helioth

Olá, tudo bom?
Vamos lá!

Um Web Designer ou Web Master tem que se procupar com o público alvo primeiramente, em cima disso ele vai desenvolver as técnicas de desenvolvimento de acordo com o conhecimento. Tem todo um projeto que antecede o desenvolvimento de um site, primeiramente mas não vou entrar em detalhes sobre isso agora.
Hoje em dia eu diria que é indispensável a realização de testes em vários navegadores, no minimo deve ser testado em Ie e FF.
Eu como sou exagerado testo em 5, para ter mais precisão, e acredite, o mais problemático sem dúvidas é o Ie6.

Em relação ao uso de tabelas ou tableless sem dúvida alguma, hoje se usa tableless, eu diria que é praticamente impossível encontrar na net um site sem NADA de css, e quando encontra o site é muito ruim, tudo torto.

As Divs e Classes substituem muito bem o uso tabelas em um site, e o estranho é que muita escola de informática "chuleta" ainda bate na tecla de "construções de páginas em tabelas".

Enfim espero ter ajudado, qualquer coisa posta ai.

Vou tentar explicar a teoria, mas a aplicação vai depender muito do trabalho em si.

• Abra um documento com o tamanho 400 x 300 de cor preta (#000000)
• Crie um circulo de 160 x 160 de cor branca (#FFFFFF) e posicione no centro do palco.
• Agora aplique Filter > Noise > Add Noise. Depois coloque o amount em 100 como na figura.
   img01.gif   4.11KB   12 downloads
• O circulo vai ficar parecido com uma TV fora de sintonia, depois é só aplicar Filter > Blur > Zoom Blur com as configurações abaixo:
   img02.gif   3.82KB   15 downloads
• Repita esse processo de zoom blur novamente e pronto, o resultado vai ser esse:
   img03.jpg   11.02KB   10 downloads
• Agora faça um circulo oval, mais ou menos de w: 125 h: 50 e posicione no centro da imagem:
   img04.gif   9.86KB   7 downloads
• Mude o Edge para Feather e coloque em 30.
   img05.gif   1.98KB   11 downloads

Reultado final:
 img06.jpg   10.32KB   25 downloads

Você pode fazer isso em qualquer cor, apenas faça o circulo inicial em outra cor, ao invés de branco.

Esse site é de vetores, muitos artistas cadastrados no Alltollz expõem seus trabalhos e alguns até liberam para download do arquivo .eps.
Pra quem gosta como eu é um prato cheio.

alltollz » Vectors

Bons ventos!

Salve galera!

Ganhamos autorização para postarmos alguns tutoriais bacanas de nivel avançado.
Esse vai ser o primeiro de uma serie de tutoriais do site abduzeedo.com.


Tutorial: Usando referências de design gráfico para criar um header no fireworks

INTRODUÇÕES:
Temos publicado nos últimos dias diversas referências de design gráfico com trabalhos sensacionais de vários artistas. Muitos destes designers abusam do uso de luzes, linhas brilhantes, movimentos e cores que nos deixam intrigados. Alguns sites já estão usando esta estilo de efeitos, inclusive esta versão do Abduzeedo, mas hoje vamos usar o Fireworks para criar o header de um webiste, e mostrar como usar estas referências para inspiração na hora de desenvolver uma interface para web.

REFERÊNCIAS
Com uma breve pesquisa nas nossas últimas inspirações citadas aqui no blog, temos 5 imagens que serão fundamentais como referência para nosso design. São imagens que usam elementos que iremos utilizar também em nosso layout: linhas iluminadas, cores, luzes, pontos de estrelas no céu e elementos que simulem estar em movimento.


Por ordem seguem quem são os artistas de cada imagem: 1 - James White, 2 - Paul-Willock, 3 e 4 - Chuck-Anderson, 5 - Tony-Ariawan.

PASSO 1

Primeiro de tudo, abra um arquivo de 1200px de largura, com fundo #000. Vamos agora baixar esta imagem que encontramos no www.sxc.hu. Posicione ela dentro da área de trabalho e redimensione para ficar parecido como que deixamos.


PASSO 2

Vamos então adicionar um retângulo por cima da imagem com um gradiente colorido. Usamos um padrão que é o Spectrum, escolhemos ainda a opção Overlay para dar na imagem. Tudo que formos fazer agora de elementos estarão por baixo do layer deste gradiente, para todos ficarem no mesmo padrão de cores.


PASSO 3

Agora vamos criar os elementos de cma da imagem, como se fossem as luzes vindas do céu. Para isso crie um retângulo de 360 x 95px. Aplique um Feather de 100% e uma textura de Line Diagonal com 22%. Após isso vamos aplicar um gradiente neste retângulo. Use o Silver, e depois gire o retângulo 45º, para ficar como na figura.


PASSO 4

Posicione o retângulo na parte de cima da nossa imagem. Duplique este layer para conseguirmos aumentar a luz. Depois copie um dos retângulos para o lado e diminua um pouco para dar um efeito de uma luz um pouco menos intensa que está entrando.


PASSO 5

Para criarmos os pontos de estrela no céu vamos usar a ferramenta Brush "B". Selecione ela, na opção de strokes escolha WaterColor > Thin, depois vá em Stroke Options..., ali selecione os valores conforme as figuras, desta forma vamos criar um brush com pontos aleatórios. Feito isto, escolha a cor #FFF e começe a fazer algumas estrelas no céu, vá aumentando e diminuindo a espessura do seu brush para fazer pontos de tamanhos diferentes.


PASSO 6

Nosso próximo passo é criar as linhas ao longo da imagem. Vamos usar aqui a ferramenta Vector Path Tool (P), com ela vamos fazer linhas tipo brush, depois só editamos um pouco os nós. Faça um teste com algumas linhas e depois aplique na imagem. Se precisa use algumas máscaras no final das linhas para dar sensação de fade. Dica: faça movimentos rápidos no momento de fazer as linhas, elas ficarão com menos nós e mais suaves.


PASSO 7

Faça alguns ajustes agora de acabamento da imagem, adicionando alguns elementos de luz, uns fades nas extremidades da imagem e posicione seu logotipo para dar a impressão certa de um fantástico header para website.


RESULTADO FINAL

Aqui está nosso header pronto. Podemos agora ficar brincando com as cores do gradiente principal. com as imagens de baixo, com outras linhas, enfim, vai da criatividade e talvez do tema do site de cada um!



Fonte: zee.com.br


É isso ai galera, em breve postarei mais coisas.
Dúvidas, avisos e decepções é só postar.

Bons Ventos!