PT: Tutorial Visual - Photoshop CS6

Publicado a 14/10/2014, 01:36 por Luis Pitta -org-   [ atualizado a 26/11/2019, 13:40 por Luis PITTA ]
Competências a adquirir:
  • Manipulação de tarefas especificas do Photoshop CS6
  • Construção de sínteses visuais
  • Apresentação oral perante uma audiência


Objetivos gerais

A partir dos livros de apoio 2 e 3 (14 + 14 lições) fornecidos pelo professor, cada aluno vai escolher uma lição ao seu gosto e desenvolver um tutorial visual com texto e imagem estática para uma apresentação pública a alunos de TIC do 8º ano de escolaridade.


Pretende-se com esta proposta de trabalho elaborar as seguintes evidências para avaliação:
  • Peça A. SITES: Páginas web construídas no Google SITEs  do dominio aebenfica.org
  • Peça B. DRIVE: Apresentação criada no Google Apresentação 
  • Peça C. DRIVE: Brochura A4 criada no Google Documentos
  • Peça D. Apresentação oral (15 min. máx.)
  • Peça E. Apresentação oral público alargado (15 min. máx.)
Sequência prevista de trabalho 
  1. A partir da lição que escolheu deve começar por ler e executar cada passo.
  2. De seguida deve identificar as matérias essenciais das matérias acessórias.
  3. No desenvolvimento do tutorial (peça A) deve começar por colocar as materiais essenciais.
  4. Deve deixar para o final (ou mesmo suprimir) as restantes matérias que foram identificadas como acessórias.
  5. As imagens capturadas devem ser armazenadas numa pasta do Google DRIVE.


(50%) A. Tutorial visual


EvidênciaUm site autónomo com o tutorial composto por texto e imagens estáticas.

Este tutorial deve ser baseado na lição escolhida, embora possa (deva) ter as suas próprias imagens, ou seja imagens criadas/fotografadas por nós, em vez das imagens de exemplo disponibilizadas no CD de apoio do livro. Em termos de dimensão deve  ser mais pequeno  que a lição estudada. Ler as seguintes notas.


