Trabalho Final de Semestre - 2010.2

Para o desenvolvimento do material educacional digital "Aprendendo a Ajudar", a equipe se reuniu diversas vezes para definir um projeto a seguir no momento de começar a etapa de implementação e criação do produto. Nesta primeira fase de desenvolvimento, foram produzidos o roteiro e o design pedagógico do material. Logo em seguida, deu-se início a fase de codificação e criação de mídias do objeto educacional, o qual teve como última fase de processo o desenvolvimento do site que disponibilizaria a documentação do material.

O maior desafio encontrado pela equipe foi o prazo estabelecido para a entrega do trabalho. Devido a este fator, foram necessários algumas modificações na ideia original e a divisão de tarefas entre os integrantes do grupo. Cada um ficou responsabilizado por uma área (projeto, programação e arte), o que não significa que não houve uma troca de conhecimentos, pois todos ajudaram em todas as etapas, cada um liderando na que melhor se destacava.

Para a criação artística dos elementos aplicados no material, utilizamos os conceitos de composição visual, harmonia cromática e tipografia estudados nas disciplinas Comunicação Visual e Meios de Representação Gráfica. As cores, a disposição dos elementos e o texto criaram, em conjunto, uma interface muito bem elaborada e harmoniosa, contrastante e equilibrada, que no final consegue elevar o interesse do usuário pelo material e passar a mensagem proposta pelas atividades.

Link para o material produzido: http://megaswf.com/serve/82850/

Cores

A harmonia cromática é gerada através de cores que funcionam bem em conjunto e que produzem um esquema de cores atrativo. O círculo cromático pode ser utilizado de forma a ajudar na escolha das cores e combinações harmônicas.

As três cores primárias são o amarelo, o vermelho e o azul. Da mistura destas obtêm-se todas as cores restantes, dentre as quais estão as chamadas cores secundárias: o verde (amarelo + azul), o laranja (amarelo + vermelho) e o violeta (azul + vermelho).

Existem diversos tipos de harmonias cromáticas que podem ser alcançadas ao aplicar-se diferentes técnicas de combinação de cores. Harmonias análogas, complementares, monocromáticas e triádicas são bastante utilizadas. Existem outros tipos como a harmonia dupla complementar, a do complemento dividido e a acromática.

Esta pesquisa foi baseada nos textos dos endereços eletrônicos:

http://www.mundocor.com.br/cores/circulocromatico.asp

http://www.amopintar.com/harmonia-das-cores

Exemplo de uma harmonia cromática pouco colorida e muito bem esquematizada:

http://remembersegregation.org/

E um exemplo de um site bastante colorido e harmonioso:

http://bebopjeans.com/

Criação de tipografia

Minha fonte criada numa temática de "terror" e "assustador". Criei este convite para uma festa de halloween para exemplificar o uso desta fonte decorativa.

Família Tipográfica Scary Souza:

Convite:

Capítulo 9 - Categoria de Tipos

O capítulo nove do livro "Design para quem não é designer" mostra seis categorias de tipos: antigo, moderno, serifa grossa, sem serifa, manuscrito e decorativo. A escolha da fonte também faz parte do desenvolvimento de um produto, devido ao texto também possuir uma mensagem visual. Conhecer essas seis categorias ajuda na decisão de qual tipo devemos usar no texto para que este fique coerente com o contexto em que está inserido.

O estilo antigo possui serifas, inclinadas quando em caixa baixa, transição grosso-fino moderada e ênfase diagonal. Este estilo é usado em textos muito longos, pois possibilita uma leitura flúida. Já os tipos modernos possuem serifas horizontais e muito finas, transição grosso-fino radical e ênfase vertical, e por isso são inapropriados para grande extensão de texto corrido. Tipos com serifa grossa possuem pouca ou nenhuma transição grosso-fino e ênfase vertical. Por possuir um grau elevado de legibilidade e estética clara e direta, costumam ser usados em livros infantis.

Os tipos sem serifa não possuem ênfase por não haver diferenciação grosso-fino, e são usados para criar páginas interessantes que chamam a atenção dos leitores. Já as fontes da categoria manuscrito reúnem todos os tipos que parecem ser escritos à mão. Elas não devem ser utilizadas em longos blocos de texto e nem com todas as letras em caixa-alta, mas podem assumir ótimas características quando utilizados em enorme tamanho. Por fim, tipos decorativos são utilizados para passar alguma mensagem de forma clara e direta por causa do seu visual. Com criatividade, podem ser manipulados para que suas conotações sejam muito diferentes da primeira impressão, e por serem tão diferenciados, seu uso deve ser limitado.

Tipografia - 2

Fonte: Bookman

A fonte Bookman (ou Bookman Old Style) é um tipo serifado derivado da fonte Old Style Antique, desenvolvida como uma alternativa para o tipo Caslon. Esta fonte possui serifas mais retas, tornando-a mais apropriada para livros e aplicações em displays, possui boa legibilidade em caixa baixa, e é ótima para ser usada em manchetes e publicidade.

Imagens tiradas de:

http://www.uk-sign-maker.net/sand-carved.htm

http://www.zazzle.com.br/mim_estilo_antigo_do_estudioso_do_coracao_boton-145512497757094859

Tipografia - 1

Fonte: Myriad

Myriad é um fonte sem serifa, desenvolvida por Robert Slimbach e Carol Twombly para a Adobe Systems. Ela é bastante conhecida por ser a fonte corporativa usada pela empresa Apple desde 2002. Myriad se distingui de outras fontes sem serifa pela cauda descedente da letra "y" e pelo corte inclinado da letra "e". Esta fonte possui diversas variações, como Myriad Web e Myriad Wild, além de ter servido como base para a adaptação que foi feita da fonte japonesa Kozuka Gothic para o alfabeto latino.

Imagens tiradas de:

http://forums.macrumors.com/showthread.php?t=266825

http://blog.gauravgiri.com/tag/font/

Poster do Digital Storytelling

Fonte da foto: http://www.trekearth.com/gallery/photo829244.htm

Digital Storytelling - Prova

Storyboard:

https://docs0.google.com/document/edit?id=16L_Z03iH1gYknffHE3dkNAFl7lsvtvKPbuKPuXzCw8I&authkey=CJLS64YI&hl=en#

Após algumas discussões de ideias, todos os componentes do grupo optaram por fazer uma história sobre um momento na vida de um personagem fictício. Decidimos então que falaríamos sobre um surfista que encontrou o amor de sua vida de uma maneira que ele não esperava: ao tentar se exibir surfando, acabou caindo da prancha e por causa disso acabou conhecendo a garota de sua vida. Logo após decidirmos a ideia, começamos o desenvolvimento dos elementos do vídeo.

Primeiramente escrevemos o texto de acordo com o brainstorming feito para decidir o tema da história. Escolhemos uma música para tocar durante o vídeo que se integrasse harmoniosamente com o tema do surf e do amor. Logo depois começamos a gravação da narração do texto, assim como a pesquisa por fotos para representar coerentemente cada cena que já estava escrita.

As técnicas mais utilizadas no nosso vídeo foram relacionadas a equilíbrio/desequilíbrio, cores, simplicidade, repetição e sequencialidade. O vídeo pode ser resumido a uma sequencia de fotos que mostram repetidamente os mesmos elementos em sua composição: o nosso personagem bem centralizado em uma imagem bem equilibrada, buscando a simplicidade da composição visual da imagem que sempre trata de um tema surfista. É evidente que o vídeo não obedece em sua totalidade a esse resumo, pois foram utilizadas algumas fotos desequilibradas para colocar elementos de maior importância visual em destaque, assim como a repetição de algumas fotos com pequenas alterações, tirando suas cores para retratar o momento em que o personagem está se referindo à sua memória.

Princípios de Design Gráfico

Proximidade: http://www.isabelacapeto.com.br/

No site da estilista Isabela Capeto, para aproximar elementos similares existem ícones em formas de lâmpadas para cada grupo de assunto, o que garante uma fácil navegação. Isso auxilia na organização das informações, o que por sua vez facilita a leitura.

Alinhamento: http://honeyz818.files.wordpress.com/2007/01/little-miss-sunshine.jpg

Nesse cartaz do filme "Little Miss Sunshine" temos um exemplo de alinhamento de redação e figura. Isso cria uma aparência limpa, sofisticada e suave.

Repetição: http://pt.trekearth.com/gallery/Europe/France////photo1248656.htm

Nesta imagem, nota-se a repetição usada nas formas, cores e elementos, o que acaba criando uma organização e um fortalecimento da unidade.

Contraste: http://www.trekearth.com/gallery/South_America/Brazil/Southeast/Sao_Paulo/Sao_Paulo/photo300784.htm

Nessa fotografia, existe um contraste entre as cores do jardim e das flores, assim como também existe um contraste de escala, com as flores em primeiro plano e desfocadas, e a escultura e o jardim em segundo plano.

Trabalho de 1 ponto

Aqui está o digital storytelling que vale 1 ponto:

Link para o storyboard: https://docs.google.com/fileview?id=0B4oFePkbWS8QNmNiZTcyZGYtNDRjYS00OGYyLTk2MGYtYzk0NTUzNjQwZDg2&hl=en&authkey=CMz2itQJ

Equilíbrio e desequilíbrio

Imagem em desequilíbrio

O desequilíbrio na imagem é claro: se traçarmos o eixo vertical e horizontal no desenho, nota-se que o lado direito chama mais atenção. Se a árvore que se encontra à esquerda fosse retirada, o desequilíbrio seria ainda maior, pois seria ainda mais difícil de perceber o menino. Este recurso foi utilizado para fazer uma referência ao tamanho da monstruosidade da casa em relação ao indefeso e pequeno garoto.

Imagem em equilíbrio

O equilíbrio pode ser verificado na imagem como um todo: nosso olhar não é atraído em demasia para nenhum dos lados. Há um efeito ordenado e organizado de peso/contrapeso se traçarmos o eixo vertical e horizontal no desenho. As cores utilizadas também estão bem equilibradas: mesmo os noivos tendo cores diferentes para representar o noivo vivo e a noiva morta, a imagem é composta por cores pouco saturadas e utilizando um tom mais escuro, passando uma mensagem de sutileza e repouso, como se quisesse mostrar a beleza e a paz do sombrio.

Logo - "Lixoteca"

A imagem do logo retrata três informações distintas que, em conjunto, representam a Biblioteca Comunitária que surgiu a partir da reciclagem: o livro, as pessoas e o símbolo da reciclagem. A imagem conjunta, o logo em si, está bem equilibrada e nivelada.
A forma triangular do símbolo da reciclagem remete a idéia de ação, e as setas do mesmo símbolo, com forças direcionais curvas, remetem à uma idéia de movimento contínuo e repetição. As cores das pessoas retratam a informação de uma sociedade unida, de uma comunidade. E o livro, por estar em uma escala maior, retrata o que é mais importante na biblioteca, e de maneira figurada, o que é mais importante para a comunidade: educação.

Uma ilusão bacana

O vídeo começa com diversas velas acesas, colocadas em posições que aparentemente não formam nenhuma figura. Mas, ao mover a câmera para um novo ângulo, tem-se a ilusão de que as velas formam um cubo.

Fotos

Cor escolhida - Vermelho

Imagem

Não existe nenhuma razão especial da escolha desta imagem. Eu estava procurando algo abstrato na internet, e esta simplesmente me chamou a atenção pois quando olhei para ela, comecei a imaginar uma sequencia de cenas da qual esta imagem pudesse fazer parte. Ela me passa uma sensação de solidão e inquietação, e creio que esta mensagem se dá pelo uso das sombras e da figura sozinha do garoto no meio de um ambiente com cores que lembram um cidade deserta após uma grande catástrofe (a imaginação foi looonge, talvez até demais). Enfim, é isso.

Reflexão do artigo: Leitura de imagens, cultura visual e prática educativa

Após a leitura do artigo, pude notar como a experiência de educar visualmente qualquer indivíduo pode ser algo bastante complicado. Além dos conceitos mais voltados para o lado "técnico" das imagens, como luminosidade e espaço, o educando deve conhecer também as diversas reflexões que podem ser geradas a partir do entendimento individual de uma imagem. Assim como a experiência da aula de sexta-feira, os espectadores de uma imagem utilizam a sua memória para interpretar alguma imagem. Desse modo, a mensagem de um artefato visual pode variar de acordo com diferenças históricas, culturais e sociais entre diferentes povos.

Acho que este artigo foi bastante importante para uma introdução à disciplina de Comunicação Visual, pois ele nos mostra a "base" da área. Creio que um trecho que será vivenciado por todos nós é a parte do artigo que fala que "as/os educandas/os tomam consciência de que as imagens e os objetos portam significados e começam a se interessar por sua interpretação, procurando sugerir significados em suas próprias produções".

Resultado final

Após esse longo trabalho, finalmente a capa do jogo Lunar Gates está pronta:



Enjoy com moderação ;D (ou não rsrsrs)

Making of

1º passo: Foto do fundo - A foto foi gerada a partir da foto "Açude". Após duplicar o fundo, usei a ferramenta Clone Stamp para copiar a parte escura das árvores por cima de todos os elementos "artificiais" que apareciam na parte da foto entre a água e o céu, eliminando os prédios e as luzes que não eram da lua. Em seguida, utilizando a ferramenta Rectangular Marquee, eu selecionei a área preenchida pela água, e depois aumentei esta área de modo que a água preenchesse toda a parte inferior da foto. Logo após, utilizando novamente a ferramenta Clone Stamp, eu copiei partes da água para cobrir os reflexos que não eram da luz da lua, e em seguida, utilizando a ferramenta Spot Healing Brush, tentei disfarçar o uso da ferramenta Clone Stamp. Depois, utilizando a ferramenta Pucker do filtro Liquify, eu modifiquei a parte clonada das árvores para transformá-las em montanhas, já que a cor escura da clonagem não deixa claro que se trata de árvores, podendo ser confundidas com montanhas. Por fim, utilizei a ferramenta Eyedropper para escolher a cor necessária para pequenos ajustes, e em conjunto com a ferramente Brush pintei algumas pequenas "falhas" provenientes do uso da ferramenta Clone Stamp na parte escura das árvores, já que nesta parte eu não havia aplicado a ferramenta Spot Healing Brush. Por fim, apliquei o filtro Halftone Pattern com cores que, na minha opnião, melhor se encaixavam para dar efeito de luz da lua e escuridão.

2º passo: Elementos adicionais - Para copiar o nome da empresa, o nome do estúdio de criação e o ano em que foi criado (SEGA/OVERWORKS, 2000), utilizei a ferramenta Rectangular Marquee ao redor dos nomes na foto "Capa_01", e depois com a ferramenta Magic Wand fui eliminando todo o fundo da foto, para que ficasse selecionado apenas as letras e os números. Com o comando Copy (Ctrl+C) e Paste (Ctrl+V) passei os nomes para a foto deofundo, que a partir de agora será a foto final (capa). Mudei as dimensões do nome para que ficasse de um tamanho proporcional à capa e, como ao utilizar o comando Paste o Photoshop criou uma nova camada e a seleção dos nomes não ficou apenas nas letras mas sim um "novo retângulo", utilizei novamente a ferramenta Magic Wand para selecionar mais uma vez apenas as letras e os números. A seguir, com a ferramenta Brush, pintei os nomes e o ano de branco. Em seguida, utilizei a ferramenta Quick Selection na foto "Capa_02" para selecionar a borda "Dreamcast". Com os comandos Copy e Paste copiei a seleção para a capa, e então mudei suas dimensões para ajustá-la as dimensões da capa. Utilizei o mesmo processo de cópia da borda "Dreamcast" para a cópia do selo da "ESRB". Com a ferramenta Quick Selection, selecionei mais uma vez a borda "Dreamcast", desta vez na capa, para ajustar algumas "falhas". Com a borda inteira selecionada, utilizei a ferramenta Magic Wand para "desselecionar" a palavra "Dreamcast" e o símbolo do console, e depois pintei com a ferramenta Brush tudo que estava selecionado de preto; para eliminar algumas cores que estavam na lateral direita da borda, utilizei a ferramenta Burn até as cores ficarem pretas; e com a ferramenta Eliptical Marquee selecionei uma parte da borda e deletei a seleção para a linha da borda ficar mais reta. Por fim, criei uma camada de texto com a fonte "Arial Black" de cor branca para colocar o número abaixo do selo da "ESBR", redimensionando para que ficasse proporcional ao selo.

