Help
Hoje criaremos estilos de filetes para background e utilizaremos eles com ajuda do CSS, bem simples, mas para isso temos que abordar um pouco dessa linguagem para que ela se estruture na criação do nosso layout.
Resultado final do layout. http://www.adrianoaguiar.kit.net/tutoriais/final.html
QUOTE
Vamos inciar no Photoshop
Criando os Filetes
QUOTE
1º Filete
Criaremos um novo documento no Photohop de Largura 10 pixel por 28 pixel, resolução 72 pixels/polegada. Sendo que para trabalhar com filetes você tem que trabalhar pixel a pixel, então sendo assim, aumentaremos o zoom ( CRTL e + ) ao máximo. Para trabalharmos com definições precisas, utilizaremos dos recursos da régua ( CRTL + ALT + R ) e puxaremos as linhas da regua para estes espaços conforme a ilustração. Conforme a ilustração criaremos três linhas com 1px de largura e traçaremos na diagonal, depois nos estilos de camada (layer style) usaremos sobreposição do degradê e aplicaremos as cores referentes.
Salve o 1º filete com o nome stripes_small e ele será responsável pelo topo e o ródapé da página.
Criaremos um novo documento no Photohop de Largura 10 pixel por 28 pixel, resolução 72 pixels/polegada. Sendo que para trabalhar com filetes você tem que trabalhar pixel a pixel, então sendo assim, aumentaremos o zoom ( CRTL e + ) ao máximo. Para trabalharmos com definições precisas, utilizaremos dos recursos da régua ( CRTL + ALT + R ) e puxaremos as linhas da regua para estes espaços conforme a ilustração. Conforme a ilustração criaremos três linhas com 1px de largura e traçaremos na diagonal, depois nos estilos de camada (layer style) usaremos sobreposição do degradê e aplicaremos as cores referentes.
Salve o 1º filete com o nome stripes_small e ele será responsável pelo topo e o ródapé da página.
QUOTE
2º filete
Crie um novo documento com Largura 100px por Altura 136px, aumentaremos para trabalhar como a ilustração anterior, faremos conforme a ilustração. Iremos criar 4 traços na diagonal com 15px de largura e mesclaremos eles para utilizar sobreposição do dregradê com as core referentes, adicionaremos uma máscara de camada e aplicamos um degrade no sentido das linhas diagonais.
Salve o 2º filete com o nome stripes e ele será responsável pelo topo central da página.
Crie um novo documento com Largura 100px por Altura 136px, aumentaremos para trabalhar como a ilustração anterior, faremos conforme a ilustração. Iremos criar 4 traços na diagonal com 15px de largura e mesclaremos eles para utilizar sobreposição do dregradê com as core referentes, adicionaremos uma máscara de camada e aplicamos um degrade no sentido das linhas diagonais.
Salve o 2º filete com o nome stripes e ele será responsável pelo topo central da página.
QUOTE
3º filete
Agora que vem o ultimo filete, nele você terá que ter mais atenção na hora da criação, pois será ele o unico filete responsável por suas ações do botão, no caso quando ele estiver estático e quando for colocado o mouse sobre ele, estando concluído a ilustração.
Salve o último filete com o nome nav e ele será responsável pela o menu alternar conforme a ilustração.
Agora que vem o ultimo filete, nele você terá que ter mais atenção na hora da criação, pois será ele o unico filete responsável por suas ações do botão, no caso quando ele estiver estático e quando for colocado o mouse sobre ele, estando concluído a ilustração.
Salve o último filete com o nome nav e ele será responsável pela o menu alternar conforme a ilustração.
QUOTE
Vamos inciar a Marcação (XHTML/CSS)
Pronto, terminamos os três filetes principais, sendo que você terá que copiar esta imagem, para que ela seja a responsável de ficar por baixo de nosso titulo do layout.
Agora entraremos na parte de criação com auxilio do CSS (Cascate Style Sheets), sendo que comentarei os seguinte codigos CSS que será de importância para conluirmos nosso layout, caso queiram saber mais temos um ótimo conteudo no portal do MAUJOR. Então comentarei sobre os seguintes códigos:
background-color.........cor de fundo.
background-image.........imagem de fundo.
background-repeat........maneira como a imagem de fundo é posicionada.
background-attachment....se a imagem de fundo "rola ou não na tela.
background...............maneira abreviada de todas as propriedades.
Aqui está o código HTML:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MXStudio</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">
<br>
<span><strong>Como fazer filetes background no photoshop</strong></span>
</div>
<h1 id="title">MXStudio</h1>
<ul id="nav">
<li id="current"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Conteúdo mx</a></li>
<li><a href="#">Diversos mx</a></li>
<li><a href="#">Fórum</a></li>
<li><a href="#">Publicidade</a></li>
<li><a href="#">Quem faz?</a></li>
<li><a href="#">Contato</a></li>
</ul>
<!-- Aqui fica a div do contudo a ser colocado no layout.-->
<div id="conteudo">
<h2>Todo o seu conteudo aqui =)</h2>
</div>
<div id="top"><address>Copyright - 2006 Todos os direitos reservados.</address></div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MXStudio</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">
<br>
<span><strong>Como fazer filetes background no photoshop</strong></span>
</div>
<h1 id="title">MXStudio</h1>
<ul id="nav">
<li id="current"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Conteúdo mx</a></li>
<li><a href="#">Diversos mx</a></li>
<li><a href="#">Fórum</a></li>
<li><a href="#">Publicidade</a></li>
<li><a href="#">Quem faz?</a></li>
<li><a href="#">Contato</a></li>
</ul>
<!-- Aqui fica a div do contudo a ser colocado no layout.-->
<div id="conteudo">
<h2>Todo o seu conteudo aqui =)</h2>
</div>
<div id="top"><address>Copyright - 2006 Todos os direitos reservados.</address></div>
</body>
</html>
Aqui está o código em CSS.
CODE
body {
background: #277575 url(images/stripes.gif) repeat-x;
background-position: 50% 20px;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#nav {
text-align: center;
width: 100%;
background: url(images/nav.gif) repeat-x;
margin: 0;
padding: 0;
height: 40px;
overflow: hidden;
cursor: default;
}
#nav li, #nav a {
display: inline;
color: #fff;
text-decoration: none;
font: bold 11px verdana, arial, helvetica, sans-serif;
height: 40px;
line-height: 40px;
padding: 13px 15px;
margin: 0;
}
#nav li a {
background: url(images/nav.gif) repeat-x;
}
#nav li a:hover {
background: transparent url(images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li#current a {
background: transparent url(images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li {
padding: 0;
}
#title {
width: 410px;
height: 101px;
background: transparent url(images/title_background.jpg) no-repeat;
line-height: 75px;
display: block;
margin: 0 auto;
margin-top: 66px;
text-align: center;
font: normal 40px/80px verdana, helvetica, sans-serif;
color: #95A1C3;
letter-spacing: 8px;
cursor: default;
}
#top {
height: 28px;
overflow: hidden;
width: 100%;
background: #000 url(images/stripes_small.gif) repeat-x;
color: #fff;
text-align: left;
font: normal 10px/32px arial, verdana, helvetica, sans-serif;
}
#top strong {
font: bold 11px arial;
}
#top span {
cursor: default;
margin-left: 10px;
float: left;
margin-top: -25px;
}
background: #277575 url(images/stripes.gif) repeat-x;
background-position: 50% 20px;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#nav {
text-align: center;
width: 100%;
background: url(images/nav.gif) repeat-x;
margin: 0;
padding: 0;
height: 40px;
overflow: hidden;
cursor: default;
}
#nav li, #nav a {
display: inline;
color: #fff;
text-decoration: none;
font: bold 11px verdana, arial, helvetica, sans-serif;
height: 40px;
line-height: 40px;
padding: 13px 15px;
margin: 0;
}
#nav li a {
background: url(images/nav.gif) repeat-x;
}
#nav li a:hover {
background: transparent url(images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li#current a {
background: transparent url(images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li {
padding: 0;
}
#title {
width: 410px;
height: 101px;
background: transparent url(images/title_background.jpg) no-repeat;
line-height: 75px;
display: block;
margin: 0 auto;
margin-top: 66px;
text-align: center;
font: normal 40px/80px verdana, helvetica, sans-serif;
color: #95A1C3;
letter-spacing: 8px;
cursor: default;
}
#top {
height: 28px;
overflow: hidden;
width: 100%;
background: #000 url(images/stripes_small.gif) repeat-x;
color: #fff;
text-align: left;
font: normal 10px/32px arial, verdana, helvetica, sans-serif;
}
#top strong {
font: bold 11px arial;
}
#top span {
cursor: default;
margin-left: 10px;
float: left;
margin-top: -25px;
}
Pontos Importantes no CSS
QUOTE
#top {
height: 28px;
overflow: hidden;
width: 100%;
background: #000 url(images/stripes_small.gif) repeat-x;
color: #fff;
text-align: left;
font: normal 10px/32px arial, verdana, helvetica, sans-serif;
}
Aqui estamos trabalhando com marcações bem simples, sendo que dessa formatação do ID top temos o nosso background, onde utilizamos uma cor preta de fundo e uma URL direcionando uma imagem a ser mostrada no ID, repeat-x para que a imagem stripes_small seja exibida somente na horizontal e um overflow: hidden para ocultar o excesso da DIV top no IE ( Internet Explorer ).
height: 28px;
overflow: hidden;
width: 100%;
background: #000 url(images/stripes_small.gif) repeat-x;
color: #fff;
text-align: left;
font: normal 10px/32px arial, verdana, helvetica, sans-serif;
}
Aqui estamos trabalhando com marcações bem simples, sendo que dessa formatação do ID top temos o nosso background, onde utilizamos uma cor preta de fundo e uma URL direcionando uma imagem a ser mostrada no ID, repeat-x para que a imagem stripes_small seja exibida somente na horizontal e um overflow: hidden para ocultar o excesso da DIV top no IE ( Internet Explorer ).
QUOTE
#nav li, #nav a {
display: inline;
color: #fff;
text-decoration: none;
font: bold 11px verdana, arial, helvetica, sans-serif;
height: 40px;
line-height: 40px;
padding: 13px 15px;
margin: 0;
}
#nav li a {
background: url(images/nav.gif) repeat-x;
}
#nav li a:hover {
background: url(images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li#current a {
background: url(images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li {
padding: 0;
}
Nessa parte da estrutura temos display: inline; que fica responsável para que o menu horizontal não desça sobre o proximo elemento da lista ( se rompendo ), o background que foi comentado anteriormente e é de fundamental utilização no caso desses filetes, sendo que nessa marcação CSS exploramos as propriedades de link, onde no a: hover utilizamos uma forma para que alterne o filete nav com a propriedade background-position: x-% que no caso colocamos valor 0 (zero) e o y-% que colocamos -40px e matamos a charada no porque de criar o filete nav de cima para baixo, para que possamos dar este valor negativo e quando o mouse ficar sobre ele elevar o filete revelando a parte de baixo do filete que fica oculto.
display: inline;
color: #fff;
text-decoration: none;
font: bold 11px verdana, arial, helvetica, sans-serif;
height: 40px;
line-height: 40px;
padding: 13px 15px;
margin: 0;
}
#nav li a {
background: url(images/nav.gif) repeat-x;
}
#nav li a:hover {
background: url(images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li#current a {
background: url(images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li {
padding: 0;
}
Nessa parte da estrutura temos display: inline; que fica responsável para que o menu horizontal não desça sobre o proximo elemento da lista ( se rompendo ), o background que foi comentado anteriormente e é de fundamental utilização no caso desses filetes, sendo que nessa marcação CSS exploramos as propriedades de link, onde no a: hover utilizamos uma forma para que alterne o filete nav com a propriedade background-position: x-% que no caso colocamos valor 0 (zero) e o y-% que colocamos -40px e matamos a charada no porque de criar o filete nav de cima para baixo, para que possamos dar este valor negativo e quando o mouse ficar sobre ele elevar o filete revelando a parte de baixo do filete que fica oculto.
Então é isso pessoal espero que gostem do tutorial e até a próxima.
Adriano Aguiar - adrianoaguiaralves@gmail.com
Em caso de duvidas postem abaixo ou utilizem nosso Forúm de CSS.
