MXStudio » Marcoantonio

Fatiamento – Slice Tool – Parte 2

Marcoantonio — Wed, 14 Dec 2005 00:00:00 +0000

Montagem do layout em tabelas no Dreamweaver

Salve Comunidade MXStudio!

Dando continuidade a matéria sobre Slice Tool, ja fizemos a parte de fatiamento. Agora daremos continuidade a parte de montagem em tabelas no Dreamweaver. Irei mostras como configurar, partes em Manage Sites, seu manejamento com seus sites irá ficar melhor. Não irá indo em File > Open toda hora para abrir seua página, confira a seguir.

Vamos ao que interessa pois ficamos muito tempo sem trabalhar.

Configurando Manage Sites

1) Vamos a parte que todos aguardam.
Abre o Dreamweaver, vai em File > New, irá abrir uma nova janela, selecione a opção HTML. Como a imagem abaixo confira:

, Insert > Table (ctrl + alt + t) na largura de 770 pixel. Confira a imagem abaixo:

Observe: Que a imagem deu um espaço da borda da tabela.

15)
Adicione um nova tabela na mesma largura, que inseriu para adicionar a imagem, 520px de largura. Confira a imagem abaixo:

17) Abaixo de todas tabelas dentro da principal, adicione a última tabela, onde irá adicionar a imagem do rodapé: Como a imagem abaixo:

mantonio@mxstudio.com.br ou acesse o nosso fórum.

Fatiamento – Slice Tool – Parte 1

Marcoantonio — Fri, 09 Dec 2005 00:00:00 +0000

Coluna Fireworks – Slice Tool – WEB – Parte 1

Salve Comunidade MXStudio!

Primeiramente venho pedir desculpas pela minha ausência nesses meses que fiquei ausente da comunidade, motivos foi a faculdade que apertou em trabalho e outros problemas. Mais estou de volta a comunidade trazendo uma matéria, que muitas pessoas andam me pedindo muito e vejo muitas dúvidas no fórum.
Irei mostrar em duas partes: fatiamento no Fireworks a exportação e a montagem em tabelas no Dreamweaver. Peço atenção nas partes explicadas leiam com calma.

Peguei o layout da matéria Maratona de Layout´s 8, para estar fazendo os processos de fatimento nele, é um layout simples e fácil de ser trabalhar.

Vamos ao que interessa pois ficamos muito tempo sem trabalhar.

1) File > Open – abra seu layout.

2) Selecione a ferramenta Slice Tool (k) .

3) Com Slice Tool selecionada, deremos inicio ao fatiamento, começando pela parte do topo lado esquerdo. Pressione no ponto x: 0px e y:0px, arraste até o fim do campo do menu em largura e solte. A área onde feis a seleção coma Slice Tool irá ficar verde, dizendo que ali é onde feis sua fatia. O tamanho da sua fatia deverá ficar w:250px h:80px. Deverá ficar como a imagem abaixo:

mantonio@mxstudio.com.br ou acesse o nosso fórum.

Conhecendo as Ferramentas do Fireworks – Select

Marcoantonio — Sat, 13 Aug 2005 00:00:00 +0000

Salve Comunidade MXStudio!

Fala comunidade, tranquilidade com vocês? Bom agora iremos começar uma sessão de explicações das Ferramentas do Fireworks. Como essa será primeira, irei mostrar sobre a parte do Select, as ferramentas mais utilizadas diariamente.
Chega de papo e vamos em frente.

1) Pointer Tool ” pressione v ou 0 “>

É a ferramenta que você irá trabalhar mais em seus trabalhos, com ela você poderá selecionar imagens, objetos entre outros. Irá também arrastá-los ao seus lugares desejados, você pode alterar os tamanhos quadrangulares do s objetos.

2) Select Behind Tool ” pressione v ou “>
A Select behind tool faz o mesmo processo da Pointer tool, só que ela tem uma função mais avançada, você poderá selecionar objetos escondidos atrás de outro objeto.
Para isso selecione o objeto que está acima, depois passe a ferramenta acima da imagem selecionada e verá que tem outro objeto abaixo, selecione ele e poderá arrastar para o local desejado.
Veja o exemplo abaixo:

Visualize que os pontos vermelhos que é seleção do retângulo que esta abaixo do principal.

3) Subselection Tool ” pressione A ou 1 “>