3º passo: Título - Para colocar o título na foto, criei duas camadas de texto na capa utilizando a fonte "Birth of a Hero": "Lunar" e "Gates". Em seguida, alterei as dimensões dos textos para largura e altura igual a 450, e logo após, utilizando Blending Options na camada Gates, apliquei os efeitos Gradient Overlay e Stroke. Depois copiei o layer style e colei na camada Lunar, alterando apenas o ângulo do Gradient Overlay para que nas duas camadas de texto o efeito desse a impressão de que a lua do fundo estava iluminando as palavras. Por fim, apliquei o filtro Wind nas duas camadas para dar mais efeito ao título, de modo que desse a mesma impressão que o Gradient Overlay dava (a de que o efeito fosse causado pela lua), e depois alterei um pouco as dimensões das palavras com a ajuda de algumas marcações e utilizando o modo Distort do Free Transform.

Obs_1: Após terminar o título, afastei o selo da "ESRB" e o número abaixo dele um pouco mais para a esquerda, e com a ferramente Crop recortei a imagem, eliminando um pequeno pedaço da parte esquerda da capa, para que a lua ficasse mais centralizada.
Obs_2: Para dar maior destaque a lua do fundo, copiei a lua da foto "Moon", depois a posicionei e a redimensionei de modo que se encaixasse com lua do fundo, e por fim mudei seu Blending Mode para Overlay.
Obs_3: Criei novos objetos para utilizar na imagem de fundo a partir do tutorial do link a seguir: http://www.photoshoplady.com/tutorial/light-beam/636. Ao copiar os objetos para a imagem de fundo, coloquei o Blending Mode de todos no modo Screen e e em todos apliquei o filtro Twirl.

4º Passo: Personagem 1 - Alternando entra as ferramentas Quick Selection, Magic Wand, Magnetic Lasso e o modo Quick Mask, selecionei o corpo que será um dos personagens na imagem "Personagem_01". Copiei a seleção para uma nova camada, e a preenchi a camada Background com a cor preta. Utilizando o mesmo objeto que apliquei no fundo (o "cometa" do tutorial), apagando com a ferramenta Eraser a "cauda" do objeto e modificando a sua cor, copiei para o documento do primeiro personagem. Depois, fiz algumas alterações neste obejeto com o filtro Shear. Em seguida, copiei, novamente do documento do objeto "cometa", apenas as camadas com os raios menores e suas partículas, e com o filtro Shear fiz novas mudanças. Depois fiz alguma mudanças com o Color Overlay no Blending Mode da camada com os "raios menores" e as partículas. Adiante selecionei a blusa branca com a ferramenta Magic Wand, e fiz mudanças ajustando o Color Balance e Brightness/Contrast. Com a ferramenta Quick Selection, selecionei o cabelo, e mais uma vez ajustei o Color Balance e Brightness/Contrast para realizar algumas mudanças. Juntei todas as camadas com Merge Visible, e com a ferramenta Magic Wand fui selecionando diversas vezes o que tinha de preto no fundo da imagem, depois inverti a seleção, copiei e colei na capa. Por fim, fiz alguns ajustes utilizando o Hue/Saturation e apliquei Outer Glow no seu Blending Mode.

5º Passo: Personagem 2 - Trabalhando com a imagem "Personagem_02", primeiro dupliquei a camada Background, espelhei horizontalmente a camada duplicada, e preenchi a camada Background com a cor preta. Com as ferramentas Quick Selection, Magic Wand e o modo Quick Mask selecionei o corpo que será o segundo personagem. Inverti a seleção e deletei o fundo da camada duplicada. Depois selecionei a blusa branca com a ferramenta Magic Wand, e fiz mudanças ajustando o Color Balance e Brightness/Contrast. Com a ferramenta Quick Selection, selecionei o cabelo, e mais uma vez ajustei o Color Balance e Brightness/Contrast para realizar algumas mudanças. Depois, apliquei Outer Glow no Blending Mode. Copiei o objeto "cometa" com algumas alterações nas suas dimensões e na sua cor, e depois apliquei o filtro Twirl. Juntei tudo com Merge Visible, selecionei tudo, e com a varinha mágica fui tirando as partes preta do fundo da foto. Copiei o personagem que estava selecionado e colei na capa, e para finalizar ajustei um pouco o Brightness/Contrast.

