Apostila Design

Saturday, June 26, 2010

iai?O iai? o um centro que fomenta criatividade e inovao atravs do ensino, produo e exposio de tecnologias interativas. ESCOLA O iai? uma escola que oferece cursos prticos, rpidos e objetivos sobre as tecnologias contemporneas. Utilizamos desenvolvimento de pequenos projetos como parte do mtodo didtico. PRODUTORA O iai? cria e produz aplicativos mveis,web e projetos interativos para o Brasil e exterior. Tambm presta consultoria para empresas,oferecendo solues tais como criao e elaborao de estratgias de produto,arquitetura de sistemas ,produo e mais. GALERIA Espao de 268m2 desenhado pelo inovador arquiteto Eduardo Longo destinada `a exposies de artes interativas e locao para show-room de empresas e eventos corporativos. VALORES Somos curiosos Agregamos talentos Fomentamos criatividade e inovao Ensinamos aprendendo Aprendemos ensinando Simplicamos a tecnologiaSaturday, June 26, 2010

Contedo ProgramticoEstruturao Fluxograma Pen tool - formas dinmicas Cores / Degrads / Guia de cores / Conta gotas Biblioteca de cores Contorno Alterando um objeto - edio de pontos, pathfinder, efeitos de transformao Mscaras Efeitos - sombra, glow, blur, transparncia, blending, etc. Efeitos 3D - extrude, revolve, rotate Slices - recortando imagens para o seu projeto Padres de arquivos - modo de cores, tamanho, resoluo, formatos, etc.

Trabalhando com objetos particulares ao iPhone Montagem de layout utilizando objetos padres Padronizao da estrutura Padronizao de layout Regras para um design aceito pela Apple Store Alterao esttica dos padres do iPhone Recorte dos objetos atravs de slices Montagem no Interface Builder

Introduo ao Adobe Illustrator Criao de arquivo Adaptando o Illustrator ao seu monitor Novas pranchetas Utilizao bsica - seleo, tamanho, rotao, grupos Categorizando por layers Ferramenta Texto Estilos de pargrafo e texto Formas bsicas - quadrados, elpses, bordas arredondas, polgonos, etc.

Introduo ao Adobe Photoshop Criao de arquivo Adaptando o Photoshop ao seu monitor Utilizao bsica - seleo, tamanho, rotao, grupos Layers Trabalhando com paths Crop, size Cores Edio de cores em objetos importados Melhorando a qualidade das imagens


Contedo Programtico Edio de imagens Ferramentas de correo Recortando imagens Efeitos de reflexo, bevel, blending, strokes Mscaras Filtros - efeitos bsicos para tornar seu layout mais atraente Transformao Livre Slice Tool Exportao de arquivos Design agradvel Regras para um design agradvel Alinhamento e grid Cores Contraste Peso visual Ponto ureo Diagramao de texto Textos em companhia de imagens Limpeza e facilidade visual Elaborando um conceito para o projeto Criao de uma marca Definindo cores Definindo padres de texto Definindo padres de forma

Criando um layout solto Criao de uma Home a partir da marca criada, utilizando todos os padres definidos e o fluxograma inicial Criando novas pginas seguindo o padro da Home

Finalizando o Projeto Definio de recortes Recortando com a ferramenta Slice Exportando com a qualidade necessria Importar no Interface Builder

Apresentao do projeto Dicas para uma apresentao eficiente


Estruturao

FluxogramaO que ? - Fluxograma um tipo de diagrama, e pode ser entendido como uma representao esquemtica de um processo, muitas vezes feito atravs de grcos que ilustram de forma descomplicada a transio de informaes entre os elementos que o compem. Podemos entend-lo, na prtica, como a documentao dos passos necessrios para a execuo de um processo qualquer. Pra que? - Organizar o projeto de modo a montar uma sequncia de telas e objetos, para que o trabalho siga um uxo contnuo, e de maior facilidade de compreenso e execuo.


Estruturao

XMindO que ? - Software gratuto para elaborao de uxogramas


Estruturao

XMindComo utilizar - Mudar o nome do tpico: basta clicar nele e digitar - Criar um novo tpico: TAB - Criar um subtpico: ENTER


Estruturao

XMindExemplo


Introduo ao Adobe IllustratorO que ? - Adobe Illustrator um editor de imagens vectoriais desenvolvido e comercializado pela Adobe Systems. Foi criado inicialmente para o Apple Macintosh em 1985 como complemento comercial de software de fontes da Adobe e da tecnologia PostScript desenvolvida pela empresa. Pra que? - Para criar objetos vetoriais. Com eles podemos salvar imagens em resoluo indenida, ou seja, to altas quanto for necessrio, j que no so feitas de bitmaps, e sim de representaes numricas. - Desenhar.


Criao de arquivo no IllustratorAo abrir o Illustrator, provavelmente abrir uma janela como essa: (caso no abra, v at: le > new)

- Name: nome do projeto - New Document Prole: padres de novos arquivos, como: impressos, web, devices. - Number os Artboards: Quantidade de pranchetas que ter seu projeto. Se voc ter 10 telas no aplicativo sero 10 artboards - Spacing: espao entre artboards. Columns: Organiza as pranchetas no espao. - Size: padres de tamanho - Width: largura. Height: altura. Units: unidade de medida especicada na largura/altura. - Bleed: margens.Saturday, June 26, 2010

Personalizao do Espao de TrabalhoA forma como esto organizados os painis no sua rea de trabalho do Illustrator muito importante para agilizar as tarefas e tambm para uma visualizao mais ampla. - Seu espao de trabalho pode ser personalizado manipulando as janelas. Movendo-as e juntando-as umas nas outras. - Cada grupo de painis pode ser minimzado/maximizado. Gerenciamento de janelas e painis A zona para soltar azul estreita indica que o painel Cor ser encaixado acima do grupo de painis Camadas A - Barra de Ttulo B - Guia C - Zona para soltar


Artboard (Prancheta)O que ? - As artboards so as reas imprimveis ou exportadas do projeto. - possvel criar quantas forem necessrias. Por exemplo: caso seu aplciativo tenha 10 telas, ter 10 pranchetas. Assim, voc no precisa abrir um novo documento para cada tela. - Os tamanhos so personalizveis individualmente. Criando uma nova prancheta / alterando as propriedades das existentes Ao escolher a ferramenta Artboard voc poder criar novas pranchetas, ou alterar as j existentes 1- Para criar uma nova basta clicar e arrastar, formando a rea da nova pgina. 2- Voc pode tambm clicar no cone New Artboard para fazer uma de tamanho padronizado 3- Para editar, basta utilizar a barra de propriedas na parte superior da rea de trabalho: possvel mudar seu nome, tamanho, localizao, bloquear a movimentao, etc.


LayersO que so? As layers so suas melhores amigas. :) Ao se criar um trabalho artstico complexo, sempre um desao controlar todos os itens na janela do documento. Itens cam ocultos embaixo de outros, e a seleo de objetos se torna difcil. As layers fornecem um modo de gerenciar todos os itens que compem o seu trabalho. So como pastas, que agrupam objetos, ou seja, voc pode colocar em uma layer, por exemplo, o background do aplicativo, em outra os elementos xos, e em outra o contedo da tela. Painel de Layers - A layer selecionada ser a ativa, ou seja, todos os novos objetos que criar sero automaticamente includos nesse grupo. Isso no signica que se utilizar um objeto de outra camada, ele ser movido para este grupo. - Ao mover objetos para cima ou para baixo na ordem hierrquica, sero movidos tambm na ordenao esttica. Se um crculo est em cima de um quadrado no painel de layers, no artboard tambm estar.


Ferramentas - SeleoSeleo (V) - Seleciona objetos inteiros. Seleo Direta (A) - Seleciona pontos ou segmentos de objetos. Seleo de Grupos - Seleciona objetos dentro de grupos. (a ferramenta Seleo Direta Varinha Mgica (Y) - Seleciona objetos com atributos semelhantes. Lao (Q) - Seleciona grupo de pontos ou segmentos de forma mais fcil.


Utilizao BsicaSeleo - Utilize a ferramenta Seleo, tecla de atalho (V). Ao clicar em um objeto, ele estar selecionado, s a partir da que voc poder mov-lo, ou alterar seu tamanho, propriedades, etc. - Para selecionar mais que um objeto h duas formas: 1- Selecionar o primeiro, depois segurar Shift e clicar nos demais. 2- Clicar fora de qualquer objeto e arrastar. Um quadro de seleo se formar e tudo que ele encostar estar automaticamente no conjunto de seleo. Alterando suas propriedades bsicas - Quando um objeto estiver selecionado, uma caixa aparecer ao seu redor: Tamanho - Ao clicar e arrastar um dos quadrados que esto em volta do objeto, voc poder estic-lo e mudar seu tamanho. 1- Nas laterais altera sua largura/altura 2- Nos cantos, aumenta/diminui o conjunto por inteiro - Ao segurar a tecla Shift a transformao feita proporccionalmente, o mais recomendado a se fazer na maioria dos casos. - Com a tecla Alt Option pressionada, o ponto de referncia ser o centro. - As duas teclas podem ser utilizadas em conjunto. Rotao - Ao se aproximar dos cantos, na parte exterior, a funo rotacionar aparecer. Ao clicar e arrastar, o objeto ser rotacionado. - Com a tecla shift pressionada a rotao ser efetuada para os ngulos padres: 45, 90, etc.Saturday, June 26, 2010

Ferramentas - TextoType (T) - Textos de todos os tipos. Ttulos, ou blocos de textos. Texto individual - Com um clique cria um texto individual. - Basta clicar e digitar.

Blocos de Texto - Ao clicar e arrastar um bloco de texto estar formado. - Assim, quebras de linhas sero feitas automaticamente, e as opes de pargrafos estaro automaticamente habilitadas


Painel de TextoO painel de caractres responsvel pelas alteraes e propriedades inerentes ao conjunto de texto selecionado. Propriedades de fonte A- Fonte B- Estilo da Fonte C- Tamanho em pontos D- Kerning (juno das letras) E- Entre linhas F- Largura da fonte F- Margem vertical G- Entrelinha H- Entreletra I- Altura da fonte J- ngulo K- Lngua do dicionrio


Painel de PargrafosO painel de pargrafos responsvel pelas alteraes e propriedades inerentes ao conjunto de texto selecionado. Propriedades de pargrafo A- Alinhamento/Justicao B- Recuo esquerda C- Recuo esquerda no incio do pargrafo D- Espaamento antes do pargrafo E- Hifenizar o texto F- Recuo direita F- Espaamento depois do pargrafo


Ferramentas - DesenhoRetngulo (M) - Desenha quadrilteros Bordas Arredondas - Desenha quadrados e retngulos com as bordas arredondadas Elpse (L) - Desenha elpses Polgono - Desenha polgonos regulares com a quantidades de lados customizvel Estrela - Desenha estrelas


Criao de objetos bsicosPara criar um objeto aps selecionar uma ferramenta de criao, existem duas formas: 1- Clique e arraste at formar o objeto que pretende construir. - Ao segurar a tecla Shift, o objeto ser construdo de forma regular. - Com a tecla Alt Option pressionada, o objeto ser construdo com o ponto de referncia central 2- D um clique na tela e preencha as propriedas para criar o objeto com as caractersticas prdenidas.


CoresExistem alguns modos diferentes de classicar cores. So eles: RGB Cores RGB so chamadas de cores aditivas porque o branco produzido com a adio de R, G e B ao mesmo tempo; ou seja, toda a luz reetida de volta ao olho. Cores aditivas so usadas para iluminao, televiso e monitores de computador. Por exemplo, seu monitor, cria cores ao emitir luz atravs de fsforos vermelhos, verdes e azuis. As cores RGB s devem ser utilizadas para imagens que sero visualizadas em plataformas que utilizam cores geradas por luz, como o iPhone


CoresCMYK Combinar pigmentos puros de ciano (C), magenta (M) e amarelo (Y) resultaria em preto com a absoro, ou subtrao, de todas as cores. Por esse motivo, elas so chamadas de cores subtrativas. A tinta preta (K) adicionada para melhorar a densidade das sombras. A letra K utilizada porque o preto ("black" em ingls) a cor chave ("key" em ingls) para o registro de outras cores e porque a letra B tambm representa o azul ("blue" em ingls). A tcnica de combinao dessas tintas para reproduzir cores chamada de impresso de processo em quatro cores. O CMYK utilizado para projetos que sero impressos, o Illustrator e outros softwares que trabalham com esse esquema de cores mostram apenas uma demonstrao do que ser impresso. recomendado que testes sejam feitos para que as cores saiam como esperado.


Aplicao de CoresComo? Para aplicar cores selecione o objeto alvo e utilize uma das formas abaixo: - Na barra de ferramentas d duplo clique sobre o Color Picker Monte a cor desejada utilizando o Color Picker: Viso Geral A- Campo de cor B- Valores HSB C- Nova cor D- Cor original E- Seletor de cor F- Espectro de cores G- Valores RGB H- Valor de cor hexadecimal I- Valores CMYK

- Utilizando o painel de cores, deslize os termomtros para formar a cor que deseja: Viso Geral A- Cor de Preenchimento B- Cor do Contorno C- Menu do painel D- Sem cor E- Espectro de coresSaturday, June 26, 2010

F- Seletor de cor G- Valor da cor

Ferramentas - Conta-gotasConta-gotas (I) - Copia e aplica as caractersticas de outros objetos, como: cor, texto e Como usar? Selecione a ferramenta Conta-gotas (ou tecle seu atalho: i), e com o objeto de destino selecionado, pressione no objeto referncia. Esse mtodo facilita na utilizao de objetos de aparncias anlogas.


Painel DegradPara criar degrads, voc pode usar o painel de degrads, basta estar com o preenchimento do objeto selecionado. Viso Geral A- Preenchimento degrad B- Degrads pr-denidos C- Inverter cores D- Ponto de interseco das cores E- Cor F- Opacidade da cor G- Opes do painel H- Deletar cor


Guia de CoresO que ? Ao escolher uma cor para seu objeto, provvel que queira que cores balanceadas formem um conjunto com a primeira. Para isso, o Illustrator possui um painel chamado de Color Guide, ele faz sugestes de tonalidades que complementam a principal, utilizando regras cromticas prestabelecidas. - Ao selecionar a primeira cor, o que tem a fazer abrir o painel e escolher o modo como quer a seleo: Viso Geral A- Composio das cores B- Denir como cor base C- Cores ativas D- Variaes das cores da harmonia E- Limita a biblioteca de cores F- Editar cores G- Salvar grupo na biblioteca


Ferramentas - Pen ToolCaneta (P) - Desenha linha retas e curvas, usando clculos bezier. Como usar? - Com um clique, o primeiro ponto estar formado. - No prximo clique, uma reta ser traada a partir do primeiro ponto. - Ao manter pressionado o mouse, a sequncia se formar em curva, utilizando clculos beizier. - Caso seja necessrio exister uma quebra na sequncia dos ngulos, pressione option. Isso far com que o prximo ponto perca a referncia com o anterior. - Se o ltimo ponto se juntar com o primeiro, o objeto ser nalizado. - Para criar novos pontos, clique em um segmento do objeto. - Para deletar um ponto, pressione no ponto j existente. - Para alterar um ponto, utilize a ferrmamenta seleo Direta. Clique no ponto, e o altere como faria se o estivesse criando.


ContornoA cor do contorno de cada objeto, representada pela caixa com um quadrado branco ao meio Painel Stroke - possvel denir a grossura de um contorno, assim como criar tracejados e linhas irregulares. - A juno dos pontos, tambm pode ser denida, para arredondamento ou quebras retas.


Introduo ao Adobe PhotoshopO que ? - O Adobe Photoshop o aplicativo de edio de imagem mais usado em computadores Macintosh e Windows. Apesar da concorrncia ser forte entre os mais variados programas, com preos que chegam a ser simblicos at alguns milhares de dlares por licena, a Adobe informa que as vendas do Photoshop so responsveis por mais de 80% do mercado de edio de imagens e que esse nmero continua crescendo. Isso torna o Photoshop quatro vezes mais usado do que todos os seus concorrentes juntos. No que diz respeito edio prossional de imagens, o Photoshop no apenas lder de mercado, ele tambm a nica possibilidade para quem preza por maior qualidade nas imagens e seu tratamento. Pra que? - Para criar imagens Bitmap, edio de fotos, efeitos de cor, etc.


Criao de arquivo no PhotoshopPara criar um novo arquivo no Photoshop, clique no boto File e depois em New

- Name: nome do projeto - Preset: padres de novos arquivos, como: impressos, web, devices, clipboard (um arquivo baseado na ltima coisa que copiou). - Width: largura. Height: altura. Units: unidade de medida especicada na largura/altura. - Resolution: Resoluo do arquivo (para arquivos web utilize 72 pixels por polegada e para projetos impressos utilize ao menos 300 pixels por polegada) - Color Mode: Modo de cores (para arquivos web utilize RGB, para impressos CMYK). - Profundidade de pixel: Expecifca quatos bit esto disponveis para cada pixel. 8 suciente. - Background Contentes: A cor da layer de background


LayersDiferentemente do Illustrator, as layers no servem apenas para organizao. Todo o contedo criado no Photoshop controlado pelas layers, voc no cria objetos, voc cria layers. Ento, depende de voc, colocar em uma mesma layer apenas o que no ser desagrupado nunca mais, pois, depois de feito, complicado separar. O painel de Layers relaciona todas as camadas, grupos e efeitos de layers em uma imagem. Esse painel pode ser usado para mostrar e ocultar, criar novas e trabalhar com grupos de layers. No menu do painel pode-se acessar comandos e opes adicionais. Viso Geral A- Opes do painel B- Layers agrupadas C- Layer D- Minimizar/maximizar efeitos da layer E- Efeitos da layer F- Preview da layer


Ferramentas - SeleoMover (V) - Move selees, camadas e guias Seleo (M) - Cria selees retngulares, elpticas e de linhas Lao (L) - Cria selees a mo livre, poligonais e magnticas Varinha Mgica (W) - Seleciona reas de colorao semelhantes,


Ferramentas - PathsPen (P) - Desenha demarcadores. Forma (U) - Desenha formas poligonais. Seleo de Paths (A) - Seleciona demarcadores, e pontos.


Ferramentas - RecorteCrop (C) - Recorta o arquivo completo, incluindo as layers. (Outra forma de fazer o recorte da imagem utilizando o Canvas Size (image>canvas size), com ele as layers no so recortadas. Slice (C) - Marca recortes para exportao.


Efeitos/Estilos de uma layerAo dar duplo clique em uma layer, a caixa de Estilos da Layer se abrir: Escolhendo na coluna na lateral, qual efeito deseja aplicar, suas propriedades podero ser alteradas. So eles: - Sombra Projetada: Adiciona uma sombra que se projeta por trs do contedo da camada. - Sombra Interna: Adiciona uma sombra que se projeta apenas no interior das arestas do contedo da camada, dando-lhe uma aparncia de baixo-relevo. - Brilho Externo e Brilho Interno: Adiciona brilhos que provm das arestas externas ou internas do contedo da camada. - Chanfro e Entalhe: Adiciona vrias combinaes de realces e sombras a uma camada. - Acetinado: Aplica um sombreamento interior que cria um acabamento acetinado. - Sobreposio de Cor, de Degrad e de Padro: Preenche o contedo da camada com uma cor, um degrad ou um padro. - Contorno: Contorna o objeto na camada atual, usando uma cor, um degrad ou um padro.


Guia de Propriedades de estilos- Altitude: Para o efeito Chanfro e entalhe, dene a altura da fonte de luz. A denio 0 equivalente ao nvel do solo, 90 diretamente acima da camada. - ngulo: Determina o ngulo de iluminao com que o efeito aplicado camada. possvel arrastar na janela do documento para ajustar o ngulo de um efeito Sombra projetada, Sombra interna ou Acetinado. - Suavizao de Serrilhado: Mescla os pixels das arestas de um contorno ou de um contorno de reexo. Essa opo muito til para sombras pequenas com contornos complicados. - Modo de Mesclagem: Determina como o estilo da camada mesclado com as camadas subjacentes, o que pode ou no incluir a camada ativa. Por exemplo, uma sombra interna mesclada com a camada ativa porque o efeito desenhado na parte superior da camada, mas uma sombra projetada mesclada apenas com as camadas abaixo da camada ativa. Na maioria dos casos, o modo padro de cada efeito produz os melhores resultados. - Desfoque: Contrai os limites de fosco de uma Sombra Interna ou de um Brilho Interno antes de desfocar. - Cor: Especica a cor de uma sombra, de um brilho ou de um realce. Clique na caixa de cores e escolha uma cor. - Contorno: Com brilhos de cor slida, Contorno permite criar anis de transparncia. Com brilhos preenchidos com degrad, Contorno permite criar variaes na repetio da cor e da opacidade do degrad. No chanfro e no entalhe, Contorno permite esculpir cristas, vales e salincias que so sombreados no processo de entalhe. Com sombras, Contorno permite especicar a atenuao.Saturday, June 26, 2010

Guia de Propriedades de estilos- Distncia: Especica: a distncia de deslocamento para um efeito de sombra ou acetinado. possvel arrastar na janela do documento para ajustar a distncia de deslocamento. - Profundidade: Especica a profundidade de um chanfro. Tambm especica a profundidade de um padro. Usar luz global Essa congurao permite denir um ngulo de luz "mestre" que est disponvel em todos os efeitos de camada que usam o sombreamento: Sombra projetada, Sombra interna e Chanfro e entalhe. Em qualquer um desses efeitos, se a opo Usar luz global estiver selecionada e um ngulo de iluminao estiver denido, esse ngulo se transformar no ngulo de iluminao global. Qualquer outro efeito que tenha a opo Usar luz global selecionada herda automaticamente a mesma congurao do ngulo. Se Usar luz global no estiver selecionado, o ngulo de iluminao denido "local" e aplica-se somente ao efeito em questo. Tambm possvel denir o ngulo de iluminao global escolhendo Estilo de camada > Luz global. - Contorno de Reexo: Cria uma aparncia metlica e cintilante. O Contorno de Reexo aplicado aps o sombreamento de um chanfro ou entalhe. - Degrad: Especica o degrad de um efeito de camada. Clique no degrad para exibir o Editor de degrad ou clique na seta invertida e escolha um degrad no painel pop-up. possvel editar um degrad ou criar um novo usando o Editor de degrad. A cor ou a opacidade podem ser editadas no painel Sobreposio de degrad da mesma maneira que no Editor de degrad. Para alguns efeitos, possvel especicar opes adicionais de degrad. Inverter inverte a orientao do degrad, Alinhar Camada usa a caixa delimitadora da camada para calcular o preenchimento degrad e Escala redimensiona a aplicao do degrad. Tambm possvel mover o centro do degrad clicando e arrastando na janela da imagem. O estilo especica a forma do degrad.Saturday, June 26, 2010

Guia de Propriedades de estilos- Modo de Realce ou Modo de Sombra: Especica o modo de mesclagem do realce ou da sombra de um chanfro ou entalhe. - Tremulao: Faz variar a aplicao da cor e da opacidade de um degrad. Sombra Projetada de Vazamento de Camada Controla a visibilidade da sombra projetada em uma camada semitransparente. - Rudo: Especica o nmero de elementos aleatrios na opacidade de um brilho ou de uma sombra. Digite um valor ou arraste o controle deslizante. - Opacidade: Dene a opacidade do efeito da camada. Digite um valor ou arraste o controle deslizante. - Padro: Especica o padro de um efeito de camada. Clique no painel pop-up e escolha um padro. Clique no boto Nova predenio para criar um novo padro predenido com base nas conguraes atuais. Clique em Ajustar origem para fazer com que a origem do padro seja a mesma do documento (quando Vincular com camada estiver selecionado) ou para colocar a origem no canto superior esquerdo da camada (se Vincular com camada no estiver selecionado). Selecione Vincular Com Camada se quiser que o padro se mova com a camada quando ela se mover. Arraste o controle deslizante de Escala ou digite um valor para especicar o tamanho do padro. Arraste um padro para posicion-lo na camada; redena a posio usando o boto Ajustar Origem. A opo Padro no est disponvel quando no h padres carregados. - Posio: Especica a posio de um efeito de traado como Externa, Interna ou Central. - Intervalo: Controla qual parte ou intervalo do brilho destina-se ao contorno.Saturday, June 26, 2010

Guia de Propriedades de estilos- Tamanho: Especica o raio e o tamanho de desfoque ou o tamanho da sombra. - Suavizao: Desfoca os resultados do sombreamento para reduzir artefatos no desejados. - Origem: Especica a origem de um brilho interno. Escolha Centro para aplicar um brilho que provm do centro do contedo da camada ou Aresta para aplicar um brilho que provm das arestas internas desse contedo. - Expanso: Expande os limites do fosco antes de desfocar. - Estilo: Especica o estilo de um chanfro: Chanfro interno cria um chanfro nas arestas internas do contedo da camada, Chanfro externo cria um chanfro nas arestas externas do contedo da camada, Entalhe simula o efeito de entalhar o contedo da camada com base nas camadas subjacentes, Entalhe elevado simula o efeito de carimbar as arestas do contedo da camada nas camadas subjacentes e Entalhe de trao conna o entalhe aos limites de um efeito de trao aplicado camada. (O efeito Entalhe de Traado no visvel quando nenhum traado est aplicado camada.) Tcnica Suavizao, Cinzel slido e Cinzel suave esto disponveis para os efeitos de chanfro e entalhe; Mais suave e Preciso aplicam-se aos efeitos Brilho interno e Brilho externo. Suavidade Desfoca ligeiramente as arestas de um fosco e til em todos os tipos de foscos, independentemente de suas arestas serem suaves ou slidas. No preserva recursos detalhados em tamanhos maiores. Cinzel slido Usa uma tcnica de medio de distncia e til principalmente em foscos de arestas slidas a partir de formas com suavizao de serrilhado, como as de texto. Preserva recursos detalhados de maneira mais eciente que a tcnica de suavizao. Cinzel suave Usa uma tcnica de medio de distncia modicada e, mesmo no sendo to precisa quanto o Cinzel slido, mais til em um intervalo maior de foscos. Preserva recursos de maneira mais eciente que a tcnica de suavizao.Saturday, June 26, 2010

Guia de Propriedades de estilos Mais suave Aplica um desfoque e til em todos os tipos de foscos, independentemente de suas arestas serem suaves ou slidas. Em tamanhos maiores, Mais suave no preserva recursos detalhados. Preciso Usa uma tcnica de medio de distncia para criar um brilho e til principalmente em foscos de arestas slidas a partir de formas com suavizao de serrilhado, como as de texto. Preserva recursos de maneira mais eciente que a tcnica de Mais Suave. - Textura: Aplica uma textura. Use Escala para dimensionar o tamanho da textura. Selecione Vincular Com Camada se quiser que a textura se mova com a camada quando ela se mover. Inverter inverte a textura. Profundidade faz variar o grau e a direo (para cima/para baixo) em que a texturizao aplicada. Ajustar origem faz com que a origem do padro seja a mesma do documento (se Vincular com camada no estiver selecionado) ou coloca a origem no canto superior esquerdo da camada (se Vincular com camada estiver selecionado). Arraste a textura para posicion-la na camada.


Painel de ajustes de Correo de ImagensClicar no cone de uma ferramenta seleciona o ajuste a cria automaticamente uma layer de ajuste. Os ajustes feitos usando os controles e opes no painel criar layers no destrutivas (no danicam a qualidade original da imagem) Aplicar uma correo usando o painel Ajustes 1- No painel Ajustes, clique em um cone de ajuste ou predenio de ajuste, ou escolha um ajuste no menu do painel. 2- Se necessrio, use os controles e opes no painel Ajustes para aplicar as conguraes que desejar. 3- (Opcional) Siga qualquer um destes procedimentos: Para alternar a visibilidade do ajuste, clique no boto Visibilidade Para retornar o ajuste s conguraes originais, clique no boto Redenir . Para descartar um ajuste, clique no boto Excluir esta camada de ajuste . Para adicionar outra camada de ajuste acima da atual, clique na seta . Esse procedimento retorna o painel Ajustes exibio de cones de ajuste e da lista de predenies. Para retornar para as opes de conguraes de ajustes atuais dos cones de ajuste e predenies no painel Ajustes, clique na seta . Para aumentar a largura do painel Ajustes, clique no boto Visualizao Expandida. USO DO PHOTOSHOP CS4 171 Ajustes de cores e tons Aplicar uma correo somente na camada abaixo 1 No painel Ajustes, clique em um cone de ajuste ou predenio de ajuste, ou escolha um ajuste no menu do painel.Saturday, June 26, 2010

Navigation Bars, Tab Bars, Tool Bar e Status Bar- Esses views tm aparncias e comportamentos j denidos pela Apple, e no so necessariamente de uso obrigatrio, porm se utilizados, devem seguir a risca o uso correto deles. - Isso porque quem usa um iPhone j est acostumado com suas funcionalidades, posies e informaes que esses view contm. - Se a Apple achar que essa funcionalidade das barras foge do padro, ela automaticamente rejeitar a publicao na App Store. - Pouca coisa pode ser modicada na hora da aplicao desses views, praticamente s as cores. Mesmo assim, o degrad deve continuar o padro. - Voc no deve ento fazer um PNG desses arquivos, o que deve ser utilizado o componente que j est pronto no Interface Builder,e suas alteraes tambm so feitas assim. - O que necessrio de criao a parte, so componentes usados em conjunto com as barras.


Status BarInformaes - A Status Bar mostra informaes importantes sobre o aparelho, como sinal, hora, conexes, e bateria. - Ela opcional em um aplicativo, porm deve ser levado em conta que o usurio est acostumado a ela, e sentir sua falta. Portanto pense e vale a pena, se realmente necessrio que ela no seja exibida. - Por exemplo: quando voc visualiza fotos em tela cheia, o usurio tem o olhar focado nas fotos e apenas nelas, portanto ele sabe que a Status Bar no est por um propsito que ele concorda. No sentir sua falta, alm do que, sabe que com apenas um toque na tela, ela estar de volta. - Por outro lado, vale pensar que do mesmo modo que o usurio se foca em uma foto, tambm se concentrar no seu App, mergulhando-o em seu ambiente com mais facilidade. Alteraes - Voc pode denir quais informaes sero exibidas na Status Bar - Voc pode escolher entre trs opes de cor: cinza, preto e translucente. - Note que ela deve ter uma aparncia compatvel com o resto do layout do seu App, por exemplo, no coloque uma Status Bar translucente se sua Tab Bar for opaca.


Navigation BarInformaes - A Navigation Bar SEMPRE aparece no topo do aplicativo, apenas abaixo da Status Bar (caso exista). - Contm o ttulo da tela, alm de opnoes das views nas quais esto contidas e controles navegacionais do aplicativo. - A Navigation Bar especialmente til em aplicativos que seguem uma linha de contedo, onde o usurio precisa passar por uma tela para chegar a outra. A Navigation Bar a melhor opo na maioria dos casos, para encaixar esses controles de navegao sem atrapalhar o restante do contedo. - Alm disso, quando o usurio pode interagir diretamente com a informao disponibilizada, botes para salvar e editar comumente sero necessrios, a Navigation Bar tambm tima para este uso. - O texto da Navigation Bar sempre exibido no centro com o mesmo tamanho de fonte. - Aps mudar de tela, este ttulo deve mudar, e adicionar os botes de voltar caso necessrio. - Por normas da Apple se a Navigation Bar existir no aplicativo, s ela pode exibir os botes de Voltar e edio. - A Apple no costuma aceitar mais que um boto de controle de navegao na Navigation Bar, por diversos motivos, como: Ocupar o espao do Ttulo, diminuir espao para o touchscreen e eles dizem que escolher quais botes da hierarquia devem ser disponibilizados um problema.Saturday, June 26, 2010

Navigation BarAlteraes - No permitido alterar a altura ou largura da Navigation Bar, de forma alguma. - A nica coisa no tamanho que muda utiliza-la na vertical ou horizontal, j que ela deve preencher todo o espao horizontal da tela. - A cor da Navigation Bar pode ser customizada a vontade, porm seu degrad no deve alterar, e o Interface Builder no permite isso mesmo. - A Navigation Bar tambm pode ser translucente. Isso d uma impresso de espao maior, mas tambm deve ser utilizada com cuidado para no destoar do resto do trabalho.


Tool BarInformaes - Se o seu aplicativo possuir diversas funes onde o usurio pode interferir no contedo, talvez seja necessrio incluir uma Tool Bar. - Ela ca localizada na parte inferior da tela, apenas acima da Tab Bar e oferece botes que fazem aes diretamente em objetos da tela. - Por exemplo, quando um usurio v uma mensagem de e-mail, ele pode encamknhar a mensagem, responder, deletar, etc. - A Tool Bar no pode ser usada para trocar a tela do aplicativo. Para isso existe a Tab Bar. - Existem alguns cones padres para as funes da Tool Bar, porm caso aja necessidade, novos podem ser criados. Um PNG utilizado para isso, porm as cores so ignorados, apenas seu contorno levado em conta, e o Interface Builder se encarrega de aplicar o estilo. - O tamanho recomendado para esse botes de 44x44 pixels. - Eles devem ser distribudos com espaamento igual ao longo da rea horizontal da Tool Bar


Tool BarAlteraes Assim como a Navigation Bar: - No permitido alterar a altura ou largura da Tool Bar, de forma alguma. - A nica coisa no tamanho que muda utiliza-la na vertical ou horizontal, j que ela deve preencher todo o espao horizontal da tela. - A cor da Navigation Bar pode ser customizada a vontade, porm seu degrad no deve alterar, e o Interface Builder no permite isso mesmo. - A Navigation Bar tambm pode ser translucente. Isso d uma impresso de espao maior, mas tambm deve ser utilizada com cuidado para no destoar do resto do trabalho.


Tab BarInformaes - A Tab Bar como um menu geral do aplicativo. Cada boto te redireciona para um contedo especco. - Possibilita ao usurio acessar qualquer parte do aplicativo de qualquer tela, como um atalho. - Sempre ca na parte inferior da tela, abaixo de tudo. - A Tab Bar jamais pode ser usada como uma Tool Bar, ou seja, com botes que realizam funes no objetos da view. - preta e sua colorao no pode ser alterada. - Cada boto apresenta um cone e seu ttulo abaixo. - Quando um boto est selecionado, ele ganha o destaque em azul e um quadro mais claro ao seu redor. - Os tens da Tab Bar devem ser distribudos com o mesmo espaamento entre eles e devem ter o mesmo tamanho e estilo grco. - O nmero mximo de itens na Tab Bar de 5. - Assim como na Tool Bar, novos cones podem ser criados. Alteraes - Na Tab Bar voc pode permitir ao usurio escolher em uma lista, qual dos botes ele quer visualizar, j que existem alguns que ele utiliza com mais frequncia.


Teoria do DesignPsicologia da Percepo Visual A Gestalt - As leis de organizao da Gestalt so estudos sobre como as pessoas percebem componentes visuais como padres organizados ou conjuntos, ao invs de suas partes componentes. A Gestalt explica que o Todo mais importante do que o individual. Um objeto por si s no tem fora, o que importa o conjunto e esse UM, s tem fora no meio do todo. - De acordo com a Gestalt, a arte se funda no princpio da pregnncia da forma. E assim, no processo de criao de imagens, fatores como equilbrio, clareza e harmonia so fundamentais para o ser humano. - Ela tambm explica que a primeira sensao visual tambm a nica, portanto ao organizar o espao atravs do conjunto, torna a sensao visual do expectador eciente. - A Gestalt baseada em algumas leis que tornam essa experincia visual possvel apenas com sua utilizao. - Em minha opinio a aplicao por si s da Gestalt, j suciente para tornar um design de fcil visualizao, atraente e agradvel.


Teoria do DesignLeis da Gestalt Unidade - A unidade pode ser um nico objeto que encerra-se em si prprio, como tambm, pode ser um conjunto de objetos que conguram um todo. - Uma unidade geralmente denida atravs das relaes entre os objetos que a constituem (subunidades). Ou seja, objetos que possuem a mesma funcionalidade dentro do espao, devem constituir uma unidade. Isso serve para que o usurio identique claramente para que serve o objeto no local, e entenda onde encontrar outros do mesmo tipo. - Uma unidade pode conter vrias outras unidades dentro de si. - Exemplo: Essa multido, constitui uma unidade como um todo, porm, cada pessoa tambm pode ser considerada como uma unidade individual.


Teoria do DesignLeis da Gestalt Segregao - Segregao a capacidade de destacar, separar, evidenciar, ou identicar um objeto dentro de um todo. - Normalmente pode-se segregar mais que um objeto, nveis de segregao diferentes podem, e devem, ser utilizados. - Segregar til para que o que tem mais importncia dentro de um todo aparea, e chame mais a ateno do que um coadjuvante. - Nveis hierrquicos de segregao so necessrios para que o efeito seja realmente efetuado, pois, uma composio com uma quantidade alta de itens destacados, faz com que eles percam essa caracterstica. - A segregao tambm deve ser utilizada em partes de um objeto, o que tem mais destaque dentro do contedo deve possuir uma fora sensvel maior. Exemplo: - Colocando a personagem principal no centro da tela, e com uma perspectiva que a torna maior, Delacroix, lhe deu o maior destaque. - Ambos os personagens em suas laterais possuem destaque secundrio. - Os corpos vem com a terceira posio pela sua localizao privilegiada....Saturday, June 26, 2010

Teoria do DesignLeis da Gestalt Unicao - A unicao ocorre quando um objeto possui harmonia entre si e padro to evidente, que por si s se fecha em um grupo, que se destaca individualmente sem a necessidade de uma segregao. Exemplo: O smbolo do Ying Yang sintetiza evidentemente um exemplo de unicao visto que seus pesos visuais contrape-se de forma simtrica totalmente equilibrada. No h diviso no smbolo mesmo sendo formado por duas cores totalmente opostas.


Teoria do DesignLeis da Gestalt Semelhana - A igualdade de forma e de cor tambm tem a tendncia de formar unidades entre os objetos. - Quanto mais caractersticas iguais os elementos tiverem, mais forte ser o agrupamente que eles formaro. Por exemplo: - Essa foto de So Paulo, mostra 5 prdios que esto em destaque devido ao seu tamanho e suas diferentes formas. - Mesmo estando bem prximos uns aos outros na foto, possvel separar cada edifcio como uma unidade, devido ao seu conjunto de formas e cores bem denidas e repetidas. - Ou seja, a semelhana de objetos, pode e vai, separar objetos em grupos, em unidades.


Teoria do DesignLeis da Gestalt Fechamento - O fator de fechamento importante para a formao de unidades. - O fechamento obtido na formao de uma unidade pela sua continuidade da ordem estrutural. Para se formar uma unidade por fechamento nada deve estar fora desse caminho contnuo. - No se pode confundir o fechamento com contornos que delimitam o espao, j que eles so totalmente dispensveis para este m. Exemplo: - O logo da Logitech forma um fechamento, mesmo sem possuir uma forma delimitadora. Suas formas em suas devidas posies fecham o objeto em um conjunto.


Teoria do DesignLeis da Gestalt Continuidade - A boa continuidade a impresso visual de que uma sequncia de objetos se sucedem formando uma organizao contnua, uma linha tragetria a ser seguida. - Ela utilizada justamente para conduzir o olhar do espectador em uma sequncia que o levar ao seu objetivo. Exemplo: - Mesmo com o preenchimento inteiro da rea com tringulos, a diferena entre os trs principais, e a sequncia de aumento de tamanhos, traa uma linha de olhar.


Teoria do DesignLeis da Gestalt Proximidade - Unidades tambm so formadas por objetos prximos, e esses objetos tm a tendncia de serem vistos juntos.


Teoria do DesignLeis da Gestalt Pregnncia da forma - A pregnncia da forma a lei bsica da percepo visual da Gestalt, e pode ser denida como um todo com um alto grau de equilbrio, harmonia, clareza e unicao visual. Em outras palavras: - Quanto melhor for a organizao visual do todo, em termos de facilidade de compreenso, maior o grau de pregnncia da forma. - Quanto mais confuso for a organizao visual, menor o grau de pregnncia e menos eciente ser o projeto visual. Alta pregnncia Baixa pregnncia


Teoria do DesignLeis complementares Harmonia - A harmonia diz respeito a boa organizao formal do contedo, ou entre partes de um contedo de modo a formar um todo agradvel visualmente. - Na harmonia predominam os fatores de equilbrio, de ordem e de nivelamentos visuais, possibilitando uma leitura de fcil compreenso. - A harmonia conseguida na coerncia formal das unidades. Elas devem ser compatveis entre si, e o peso visual deve ser controlado para que nada destoa e impessa ao olhar do expetador rodar tranquilamente pelo contedo. Exemplo - Repare como nessa obra de Gericault, a distribuio dos elementos feita de forma a todos os elementos possurem o mesmo peso visual, e mesmo possuindo uma grande quantidade de elementos, ela no se torna pesada, e sim harmonioza. - Mesmo com um personagem segregado e a obra possuir uma linha diagonal obviamente traada, todos os elementos se equivalem.


Teoria do DesignLeis complementares Equilbrio - O equilbrio conseguido quando foras se compensam mutuamente. Ou seja, se em um canto da tela existe um objeto, no oposto deve existir um elemento que contraponha esse peso, que possua o mesmo valor visual. - Para que isso ocorra, no necessrio que esses elementos sejam iguais, ou do mesmo tamanho, mas, que eles possuam uma fora de atrao do olhar compatvel. Cores mais fortes podem ser utilizadas para combater com um objeto grande, por exemplo. - Uma obra equilibrada conseguida quando parece impossvel de encaixar mais um elemento j que ele tornar este espao pesado. Exemplo - Repare como Van Eyck contrape cada canto da tela com um elemento que pesa o mesmo com o espao oposto. Como nos tamancos no canto esquerdo abaixo, contrape-se com a cortina vermelha.


Teoria do DesignLeis complementares Contraste - O contraste excita e atrai a viso do usurio. E tambm capaz de tornar o signicado desse elemento mais importante e destacado. - O contraste de cores extremamente necessrio para a visualizao clara do usurio. A leitura de objetos e textos deve ser simplicada, e o contraste de alta importncia para esse objetivo. - Para dar uma signicao maior, basta aumentar o contraste, por exemplo: para que algo parea grande, basta colocar um objeto pequno perto dele, o destaque ser para o maior. Isso pode muito bem ser utilizado em textos, assim como o contraste entre cores da mesma unidade. Exemplo: - O contraste entre o preto e o branco, assim como entre o amarelo e o preto torna compreensvel os elementos mesmo de uma grande distncia.


Apostila Design

Documents

Transcript of Apostila Design