Notas para uma boa implementação do trabalho:
    1. Não personalize os Temas, cores e tipos de letra (Gerir site) vamos criar um único tema a ser aplicado a todos os sites.

    2. Utilize a 
    língua Portuguesa (para os menus e teclas de atalho deve manter a língua Inglesa) e escreva usando a 3ª pessoa e o infinitivo. Exemplos:

    Correto: "Criar uma camada...", ou, "Crie uma camada..."
    Incorreto: "Cria uma camada..." ou "Criamos uma camada..."

    Na Internet o texto é lido no ecrã (e não no papel) por isso:
    • Não indente a primeira linha dos novos parágrafos, a leitura torna-se mais difícil. Em vez disso deixe uma linha de intervalo entre cada parágrafo.
    • Não sublinhe texto (o sublinhado indica hiperligação). Utilize em alternativa o negrito, itálico e a cor.

    3. Cada passo deve estar identificado com um número sequencial e deve ter um ou mais 
    printscreens de apoio com legendas também devidamente identificadas.

    4. Os
    printscreens devem ter caixas circulares/retangulares de cor vermelha nas opções seleccionadas com indicação numérica sequencial. Pode utilizar setas da mesma cor para realçar certas operações. 

    Ver printscreen de exemplo:

    Reparar na inserção de caixas vermelhas (retangular com cantos arredondados), numeração sequêncial (1,2,3) e legendagem da figura que inclui uma outra numeração sequencial independente da numeração dos passos:


    Passo 10
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare, massa sit amet convallis suscipit, nulla ipsum imperdiet nulla, at hendrerit nisl mi eu ligula. Sed eget felis dolor. Vivamus pretium euismod dui eu commodo. Praesent fermentum lacinia elementum. In placerat tellus id mauris tincidunt, ut fermentum ante mattis. Proin sem sapien, ultricies non est tempus, malesuada porta lectus. Aliquam placerat, odio sed gravida congue, lacus purus maximus nibh, non ultricies dolor nisi id diam. Nulla molestie leo sed odio suscipit dignissim. Proin volutpat, mi tincidunt venenatis imperdiet, elit diam maximus sapien, quis commodo orci enim vel orci. Integer eros arcu, dictum a pharetra et, egestas tincidunt ipsum. In sed mi sagittis, hendrerit metus in, pellentesque augue. Aliquam dapibus justo ac dolor viverra, at pharetra urna fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur quis rutrum libero, id gravida eros. Proin venenatis augue eu tristique venenatis.

     Fig. 1: Ajuste de Brilho e contraste (Brightness/Contrast)


    Ver outro exemplo: http://sites.aebenfica.org/apontamentos-tic/pstutoriais/11


    Mini-aplicações que ajudam a poupar (muito) tempo:

    Picpick: Deves usar o PicPick para a criação das caixas, números e setas a vermelho.
    Lightscreen: Para os printscreens sugiro a utilização do Lightscreen.

    Mais exemplos de tutoriais visuais de alunos do ano passado em: 
    Photoshop tutoriais (Alunos)

    5. Deve criar as seguintes
    páginas (do tipo página web) no site autónomo:
      • Capítulos: Anexar o PDF da lição estudada
      • Dúvidas: Listagem dos problemas encontrados durante a realização da lição
      • Imagens: Os printscreens capturados (Pasta no DRIVE ou diretamente na página do SITE)
      • Sobre: Identificar o autor do site: Nome, ano, turma
      • Evidencias\Peça A: O tutorial visual propriamente dito
      • Evidencias\Peça B: Incorporação da Apresentação elaborada no DRIVE
      • Evidencias\Peça CIncorporação da folha A4 elaborada no DRIVE
      • Evidencias\Peça D: Notas para a apresentação oral
      • etc.: Outras páginas ao seu gosto

    Ajustes finais ao site:

    1. Alterar a partilha do site para: "Público na Internet"
    2. Alterar a partilha dos componentes criados no Google DRIVE: Pasta com as imagens (para a peça A),  Apresentação (Peça B) e Brochura (Peça C), para: "Público na Internet"
    3. Aplicar um modelo comum a todo o site: Ver escolha
    4. Alterar o nome do site para o título do tutorial em questão
    5. Alterar os títulos das páginas: Peça A, Peça B, Peça C, Peça D e Peça E

    Exemplo
        • Peça A -> A. Tutorial
        • Peça B -> B. Apresentação resumo
        • Peça C -> C. Brochura
        • Peça D -> D. Apresentação oral
        • Peça E -> E. Apresntação oral pública
    6. Adicionar "lista de subpáginas" automáticas em todas as páginas que contenham sub-páginas. Eliminar os 3 componentes no final da página.
    7. Adicionar informação importante à página inicial: Menus automáticos, Acesso direto às diferentes peças, imagem de capa, etc.


    (15%) B. Apresentação (Google Slides)


    • Elaboração de uma apresentação a partir do site com o tutorial que vai servir de guia para a apresentação oral à turma. Esta apresentação deve ter elementos interessantes que cativem a audiência de modo a que fiquem com vontade de fazer o tutorial de uma ponta à outra. Pode ensinar um passo ou outro, mas o mais importante é que seja cativante, interessante, divertido. É como se fosse um "trailer" de um filme que tem como função faz com que fiquemos com vontade de ir ver o filme completo :)
    EvidênciaUma apresentação (tipo Powerpoint feita a partir do Google Apresentação) com um resumo do tutorial.

    Caracteristicas comuns:

    1. Dimensão da folha: 16:9 (Menu Ficheiro | Configurar página)
    2. Tema ao gosto do aluno (não perder muito tempo com o tema)

    O diapositivo de capa deve conter:
    Nome, nº ano e turma do aluno
    Nome da Escola e da disciplina
    Ano lectivo

    O útimo diapositivo deve conter:
    O nome do autor com informação de contacto (email)
    O URL curto do tutorial. Exemplo: 


    Onde colocar? Na pasta "B. Apresentação" do site criado em A.



    (15%) C. Brochura em papel (folha A4)


    • Elaboração de uma brochura A4 com um resumo dos pontos mais importantes da apresentação.
    • Esta brochura será fornecida à audiência no inicio da apresentação.
    • A ideia desta brochura é criar curiosidade para que a assistência fique com vontade de ir a correr para um computador a fim de realizar o vosso tutorial (Peça A).
    EvidênciaUma folha A4 (feita a partir do Google Documentos) com uma espécie de "Cheat Sheet" para o tutorial.

    Esta folha A4 deve ser dobrada a meio tendo por conseguinte 4 partes:
    • Parte 1: Capa 
      • Apresentação do autor e do título do trabalho
    • Parte 2: Interior esquerda
      • Área de trailer/teaser: imagens e pouco texto
    • Parte 3: Interior direita
      • Área de trailer/teaser: imagens e pouco texto
    • Parte 4: Contra-capa
      • Teclas de atalho mais utilizadas
    Copiar modelo para o teu Google DRIVE:

    PT3 - Peça C Modelo


    Passos para guardar uma copia do modelo:

    1. Clique no seguinte endereço para abrir em modo completo: 
    2. Escolha Ficheiro | Fazer cópia... para guardar uma copia no seu google DRIVE.
    3. Altere o nome do ficheiro: "PT3 - Peça C - etc..."
    4. Incorpore o ficheiro (mesmo vazio) na página Peça C do site autónomo.

    Onde colocar? Na pasta "C. Brochura" do site criado em A.



    (20%) D. A apresentação oral à turma


    Nesta página deve colocar notas sobre:
    • Como pensa fazer a apresentação oral.
    • A roupa que vai usar
    • Como se vai apresentar
    • O modo de das as boas vindas
    • etc. 

    Local: Anfiteatro D11
    Duração máxima: 15 minutos

    Calendarização das apresentações: Ver página inicial da PT.

    A apresentação oral será avaliada nos seguintes 3 parâmetros:

    1. Oralidade
    2. Qualidade da informação escrita
    3. Aspeto gráfico da apresentação



    (Para avaliação no 2 Periodo) 
    E. A apresentação oral pública


    Apresentação a outros alunos da Escola: Nomeadamente aos alunos do 8º Ano (TIC8)
    Local: Anfiteatro D11
    Duração máxima: 15 minutos

    Nota: Todos apresentam, mas só será avaliado se for uma melhoria.

    Bónus na avaliação da peça E:
    0,50V - Pela presença
    0,25V - Oralidade
    0,25V - Qualidade da informação escrita
    0,25V - Aspeto gráfico da apresentação


    Calendarização das apresentações: 
    Ver página inicial da PT.



    Materiais necessários
    • Computador
    • Ligação à Internet
    • Videoprojector
    • Tela ou quadro interativo
    Software utilizado:
    • PS CS6 Portable: O programa de imagem
    • Enunciado da lição em PDF
    • Lightscreen: Para facilitar a captura dos printscreens
    • PicPick: Para facilitar a criação de caixas, números e setas vermelhas nos printscreens
    • Google SITEs: Para construir o site
    • Google Documentos e Apresentação: Para a apresentação e brochura 

    Comments