Em breve postarei mais materiais produzidos.

Trabalhar com Flash na web requer sempre arquivos o mais leves possíveis para não pesar no carregamento do site. Esse foi o desafio do job, já que a RBS exige tamanhos de arquivos bem pequenos para veicular no seu site.

A animação dos banners ficaram simples e não teve como fugir disto, o arquivo precisava ser leve. Os banners pordem ser visto aqui.

Há algumas dicas que deixo aqui para otimizar o tamanho dos arquivos em Flash e que me ajudaram nesse trabalho. Há bastante conteúdo sobre o assunto, inclusive no próprio Help da Adobe.

• Imagens
• Vetores
• Fontes

É recomendável compactar a qualidade das imagens já no Photoshop, exportando para formatos Web. Para isso, vá em File -> Save for Web & Devices…

A qualidade você pode ajustar e já ver o tamanho que vai ficar na janela seguinte. Abaixo de 60 dependendo da imagem já é possível perceber perda na qualidade. No caso dos banners, tive que sacrificar bastante a qualidade das imagens bitmap para ter uma boa redução no tamanho do arquivo.

Procure usar JPEG ou GIF, são formatos mais leves.

Use quando possível imagens vetoriais ao invés de bitmaps, elas são mais leves. Aqui você encontra mais informações sobre a diferença entre bitmap e vetor.

Mas nem sempre imagens vetoriais indicam menor tamanho, por exemplo se você estiver importando para o Flash vetores com gradientes vindos do Corel. O Flash irá dividir cada variação de cor do gradiente, pesando muito no tamanho do arquivo.
A imagem abaixo mostra o exemplo.

No caso de gradientes vindo do Illustrator, pelo que testei esse problema não ocorre.

Limite a quantidade de estilos de fontes no arquivo.

Quando a arte é feita no Illustrator e você importa o .ai para o Flash, percebi que quando gerava o .swf o arquivo ficava mais pesado do que quando eu digitava novamente o texto dentro do Flash, substituindo o vindo do Illustrator.

Evitei também quebrar as fontes em partes (Modify -> Break a part), li em sites que quebrando as fontes em partes deixa o arquivo mais leve, mas nesse trabalho acabou provando o contrário. Se alguém souber o motivo disso ocorrer me avise!

Doing some Google search I found that you can create a hotkey for that, wich was so handy to me.

- All you need to do is go to Script -> Script Manager (Cinema 4D R13) or Window -> Script Manager (Cinema 4D  R12)
- In the Script Manager window, go to File -> New, set a name and paste this code: CallCommand(100004769);

- Then, hit the Shortcut… button and assign the keys that  you want to trigger the action.

That’s it, you will see how this little tip could improve your work speed.

 ** UPDATE **

There is no need to create a script to assign  a shortcut to Scroll to First Active, since there is already an option for it in “Customize Commands… (R13)” or “Command Manager (R12)”, go straight there.

O toque final ficou por conta da Caravela, que trabalhou na pós adicionando detalhes e correções de cor.

Cada objeto foi modelado em um arquivo separado e colocados em Null objects para facilitar na organização, já que contava com mais de 500 objetos no Object Manager e se perder no meio de tantos itens era fácil de acontecer.

No próximo post irei abordar uma dica no Cinema 4D que otimizou meu workflow.

]]> http://francoandrade.com/site/cinema-4d/mapa-3d/feed/ 0 http://francoandrade.com/site/cinema-4d/criado-mudo/ http://francoandrade.com/site/cinema-4d/criado-mudo/#comments Mon, 19 Dec 2011 10:45:01 +0000 admin http://francoandrade.com/site/?p=645 Durante essa semana recebi o conceito de um produto em que tive que o modelar em 3d para a apresentação de um trabalho de conclusão de curso em design de produto.
O objeto foi um criado-mudo.

Neste projeto tive que trabalhar em cima de medidas exatas, recebi as vistas frontal, lateral e topo para poder modelar a partir delas.

No Cinema 4D há uma ferramenta para quando se precisa trabalhar com medidas exatas, chamada Measure & Construction. Foi uma salvação ter usado ela!

Outros renders do objeto podem ser visto na seção Portfolio.

Tínhamos a liberdade para modificar a atual marca do Big, porém optamos em criar uma marca secundária que funcionaria como um selo, a Big Sustentável.
Nossas justificativas para não alterar a atual marca e sim criar uma secundária, foram:

• Custo elevado para trocar peças e sinalização já existentes em todas as lojas do Big;
•  Impacto muito grande na identidade do supermercado ao alterar a atual marca bruscamente (mudando cores, adicionando elementos gráficos, etc.);
•  Já é uma marca reconhecida pela sua cor e simplicidade.

Após alguns meses de ajustes nas propostas, cheguei a este resultado:

Trabalhar nesse projeto nos forçou a fazer diversas pesquisas nos concorrentes, sobre a empresa e algumas visitas em campo. Partir para a execução da marca só foi possível depois de muita informação coletada.
Além da marca, tivemos que elaborar uma mídia impressa e uma eletrônica. Para a mídia impressa optamos por fazer os rótulos de três produtos orgânicos (geléia, mel e café) e para eletrônica fizemos a interface de um totem eletrônico. Essas peças podem ser observadas no link Portfolio.

Toda marca acompanha um Manual de Identidade Visual, portanto elaboramos um para o Big Sustentável. Foi uma oportunidade que tive para mexer  um pouco no InDesign.
Coloco aqui como exemplo o manual de identidade visual do nosso projeto, em PDF e também o arquivo fonte aberto do InDesign (.indd) para download. É preciso ter a fonte Helvetica Neue Pro para visualizar corretamente a versão do InDesign.

Download do manual de identidade visual:
Versão .PDF      Versão .INDD

Obs: isto é um trabalho acadêmico, um projeto fictício para a rede de hipermercados Big.

Nessa semana começarei a postar alguns trabalhos desenvolvidos durante esse tempo.

Até!

Achei interessante nesse projeto criar um cronograma de tarefas e prazos para guiar o projeto, claro que não foi seguido à risca, mas me ajudou.

Alguns prints do projeto:

_______________________________________________

Tutorial – Criando um fundo repetitivo (pattern) no Photoshop

1- Primeiro de tudo, vamos criar um novo documento em File -> New, escolhi o tamanho 127px por 127px.

2– Importe a imagem a ser repetida, no caso usei meu logotipo que já está com transparência.
Para importar, vá em File -> Place e selecione a imagem.

3- Selecione a ferramenta Rectangular Marquee Tool e faça uma seleção da metade da imagem,  depois recorte (ctrl+x) e cole (ctrl+v), criando assim uma nova layer com a metade da imagem. Posicione novamente a metade de maneira que não desfigure a imagem.

4- Selecione agora a outra metade, porém dessa vez verticalmente. Com a seleção feita, vá em Select -> Save Selection, em Channel coloque New e dê um nome para a nova seleção, dê um OK.

Após feito isso, nada irá acontecer, mas você salvou a seleção que tinha. Ainda com a seleção, recorte e cole novamente e reposicione a parte colada. Você terá no final 3 partes.

5- Selecione a layer que ainda não foi cortada e vá em Select -> Load Selection para carregar a seleção que havia sido salva. Na janela que se abre, carregue a seleção e dê OK.

6- Com a seleção feita, repita o processo de recortar, colar e reposicionar a parte. No total, ficarão quatro partes. Renomeei cada layer com iniciais para facilitar a localização, direito inferior/superior, esquerdo inferior/superior.

7– Posicione agora todas as layers de forma que fiquem como se o logo não estivesse sido cortado. Depois, selecione todas as 4 layers e clique com o botão direito sobre elas e vá em Duplicate Layers, que irá criar cópias de cada layer.

8- Com essas cópias ainda selecionadas, clique  novamente com o botão direito sobre elas e vá em Merge Layers, que irá juntar todas essas 4 layers em uma só.

9– Selecione todas as layers e aperte ctrl+t para dar uma diminuída nelas, já que você vai posicionar cada pedaço fatiado nos cantos da composição e precisará de espaço.

10- Distribua cada pedaço nos cantos da composição. O pedaço inferior esquerdo, deverá ir no canto superior direito, e assim sucessivamente.

11- Aqui diminuí (ctrl+t) novamente na imagem do centro para não ficar tão junto com as outras partes.

12-  Essa parte não é necessária, selecionei a layer da imagem do centro, cliquei com o botão direito e selecionei Blending Options e adicionei um um contorno (Stroke).

13- Deixe visível o Background branco que estava desligado.

14– Vá em File -> Place para adicionar uma imagem de textura semi-transparente por cima de toda composição.  Selecione a imagem importada e em Opacity, mude para 30%. Download da imagem

15- Esta é a etapa em que você irá definir esta imagem como pattern. Vá em Edit -> Define Pattern… , dê um nome para sua pattern e clique em OK.

16– Pronto, você tem sua imagem que pode ser repetitiva! Para aplicar sua imagem em um fundo qualquer,  crie um novo arquivo de qualquer tamanho, selecione a layer que quer ter sua imagem repetida e clique com o botão direito e vá em Blending Options. Depois, selecione Pattern Overlay , escolha a que você criou e dê OK!

Você pode criar quantos patterns quiser, é só fazer as modificações no arquivo que gerou a pattern e depois sempre ir em Define Pattern para criar mais.
Para deixar o fundo repetitivo no twitter, basta enviar apenas o pattern que foi feito e marcar a opção Tiled no menu de upload.

Gostou? Compartilhe!