Trabalho final: conceitos

O link do trabalho final em swf é este.

Esse trabalho foi um desafio e ao mesmo tempo uma revisão do que foi visto no semestre. Desafio pelos quesitos tempo (praxe!) e pessoas. Na verdade, estou reclamando de barriga cheia, pois a minha equipe foi ótima. O que me deixou aflito algumas vezes foi combinar o meus horários aos dos outros para produzir o que era necessário; mas, no fim, tudo ocorreu bem. Lição nº1: paciência e flexibilidade com os horários das pessoas.
A idéia inicial foi minha, e fiquei também com a parte do roteiro e desenho do material. O conceito era simples; museu lembra: guia, salas, quadros e caminhos internos a percorrer, complicado foi desenvolver o aplicativo que se mostrou bem trabalhoso, por causa do Flash. Mas vencemos o tempo e como atividades foram bem executadas conseguimos entregar o material.
A parte da cadeira de Comunicação que mais nos influenciou, foi o estudo das cores, algo que foi bem presente nos MED’s de todos os alunos. O uso de harmonias cromáticas ajudou a construir uma peça aceitável; não perfeitamente bela, mas que atendeu aos quesitos que propomos. Vale ressaltar também o uso das fontes nos textos, fontes corretas ajudam em um bom produto. Lição final: um produto bem elaborado, utiliza conceitos de composição visual, de tipografia e, se for pedido, utilizam até digital storytellings.

Harmonias cromáticas

Harmonia cromática ocorre quando certa escolha de cores permite ao olho manter-se em equilíbrio, ou seja, a soma de todos os tons tem que resultar em um cinza médio. Quando há harmonia cromática, há uma situação de conforto para o olho, uma situação de relaxamento, o olho dificilmente cansará de olhar a essa imagem. Essa é a grande vantagem de se trabalhar a partir da harmonia.

É importante lembrar que o olho sempre vai buscar o equilíbrio, independente de haver ou não harmonia cromática.

Quando há harmonia, o cérebro interpreta as cores assim como elas são em sua natureza químico-física, o efeito delas é estático, sólido e previsível. Já quando não há harmonia o olho tentará criar essa situação de equilíbrio através de efeitos como o contraste simultâneo e o surgimento de pós-imagens, que dão às cores novos efeitos, enorme oscilação e as tornam abstratas.

Existem diversas maneiras de se alcançar o cinza médio na mistura das cores, desde as mais simples, misturando branco e preto, ou através da soma de tons complementares, até as mais complexas que envolve a mistura de diversas cores, (desde que bem pensadas), Essas misturas de cores são chamadas de “acordes” de cores. É interessante pensar nesse termo, retirado da música, pois lá ele significa mistura de notas diferentes, mas harmônicas.

Nem tudo que for feito precisa ser harmônico, quando se foge da harmonia cromática, se alcança efeitos novos que podem tornar um trabalho muito mais interessante. Entretanto, nesses casos se faz ainda mais necessário o conhecimento da harmonia e suas conseqüências, bem como as conseqüências da sua ausência.

Exemplos de sites que usam a harmonia cromática são:
o gostoso site da qualy: http://www.qualysadia.com.br/
e o famoso twitter: http://www.twitter.com

Famílias dos tipos

Verdana é uma família tipográfica sem-serifa concebida pelo designer Matthew Carter para a Microsoft Corporation, com colaboração no hinting manual (hand-hinting) de Tom Rickner da Agfa Monotype.

A Verdana foi publicada em 1996 pela Microsoft e passou a ser distribuída em cada edição do sistema operativo Windows, no Microsoft Office e com o Internet Explorer (desta forma a fonte está difundida tanto em Windows quanto em Mac OS).

Além disso, uma versão reduzida da Verdana (com menos glifos que a versão original), denominada e inserida no pacote Core fonts for the Web, esteve disponível para download gratuito no sítio oficial da Microsoft durante bastante tempo, de forma a que pudesse ser utilizada em qualquer sistema que suportasse fontes TrueType.