A Subselection tool é de grande utilidade na parte de pontos. Quando você cria um retângulo ele terá quatro pontos, com essa ferramenta você poderá mover os pontos.
É uma grande força quando se trabalha com pen tool, você poderá estar movendo os pontos com o mouse ou mesmo com as setinhas do seu teclado um grande auxílio.
Veja o exemplo abaixo:
O primeiro exemplo é quando você seleciona a ferramenta, o segundo é quando você selecione um dos pontos, o terceiro é um exemplo do que você pode fazer.

4) Scale Tool ” pressione Q “>

Com a Scale tool você poderá aumentar e diminuir tamanho do objeto, também tem a opção de você girar o objeto.
É de grande utilidade essa ferramenta, poderá ter grandes resultados e também tem outras opção que irá ver abaixo.

Veja exemplo abaixo:
Observe os pontos pretos ao redor do retângulo, neles você poderá estar comprimindo a imagem ou mesmo aumentando e girando.

5) Skew Tool ” prescione Q “>

A Skew tool trabalha na mesma função do Scale tool de alteração de forma, um coisa de diferente que a Skew tool trabalha com uma forma diferenciada de modificação, ele deixa a forma inclinada:

Veja o exemplo abaixo:
Como no exemplo acima mostrei a seleção, nesse é só você puxar um dos pontos, que irá dar uma forma inclinada, tendo uma técnica saí coisas legais, como esses abaixo:

6) Distort Tool ” pressione Q “>

A Distort tool também é uma edição de formas, a Distort tool deixa você mais livre para trabalhar com ela.
Transformando seu objeto em uma forma totalmente diferenciada das outras mostradas.
Veja o exemplo abaixo:
Observe o exemplo abaixo, para você deixar o objeto nessa posição, você puxa os pontos das laterais só. Dá para chegar em bons resultados, é uma questão de prática.

7) Crop Tool ” pressione c “>

A Crop Tool auxília você estar trabalhando com uma parte de uma imagem.
Importando uma imagem, você pega a ferramenta Crop tool e faz uma seleção onde queira utilizar, dê um duplo clique e o seu Canvas irá ficar no tamanho que você fez a seleção com a Crop tool.

Veja o exemplo abaixo:

Export Area Tool ” pressione C”>
A Export Area tool trabalha no mesmo processo da Crop tool, só que ela tem um detalhe diferente. Quando fazer a seleção você dando dois cliques irá exportar o pedaço que você fez a seleção.
Essa ferramenta pode ser de grande utilidade para seu trabalho.

Bem pessoal chegamos ao fim de mais uma matéria, que será de grande auxílio as pessoas que tem dificuldade em saber o que a ferramenta pode auxiliar e o resultado que pode proporcionar.
Esta apenas começando, fique ligado nas próximas matérias que será de grande auxílio a todos, com grandes técnicas apresentadas e ótimos resultados.
Abraço a todo e até a próxima!

Autor: Marco Antonio C. Santos – Colunista e Moderador de Fireworks do MXStudio

Qualquer dúvida envie um email para mantonio@mxstudio.com.br ou acesse o nosso fórum.

Maratona de Layouts – Parte 8

Marcoantonio — Sat, 18 Jun 2005 00:00:00 +0000

Salve Comunidade MXStudio!

Bom pessoal primeiramente venho pedir desculpas pela minha ausência nas últimas semanas, pois apareceu um porta de emprego e eu abrecei. Foi bem cabuloso as primeiras semanas muito trampo, por isto não deu para eu estar elaborando a matéria de layout.
Mais aqui estou mais uma vez para estar colaborando mais essa grande matéria. O tema continua sendo o de Business.

Veja abaixo o layout que iremos desenvolver:

Vamos ao que interessa pois ficamos muito tempo sem trabalhar.

1) Abra um novo arquivo File > New (ctrl + n) de 770 X 600 pixel.

2) Crie um Retângulo de 770 x 80 pixel, com gradient linear, com as propriedades abaixo:

Bom chegamos no final de mais um matéria. Agora só você adicionar os conteudos que chegará em um bom resultado.
Para um trabalho bom só depende de você próprio praticando e buscando novas técnicas, pois só assim chegará num resultado ótimo.

Veja o resultado final:

mantonio@mxstudio.com.br ou acesse o nosso fórum.

Efeitos Rápidos – Parte 1

Marcoantonio — Sun, 01 May 2005 00:00:00 +0000

