41
Curso Profissional de Técnico de Multimédia Prova de Aptidão Profissional ESAN Digital Adelaide de Oliveira Coutinho Professor Acompanhante: Manuel Teixeira Oliveira de Azeméis, Julho de 2016

Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

Curso Profissional de Técnico de Multimédia

Prova de Aptidão Profissional

ESAN Digital

Adelaide de Oliveira Coutinho

Professor Acompanhante: Manuel Teixeira

Oliveira de Azeméis, Julho de 2016

Page 2: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

2

Curso Profissional de Técnico de Multimédia

Prova de Aptidão Profissional

ESAN Digital

Adelaide de Oliveira Coutinho

Professor Acompanhante: Manuel Teixeira

Oliveira de Azeméis, Julho de 2016

Page 3: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

3

Dedicatória

Em primeira análise, dedico

este projecto aos meus Pais e à

minha Irmã, agradecendo todo

o apoio. A motivação que

sempre me transmitiram para

ultrapassar cada etapa foi

fundamental.

Sendo também importantes,

quero dedicá-lo, também, aos

meus amigos e colegas de

turma, pela ajuda que me

deram, tanto psicológica como

prática.

Page 4: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

4

Resumo

Esta Prova de Aptidão Profissional (PAP), com o nome “ESAN Digital”, foi desenvolvida

em conjunto com outro colega, no segmento da Formação em Contexto de Trabalho

(FCT) na Escola Superior Aveiro Norte (ESAN).

Foi, então, proposto o projeto de modelar a escola em três dimensões, criar um blog,

onde os alunos pudessem exibir os seus trabalhos, criar uma newsletter, para partilhar

novidades e informações, elaborar um cartaz alusivo ao tema, realizar um vídeo e um

blog de acompanhamento, para mostrar o trabalho desenvolvido ao longo do tempo,

construir uma planta interativa, onde as pessoas se pudessem localizar e saber qual o

caminho até ao ponto a que se queriam deslocar. Este foi, assim, um projeto aceite

com muito entusiasmo, pois serviu para testar as capacidades adquiridas ao longo do

curso.

O projeto foi dividido em duas partes, visto que foi realizado com outro colega. Assim

sendo, este relatório relata a parte da modelação e texturização tridimensional (parte

exterior da escola e alguns objetos interiores), a criação da newsletter e da planta

interativa, assim como a elaboração do vídeo.

Page 5: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

5

Agradecimentos

De uma forma geral, agradeço a todas as pessoas que, direta ou indiretamente,

contribuíram para o bom desempenho deste projeto.

Dirijo o meu sincero reconhecimento à Escola Superior Aveiro Norte, funcionários e

direção, por esta grande oportunidade de mostrar os meus conhecimentos. Agradeço

ainda à minha família, que tem aqui um lugar de destaque, pelo apoio incondicional

que me deu.

Queria, também, agradecer às seguintes pessoas, por me ajudarem no decorrer da

Prova de Aptidão Profissional:

Em primeiro lugar, ao meu diretor de turma e orientador de estágio, Manuel Teixeira,

que tratou das questões contratuais, sempre nos momentos oportunos, e pela ajuda

que me deu no esclarecimento das dúvidas que foram surgindo no decorrer do

projeto.

Em segundo lugar, à minha orientadora de estágio, Silvina Félix, que sempre se

preocupou em ajudar e dar dicas de aperfeiçoamento.

Em terceiro lugar, gostaria de agradecer aos funcionários da ESAN, que

disponibilizaram algum do seu tempo para me auxiliar face a dúvidas que senti.

E, em quinto lugar, agradeço ao professor André Morais, pois sempre me ajudou nas

dificuldades que manifestei.

Page 6: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

6

Índice

DEDICATÓRIA ........................................................................................................................................ 3

RESUMO ................................................................................................................................................ 4

AGRADECIMENTOS ................................................................................................................................ 5

INTRODUÇÃO ...................................................................................................................................... 10

HARDWARE E SOFTWARE UTILIZADO .................................................................................................. 11

MODELAÇÃO E EDIÇÃO TRIDIMENSIONAL E NEWSLETTER ................................................................... 12

DESENVOLVIMENTO DO PROJETO ....................................................................................................... 12

1. MEDIÇÃO DA PLANTA BIDIMENSIONAL .................................................................................................... 13

2. RECOLHA DE FOTOS DA ESAN ............................................................................................................... 15

3. CRIAÇÃO DA PLANTA 3D (MODELAÇÃO) ................................................................................................. 16

CRIAÇÃO DA PLANTA 3D (TEXTURIZAÇÃO) ............................................................................................... 29

