A Propriedade Background.

O fundo dos elementos HTML

A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.

As propriedades background são as listadas abaixo:

• background-color............... cor do 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 com a tela;


• background-position............como e onde a imagem de fundo é posicionada;


• background........................maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do fundo

• background-color:
  
  
  
  1. código hexadecimal: #FFFFFF
  
  
  2. código rgb: rgb(255,235,0)
  
  
  3. nome da cor: red, blue, green...etc
  
  
  4. transparente: transparent
  
  
  
  


• background-image:
  
  
  
  1. URL: url(caminho/imagem.gif)
  
  
  
  


• background-repeat:
  
  
  
  1. não repete: no-repeat
  
  
  2. repete vertical e horizontal: repeat
  
  
  3. repete vertical: repeat-y
  
  
  4. repete horizontal: repeat-x
  
  
  
  


• background-attachment:
  
  
  
  1. imagem fixa na tela: fixed
  
  
  2. imagem "rola" com a tela: scroll
  
  
  
  


• background-position:
  
  
  
  1. x-pos y-pos
  
  
  2. x-% y-%
  
  
  3. top left
  
  
  4. top center
  
  
  5. top right
  
  
  6. center left
  
  
  7. center center
  
  
  8. center right
  
  
  9. bottom left
  
  
  10. bottom center
  
  
  11. bottom right
  
  
  
  

A Propriedade Border.

As bordas nos elementos HTML

As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML.

As propriedades para as bordas são as listadas abaixo:

• border-width:................espessura da borda


• border-style:................estilo da borda


• border-color:................cor da borda


• -----------------------------------------


• border-top-width:............espessura da borda superior


• border-top-style:............estilo da borda superior


• border-top-color:............cor da borda superior


• -----------------------------------------


• border-right-width:.........espessura da borda direita


• border-right-style:..........estilo da borda direita


• border-right-color:..........cor da borda direita


• -----------------------------------------


• border-bottom-width:.........espessura da borda inferior


• border-bottom-style:.........estilo da borda inferior


• border-bottom-color:.........cor da borda inferior


• -----------------------------------------


• border-left-width:...........espessura da borda esquerda


• border-left-style:...........estilo da borda esquerda


• border-left-color:...........cor da borda esquerda


• -----------------------------------------


• border-top:...maneira abreviada para todas as propriedades da borda superior


• border-right:..maneira abreviada para todas as propriedades da borda direita


• border-bottom:..maneira abreviada para todas as propriedades da borda inferior


• border-left:..maneira abreviada para todas as propriedades da borda esquerda


• border:.........maneira abreviada para todas as quatro bordas

Valores válidos para as propriedades das bordas

• color:
  
  
  
  1. código hexadecimal: #FFFFFF
  
  
  2. código rgb: rgb(255,235,0)
  
  
  3. nome da cor: red, blue, green...etc
  
  
  
  


• style:
  
  
  
  1. none: nenhuma borda
  
  
  2. hidden: equivalente a none
  
  
  3. dotted: borda pontilhada
  
  
  4. dashed: borda tracejada
  
  
  5. solid: borda contínua
  
  
  6. double: borda dupla
  
  
  7. groove: borda entalhada
  
  
  8. ridge: borda em ressalto
  
  
  9. inset: borda em baixo relevo
  
  
  10. outset: borda em alto relevo
  
  
  
  


• width:
  
  
  
  1. thin: borda fina
  
  
  2. medium: borda média
  
  
  3. thick: borda grossa
  
  
  4. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  
  

Fonte:Maujor

Sitaxe do CSS

A regra CSS e sua sintaxe

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.

No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.

Ver os exemplos abaixo:

p {  font-size: 12px; /* ponto-e-vírgula é facultativo */  }    body {  color: #000000;  background: #FFFFFF;  font-weight: bold; /*ponto-e-vírgula é facultativo */  }

No exemplo abaixo, o seletor é o "documento todo" (body - a página web), a propriedade é o fundo do documento e o valor é a cor branca.

body {  background: #FFFFFF;  }

Fone:Maujor

Tradução da barra inserir do Dreamweaver 8

Insert bar

A barra Insert contém botões para criar e inserir objetos como tabelas, camadas e imagens. Quando você rolar o ponteiro sobre um botão, aparece uma dica com o nome do botão.

Os botões estão organizados em várias categorias, que você pode mudar sobre o lado esquerdo da barra Inserir. Outras categorias aparecem quando o documento atual contém código servidor, como ASP ou CFML documentos. Quando você inicia o Dreamweaver, a categoria que foi trabalhar em aberto.

Insert bar- a barra Insirir está organizada nas seguintes categorias:

Common - O Comum categoria permite-lhe criar e inserir os objetos mais comumente utilizados, tais como imagens e tabelas.
Layout - O layout categoria permite-lhe inserir tabelas, div tags, camadas, e molduras. Você também pode optar entre três pontos de vista dos quadros: Standard (padrão), Expandida quadros, e Layout. Quando está seleccionado o modo Layout, você pode usar o esquema Dreamweaver ferramentas: Draw Layout Cell and Draw mesa.
Forms - Os Formulários categoria contém botões para criar formulários e inserir elementos formulário.
Text - O texto categoria permite-lhe inserir uma variedade de texto e lista de formatação de etiquetas, tais como b, em, p, h1 e ul.
HTML - A categoria HTML permite que você inserir tags HTML para regras horizontais, cabeça conteúdo, quadros, molduras, e scripts.
Application - O Application categoria lhe permite inserir elementos dinâmicos como os recordsets, repetido regiões, e gravar inserção e actualização formas.
Flash elements - Os elementos Flash categoria lhe permite inserir o Macromedia Flash elementos.
Favorites - A categoria Favoritos lhe permite agrupar e organizar os botões Inserir barra que você usa mais em um lugar comum.

Por: Daniel Carvalho

Ferramentas e Atalhos do Photoshop

É importante conhecer os nomes de todas as ferramentas que contém a barra de ferramentas do Photoshop, o nome de cada uma delas, e os atalhos do teclado. Aqui vão algumas ferramentas básicas.

Segue a Lista com os atalhos e nome de cada ferramenta:

Rectangular marquee Tool - Ferrameta Letreiro Retangular (M)
Elliptical marquee Tool - Ferramenta Letreiro Elíptica (M)
Single-row marquee Tool - Ferramenta Letreiro de Linha Única (M)
Single-column marquee Tool - Ferramenta Letreiro de Coluna Única (M)
Move Tool - Ferramenta Mover (V)
Lasso Tool - Ferramenta Laço (L)
Polygonal lasso Tool - Ferramenta Laço Poligonal (L)
Magnetic lasso Tool - Ferramenta Laço Magnético (L)
Magic Wand Tool - Ferramenta Varinha Mágica (W)
Crop Tool - Ferramenta Corte Demarcado (C)
Slice Tool - Ferramenta Fatia (K)
Slice select Tool - Ferramenta Seleção de Fatia (K)
Patch Tool - Ferramenta Correção (J)
Brush Tool - Ferramenta Pincel (B)
Pencil Tool - Ferramenta Lápis (B)
Clone stamp Tool - Ferramenta Carimbo (S)
Pattern stamTool - Ferramenta Carimbo de Padrão (S)
History brush Tool - Ferramenta Pincel do Histórico (Y)
Art history brush Tool - Ferramenta Pincel História da Arte (Y)
Eraser Tool- Ferramenta Borracha (E)
Background eraser Tool- Ferramenta Borracha de Plano de Fundo (E)
Magic eraser Tool - Ferramenta Borracha Mágica (E)
Gradient Tool - Ferramenta Degradê (G)
Paint bucket Tool - Ferramenta Lata de Tinta (G)
Blur Tool - Ferramenta Desfoque (R)
Sharpen Tool - Ferramenta Nitidez (R)
Smudge Tool - Ferramenta Borrar (R)
Dodge Tool - Ferramenta Subexposição (O)
Burn Tool - Ferramenta Superexposição (O)
Sponge Tool - Ferramenta Esponja (O)
Path selection Tool - Ferramenta Seleção de Demarcador (A)
Direct Selection Tool - Ferramenta Seleção Direta (A)
Horizontal Type Tool - Ferramenta Texto Horizontal (T)
Vertical type Tool - Ferramenta Texto Vertical (T)
Horizontal type mask Tool - Ferramenta Máscara de Texto Horizontal (T)
Vertical type mask Tool - Ferramenta Máscara de Texto Vertical (T)
Pen Tool - Ferramenta Caneta (P)
Rectangle Tool - Ferramenta Retângulo (U)
Rounded rectangle Tool - Ferramenta Retângulo Arredondado (U)
Ellipse Tool - Ferramenta Elipse (U)
Polygon Tool - Ferramenta Polígono (U)
Line Tool - Ferramenta Linha (U)
Custon Shape Tool - Ferramenta Forma Personalizada (U)
Notes Tool - Ferramenta Observações (N)
Audio annotation Tool - Ferramenta Comentário de Áudio (N)
Eyedropper Tool - Ferramenta Conta-Gotas (I)
Color Samples - Ferramenta Classificador de Cores (I)
Measure Tool - Ferramenta Medir (I)
Hand Tool - Ferramenta Mão (H)
Zoom Tool - Ferramenta Zoom (Z)

Criando Aplicações com Visual Basic.

• Diferença entre uma Aplicação Tradicional e outra Event-Driven ou seja
  ativada por eventos.

Em uma aplicação tradicional ou programada de forma procedural

, a aplicação por si só controla que porções do código serão executadas. A
execução começa na primeira linha de código e segue um caminho pré-definido
através de toda a aplicação , chamando subrotinas conforme for sendo necessário.

Em uma aplicação controlada por eventos ou event-driven , uma ação do
usuário ou do sistema , ativa um procedimento associado a este evento. Assim a
ordem através do qual o seu código de programa é executado depende de quais
eventos ocorrem , que por sua vez estes eventos dependem das ações tomadas pelo
usuário. Esta é a essência das Interfaces Gráficas e da Programaçao Ativada por
Eventos.

• Passos para a criação de uma aplicação

A. Criar a interface
B. Setar as propriedades dos controles
C. Escrever o código

A. Criar a interface.

O primeiro passo na construção de uma aplicação Visual Basic é desenhar os
objetos que irão compor a interface. Para inserir o controle no seu

form:

1. Clique no ícone do controle dentro do toolbox.

2. Mova a seta do mouse para dentro da área do form , a seta
vira uma cruz.

3. Ponha a cruz no ponto dentro do form onde irá ficar o canto
superior esquerdo do controle escolhido

4. Arraste a cruz até que o controle fique do tamanho desejado (arrastar
significa apertar o botão esquerdo do mouse e mante-lo apertado enquanto o
objeto é movido com a mudança de posição do mouse)

5. Solte o botão do mouse e controle aparecerá no form.

B. Setar as propriedades dos controles

O próximo passo é setar ( colocar valores de inicialização ) as propriedades
dos objetos que você criou. A janela Properties proporciona uma maneira
fácil de inicializar as propriedades para todos os objetos do form . Para
abrir a janela de propriedades , escolha o comando Properties no menu
Window ou então clique no botão Properties na Barra de Ferramentas
( Toolbar )

Object Box - Mostra o nome do objeto para o qual você que inicializar as

propriedades. Clique a seta sublinhada a direita do box para selecionar o form
ou nome de controle a partir da lista de objetos presentes no form
atual.

Settings box - Permite que você edite a inicialização da propriedade
selecionada na lista de propriedades. Algumas inicializações podem ser trocadas
clicando-se na seta sublinhada existente a direita do box ; será mostrada então
uma lista de opções . Você poderá clicar em um item da lista para
seleciona-lo

Lista de Propriedades - A coluna esquerda mostra todas as propriedades para

um ojeto selecionado, a coluna da direita mostra a inicialização atual para cada
uma das propriedades.

C. Escrever o código.

A janela de código é o local onde você escreve o código Visual Basic para a

sua aplicação. Código consiste em sentenças da linguagem , constantes e
declarações. Usando a janela de código ( Code Window ) , você pode
rápidamente ver e editar qualquer parte do seu código dentro de sua
aplicação.

Para abrir a janela de código você deve clicar duas vezes no form ou no
controle para o qual você deseja escrever código ou então a partir da janela
Project , selecione o nome do form e clique no botão View Code.

A janela de código ( Code Window ) contém os seguintes elementos :

Object Box - Mostra o nome do objeto selecionado. Clique na seta sublinhada a
direita para mostrar a lista de todos os objetos associados a este form.

Procedures List Box - Lista os procedimentos existentes para um objeto. O box
mostra o nome do procedimento selecionado - no exemplo acima Click .
Clique na seta sublinhada a direita do box para mostrar todos os procedimentos
associados a este objeto.

O código ( ou programa) em uma aplicação Visual Basic, é dividido em pequenos

blocos chamados procedures (procedimentos). Um event procedure (
procedimento associado a um evento ) comtém código que é executado quando um
evento ocorre ( como por exemplo quando o usuário clica um botão) .

Como criar um event procedure ( procedimento associado a um evento ) :

1. No Object box , selecione o nome do objeto no form ativo (
form que atualmente tem o foco)

2. Na Procedure List box , selecione o nome do evento desejado. No
exemplo acima a procedure Click já estava selecionada, já que ela é a
procedure default para o botão de comando. Note que uma máscara
(template) para a escrita do código para este evento está sendo mostrada na
janela de código

3. Digite o código desejado entre as sentenças Sub e End Sub e
a procedure se parecerá com o texto abaixo.

Sub Command1_Click ( )

Text1.text = "Hello World!"

End Sub

Criando um layout com Tabelas

Estaremos criando um modelo igual ao do exemplo abaixo, as tabelas antes de existirem CSS eram usadas para fazer a extrutura das páginas em geral.

Exemplo

Passo a Passo:

A extrutura acima contém 5 tabelas sendo a primeiro responsável apenas pelo alinhamento, segue abaixo como fazer esse exemplo de layout utilizando apenas tabelas.

Obs: para inserir uma tabela você clica na Guia Common na opção Table

1. crie uma tabela com 1 linha, 1 coluna e 800 pixel de lagura.

2. Após fazer isso clique dentro da tabela e crie agora outro tabela para o topo com as seguintes dimensões: 800 pixel de lagura, 1 linha e 1 coluna, mas com a altura de 150 pixel. Pra alterar a altura com a tabela selecionada use os botões

3. crie mais uma tabela com: 150 de lagura e 300 de altura, para o menu do modelo.

4. Após criada a tabela do menu, crie mais uma com 650 de lagura e 300 de altura, para a parte destinada ao conteudo do site.

Obs: para que a tabela do conteudo fique ao lado da tabela do menu, você deverá selecionar a tabela do menu e alinha-la a esquerda. igual a figura abaixo.

5. apos tudo isso falta apenas a tabela para o rodape do site. Crie uma tabela com 800 de lagura e 40 de altura para o rodape.

depois disso tudo selecione a primeira tabela e alinhe ela ao centro da pagina.

Obs: seguindo esse roteiro você pode fazer não apenas esse modelo indicado no inicio do Post, mas qualquer outro você também poderá fazer, solte sua criatividade.

Espero que gostem!!!

Um abraço a todos

Introdução ao Dreamweaver 8

Para os que já fazem sites e utilizam o dreamweaver, essa introdução pode não significar muito, entretanto, para que que pensam em entrar nessa nova "moda" da criação de site, será uma breve introdução.

Pretendo, dispor todo conteúdo do Dreamweaver no site, tais como configurações, otimizações etc. Então vamos ao que interessa: O Dreamweaver.

A tela inicial do dreamweaver pode ser vista abaixo:

Através dessa tela inicial, poderemos criar sites em HTML, ASP, ColdFusion. PHP, etc. Também é possível criar sites com frames, sem ter que ir a parte de código.

Uma dessas funções, a qual é muito importante, são os arquivos aberto recentemente. Com isso, ao fechar o Dreamweaver e abri-lo novamente, você poderá ver exatamente, quais foram as 10 últimas páginas que você alterou.

Agora, clicando em File > New, abrirá a seguinte tela:

Essa tela, contém alguma das informações que tinha na primeira imagem, com a diferença que aqui você poderá, não só escolher qual linguagem usar para criar seu site, como também para ver exemplos de CSS, exemplos de frames e ainda, páginas com o layout pronto. Poderá também definir o tipo de documento(Document Type).

Clicando em Create, iremos a tela de criação de site.

Essa tala é o inicio de tudo. Aqui você poderá criar as tabelas, divs, alinhar texto(caso não seja feito com o CSS ), inserir numeração, inserir marcadores, configurar um site local, inserir imagens, formatação para textos e muito mais. Com o passar dos tutoriais, irei ensionar passo a passo de toda essas configurações. Embaixo das abas da página, contamos com três opções: Code, Split, Design. A opção Design é a que mostra a imagem acima.

A opção abaixo é a Split, ou seja, metade Código e metade Design

Desse modo, podemos ir programando e vendo como o visual está ficando, ou ainda, criar o visual e ver como os códigos estão sendo gerados. Já a imagem abaixo, mostra apenas o código:

Nessa tela o que vale é o conhecimento de programar. É a parte preferida da maioria do programadores, pois nesse caso existe a possibilidade de otimização dos códigos, fazendo com que o site fique mais rápido.

Uma outra vantagem que o Dreamweaver possui é a colorização do código(no exemplo abaixo, existe a parte HTML e PHP):

Desse modo, a programação se torna menos cansativa.

O Dreamweaver é muito mais que isso. Com o tempo, os tutoriais irão aparesendo e você aprenderá a usar essa ferramente fantástica, que facilita muito a vida quando o trabalho é desenvolvimento de site.

Formas de Organização das páginas do seu Site

1- HIERARQUIAS

A maneira mais fácil e mais lógica de estruturar os seus documentos. As hierarquias e os menus adaptam-se especialmente bem aos documentos on-line e hipertexto. Exemplo: sistemas de ajuda.

HOME PAGE

Em uma organização hierárquica, é fácil para os leitores descobrir a posição em que se encontram na estrutura. Nas hierarquias, a home page fornece uma visão geral do conteúdo que está subordinado a ela e ainda define os principais vínculos as páginas dos níveis inferiores da hierarquia.

Este tipo de estrutura oferece um risco mínimo de ficar perdido, além de ser uma forma mais fácil de localizar informações. Mas procure não incluir muitos níveis para não aborrecer os leitores. Pois estes, após ter de selecionar opções em muitos menus, acaba esquecendo o que estava procurando. Fica aborrecido demais para prosseguir. Procure manter apenas dois ou três níveis na sua hierarquia.

2- LINEAR

Muito semelhante à forma como são organizados documentos impressos. Neste tipo de estrutura a home page é o título, ou introdução, e todas as outras páginas acompanham-na em seqüência com vínculos que levam de uma página a outra, normalmente com opções de avançar e retroceder.

Uma organização linear é muito rígida e limita tanto a liberdade dos seus leitores de consultar as informações quanto a sua própria liberdade de apresentá-las. As estruturas lineares são ideais para apresentar, no ambiente on-line, um material que já tenha esse tipo de estrutura no ambiente off-line. Como por exemplo: instruções passo-a-passo ou treinamento baseado em computador.

3- ESTRUTURA LINEAR

Você pode tornar a estrutura linear menos rígida permitindo que o leitor se desvie do caminho principal. Pode ter, por exemplo, uma estrutura linear com ramificações alternativas que partam de um único tronco. As ramificações podem se reunir ao tronco principal em algum ponto mais adiante, em um nível mais baixo da estrutura, ou continuar se ramificando em níveis inferiores seguindo caminhos próprios até chegar a um "fim".

Além de ramificar a estrutura linear, você pode também oferecer vínculos que permitam aos leitores avançar ou retroceder na cadeia, caso precisem rever alguma etapa ou já conheçam alguma parte do conteúdo.

4- COMBINAÇÃO DAS ESTRUTURAS LINEAR E HIERÁRQUICA

Uma forma comum de organizar um documento na Web consiste em obter uma combinação das estruturas linear e hierárquica. Essa estrutura combinada ocorre com maior freqüência quando documentos de estrutura rígida, porém lineares, são apresentados no ambiente on-line. Um exemplo são os famosos FAQ (Frequently Asked Questions).

A combinação de documentos lineares e hierárquicos funciona bem desde que haja pistas em relação ao contexto.
Como essa é uma estrutura linear e hierárquica, em cada página do roteiro você deve oferecer vínculos para o leitor avançar, retroceder, retornar ao início e subir um nível.

Horizonte em 5 minutos

OK, aqui montei uma imagem em seguencia de um horizonte com apenas 3 ferramentas do COREL DRAW, é claro que o objetivo não é ensinar a criar imagens e sim dar uma ideia de como você pode usar a criatividade e criar maravilhas.

1° AS FERRAMENTAS USADAS

---

2° CRIEI UM TRAÇO COMO SE DESSE A IMPRESSÃO DE UM HOTIZONTE MONTANHOSO

---

3° ADCIONEI UM CIRCULO REPRESENTANDO O SOL

---

4° TRACEI UM CAMINHO PARA DAR UMA PERSPECIVA

---

5° UTILIZANDO A FERRAMENTA DE MIDIA ARTISTICA VC TEM INUMERAS OPÇÕES PARA ADCIONAR A SUA IMAGEM, NO CASO ADCIONEI UMA PASTAGEM OU GRAMA.

---

6° LOGO EM SEGUIDA ADCIONEI DOIS PASSÁROS COM A MESMA FERRAMENTA

---

7° LOGO APOS NUVENS

---

8° EM SEGUIDA UMA TEXTURA NO CÉU

---

9° ADCIONEI UMA TEXTURA

---

POIS É , COMO EXISTEM INFIDAVÉIS FORMA DE SE MONTAR IMAGENS DE FORMA ILUSTRATIVA EU PAREI POR AQUI, PELO FATO DE DEIXAR SOMENTE UM PONTO DE CURIOSIDADE EM VOCÊ, AGORA MÃOS A OBRA E BOA CRIAÇÃO.

HA...NÃO ESQUEÇA É CLARO DE ASSINAR A SUA OBRA.





Valeu
Até a próxima.

Transformando Fotos em Pintura

Este é um simples tutorial que mostra como transformar sua imagem ou foto em uma tela estilo pintura. Este efeito terá uma tela de pintura bonita e imagem em um cenário com muitas cores misturadas entre si.

Veja o antes e o depois:

Passo 1:

Abra a sua imagem no Photoshop. Duplique a camada, depois de duplicar ou defina a tipo como: Soft Light. Fazemos isso para reforçar a cor da nossa imagem.

Veja na tela abaixo o exemplo:

Passo 2:

Faça uma união (Merge) com a camada nova e a copia, selecione as duas e precione CTRL+E. Então com a nova camada unida, vá em Filter > Artistic > Paint Daubs. Aplique estas configurações ou algo próximo para obter o efeito mostrado abaixo:

Passo 3:

Depois vá emFilter > Brush Strokes > Angled Strokes. Novamente aplique algo próximo da tela abaixo para obter o efeito desejado.

Passo 4:

Agora vá em Filter > Distort > Glass. Aplique estas configurações ou algo próximo para obter o efeito mostrado abaixo:

Passo 5:

Duplique a camada que recebeu os efeitos. Tire a saturação da camada duplicada indo em: Image > Adjustment > Desaturate.

Passo 6:

Com a camada dessaturada selecionada, vá em Filter > Stylize > Emboss. Aplique as configurações abaixo:

Passo 7:

Finalmente, defina esta camada como senhdo Hard Light ou Vivid Light, dependendo de como sua imagem é.

Criar Album de Fotos no Photoshop

Crie uma pasta em qualquer lugar de seu computador com as imagens com a qual iremos trabalhar após isso iremos ao menu Arquivo>>Automatizar e por fim iremos escolher a opção
Galeria de fotos na Web conforme vemos abaixo:

Onde na nova tela que surgiu iremos selecionar o botão procurar e apontar o caminho até a pasta onde com as nossas fotos,conforme descrito abaixo:

Nosso próximo passo é configurar nossa galeria como o estilo, seu local de destino e as informações sobre o autor conforme vemos abaixo:

Onde o resultado final podemos conferir abaixo:

Efeito Matrix no Photoshop

Começamos com a criação de um documento simples conforme já vimos anteriormente após isso selecionamos a tecla d para o reset das cores, aonde após isso iremos ao menu filters>> texture>> Grain conforme vemos abaixo:

Surgindo a tela abaixo:

Onde iremos efetuar as configurações destacadas acima:
Grain type= Vertical
Contrast=100
Intensity=100
Ficando nossa imagem similar a vista abaixo:

Onde iremos retornar ao menu filter>>Artistic>>Neon Glow conforme vemos abaixo:

Surgindo a tela abaixo, onde iremos efetuar as seguintes configurações:
Glow Size=5
Glow Brightness=25
Glow Color=Qualquer tonalidade de Verde

Onde nossa imagem será similar a vista abaixo:

Após isso iremos retornar ao menu filter >>stylize>>glowing Edges conforme vemos abaixo:

Onde na nova tela iremos efetuar as seguintes configurações, conforme vemos abaixo:
Edge Width=1
Edge Brightness=4
Smoothness=1

E o resultado final vemos abaixo onde ainda é possível incrementar um pouco mais através de sua criatividade esse efeito, então use e abuse da base criada nesse exemplo: