Comunicação Visual

Texto reflexivo sobre o trabalho final

O desenvolvimento do MED chronológica foi planejado para ser um material pedagogicamente adequado para o público alvo que decidimos, mas também um jogo visualmente bem construído e bem relacionado com o tema que escolhemos, que foi Grécia antiga, berço da lógica matemática, assunto abordado no MED.

As cores utilizadas para construir a identidade visual do jogo foram preto, laranja e preto. A escolha dessas cores deveu-se ao vasos antigos da Grécia, que eram pintados de preto e laranja. A fonte escolhida para o logotipo de jogo foi relacionada ao tema, já a utilizada nos textos foi uma fonte simples e sem serifa.

Durante o desenvolvimento, tivemos muitas dificuldades em conciliar alguns efeitos visuais com a parte de programação. Para resolvermos esses problemas tivemos que procurar por muitos tutoriais na internet e pedir ajuda aos professores, isso enriqueceu muito nosso trabalho e nos deixou mais aptos para o desenvolvimento de materiais futuros mais complexos.

Comunicação Visual

Harmonias Cromáticas

È importante para todo comunicador visual saber o significado de cada cor e as diferentes mensagens que as mesmas podem passar dependendo do contexto em que elas são utilizadas.

Na roda das cores há uma equidistancia entre as cores primárias; entre as cores secundárias e entre as terciárias, isto é, tem a mesma distancia entre elas.

Com a roda das cores pode-se fazer combinações que chamamos de harmonias cromáticas.

1. Monocromática

É a harmonia resultante de uma cor da roda das cores. As tonalidades podem mudar, mas todas ficam no mesmo matiz da roda das cores.

2. Análoga
É a harmonia formada de uma cor primária combinada com duas cores vizinhas a ela na roda das cores.

3. Complementar
É a harmonia que ocorre quando combinamos cores opostas na roda das cores. Muito comum nesse caso é a mistura do vermelho com verde, azul com amarelo.

4. Triadica
É a harmonia onde usamos três cores da roda das cores que tem a mesma distancia entre elas. Por exemplo azul, amarelo e vermelho. Esse tipo de combinação consegue dar um efeito visual muito atraente.

5. Complemento dividido
É a harmonia conseguida através da mistura de uma tonalidade da escala com as duas vizinhas da cor diretamente oposta a primeira. É caso de um arranjo com as cores amarelo,azul-violeta,vermelho-violeta.


6. Acromática
È a harmonia conseguida pela utilização de cores neutras, ou seja as cores situadas na zona central do círculo cromático, próximos ao centro deste, que perderam tanta saturação que não se aprecia nelas o matiz original.







Exemplos de sites que usam harmonias cromáticas.

http://negracor.com.br/home/

 http://novaoi.oi.com.br/portal/

Comunicação Visual

Cartaz feito utilizando a tipografia feita por mim. 

Apesar de utilizar apenas um caractere da fonte mostrada na postagem anterior, o destaque dado a este caractere é bem significativo no cartaz. A fonte sofreu uma pequena alteração, ela foi invertida horizontalmente, para melhor se adaptar desing da imagem.

Comunicação Visual

Tipografia

Aqui está a fonte criada por mim e batizada com o meu nome.

CAIXA ALTA

caixa baixa

Comunicação Visual

Famílias Tipográficas

Helvética

Helvética: foi desenvolvida por Max Miedingerem 1957 na Suíça. É uma fonte sem serifa bastante limpa e um dos princípios de seu projeto foi a máxima legibilidade. Ela não possui ligações culturais.

A Helvética possui versões Romana, Bold, Itálica, Bold e Itálica.

Essa fonte é muito famosa e é muito ultilizada em logotipos de muitas marcas conhecidas. Abaixo estão alguns exemplos.

Univers

Univers: a proposta era desenhar uma sans-serif para texto, portanto as principais preocupações de Frutigerem 1954 eram a legibilidade e a regularidade da mancha gráfica, independentemente da mistura de diferentes pesos ou mesmo da língua em questão. Tem grande apelo formal.

 

