Coluna Fireworks – Álbum de Fotos

Salve, comunidade!

Nessa coluna ensinarei a criar um álbum (ou mural, como preferir) de fotos bem legal. Dentro do tema abordarei também criação de comandos para facilitar o trabalho e efeitos bacanas e simples de fazer como o uso de linhas em forma de círculo. Bom aprendizado!

Álbum:

Crie um documento de 580x435px. Começaremos pelo fundo, para isso siga os passos abaixo:

1 – Crie um retângulo que preencha toda a área do documento, à ele atribua como cor um gradiente radial entre vermelho claro e vermelho escuro (veja a figura a baixo), para o traçado defina trasparente.

Dica: Tranque essa camada para facilitar o trabalho.

2 – Para fazer um efeito legal no fundo, com a ferramenta Elipse (U), crie um círculo de 384px de largura por 149px de altura. Posicione-o no meio documento, defina o prenchimento para transparente e o tracejado (stroke) para branco.

3 – Duplique (crtl+shift+d) esse círculo, aumente seu tamanho e gire-o com a ferramenta scale() e depois centralize-o com o círculo menor.

4 – Repita esse processo várias vezes até chegar a algo como a figura abaixo:

Obs.: Repeti o processo oito vezes.

5 – Agrupe o congunto de linhas e duplique o grupo formado três vezes, fazendo assim quatro objetos iguais. Organize esses quatro grupos de vetores de forma que preencha toda tela, use a scale tool para gira-los adequando-os de forma melhor ao documento.

6 – Agrupe todos esse objetos (ctrl+g), defina o blend mode para “Overlay” e aplique o efeito “Zoom Blur”.

7 – Crie uma pasta na paleta “Layers” e nomei-a como “Fundo” para organizar o trabalho. Coloque o que foi criado até agora dentro dessa pasta e tranque-a.

Pronto! Terminamos o fundo! Vamos fazer agora o menu de navegação na parte inferior do álbum.

8 – Com a fonte Dolphin, disponibilizada para download no ínicio da coluna, escreva “< Anterior” no canto esquerdo e “Próximo >” no canto direito.

9 – crie um pequeno quadrado de 12x12px com gradiente linear das cores #E63B20 para #B42614.

10 – Em volta desse quadrado desenhe outro quadrado, só que com 16px. Defina o preenchimento desse para transparente e o tracejado para branco. Após criado mude o blend mode para “Overlay”.

11 – Adicione a esse mesmo quadrado uma sombra (Drop Shaddow) com as seguintes características:

12 – Com a fonte “Verdana” no tamanho 10 sem suavização de bordas (No Anti-Alias) escreva “1″ no quadrado.

13 – Agrupe o botão construído e duplique-o criando o número de botões correspondente ao número de páginas do álbum. Utilizei 5 botões. Edite o texto de cada botão para os números das páginas:

14 – A barra de navegação precisará acessar outras páginas para isso crie um hotspot para cada botão utilizando a “Rectangle Hostspot Tool” ()

Obs.: Ver os hotspots não é muito agradável para alguns, eu por exemplo, para não ve-los clique em “Hide slices and hotspots” na barra de ferramentas ().

15 – Crie outra pasta na paleta “Layers” e nomei-a como “Navegação”. Coloque tudo correspondente a barra de navegação nessa pasta e tranque-a.

Já criamos a barra de navegação! Vamos agora para as miniaturas das fotos!

16 – Crie outra pasta na paleta “Layers” e nomei-a como “Página 1″. Os arquivos criados a partir de agora devem ser criados nessa pasta.

17 – Importe (Ctrl+R) a foto que deseja colocar no álbum.

18 – Através do painel Propriedades redimensione essa imagem para 160x120px.

19 – Duplique (ctrl+shift+d) essa imagem.

20 – Crie um retângulo de 156x116px e posicione-o no centro da figura:

21 – Converta esse retângulo para seleção (Modify – no menu do topo – -> convert patch to marquee…). A seleção deve ser em Anti-Alias ou Hard.

22 – Pressione “Delete” para deletar aquela parte do bitmap.

23 – Desmarque a seleção pressionando “Esc” caso ela esteja selecionada.

Ainda falta mais uns 5 passos… E se eu te disesse que você tem que fazer tudo isso com toda imagem que quiser adicionar? Aposto que você ia desanimar, fechar essa janela e ainda ia ficar com raiva de mim por fazer você começar um tutorial tão trabalhoso. Imagina… 5 páginas… 4 fotos em cada… Iria aí pelo menos uma meia hora e uma boa dor de cabeça…

É para isso que serve os comandos, para ao invés de repetir vários passos várias vezes fazer tudo com apenas alguns cliques. Por isso usaremos essa técnica. Para começar abra o painel “Frames and History” na parte da direita da janela do Fireworks (Shift+F10).

24 – No painel aberto (Frames and History) selecione todos os ítens abaixo de “import” e clique em “salvar”. Ignore o aviso que irá aparecer clicando em OK e nomeie o comando como “Photo Album 1″.