4. CRIAÇÃO DA NEWSLETTER .................................................................................................................... 33

5. PLANTA INTERATIVA ............................................................................................................................ 34

Implementação da Planta................................................................................................. 35

BLOG DE ACOMPANHAMENTO ............................................................................................................ 37

CONCLUSÃO......................................................................................................................................... 38

BIBLIOGRAFIA ...................................................................................................................................... 39

ANEXOS ............................................................................................................................................... 40

FOTOS RECOLHIDAS ..................................................................................................................................... 40

PLANTA VETORIZADA ................................................................................................................................... 41

Page 7: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

7

Índice de imagens

Imagem 1: Planta 2D no software Gimp ........................................................................ 14

Imagem 2: Medidas dadas pelo Gimp ............................................................................ 14

Imagem 3: Planta Medida .............................................................................................. 14

Imagem 4:Vista Frontal .................................................................................................. 15

Imagem 5: Vista Superior ............................................................................................... 15

Imagem 6: Suportes da ESAN ......................................................................................... 15

Imagem 7: Vista Inferior (Escadas) ................................................................................. 15

Imagem 8: Vista Traseira ................................................................................................ 15

Imagem 9: Telhado ......................................................................................................... 15

Imagem 10: Início da Planta 3D ...................................................................................... 16

Imagem 11: Escadas Frontais ......................................................................................... 16

Imagem 12: Suporte da Escola ....................................................................................... 17

Imagem 13: Suporte da Escola - Aproximado ................................................................ 17

Imagem 14: Varanda Fontal ........................................................................................... 17

Imagem 15: Varanda Frontal - Aproximada ................................................................... 17

Imagem 16: Número de Janelas Traseiras ...................................................................... 18

Imagem 17: Janelas Traseiras ......................................................................................... 19

Imagem 18: Janelas Traseiras - Aproximadas ................................................................. 19

Imagem 19: Janelas Traseiras – 3D ................................................................................. 19

Imagem 20: Porta Principal - 3D ..................................................................................... 20

Imagem 21: Porta Principal - Fora .................................................................................. 20

Imagem 22: Porta Principal (Vista Wireframe) .............................................................. 20

Imagem 23: Porta Principal - Dentro .............................................................................. 20

Imagem 24: Banco Exterior - 3D ..................................................................................... 21

Imagem 25: Banco Exterior - Foto .................................................................................. 21

Imagem 26: Banco Exterior - 3D (Aproximado) .............................................................. 21

Imagem 27: Banco Exterior - Foto .................................................................................. 21

Imagem 28: Balde do lixo - 3D ........................................................................................ 22

Imagem 29: Balde do lixo - Foto ..................................................................................... 22

Imagem 30: Balde do lixo - 3D ........................................................................................ 22

Imagem 31: Pavimento da Varanda Lateral - 3D ............................................................ 22

Imagem 32: Pavimento da Varanda Lateral ................................................................... 22

Imagem 33: Pavimento da Varanda Lateral - 3D ............................................................ 23

Imagem 34: Pavimento da Varanda Lateral ................................................................... 23

Imagem 35: Varanda Lateral - 3D ................................................................................... 23

Page 8: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

8

Imagem 36: Varanda Lateral - Foto ................................................................................ 23

Imagem 37: Varanda Lateral - 3D ................................................................................... 23

Imagem 38: Varanda Lateral - Foto ................................................................................ 23

Imagem 39: Número de Janelas Frontais ....................................................................... 24

Imagem 40: Vista Frontal................................................................................................ 24

Imagem 41: Entrada Principal ........................................................................................ 24

Imagem 42: Janelas Frontais - 3D ................................................................................... 25

Imagem 43:Janelas Frontais - Foto ................................................................................. 25

Imagem 44:Janelas Frontais - 3D .................................................................................... 25

Imagem 45:Janelas Frontais - Foto ................................................................................. 25

Imagem 46: Escada para o estacionamento- 3D ............................................................ 25

Imagem 47: Escada para o estacionamento .................................................................. 25

Imagem 48: Escada para o estacionamento- 3D ............................................................ 25

Imagem 49: Escada para o estacionamento .................................................................. 25

Imagem 50: Planta 2D .................................................................................................... 26

Imagem 51: Divisões no Blender .................................................................................... 26

Imagem 52: Divisões no Blender .................................................................................... 26

Imagem 53: Cenário Exterior .......................................................................................... 27

Imagem 54: Estacionamento .......................................................................................... 27

Imagem 55: Rodapé - 3D ................................................................................................ 27

Imagem 56: Rodapé ........................................................................................................ 27

