Design: Definição Acadêmica

Transcrição

1 Design gráfico usando ferramentas livres para GNU/Linux

2 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.

3 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.

4 Alguns Princípios do design Com eles podemos controlar melhor a diagramação de conteúdos facilitando visualização Contraste; Repetição; Alinhamento; Proximidade.

5 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

6 Proximidade? UNOPAR Jayme Ayres Londrina - Pr

7 Proximidade - Exemplo Jayme Ayres UNOPAR Londrina - Pr

8 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

9 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.

10 Alinhamento - Exemplo Jayme Ayres UNOPAR Londrina - Pr

11 Alinhamento - Exemplo Jayme Ayres UNOPAR Londrina - Pr

12 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

13 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.

14 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

15 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.

16 Fontes

17 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

18 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.

19 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.

20 Fontes - Contraste Função: atrair os olhos está relacionado à organização e clareza das informações Pode ser confundido com conflito.

21 Fontes - Categorias Estilo Antigo Moderno Serifa Grossa Sem Serifa Manuscrito Decorativo Serifado Sem serifa

22 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

23 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.

24 Cores

25 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

26 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.

27 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.

28 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.

29 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.

30 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

31 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.

32 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.

33 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

34 Web design Partindo dos princípios básicos do Design deve-se lembrar que um layout para websites deverá ser: Atraente. Funcional. Comunicativo.

35 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.

36 Casos de insucessos

37 Desafio Encontre neste site onde está a sessão de wallpapers.

38

39

40

41 Casos de Sucessos UOL Globo Esporte CSS Remix CSS Beauty 4efx Repository

42 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

43 The GIMP

44 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

45 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.

46 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

47 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

48 Gimp Workspace: Barra de Ferramentas

49 Gimp Workspace: Barra de Ferramentas Janela de Layers

50 Gimp Workspace: Barra de Ferramentas Janela de Layers Color tool

51

52 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

53 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

54 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>

55 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.

56 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

57 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

58 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

59 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

60 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

61 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

62 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

63 Zoom Controle de porcentagem de aproximação Indispensável em recortes e desenhos baseados em seleções para criação de vetores Ampliação

64 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.

65 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.

66 Cortar Ferramenta para guilhotinar imagens; Útil para web designers; Útil para profissionais que trabalham com fotos;

67 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

68 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

69 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.

70 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.

71 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.

72 Texto Adiciona um texto à imagem; Nas opções encontramos: Suavizar; Modifica tamanho; Cor; Parágrafo; Espaçamento entre linhas e letras

73 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.

74 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):

75 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)

76 Lápis A primeira ferramenta de desenho a mão livre; Risco rebuscado; Ótimo para preenchimento sólido, sem variação

77 Pincel Ótimo controle de serrilhado (aliasing) e blur na ferramenta de pincel. Tem as mesmas funções da ferramenta de lápis.

78 Borracha Esta ferramenta "apaga" partes do desenho. Diminui a opacidade nos pontos da imagem

79 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.

80 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

81 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

82 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.

83 Borrar Esta ferramenta faz com que as cores presentes na imagem deslizem sobre outras. Desfocagem de movimento.

84 Ferramentas para Fotografias

85 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.

86 Equilíbrio de Cores Permite que se altere a mistura geral das três componentes de cor da imagem - Vermelho, Verde e Azul

87 Equilíbrio de Cores Regulagem seletiva de cor. Bloco de notas.lnk

88 Regula a matiz de cor, porém age em toda a imagem, deixando-a com um efeito monocromatica ou de duotone Colorizar

89 Brilho e Contraste

90 Divide a imagem em Preto e branco, dando um efeito de imagem fotocopiada. Funciona mais como efeito. Limite - Levels

91 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

92 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

93 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

94 Esta opção encolhe uma seleção na quantidade de pixels que o usuário desejar Seleção - Encolher

95 Ao contrario da opção anterior, esta encolhe uma seleção na quantidade de pixels que o usuário desejar Seleção - Aumentar

96 Ao contrario da opção anterior, esta encolhe uma seleção na quantidade de pixels que o usuário desejar Seleção - Encolher

97 Seleção - Arredondar Esta opção arredondará os cantos de uma seleção em foma

98 Inkscape

99 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.

100 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

101 Inkscape - Introdução Visão Geral da Tela do Inkscape 0.44

102 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

103 Inkscape - Introdução

104 Inkscape - Introdução 1. Barra do Menus. 2. Barra de comandos. 3. Controle de ferramentas.

105 4. Caixa de ferramentas. 5. Área para desenho. 6. Régua Inkscape - Introdução

106 6. Paleta de cores. 7. Barra de status Inkscape - Introdução

107 Inkscape - Introdução Um detalhe importante é que conforme troca-se de ferramentas muda-se também Controle de Ferramentas; Facilita o workspace; Economiza tempo;

108 Inkscape teclas de atalho Eficiência; Poupa tempo; Intuitivo;

109 Ferramentas e Controle

110 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.

111 Ferramentas de Seleção Seleciona objetos; Redimensiona; Rotaciona; Deforma Ferramenta de controle de seleção:

112 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;

113 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.

114 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.

115 Criar Elipses Criar uma elipse; Alterar/Deformar seu tamanho com as alças; Formatar um arco.

116 Criar Estrelas e Polígonos Criar uma estrela ou um polígono; Alterar/Deformar seu tamanho com as alças;

117 Criar Espirais Criar um espiral; Alterar/Deformar seu tamanho com as alças;

118 Criar Linhas Criar desenhos a mão-livre; Suavização nas curvas.

119 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.

120 Criar Linhas Caligráficas Criar desenhos a mão-livre com uma ponta angulada; Muito usado para se produzir um efeito de fita.

121 Ferramenta de Texto Criação de texto; Escolha do tamanho e tipo de fonte; Parágrafo; Orientação do texto

122 Conectores Criar conexão entre objetos; Muito usado em fluxogramas e organogramas. Controle de linhas e; Controle de espaçamento;

123 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

124 Captura de cor ou Conta-Gotas Captura cor de outros objetos; Incluem-se bitmaps;

125 Janelas adicionais Editar estilos de cor de preenchimento; Largura, expessura e cor de fio; Editar caixa de texto; Editor XML; Janela de alinhamento

126 Janelas adicionais

127 Editar caixa de texto; Janelas adicionais

128 Editor XML Janelas adicionais

129 Janela de alinhamento Janelas adicionais

130 Blend er

131 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

132 Blender - Workspace Trabalha com conceito de subdivisão de áreas de trabalho Customização da área de trabalho; Ganho de espaço para modelagem;

133 Blender - Workspace

134 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.

135 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

136

137

138 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.

139 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

140 Blender - Mesh Tutoriais BásicoB Blender 3d - Guia de sobrevivência TUTORIAIS Conhecendo Blender 3d TUTORIAIS

141 Gimp Tutoriais BásicosB Mudando o tamanho da imagem; Compressão em jpeg; Cortar uma imagem; Mudar o sistema de cores; Rotacionando uma imagem

142 Gimp Tutoriais BásicosB Pintando uma seleção; Fazendo um fio; Criando simples vetores (Seleções através dos vetores) Remover olhos vermelhos (canais)

143 Gimp Tutoriais Intermediário rio Fazendo um simples Cubo com a ferramenta de vetor (path). Demais tutoriais no site oficial. TUTORIAIS

144 Inkscape Tutoriais Básicos: Explorando a barra de ferramentas TUTORIAIS