Link do Trabalho Final

Hospedado em http://megaswf.com/serve/82850/

Reflexão sobre o Trabalho de Final de semestre 2010.2

Nossa ideia foi toda pensada juntamente com o layout. Como aprendemos muitos conceitos relacionados a comunicação visual durante esse semestre, resolvemos aplicá-las o máximo que pudemos. Conseguimos montar para cada cenário um exemplo de conjunto de cores que entravam em harmonia. Seguimos na maioria das vezes o círculo cromático.
Algumas vezes precisávamos combinar cores com o contexto, mesmo estas cores não sendo ideais. Creio que esta seja a parte mais importante da disciplina, devemos conhecer todas as regras, devemos saber que temos que acompanhar o contexto e também devemos saber exatamente (claro, para o sucesso do trabalho )quando usar ou não estas regras para chegar ao melhor resultado final.
Também temos que lembrar que o nosso material educacional digital interativo é destinado a crianças, este também é um motivo que explica algumas combinações de cores. O público alvo também é um critério a ser muito bem lembrado na hora da tomada de decisões importantes na conclusão de um projeto.
Enfim, posso dizer que estamos satisfeitos com o nosso trabalho, espero que os professores também pensem isso.
Para ver novamente nosso trabalho, acesse o link: http://megaswf.com/serve/82850/

Equipe: Caroline Sampaio, Vinicius Mota e Herbenio Casciano.

Sites

Pensando nos sites e no significado das cores, decidi falar do http://www.twitter.com e do http://www.facebook.com.
Ambos utilizam o azul como cor principal. São sites de redes sociais. O significado do azul remete a liberdade de expressão, pensamento..
O que também lembra liberdade é o pássaro azul do twitter. Aqui noto o uso coerente e muito bem pensado da relação do objeto proposto com o seu significado.

Harmonias Cromáticas

Achei um material bem interessante sobre cores e harmonia cromática no site http://www.fmemoria.com.br/entrevistas/entrevista_cores.pdf
O autor começa a falar sobre o assunto comparando um designer a um maestro, que é responsável pela harmonia do som. O designer tem como obrigação entender sobre equilibrio e harmonia na hora de criar a combinação cromática de um layout.
É muito importante a coerência das cores usadas com o público alvo daquele produto.
Com relação à psicologia das cores, sabemos quanto as suas regras, mas o mais importante é saber quando é certo utilizá-las ou não.
A função da composição cromática é facilitar o entendimento da forma projetada.O uso das cores deve fazer sentido, não confusão.

Comentário sobre o capítulo 9 do livro Design para quem não é designer

Por conta da confusão de capítulos a se ler no fórum do dia 29/10, eu já havia lido este capítulo e feito um comentário, que passou a ser inválido para o fórum já que no caso era o capítulo errado. Por isso, no fórum fiz mais alguns comentários e estou reutilizando este para o blog:

O texto mostra seis classificações básicas de tipos ou fontes: Antigo, Moderno, Serifa Grossa, Sem serifa, Manuscrito e Decorativo. Conhecendo essa classificação é possível saber facilmente com que tipo de fonte nos deparamos e se ela é coerente com o contexto que está inserido ou não.
A escolha de uma fonte tem que fazer parte da criação, não pode ser aleatória, uma escolha mal feita pode estragar totalmente um trabalho.
Esse tipo de conhecimento é essencial a um bom comunicador visual.

Exercício Fonte + Cartaz -> Refinamento

Refinamento BEM sutil.. só vetorizei as fontes e modifiquei alguns defeitos.. Aumentei o tamanho do cartaz.. Enfim, é isso..

Exercício Fonte + Cartaz

Fonte criada por mim + Cartaz :



jajá eu posto a fonte refinada.. ;D

Fontes - Exercício

Fonte: Scriptina

Fonte muito conhecida. Encontra-se na lista das fontes mais baixadas dos sites para download de fontes mais conhecidos. De acordo com alguns sites, ela é muito utilizada em convites de casamento por remeter luxo e riqueza. Mas também caiu no gosto do público adolescente que abusa do uso da fonte em montagens feitas com fotografias comuns.(¬¬)