Consequentemente, hoje em dia, a Verdana está instalada na maioria dos computadores, mesmo em Unix e Linux.

A versão Core fonts for the Web da verdana ainda está disponível para download em sites externos

A fonte foi inspirada em tipografias famosas, como a Frutiger. Entretanto, existem algumas diferenças intencionais, pois a Verdana foi desenhada com o intuito principal de ser lida em ecrãs de baixa resolução (especialmente em tamanhos pequenos, de forma a adaptar-se bem aos textos corridos).

Uma das diferenças mais marcantes são as pseudo-serifas em letras como o "J" e o "I". Em 1999 foi publicada a fonte Tahoma, similar à Verdana, mas mais compacta quanto ao desenho.

A fonte Bitstream Vera também é similar à Verdana.

Tahoma é uma família tipográfica sem-serifa de grande legibilidade, comissionada pela Microsoft e desenhada por Matthew Carter.


Foi publicada em 1996 e é instalada por padrão em todos os sistemas Macintosh e Windows. Uma vez que é parte do pacote de "fontes web" e que esteve disponível para download gratuito a partir do site da Microsoft por muitos anos, muitas distribuições de Linux e Unix também a utilizam.

Frequentemente é considerada uma excelente fonte tipográfica para a leitura na tela do monitor, para o qual ela foi concebida. Já que é instalada na maioria dos computadores do mundo, é muito usual encontrá-la como fonte no texto principal de uma página web. Esta fonte tem muita semelhança com a fonte Verdana.

Criar um digitalstorytelling...

Criar uma história em grupo é bem interessante. Primeiro surgem as ideias, que são combinadas, estas transformam-se em storyboards que se tornam um projeto belo. Esse foi a história da Elisa. A Katrine escreveu um texto para a cadeira de Narrativas e decidiu criar a nossa história a partir dele. Logo no início, gostamos da personagem e do desenrolar de sua vida.
Utilizamos o princípio da composição visual do contraste, que, além de dar um tom mais interessante à obra, nos faz lembrar da condição física da Elisa, personagem fictícia, que só enxergava em tons de cinza. A partir daí, construímos o storyboard, cheio de observações que doaram ao trabalho características que beiravam a feminilidade(culpa da Katrine), tudo planejado para agradar a quem vê a história.
A personagem, em desenho, foi criada pelo Boro(José Moreira), uma surpresa pra mim, o desenho é simples, mas muito bom; a personagem é fofa e meiga, apaixonante, é muito fácil gostar dela. A história da Katrine foi bastante interessante de se trabalhar e eu ajudei na construção do roteiro, oferecendo umas ideias em determinados pontos. Por fim, o resultado se mostrou interessante pelo cuidado ao fazê-lo, gostei da personagem, gostei da história, gostei de realizar este trabalho.

Digital storytelling

O link do youtube é: este

O pdf é este este

Princípios do design gráfico

Para cada princípio, um exemplo. Alguns atenderam a mais de um princípio, mas darei o exemplo pela característica predominante. Tentarei exemplificar com sites que utilizo.

Proximidade
Um bom exemplo é o Xixi no banho, www.xixinobanho.org.com, quando se está na sua página, você pode notar que os elementos estão agrupados, principalmente no centro, causando um atrativo no conteúdo. Notamos coesão; o site não fica visualmente cansativos, pois espaços em branco mais atrativos foram criados.

Contraste
Twitter, www.twitter.com. O contraste presente no site é o contraste de tom. Na parte de cor branca do site, localizam-se os twites, o mais importante do conteúdo. E no outro lado, ficam o conteúdo complementar. Esta opção de contraste oferece um atrativo visual ao twitter, além de melhorar a usabilidade.

Repetição
Um site cheio de repetições é o Omelete, um site de cinema, jogos, tv, etc; www.omelete.com.br. À esquerda, aparecem as notícias, que estão agrupadas por marcadores coloridos que são equivalentes a cada classe de assunto: cinema, quadrinhos, games, etc. No meio, estão as notícias principais, que chamam a atenção; elas são colocadas repetidas uma abaixo da outra, com títulos com formatação repetida em negrito. Tudo isso deixa o design consistente.