“http://www.w3.org/TR/html4/loose.dtd”>

Salve comunidade MX Studio !!!

Bom, para sairmos um pouco da rotina da maratona de layouts iremos mostrar alguns efeitos tradicionais do fireworks, que muitas vezes dão origem à resultados surpreentes. As imagens devem possuir tamanhos iguais, neste caso terão 520x354px.
Para melhor resultado aconselho à usarem imagens de boa qualidade.

Vamos ao que interesa:
Imagens que irei utilizar: Imagem 01 Imagem 02

1º Abra um documento no tamanho de 530 por 364 pixel, cor de fundo #EBEBEB.

2º Agora importe uma imagem, File > Import. Deixe ela no tamanho de 520 x 354 pixel e depois posicione ela nos anglos de x:5 e y:5.

3º Com a primeira imagem importada, agora importe outra imagem, File > Import. Faça o mesmo processo. Deixe ela no tamanho de 520 X 354 pixel e depois posicione ela nos anglos de x:5 e y:5. A segunda imagem importada deverá fica em cima da primeira imagem.

4º Agora selecione a segunda imagem importada, na barra Properties da imagem, veja que ao lado da opacity da imagem tem um campo escrito Normal. Veja a imagem abaixo:

Veja que dentro dessa caixa tem algumas opções, é com elas que vamos trabalhar. Irei explicar cada uma mostrando os resultados que cada uma traz nas imagens. Confira as opções abaixo:

Bom vocês virão que mesclando alguns efeitos básicos do Fireworks tem bons resultados, da para você ir longe com outras técnicas. Como jogar um Hue/Saturation na imagem, diminuindo a opacidade da imagem.

Imagens com boa qualidade e claridade fica bons os resultados. Da para fazer bons trabalhos na mesclagem.
Veja alguns exemplos que eu consegui chegar:

- Imagem de baixo:Multiply. Imagem de cima: Darken

- Imagem de baixo:Color. Imagem de cima: Luminosity
Chegamos ao fim de mais uma matéria, espero que tenham gostado do tema, pois ajuda muito em algumas ocasiões. E lembrem que da para implantar com outros efeitinhos básicos dessa grande ferramenta.
Fiquem ligado ai que vem mais por ai.

Autor: Marco Antonio – Colunista de Fireworks – MX Studio

Qualquer dúvida envie um email para mantonio@mxstudio.com.br ou acesse o nosso fórum .

Maratona de Layouts – Parte 4

Marcoantonio — Sat, 26 Feb 2005 00:00:00 +0000

“http://www.w3.org/TR/html4/loose.dtd”>

Salve Comunidade

Comprazer que do continuidade a mais uma coluna de layout. Nás três primeiros abordamos o assunto de bandas, nessas três a seguir iremos abordar o assunto de moda. Esperamos que tenhamos ajudando as pessoas que tenham dificuldade para planejar um layout.
Obs: Os layouts das colunas são de propriedades dos autores e não podem ser comercializados e nem usados para criação de sites.

Vamos ao que interesa a todos. Iremos criar este layout abaixo

1º Abra um novo documento de 778 x 640 pixel, cor de fundo #F2F2F2.

2º Crie no topo do documento, um retângulo no tamanho de 778 x 45 pixel e com preenchimento Linear como as propriedades abaixo:

Veja no posicionamento certo:
Com a ferramenta Rectangle Tool, crie um retângulo de 778 x 2 pixel, cor do preenchimento #FFFFFF, Texture – Line-Diag 2 e 100% e tambem marque Transparent, posicionando no ponto Y: 2, como as propriedades abaixo:

Faça uma copia desse retângulo Edit > Duplicate ( Ctrl+Alt+D ), posicione no ponto Y:42. Os retângulo criado deverá ficar em cima do retângulo criado na 2º parte, selecione os 3 retângulos e agrupeos Modify > Group. Veja abaixo:

4º Com a ferramenta Rectangle Tool, crie um retângulo de 778 x 10 pixel, cor de preenchimento #FF9900. Posicione o rentângulo abaixo do rêtangulo agrupado acima. Selecione o retângulo laranja, Modify > Arrenge > Send to Back, deixe na posição Y:40. Selecione o retângulo agrupado na 3º parte , selecione o retângulo criado e os agrupeos Modify > Group. Veja abaixo:

5º Com a ferramenta Rectangle Tool, crie um retângulo de 778 x 35 pixel e com preenchimento Linear como as propriedades abaixo:

Adicione no ponto Y:50. Veja abaixo:

6º Agora vamos a parte do logo. Com a ferramenta Rectangle Tool, crie um retângulo de 250 x 85 pixel, com arredondamento de 30%, e com preenchimento Linear como as propriedades abaixo:

Deixe o preenchimento linear como a propriedade abaixo:

7º Importe uma imagem File > Import, e ponha no tamanho de 268 x 365 pixel. Adicione no canto esquerdo, abaixo do retângulo do menu, posição X:0 e Y:85. Veja abaixo:

8º Com a ferramenta Line Tool, crie uma linha de 490 x 1 pixel, cor de borda #CCCCCC. Posicione no ponto X:278 e Y:90.
Com a ferramenta Rectangle Tool, crie um retângulo de 490 x 4 pixel cor do preenchimento #CCCCCC, Texture - Line-Diag 2 e 100% e tambem marque Transparent. Posicione os pontos X e Y de cada um como a propriedade abaixo:

Propriedades do Line Tool

Propriedades do Rectangle Tool

Veja como ficou abaixo:

Com a ferramenta Line Tool, crie uma linha de 1 x 483 pixel, cor de borda #CCCCCC. Posicione no ponto X:273 e Y:91. Veja abaixo:

10º Selecione o retângulo que foi agrupado na 4º parte, e duplique em Edit > Duplicate deixe no tamanho de W:250 e H:33 e na posição de x e y como a propriedade abaixo:

Enfim pessoal chegamos ao fim de mais uma coluna.
Espero te rmostrado novas técnicas para o desenvolvimento de layout, e creio que você tenham gostado desta coluna, e que possam aprimorarem seus conhecimentos sobre layouts.
Vou fincando por aqui. Até a próxima !
Obs: Os layouts das colunas são de propriedades dos autores e não podem ser comercializados e nem usados para criação de sites.
Autor: Marco Antonio – Colunista e Moderador de Fireworks do MX Studio.

Qualquer dúvida envie um email para mantonio@mxstudio.com.br ou acesse o nosso fórum.

Maratona de Layouts parte 01

Marcoantonio — Sun, 09 Jan 2005 00:00:00 +0000

.texto {
font-family: Tahoma;
font-size: 11px;
color: #000000;
}
.titulo_colunas {
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #3E6185;
}
.texto_azul {
font-family: Tahoma;
font-size: 11px;
color: #3E6185;
}
.textodiferente {
font-family: Tahoma;
font-size: 11px;
color: #6699FF;
}
.numerodacoluna
{
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #3E6185;
}

Salve comunidade.

È com carinho que abro mais uma Maratona. Com o sucesso da Maratona
de Topos, nossa equipe descidiu completar esse pacote fazendo a Maratona
de Layout a comunidade MX Studio.
Nós da equipe de Fireworks ficamos feliz pelos elogios da comunidade
na Maratona de Topos, esperamos que tenham ajudado muito com idéias
e estilos de trabalho.Chega de falar e vamos ao que interessa por que tem muita gente na espectativa.

Vamos aos intens que irei usar nesse Layout:
Fontes:
- FFF Galaxy – Menu
- xscale – Titulo dos Tópicos
Imagens:
Imagem
01
Imagem 02
Imagem 03

1. Vamos começar criando um documento no tamanho
de 776 X 580 Pixels, com o fundo na cor
#FFFFFF.

2. Crie no topo do documento, um retângulo no tamanho
de 776 x 20 Pixels,
adicione um preenchimento Linear com as propriedades abaixo:

Após adicionar o preenchimento deverá aparecer da seguinte
maneira:

imagem
01 File > Import (Ctrl+R). Deixe igual as propriedades
abaixo:

A imagem adicionada na sua propriedade esta em cima do retângulo,
para ficar abaixo selecione a imagem 01 Modify > Arrange >
Send Backward (ctrl+a baixo). Veja como deverá
estar:

imagem
02 File > Import (Ctrl+R). Deixe igual as propriedades
abaixo:

A imagem adicionada na sua propriedade esta em cima do retângulo,
selecione o retângulo Modify > Arrange > Bring to
Front (ctrl+shift+acima). O retângulo ficará em
cima das 2 imagens importadas. Veja como deverá estar após
ter adicionado a segunda imagem e posto o retângulo acima de todas:

imagem
03 File > Import (Ctrl+R). Teremos que recortar
o fundo da imagem.
Selecione a imagem importada, depois pegue a ferramenta Magic
Wand Tool (W). Deixe igual as propriedades abaixo:

Após configurar a propriedade da Magic Wand Tool, clique nas partes
brancas e vá dando delete nelas, irá remover o fundo da
imagem.

7. Selecione a imagem recortada. Deixe ela igual a propriedade
abaixo:

776 x 60
Pixels, adicione um preenchimento Linear, igual a propriedade do
segundoo passo feito lá no começo.
Deixe o retângulo na seguinte propriedade:

Como citei que terá que aplicar o preenchimento Linear no retângulo
criado, será o mesmo processo igual o segundo passo no começo
da matéria. Veja como deverá ficar:

(Home,
Novidades, Blog) adicione um abaixo do outro, agrupe eles Modify
> Group (ctrl+g). Veja como deverá ficar:

Agora vamos fazer os outros link no estilo acima mostrado.

W:1
e H:57 na cor #CCCCCC. Veja abaixo:

Veja o exemplo da separação da linha entre os links:

X:240 e Y:192
2 linha - X:336 e Y:192
3 linha – X:422 e Y:192
4 linha - X:492 e Y:192
5 linha – X:566 e Y:192
6 linha – X:684 e Y:192

Deverá estar da seguinte maneira:

11. Agora com a fonte xscale escreva 120 x 15
Pixels com a cor #FFFFFF e a cor
da broda #C0C0C0. Na frente do retângulo
criado escreva e-mail.
E crie outro retângulo no tamanho de 26
x 18 Pixels com a cor #FFFFFF e
a cor da broda #C0C0C0. Em cima desse
retângulo criado escreva a palavra Ok. Veja abaixo como ficou a
parte Newsletter:

12. Crie um retângulo no tamanho de #066490.
E ponha na seguinte propriedade:
Ficará abaixo do retângulo do menu.

Confirá como deverá estar ficando tudo ja feito:

200 x 35 Pixels com o preenchimento Linear igual do retângulo
do menu. Veja abaixo:

Com a ferramaneta Subselection Tool (A,1), selecione
o retângulo e em seguida selecione o ponto de cima do lado direito.
Veja abaixo:

200
x 35 Pixels com o preenchimento Linear como as propriedades abaixo:

Deixe a opactiy dela como a propriedade abaixo:

Novidades,
posicione no ponto X:28 e Y:257

16. Crie um retângulo no tamanho de 200
x 219 Pixels na cor #EAEAEA. Posicione
ele no ponto X:0
e Y:291. Irá ficar abaixo da imagem mostrada acima. Veja
abaixo:

17. Crie um retângulo no tamanho de #EAEAEA.
Posicione ele no ponto X:209 e Y:257.
Já no embalo de criar retangulo, copie o retângulo cinza
e azul agrupado posicione eles na posição X:207
e Y:377.
Crie um retângulo no tamanho de 200
x 100 Pixels na cor #EAEAEA.
Posicione ele no ponto X:209 e Y:411.
Irá ficar abaixo da imagem mostrada acima. Veja abaixo:

Com a fonte xscale escreva a palavraX:237 e Y:378. Veja
abaixo como deverá estar:

Já que os retângulos cinza e azul estão agrupado,
selecione ele e copie e cole.
Aumente a largura de
X e Y:

Com a fonte xscale escreva a palavraX:444 e Y:378.
Veja abaixo como deverá estar:

Crie um retângulo no tamanho de #EAEAEA. Posicione
ele no ponto X:413
e Y:411. Irá ficar abaixo do retângulo criado acima.
Veja abaixo:

Confira como esta ficando o Layout ainda sem as informações:

776 x 04 Pixels com a cor
#066490. E ponha na seguinte propriedade:

Copie o retângulo do menu e cole abaixo da linha azul criada acima.
Diminua o altura do retângulo esta H:40. E ponha no ponto X
e Y da propriedade abaixo:

Com a fonte FFF Galaxy escreva " />Todos os
Direitos Reservados – © Copyright 2004 – detonautasMX.com “.
Posicione no ponto X e Y
da propriedade abaixo:

Confira abaixo como ficou o rodapé:

Clique Aqui