Fotos:

Fontes - Exercício

Primeira fonte escolhida: Segoe UI

Eu escolhi essa fonte porque eu gosto dela.. a uso como fonte do meu msn.. ela vem instalada junto com o windows vista.. Esta fonte não possui serifa, consequentemente, não possui variação de traço.. o que é interessante para web.. É uma tipologia de fácil leitura, fato que torna meu trabalho mais confortável..

Processo de desenvolvimento do vídeo

Para o vídeo foi utilizada uma narrativa criada na disciplina de Narrativas Multimídia Interativas. A escolha das imagens foi feita de acordo com o contexto. Utilizamos o programa Adobe Premiere Pro CS4 para o vídeo em si, o Adobe Flash CS4 para algumas animações e também o Adobe Photoshop para montagens e efeitos em imagens estáticas. Os áudios foram retirados do site www.freesound.org e eles também estão de acordo com o contexto.
As técnicas de Comunicação Visual foram estudadas em sala e também tive como base o livro "Sintaxe de Linguagem Visual" do Autor Donis A. Dondis.
Umas das regras que mais utilizei nas imagens do meu digital storytelling foi a regra dos três terços. Também usei conceitos relacionados às zonas leve, intermedíária e pesada. Pensei também bastante nas cores e usei as cores preta e vermelha, relacionadas com o texto, o preto remetendo à escuridão e o vermelho lembrando sangue e morte.
Concluíndo, esse trabalho nos fez utilizar conceitos de várias das nossas disciplinas estudadas, o que é muito interessante além de ser um dos princípios do nosso curso de SMD.
;D

Créditos

Links das Fotos:
http://downloads.open4group.com/wallpapers/morte-na-floresta-ed93e.jpg
http://idiotasdoprimeiro.zip.net/images/DSC05233.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNNEdy4iTS8XOOdFxHhDC22li3NTw7FFlR349irkqQCXxKAg9BMpPjlA_a_ge9fjMlHHo6ILK06vw23xGPMNxT5k0pTi52xHh_T3o3Irt-qlftOfd9K1hpTdptwdndF5h6AplROkcoHd0J/s400/viagem+de+carro.JPG
http://www.campesca.com/produtos/g_g_fox23.jpg
http://www.papeldeparede.etc.br/wallpapers/luz-na-floresta_4689_1680x1050.jpg
http://download.ultradownloads.uol.com.br/wallpaper/178468_Papel-de-Parede-Familia-estranha_1024x768.jpg
http://imagens.kboing.com.br/papeldeparede/11231casa.jpg
http://www.istockphoto.com/file_thumbview_approve/555910/2/istockphoto_555910-ahhhh.jpg
http://superdestro.com/blog/wp-content/uploads/2010/03/fuuuuuuuuuu.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLd0h_3hzPOwBzAT580vgXznMeQbm76Wf-bmvjA0X0gE6dhIXMr3_kvQ_lgEQqmchDJVi-0QLdGHKjspRKw8gYge5wx9cG-FNvvLnzPPuBGJjCl_bQjDTuBEz43uRmYSC8lZ_UprGCZ3o/s400/armas-3128.jpg
http://www.regalo.com.br/produtos/Faca%20do%20Chef%20em%20inox.jpg
http://pcmedia.gamespy.com/pc/image/article/653/653516/quake-4-20050923081438902.jpg
Música ao final: V.I.P. ( Very Important Porque) - Banda: Forfun
Demais áudios: www.freesounds.org

Vídeo da Prova

Prova: Storyboard

Capa do Digital Storytelling

Capa:
Fundo branco para dar destaque à foice, que está posicionada, na sua totalidade, em dois pontos de tensão. O nome foi colocado próximo a um terceiro ponto de tensão para dar destaque. ;D

Ps:Eu realmente quis deixar a capa BEM simples. Acredite se quiser..

Atividade de colagem

Imagens trabalho de princícpios de design gráfico

Repetição:


Contraste:


Alinhamento:


Proximidade:

Storyboard do trabalho

Vídeo do trabalho

Vídeo do trabalho de Digital Storytelling:

Imagens equilibradas e desequilibradas

Imagem em desequilíbrio.
A figura do rosto da mulher parece pesar mais que o resto da imagem.


Imagem em equilíbrio.
De acordo com a Regra dos Três Terços, a imagem se equilibra nos pontos de tensão. A arvore de um lado equilibra o garoto do outro.

Biblixoteca

(to indo ler o texto agora, jaja comento.. vim só postar logo =D)

Imagem - Ilusão de Ótica

Escolhi esta imagem porque quase eu não percebo "que imagem estava escondida ali".. Esta era a pergunta que tinha abaixo da imagem no site que a escolhi. ;D



Também não viu?! Tá bom.. vou te ajudar..





=D

Atividade - Imagens

A cor que eu escolhi foi Vermelha.. o motivo? não sei bem explicar, sempre gostei de vermelho.. Aqui vão as cinco fotos..

Imagem 'significativa'

Bem, não tinha noção de que imagem colocar aqui, por isso demorei a postar. Pensei em uma imagem aleatória, ou uma que eu já tenha visto pela internet, mas não consegui escolher nenhuma, daí tive a ideia de vasculhar os "Meus Documentos" e encontrei a imagem acima. Ela foi tirada por mim numa praia daqui do Ceará e eu lembro que tive vontade de tirar essa foto pra poder dar a ilusão de que aquela pedrinha sozinha no meio da areia poderia ser vista como uma enorme pedra posta no topo de um morro.. Foi mais pela ilusão mesmo, ou pelas diferentes formas de ver alguma coisa..
Enfim, é isso aí.. =D

Blog destinado à disciplina de Comunicação Visual

A partir de hoje, este blog passará a ser destinado à disciplina de Comunicação Visual do segundo semestre do curso de Sistemas e Mídias Digitais da Universidade Federal do Ceará.


\o/

treinando..

treinando.. AP2 turma1



Lançamento.
http://megaswf.com/view/fb2452bc58f49dfb83f7c66397c64abb1.html

AP2 turma2

treinando.. :D

http://megaswf.com/view/c62dd75c36847b0c9887a4a883eb4027.html

Era uma vez.. hehehe :D

http://www.megaswf.com/view/fc7255e5d96b80c398c167bad0e17f5b.html

Lobiiinho =P

Banner Animado

http://megaswf.com/view/a8ae6419687e0350168fda4f91536249.html

Sexto Post - Resultado Final

Apresento-lhes o Resultado do MEU Trabalho!


\o/
Gostou??

O jogo virá em breve..

Quinto Post - Making-of