Imagem 57: Computador................................................................................................ 28

Imagem 58: Computador - 3D ........................................................................................ 28

Imagem 59: Auditório ..................................................................................................... 28

Imagem 60: Auditório - 3D ............................................................................................. 28

Imagem 61: Varanda Lateral Modelada ......................................................................... 29

Imagem 62: Varanda Lateral Texturizada ...................................................................... 29

Imagem 63: Textura da Mesa ......................................................................................... 29

Imagem 64: Cadeira com rodas ...................................................................................... 30

Imagem 65: Cadeira da Biblioteca .................................................................................. 30

Imagem 66: Cadeira dos Gabinetes ................................................................................ 30

Imagem 67: Cadeira dos Gabinetes ................................................................................ 30

Imagem 68: Textura da Cadeira (Almofada) .................................................................. 30

Imagem 69: Textura de Madeira .................................................................................... 30

Imagem 70: Livros ........................................................................................................... 30

Imagem 71: Livro ............................................................................................................ 30

Imagem 72: Textura para as páginas .............................................................................. 31

Page 9: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

9

Imagem 73: Auditório ..................................................................................................... 31

Imagem 74: Auditório Texturizado ................................................................................. 31

Imagem 75: Escola Texturizada ...................................................................................... 31

Imagem 76: Textura de Terra ......................................................................................... 32

Imagem 77: Textura de Granito ..................................................................................... 32

Imagem 78: Textura de Relva ......................................................................................... 32

Imagem 79: Textura de Água ......................................................................................... 32

Imagem 80: Teste de Newsletter ................................................................................... 33

Imagem 81: Nome dos Compartimentos ....................................................................... 34

Imagem 82: Gabinete 1 .................................................................................................. 34

Imagem 83: Gabinete 2 .................................................................................................. 34

Imagem 84: Gabinete 3 .................................................................................................. 34

Imagem 85: Legenda por Cores ...................................................................................... 34

Imagem 86: Layout do Programa ................................................................................... 35

Imagem 87: Grelha de Frames ....................................................................................... 35

Imagem 88: Introdução do Vídeo ................................................................................... 36

Imagem 89: Introdução à Etapa ..................................................................................... 36

Imagem 90: Trabalhar no Projeto .................................................................................. 36

Imagem 91: Captura de Ecrã .......................................................................................... 36

Imagem 92: Página Inicial ............................................................................................... 37

Imagem 93: Auditório ..................................................................................................... 40

Imagem 94: Secretaria .................................................................................................... 40

Imagem 95: Suportes ...................................................................................................... 40

Imagem 96: Cantina ........................................................................................................ 40

Imagem 97: Janelas Traseiras ......................................................................................... 40

Imagem 98: Cantina ........................................................................................................ 40

Imagem 99: Sala de Aula ................................................................................................ 40

Imagem 100: Janelas Frontais ........................................................................................ 40

Imagem 101: Sala de Aula .............................................................................................. 41

Imagem 102: Laboratório ............................................................................................... 41

Imagem 103: Laboratório ............................................................................................... 41

Imagem 104: Laboratório ............................................................................................... 41

Page 10: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

10

Introdução

A Prova de Aptidão Profissional (PAP), com o nome “ESAN Digital”, foi desenvolvida em

conjunto com outro colega no segmento da Formação em Contexto de Trabalho (FCT),

na Escola Superior Aveiro Norte (ESAN).

Assim sendo, este relatório, descreve a parte da modelação 3D (parte exterior da

escola e alguns objetos interiores), a criação da newsletter, a criação da planta

interativa e a elaboração do vídeo.

“A Escola Superior de Design, Gestão e Tecnologias da Produção de Aveiro - Norte

(ESAN) foi criada a 8 de outubro de 2004, através da promulgação do Decreto-Lei

217/2004. Esta unidade orgânica da Universidade de Aveiro dedica-se ao ensino e à

investigação, pertencendo ao subsistema de ensino Politécnico.

A ESAN desenvolve atividades nas áreas do design e desenvolvimento de produto, da

organização industrial, das tecnologias e sistemas da produção e das tecnologias e

sistemas de informação e comunicação, quer através da sua oferta de ensino de nível

superior, quer através da sua oferta de ensino e formação pós-secundária de natureza

técnica e profissionalizante.”

O Diretor da ESAN

Prof Doutor Martinho Oliveira

Page 11: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

11

Hardware e Software Utilizados

Para este projeto foram utilizados alguns equipamentos e softwares, sendo que a

maioria deles foram softwares livres. Foram usados os computadores da ESAN, assim

como o meu computador pessoal.

