|
Olhem o background desta
página e verão o modelo deste tutorial...Sim, as molduras douradas ficaram bem
grandes, mas é para chamar a atenção de vocês. :o)
Aqui poderão ver o que foi utilizado para os screenshots
de demonstração
1 - Abra uma imagem de 550 X 600
2 - Escolha duas cores para o foreground e background. Estas aqui são
as minhas:
3 - Preencha a nova imagem com uma das duas cores.
4 - Aplique um efeito de textura, que pode ser através do Texturizer ou
do próprio Paint Shop. No meu eu usei a textura do background crocante.
5 - Depois de preparada a imagem, é hora de adicionar uma borda de 10
pixels, simétrica.
6 - Selecione a borda com a Magic Wand e aplique-lhe a mesma
textura utilizada na imagem anterior.
7 - Selections/Invert
8 - Effects/3D Effects/Cutout/. Configurações: Opacity: 50; Blur: 5;
vertical e Horizontal: 5.
9 - Aplique novamente o cutout com os ajustes acima, apenas mantendo o
vertical e o horizontal em -5.
10 - Repita os passos de 5 a 9, criando uma outra borda com a cor do
foreground.
11 - Adicione bordas de 15 pixels e preencha-as com a pattern escolhida
no começo deste trabalho.
12 - Selections/Invert
13 - Aplique os cutouts com as mesmas configurações anteriores.
A imagem ficará assim:
14- Adicione borda de 15
pixels, selecione com a magic
wand e aplique a textura.Em seguida, aplique o Inner Bevel nas seguintes
configurações:
Sua imagem ficará assim:
15 - Agora, desmarque a opção Symmetric e adicione
bordas de 100 em Top e Bottom e 30 em Right e Left. Coloque a textura
para que fique toda igual.Sua imagem ficará assim:
16 - Agora, faça a imagem para o background, que
deverá ser um pequeno tile: abra uma imagem nova de 150 x 150 e
preencha com a cor que foi utilizada na última borda. Não se esqueça
de adicionar a textura ( sempre a mesma e nas mesmas
configurações...). Salve esta imagem.
17 - Layers/New Raster Layer
18 - Com a ferramenta Texto ativa, escreva o que desejar na parte
supeior da moldura. Enquanto estiverem selecionadas as letras, aplique
efeitos, plugins ou o que desejar....
19 - Com a borrachinha, apague pedacinhos das letras para que pareçam
entrelaçadas à moldura. Veja como estou fazendo o meu:
20 - Neste ponto do trabalho, você poderá colocar
tubes, adicionar efeitos e enfeitar a sua página. Depois de finalizada,
Merge/All Flatten e salve de acordo com as instruções abaixo:
Salvando seu trabalho e
empregando-o na página, junto com o Script.
Depois de pronta a imagem,
corte-a em três partes, (Selecione cada porção da imagem e dê Edit Copy/Edit
Paste/As a New Image para cada uma), seguindo o modelo acima, sem se preocupar
em dividi-la em partes iguais na altura. Mantenha apenas a largura igual para os
três pedaços, obedecendo à largura da imagem toda. Salve cada pedaço
com um nome curto e de fácil identificação. Neste tutorial, por ser de
autoria norte americana, escolheram-se: cutoutbg para a imagem de background,
cutouttop para a imagem do topo, cutoutmiddle para a imagem do meio e
cutoutbottom para a imagem do fundo.
SCRIPT
|
Instruções sobre o Script
Azul=Mudanças opcionais
Verde=Mudanças
para Música
Marrom=Mudanças
para o Background - Aqui você muda o nome do background. Neste
script, observe, é "cutoutbg.jpg"
Púrpura=Mudanças
na imagem do topo (top) - É importante que se coloque o nome da
imagem, o caminho dela em seu computador e o seu tamanho em
largura (width) e altura (height). Neste script, as medidas estão
adequadas ao trabalho feito por seu autor.
Vermelho=Mudanças
na imagem do meio (middle)
- É importante que se coloque o nome da imagem, o caminho dela em
seu computador e o seu tamanho em largura (width) e altura (height).
Neste script, as medidas encontradas estão adequadas ao trabalho
feito por seu autor.
Ocre=Mudanças
na imagem do fundo (bottom) -
É
importante que se coloque o nome da imagem, o caminho dela em seu
computador e o seu tamanho em largura (width) e altura (height).
Neste script, as medidas encontradas estão adequadas ao trabalho
feito por seu autor.
Rosa=Aqui é
necessário que se configure a largura igual à largura das
imagens: topo, meio e fundo ( top, middle,e bottom). Se o tamanho
de suas imagens têm 620 de largura (width), É OBRIGATÓRIO QUE
SE ACRESCENTE ESTA MEDIDA AQUI, CASO CONTRÁRIO SEU TRABALHO NÃO
VAI DAR CERTO....
Vocês devem
colar este script na aba HTML de seus editores de páginas ou de
correio e verificar atentamente as explicações acima. Ao dividir
a imagem em três partes, cuidem para que a largura seja igual
para as três, uma vez que a imagem inteira tem uma largura
só....E não se esqueçam de especificar as medidas de cada
imagem em seu script....
SCRIPT
- Copie e cole primeiro no Bloco de Notas. Transfira do bloco para
seu editor de páginas ou para o Outlook Express.
OBSERVAÇÃO: Na aba Normal do Front Page ou na aba Editar do
Outlook Express, as imagens NÃO ficam alinhadas.....É somente na
visualização que a imagem vai aparecer por inteiro.
|
<html>
<head>
<title></title>
<!-- Script written by Carissa with the help of Sven's java
script for embedding the background image. Thank you Sven. January
2000 -->
<STYLE>BODY {
BACKGROUND-COLOR: #FFFFFF;
COLOR: #8E9070;
FONT-FAMILY: "Arial";
FONT-SIZE: 12pt;
MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
</STYLE>
</head>
<body background="c:/program files/common files/microsoft
shared/stationery/cutoutbg.jpg">
<BGSOUND src="c:/program files/common files/microsoft
shared/stationery/music..mid"
volume=-200 loop="-1">
<p align="center" style="margin: 0"><img
border="0" src="c:/program files/common files/microsoft
shared/stationery/cutouttop.jpg"
width="670"
height="182"></p>
<div align="center">
<center>
<table id="TabBak" style="border: none"
cellpadding="0" align="center" width="670">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="0"
cellspacing="0" width="75%">
<tr>
<td width="100%">
<p align="center"><font size="6">Text
Goes Here</font></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</center>
</div>
<img id="image" src="c:/program files/common
files/microsoft shared/stationery/cutoutmiddle.jpg"
width="670"
height="100"
style="Display: none">
<SCRIPT language=JavaScript>
function tableBackground() {
TabBak.background = image.src;
}
tableBackground();
</SCRIPT>
<p align="center" style="margin: 0"><img
src="c:/program files/common files/microsoft shared/stationery/cutoutbottom.jpg"
width="670"
height="242"></p>
</body>
</html> |
|