Elementos básicos

Moon:

Personagem_02:

Personagem_01:



Capa_02:



Capa_01:



Açude:

Base conceitual para criação do jogo Lunar Gates

Para criar a capa de um jogo eletrônico para ser avaliado nesta primeira verificação parcial da disciplina de Edição de Imagens Digitais, me inspirei no jogo Skies of Arcadia. Alguns anos atrás tive a oportunidade de jogar este jogo que muito me impressionou, e uma de suas características que mais me chamou a atenção foi o seu enredo, o qual me admirou muito. Com a chance de me inspirar neste enredo é que eu resolvi criar esta capa. Não optei por fazer simplesmente uma cópia da capa, ao invés disso, resolvi fazer uma capa de um novo jogo, inspirado em lembranças de momentos específicos da história do jogo e também de algumas características dos personagens. Para quem se interessar e quiser saber um pouco mais sobre o jogo, achei este blog:
http://www.retroplayers.com.br/?p=4023, onde o jogo é analisado pelos seus prós e contras. Como não achei imagens das exatas cenas em que me inspirei, estou postando aqui os links de dois vídeos do jogo que encontrei no youtube, com cenas semelhantes às que me inspiraram:

http://www.youtube.com/watch?v=ZSCQ5FAMrys
http://www.youtube.com/watch?v=m9P5j1pP3RM
Abaixo está o que seria uma "mini-sinopse" do jogo Lunar Gates:

"O mundo de Arcdi é movido pela magia. Todos as pessoas consumem de alguma maneira recursos mágicos, e com a facilidade que estes trouxeram para a resolução de tarefas, a população de Arcdi se habituou a consumir fontes mágicas sem se preocupar com possíveis consequências. Agora, o que todos temiam está se acontecendo: as fontes mágicas conhecidas estão se tornando escassas, gerando guerras e corridas atrás de novas fontes de poder. Para salvar o mundo do caos, todos só conseguem pensar na mesma soluçao: explorar as ruínas conhecidas como Lunar Gates, construídas por uma antiga civilização que conhecia os segredos da magia e a conexão desta com a lua. Sua missão é descobrir como estes segredos podem ajudar a salvar o povo do caos, mas nada garante que não haverá outras pessoas com motivos contraditórios aos seus atrás desses segredos também."

Considerações sobre a Aula Conjunta

A experiência da nossa primeira aula conjunta foi muito boa. As discussões, feitas a partir de diferentes pontos de vista, sobre os diversos trabalhos foram muito interessantes. Pudemos ver como um jogo, por exemplo, possui diversos pontos que podem ser analisados: como produzir um jogo, quais tecnologias utilizar nessa produção; qual a mensagem que esse jogo transmitirá para a sociedade, como unir o que é visto como lazer e diversão com o que é preciso ser visto com seriedade e responsabilidade; que técnicas artísticas usar para alcançar determinado fim proposto pelo jogo, quais técnicas podem ser usadas em conjunto para produzir em efeito melhor.

Além dos jogos, diversas outras mídias apresentadas, de trabalhos feitos por estudantes a produções feitas por profissionais, puderam ser analisadas por esses mesmos pontos e por vários outros discutidos na aula. O tema "Contrastes" foi ótimo para ser abordado nessa primeira aula conjunta, podendo professores e alunos discutirem, dentro do ponto de vista das disciplinas, sobre contrastes no cinema, nas técnicas utilizadas em vídeos e áudios, nos jogos, na sociedade e no mundo digital. Infelizmente não foi possível que todos os professores permanecessem até o final, mas não foi por isso que a aula deixou de ser uma ótima experiência para estudo e reflexão. Estou ansioso para assistir as próximas aulas conjuntas, e espero que o curso melhore cada vez mais.

Trabalhos em Flash [2]

Trabalhos em Flash

(sim, eu sei q esse fundo está tosco xD)

Efeitos especiais

Porco estiloso

Cor e sombra

Colorização

Restauração

Novo em folha

Mascaramento

Eita que coisa mais bonita
esses três brotos...