• Contato
  • Agni na mídia
  • Quem sou eu?
  • Agni.art

    Padrões Web, Design, Publicidade, Software Livre, e outras histórias!

    posts com a tag ‘photoshop’

    Conceitos de Design: função das letras, cores e formas

    Qual é a real função do design?

    Qual é a real função do design?

    Design está na moda. Usam essa palavra para se referir a uma porção de coisas, e que nem sempre tem de fato relação com Design. Essa palavra chama a atenção em capas de revista, temas de palestras, cursos e campanhas publicitárias. As várias interpretações e o pouco esclarecimento sobre a real função do Design geram uma grande confusão e pouca eficácia no processo de criação, principalmente para quem está começando na área.

    “Tio, o que é Design?”

    Design refere-se ao projeto visual e funcional de um produto, a adaptação de um produto a necessidade dos seus usuários, cativando o seu uso através da estética, aplicando-se conceitos e usabilidade a sua forma. Porém não é difícil encontrar profissionais, empresas, cursos, matérias de revistas e conversas de botequim, associando o Design à produção de imagens, ou resumindo-o a manipulação de um software específico.

    Vale sempre lembrar que um software é apenas uma ferramenta, e por si só não garante a qualidade do projeto. Nenhum software deve ser encarado como uma solução pronta. Existem diversos softwares diferentes e com funções similares, e a escolha sobre qual utilizar deve ser de cada profissional. A definição do que é Design vai muito além do Photoshop!

    Design é uma área projetual. Sua função é responsável por gerar desempenho, qualidade, durabilidade e aparência a um produto. Cada trabalho a ser realizado exige planejamento, pesquisa, criatividade e técnica. Ao contrário do que muitos pensam, a função do Design não está vinculada pura e simplesmente a produção de imagens.

    O Design para Web

    O webdesign é um fragmento do design. Não existe webdesigner. Existe o designer que faz web, e este profissional tem que aprender tudo, tipografia, fotografia, semiótica, gestalt, matemática, ótica, percepção, comportamento humano, etc. Senão, ele não consegue fazer web (Alexandre Wollner).

    Costumo dizer que o design para web chega a ser mais multidisciplinar que em outras vertentes. Hoje o profissional de webdesign, para elaborar um projeto coerente, precisa trabalhar em conjunto com diversos outros profissionais como arquitetos de informação, webwriters ou programadores (isso quando ele próprio não acaba assumindo uma dessas funções). No desenvolvimento de um website, além do trabalho de criação alguns outros conhecimentos são importantes para que o projeto forneça soluções eficientes e eficazes em usabilidade, desempenho e comunicação, focadas nas necessidades do público-alvo. Não é um trabalho apenas criativo, mas também de planejamento e de pesquisa. Produzir um Web Site inevitavelmente exige “pensar”.

    Portanto, além da manipulação de Softwares, existem alguns métodos de planejamento e pesquisa que se deve conhecer, além de conceitos sobre como trabalhar a pregnância da forma.

    Briefing: coletando as informações

    Todo projeto deve começar com um briefing. Ele é o documento onde são colocadas as informações e dados necessários para a criação de qualquer projeto. Utilizar elementos dentro de qualquer peça gráfica sem um estudo do caso é um equívoco que compromete a comunicação e a funcionalidade. Há que se levar em consideração diversos fatores tais como: o objetivo do projeto, o produto a ser divulgado, o público-alvo (sexo, idade, cultura, classe social, e outras informações relevantes), identidade visual existente, motivações e propósitos, informações sobre o cliente, a prioridade das informações, a imagem a ser transmitida, etc. Para realizar tal estudo, nada melhor do que ter em mãos um briefing bem elaborado. Se não temos em nossa equipe um profissional de atendimento, o ideal para a elaboração desse documento é se reunir com o cliente, tirando suas dúvidas, esclarecendo detalhes e orientando-o sobre conceitos e tecnologias. Quando esse processo de elaboração não é possível de se realizar com o cliente, pode-se enviar a ele um documento com perguntas a serem respondidas, o que nem sempre é satisfatório. É possível encontrar vários modelos e exemplos de briefing na Web, dando uma noção de como esse documento deve ser feito. No entanto o ideal é não seguir um modelo, e sim elaborá-lo sempre de acordo com a necessidade do projeto.

    A arquitetura de informação

    Trata-se de como organizar a estrutura da interface e a distribuição das informações, categorizar conteúdos (taxonomia), além de priorizar a comunicação de informações mais relevantes. O documento apropriado para especificar a ordem e o posicionamento dos elementos que vão compor a página é o wireframe. Através de uma forma esquemática, ele representa a distribuição e a hierarquia das informações a serem comunicadas. A partir dos posicionamentos do wireframe é que se constrói o Layout.

    Layout: transformando a informação em comunicação

    Uma vez que uma das funções do design é transformar informação em comunicação, nenhum elemento dentro do layout deve estar lá sem comunicar algo. Elementos desnecessários podem confundir, poluir e dificultar o acesso e o entendimento das informações. Para um bom trabalho, é necessário fazer um estudo de conceitos visuais e de comunicação. Deve-se ter consciência do porque usar determinadas cores, fontes e formas, e quais sensações esses elementos estão transmitindo ao usuário.

    As cores

    A percepção que temos das cores proporciona diferentes emoções e estados de ânimos em nós, e por isso elas têm poder de comunicação bem maior do que se imagina. É importante saber trabalhar com o equilíbrio e com a psicodinâmica das cores, para que elas transmitam as sensações desejadas. Cada cor transmite uma informação, sensação ou emoção diferente, isso dependendo da cultura do público-alvo, do contexto, ou mesmo das outras cores com a qual ela é combinada.

    Uma boa introdução neste assunto é encontrada no site Color in Motion, que por meio de uma animação, dá exemplos de sensações e emoções que cada cor pode representar. Uma fonte de informação mais consistente sobre o assunto pode ser o livro Psicodinâmica das Cores em Comunicação.

    Para elaborar uma paleta de cores com equilíbrio, é importante saber como trabalhar as combinações cromáticas, por mais que se saiba que cores transmitem as sensações desejadas. Uma ótima ferramenta que pode nos auxiliar na elaboração de uma paleta de cores é encontrada no site http://kuler.adobe.com.

    A Tipografia

    Toda ideia a ser transmitida é traduzida através de letras. É importante possuir um bom conhecimento de como trabalhar com a tipografia na web, priorizando sempre uma boa legibilidade e respeitando o contexto do projeto. Diferentemente da limitação de outras épocas, hoje temos alguns recursos na tipografia para web que nos permitem maiores possibilidades, como é o caso da biblioteca Cufón e do Google Font Directory. Existem diversas famílias tipográficas, cada qual com uma aplicação específica, de acordo com o contexto. Saber escolher bem a tipografia a ser usada em um projeto é um ponto importante na comunicação.

    Uma boa fonte de informação para quem está começando e quer se aprofundar no assunto é o livro Manual de tipografia.

    As formas

    Outro fator relevante na pregnância da forma é a aplicação das leis da Gestalt em nosso projeto. Segundo a Wikipédia, Gestalt é um termo intraduzível do alemão, utilizado para abarcar a teoria da percepção visual baseada na psicologia da forma. Aprendendo a analisar as manifestações visuais e objetos ao redor, compreendemos melhor o porquê algumas formas agradam e outras não, podendo assim trabalharmos esses fatores em nossos projetos. O estudo da Gestalt compreende a “integração das partes em oposição à soma do todo: estrutura, figura e forma”. Leis da Gestalt, como unificação e segregação, fechamento, boa continuidade, proximidade e semelhança, ajudam a orientar o processo de criação e obter resultados satisfatórios.

    Uma boa referência de estudo sobre o assunto é o livro “Gestalt do Objeto: Leitura Visual da Forma“, do professor João Gomes Filho.

    Seu desenho vai virar código, e agora?

    Não podemos criar um bom projeto gráfico para um site se não compreendermos o potencial da web como mídia interativa, e todas as possibilidades e limitações que isso nos trás.

    Também é importante sabermos a forma que a informação é estruturada na web. Conhecimentos em HTML e principalmente CSS acabam sendo indispensáveis na hora de criamos um layout que possua uma implementação viável e proporcione um bom desempenho para o site, assim como facilidade de manutenção e boa acessibilidade. Conhecer CSS e saber explorar da melhor forma possível os seus recursos logo na concepção do projeto gráfico pode fazer toda a diferença. CSS é uma linguagem simples, e quanto mais experiencia você possuir com ela, melhor será a criação dos seus layouts.

    Como disse certa vez Chris Coyier em seu perfil no Twitter, “CSS é como xadrez: você pode aprender os princípios em um dia, e passar a vida inteira se especializando”.

    Então, já sabe o que é design? E webdesign?

    Os processos e conceitos necessários para se tornar um designer não se encerram aqui. Outros conhecimentos, como semiótica, antropologia, arte, técnicas de composição, além da busca de boas influências, são essenciais na formação de um profissional. Porém, a partir daqui pode-se ter uma compreensão mais clara do que é Design, além de uma direção para iniciar os estudos e o trabalho.

    Gostou? Então assine o RSS e siga-me no Twitter!

    Este artigo foi publicado originalmente em 4 de setembro de 2007, e revisado e atualizado em 4 de agosto de 2010.

    Instalando e testando o GIMP 2.7.1 no Ubuntu Lucid Lynx

    O Lucid Linx, recém lançada versão 10.04 do Ubuntu, não traz o GIMP como editor de imagens nativo em sua instalação. Em seu lugar entraram o editor de vídeos Pitivi e o gerenciador de imagens F-Spot, que ganhou novas funcionalidades de edição. Mas o GIMP ainda pode ser facilmente instalado a partir da Central de Programas do Ubuntu.

    Entre os argumentos da Canonical para a saída do GIMP está o fato de ele ser considerado uma aplicação mais “profissional”, com uma interface complexa demais para os usuários do Ubuntu. Apesar de ter alguns usuários mais antigos como adeptos, e até mesmo alguns usuários simpatizantes que aprenderam a editar imagens com o GIMP, fato é que um dos principais motivos para a pouca popularidade desta ferramenta sempre foi a sua interface em três janelas flutuantes, que causa estranheza e desconforto na grande maioria dos usuários que tentam migrar de outros editores como o Photoshop.

    Cedendo as incansáveis reclamações de usuários, os desenvolvedores da ferramenta decidiram implementar na próxima versão do GIMP o modo de “janela única”, mais parecido com outros editores, e que possibilitará uma migração mais confortável e uma curva de aprendizagem mais suave.

    O GIMP 2.8 será a próxima versão estável do editor. Enquanto isso, caso você queira conferir alguns dos novos recursos, é possível instalar e versão de desenvolvimento, que ainda é instável e pode conter alguns bugs, mas que vale a pena dar uma conferida!

    Instalando o GIMP 2.7.1

    Para fazer a instalação, vamos adicionar o repositório PPA Oficial do GIMP 2.7.1. Abra a janela do terminal e digite o comando abaixo:

    $ sudo sh -c "echo 'deb http://ppa.launchpad.net/matthaeus123/mrw-gimp-svn/ubuntu lucid main' >> /etc/apt/sources.list"

    Depois de adicionar o PPA, é preciso adicionar a chave GPG. Para isso, digite no Terminal o comando abaixo:

    $ sudo apt-key adv –recv-keys –keyserver keyserver.ubuntu.com 405A15CB

    Em seguida podemos atualizar os repositórios:

    $ sudo apt-get update

    Depois disso, estamos prontos para instalar o GIMP 2.7.1:

    $ sudo apt-get install gimp

    Atualizando: uma forma mais fácil

    Recebi dois comentários nesse post, dos usuários Rafael Raposo e Fabricio Biazzotto, sugerindo uma forma mais simples de fazer a instalação, adicionando o repositório já com a chave GPG. Segue abaixo:

    $ sudo add-apt-repository ppa:matthaeus123/mrw-gimp-svn
    $ sudo apt-get update
    $ sudo apt-get install gimp

    Agradeço ao Rafael e ao Fabricio pela colaboração ;)

    Janela Unificada

    Ao iniciar o GIMP 2.7.1 você vai perceber que ele ainda está com as três janelas flutuantes, além de um bug que faz com que a interface misture o Inglês com o Português.

    Para ativar a interface com janela unificada, basta ir até o menu Window e clicar na opção Single-window mode. Esse novo formato da interface faz com que várias imagens possam ser abertas para edição na mesma janela, sendo divididas em abas.

    Ainda existe um bug que faz com que tenhamos que ativar esse recurso a cada inicialização do GIMP.

    single-windows-mode

    Utilizando o GIMP com uma janela unificada

    Alguns dos novos recursos

    Agrupando camadas

    A nova possibilidade de agrupar camadas em pastas facilitará a tarefa de criar layouts mais complexos sem se perder. Podemos agrupar, mover ou ocultar várias camadas de uma só vez. Alguns recursos ainda precisam ser aprimorados, como a possibilidade de aplicar uma máscara ao grupo de camadas.

    Tageamento de recursos

    O GIMP se tornou ideal para quem trabalha com uma grande quantidade de pincéis, gradientes ou texturas, com a possibilidade de organizar esses recursos através de tags. Dessa forma, o usuário pode filtrar esses recursos através de uma tag específica.

    Salvar ou exportar

    Na nova versão, a opção de salvar arquivos se limita aos formatos nativos do GIMP, como o XCF. Foi adicionado ao menu uma opção para exportar as imagens para outros formatos como JPG ou PNG, o que para mim faz muito mais sentido.

    Pincéis dinâmicos e rotativos

    Agora os usuários poderão incrementar suas pinturas no GIMP aproveitando o suporte a pincéis rotativos, ou a possibilidades de alterar o aspecto de proporcionalidade e inclinação.

    Nova ferramenta de edição de textos

    Ferramenta de texto no GIMP

    Uma nova forma de se trabalhar com textos no GIMP

    Uma das novidades que mais me empolgaram é a possibilidade de trabalhar com textos diretamente na camada, sem que seja necessário edita-lo numa janela separada. Sobre o texto em edição ainda são exibidos atalhos para estilos como negrito e itálico. Porém a nova ferramenta ainda deixa a desejar em alguns aspectos, como a possibilidade de formatar apenas um trecho do texto dentro do bloco.

    1, 2… Testando!

    Todos esses novos recursos citados e outros mais ainda estão sendo testados e aprimorados. O GIMP 2.7.1 ainda é uma versão em desenvolvimento e instável, não recomendada para o trabalho de produção.

    Nos testes que eu realizei, apesar dos pequenos bugs a ferramenta se saiu muito bem, não apresentando problema algum nas edições feitas.

    Fique a vontade para testar e conferir por você mesmo a evolução dessa poderosa ferramenta, e ver que não vai demorar muito para termos uma alternativa livre totalmente a altura de qualquer tarefa de produção e edição de imagens :)

    Referências

    Porque usar Software Livre no Design?

    Ano novo, expectativas novas… Mas algumas questões ainda permanecem!

    Sendo eu um profissional de Criação, e utilizando constantemente no trabalho um iMac e as ferramentas da Creative Suite da Adobe, nunca escondi a minha predileção pelo uso de Software Livre para a área de Design, tendo inclusive ministrado várias oficinas sobre essas ferramentas. Em qualquer projeto que não envolva o meu “emprego oficial”, estou sempre adotando o uso de ferramentas como GIMP e Inkscape, dentro do Ubuntu Studio.

    Uma porção de vezes pude ouvir de outros colegas de profissão comentários do tipo “mas Photoshop[bb] não é melhor?” ou então “Linux não é coisa de Hacker?”. Vamos pensar em algumas respostas…

    As ferramentas livres para Design, como GIMP ou Inkscape, superam ferramentas proprietárias?

    Na minha sincera opinião, não. Apesar de eu considerar ferramentas para Desenho Vetorial como o Inkscape e o XaraXtreme melhores do que o Corel Draw, não posso dizer que as ferramentas livres superam softwares como o Photoshop, Illustrator ou Indesign. A quantidade e qualidade dos recursos, a interface, ícones, atalhos, automatização, ainda são superiores nas ferramentas proprietárias.

    Nesses aspectos, considero que os motivos para isso sejam os seguintes:

    1. Ferramentas livres como GIMP e Inkscape não tem tanto tempo de existência quanto as ferramentas proprietárias mais usadas. Penso, por exemplo, que o GIMP se equipara a versões mais antigas do Photoshop;
    2. Nas comunidades que desenvolvem essas ferramentas livres, não existem tantos Designers para um aprimoramento mais refinado das Interfaces, a Iconografia não é tão bem trabalhada, e nem parece haver um planejamento adequado das funcionalidades. Constantemente a comunidade do Software Livre[bb] considera como “Designers” pessoas que sabem simplesmente manipular bem um software de Edição de Imagens. Porém o Design se referencia muito mais como Projeto, e vários estudos e conceitos são necessários para um Projeto Gráfico coerente, e uma Usabilidade consistente. Creio que Desenvolvedores não são as pessoas mais apropriadas para trabalharem nessas questões;
    3. O Suporte a CMYK e Pantone dessas ferramentas, por mais que sejam possíveis com softwares como Scribus para a área de Desktop Publishing, e por mais que venham evoluindo em ferramentas como GIMP e Inkscape, não tem ainda uma consistência adequada para um trabalho mais profissional;

    É possível trabalhar com Criação utilizando somente Software Livre?

    Creio que profissionalmente na área de Desktop Publishing, ainda não é possível. Isso devido a recursos limitados dos Softwares e dificuldades no fechamento dos arquivos para impressão.

    Porém, na área da Web é totalmente possível, isso pelo simples fato de que o processo de criação não depende de uma ferramenta, e sim de conceitos aplicados. Não adianta saber como uma ferramenta funciona se você não souber o que fazer com ela. Para trabalhar com criação, devemos ter conhecimentos multidisciplinares, assim como disse Alexandre Wollner:

    “O Web Design é um fragmento do Design. Não existe Web Designer. Existe o Designer que faz Web, e este profissional tem que aprender tudo, tipografia, fotografia, semiótica, gestalt, matemática, ótica, percepção, comportamento humano, etc. Senão, ele não consegue fazer Web.”

    Acredito muito na ideia da Relação 80/20 aplicada aos softwares, isto é, executamos 80% das tarefas utilizando apenas 20% das ferramentas disponíveis. Acredito também que o uso excessivo de recursos, brushers e efeitos prontos dos softwares proprietários acaba criando certos clichês e tendências desnecessárias no Design, fazendo com que os projetos gráficos percam o foco no público-alvo, e acostumando o Mercado a ideia de não haver necessidade de estudo para a criação das peças gráficas. Cria-se assim uma necessidade estética sem função definida.

    Porque eu uso Software Livre na área de criação?

    Considero o uso de ferramentas como GIMP e Inkscape um estímulo ao processo de criação. Penso que não devemos ser dependentes de uma ferramenta específica para qualquer tipo de trabalho, e acredito que a qualidade dos projetos não deve estar vinculada ao uso de um software, e sim ao talento do profissional. Essa afirmação não é de forma alguma um atestado de inferioridade das ferramentas livres. Apesar de ainda ter muito o que evoluir (o que é natural), essas ferramentas tem sim grande qualidade e potencial.

    Também acredito em outras questões – essas sim de cunho mais ideológico – de que o que impulsiona o Movimento pelo Software Livre não é o fato de o mesmo ser “Economicamente viável” ou “Tecnologicamente sustentável”, mas sim o fato de ser “Socialmente Justo”. Acredito que para haver uma independência econômica para o Brasil e outros países, uma das principais necessidades é que se tenha autonomia tecnológica. As possibilidades que os Softwares Livres trazem para o aprendizado e a produção tecnológica permite que seja reduzida a dependência que temos hoje das empresas estrangeiras, e o uso de ferramentas livres estimula a produção de software de código aberto, ajudando a proporcionar essa autonomia tecnológica.

    E você, por acaso já testou alguma dessas ferramentas? Já tentou editar suas imagens com o GIMP, ou fazer seus desenhos no Inkscape? Faça o download e experimente, assim sem compromisso mesmo :)

    Return top