Para a medição da planta 2D foi utilizado o software Gimp (software livre), para a

recolha de fotos da ESAN, utilizou-se uma Canon 100D (disponibilizada pela Escola

Secundária Soares Basto).

Na modelação 3D optou-se por usar o software Blender, pois foi o utilizado no

contexto de sala de aula e, também, por ser um software livre.

Para a newsletter usou-se o plugin “The Newsletter Plugin” no Wordpress.

A planta interativa foi realizada em Adobe Director (software pago), juntamente com

os softwares Gimp e Inkscape.

Para a elaboração do vídeo recorreu-se ao software Sony Vegas, software pago.

Page 12: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

12

Desenvolvimento do projeto

Este projeto foi dividido em seis fases.

Primeira fase: Medição da planta bidimensional;

Segunda fase: Recolha de fotos;

Terceira fase: Criação da planta tridimensional;

Quarta fase: Criação da newsletter;

Quinta fase: Planta Interativa;

Sexta fase: Criação do Making Of e blog de acompanhamento.

Page 13: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

13

Modelação e edição tridimensional

Modelação tridimensional (ou 3D) é o processo de desenvolvimento de uma

representação matemática de qualquer superfície tridimensional de um objeto (seja

inanimado ou vivo), através de software especializado.

Consiste na criação de formas, objetos, personagens e cenários. Para elaborar a

modelação são utilizadas ferramentas computacionais avançadas e direcionadas para

este tipo de tarefa.

Existem diversos profissionais habilitados na área. Atualmente os programas mais

utilizados são: SketchUp, 3ds Max, Blender (utilizado para este projeto), Cinema 4D,

Maya, ZBrush.

Para a geração de modelagem tridimensional são necessários recursos de software e

hardware adequados, sendo o processo normalmente dividido em quatro fases.

Acresce que cada uma destas fases tem etapas mais específicas:

Modelagem;

Configuração do layout da cena:

Mapeamento (simulação de materiais e texturas sobre planos);

Iluminação;

Geração de câmaras;

Criação de cena:

Renderização (processo de tratamento digital de imagens e sons);

Animação;

Prototipagem de produtos.

Newsletter

Newsletter é um tipo de distribuição regular a assinantes, contendo informação acerca

de um assunto que é abordado. Atualmente, generalizam-se cada vez mais as

newsletter, distribuídas como mensagem electrónica, ou seja email, que o utilizador

pode receber via Internet, após se inscrever num site.

As newsletter são geralmente enviadas por correio electrónico, mas também podem

ser enviadas por SMS, MMS ou outros tipos de comunicação eletrónica.

Page 14: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

14

1. Medição da planta bidimensional Durante a primeira fase, foi feita a medição da planta 2D no software GIMP.

Imagem 1: Planta 2D no software Gimp

Imagem 2: Medidas dadas pelo Gimp

No software GIMP foi aberta a planta 2D, com a ajuda da ferramenta Measure Tool,

que mostrava o seu valor em metros, sendo, assim, conseguida a medição com valores

exatos.

Imagem 3: Planta Medida

Page 15: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

15

Imagem 8: Vista Traseira

2. Recolha de fotos da ESAN Com a máquina CANON 100D disponibilizada pela Escola Secundária Soares Basto

foram recolhidas várias fotos para seguir o padrão da escola de uma forma mais

realista, de modo a obter um melhor resultado.

Seguem, de seguida, algumas das fotos tiradas.

Imagem 4:Vista Frontal

Imagem 5: Vista Superior

Imagem 6: Suportes da ESAN

Imagem 7: Vista Inferior (Escadas)

Imagem 9: Telhado

Page 16: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

16

3. Criação da planta 3D (Modelação)

Imagem 10: Início da Planta 3D

Foi aqui iniciado todo o projeto 3D. Para isso, foi utilizado um cubo, visto que a ESAN é

uma espécie de paralelepípedo, o qual foi escalado e esticado, de forma a obter um

comprimento mais parecido com o da ESAN.

Imagem 11: Escadas Frontais

A imagem 11 mostra as escadas frontais da escola. Para se obter esta imagem final,

foram usados vários planos encaixados, de forma a obter-se uma semelhança com

modelo real das escadas. Para o corrimão foram utilizados vários cubos, que foram

esticados, para que aquele apresentasse um comprimento maior relativamente à sua

largura e, assim, formar vários paralelepípedos.

Page 17: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

17

Imagem 12: Suporte da Escola

Imagem 13: Suporte da Escola - Aproximado

As imagens 12 e 13 mostram um dos suportes da escola. Para fazê-lo foi necessário um