Obs.: O seu pode conter alguns ítens a mais ou um a menos, irá depender do que você fez na criação do retângulo. Eu por exemplo criei diretamente um de 156×116, mas tive que move-lo, por isso o “Move” após o “Rectangle tool”, caso você tenha colocado diretamente certo vai ter só “Rectangle tool” e assim por diante… lembrando que só pode estar diferente nessa parte, se estiver em outra leia novamente os passos para ver no que errou, pois pode ser que por isso o camando criado não funcione corretamente.

25 – Continuando a montar a miniatura da imagem… selecione o bitmap com a figura completa (há duas, uma só com as bordas e outra completa), diminua seu tamanho para 152x112px através do painel Propriedades.

26 – Mova essa imagem para o centro em realação as bordas:

27 – No painel Frames and History selecione todos os ítens após os salvados no passo 24. Salve como “Photo Album 2″.

28 – Selecione o bitmap que faz papel de borda para a figura. Aplique a ele uma sombra (Drop Shadow) preta:

29 – Defina essa mesma camada (a da borda) para o blend mode “Overlay”.

30 – No painel Frames and History, salve esses últimos passos feitos como “Photo Album 3″.

31 – Há dois bitmaps para a miniatura, inverta-os de posição no painel “Layers”. Coloque o bitmap com as bordas em baixo e o com a imagem em cima. Isso para a sombra da borda não atingir a imagem.

Sua imagem deverá ter ficado assim:

Agora é hora de usar os comandos criados. Como você deve ter percebido ao invés de criar apenas um comando chamado “Photo Album” o dividimos em 3, isso porque há mudança no objeto selecionado, se colocassemos tudo num só todos os passos seriam feitos na mesma figura.

Obs.: As imagens irão para uma certa posição quando você começar à aplicar os comandos. Não mude-a de posição até que termine a aplicação dos mesmos.

32 – Importe uma outra foto, aplique a ela o comando “Photo Album 1″ (commands, no menu do topo).

Sua imagem deverá ter sido diminuida e duplicada, sendo uma só com as bordas e outra completa.

33 – Selecione a imagem completa e aplique a ela o comando “Photo Album 2″.

A imagem deverá ter sido diminuida e centralizada.

34 – Selecione o bitmap com as bordas e aplique a ele o comando “Photo Album 3″.

Uma sombra deverá ter sido adicionada à borda e a mesma deverá ter mudado seu blend mode para “Overlay”.

35 – Inverta a posição dessas duas imagens no painel “Layers” deixando o bitmap com as bordas em baixo e o com a imagem em cima.

Pronto! Você fez mais uma miniatura de imagem! Agora para fazer todas as outras é só usar esses comandos. Bem mais fácil, não?

36 – Após ter colocado as 4 miniaturas de foto que você deseja organize-as como achar melhor.

37 – Ainda na pasta “Página 1″, crie um retângulo branco em cima do botão “1″.

38 – Mude o Edge para “Feather – 8″ em propriedades. Mude também o blend mode para “Overlay”.

Esse retângulo foi usado para marcar que aquela é a página 1. A idéia é usar um retângulo desse em cada pasta correspondente as páginas.

39 – Coloque os links em todos Hostspots da barra de navegação. Se os hotspots estiverem ocultos mostre-os (2).

40 – Tranque a pasta “Página 1″ e crie outra chamada “Página 2″. Faça-a da mesma maneira que a página 1, apenas mudando a posição das figuras e ao invés de criar o retângulo com feather em overlay em “1″ crie em “2″.

Faça assim todas as páginas que quiser no Álbum.

Bom, agora é só exportar, para exportar a página 2 por exemplo…

41 – Oculte todas as pastas de páginas que não seja a “Página 2″.

42 – Os botões “< Anterior” e “Próximo >” na barra de navegação irão mudar o link de página para página, portanto, mude o link de “Próximo >” para o correspondente a 3ª página e o de “< Anterior” para o correspondente a 1ª.

43 – Selecione a primeira miniatura de imagem do álbum e adicione a ela um hotspot:

44 – Adicione a esse hotspot o link para a foto e coloque-o para abri-lo em uma página em branco.

45 – Faça o mesmo com as outras imagens.

46 – Exporte o álbum (ctrl+shift+r):

47 – Delete todos os hotspots correspondentes as imagens da página 1 (os que foram criados nos passos 43, 44 e 45) para não dar problema na criação da próxima página.

48 – Faça o mesmo com as outras páginas, lembrando que na página 1 não deve haver “< Anterior”, portanto oculte esse texto na pasta “navegação” e delete o hotspot correspondente em “Web Layer”. O mesmo para a última página, não deve haver “Próximo >”.

Você pode depois editar .htm no Dreamwever para retirar as bordas e abrir o álbum como Pop-Up, por exemplo. Veja como ficou o meu:

Álbum de fotos