Durante a década de 1990, a família Univers foi redesenhada (otimizando a fonte mas mantendo a aparência original) ; a nova versão é conhecida como LinotypeUnivers(já que é comercializada pela empresa Linotype).

Comunicação Visual

StoryBoard

         

Comunicação Visual

A idéia foi fazer um vídeo que mostrasse um pouco da história do Campus do Pici. Primeiro foi feito uma pesquisa sobre a fundação da Universidade Federal do Ceará e como o Campus do Pici passou a fazer parte da Universidade. Depois de feita a pesquisa, foi feito um resumo do que seria relevante colocar no vídeo. Após feito o roteiro, o próximo passso foi a elaboração do storyboard. No Storyboard procuramos ilustrar o que apareceria em cada cena e a duração das mesmas.

O processo de criação das imagens foi feito dentro do próprio campus, sendo que algumas imagens foram pegadas da internet. As imagens foram feitas com uma câmera Sony DSC - W130. A edição das imagens, manipulação das cenas e a edição do àudio foram feitos no programa Adobe Premiere. A música ultilizada foi On The Rocks - Rita Lee. A pesquisa foi retirada dos seguintes sites: http://www.ufc.br/portal/ e  http://pt.wikipedia.org/wiki/P%C3%A1gina_principal .

As imagens foram feitas procurando mostrar nitidez e atividade. O posicionamento da câmera sempre vindo da lateral e mostrando o ambiente foi uma das técnicas ultilizada no video. Além do posicionamento sempre ser no meio, procurando dar equilibrio a imagem.

Comunicação Visual

Digital StoyTelling

Digital StoryTelling feito para a disciplina de Comunicação Visual.

Comunicação Visual

Digital Storytelling 1.

Esse é um vídeo trash, feito com uma câmera amadora. O video procura mostrar o contraste entre a natureza e os grandes centros urbanos, mostrando o que acontece quando há um choque entre essas duas realidades que parecem ser tão distintas.
Um dos recursos ultilizados para demonstrar a diferença entre esses dois ambientes foi a aceleração dos movimentos nas cenas feitas na zona urbana. Além de uma sonorização diferenciada. Enquanto nas cenas em que é mostrada a vida natural da formiga o som é bem tranquilo, nas cenas em que é mostrado a cidade o som é bem agitado.
Outro recurso visual ultilizado foi o jogo de câmera. A visão da formiga e a visão do narrador podem ser observadas em algumas cenas.

Comunicação Visual

Técnicas De Layout

Comunicação Visual

Equilibrio e Desequilibrio

imagem 1

A imagem apresenta simetria e está bem equilibrada.Tudo que se encontra de um lado é complementado do outro. Os barcos estão próximo aos pontos da linha dos três terços, o que dar um maior destaque a eles. A ponte está na zona leve, dando a impressão de profundidade na imagem. Na zona pesada da imagem há uma sombra, dando maior visibilidade a zona leve, mas como os barcos estão próximos aos pontos da linha dos três terços , a imagem torna-se mais dinâmica, pois além de passear pela luz que está na zona leva, o receptor irá passar os olhos pelos barcos na zona pesada.

imagem 2

Esta imagem encontra-se desequilibrada e está com um maior peso para a direita, pois é nessa parte em que se encontram todas as cores e os preenchimentos, não tendo nada na esquerda para complementar. A figura é assimétrica. Algumas partes da boneca estão próximo aos pontos da linha dos três terços, o que torna a imagem mais dinâmica  e dar maior destaque a boneca. O vazio é um recurso ultilizado para dar maior nitidez.

Comunicação Visual

Imagem Significativa

Essa imagem me chama bastante atenção, pois ela mostra o quanto apenas mais um no meio da multidão. Cada pessoa vive no seu mundo, com suas alegrias e tristezas. A diversidade de cores na imagem nos passa essa sensação.  A profundidade nos faz perceber a grandeza dessa multidão.

Comunicação Visual