cubo e quatro cilindros. Com o cubo foi preciso usar a ferramenta Knife Tool (que corta

as faces na posição em que o rato estiver), tendo-se, assim, obtido o produto final

facetado. Os quatro cilindros foram aumentados ao nível da altura e sofreram

alterações na sua rotação.

Imagem 14: Varanda Fontal

Imagem 15: Varanda Frontal - Aproximada

Nas imagens 14 e 15 encontra-se a varanda frontal. Para a executar foram copiados os

paralelepípedos do corrimão das escadas (Imagem 11) e ordenados de uma forma

sequencial.

Page 18: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

18

Imagem 16: Número de Janelas Traseiras

Na imagem 16 encontra-se a sequência das janelas traseiras da escola. Cada diagonal é

constituída por três janelas, havendo, assim, uma janela pequena no canto inferior,

seguida de 8 diagonais de janelas pequenas. Na nona diagonal, a janela inferior é

grande, existindo uma diagonal seguinte de janelas igualmente grandes; para além

disso, constata-se também a existência de uma terceira diagonal com duas janelas

pequenas e uma terceira grande e, por último, uma diagonal com uma janela pequena,

uma grande e, a última delas, igualmente pequena.

De seguida, há quinze diagonais de janelas pequenas e, na décima sexta, repete-se a

sequência das janelas grandes. Surgem, novamente, quinze diagonais de janelas

pequenas e volta-se a repetir a sequência das grandes. Para finalizar, existem mais 10

diagonais de janelas pequenas.

Page 19: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

19

Imagem 19: Janelas Traseiras – 3D

Imagem 17: Janelas Traseiras

Imagem 18: Janelas Traseiras - Aproximadas

A imagem 19 retrata as imagens 17 e 18. Estas janelas partiram de cubos. No primeiro

cubo foi alterado o seu tamanho, com a ferramenta Scale (tecla S). De seguida, foram

feitos vários Extrudes (tecla E - faz uma extrusão) e vários Inserts (tecla i – faz uma

espécie de moldura à volta da face) para fazer o contorno final.

Para finalizar, esse cubo foi duplicado e ordenado de uma forma sequencial, o que

permitiu, assim, obter esse aspeto final.

Page 20: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

20

Imagem 20: Porta Principal - 3D

Imagem 21: Porta Principal - Fora

Imagem 22: Porta Principal (Vista Wireframe)

Imagem 23: Porta Principal - Dentro

As imagens 20, 21, 22 e 23 mostram a porta principal. As imagens 20 e 22 (

representam a vista wireframe) – a qual permite visualizar o objeto por dentro no

software blender; por último as imagens 21 e 23 representam as fotos reais.

Page 21: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

21

Imagem 24: Banco Exterior - 3D

Imagem 25: Banco Exterior - Foto

Imagem 26: Banco Exterior - 3D (Aproximado)

Imagem 27: Banco Exterior - Foto

Nas imagens acima representadas (24, 25, 25 e 27), encontra-se um dos bancos da

varanda lateral.

Para fazer este banco foi preciso um cubo, o qual foi transformado em paralelepípedo,

com ajuda da ferramenta Scale. Depois disso, esse paralelepípedo foi copiado duas

vezes, visto que o banco é constituído por três tábuas. Nos três paralelepípedos foram

feitos uns arredondamentos nas arestas, com ajuda da ferramenta Bevel (atalho:

ctrl+b). As pernas do banco foram feitas do mesmo modo que as tábuas superiores,

usando a ferramenta Scale. Os parafusos partiram de um cilindro que foi reduzido e na

face superior foi feito um Extrude, tendo sido utilizada a ferramenta Scale para se

reduzir a sua face, para finalizar, fez-se novamente, um Extrude e arrastou-se a face

para a parte inferior do objeto, de modo a obter-se um furo.

Page 22: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

22

Imagem 30: Balde do lixo - 3D

Imagem 28: Balde do lixo - 3D

Imagem 29: Balde do lixo - Foto

As imagens 28, 29 e 30 mostram o balde do lixo da varanda lateral.

Neste balde, o objeto inicial foi um cilindro, para fazer os seus contornos foi usada a

ferramenta LoopCut (ctrl+R), que cria um conjunto de arestas à volta do cilindro, a

partir do qual se criaram três conjuntos de arestas, tendo o conjunto do meio sido

aumentado com a ferramenta Scale. Para as pegas e o pedal do balde, partiu-se de

cilindros e com a ajuda da ferramenta de rotação (tecla R) conseguiu-se obter o

desejado.

Imagem 31: Pavimento da Varanda Lateral - 3D