Alinhamento
Um bom exemplo do uso do alinhamento é o site do jornal O Povo, www.opovo.com.br. O alinhamento principal utilizado é o à esquerda. A maioria dos títulos e notícias utilizam-se deste alinhamento; isto cria unidade ao conteúdo do jornal.

Equilíbrio e desequilíbrio

A primeira imagem, cartaz do filme "O último mestre do ar", é um exemplo de equilíbrio. Não notamos a presença da simetria, mas o cartaz não perde com isso, pois a atenção foi voltada para o personagem com a criação da tensão visual. O personagem principal fica em cima dos dois pontos de interesse à esquerda, o que também chama a atenção para ele. Posso também destacar a função positivo/negativo, que não é tão precisa, devido ao desfoque das cores preta e branca, mas podemos notar a diferença entre claro e escuro em ambos os lados, esquerdo e direito, da imagem. Enfim, penso que o objetivo da imagem, destacar o personagem, foi alcançado e o equilíbrio foi estabelecido.

Já, na segunda, há um belo desequilíbrio. Não há simetria, mas também não há nada que tente equilibrar a ausência dela. A parte mais densa da imagem fica do lado direito, algo que não é balanceado do outro lado. Não há nivelamento e a preferência pelo ângulo esquerdo da imagem não foi respeitada. O observador é quase obrigado a olhar para a parte com mais detalhes da imagem, o lado direito. Mas a imagem não é feia. Causa tensão, mas não desconforto. Noto que tudo foi propositado e o trabalho ficou ótimo.

Logo

Seguindo as explicações dos capítulos 2 e 3 do livro “Sintaxe da Linguagem Visual”, pude fazer algumas observações mais 'técnicas', após ter criado a logo da 'Tv Gourmet'.
Mesmo sem ter o conhecimento do texto, criei a logo. E depois de ler, quase pensei que foi coincidência. O "equilíbrio" foi estabelecido pois a parte mais 'maciça' da imagem se encontra no eixo vertical(do nome na logo ao ápice da 'fumaça') e com o referente secundário horizontal no nome da tv logo abaixo. O "nivelamento e o aguçamento" encontram-se na imagem pois, ironicamente, a ambiguidade foi evitada pois tudo concentra no centro e se expande para os lados . O nome da tv segue a regra da
"preferência pelo ângulo inferior esquerdo". O elemento básico da comunicação visual mais utilizado foi a linha (fato evidenciado principalmente na 'fumaça'). A "Direção" mais utilizada foi a curva que é associada à abrangência, repetição e a calidez (muito irônico) adjetivos muito relacionados, por mim, à comida. E por fim quero destacar a falsa idéia de perspectiva, colocada, de forma simples, no desenho, feito como se a tigela estivesse sendo vista com um ângulo um pouco superior, podendo até ver o 'conteúdo' da tigela.

Iludindo nossos olhos.

Muitos dizem que a visão nos engana. E em alguns casos isso é verdade. Uma boa perspectiva, o ângulo correto e uma imagem em duas dimensões, nos engana e se transforma em 3D ou ilusão de ótica.


Essas abaixo são boas. Na página a seguir, há vídeos com boas ilusões, vale a pena conferir também:
http://www.noticiasgeek.com.br/ilusoes-de-otica/

Cor que eu gosto: verde...

A professora solicitou que eu tirasse fotos de coisas cuja cor eu gosto, sendo esta predominante na foto. Como não tenho máquina fotográfica, nem celular, resolvi pegar imagens da internet de objetos aqui de casa(que eu tiraria as fotos, se tivesse a máquina). Assim, acho que não me desvio muito do que foi pedido...

Leitura de imagens, cultura visual e prática educativa: comentários

