Vídeo Aula como Fazer Layout Site Photoshop CS2 + CSS
2 Dezembro, 2008
Vocês poderão acompanhar o desenvolvimento de um Layout (modelo) de site no Photoshop CS 2, com topos, menus, conteúdo e rodapé. Quero fazer essa vídeo aula completa, desde o Photoshop até a montagem do mesmo no Dreamwaver, usando CSS.
Espero que todos q irem assistindo essas vídeo-aulas postem aqui seus comentários, sejam eles bons ou ruins, isso só vai fazer com que eu melhore cada vez mais meus trabalhos.
Observação: Algumas vídeo-aulas não possuem audio, mas são de fácil entendimento, só acompanhar.
Links para download:
Como Fazer Layout Site Photoshop – 1
Como Fazer Layout Site Photoshop – 2
Como Fazer Layout Site Photoshop – 3
Preparar Layout Site Photoshop – 4
Montando Layout Site – Parte 5.1
Montando Layout Site – Parte 5.2
Montando Layout Site – Parte 5.3
Montando Layout Site – Parte 5.4 (Menus horizontais CSS)
10 Dezembro, 2008 às 10:14 am
Links corrigidos. Obrigado por me informarem.
13 Dezembro, 2008 às 4:57 pm
obrigado mesmo
13 Dezembro, 2008 às 4:58 pm
Estou a gostar mesmo dos seus tutoriais, tenho aprendido algumas coisas em photo shop e dream com css que ate aqui me parecia inatingivel.
Estou a tentar fazer algo parecido ao seu projecto (com base no seu)
Apenas estou com uma dificuldade, em alinhar a imagem na div esquerda.
http://img75.imageshack.us/my.php?image=semttulotv5.jpgIMGhttp://img75.imageshack.us/img75/4053/semttulotv5.th.jpg
o meu codigo css esta assim ate agora
/* Deixar as margens 0 em todo o site */
* {margin:0; pading:0;}
/* Border das imagens 0 */
img {border:0;}
/* cor e letra todo o site */
body {
background-color:#d9d7df;
font-family:Arial, Helvetica, sans-serif;
}
/* formatação */
h1, h2 {font-size:14px;font-weight:bold; }
p {font-size:12px}
/* Estrutura geral do site */
#geral {
width:730px;
height:650px;
margin:0 auto; /* centra o div geral */
}
/* Topo do site e altura */
#topo {
width:730px;
height:156px;
}
/* Espaço menus */
#menus {
width:730px;
height:38px;
background-image:url(IMAGENS/bg_menu.jpg);
}
/*CONTEUDO DO SITE*/
#conteudo {
width:730px;
height:392px;
background-color:#feefd6
}
/* Inicio do rodape */
#Rodape {
width:730px;
height:49px;
border-top:1px solid #fae5c3;
background-color:#d9d7df;
padding-top:2px;
color:#000000;
text-align:center;
font-size:11px;
}
/* Coluna esq */
#coluna_esq {
width:494px;
height:372px;
background-color:#feefd6
}
è minha intensão criar uma coluna dta com cor branca de modo a escrever la links e informações.
Veija o que planiei no photoshop com a sua ajuda:
http://img81.imageshack.us/my.php?image=semttulo2cs9.pngIMGhttp://img81.imageshack.us/img81/5012/semttulo2cs9.th.png
Obrigado e se puder ajudar agradecia. (isto não tem fim lucrativo, apenas gosto de fazer e aprender
15 Dezembro, 2008 às 12:14 am
Ola jfelizardo, para manter a imagem a esquerda, vc poderá criar uma classe para a imagem.
Ex:
.img_left img {float:left;}——————————
no xhtml:
div class="img_left"> sua imagem </divou tentar…
img src="pasta/sua_imagem.jpg" class="img_left" /Uma correção neste código:
/* cor e letra todo o site */body {
background-color:#d9d7df;
font-family:Arial, Helvetica, sans-serif;
}
-a cor que me refiro é do fundo do site ( background-color:#d9d7df;) se quizer acrescentar no código uma cor padrão para fonte em todo site então seria:
/
* cor e letra todo o site */body {
background-color:#d9d7df;
font-family:Arial, Helvetica, sans-serif;
color:#000; /* cor da fonte */
}
No possível responderei as perguntas.
Obrigado por baixarem a aula e espero a estar ajudando vocês.
Jair Alievi
13 Dezembro, 2008 às 7:35 pm
mano
parece ser muito bom video aula
ja baixei
vou segui-lo
14 Dezembro, 2008 às 11:05 pm
Muito bom, eu só uso o FireWorks pra criar layouts (Modelos),
faz um bom tempo q gostaria de fazer pelo Photshop, mas nao tinha chances….agora vamos ver se faço, valeu!
13 Janeiro, 2009 às 11:38 pm
Ola amigo baixei todos os seu curso, mais não sai audio, e ja verifiquei a placa de son esta perfeitamente instalada, tentei nos 2 brouwse firefox e Ie, se puder me informar como resolvo agradeço a ajuda.
Sds
Robson
27 Janeiro, 2009 às 2:59 pm
A video aula esta muda, não consigo ouvir, estou usando o flash para assistir as video aulas, mas esta sem audio.
Me passe um outro programa!!
Obrigado!
30 Janeiro, 2009 às 10:21 am
Voce vai lança mais Aulas, pois estou aprendendo muito obrigado pela ajuda
2 Fevereiro, 2009 às 7:21 pm
A video tem uma boa forma de se aprender, mas esta sem audio…
Solicito mais informações pois tenho todos os codec´s instalados na minha maquina ok…
Abraços, espero por uma resposta.
3 Fevereiro, 2009 às 11:55 am
Ola Sergio. Tem umas aulas que não tem audio mesmo, motivo: Falha no fone (defeito mesmo). Quando eu tiver um tempinho gravo um audio e edito novamente o vídeo.
Espero estar ajudando. Obrigado.
17 Fevereiro, 2009 às 8:20 pm
Muito legal!
Sou formado em webdesign, mas admito que não me aprofundei muito. Fiz num desses cursinhos meia -boca (SOS Computadores) e na época eles me ensinavam a fazer site por tabela. Hoje já é CSS. Me ajuda muito isso! Valeu mesmo…
Ps.: Seu PC é lerdinho né? kkkk
26 Fevereiro, 2009 às 9:01 pm
Alievi, ótimas video aulas pena que não tem audio para torna-la mais compreensível, gostaria de reforçar o outro pedido que se possivel inserir o audio ou um novo projeto do mesmo conteúdo com audio. Quanto a aula e pela iniciativa você está de parabéns e tenha certeza que foi de grande e importante ajuda.
8 Março, 2009 às 12:48 am
Gostaria de agradecer ao Alievi por colocar etes videos na internet, por ter dedicado seu tempo para estar passando para outras pessoas como eu que nao tem a oportunidade de fazer um curso ou comprar um bom livro para aprender css.
espero que voce tenha motivaçao para fazer mais videos… que Deus retribua a voce e ele vai!!!
21 Março, 2009 às 10:58 am
Otimas aulas se vc estivesse vendendo estas aulas, após assistilas compraria …
muito conhecimento, parabens
poderia fazer e vender essas ou outras aulas de sua autoria, além disso quem vive de vento e balão?
21 Março, 2009 às 12:46 pm
OBRIGADO Jonathn. To pensando em organizar mais uns conteúdos desses e vender, porque é complicado reservar um tempo pra se dedicar a um novo curso e deixar de lado meu trabalho. Mas sempre que eu puder vou postar vídeos gratuitos no blog, mas penso em fazer um mais completo em vídeo pra vender também.
29 Março, 2009 às 11:46 am
Alô família WEB!
Alievi admiro a sua maneira de transmitir os conhecimentos aos outros, as VA´s são muito clara só não entende quem não as quer entender. Porém, sou da opinião que deve continuar a fazer VA´s grátis também deve planejar fazer um ou mais VA´s em CD/DVD para venda para gerar motivação e desafios.
NB:
conteúdo dos projectos para venda obviamente que devem ser diferentes para que possam dispertar atenção e atrair toda família WEB.
Tenho aprendido muito com as sua VA´s que as irei usar para redesign do site que estou a desenvolver:
http://www.collenpillartravel.com/
Muito grato por nos ajudar.
SUCESSOS para ti.
30 Março, 2009 às 10:20 am
amigo alievi nao to conseguindo baixar tentei o link 1 mais nao esta funcionando me ajude
2 Abril, 2009 às 10:36 am
Alievi, muito obrigado mesmo cara, muito bom o tuto, porém, estou com uma dificuldade, tentei criar uma lista ordenada para o menu, porém, nada que eu fizesse consegui colocá-la no meio da div menu, ela sempre fica colada no top, tentei margin, tentei padding e por fim tentei usar absolute, porém, quando uso absolute tenho que usar o padding pra afastar da esquerda e o hover fica sobre todo o padding (muito louco), não sei se consegui explicar no que consiste minha dúvida, mas gostaria que vc me esclarecesse como colocar uma lista ordenada no meio (em relação à altura) da Div menu se puder me manda um e-mail. Vlw denovo, obrigado.
3 Abril, 2009 às 11:00 am
Ola Alevi…
As suas videos aulas parecem muito boas,
porem eu não estou obtendo audio delas!!!
Seria algum Plugin que não tenho ???
13 Maio, 2009 às 10:51 am
Eu consegui ver só o primeiro vídeo que por sinal esta mto bom. Mas as outras partes parece que estão off…tem como ajudar nós pobres aprendizes e reupar denovo…rsrs
Vlw!
21 Maio, 2009 às 1:21 am
Vou verifcar os links. Obrigado por avisar.
8 Junho, 2009 às 3:57 pm
Ola estou baixando essas videos aulas mas me diz pq o q to baixando ta sem audio pelo menos as 3 primeiros estao sem audio
28 Junho, 2009 às 11:31 pm
Valeu cara, você está de parabéns. Eu precisava montar um site e estava sem ideia nenhuma, e todos os trabalho que eu fazia eu julgava “feios”, ao ver seu video tutorial pude ter uma grande noção e tudo está correndo bem agora. Obrigado! E parabéns pelo Tutorial.
28 Junho, 2009 às 11:33 pm
Parabéns, o tutorial está muito bom, simples e objetivo. Me ajudou e muito.
7 Julho, 2009 às 5:10 pm
Fiz download do 1 tutorial, e nao tem audio, o que devo fazer?
9 Julho, 2009 às 7:55 pm
Lucas, os videos não tem audio.
12 Julho, 2009 às 3:22 pm
s partes s5.2, 5.3 e 5.4 foram apagadas, queria saber se tinha como postalas novamente.
19 Julho, 2009 às 11:57 pm
O link da parte 5.3 não está funcionando. Poderia postar novamente? Obrigado!
29 Julho, 2009 às 9:36 pm
Adorei as video aulas que baixei, mas a vídeo-aula “Montando Layout Site – Parte 5.3″ no EazyShare está com aviso que foi retirada???
Fiquei chatedo porque estou na Net correndo atráz de tudo o que a ALIEVI posta a nível de video-aula que são claras, objetivas e inteligentes pois por não conterem áudio fazem com que os monitores expliquem detalhadamente atravéz de imagens no vídeo e isto as torna internacionais afinal imagens não precisam de tradução.
Parabéns pela iniciativa, criatividade e sobre tudo pela cooperação sem fins lucrativos, eu só espero que logo eu possa baixar o arquivo faltante.
Obrigado a toda a EQUIPE da ALIEVI ou ESTATUS INFORMÁTICA.
30 Julho, 2009 às 1:03 am
Muito bom msm!!!
Parabéns cara.
continue assim
tem uns videos q ta sem áudio
mas nada q nao dexe de aprender.=)
5 Agosto, 2009 às 10:32 pm
Alievi, fico muito grato por atender ao meu apelo e repostar esta parte faltante da Vídeo Aula.
Mais uma vez agradeço e parabenizo-o pela iniciativa.
24 Setembro, 2009 às 10:05 pm
Amigo, to louco pra acompanhar essas suas vídeo-aulas. Baixei algumas, mas estão SEM SOM. Sabe me dizer qual o problema? Será algo que me falta aqui no PC ou um problema com ele mesmo? Estou pesquisando na net, mas se você ou alguem puder me ajudar, agradeceria muito.
25 Setembro, 2009 às 8:25 am
Olá Edmundo, algumas vídeo-aulas não possuem audio, como relatei ja nos comentários anteriores, mas é só acompanhar, é de fácil entendimento.
Obrigado.
25 Setembro, 2009 às 8:25 am
Olá Edmundo, algumas vídeo-aulas não possuem audio, como relatei ja nos comentários anteriores, mas é só acompanhar, é de fácil entendimento.
Obrigado.