Imagem 32: Pavimento da Varanda Lateral

Page 23: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

23

O pavimento da Varanda Lateral (imagens 31, 32, 33 e 34) partiu de um cubo que foi

achatado e encolhido em relação à sua largura, formando assim uma espécie de tábua;

nas arestas superiores fez-se um Bevel (ctrl+b), para obter uns cantos mais

arredondados e na sua face superior acrescentaram-se várias arestas, que foram

embutidas no objecto, o qual duplicado várias vezes e colocado de uma forma

sequencial.

As imagens 35, 36, 37 e 38 mostram o produto final da Varanda Lateral.

Imagem 33: Pavimento da Varanda Lateral - 3D

Imagem 34: Pavimento da Varanda Lateral

Imagem 35: Varanda Lateral - 3D

Imagem 36: Varanda Lateral - Foto

Imagem 37: Varanda Lateral - 3D

Imagem 38: Varanda Lateral - Foto

Page 24: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

24

Imagem 39: Número de Janelas Frontais

Na imagem 39 encontra-se a sequência das janelas frontais da escola. Cada “fila” é

constituída por duas janelas (uma pequena em cima e uma grande em baixo).

Começando assim pelo lado esquerdo da parte frontal, existem oito filas com catorze

janelas, visto que duas filas têm uma porta; de seguida, existem mais doze filas com

vinte e quatro janelas, um espaço, oito filas com dezasseis e um espaço (acontecendo

isso onze vezes), dezasseis filas com trinta e duas janelas seguidas de um espaço, duas

filas com quatro janelas, quatro janelas pequenas por cima da porta principal e mais

cinco filas com dez janelas. Num total de 135 filas e 264 janelas.

Imagem 40: Vista Frontal

Imagem 41: Entrada Principal

Page 25: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

25

Imagem 42: Janelas Frontais - 3D

Imagem 43:Janelas Frontais - Foto

Imagem 44:Janelas Frontais - 3D

Imagem 45:Janelas Frontais - Foto

As imagens 42, 43, 44 e 45 mostram as janelas frontais da ESAN, tanto em 3D como na

realidade. Para as realizar, foi necessário partir de um cubo, foi feito um Scale no eixo

do Y e do Z e de seguida, foi usada a ferramenta Insert, para fazer as borrachas que

estão a isolar as janelas.

Imagem 46: Escada para o estacionamento- 3D

Imagem 47: Escada para o estacionamento

Imagem 48: Escada para o estacionamento- 3D

Imagem 49: Escada para o estacionamento

As imagens 46, 47, 48 e 49 mostram as escadas de acesso ao estacionamento. Para as

modelar, foram necessários bastantes cubos. As janelas são iguais às janelas traseiras,

portanto foram copiadas e o corrimão, também foi copiado a partir das escadas

frontais.

Page 26: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

26

Esta parte da escola contém duas portas. As escadas também partiram de cubos, os

quais foram espalmados com as técnicas já referidas anteriormente.

Imagem 50: Planta 2D

Imagem 51: Divisões no Blender

Imagem 52: Divisões no Blender

Nas imagens 50, 51 e 52 estão todas as divisões já com as devidas medidas. A planta

2D já tinha sido medida anteriormente, por isso esta fase foi bastante simples, foi

utilizada a ferramenta Ruler (régua).

Page 27: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

27

Imagem 53: Cenário Exterior

Imagem 54: Estacionamento

Na imagem 53 está representado o cenário exterior e na imagem 54 o

estacionamento.

Para fazer as montanhas do cenário partiu-se de um plano subdividido em imensas

faces e com a ajuda da ferramenta Proportional Edit (ferramenta que arrasta os

vértices à volta do vértice selecionado - tecla O) foram elevados alguns vértices. As

árvores são pré-definidas do blender, apenas foi escolhida a opção Sapling no menu

User Preferences. Para a colocar foi preciso pressionar o atalho Shift + A, selecionar a

opção Curve e escolher Add Tree.

Imagem 55: Rodapé - 3D

Imagem 56: Rodapé

As imagens 55 e 56 mostram o rodapé que está colocado em todas as paredes da

escola. As técnicas para o fazer já foram referidas anteriormente.

Page 28: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

28

Imagem 57: Computador

Imagem 58: Computador - 3D

As imagens 57 e 58 mostram o computador e a nove zonas dele.

O monitor, o rato e a torre foram feitos com técnicas já anteriormente explicitadas.

Para o teclado partiu-se de um cubo cujo comprimento foi ampliado. Para o efeito, foi

usada uma foto de um teclado por baixo. Este paralelepípedo foi dividido em nove