O texto se inicia falando sobre as leituras de imagens numa forma mais "técnica", levando em consideração elementos básicos da imagem, como: ponto, linha, forma, cor etc.
Algo, que me chamou atenção, foi a forma como o pesquisador Ott agiu em suas aulas, retirando o foco de despejar conhecimento nos alunos e mudá-lo para observar as percepções que tais tinham, influenciando o conhecimento deles e não tentando convencê-los em relação ao valor das obras de arte.
Um conceito interessante é o de "o que mais favorece o desenvolvimento estético é a familiaridade com as imagens das obras de arte, e isso depende das experiências artísticas de cada pessoa" e concordo com a autora Rossi que, tendo uma visão mais ampla do conceito, utiliza também a publicidade, como experiência artística.
Vale destacar também que "ler uma imagem historicamente é mais do que apreciar o seu esqueleto aparente, pois ela é construção histórica em determinado momento e lugar, e quase sempre foi pensada e planejada", o que leva-nos a perceber a imagens em suas várias camadas, não apenas no que está sendo mostrado, mas observar o que ela trás consigo, em relação ao artista, aos significados, à história, à técnica, dentre outros.
E por fim a autora comenta sobre uma nova forma de fazer educação artística e visusal crítica baseada na interação de educando e professor, e não apenas nos conceitos do segundo, algo que eu concordo.

imagem significativa

Consegui essa imagem com um amigo que ofereceu alguns papéis de parede. Ela é significativa pra mim, fornecendo uma ideia de inovação e criatividade, elementos que me preocupo para usar na minha carreira profissional. Gosto de materiais que são produzidos com essas qualidades e se um bom acabamento estiver alinhado à produção (como na imagem acima), melhor ainda!
O que me chamou mais a atenção foi a mudança do fogo pela água. O que provoca em nós que observamos uma sensação "diferente", levanta perguntas do tipo: "E se fosse assim?" ou "Será que é água mesmo?" e, ao menos a mim, motiva a pensar e construir coisas, mesmo que virtualmente, de forma diferente.

2º Semestre

As postagens agora são nível 2... que responsabilidade! Vamo lá!

Prova: O resultado

Prova: making off.

Para fazer a parte de baixo da capa, além da foto da biblioteca, utilizei a seguinte:




Para duplicar os irmãos Usei: Edit - Transform - Flip Horizontal e usei o Brush Tool para colorir a camisa de Norney; no cabelo dele utilizei as mesmas técnicas descritas no tutorial sobre cabelos virtuais.

P.s.: atualizações foram feitas nas postagens abaixo.

Prova: semi-final

Está quase consumado:
Para pegar dicas sobre efeitos luminosos e letreiros digitais entrei no link:
www.tutoriaisphotoshop.net/2007/08/efeito-de-texto-luminoso.html
Não segui a risca os passos, pois quando estava fazendo a montagem, vi que o efeito que eu precisava não era o do tutorial por completo, mas ele me ajudou bastante na hora de escolher as ferramentas. Utilizei a fonte Dodge que baixei da net e utilizei Blending Options para chegar aos efeitos vistos. Para dar o efeito espelho, dei um Flip Vertical no nome Gemini e utilizei Blending options de novo.

Em relação aos gêmeos, e os seus cabelos estranhos, utilizei o link:
www.tutoriaisphotoshop.net/2007/05/criando-uma-peruca-virtual.html
e as olheiras do vilão utilizei uma nova camada por cima e diminui a Opacity.

Essa foi a parte mais interessante do trabalho. Mudar o visual de fotos minhas de forma tão radical, foi curioso e divertido. De início, pensei em fazer um loiro e outro moreno, mas achei que ficaria muito esteriotipado (tomara que isso não seja um neologismo), então, comecei pelo vilão, com seu cabelo cinza arrepiado com pontas vermelhas e uma cara de quem não dorme a séculos(para as olheiras utilizei Burn Tool), mas travei na hora de fazer o visual do mocinho. Pedi ajuda ao meu irmão(ele não sabe nada de Photoshop, mas de visual ele se garantiu), ele disse como ficaria legal, foi a forma que fiz e ficou bom, principalmente o detalhe da barba, que usei, para aprender a fazê-la, o link abaixo:
www.tutoriaisphotoshop.net/2007/05/como-colocar-uma-barba.html
Então o visual dos gêmeos estava pronto.

