Inserindo imagem em formas

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

<p><!–</p> <p>.Banner {</p> <p> border-top-width: 0px;</p> <p> border-right-width: 0px;</p> <p> border-bottom-width: 1px;</p> <p> border-left-width: 0px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #CCCCCC;</p> <p> border-right-color: #CCCCCC;</p> <p> border-bottom-color: #CCCCCC;</p> <p> border-left-color: #CCCCCC;</p> <p> font-family: verdana;</p> <p> font-size: 1px;</p> <p>}</p> <p>.BannerCenter {</p> <p> text-align: center;</p> <p>}</p> <p>.FundoLateralDireita {</p> <p> background-color: #e0e0e0;</p> <p> border-top-width: 0px;</p> <p> border-right-width: 1px;</p> <p> border-bottom-width: 0px;</p> <p> border-left-width: 1px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #CCCCCC;</p> <p> border-right-color: #CCCCCC;</p> <p> border-bottom-color: #CCCCCC;</p> <p> border-left-color: #CCCCCC;</p> <p>}</p> <p>.Botao {</p> <p> font-family: Verdana;</p> <p> font-size: 10px;</p> <p> background-color: #D0D0D0;</p> <p> color: #666666;</p> <p> border: 1px solid #666666;</p> <p>}</p> <p>.InputText {</p> <p> font-family: Verdana;</p> <p> font-size: 10px;</p> <p> color: #000000;</p> <p> border: 1px inset #adbdcc;</p> <p> background-color: #f7f8fa;</p> <p>}</p> <p>.BuscaInterna {</p> <p> font-family: Arial, Helvetica, sans-serif;</p> <p> font-size: 12px;</p> <p> font-weight: bold;</p> <p> color: #566E9C;</p> <p> text-align: center;</p> <p>}</p> <p>.FundoLateralEsquerdo {</p> <p> background-color: #e0e0e0;</p> <p> border-top-width: 0px;</p> <p> border-right-width: 1px;</p> <p> border-bottom-width: 0px;</p> <p> border-left-width: 1px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #CCCCCC;</p> <p> border-right-color: #CCCCCC;</p> <p> border-bottom-color: #CCCCCC;</p> <p> border-left-color: #CCCCCC;</p> <p>}</p> <p>.NewsLetter {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> font-weight: normal;</p> <p> color: #666666;</p> <p> padding-left: 5px;</p> <p>}</p> <p>.TxtNeg {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> font-weight: bold;</p> <p> color: #666666;</p> <p>}</p> <p>.TxtNegCenter {</p> <p> font-family: Verdana;</p> <p> font-size: 10px;</p> <p> font-weight: bold;</p> <p> color: #666666;</p> <p> text-align: center;</p> <p>}</p> <p>.LinhaFooter {</p> <p> border-top-width: 0px;</p> <p> border-right-width: 0px;</p> <p> border-bottom-width: 1px;</p> <p> border-left-width: 0px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #CCCCCC;</p> <p> border-right-color: #CCCCCC;</p> <p> border-bottom-color: #CCCCCC;</p> <p> border-left-color: #CCCCCC;</p> <p> font-family: verdana;</p> <p> font-size: 1px;</p> <p> background-color: #CCCCCC;</p> <p>}</p> <p>.Atualizacao {</p> <p> font-family: Verdana;</p> <p> font-size: 10px;</p> <p> font-weight: bold;</p> <p> color: #FF9900;</p> <p>}</p> <p>.BordaDireita {</p> <p> border-top-width: 5px;</p> <p> border-right-width: 1px;</p> <p> border-bottom-width: 5px;</p> <p> border-left-width: 1px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #FFFFFF;</p> <p> border-right-color: #C0C0C0;</p> <p> border-bottom-color: #FFFFFF;</p> <p> border-left-color: #FFFFFF;</p> <p>}</p> <p>.AlinhamentoEsquerdo {</p> <p> text-align: left;</p> <p> border-top-width: 5px;</p> <p> border-right-width: 1px;</p> <p> border-bottom-width: 5px;</p> <p> border-left-width: 0px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #FFFFFF;</p> <p> border-right-color: #FFFFFF;</p> <p> border-bottom-color: #FFFFFF;</p> <p> border-left-color: #FFFFFF;</p> <p>}</p> <p>.RodapeTabelas {</p> <p> border-top-width: 0px;</p> <p> border-right-width: 0px;</p> <p> border-bottom-width: 0px;</p> <p> border-left-width: 0px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #CCCCCC;</p> <p> border-right-color: #CCCCCC;</p> <p> border-bottom-color: #CCCCCC;</p> <p> border-left-color: #CCCCCC;</p> <p>}</p> <p>.TituloArtigo {</p> <p> font-family: Arial, Helvetica, sans-serif;</p> <p> font-size: 12px;</p> <p> font-weight: bold;</p> <p> color: #354460;</p> <p>}</p> <p>.TXT {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> font-weight: normal;</p> <p> color: #666666;</p> <p>}</p> <p>.RodapeTabelas1 {</p> <p> border-top-width: 0px;</p> <p> border-right-width: 0px;</p> <p> border-bottom-width: 0px;</p> <p> border-left-width: 0px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #CCCCCC;</p> <p> border-right-color: #CCCCCC;</p> <p> border-bottom-color: #CCCCCC;</p> <p> border-left-color: #CCCCCC;</p> <p>}</p> <p>.TituloArtigo1 {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> font-weight: bold;</p> <p> color: #003399;</p> <p> padding-left: 5px;</p> <p>}</p> <p>.LinhaArtigos {</p> <p> border-top-width: 1px;</p> <p> border-right-width: 0px;</p> <p> border-bottom-width: 0px;</p> <p> border-left-width: 0px;</p> <p> border-top-style: solid;</p> <p> border-right-style: solid;</p> <p> border-bottom-style: solid;</p> <p> border-left-style: solid;</p> <p> border-top-color: #FF9900;</p> <p> border-right-color: #FF9900;</p> <p> border-bottom-color: #FF9900;</p> <p> border-left-color: #FF9900;</p> <p>}</p> <p>.Titulos {</p> <p> font-family: Arial, Helvetica, sans-serif;</p> <p> font-size: 14px;</p> <p> text-transform: uppercase;</p> <p> color: #566E9C;</p> <p> border-bottom-width: 1px;</p> <p> border-bottom-style: solid;</p> <p> border-bottom-color: #566E9C;</p> <p> border-left-style: solid;</p> <p> border-left-color: #566E9C;</p> <p> font-weight: bold;</p> <p> vertical-align: middle;</p> <p> padding-left: 5px;</p> <p> border-left-width: 3px;</p> <p> height: 20px;</p> <p>}</p> <p>.TitulosSub {</p> <p> font-family: Verdana, Arial, Helvetica, sans-serif;</p> <p> font-size: 10px;</p> <p> text-transform: uppercase;</p> <p> color: #666666;</p> <p> border-bottom-width: 1px;</p> <p> border-bottom-style: solid;</p> <p> border-bottom-color: #566E9C;</p> <p> border-left-style: solid;</p> <p> border-left-color: #566E9C;</p> <p> font-weight: bold;</p> <p> vertical-align: middle;</p> <p> padding-left: 5px;</p> <p> border-left-width: 7px;</p> <p> height: 20px;</p> <p> border-right-width: 5px;</p> <p> border-right-style: solid;</p> <p> border-right-color: #FFFFFF;</p> <p>}</p> <p>.numerodacoluna { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color:#3366CC}</p> <p>.titulodamateria { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color:#000000; font-weight:bolder}</p> <p>.texto { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #666666}</p> <p>.textodiferente { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#6699CC}</p> <p>.TabelaListaConteudo {</p> <p> background-color: #F7f8fa;</p> <p> border: 1px solid #adbdcc;</p> <p>}</p> <p>.TxtNegAlgDir {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> font-weight: bold;</p> <p> color: #666666;</p> <p> text-align: right;</p> <p>}</p> <p>.estilofonte { </p> <p> font-family: Verdana, Arial, Helvetica, sans-serif; </p> <p> color: #849CB3; </p> <p> font-size: 11px; </p> <p>} </p> <p>TABLE {</p> <p> FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #666666; LINE-HEIGHT: 14px; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif</p> <p>}</p> <p>.title {</p> <p> FONT-SIZE: 24px; COLOR: #5b7a99; LINE-HEIGHT: 28px</p> <p>}</p> <p>.subtitle {</p> <p> FONT-SIZE: 18px; COLOR: #666666; LINE-HEIGHT: 21px</p> <p>}</p> <p>.titleHighlight {</p> <p> FONT-WEIGHT: bold; COLOR: #5b7a99</p> <p>}</p> <p>.subtitleHighlight {</p> <p> COLOR: #5b7a99</p> <p>}</p> <p>LABEL {</p> <p> FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif</p> <p>}</p> <p>.labelTitle {</p> <p> FONT-WEIGHT: bold</p> <p>}</p> <p>BODY {</p> <p> BACKGROUND-POSITION: left top; </p> <p> SCROLLBAR-FACE-COLOR: #adbdcc; </p> <p> SCROLLBAR-SHADOW-COLOR: #6c88a3; </p> <p> SCROLLBAR-3DLIGHT-COLOR: #6c88a3; </p> <p> SCROLLBAR-ARROW-COLOR: #5b7a99; </p> <p> SCROLLBAR-TRACK-COLOR: #d7dee6; </p> <p> BACKGROUND-REPEAT: repeat-y; </p> <p> SCROLLBAR-DARKSHADOW-COLOR: #c1d1e0; </p> <p> SCROLLBAR-BASE-COLOR: #adbdcc; </p> <p> BACKGROUND-COLOR: #ffffff</p> <p>}</p> <p>}</p> <p>.inputRadioButton {</p> <p> BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-ALIGN: center</p> <p>}</p> <p>.cheqbox {</p> <p> BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid</p> <p>}</p> <p>.linkTop {</p> <p> COLOR: #5b7a99; TEXT-DECORATION: none</p> <p>}</p> <p>.linkTop:hover {</p> <p> COLOR: #304b6b; TEXT-DECORATION: none</p> <p>}</p> <p>.linkHighlight:hover {</p> <p> COLOR: #b92088; TEXT-DECORATION: none</p> <p>}</p> <p>.linkMenu {</p> <p> COLOR: #5b7a99; TEXT-DECORATION: none</p> <p>}</p> <p>.linkMenu:hover {</p> <p> COLOR: #849CB3; TEXT-DECORATION: none</p> <p>}</p> <p>.linkText {</p> <p> COLOR: #5b7a99; TEXT-DECORATION: none</p> <p>}</p> <p>.linkText:hover {</p> <p> COLOR: #b92088; TEXT-DECORATION: none</p> <p>}</p> <p>.linkTrack {</p> <p> COLOR: #666666; TEXT-DECORATION: none</p> <p>}</p> <p>.linkTrack:hover {</p> <p> COLOR: #b92088; TEXT-DECORATION: none</p> <p>}</p> <p>a:link {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> color: #5b7a99;</p> <p> text-decoration: none;</p> <p>}</p> <p>a:visited {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> color: #5b7a99;</p> <p> text-decoration: none;</p> <p>}</p> <p>a:hover {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> color: #5b7a99;</p> <p> text-decoration: none;</p> <p>}</p> <p>a:active {</p> <p> font-family: Verdana;</p> <p> font-size: 11px;</p> <p> color: #5b7a99;</p> <p> text-decoration: none;</p> <p>}</p> <p>.rodape {</p> <p> font-family: Verdana, Arial, Helvetica, sans-serif;</p> <p> font-size: 9px;</p> <p> color: #666666;</p> <p> text-decoration: none;</p> <p>}</p> <p>.style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #6699CC; font-weight: bold; }</p> <p>–></p>

Inserindo imagem em formas

Salve MX STUDIO!! Como estão todos, vamos a mais um tutorial para aprimorar nossos conhecimentos. Neste tutorial ire mostrar algo que muita pessoas ainda não sabem, que é como inserir uma imagem em formas como o circulo, estrelas e outras. Gostaria também de agradecer a todos pelo sucessos do MX STUDIo e dos tutoriais de Firework, então vamos ao tutorial de hoje:

Primeiro, escolha uma imagem ou foto que você queira aplicar essa técnica, neste tutorial irei usar uma foto da atriz Cameron Diaz:

Agora, crie um circulo com preenchimento e contorno branco do tamanho da foto:

Agora, selecione a foto e o circulo e vá ao menu Modify > Mask > Group as Mask :

Pornto, veja o resultado:

É possível também você usar outras formas como, por exemplo, uma estrela:

Espero que vocês tenham gostado de mais esse tutorial, abraços e até o próximo.

Autor: Neo – Colunista e Moderador de Fireworks do MX Studio

Dúvidas ou Sugestões de tutoriais, envie para: neo@mxstudio.com.br

Todos os direitos reservados ao Autor

Escrito por Rafael Ferreira on maio 25, 2004. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

2 respostas a Inserindo imagem em formas

  1. Olha só !!!eu quero colocar a minha foto em uma moldura em formato de estrea e circulo,qual a ferramente que devo usar no photofiltre?

  2. Caramba, era justamente oq eu tava querendo saber! :D
    Muito obrigado e parabens pelo site todo.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>