Ufa chegamos ao fim. Espero que gostem do estilo do Layout que trouxe
a vocês.
Um pouco complicado explicar esse Tema, mas espero que dê para entender
e ajuda-los.
Desejo a todos um Feliz Natal e Um prospero Ano novo. Que 2005 seja muito
bom.
Até a próxima coluna.

Autor: Marco
Antonio – Colunista e Moderador de Fireworks
do MX Studio

Qualquer dúvida envie um email para
mantonio@mxstudio.com.br
ou acesse o nosso
fórum.

Maratona de Topos Parte 7

Marcoantonio — Mon, 01 Nov 2004 00:00:00 +0000

Salve Comunidade MXStudio!

Bem já esta chegando ao fim essa grande Maratona de topos que provemos
aqui no MXStudio, vejo que ajudamos a clarear idéias a muitas pessoas
a Equipe MXStudio fica feliz com esse grande resultado.

Agora nesse tutorial eu trago uma coisa muito boa que é trabalhar
com Fade Image da um efeito muito bom nas imagens. Muitas pessoas tem
problemas em utilizar esse grande recurso, surgem dúvidas enfim.
Estarei mostrando essa técnica ao decorrer da matéria irá
ver os resutlados. Então mão na massa que o negócio
é tenso. rs.
O topo que iremos desenvolver será este abaixo:

1) Crie um documento de 776 X 200 pixels.

2) Com a Ferramenta Rectangle Tool, crie um retângulo de 550 x 45
pixel, posicione ele na posição de X e Y, igual abaixo:
Imagem DJ
Imagem
Balada 1 Imagem
Balada 2 .

Vamos importar primeiro a imagem do DJ. Quando importar ficará
assim:

Para não ficar em cima do retnângulo selecione a imagem importada,
prescisone ( Ctrl + Shift + seta para baixo ), para a imagem ficar abaixo
do retangulo que fizemos no começo. Vaje abaixo:
imagem
balada 1 .
Acontecerá o mesmo prcesso acima, que a imagem vai ficar em cima
das outras, então faça o processo a seguir.
Selecione a imagem prescisone ( Ctrl + Shift + seta para baixo ), para
a imagem ficar abaixo da imagem e do retangulo que fizemos no começo.
Veja abaixo:

Agora posicione a imagem no ponto X e Y, veja abaixo:
imagem
balada 2, File > Import ( Ctrl + R ). Irá acontecer o mesmo
processo, a imagem importada irá ficar em cima das outras. Para
não complicar antes de adiconarmos ela abaixo de todas.
Coloque no ponto X e Y. Veja abaixo

Após adiciona-lá no ponto X e Y, iremos adicionar abaixo
das outras imagem.
Selecione a imagem prescisone ( Ctrl + Shift + seta para baixo ), para
a imagem ficar abaixo da imagem e do retangulo que fizemos no começo.
o resultado deverá ficar assim:
Topo
Agora é só manda bala no menu.

Agora vamos entender a lógica do Fade Image que aconteceu nesse topo.
O Fade Image eme é uma mão na roda do que você ir adicionar
um linear. Ele ja fai o processo direto, ai é só você
ir regulando o efeito na imagem, esse efeitinho básico é muito
bom da para fazer coisas maneiras.
Na foto do DJ adicionamos o Linear para a esquerda, para a imagem balada
1 se aliar com a imagem do DJ.
Já na imagem da balada 1 tambem adicionamos o Fade Image para a Esquerda
para quando importa a outra imagem ela tambem ficar se ajuntando a do meio.
Ficou bem no estilo.

Chegamos ao fim de mais uma coluna. Espero que tenham gostado. Até
a próxima coluna.

Autor: Marco Antonio Coelho dos Santos – Colunista e Moderador de Fireworks.

Qualquer dúvida mande e-mail para – mantonio@mxstudio.com.br
ou acesse nosso fórum.

Maratona de Topos – Parte 2

Marcoantonio — Sat, 25 Sep 2004 00:00:00 +0000

Salve comunidade estou aqui novamente trazendo mais
um tutorial bala para vocês.
Enfim nosso comunidade voltou ao ar com altas novidades, e vem ae tutoriais balas.
Bom essa é a minha segunda matéria, é um prazer imenso estar
aqui no MX Studio.
Como o Juliano Haussen pediu para nós colunsitas de Fireworks, fazer 10
matérias de topos, ai esta mais um meu.