Vamos ao final, com a parte de baixo da capa e melhoras gerais.

Prova: continuação

Hoje, domingo vou terminar, agora vou mostrar as informações prometidas na postagem anterior.

A fotos originais, que estou utilizando, são estas:

Cara ruim

Cara boa

Biblioteca

Para deixar esse ponto central iluminado mais escuro, utilizei Burn Tool. E com o Brush tool esfumaçado escureci as bordas da imagem para deixar o clima mais dark.
Em relação aos elementos adicionais (plataforma e publisher), utilizei a imagem do link de F.E.A.R.2, recortei e colei, tendo apenas o cuidado de adaptar os recortes ao número grande de pixels da imagem da capa.

Prova: início da montagem

Hoje, pela manhã iniciei a montagem da capa, as idéias estão bombando no meu cérebro quase não me deixam dormir desde o início do projeto, mas o resultado tá ficando legal.

O que saiu até agora foi:
No efeito nuvem azul e vermelho eu utilizei o tutorial que o professor passou no solar como o nome MAGIC.
O link é: www.youtube.com/watch?v=QcWWoURrqYO
Mas desta vez fiz as nuvem verticais.
As cores vermelho vão representar o vilão e azul o mocinho.

Utilizei fotos da capa do jogo original(F.E.A.R.2) para pegar as logomarca e a plataforma.
O Link é: www.getgames.com.br/ml/images/games/f.e.a.r._2_project_origin_ps3_cover.jpg
Mais tarde, mais irformações.

P.s.: a imagem pode sofrer alterações no que já foi mostrado.

Prova: ideias iniciais

Para ter uma ideia inicial de como se estrutura uma capa de jogo, fui pesquisar no Google. A que chamou minha atenção foi esta:

De início pensei em um jogo de terror, mas daria muito mais trabalho para desenvolver a história na próxima avaliação. Então pensei em fazer uma capa de jogo de ação, deixar o vilão na parte de cima da capa, o nome no meio e o secundário em baixo. Mas acabei mudando outra vez, deixei os dois gêmeos em cima e a interação na universidade pública, outra exigência da família, em baixo.

O nome do jogo seria Nornye, que é o vilão, ou Gemini, um sinônimo de gêmeos.

O vilão por ter nascido segundos depois de seu irmão gêmeo, Ennoyr, foi privado de administrar um fortuna de 5 bilhões de dólares. Agora quer vingança e o direito de tomar posse do dinheiro quando completar 21 anos, idade adulta para a família. O "mais velho", agora com 20 anos, vai utilizar de mídias e tecnologias digitais para escapar de seu sábio e perverso irmão.

Hoje, quarta-feira, vou tirar as fotos e começar as montagens.

P.s: Nornye e Ennoyr são anagramas de meu nome.

flash: o tucano

flash: a esfera negra

flash: carro

no flash: o avião

flash: perry, o ornitorrinco (do Fineas e Ferbe)

este foi um dos primeiros, eu só tive que retirar o fundo da imagem

finalmente, a japa

Aula em grupo - Contrastes

Achei interessantíssima a aula. Na parte do Melo, eu não conhecia jogos conceituais; na parte do George, achei show as informações sobre os jogos (principalmente por elas serem passadas por um viciado em God of War - ele que disse); na parte do Eduardo, me lembrei de antigos trabalhos de escola e abri meus olhos apra a visão de pessoas da periferia sobre a informática; os vídeos e músicas (que pelo que eu me lembro) passados pela Andrea foram legais (eu também odeio rodeio!) e por fim o Ismael com seus contrates no cinema. Muito bom juntar tanta gente que sabe e você ficar de esponja absorvendo tudo ao máximo.
p.s: não lembro da parte do Ney, minha memória é triste. Mas eu sei que ele tava lá e fez algo, mas não lembro o que.

colorido e sombreado

Nuvens estranhas e vermelhos desconcertantes

New Efects

pig-boy

formando restaurado

relógio

as mulheres belas

Taí o melão do Photoshop