Criando um portfólio interativo com o InDesign ~ Ultra Tutoriais

1 Crie um documento novo Web

Estamos muito usado para criar documentos do InDesign para impressão em tamanhos padrão, tais como Carta e A4. Neste caso, porém, vamos para a Web, por isso é melhor começar com um tamanho de documento que faz sentido para um monitor de computador. Escolha Arquivo> Novo> Documento para criar um novo documento. Para Web Intenção de seleção e para tamanho de página selecione 1024 × 768. Clique em OK.

2 Cor do Papel mudará para preto

Eu quase nunca mudar a cor do papel no InDesign, porque realmente não afeta a página impressa. É mais para visualizar como o trabalho foi impresso ficará no papel. Agora que podemos criar documentos para a Web, a cor do papel não importa como ela pode ser usada como cor de fundo para o seu documento interativo. Escolha Janela> Cor> Amostras para abrir o painel Amostras e clique duas vezes amostra do Livro. Alterar o modo de cores para RGB e mova os controles deslizantes vermelho, verde e azul para 0 para mudar a amostra to Preto. Clique em OK.

3 Criar nova página mestra E QUADRO

Para acelerar a produção, vamos criar uma nova página mestra. Escolha Pages> Janela para abrir o painel Páginas e selecione Mestre Novo no menu flutuante. Digite "Paisagem" no campo Nome e clique em OK.
Agora vamos criar uma moldura para as imagens grandes. Clique uma vez com a ferramenta Moldura de Retângulo (F), digite 1024 × 615 px na caixa de diálogo Retangulo, e clique em OK. Posicionar a moldura na parte superior da página. Com o quadro selecionado, escolha Objeto> Ajuste> Opções de Ajuste ao quadro. Ativar o Ajuste Automático, certifique-se o ajuste é definido para preenchimento do quadro Proporcionalmente, e para Alinhar De clique na caixa central na grade. Clique em OK.

4 criar quadros THUMBNAIL

Em seguida, vamos criar 20 quadros para comportar miniaturas nossa imagem, e então transformá-los em botões para permitir que o espectador clica na imagem que eles querem ver no quadro acima grande. Primeiro, crie um 84,23 × 58,5 moldura px, definir as suas opções de Ajuste para o mesmo como Terceiro Passo, e pressione Shift-Option-Command-D (PC: Shift-Alt-Ctrl-D) para duplicar o quadro de nove vezes. Use a ferramenta Move (V) para posicionar os quadros e, em seguida, o painel Alinhar (Object Window> & Layout> Align) para alinhá-los-, foram selecionados os dez quadros e clicar no ícone Distribuir bordas esquerdas e, em seguida, no ícone Alinhar arestas inferiores.

5 quadros copiar e converter para Botões

Com todos os dez quadros ainda selecionado, pressione Command-C (PC: Ctrl-C) para copiar os quadros e depois Command-V (PC: Ctrl-V) para colá-las. Coloque esses novos quadros diretamente acima dos quadros colocados anteriormente (deixar algum espaço entre os dois conjuntos de 10)-agora você deve ter 20 frames total.
Agora é hora de converter esses 20 quadros em botões para que os nossos visitantes podem clicar sobre eles. Seleccionar todos os 20 quadros e escolha Objeto> Interativo> Converter em Botão.

6 Coloque 20 IMAGENS

É hora de colocar os 20 melhores imagens para o portfolio interativo para os 20 quadros de botões. Esperançosamente, você tem todas as 20 imagens em uma pasta como ele vai fazer colocando-os mais fáceis, mas se não, reunir as 20 melhores imagens para o seu portfolio. Eu costumo usar o Adobe Bridge CS5 para esta tarefa. Ponte aberto, selecione as 20 imagens, e escolha File> Place> No InDesign. Isso o levará de volta para o InDesign com um cursor carregado. Clique para colocar cada imagem no quadro apropriado.

7 Insira 20 PÁGINAS ADICIONAIS

Quando criamos este documento, que começou com uma página. Que uma página será a nossa página de introdução. No entanto, precisamos agora criar 20 páginas de carteira adicionais. Clique no menu do painel Páginas flutuante e escolha Inserir Páginas. Para entrar Páginas 20 e para o Mestre select B Paisagem. Clique em OK.

8 colocar imagens GRANDES

