Ol seja bem vindo ao curso completo de Web Designer, neste curso abordaremos temas indispensveis para quem pretende

se especializar ou ate mesmo se reciclar nesta profisso que cresce com passos largos, voc ter toda uma base solida conceitual e prtica. Voc se certificara como um web designer preparado para assumir as responsabilidades de grandes projetos. Me chamo David Lindgren serei o seu tutor neste curso e espero poder fazer parte da sua capacitao e sobretudo lhe dar o retorno de aprendizado mais do merecido e esperado bons estudos. Afinal de contas o que Web Design?

Web Design pode ser visto como uma extenso da pratica do Designer, onde o foco do projeto a criao de Web sites e documentos disponveis no ambiente da Web.

Web Design tende a multidisciplinaridade, uma vez que a construo de pginas na Web requer subsdios de diversas reas tcnicas, alm do Designer propriamente dito.

reas como: Arquitetura da Informao;

Programao;

Usabilidade;

Acessibilidade;

Entre outros, a preocupao fundamental do Web Design agregar os conceitos de usabilidade com o planejamento da interface, garantindo assim que o usurio final atinja os seus objetivos de forma agradvel e intuitiva.

J o Web Designer o profissional competente para a elaborao dos projetos esttico e funcional de um Web site.

Para o desenvolvimento de Web Sites este profissional deve ter a compreenso da mdia eletrnica de disciplinas como: Teoria das cores;

Tipografia;

Arquitetura de Informao;

Semitica;

Usabilidade;

E conhecimento de linguagem de estruturao e formatao de documentos hipertextuais com: XHTML; O XHTML, ou eXtensible Hypertext Markup Language, uma reformulao da linguagem de
marcao HTML, baseada em XML. Combina as tags de marcao HTML com regras da XML. Este processo de padronizao tem em vista a exibio de pginas Web em diversos dispositivos (televiso, palm, celular, etc). Sua inteno melhorar a acessibilidade.

CSS; Cascading Style Sheets (ou simplesmente CSS) uma linguagem de estilo utilizada para definir a
apresentao de documentos escritos em uma linguagem de marcao, como HTML ou XML. Seu principal benefcio prover a separao entre o formato e o contedo de um documento.

Para a aplicao deste conhecimento de forma geral, o Web designer recorre a software de tratamento e edio de imagens, desenho e codificadores.

Como todo trabalho de Designer ele um Projeto;

E precisa de uma anlise informacional a partir de um Briefing;

Detectar corretamente o objetivo do projeto;

essencial para um bom planejamento;

De modo que as aes sejam tomadas de forma correta, mais espera ai o que um briefing ?

Briefing um conjunto de informaes, uma coleta de dados passados em uma reunio para um desenvolvimento de um trabalho ou documento, sendo muito utilizada em: Administrao:

Relaes pblicas:

Publicidade e tambm em desenvolvimento Web.

Briefing deve criar um roteiro de ao para desenvolver a soluo que o cliente procura, como mapear o problema e com essas pistas ter ideias para criar solues.

Criando o topo do site no Fireworks CS5 Vamos iniciar o projeto, estamos trabalhando com o Fireworks CS6

Esse o pontap inicial, vamos criar o visual do nosso site.

Vamos criar o template ou ento o layout, estamos utilizando a verso CS6 do Fireworks, antes de comearmos o desenvolvimento visual criamos uma pasta com o nome Criando um site completo dentro teremos a pasta CSS, Imagem e js.

Estas pastas sero responsveis pela organizao de todo o material de nosso projeto, temos a pasta imagens a logomarca que j foi previamente criada podemos ver.

Vamos voltar ao Fireworks, vamos abrir um novo documento: 1024 por 2000 resoluo de 72px.

Vamos utilizar esta resoluo como parmetro.

Vamos criar um retngulo na dimenso de 1000px por 115px.

Vamos selecionar este retngulo e ao lado no painel aling marcar relativo ao palco Relative To Canvas e clicar em aling Horizontal Center , ou seja a gente esta alinhando este retngulo horizontalmente de acordo com o palco.

Vamos trabalhar a linha guia na vertical caso as rguas no estejam aparecendo voc pode clicar no menu View e no menu dropdow em Ruler .

