Design gráfico usando ferramentas livres para GNU/Linux
Design: Definição Acadêmica Esforço criativo relacionado à configuração, concepção, elaboração e definição de algo, como um objeto, uma imagem, entre outros, em geral voltados a uma determinada função.
Design: Definição Acadêmica Portanto, é um esforço criativo através do qual se projetam todo tipo de coisas, incluindo utensílios, vestimentas, peças gráficas, livros, máquinas, ambientes e (recentemente) também interfaces de programas.
Alguns Princípios do design Com eles podemos controlar melhor a diagramação de conteúdos facilitando visualização Contraste; Repetição; Alinhamento; Proximidade.
Proximidade Itens relacionados entre si devem ser agrupados. A Proximidade implica em uma relação Os itens relacionados entre si devem ser agrupados Veja para onde seus olhos se dirigem Siga uma projeção lógica da página
Proximidade? UNOPAR www.jaymeayres.orgfree.com Jayme Ayres 43-3025-6449 Londrina - Pr
Proximidade - Exemplo Jayme Ayres www.jaymeayres.orgfree.com UNOPAR 43-3025-6449 Londrina - Pr
Proximidade - Exemplo CD ROM CD infantil CD educacionais CD de lazer Editor de texto Editor gráfico Editor de slides Disquetes Impressoras Cabos CD ROM CD infantil CD educacionais CD de lazer Aplicativos Editor de texto Editor gráfico Editor de slides Hardware Disquetes Impressoras Cabos
Alinhamento Cada elemento deve ter alguma conexão visual com outro elemento da página. Amarras visuais entre os elementos Mesmo que não estejam próximos fisicamente, os elementos podem parecer conectados, relacionados, unificados a outras informações simplesmente devido ao seu posicionamento.
Alinhamento - Exemplo Jayme Ayres www.jaymeayres.orgfree.com UNOPAR 43-3025-6449 Londrina - Pr
Alinhamento - Exemplo Jayme Ayres www.jaymeayres.orgfree.com UNOPAR 43-3025-6449 Londrina - Pr
Repetição Algum aspecto do design deve ser repetido O elemento pode ser Uma fonte em bold (negrito) Um fio (linha) grosso Algum sinal de tópico Relações espaciais e etc. Exemplo clássico: Título e subtítulos de trabalhos acadêmicos
Repetição - Exemplo Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis mi dolor, lacinia et, lobortis vel, sollicitudin in, elit. Duis mi dolor, lacinia et, lobortis vel, sollicitudin in, elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Contraste Se dois itens não forem exatamente os mesmos, diferencie-os completamente Utilizar o princípio do contraste é como fazer o retoque em uma parede: não se pode combinar mais ou menos a cor; ou você encontra a cor exata ou precisará pintar a parede inteira
Contraste - Exemplo Lorem ipsum dolor sit amet Exemplos: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis mi dolor; Duis mi dolor: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fontes
Fontes Fonte, ou Tipo, é o material básico para qualquer peça de design. Seu objetivo: COMUNICAÇÃO Problema: combinar mais de um tipo de fonte Solução: aplicar uma relação que pode ser Concordante Conflitante Contrastante
Fontes - Concordante Utilização de apenas um tipo de fonte. Variações: itálico, negrito, sublinhado e um tamanho maior nos títulos. Tende a ser mais formal. Ideal para páginas com grandes textos.
Fontes - Conflito Utilização de duas ou mais fontes similares na mesma página. Em casos que se utiliza fontes similares muitas pessoas confundem e acham que foi um erro. O que não deixa de ser. Deve ser evitado.
Fontes - Contraste Função: atrair os olhos está relacionado à organização e clareza das informações Pode ser confundido com conflito.
Fontes - Categorias Estilo Antigo Moderno Serifa Grossa Sem Serifa Manuscrito Decorativo Serifado Sem serifa
Fontes - Categorias Serifa São os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras Os textos serifados são usados em blocos de texto pois, as serifas tendem a guiar o olhar através do texto Sem Serifa fontes sem-serifa costumam ser usadas em títulos e chamadas valorizam cada palavra individualmente e tendem a ter maior peso e presença para os olhos
Cores - Divisões Cores Quentes, Frias e Neutras Cores Quentes: vermelho, amarelo e laranja, que por serem fortes e excitantes. Cores Frias: tons de azul, verde e violeta, que são mais repousantes. Cores Neutra: branco, preto e cinza, em suas diversas graduações.
Cores
Cor Luz Cores Objetos que emitem luz (monitores, televisão, sol) Adição de diferentes comprimentos de onda das cores primárias de luz Vermelho + Azul (cobalto) + Verde = Branco Sistema RGB Cor Pigmento Mancha-se uma superfície sem pigmentação(branca) Mistura-se as cores secundárias da luz (também chamadas de primárias em artes plásticas) Ciano + Magenta + Amarelo = preto. Sistema CMYK
Cores - Psicodinâmica Vermelho, por exemplo, parece aguçar o nosso apetite. Azul nos ajuda a sentirmos relaxados, Amarelo é refrescante, simboliza alegria, persuasão Verde é calmante para nossos olhos e psique, por isso a natureza nos presenteia com bastante dessa cor em suas formas e florestas.
Cores em sentido oposto (Fig A) complementam uma a outra. Não devem ser usadas nas mesmas quantidades, por exemplo, 50% cada em uma mesma área, é melhor que apenas uma seja usada na maior parte da área e a outra em menor quantidade.
Quaisquer três ou quatro cores adjacentes (Fig B) possuem harmonia entre si. Poderemos observar isso na Natureza, por exemplo, as flores amarelas entre folhas verdes. Se não sabemos como combinar cores, seguindo esta orientação será mais seguro.
A Figura C ilustra uma seqüência de três cores separadas pela terceira. Qualquer uma das combinações possíveis cria um esquema de cor sensato baseado na pureza das cores.
Cores - Combinação Neste Link podemos ver um misturador que poderá ajudar os designers e webdesigner a resolver problemas com a combinação das cores
Web arte Um canal de experiências visuais, sonoras ou temporais com o visitante, tornando a navegação, uma experiência insólita, cômica, hermética, repetitiva, labiríntica, estética etc. O usuário reflete a sua relação com a máquina e com outras pessoas, no mundo onde os relacionamentos são cada vez mais mediados pela teleinformática.
Web arte Reconsidere as normas de usabilidade Desperta-se duvida e/ou interesse Compreensão ou repúdio por parte usuário isso faz com que o usuário lembre sempre do site Diferenciar Design de Arte: em quanto a mensagen, no Design está em função de quem recebe na Arte está em função de quem cria.
Web design O web design é uma extensão da prática do design, onde o foco do projeto é a criação de web sites e documentos disponíveis no ambiente da web. Aplicação de conceitos de usabilidade Consiste no emprego de tais conceitos: Planejamento Estratégico Estrutura Layout Navegadores Padrões Ferramentas Gráficas de desenvolvimento
Web design Partindo dos princípios básicos do Design deve-se lembrar que um layout para websites deverá ser: Atraente. Funcional. Comunicativo.
Web design - Recomendações Ocupar de 50 a 80% da página com conteúdo; Evitar frames, pois diminuem o espaço disponível para apresentação de conteúdo; Agrupar os diferentes tipos de informações disponíveis na página apresentando as mais importantes em primeiro lugar; Usar espaço em branco para separar conteúdos ou assuntos diferentes; Nunca use uma grande quantidade de texto todo em maiúsculas.
Casos de insucessos
Desafio Encontre neste site onde está a sessão de wallpapers.
Casos de Sucessos UOL www.uol.com.br Globo Esporte www.globoesporte.com CSS Remix www.cssremix.com CSS Beauty www.cssbeayty.com 4efx Repository www.4efx.com.br
Web design - Ferramentas Soluções em SL para um bom desenvolvimento de layout para web ou até para pequenos impressos. Comparativo com os Softwares proprietários Prós e contras entre as duas plataformas Ferramentas: Gimp Imagens geradas através de mapa de bits ou bitmaps Inkscape Desenhos Vetorias 2D Blender Renderização 3D
The GIMP
Gimp GNU Image Manipulation Program O projeto foi criado em 1995 por Spencer Kimball e Peter Mattis. Projeto Universitário Primeiro grande projeto de Código Aberto para usuáios finais (pessoas normais) Possibilidade de se escrever scripts para criar efeitos mesclando filtros
Gimp Seus usos incluem criar gráficos e logotipos, redimensionar fotos, alterar cores, combinar imagens utilizando o paradigma de camadas, remover partes indesejadas das imagens converter arquivos entre diferentes formados de imagem digital.
Gimp Princípios: Trabalhar em camadas; Trabalhar com seleção; Trabalhar com paths; Algumas ferramentas de auxílio Script de shortcuts para o PS; Script de Alinhamento; Definir pattern
Gimp Alguns detalhes entre o Gimp e o Adobe Photoshop Não existe um bom suporte ao padrão CMYK color space até a versão 2.0 Não existe um suporte para o padrão Pantone. O número de plugins para o PS é bem maior. A partir de 2004 com a melhora da blioteca GTK usuários Microsoft puderam fazer a utilização do GIMP
Gimp Workspace: Barra de Ferramentas
Gimp Workspace: Barra de Ferramentas Janela de Layers
Gimp Workspace: Barra de Ferramentas Janela de Layers Color tool
Seleção Retangular Cria uma seleção retangular em que nesta área o usuário possa fazer o que bem entender, como: Pintar a área; Retocar a área; Arredondar seus cantos; Opções extras: Modo Enevoar bordas Encolher a seleção Seleção livre
Seleção Elíptica Cria uma seleção elíptica em que nesta área o usuário possa fazer o que bem entender, como: Pintar a área; Retocar a área; Arredondar seus cantos; Opções extras: Modo Enevoar bordas Encolher a seleção Seleção livre
Detalhe em comum Modo Substituir a Seleção Atual: Retocar a área; Adicionar à Seleção: Fazer Intersecção com a Seleção Atual: Enevoar Enevoa a borda (blur ou feather) Encolher a seleção Seleção livre Selecionar todo o documento é <ctrl-a>
Seleção Livre Permite que se refine a seleção traçando através do mouse ou outro dispositivo suas bordas; Ótima para recortar fotografias - exigedestreza do usuário; Alternando as teclas <shift> e <ctrl> pode-se adicionar ou remover a seleção; Suavizar; A opção Enevoar Bordas funciona como nas outras.
Seleção Contígua Seleciona cores similares à cor da região que for clicada. Seleciona áreas transparentes; Usar amostra combinada em calcula a seleção com base em todas as camadas visíveis; Limite: cores similares quanto maior o limite maior a abrangência da seleção
Seleção por Cor Esta ferramenta funciona de forma bem similar a seleção de regiões contíguas, no entanto, seleciona instantaneamente cores similares em toda a imagem. Funciona bem com cores sólidas e não com texturas e degradès. As opções são idênticas às da ferramenta de Seleção Contíguas
Tesoura Esta ferramenta funciona de forma bem similar a seleção de regiões contíguas, no entanto, seleciona instantaneamente cores similares em toda a imagem. Funciona bem com cores sólidas e não com texturas e degradès. As opções são idênticas às da ferramenta de Seleção Contíguas
Vetores Também chamada de Bezier esta ferramenta cria objetos de vetores (ou caminhos) em uma camada a parte da camada de bitmap. Muito útil para recortes (aliada a ferramenta de seleção Desenhos complexos Gráficos Com as teclas <alt>, <shift> e <ctrl> há alternação nas diferentes funções de edição
Na imagem podemos ver uma edição usando a curva de Bezier para a criação de uma forma arredondada. Deste vetor podemos criar uma seleção e depois de criado pode-se pintar, retocar, recortar e etc. Vetores
Vetores A partir de uma seleção, podese criar um vetor/path A seleção é carregada através da opção Carregar seleção do canal Alfa Usando uma ferramenta parecida cria-se um vetor através da seleção
Seletor de Cores Não altera a imagem; As opções são: Amostra média cálculo da média de variação de cor conforme o raio determinado Usar amostra combinada opção de selecionar a cor em outras camadas dica: habilitar esta função
Zoom Controle de porcentagem de aproximação Indispensável em recortes e desenhos baseados em seleções para criação de vetores Ampliação
Medidas Não causa alteração na imagem; Informa a distância entre dois pontos na imagem Ângulo formado entre a linha que une esses dois pontos e a horizontal.
Mover Permite que uma parte da imagem, ou uma camada, seja arrastada com o mouse para qualquer outro ponto do espaço da imagem. Opções extras: Mover camada; Mover seleção; Mover path.
Cortar Ferramenta para guilhotinar imagens; Útil para web designers; Útil para profissionais que trabalham com fotos;
Rotacionar Do grupo de ferramentas de transformação; Esta permite a rotação de uma imagem, seleção ou path; Dica: Na maioria dos casos, deixar a opção Super-Amostragem (melhora o serrilhado) marcada antes de rotacional
Redimensionar Segunda ferramenta do grupo de transformação; Permite que se redimensione partes ou detalhes de uma imagem. Dica: Redimensionar imagens de fotografia é melhor que se use a opção Redimensionar no menu Imagem
Inclinar Certamente a transformação menos utilizada; Seu uso restringe a distorcer um objeto para obtenção de um efeito Talvez seu melhor uso seja para aplicar efeitos especiais em textos.
Perspectiva Ferramenta mais flexível do grupo de transformação de imagens; Permite a transformação de forma independente os quatro pontos dos cantos do retângulo a ser transformado; Corrigir perspectivas de imagens.
Espelhar A mais simples das ferramentas de transformação, porém muito útil, pois nos casos de espelhamento de um objeto côncavo, por exemplo, pode se obter um cículo apenas.
Texto Adiciona um texto à imagem; Nas opções encontramos: Suavizar; Modifica tamanho; Cor; Parágrafo; Espaçamento entre linhas e letras
Preenchimento Adiciona uma cor pura, um degradê ou textura a uma imagem ou seleção; Opções: Modo do preechimento: Normal Dissolver Atrás Multiplicar Dividir Esconder Sub-exposição Super-exposição Luz Dura e Suave Extrair e mesclar grãos Etc.
Preenchimento c/ Mistura / Degradê Mistura ou Degradê vem do inglês Blend, ou seja, mistura suave entre as cores. Esta é uma ótima ferramenta para optenção de sombras; Dentre as opções desta ferramentas temos: Linear Radial Cônico e Cônico Assimétrico Acompanha Forma (Angular):
Preenchimento c/ Mistura / Degradê Acompanha Forma (Esférico); Acompanha Forma (com ondas); Espiral (sentido horário); Espiral (sentido anti-horário); Reticulado (deixar esta opção sempre ativada)
Lápis A primeira ferramenta de desenho a mão livre; Risco rebuscado; Ótimo para preenchimento sólido, sem variação
Pincel Ótimo controle de serrilhado (aliasing) e blur na ferramenta de pincel. Tem as mesmas funções da ferramenta de lápis.
Borracha Esta ferramenta "apaga" partes do desenho. Diminui a opacidade nos pontos da imagem
Aerógrafo Talvez a ferramenta de pintura mais importante para quem tem dons artísticos Aerógrafo X Pincel Ao se manter o botão do mouse pressionado, mesmo que não se movimente o cursor, o aerógrafo vai adicionando cor à imagem, de maneira gradativa.
Tinta Esta ferramenta simula o efeito de uma pena utilizando tinta nanquim; Customização da ponta da caneta; A diferença é que a ponta pode mudar de tamanho e de forma conforme a velocidade com que se desenha. Funciona bem com mesas digitalizadores
Clone A ferramenta de pintura mais útil para modificar ou restaurar fotografias danificadas; Funciona como um pincel a diferença é que ela copia um mapa de bits de outra parte da própria imagem
Convolver ou Blur Esta ferramenta permite que se tire de foco, ou torne mais nítida uma parte pequena da imagem; Para estas duas opções acima existem filtros (ou plugins), mas com esta ferramenta podemos agilizar pequenos retoques em imagens poupando-se tempo.
Borrar Esta ferramenta faz com que as cores presentes na imagem deslizem sobre outras. Desfocagem de movimento.
Ferramentas para Fotografias
Sub-exposição ou Super-exposição Esta ferramenta pode atuar somente nas áreas mais claras da imagem, somente nas áreas de tons médios, ou somente nos pixels escuros. Facilidade para escurecer ou clarear áreas em fotografias.
Equilíbrio de Cores Permite que se altere a mistura geral das três componentes de cor da imagem - Vermelho, Verde e Azul
Equilíbrio de Cores Regulagem seletiva de cor. Bloco de notas.lnk
Regula a matiz de cor, porém age em toda a imagem, deixando-a com um efeito monocromatica ou de duotone Colorizar
Brilho e Contraste
Divide a imagem em Preto e branco, dando um efeito de imagem fotocopiada. Funciona mais como efeito. Limite - Levels
Umas das ferramentas mais completas e complexas de um editor de bitmaps. Aplica-se em correção de cores por canal através do histograma da foto. Limite - Levels
Através da curva de tons, consegue-se a regulagem mais controlada e mais simplificada do que na regulagem por Níveis. Engloba quase todas as ferramentas de regulagem. Curvas
Truques de Seleção Em seguida veremos alguns truques com a ferramenta de seleção que vão nos ajudar a desenvolver formas e efeitos primordiais para um bom design
Esta opção encolhe uma seleção na quantidade de pixels que o usuário desejar Seleção - Encolher
Ao contrario da opção anterior, esta encolhe uma seleção na quantidade de pixels que o usuário desejar Seleção - Aumentar
Ao contrario da opção anterior, esta encolhe uma seleção na quantidade de pixels que o usuário desejar Seleção - Encolher
Seleção - Arredondar Esta opção arredondará os cantos de uma seleção em foma
Inkscape
Inkscape - Introdução Fork do Sodipodi; Editor de gráficos vetoriais de código aberto,com similaridades ao Adobe Illustrator e CorelDraw; Formato padrão de arquivo é o SVG, que é uma subdefinição (DTD) da linguagem XML; Trabalha com a intuitividade do usuário; Problemas com arquivos de imagem incorporados vínculo.
Inkscape - Introdução Usado para fazer gráficos e desenhos simples; Fluxogramas; Plantas baixas; Plantas para cabeamento Etc. Desenhos complexos: Desenhos vetoriais usando degradês; Efeitos de sombra e luminosidade Desenhos no estilo cartoon
Inkscape - Introdução Visão Geral da Tela do Inkscape 0.44
Inkscape - Introdução 1. Barra do Menus. 2. Barra de comandos. 3. Controle de ferramentas. 4. Caixa de ferramentas. 5. Área para desenho. 6. Paleta de cores. 7. Barra de status
Inkscape - Introdução
Inkscape - Introdução 1. Barra do Menus. 2. Barra de comandos. 3. Controle de ferramentas.
4. Caixa de ferramentas. 5. Área para desenho. 6. Régua Inkscape - Introdução
6. Paleta de cores. 7. Barra de status Inkscape - Introdução
Inkscape - Introdução Um detalhe importante é que conforme troca-se de ferramentas muda-se também Controle de Ferramentas; Facilita o workspace; Economiza tempo;
Inkscape teclas de atalho Eficiência; Poupa tempo; Intuitivo;
Ferramentas e Controle
Ferramentas de Seleção Ferramenta de controle de seleção: Rotaciona 90 graus para direita e esquerda; Inverte o objeto de lado (flip); Avança o objeto para trás e para frente; Manda o objeto para trás e para frente; Ferramentas de proporção: Preenchimento Fios Degradês e etc.
Ferramentas de Seleção Seleciona objetos; Redimensiona; Rotaciona; Deforma Ferramenta de controle de seleção:
Alteração de nós ou alças de controle Adição e subtração; Soldagem e aparagem; Edição de alças; Transformar curvas em retas; Suavização de curvas e transformação de retas; Quebra objetos em nó; Quebra de fio em nós;
Ampliar e reduzir Zoom Reduzir e ampliar; Seleção free de zoom; Zoom do objeto; Zoom da página; Largura do objeto; Histórico; 1:1, 1:2, 2:1.
Criar Retângulos Criar um retângulo ou um quadrado Arredondar suas bordas com as abas; Alterar/Deformar seu tamanho com as abas; Informações sobre o tamanho e etc.
Criar Elipses Criar uma elipse; Alterar/Deformar seu tamanho com as alças; Formatar um arco.
Criar Estrelas e Polígonos Criar uma estrela ou um polígono; Alterar/Deformar seu tamanho com as alças;
Criar Espirais Criar um espiral; Alterar/Deformar seu tamanho com as alças;
Criar Linhas Criar desenhos a mão-livre; Suavização nas curvas.
Criar Linhas com a curva de Bezier Criar desenhos a mão-livre; Suavização nas curvas através de alças de controle para o ângulo da curvatura.
Criar Linhas Caligráficas Criar desenhos a mão-livre com uma ponta angulada; Muito usado para se produzir um efeito de fita.
Ferramenta de Texto Criação de texto; Escolha do tamanho e tipo de fonte; Parágrafo; Orientação do texto
Conectores Criar conexão entre objetos; Muito usado em fluxogramas e organogramas. Controle de linhas e; Controle de espaçamento;
Preenchimento em Degradê Criar preenchimentos em que duas ou mas cores possam ser mescladas; Criação de efeito de sombra ou volume; Controle de degradê linear ou radia; Duplicação do estilo do degradê; Edição das cores
Captura de cor ou Conta-Gotas Captura cor de outros objetos; Incluem-se bitmaps;
Janelas adicionais Editar estilos de cor de preenchimento; Largura, expessura e cor de fio; Editar caixa de texto; Editor XML; Janela de alinhamento
Janelas adicionais
Editar caixa de texto; Janelas adicionais
Editor XML Janelas adicionais
Janela de alinhamento Janelas adicionais
Blend er
Blender - Introdução Criado em 1998 e a partir de 2002 foi distribuído pela licença GPL. Aplicações em arquitetura, design industrial, engenharia, animação, vídeo, desenvolvimento de games, entre outros. Softwares similares proprietários: 3dstudio Rhinoceros3d Maya 3d
Blender - Workspace Trabalha com conceito de subdivisão de áreas de trabalho Customização da área de trabalho; Ganho de espaço para modelagem;
Blender - Workspace
Blender - 3DWindow Conceitos de navegação: BEM Botão Esquerdo do Mouse BMM Botão do Meio do Mouse BDM Botão Direito do Mouse Usando o botão do meio do mouse (BMM) e arrastando, você pode rotacionar sua visão. Segurando [SHIFT]+BMM ou [SHIFT]+[ALT]+BEM você pode MOVER a visão para cima, baixo ou para os lados.
Blender - 3DWindow Segurando [CONTROL]+BMM, ou [CONTROL]+[ALT]+BEM ou simplesmente usando a Roda do Mouse, você pode dar ZOOM na visão. Se estiver perdido o botão HOME volta a vizualiação normal. O teclado numérico combinado com as teclas ALT, SHIFT e CTRL também funcionam como navegadores no workspace
Blender - Mesh O Blender trata os OBJETOS como MESH; Apertando [ESPAÇO] na 3DWindow, é aberto o Toolbox, onde você tem acesso à maioria dos comandos disponíveis.
Blender - Mesh Selecionar um objeto BDM Modo de edição TAB para sair Edição de vários pontos B + [BEM] arrasta CTRL + e adiciona pontos adjacentes
Blender - Mesh Tutoriais BásicoB Blender 3d - Guia de sobrevivência TUTORIAIS Conhecendo Blender 3d TUTORIAIS
Gimp Tutoriais BásicosB Mudando o tamanho da imagem; Compressão em jpeg; Cortar uma imagem; Mudar o sistema de cores; Rotacionando uma imagem
Gimp Tutoriais BásicosB Pintando uma seleção; Fazendo um fio; Criando simples vetores (Seleções através dos vetores) Remover olhos vermelhos (canais)
Gimp Tutoriais Intermediário rio Fazendo um simples Cubo com a ferramenta de vetor (path). Demais tutoriais no site oficial. TUTORIAIS
Inkscape Tutoriais Básicos: Explorando a barra de ferramentas TUTORIAIS