Making-of
Como se pode perceber, a imagem do wallpaper que me inspirou tem o detalhe de ser escura, “noturna”, sei que sou capaz de “anoitecer” uma fotografia, mas como eu bati a foto depois da aula, estava de noite, então aproveitei. Claro que foram tiradas várias fotos, e eu escolhi a melhor, mais nítida. Fiz apenas alguns ajustes usando Images>Adjustments>Curves.
Abri um novo arquivo, configurei o tamanho dele em 1600x1200, importei a imagem da reitoria para esse arquivo com o uso da ferramenta Move e ajustei-a com o Free Transform, sempre organizando tudo em camadas distintas.
Pesquisei no Google uma imagem de céu escuro,link: http://download.ultradownloads.com.br/wallpaper/126779_Papel-de-Parede-Ceu-escuro_1680x1050.jpg.Salvei-a e voltei ao Photoshop. Fui à camada da imagem da Reitoria, retirei a parte de cima, um suposto céu que não aparecia por conta da noite com a ferramenta Quick Selection, às vezes utilizando o alt e o shift para ajustes, apaguei esse céu e puxei a imagem do outro céu (o escuro) com a ferramenta Move, criando assim, uma nova camada, que foi renomeada, e ajeitei-a com o Free Transform para aparecer somente as nuvens. Puxei a camada do céu para baixo da camada da Reitoria para que o céu aparecesse no lugar correto.
Novamente no Google, peguei uma imagem de uma lua com o fundo preto pra facilitar o trabalho,link: http://thejackdesigner.files.wordpress.com/2009/01/lua-2.jpg. Retirei o fundo da lua e arrastei-a com a ferramenta Move para o arquivo, criando outra vez uma nova camada, renomeada. Fiz os ajustes necessários com o Free Transform e posicionei-a melhor com a ferramenta Move.
Note que na imagem “inspiradora” existem alguns raios, uma maneira super fácil de criar raios na imagem é usando Brushes, por isso, pesquisei no Google e encontrei o site http://mataleonebr.blogspot.com/2008/07/brushes-especiais-raios.html e baixei os raios do primeiro link que estava à disposição http://fc02.deviantart.net/fs15/f/2007/053/4/5/Lightning_Brushes_by_Scully7491.zip. Como o arquivo estava compactado, descompactei-o e instalei o Brush, Para instalar um Brush é preciso apenas colar o arquivo na pasta ‘Brushe’, você vai encontrá-la no endereço Adobe>Adobe Photoshop CS4>Presets>Brushes. Não tive nenhum tipo de problema de compatibilidade, pois na pesquisa especifiquei que o Brush deveria ser compatível com minha versão de Photoshop. Depois de instalado o Brush é preciso fechar e abrir novamente o programa para que seja feita uma atualização e o programa perceba que foi instalado, no caso, um novo Brush. Obviamente, antes de fechar o programa, salvei meu arquivo no formato PSD.
Reabri o Photoshop, e também a imagem, selecionei a camada do céu (a camada da lua também serviria para esse propósito), cliquei na ferramenta Brush e selecionei os Brushes dos raios, escolhi alguns e fui clicando e criando os raios, ajustando sempre os tamanhos conforme fosse mais conveniente.
Com a ajuda do Google, também baixei a fonte do “PlayStation”, link do site: http://www.typenow.net , link da fonte baixada: http://www.typenow.net/files/Z/zrnic.zip. Instalei a fonte, a pasta fica no endereço Computador>Disco Local(C:)>Windows>Fonts (o que pode mudar em outras máquinas é o Disco Local, depende da configuração),Também basta colar o arquivo na pasta para instalar.
Reiniciei novamente o Photoshop, sempre salvando o arquivo. Criei uma nova camada, usando a ferramenta Rectangular Marquee selecionei um retângulo na parte de baixo da imagem, usei a ferramenta Paint Bucket para pintar o retângulo de preto. Com a ferramenta Horizontal Type, criei o texto “PlayStation” e posicionei-o sobre o retângulo preto, mudei a cor da fonte para branca e o tamanho para 160. Para ter o símbolo ‘TM’, fui até a minha Área de Trabalho, cliquei com o botão direito e fui em Personalizar>Proteção de Tela>Texto 3D>Configurações e onde tinha escrito “Microsoft TM”, copiei somente o ‘TM’ e fechei a janela. Voltei ao Photoshop, novamente com a ferramenta Horizontal Type, crei um novo texto apenas com o ‘TM’, mudei a cor para branca, o tamanho para 150 e posicionei o texto corretamente.
Em alguns momentos para melhor visualização de alguns efeitos ou ações, usei a opção de “esconder” a camada. No famoso “olhinho”.
Para colocar a logomarca do PlayStation, pesquisei no Google e consegui a imagem do seguinte link: http://playstationlifestyle.net/wp-content/uploads/2009/08/playstation-logo.png. Abri a imagem no Photoshop, puxei com a ferramenta Move para a imagem principal, ajustei o tamanho para que não ficasse repetitivo aparecer o nome “PlayStation”duas vezes e puxei essa camada, que já foi renomeada, para cima da camada do retângulo preto, para que ela pudesse aparecer. Com a ajuda do zoom e da ferramenta Magic Wand, retirei o fundo da imagem para que o tom do preto fosse o mesmo.
Criei uma nova camada, com a ferramenta Rectangular Marquee abri um retângulo pequeno, pintei-o de branco com a ferramenta Paint Bucket, cliquei na ferramenta Horizontal Type, com a fonte “Franklin Gothic Demi Cond”,na cor preta, escrevi a sigla “PAL” e posicionei o texto adequadamente. Por fim, selecionei a camada do retângulo branco e desse último texto, cliquei com o botão direito e selecionei a opção Merge Layers para que elas “virassem” uma única camada e consequentemente ficasse melhor a movimentação.
Para conseguir a logomarca da Eidos, recorri mais uma vez ao Google, e consegui a imagem que está nesse link: http://upload.wikimedia.org/wikipedia/commons/8/8e/Eidos_logo.jpg. Abri-a no Photoshop, apaguei a parte preta da imagem com a ferramenta Magic Wand, trouxe-a para a imagem principal com a ferramenta Movee, criando assim uma nova camada que foi renomeada. Posicionei a logomarca na parte superior da imagem, no canto. Também ajustei seu tamanho. Como a imagem estava um pouco apagada, resolvi colocar uma sombra nela. Cliquei duas vezes sobre a camada da Eidos, fui na opção Drop Shadow, pus a opacidade em 100% e o ângulo em 60 graus. Finalizando, apliquei mais um pouco de Brush de raios sobre a logomarca.
Notei que o nome da Universidade estava um pouco apagado por conta da sombra natural da figura, daí cliquei na camada da reitoria e com a ferramenta Rectangular Marquee fiz um retângulo sobre o nome “Universidade do Ceará”, cliquei em Image>Adjustments>Curves e deixei essa parte mais clara, também o fiz para dar maior ênfase ao nome da Universidade.
A logomarca da Crystal Dynamics, eu consegui neste endereço: http://www.mobygames.com/images/i/25/05/449355.png. Abri-a com o Photoshop, e fiz o mesmos passos da logomarca da Eidos, exceto os efeitos que foram os Inner Glow e o Bevel and Emboss.
Para a imagem da censura, peguei a imagem de um jogo qualquer com o mesmo valor de censura o jogo Tomb Raider, 16 anos, abri-a com o Photoshop, usei a ferramenta Crop e retirei apenas o ícone. Usei a ferramenta Move para puxá-la para a imagem principal e posicionei-a. Não houve necessidade de mexer no tamanho. Link: http://www.ubi.com/resources/binary/351/87987.jpg
Criei uma nova camada, com a ferramenta Rectangular Marquee fiz uma “listrinha” para separar a imagem das marcas e pintei essa seleção de cinza com a ferramenta Paint Bucket.
Tratamento das personagens: As fotos foram tiradas em um local onde o fundo era da mesma tonalidade de cor ou onde fosse fácil excluir o fundo da imagem, afinal o que importava era a personagem. Usei luvas de malhação, short escuro, blusa e mochila preta, alem da trança, típica da personagem Lara Croft. Utilizei a ferramenta Brush juntamente com a Edit in Quick Mask Mode. Primeiro selecionei o fundo, modificando sempre o tamanho do pincel, usando também a ferramenta Zoom para que a seleção fosse a melhor possível. Depois de o fundo selecionado clico novamente na ferramenta in Quick Mask Mode para mostrar a parte selecionada, daí apertei ctrl+shift+i para inverter a seleção. Por fim usei a ferramenta Move para levar a seleção para a imagem principal e a ferramenta Free Transform para modificar a imagem do melhor modo possível. Idem para a segunda personagem. Lembrando que tudo está sendo separado em camadas distintas para organização.
Nome do jogo: Por falta (ou excesso, quem sabe!) de criatividade nomeei o jogo de “UFC RAIDER” e também pus os nomes das personagens de “CAROL CROFT”. A fonte utilizada foi baixada pelo seguinte endereço: http://www.typenow.net/files/themed/tombraider.zip. Os efeitos para o nome das personagens foram: Drop Shadow(opacidade 75%, ângulo 170 graus), Inner Shadow(opacidade 75%, ângulo 170 graus), Outer Glow(opacidade 75% e noise 0%) e Stroke, para o nome do jogo: Drop Shadow, Inner Shadow, Gradient Overlay e Stroke(todos com os mesmos valores dos anteriores).
Para finalizar, falta o efeito de chuva. Nosso amigo Google me ajudou a encontrar esse ótimo tutorial: http://www.upmasters.com/forum/index.php?showtopic=3851. Procurei, encontrei e testei muitos tutoriais, mas somente esse me deu o resultado que eu queria. Não achei necessário segui-lo exatamente como ele ensina, fiz uns poucos ajustes.
Primeiramente salvei a imagem que eu já tinha (sem a chuva) em JPEG, para ficar mais fácil modificá-la. Utilizei a ferramenta Rectangular Marquee para ter o cuidado de “não chover” sobre as marcas na parte de baixo da imagem. Segui o tutorial. Salvei novamente em PSD(com a chuva) e ,finalmente, em JPEG.
O resultado final vem no próximo post.
Tamanho da imagem: 5,49MP; 1,22MB.

