Design grDesign grááfico fico usandousandoferramentasferramentas livreslivres parapara
GNU/LinuxGNU/Linux
Design: DefiniDesign: Definiçção Acadêmicaã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 - Exemplo
CD ROMCD infantilCD educacionaisCD de lazerEditor de textoEditor gráficoEditor de slidesDisquetesImpressorasCabos
CD ROMCD ROMCD infantilCD educacionaisCD de lazer
AplicativosAplicativosEditor de textoEditor gráficoEditor de slides
HardwareHardwareDisquetesImpressorasCabos
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.
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, consectetueradipiscing 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, consectetueradipiscing elit.Lorem ipsum dolor sit amet, consectetueradipiscing 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
Exemplos:
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Duis mi dolor;
Duis mi dolor:
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Lorem ipsum dolor sit amet
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
− 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.
� Neste Link podemos ver um misturador que poderá ajudar os designers e webdesigner a resolver problemas com a combinação das cores
Cores - Combinação
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:
� Navegadores� Padrões� Ferramentas Gráficas de
desenvolvimento
� Planejamento Estratégico
� Estrutura� Layout
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 Sucessos
�� UOLUOL – www.uol.com.br
� Globo Esporte – www.globoesporte.com
�� CSS RemixCSS Remix – www.cssremix.com
�� CSS CSS BeautyBeauty – www.cssbeayty.com
�� 4efx Repository4efx 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
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
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
Vetores
� 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
� A partir de uma seleção, pode-se 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.
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.
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
Colorizar
• Regula a matiz de cor, porém age em toda a imagem, deixando-a com um efeito monocromatica ou de duotone
Limite - Levels
• 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.
Curvas
• 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.
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
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
• Ao contrario da opção anterior, esta encolhe uma seleção na quantidade de pixels que o usuário desejar
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
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
• Um detalhe importante é que conforme troca-se de ferramentas muda-se também Controle de Ferramentas;
• Facilita o workspace;• Economiza tempo;
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 Estrelas e Polígonos
• Criar uma estrela ou um polígono;• Alterar/Deformar seu tamanho – com as
alças;
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
Janelas adicionais
• Editar estilos de cor de preenchimento;• Largura, expessura e cor de fio;• Editar caixa de texto;• Editor XML;• Janela de alinhamento
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 - 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
Tutoriais BTutoriais Báásicosico
� Blender 3d - Guia de sobrevivência
Blender - Mesh
TUTORIAISTUTORIAIS
� Conhecendo Blender 3d
TUTORIAISTUTORIAIS
Gimp
Tutoriais BTutoriais Báásicossicos
� Mudando o tamanho da imagem;
� Compressão em jpeg;
� Cortar uma imagem;
� Mudar o sistema de cores;
� Rotacionando uma imagem
Gimp
Tutoriais BTutoriais Báásicossicos
� Pintando uma seleção;
� Fazendo um fio;
� Criando simples vetores (Seleções através dos vetores)
� Remover olhos vermelhos (canais)
Gimp
Tutoriais IntermediTutoriais Intermediááriorio
� Fazendo um simples Cubo com a ferramenta de vetor (path).
� Demais tutoriais no site oficial.
TUTORIAISTUTORIAIS
Top Related