Voc agora pode criar aqui uma linha Guia na esquerda do layout e criar outra linha Guia a direita, ai a gente vai trabalhar com 1000px no nosso contedo central.

Ai a gente j tem um parmetro do topo do nosso projeto, ok eu vou colocar a cor do topo de um cinza.

Vamos trabalhar com presets, nos temos aqui do lado direito a opo styles.

Vamos escolher o Plastic Styles.

E a gente tem esse cinza aqui. Vamos clicar novamente na forma retangular, copiar Ctrl+C e colar Ctrl+V, vamos arrastar a barra para baixo.

Vamos diminuir na altura Height para 40px.

A gente vai trabalhar com presets novamente, clique no menu drop dow em Plastic Styles neste styles amarelo.

J temos a Barra do topo e do menu.

Agora ns vamos abrir a logomarca.

Essa logomarca j uma logomarca padro.

Ento vamos copiar e colar no topo do nosso projeto.

Agora temos aqui a Logomarca Barra do Topo e a Barra do menu, vamos agora colocar alguns itens clicando na ferramenta Texto.

Como: Home

Vamos escolher a fonte Arial, agora digite o Boto Empresa.

Nossos cursos, Portflio dos alunos, Franquias, Parcerias e Contato.

Ento temos a primeira viso do nosso Topo, agora nos vamos criar o Background do nosso contedo central. Vamos clicar na ferramenta Retngulo;

Clicar e arrastar no Palco um retngulo com mais ou menos 211px.

Vamos colocar um degrade linear.

Vamos inverter as cores, vamos colocar o cinza na parte de cima e o branco abaixo.

Pronto j temos a primeira prvia do nosso projeto.

Modulo 2 Criando efeito com imagem para o topo Antes de continuarmos com o nosso projeto, vamos salva-lo criando uma pasta com o nome de Edit Files.

E salvar como Index. 13 - Criando efeito com imagem para o topo

Temos aqui um arquivo, uma imagem que foi criada para ilustrar o nosso topo, a primeira coisa identificar o altura do nosso topo que 115px vamos dimensionar a altura da imagem em 180px.

Vamos agora no menu modify>>Canvas>>Canvas size.

Na caixa que se abre vamos colocar 339px de largura e 115px de altura.

A imagem ficara assim.

Feito isso vamos dar um Ctrl + X e colar no nosso projeto.

muito comum gente ver projetos onde a imagem fica sobre posta a alguma caixa ou algum bloco e tambm a algum topo, muito comum sites desta mesma forma, uma imagem, um topo e com uma logomarca, mais se voc for observar, a gente tem uma desconsonncia com a continuidade do topo e a imagem, a gente pode observar tambm que a imagem acaba e voc ainda v o fim dessa imagem, isso em termos de Designer muito feio.

A primeira coisa que a gente vai fazer o seguinte, a gente tem aqui o lado esquerdo dessa imagem uma sobra branca.

A gente vai trabalhar essa parte para que dessa forma a imagem se integre ao Topo, como a gente faz isso: Selecione a imagem com a ferramenta seta;

Depois clique no menu Command>>Creative>>Auto Vector Mask.

E temos aqui alguma opes: Linear Shapes.

Vou selecionar este Linear.

E voc pode observar aqui a direita como se a imagem se integrasse ao Topo.

Ela tem um lado que est mais visvel, depois ela vem criando um efeito de como ela estivesse desaparecendo, se voc fizer isso e clicar em OK e depois quiser editar a tolerncia desse efeito muito simples. Voc clica emLayer.

Voc tem acima a Layer desta imagem, voc pode inclusive nome-la para efeito_img_topo. Voc sabe agora que essa Layer esta imagem com efeito.

Voc pode selecionar o bloquinho referente a imagem e trabalhar novamente a saturao do efeito.

Ento a gente incrementou o nosso Topo com esta imagem.

Iremos agora uma ao de incluso dos arquivos do contedo da parte superior, eu posso clicar aqui na quina da regu.

E trazer para a quina do Topo.

Voc pode perceber que ele cria um parmetro de eixo X e Y com 0, ou seja ele comea a contar como 0 a partir da quina do Topo, ai eu vou puxar uma linha guia a 1px do Topo ou seja do 0 para a direita.

Vou fazer a mesma coisa com a outra quina do topo.