Quarto Post da AP1 - Imagens Inspiradoras

Terceiro Post da AP1 - Imagens adicionais.

Segundo Post da AP1 - Imagens iniciais, não tratadas.

Primeiro Post da AP1

A princípio, achei bem estranha a ideia da prova. Creio que tenha sido por conta de eu não ter tanto contato com jogos com relação às outras pessoas da turma. Mas depois de refletir um pouco sobre, decidi não fazer pouca coisa.
No começo também não tinha noção de em qual jogo eu iria buscar inspiração. Recorri ao nosso "amigo" Google. Achei alguns jogos de RPG com personagens femininas, porém não me identifiquei com nenhum, e a procura continuou até, por acaso, eu encontrar uma imagem da personagem Lara Croft do filme e também jogo Tomb Raider. A decisão sobre o jogo foi imediata. Difícil foi escolher uma das imagens que tivesse compatibilidade com algum cenário da UFC. Até que eu encontrei o site http://www.tombraiderchronicles.com, com várias imagens do jogo, de ambientes e da personagem. Procurei por capas de jogos, mas não achei que nenhuma delas “combinasse”, e, como sei que o que importa é a essência da capa, e não a capa em si, direcionei minha busca para os wallpapers do jogo. Encontrei um perfeito! Link: http://www.tombraiderchronicles.com/images/tombraiderunderworld_wallpaper/smallscreen020.jpg (No próximo post, disponibilizo a imagem em tamanho grande.) Pensei logo: o meu cenário vai ser o da Reitoria! Afinal, os prédios são parecidos.
Depois de tomadas as decisões, o próximo passo foi bater as fotografias, da Reitoria (cenário) e de mim (personagem).