Pessoal desenvolver topo requer idéias, imaginação, ter o
material que vai usar em mãos, imaginar como quer que fique e mandar a
idéia para o Fireworks. Muita gente tem dificuldade nessa parte, mais com
um pouco de calma consiguirá chegar no resultado.

Vamos para de falar e ir ao que interesa.

1º- Abre um novo arquivo no Fireworks dê 776 x 175 pixel´s.
Você poderá criar do seu tamanho. Mais lembre-se máximo do
tamanho de largura 779, é a medida da configuração de 800
x 600, 779 pixel fica certinho, mais costumo usar 776 para não correr risco
de dar barra de rolagem.

2º- Com o novo documento aberto. Pegue a ferramenta Rectangle Tool, crie
o retangulo na medida de 776 x 80 pixel. Após criar o rectangle vá
na propriedades de cores e jogue um linear. Veja a imagem abaixo:

3º- Após selecionar o linear. Selecione Clique
aqui para baixar a imagem que usei.
Após importar a imagem vai ficar em cima dos retangulos cinzas, selecione
a imagem e prescisone Ctrl+Shift+ setinha para baixo. Sua imagem ira para o
fundo, atrás dos retangulos cinzas. Depois disso selecione a imagem vai
em Filters > Adjust Color > Hue/Saturation. Deixe as propriedades desse
jeito abaixo:

Após esse passo de um Ok.
Ficando desse jeito:

Clique
aqui para baixar a imagem que vou usar.
Importada a imagem deixa as propriedades da imagem, igual abaixo:

Clique aqui para ver
como ficou Finalizado

Bom pessoal chegamos ao fim de mais um tutorial.
Espero ter ajudado muita gente ae com idéias.
Até a próximo tutorial.

Pessoal lembre-se Imaginação e criatividade é o que prevalece.

Dúvidas no Fórum

Marco Antonio Coelho dos Santos.

Maratona de Topos em Fireworks 1

Marcoantonio — Tue, 07 Sep 2004 00:00:00 +0000

Marco Antonio – Tutorial – Topo Clean

Olá Comunidade MX Studio. Prazer em conhecê-los, meu nome é Marco
Antonio, esta é a minha primera coluna neste grande portal que é o MX
Studio.
Nas minhas colunas vou tentar estar passando para vocês visitantes,
algumas coisas de area de web, que muita gente tem dificuldade em fazer.
O
tutorial que vou estar passando nesta coluna, é dos topos que eu desenvolvo em
alguns trabalhos meus. Muitas pessoas me elogiam com o resultado. Eu só falo uma
frase que um professor me disse tendo imaginação e criatividade, você fará
coisas inacreditaveis.
Eu trabalho com imagens abstratas no fundo do topo,
isto vocês poderam estar adiquirindo em sites de imagens, de preferência usem
imagens de wallpaper, ou quem tiver um conhecimento na ferramenta Photoshop ou
algum progama de 3d, poderá esta desenvolvendo o próprio fundo. Uso sempre
imagens mais leves não muito efeito.
Mais ja falei muito vamos ao que
interesa.

Na coluna de hoje vamos estar desenvolvendo um topo bem
arrojado.

1) Crie um documento 776 x 200 Pixels o fundo pode ficar branco
mesmo.

2) Depois de aberto o documento, Ctrl + R ( File > Import )
vamos importar uma imagem. Usei essa imagem
href=”http://www.mxstudio.com.br/tutorial/topo1/imagem_fundo.jpg”
target=_blank>clique aqui para baixa-lá

3) Logo após de adicionar a
imagem, selecione e na Properties da imagem deixa o nuemro de X: e Y: iguais a
imagem abaixo:

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_001.jpg”
width=121>

4) Sua imagem tem que ficar igual esta
abaixo. Bom foi a melhor parte da imagem que escolhi para trabalhar nela, você
tem toda a liberdade de escolher outra parte. Clique aqui para
amplia-lá.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_002_01.jpg”
width=419>

5) Depois de ter feito
o passo acima, vamos selecionar a imagem com Pointer Toll.
Ao selecionala a
imagem, vá em ( Filters > Adjust Color > Hue / Saturation ). Abrirá a
seguinte janela, confira na imagem a abaixo:
class=texto>

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_003.jpg”
width=460>

Deixe as propriedades
da sua imagem iguais a esta acima.