Reflexão sobre o Artigo: Leitura de imagens, cultura visual e prática educativa - Maria Emilia Sardelich

O ser humano tem a necessidade de comunicar-se. A comunicação só é
feita quando a mensagem é passada corretamente para o receptor.
Tudo que sabemos e guardamos em nossa bagagem cultural, chega através
de informações que obtivemos através da comunicação de outras
pessoas.A forma como a informação foi nos passada faz com que criemos uma
percepção diferente sobre cada coisa. A cultura na qual fomos criados é um
fator que influencia muito a forma como vemos os diferentes tipos de imagem.
Na medida que a imagem passa a ser compreendia como signo que incorpora divesos
códigos, sua leitura requer o conhecimento e a compreensão desses códigos.
Gestalt é uma teoria coerente dentro da história da Psicologia, ela estuda
a percepção e a sensação do movimento, os processos psicológicos envolvidos
diante de um estímulo e como este é percebido pelo sujeito.
A partir da fundamentação da Teoria da Gestalt, a Abordagm da leitura
critica de imagens influenciou os educadores a reportarem uma pedagogia da
imagem. A pedagodia da imagem tem como objetivo principal educar os individuos
para que possam viver de acordo com as regras estabelecidas socialmente.
Exemplo:
Convencionou-se que quando a luz do semáforo ficar verde, os carros podem
avançar.
O foco de um trabalho de compreensão crítica da cultura visual não está no que
pensamos dessas representações, mas sim no que, a partir delas possamos pensar
sobre nós mesmos.

Comunicação Visual

Logo:

 TV GOURMET 

Comunicação Visual

Video com figuras bem interessantes e que confudem o que você está vendo.

clique aqui para ver o vídeo

Comunicação Visual

A cor escolhida foi o Verde. Aqui estão as melhores imagens que capturei.

2º semestre

A partir de agora começam as postagens de alguns trabalhos e reflexões das disciplinas do segundo semestre do curso.

Edição de Imagens Digitais - Avaliação Parcial 1

Finalmente pronto.

O que acharam?

Edição de Imagens Digitais - Avaliação Parcial 1

Making-of

Criação do fundo:

A imagem foi redimensionada com a tranformação livre para ficar no tamanho de 1200 x 1600.

As cores também foram alteradas em Imagem/ajustes/cor seletiva.

Deixei a cor do prédio um pouco mais forte e alterei a iluminação da imagem.

Apliquei o Filtro "Tonar Nítido/Tornar mais Nítido."

Com a ferramenta linha, apliquei duas linhas e depois as juntei numa mesma camada.

Depois com o a lata de tinta preenchi com a cor branca e deixei a opacidade em 50%.

Criação da Logotipo, Lateral e parte Superior

Em outra camada fiz outras linhas e as preenchi com a cor verde, pois de acordo com o fundo foi a cor que achei mais adequada.

Com a ferramenta "varinha mágico" selecionei o cristal da imagem original, copiei e colei sobre as outras camadas..com a ferramenta "Borracha" ajustei as bordas e tirei algumas inperfeições que vieram junto com a imagem.

Criei uma nova camada e com a ferramenta "Caneta" tracei a linha lateral e a parte superior, preenchi o demarcador da caneta com um pincel de duzera 100% e diâmetro 10.

Depois exclui o demarcador e com a lata de tinta preenchi o espaço demarcado com o mesmo verde ultilizado na linha que passa sob o cristal.

Adicionei brilho externo na camada. Coloquei um brilho de cor Branca, de expansão 15 e tamanho 40, com modo de mesclagem "divisão".

Selecionei a camada da linha branca que fica sob a verde, copiei e colei, girei 90 graus no sentido anti-horário, redimensionei e coloquei por cima da linha lateral.

No site Dafont baixei duas fontes sem serifa para compor a logotipo e escrever o nome do game.

A fonte utilizada para o nome do game foi a "N-GAGE"  e a utilizada no Slogan foi a "CRITICIZED".

Fiz os nomes em fontes bem grandes e depois fui ajustando até ficar um tamanho proporcional. 