Comentário Aula Conjunta

Bem interessante a ideia em si da aula conjunta, trazendo uma maior interação com os professores e também juntando conhecimentos.
O jogo levado pelo professor Melo realmente nos mostra um contraste, estamos acostumados a admirar jogos com super efeitos, complexa computação gráfica.. enfim, além do contraste também nos mostrou com o exemplo a ideia de um jogo conceitual.
O trecho do filme do Kirikou, levado pela prof. Andrea, me despertou a curiosidade de assistir o filme até o fim. Gostei!
O projeto que o prof Eduardo apresentou sobre a inclusão digital foi meio que a prática de tudo o que nós estamos lendo e estudando sobre esse assunto.
As imagens levadas pelo prof Ismael foi a parte que mais me chamou atenção pela importância do contraste na "história da fotografia", digamos assim.
Dados sobre jogos não me chamam tanta atenção, mas respeito quem goste. Talvez até com o passar do curso eu possa criar esse hábito e jogar com mais frequencia.

Já tô esperando a próxima aula conjunta! ;D

Vetorização Automática

Imagem Vetorizada:




Imagem Original:

Degradê

Ficou estranho.. MASSSS.. tem quem goste.. =P

Papagaio

sombra

Efeito Photoshop

kyle

Imagem original..





Imagem vetorizada no Flash..