6) Já adicionado o Hue / Saturario sua
imagem deverá ficar igual a esta
href=”http://www.mxstudio.com.br/tutorial/topo1/imagem_004.jpg”
target=_blank>Clique aqui para amplia-lá.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_004_01.jpg”
width=419>

7) Após finalizado o
passo acima. Agora adiciona um retangulo banco no tamanho da imagem
abaixo:

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_006.jpg”
width=122>

Depois de adicionar
o retangulo branco vamos diminuir a opacidade dele (Opacity), deixa 10% de
opacidade:

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_007.jpg”
width=166>

Agora que já esta
diminuido a opacidade do retangulo vamos adicionar uma textura (texture) – Hatch
1, veja na imagem abaixo como deve ficar a propriedades da
textura:

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_007_01.jpg”
width=166>

O resultado da imagem veja
abaixo:
href=”http://www.mxstudio.com.br/tutorial/topo1/imagem_008.jpg”
target=_blank>Clique aqui para Amplia-lá.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_008_01.jpg”
width=419>

9) Depois dê feito os
passos acima chegou a hora de preencher os campos dele do seu modo como por
exemplo, Logomarca, um menu cai muito bem ou uma lance de login e
senha.
Estarei fazendo essas partes veja passo a passo abaixo.

10)
Vamos adicionar uma logomarca, adicionarei uma que eu desenvolvi rapidinho, você
podera adicionar a sua. Na montagem das coisas que vai ficar no topo você usa a
sua imaginação e monta do jeito que te agrada mais.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_009_01.jpg”
width=419>

11) Como citei acima
que podemos adicionar algumas coisas, a logomarca ja adicionamos, agora vamos
adicionar um menu para você ver como ficar.
Primeiro adicione um retangulo
branco, veja as propriedades do retangulo de altura largura x e y na imagem
abaixo:

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_010.jpg”
width=123>

Veja como irá ficar no
topo o retangulo branco que será o menu:

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_010_02.jpg”
width=419>

Bom no menu você pode
usar sua imaginação e criatividade, eu adicionei um retangulo na cor laranja na
largura de 10 pixels e altura de 200 pixels em cima do branco no começo e ao
lado fui adicionando os links. Veja na imagem abaixo como ficou.
href=”http://www.mxstudio.com.br/tutorial/topo1/imagem_011.jpg”
target=_blank>Clique aqui para amplia-lá.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_011_01.jpg”
width=419>

12) Após ter feito
o menu vamos dar mais uma encrementada adicionando uma imagem que cai bem com o
tema que você estará fazendo site para você ou algum cliente.
Vamos importa
a imagem no nosso topo CTRl + R ou File > import. Eu adicionei essa imagem
href=”http://www.mxstudio.com.br/tutorial/topo1/escritorio_009.jpg”
target=_blank>clique aqui para baixa-lá.
Deixe a imagem
abaixo da textura Hatch 1 e a logomarca e o menu em cima da textura.
Veja na
seguinte imagem a propriedades da imagem como eu deixei.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_012.jpg”
width=124>

13) Já feito todos os
passos acima, selecione a imagem importada vai em Filters > Adjust Color>
Hue/Saturation. Adicione a mesma propriedade da saturação da imagem de
fundo.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_003.jpg”
width=460>

Após isso de um ok. Torne selecionar a imagem
novamente, selecionada a imagem vai em Commands > Creative > Fade
Image.
Vai abrir uma janela com algumas propriedades. Selecione a primeira
opção que esta com o a borda branca selecionada.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_013.jpg”
width=449>

Após ter adicionado a
primeira opção você mesmo regula ao seu gosto.

class=texto>Se feis tudo certinho deverá ficar parecido com estes.
href=”http://www.mxstudio.com.br/tutorial/topo1/imagem_topo.jpg”
target=_blank>Clique aqui para ver.

src=”http://www.mxstudio.com.br/tutorial/topo1/imagem_topo_01.jpg”
width=419>

Bom em fim chegamos ao final desse tutorial.
Espero que tenham
gostado da minha primeira matéria aqui no MX Studio.
Qualquer dúvida,
sugestões e criticas enviem para o e-mail.

href=”malito:markskd@uol.com.br”>malito:markskd@uol.com.br

Até a
próxima matéria.

Dúvidas sobre o tutorial utilizem o nosso
href=”http://forum.mxstudio.com.br/” target=_blank>Fórum