partes, consoante as zonas do teclado. Depois, fez-se apenas uma tecla e com o

modificador Array (duplica o objeto as vezes que o utilizador quiser), duplicaram-se as

teclas.

A imagem 60 mostra o auditório modelado.

Imagem 59: Auditório

Imagem 60: Auditório - 3D

Page 29: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

29

Criação da planta 3D (Texturização)

Imagem 61: Varanda Lateral Modelada

Imagem 62: Varanda Lateral Texturizada

E foi aqui, na varanda lateral, que começou a ser feita a texturização dos objetos.

Para texturizar os objetos, foi criado um novo material ao qual foi adicionado um

material ou uma textura, dependendo do tipo de material de que cada objeto é feito.

Por exemplo, para as mesas foi adicionado um material com uma cor sólida e na face

superior foi usada uma textura, à qual se adicionou uma imagem da mesma, fazendo-

se, posteriormente, um Unwrap (processo de desdobramento do objeto).

Imagem 63: Textura da Mesa

Page 30: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

30

Imagem 64: Cadeira com rodas

Imagem 65: Cadeira da Biblioteca

Imagem 66: Cadeira dos Gabinetes

Imagem 67: Cadeira dos Gabinetes

Para a texturização destas cadeiras, usou-se as seguintes texturas:

Imagem 68: Textura da Cadeira (Almofada)

Imagem 69: Textura de Madeira

Imagem 70: Livros

Imagem 71: Livro

Nos livros foi usada apenas uma textura e dois materiais de cor sólida.

Page 31: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

31

Imagem 72: Textura para as páginas

Imagem 73: Auditório

Imagem 74: Auditório Texturizado

No auditório foram usadas duas texturas já utilizadas anteriormente (imagem 68 e 69).

Imagem 75: Escola Texturizada

A escola tem imensos materiais de cor sólida mas também muitas texturas.

Page 32: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

32

Aqui ficam as texturas utilizadas:

Imagem 76: Textura de Terra

Imagem 77: Textura de Granito

Imagem 78: Textura de Relva

Imagem 79: Textura de Água

Page 33: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

33

4. Criação da Newsletter A newsletter foi criada no Wordpress com o plugin “The Newsletter Plugin” e integrada

no blog (feito pelo colega). Este plugin é bastante intuitivo, pois tem temas pré-

definidos e podem ser facilmente seleccionados os posts a inserir na newsletter.

Imagem 80: Temas Pré-Definidos

Foi selecionado o tema “Theme-1”, o mais indicado para este tipo de informação.

Imagem 81: Inserir os Posts

De seguida, foi necessário criar-se uma categoria e assim inserir os posts; ao criar a

newsletter seleccionou-se a categoria e os últimos posts inseridos.

Imagem 82: Layout Inicial da Newsletter

Na configuração do SMTP (protocolo padrão para envio de e-mails através da Internet)

ocorreram alguns problemas:

Page 34: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

34

Imagem 87: Legenda por Cores

5. Planta Interativa O primeiro passo nesta fase foi vetorizar a planta bidimensional no software Inkscape

(presente nos anexos).

O segundo passo foi identificar todos os compartimentos (editado no GIMP):

Imagem 83: Nome dos Compartimentos

O terceiro passo foi pintar por cores as várias zonas da ESAN salientando o

compartimento em questão e desenhando o caminho até ao ponto. Como, por

exemplo, os gabinetes.

Imagem 84: Gabinete 1

Imagem 85: Gabinete 2

Imagem 86: Gabinete 3

Foi feita também uma legenda para as pessoas entenderem quais as cores associadas a

cada uma das zonas.

Page 35: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

35

Implementação da Planta

No Adobe Director foi produzida a planta interativa.

Imagem 88: Layout do Programa

Para implementar foi necessário importar a planta vetorizada e todas as imagens dos

compartimentos pintados (imagem 82, 83, 84).

Imagem 89: Grelha de Frames

Assim, as imagens foram arrastadas para a grelha de frames.

Os passos para implementar cada divisão foram os seguintes:

Criar um retângulo invisível em cima do compartimento;

Criar um Behavior e introduzir o código (

on mouseUp()

play frame "exemplo"

end mouseUp)

Criar uma marca com um nome (por exemplo "exemplo") para onde a play

frame do código (passo anterior), ao clicar, posicionar-se e reproduzir a partir

da marca "exemplo";

Criar uma pausa a cada final da reprodução da marca para as pessoas

escolherem outro compartimento.

E todos estes passos foram feitos para todas as divisões.

Page 36: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

36

Making Of