Nós temos as nossas miniaturas e nós temos 20 novas páginas para navegar entre, mas agora é hora de colocar os mesmos 20 imagens que usamos para as miniaturas em suas páginas de perspectiva nas grandes quadros. No Bridge, selecione as mesmas 20 imagens de antes e escolha File> Place> No InDesign. Isto irá trazer você de volta em InDesign com um cursor carregado como antes. Ir para a página 2 (a primeira de suas 20 páginas novas) e clique no quadro grande para colocar a sua primeira imagem grande. Continue colocando cada imagem grande nas páginas subseqüentes.

9 BOTÕES ligar às páginas

Agora precisamos ligar os botões para as páginas da direita. No painel 'Páginas', clique duas vezes na página B-Paisagem para voltar à página principal e clique no primeiro botão para selecioná-lo. No painel Buttons (Janela> Interativo> Botões), clique no ícone do sinal de mais (círculo) e selecione Ir para a Página. Para escolher Zoom Ajustar à janela e digite o número da página correspondente (2). Com o evento definido para On Release por padrão, o documento irá navegar para a página correta quando um usuário clica e lançamentos. É provavelmente uma boa idéia para nomear seus botões, também. Repita este passo para cada botão.

10 SET UP Rollovers para botões

Opcionalmente, você pode configurar a rolagem para os botões. Teria sido bom fazer isso antes do tempo, mas você realmente não poderia fazê-lo até que as imagens foram colocadas. Com um botão selecionado, vá ao painel de botões e clique na miniatura de rolagem na seção Aparência para ativá-lo. Em seguida, clique na miniatura Normal para ativá-lo. Abra o painel Efeito (Window> Effects) e diminuir a opacidade para 30%. Repita este passo para cada botão.

11 PÁGINA INTRO

Nós fizemos todo o trabalho duro agora. Neste ponto, a navegação da carteira está pronto para ir. Tudo o que precisamos fazer é voltar para a página 1 e projetar a página de introdução do jeito que queremos. Tenha em mente que esta é a primeira página que os espectadores vão ver quando eles visitam seu portfólio, de modo que você provavelmente vai querer uma descrição e, possivelmente, uma foto de abertura. Você também pode querer considerar o fornecimento de um link para seu site principal, basta selecionar a moldura que deseja usar, ir para o Objeto> Interativo> Converter para Butão, selecione Ir para URL para a ação, e digite a URL.

12 LOGO Animar texto

É InDesign CS5, podemos animar! No nosso exemplo, queremos que o nosso texto para voar até a página (isso vai funcionar com uma imagem, também). Primeiro coloque o texto ou o seu logotipo na página onde você quer que seja no final da animação. Em seguida, abrir o painel Animação (Janela> Interativa Animação >) e escolha uma predefinição de como pretende que o logótipo para animar até a página (escolhemos voar em cima). Nota: Clique no ícone de visualização Espalhe (círculo) na parte inferior do painel Animação para testar a animação.

13 Criar Outro botão

Neste ponto, não temos maneira de obter a partir da página de introdução para a primeira página da carteira. Precisamos de outro botão este pode ser um texto ou uma imagem. Crie um objeto que pode ser transformado em um botão (no nosso exemplo, estamos usando a palavra "Portfolio", que nós já digitado na página). Uma vez que é no lugar na página, ir para o Objeto> Interativo> Converter para Botão. Utilize o painel de botões para definir a ação de ir para a página 2 (como fizemos com os botões anteriores). Dica: Você pode ter essa mosca no botão usando o painel de Animação, também.

14 EXPORTAÇÃO PARA SWF

Você pode usar o painel de visualização (Window> Interativo> Visualização) para testar tudo neste momento. Corrigir alguma coisa que você deseja ajustar e, em seguida, escolha Arquivo> Exportar para exportar o arquivo. Nomeie o arquivo de acordo, alterar o formato para Flash Player (SWF) e clique em Salvar. Na caixa de diálogo Export SWF, alterar as transições de página para virar a página (isto permite que o usuário manualmente virar as páginas, além de usar os botões de navegação) e permitir a opção Incluir Curva Interativa página. Clique em OK. Uma vez exportado, você pode atualizar o SWF / HTML ao seu site e link para ele ou incorporar o SWF em uma página existente.