Ele zerou exatamente na quina do topo, ai eu vou puxar uma nova linha guia 1px antes do 0.

Agora que j temos o espao criado, podemos criar parmetros de posicionamento facilmente, mas apesar dessa dica a gente no vai usar este posicionamento para criar o nosso contedo superior. Agora vou tirar este Background cinza, no vou usar no contedo superior, vamos utiliza-lo em outro determinado momento.

14 - Criando contedo superior Vamos abrir uma imagem que temos aqui na pasta Edit files de uma imagem que iremos utilizar. V em File>>Open>>Desktop>>Criando um site complete>>Edit files>>slide.

Por enquanto este Slide esta como imagem, mas ele vai funcionar no site.

Vamos agora recorta-lo Ctrl+x e cola-lo Ctrl+v no nosso projeto.

Estamos colocando este bloco apenas para reservar o espao que a gente vai trabalhar. Outro ajuste que a gente tambm pode fazer aqui no menu afastando um pouquinho do Topo.

A gente ficou com um espao aqui reservado.

A gente pode criar um Bloco com 259px de altura e pegamos o limite da linha guia.

O nosso Bloco vai ficar com 259px de (H)altura por 332px de (W)largura.

Vamos agora alinhar os dois Blocos (Slide + Bloco azul). Align Vertical Center.

Ok ento nos temos ai 2 Blocos superiores ainda podemos ajustar o tamanho, vamos modificar o tamanho da largura do nosso segundo Bloco para 334px.

Veja como ficou:

Criamos a parte da Slide que vai funcionar, feito em jquery que a gente vai ensinar a personalizar para adequar ao nosso site e o segundo Bloco vai conter um VIDEO, que pode ser um vdeo institucional da sua empresa, um vdeo de apresentao dos seus produtos, enfim vou abrir o navegado e vou ensinar uma dica bem bacana. Vamos digitar www.google.com.br >>clicar em imagens;

E vamos procurar o seguinte Play button png.

muito importante para termos um retorno satisfatrio do que a gente esta procurando, devemos efetuar buscas em ingls, ento a gente tem uma srie de players. Vamos escolher um;

Uma vez escolhido, vamos salvar esta imagem na Pasta do nosso projeto Criando um site completo>>imagens vamos Renome-la como Play_button.

Ok, vamos abrir a pasta do nosso projeto Criando um site completo>>imagens>>Play_button.png.

Com a imagem aberta vamos agora recorta-lo Ctrl+x e cola-lo Ctrl+v no nosso projeto.

Vamos agora alinhar os nossos objetos, clique no painel Align>>Align horizontal center>> Align vertical center.

Agora j temos o espao Slide e o espao do Bloco do Video.

15 - Criando contedo superior central Nos vamos criar dois Blocos na parte central, o primeiro bloco vai ficar aqui em baixo do bloco do vdeo.

Vamos clicar no bloco do vdeo e Copiar Ctrl+c e depois Colar Ctrl+v

Vamos copiar novamente Ctrl+c e depois Colar Ctrl+v e levar at a linha guia da esquerda.

Vamos dimensionar o nosso Bloco da esquerda com a mesma medida do Slide.

Selecionamos os dois blocos clicamos no painel Align>>align bottom edge.

O Bloco do lado direito a gente vai reservar para o Box do Facebook , vamos colocar o Plastic Style.

Do lado esquerdo a gente vai colocar o preset amarelo que tambm esta no Plastic Style.

Vamos tirar esta cor central, ai a gente fica com este espao para poder trabalhar.

Vamos criar um texto.

Digite:A MELHOR ESTRUTURA O MELHOR ENSINO com a fonte Eras Medium ITC.

E vamos colocar 3 Blocos abaixo.

Vamos selecionar os trs com o Shift pressionado, vamos alinhar Distribute horizontal center>> Distribute vertical center.

Vamos dar um Ctrl+G para agrupar e tambm com o Shift pressionado alinha com o Bloco maior.

Vamos agora alinhar o titulo com os Blocos, dar um Ctrl+G.

Agora alinhar tudo com o Bloco maior.

A gente vai colocar 3 imagens estratgicas aqui no Bloco A MELHOR ESTRUTURA O MELHOR ENSINO. Vamos abrir o navegador e digitar www.google.com.br >>clicar em imagens;

E vamos procurar o seguinte Play button png.