Na camada onde está escrito o nome do GAME adicionei o estilo de camada "Sombra Projetada", com um ângulo de 120 graus, distância 10, expansão 0 e tamanho 5.

O letreiro e o cristal ultilizado são cópias das camadas que compõem a logotipo do game. Elas foras redimensionadas para caberem na barra lateral.

A parte de seleção e tratamento da imagem dos personagens foi a mais complicada de demorada, pois a luz e o fundo da imagem não estavam com uma boa qualidade.

A seleção foi feita com a ferramenta "Varinha mágica", depois utilizei a máscara rápida pra ir ajustando a seleção da imagem com a borracha e o pincel. Difundi a seleção em 5 e copiei as imagens para a capa do Game. Deixei as imagens acima da camada do fundo e abaixo da camada da logotipo.

Ajustei o local onde cada personagem iria ocupar e os juntei na mesma camada. Com a "tranformação livre" os personagens foram redimensionados. 

Para uma melhor visualização selecionei a camada dos personagens, ajustei o brilho em "Imagem/ Ajustes/ Brilho-Contraste", coloquei o brilho em 50 e o contraste em -10.

Com o filtro "desfoque/ desfoque gaussiano",ajustado em 1 pixel dei um tratamento na imagem para ocutar algumas inperfeições. Ainda na parte dos filtros, apliquei o filtro "Ruído/ Poeiras e rabiscos", ajustado em 2 pixels para melhorar o visual. O filtro "Tonar nítido/ tornar mais nítído" também foi aplicado.

Para deixar as bordas mais destacadas coloquei o estilo de camada "Sombra externa" com a seguinte configuração:

Modo de mesclagem divisão

Cor verde (o mesmo ultilizado nas linhas das bordas)

Opacidade 75%

Ruído 0%

Mais Suave

Expansão 8%

Tamanho 76px

Escala 54%

 Tremulação 0%

Na imagem original da logotipo do Wii, selecionei a parte da logo com a varinha mágica, copiei, colei, redimensionei e coloquei na parte superior no canto direito da capa, acima de todas as camadas.

Coloquei um efeito de camada: "Sombra Externa" configurado com:

Modo de mesclagem multipicação

distância 4

desfoque 0 

tamanho 5.

Logo após selecionei todas as outras imagens de Publisher de suas imagens originais adicionei na capa e fui redimensionando cada uma em seu local.

Para melhorar a visualização das mesmas coloquei um estilo de camada "Brilho Externo" configurado como:

Modo de mesclagem divisão

Cor Branca

Opacidade 83%

Ruído 5%

Mais Suave

Expansão 28%

Tamanho 6 px

Escala 50%

Tremulação 0%

e apliquei a todas as camadas de publisher.

Edição de Imagens Digitais - Avaliação Parcial 1

A capa foi criada a partir das imagens abaixo

Fundo: Bloco 951, campus do Pici.

 Imagens dos Personagens

Imagem Utilizada para criar a Logo do Jogo:

Publisher, Selos das Plataformas:

Edição de Imagens Digitais - Avaliação Parcial 1

Base Conceitual

Com base no jogo "The Sims 2", que tem uma expansão chamada The Sims University me inspirei pra fazer a capa do meu game. "The Sims" é um jogo no qual o jogador terá que satisfazer as necessidadess do seu personagem.
O meu game é um simulador da vida de um universitário, no qual o objetivo principal é conseguir o diploma de graduação.
O nome do jogo é "Line" e  foi inspirado na expressão "On-line", pois é um nome fácil e que tem um signigicado interessante para o game.
O Slogan "Get on Line" que significa "Entre na linha" consegue fazer um trocadilho com o nome do jogo e ao mesmo tempo diz que o usuário deve manter seu personagem do jogo sempre dentro dos padrões exigidas pela Universidade simulada no jogo.

Photoshop

Imagem do porco criada a partir das imagens abaixo.

 

Flash

Figuras feitas em flash com efeito degradê.