Foi feito um vídeo onde mostra um pouco do trabalho desenvolvido ao longo do

tempo.

O vídeo mostra não só as pessoas a trabalharem no projecto, como também umas

capturas de ecrã.

Imagem 90: Introdução do Vídeo

Imagem 91: Introdução à Etapa

A imagem 88 mostra a parte inicial do vídeo. Os textos “ESAN Digital” e “Prova de

Aptidão Profissional” vão surgindo, fazendo um ligeiro zoom. O texto “Making Of”

surge fazendo o efeito de digitalização.

A seguir a introdução surge, também, num pequeno zoom, mostrando as várias etapas

do projeto.

Imagem 92: Trabalhar no Projeto

Imagem 93: Captura de Ecrã

Ao longo do vídeo aparece a pessoa a trabalhar no projeto (imagem 90) e algumas

capturas de ecrã (imagem 91) feitas ao longo do tempo.

Page 37: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

37

Blog de Acompanhamento

Foi também realizado, um blog em Wordpress com o endereço

https://papadelaide.wordpress.com/ para mostrar as tarefas desenvolvidas ao longo

do tempo.

Imagem 94: Página Inicial

A página inicial tem um menu horizontal com as páginas “Etapas”, “Projeto”, “ESAN” e

“Acerca de mim” e com cinco widgets (um componente de uma interface gráfica do

utilizador).

Page 38: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

38

Conclusão

A Prova de Aptidão Profissional é o projeto mais importante de todo o curso, pois

permite mostrar as várias capacidades e conhecimentos adquiridos ao longo dos três

anos. É o reflexo de quase todas as aprendizagens conseguidas ao longo do curso.

Para conseguir concluir este projeto foi necessária imensa persistência, dedicação e

capacidade de autonomia, desenvolvidas à medida que o mesmo foi executado.

Naturalmente que no decorrer da realização da PAP, existiram dificuldades, que só

puderam ser ultrapassadas com o trabalho, dedicação e o apoio das pessoas

envolvidas.

Este projecto foi uma mais valia, na medida em que foram adquiridas bastantes

competências profissionais e, também, pessoais.

É considerado pertinente o melhoramento e a continuação deste projeto já que o

mesmo possibilita a expansão.

Page 39: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

39

Bibliografia

(s.d.). Fonte: Youtube: https://www.youtube.com/watch?v=4Ds4tcQcLkE

(s.d.). Fonte: Wikipédia: https://pt.wikipedia.org/wiki/Boletim_informativo

(s.d.). Fonte: Escola WP: http://www.escolawp.com/2011/02/os-10-melhores-plugins-

de-newsletter-para-wordpress/

(s.d.). Fonte: Wordpress: https://wordpress.org/plugins/newsletter

(s.d.). Fonte: Youtube: https://www.youtube.com/watch?v=JaxK7XwqvVI

(s.d.). Fonte: Youtube: https://www.youtube.com/watch?v=0-F-AvFwSkU

(s.d.). Fonte: Tribulant: https://www.tribulant.com/docs/wordpress-mailing-list-

plugin/1603

(s.d.). Fonte: Youtube: https://www.youtube.com/watch?v=2J_zYdl3SCY

(s.d.). Fonte: Youtube: https://www.youtube.com/watch?v=ZZPfkzEaJaQ

Aplicar as Texturas. (s.d.). Fonte: Youtube:

https://www.youtube.com/watch?v=KzciOR7EPgQ

Teclas de Atalho. (s.d.). Fonte: Blender Total:

https://blendertotal.wordpress.com/2007/07/10/teclas-de-atalho/

Tutorial - Blender - Árvore. (s.d.). Fonte: Youtube:

https://www.youtube.com/watch?v=fH4bRHHlh8k

Tutorial - Materiais - Blender. (s.d.). Fonte: Youtube:

https://www.youtube.com/watch?v=4UpAaGa25Ug

Page 40: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

40

Anexos

Fotos recolhidas

Imagem 95: Auditório

Imagem 96: Secretaria

Imagem 97: Suportes

Imagem 98: Cantina

Imagem 99: Janelas Traseiras

Imagem 100: Cantina

Imagem 101: Sala de Aula

Imagem 102: Janelas Frontais

Page 41: Curso Profissional de Técnico de Multimédia Prova de ... · Durante a primeira fase, foi feita a medição da planta 2D no software GIMP. Imagem 1: Planta 2D no software Gimp Imagem

PAP

Adelaide Coutinho

2015/2016

41

Imagem 103: Sala de Aula

Imagem 104: Laboratório

Imagem 105: Laboratório

Imagem 106: Laboratório

Planta Vetorizada