Pages

domingo, 27 de fevereiro de 2011

10 pecados que você não pode cometer no photoshop

Neste artigo você verá os 10 erros mais comuns de quem está iniciando no Photoshop. Mesmo após anos utilizando este software, descobri que cometia alguns desses erros e isso me fazia perder um tempo precioso na hora de criar novos trabalhos.

1 - Utilizar métodos errados para seleção



Muitos iniciantes utilizam as ferramentas Magic Wand , Quick Selection ou Lasso Tool para extrair imagens ou fundos de uma imagem. Teoricamente estas são as ferramentas certas criadas para este fim. Porém, na grande maioria dos casos, é muito mais negócio utilizar a Pen Tool para criar seleções. Por trabalhar com o esquema de Curva de Bézier, esta ferramenta nos dá uma precisão muito superior aos outros métodos de seleção. Apesar de ser um pouco difícil para iniciantes dominar esta ferramenta, com um pouco de prática você não vai mais querer saber de outros métodos de seleção tão cedo.

2 - Exagerar no uso de gradientes (degradês)



Não precisa ser muito atento para notar que a grande maioria dos iniciantes peca por exagerar no uso dos gradientes e na cor que escolhem para os mesmos. Se você tem dúvida do que estou falando, experimente visitar o website http://www.rainbowgradients.com/ . Isso não significa que não deva utilizar gradientes, apenas utilize-os com bom senso, tentando na maioria das vezes mesclar tonalidades de uma mesma cor.

3 - Pensar que K=100 é preto



Muitos designers iniciantes pensam que se você configurar para 100 o K, na barra de cores CMYK, o resultado será preto. Na verdade, na hora de imprimir seu trabalho, isso resultará em um cinza bem escuro, mas não preto. O que deve ser feito para grandes áreas chapadas com a cor preta é configurar a paleta CMYK para o que chamam de “Rich Black“, que é alcançado utilizando

C=90 M=60 Y=30 K=100.

4 - Uso abusivo de filtros



Creio que todos que começam a utilizar o Photoshop são seduzidos pelo lado negro dos filtros. Já conheci pessoas que acham que o Photoshop se resume a isso, efeitos criados através de filtros. Apesar de ser algo divertido e fácil de utilizar, não é o uso indiscriminado de filtros que fará você parecer profissional e experiente. Aliás, muito pelo contrário.

5 - Criar logotipos no Photoshop



Este é mais ou menos o mesmo conselho do ítem 3. Logotipos devem ser criados em softwares vetoriais pois só assim podem ser redimensionados para qualquer tamanho sem perder a qualidade. Talvez hoje o seu cliente queira apenas aplicar o logo em um cartão de visitas de 9 x 5 cm, mas nada garante que depois de um mês, seu cliente não vai precisar imprimir este mesmo logo em um outdoor de 3 x 9 metros.

6 - Não trabalhar em 300 dpi para trabalhos impressos



Este ítem é tão simples quanto utilizar 72 dpi quando for criar algo para internet (website, hotsite, banner, etc.) e utilizar 300 dpi quando for fazer um trabalho impresso (pôster, capa de cd, capa de livro, etc.). Sempre que você cria um novo documento no Photoshop, abrirá uma janela onde você pode escolher com quantos dpis você quer trabalhar. O motivo pelo qual esta escolha é feita no começo do processo, é que se você criar algo em baixa resolução, o Photoshop não fará o milagre de deixar a imagem nítida se você aumentar a resolução posteriormente. Na dúvida de quais serão as aplicações de um trabalho, configure o documento para 300 dpis.

7 - Não aprender os atalhos (shortcuts) do software



Não importa em qual programa você está trabalhando, aprender o máximo de teclas de atalho é quase uma obrigatoriedade para quem quer levar a profissão de designer a sério. Não é apenas uma questão de economizar tempo, mas é que algumas ferramentas necessitam de algumas funcionalidades que só as teclas de atalho podem oferecer. Este é um assunto tão importante que o Photoshop permite que você crie seus próprios atalhos indo no menu Edit > Keyboard Shortcuts…

8 - Não organizar seu trabalho em Layers e Folders



Basicamente tudo o que você cria no Photoshop tem a ver com layers. Muitos iniciantes não sabem sequer da existência dos layers e acabam criando todo o trabalho na mesma camada (layer). Organizar seu trabalho em Layers e Folders ajudará você quando precisar mover, duplicar, omitir ou apagar alguma coisa. A localização de cada ítem de trabalho será bem mais fácil. Eu diria que em trabalhos muito complexos é quase impossível se achar se você não renomear seus Layers e Folders com nomes relevantes desde o princípio.

9 - Abusar de efeitos como bevel, emboss e drop shadows



Assim como utilizar gradientes muito espalhafatosos ou abusar do uso dos filtros são indícios de amadorismo, aplicar efeitos de emboss, bevel e drop shadow em todos os textos que você vê pela frente, não farão você parecer um expert em Photoshop. A menos que tenha um bom motivo para utilizar estes efeitos, não se anime muito com esta possibilidade. Efeitos de sombra também devem ser utilizados com cautela. Tente observar a sombra de outros elementos no seu trabalho para criar drop shadows coerentes. Ajustar a opacidade das sombras também é importante para obter um sombrado natural e soft e não algo abrupto e exagerado.

10 - Não tirar vantagens de Grids e Guidelines



Quem estudou o mínimo de design sabe da importância dos grids. Os elementos do seu design precisam estar alinhados. E é por isso que todo software gráfico possui Grids e Guidelines, para você não ter que ficar adivinhando se as coisas estão alinhadas.


fonte: http://www.designinabox.nu/tutoriais/12-erros-mais-comuns-de-quem-esta-iniciando-no-photoshop

Design para web sites

Fazer design para a Web não é a mesma coisa que fazer design para mídia impressa. O meio define as características do trabalho.

Fazer layouts para websites e fazer layouts para trabalhos impressos (revistas, catálogos, folhetos, posters etc.) fundamentam- se na mesma sintaxe visual: forma, cor, tom, composição, equilíbrio, harmonia, tensão etc. Mas as diferenças entre as tecnologias usadas produzem diferenças profundas na maneira de trabalhar em cada um dos dois meios.

O design gráfico para impressos – também conhecido como design offline – está limitado ao tamanho do papel em que será impresso, ao número de cores que serão utilizadas e a tiragem (quantidade de cópias impressas). Outros fatores importantes são o armazenamento e o transporte. Tudo isso tem um custo definido e deve ser balanceado dentro do orçamento do trabalho.

O design para a Web está visualmente limitado pela resolução do monitor do cliente e quantidade de cores que ele pode exibir. Dependendo da complexidade do site, entram em consideração também questões de infra-estrutura, como a velocidade da conexão e a do computador do cliente.

O armazenamento na Web é mais simples por ser virtual e não físico, e admite revisões constantes das páginas, enquanto o papel precisa ser completamente reimpresso a cada revisão. A página Web pode ser acessada por um número indefinido de pessoas a partir de qualquer lugar, enquanto o impresso tem uma quantidade finita de cópias e o transporte possui um custo proporcional à distância.

Cada cópia do seu folheto impresso é idêntica à outra, mas cada computador usado para acessar o seu site tem características diferentes dos outros, o que afeta a visualização. Essa variação deve ser levada em conta no design. Ao projetar o layout, se você tentar escapar às limitações do meio, estará fazendo uma escolha entre atender à maior quantidade possível de pessoas que visitar o seu site, ou apenas ao perfil de pessoa que você determinou como sendo o seu público alvo.

RESOLUÇÃO

A principal característica limitadora é a quantidade de pixels que podem ser exibidos pelo monitor. Isso é chamado de resolução. Há monitores com maior e com menor resolução, e você não tem como saber de antemão qual é a resolução do seu cliente. Nos dias atuais, usamos como referência a medida de 1024×768 pixels, pois ela é o padrão para a maioria dos computadores atualmente conectados (pouco mais de metade do total). Nessa tela cabe uma fotografia de aproximadamente um megapixel. A segunda resolução mais usada é um pouco menor, de 800×600 pixels, presente em aproximadamente 20% dos computadores. Designers gráficos que criam peças para impressão estão habituados a resoluções mais elevadas em monitores maiores. Existem pessoas, como eu, que trabalham com uma resolução de 1680×1050, bem como pessoas como minha mãe, que por dificuldade visual comum à idade, utiliza 800×600. “Os textos ficam maiores”, ela justifica.

Densidade

Outra diferença é com relação à nitidez das imagens. Quando você trabalha um layout para ser impresso em gráfica offset, existe uma máxima que diz: “quanto maior o número de dpi, melhor”, embora 300 dpi já seja suficiente para a maioria dos trabalhos.(DPI, literalmente “dots per inch” ou pontos por polegada, é um valor usado como medida de densidade – no caso, a quantidade de pixels representados em cada polegada do material impresso.)

No caso de websites, a máxima da gráfica não funciona, porque os pixels do monitor têm um tamanho maior que os impressos, e esse tamanho é determinado pela resolução da tela. Por exemplo, imagine medir com uma régua a quantidade de pixels que cabem numa polegada em um monitor de 17 polegadas na resolução de 1152×864 pixels. Obterá algo em torno de 92 pixels por polegada. Mas um monitor do mesmo tamanho a 800×600 pixels dará em torno de 64 pixels por polegada. A densidade de pixels menor que a impressa significa que seus materiais serão um pouco menos nítidos na tela. E em monitores de resoluções menores, as imagens parecerão maiores que nos de resoluções maiores.

Por padrão, os softwares usados pelo webdesigner assumem que a imagem na tela tem sempre 72 pixels por polegada. Acabamos de ver que na prática não é bem assim; a densidade real varia de um monitor para outro. O valor de 72 é apenas uma convenção. Se você colocar no seu site duas fotos idênticas de 200×150 pixels, sendo uma com 72 dpi e outra com 300 dpi, verá duas coisas exatamente iguais, já que cada pixel de cada imagem corresponde a exatamente um pixel exibido na tela. Assim, o que vale em imagens para a Web é somente a medida em pixels de largura e altura.

Peso dos arquivos

Você não precisa esperar para visualizar um impresso: é só pegar na mão e ler. Uma página de Web, porém, sempre exige algum tempo para se carregada pelo computador.

Páginas de Web “pesadas” – muito complexas, com grandes volumes de informação e imagens muito grandes – carregarão mais lentamente. Isso pode não ser um grande problema quando o seu público alvo dispõe de conexão rápida, mas todos os demais sofrem por isso e devem ser levados em conta.

Um arquivo de imagem fica mais pesado, isto é, maior em tamanho de bytes, conforme aumenta seu tamanho em pixels. Isso é óbvio. O que não é óbvio é que o peso da imagem aumenta exponencialmente com a dimensão. Assim, uma foto que ocupa a tela cheia fica muitíssimo mais pesada do que uma foto pequena no meio da página. Um site leve faz o uso inteligente de imagens menores.

O outro truque é saber fazer a compressão das imagens. Os formatos de arquivo de imagem usados na Web – GIF, JPG e PNG – têm esquemas de compressão capazes de reduzir muito o tamanho do arquivo final, à custa de uma parcela da qualidade da imagem. Quanto maior a compressão, menor a qualidade. Saber escolher o grau de compressão, balanceando um tamanho de arquivo aceitável com uma qualidade visual aceitável, é fator fundamental no peso da página.

RGB versus CMYK

Outra importante diferença entre o impresso e o monitor é o sistema de representação das cores. Na mídia impressa, o sistema básico é o CMYK – Cyan, Magenta, Yellow , blacK (azul-ciano, magenta, amarelo e preto). Essas quatro tintas são suficientes para reproduzir uma enorme gama contínua de cores naturais. (Utiliza-se tintas adicionais para obter as chamadas cores “especiais”, como as metálicas e fluorescentes comuns em capas de revistas e embalagens.)

Na tela do computador, e por extensão em toda a Web, usa-se o sistema RGB – Red, Green, Blue (vermelho, verde e azul). A partir da mistura dessas três cores fundamentais, o monitor forma todas as demais na tela. Num monitor moderno estão disponíveis cerca de 17 milhões de tons de cores individuais.

O correto para um layout de Web, no entanto, não é o uso indiscriminado de qualquer uma das 17 milhões de tonalidades possíveis, pois a representação das cores pelos monitores mundo afora pode variar, e você quer estar seguro de que todos verão o seu trabalho do jeito que ele foi criado. Por exemplo, um monitor mais antigo, com 10 anos de idade, exibirá somente 256 cores simultâneas. Para assegurar a visualização correta nesses monitores, foi criada uma escala padronizada de cores indexadas, que são as consideradas seguras para qualquer aplicação. Assim, aquele azul clarinho que você escolheu no layout não corre o risco de se tornar um cinza claro para outras pessoas. A paleta de cores indexadas possui 216 cores. As 40 cores excluídas da escala de 256 são as que dariam problemas ao visualizar um site. Se você não usar as cores indexadas, a cada 6 cores diferentes que você escolher haverá uma chance de uma delas dar problemas num monitor de 256 cores.

Monitores de 256 cores já são bastante raros atualmente, mas o uso de uma paleta de cores restrita facilita muito a escolha, pois é fácil se perder na paleta completa de milhões de cores.

Existem outras diferenças entre tela e impresso, mas, de forma resumida, essas são as que merecem mais destaque.


Modo Cores Indexadas: ao exportar uma imagem GIF, o Photoshop cria uma tabela de busca de cores (CLUT – Color Look Up Table), que armazena e indexa as cores da imagem. Se uma cor na imagem original não for exibida na tabela, o programa escolherá a cor mais próxima ou utilizará o efeito de pontilhamento (dither) para simular essa cor com as disponíveis. (Os formatos JPEG e PNG não têm essa limitação, empregando livremente toda a gama de cores possível em RGB.)


Criando um site

Quando falamos de design de sites, costumo ressaltar que o designer é um artista, mas isso não lhe dá o direito de “viajar na maionese” e fazer um layout que só ele conseguirá entender, deixando a navegação confusa, por exemplo. O designer trabalha para atender o cliente, para ajudá-lo a alcançar seus objetivos, sejam eles comunicação, vendas, informações etc.

A navegação de um site deve ser clara; o usuário precisa identificar, rapidamente, a empresa cuja página ele está visitando, localizar facilmente a informação que busca e ter uma forma clara de contato com a empresa ou com o dono do site.

A Day Made of Glass - Um dia feito de vidro

A empresa Corning pode não ser conhecida por muitas pessoas mas ela está presente na vida de muito, a Corning é uma empresa desenvolvedora de vidro, mas não simples vidros e sim vidros cada vez mais tecnológicos exemplo é o Gorilla Glass que é usando por muitos aparelhos celulares e o maior consumidor é a Apple no seus amados iphone e ipad e a Corning está também presente em alguns carros de luxo aonde o usuário pode controlar o insulfilm apenas com um simples toque no painel de seu veiculo.

Ela divulgou um vídeo da visão dela para o futuro, um vídeo sensacional um show de tecnologia, certas tecnologias demonstradas no vídeo já existe outras são estranha "o fogão que esquenta comida pelo vidro".

Vamos ao vídeo:

sábado, 19 de fevereiro de 2011

Tirando uma boa fotografia digital

ENQUADRAMENTO

Tente fugir do clichê de colocar o assunto sempre no meio da foto. Desclocar o objeto principal da imagem para algum ponto que não seja o centro pode fazer toda a diferença e deixá-la ainda mais interessante.
Divida mentalmente o visor da câmera em três colunas e três linhas, como se fosse um jogo da velha (algumas câmeras oferecem esse recurso, que pode ser visualizado na tela de LCD; verifique as configurações da sua). Na fotografia, isso também é conhecido como "a regra dos terços".

Posicione nas intersecções das linhas os pontos que você considera mais interessantes na cena. Nas linhas propriamente ditas também podem ser mostrados pontos de destaque, como por exemplo os olhos de uma pessoa ou o horizonte.


FLASH DESNECESSÁRIO

Uma das coisas mais complicadas na fotografia é aprender a usar o flash de forma correta. Disparar o flash muito em cima do assunto pode deixar a foto clara demais; muito longe, escura.

Lembre-se que o flash tem um alcance limitado, que geralmente fica entre três e cinco metros (às vezes um pouco mais). Não adianta deixar o flash ligado se o foco é um objeto que está 30 metros longe de você.
Um bom exemplo de uso desnecessário do flash é quando se está fotografando um show: é um caso em que não há necessidade alguma de iluminação extra. A luz do palco é mais do que suficiente para sua foto; usar o flash só vai iluminar as cabeças de quem estiver à sua frente.

FLASH NECESSÁRIO

Um ambiente escuro não é o único lugar onde o flash se faz necessário. Em uma foto contra a luz do sol, por exemplo, o flash pode ser usado como preenchimento, para deixar nítidos certos detalhes e evitar a formação de sombras.

Quando você tirar uma fotografia de alguém com uma fonte de luz ao fundo, note que a luz fica brilhante e somente a silhueta da pessoa aparece. Neste caso o flash irá suprir a falta de luz, deixando todos os pontos da foto visíveis.

Foto sob luz natural, sem utilização de flash


Foto sob luz natural, com flash de preenchimento

CUIDADO COM O FUNDO

Tenha muito cuidado ao selecionar o local onde você vai tirar uma foto. A escolha do que aparece ao fundo é tão importante quando o que vem em primeiro plano.

Cores vibrantes, linhas e outros objetos podem interferir ou desviar a atenção do tema central da foto. Um erro engraçado, porém muito comum, é fotografar alguém em frente a uma árvore onde os galhos parecem formar chifres sobre sua cabeça.

RETRATOS

Aproxime-se. Quando o assunto da foto é seu amigo, o que se quer mostrar é seu amigo, ora! 
Não tenha medo de chegar mais perto. Se você quiser, pode até cortar um pouco da parte de cima da cabeça do seu amigo: a essa distância é possível reparar em detalhes como sardas e cílios. O que não deve acontecer é aquele monte de nada na volta e um pequeno sujeito no centro da foto.


OLHE NOS OLHOS

Tire fotos na altura dos olhos da pessoa. Para tirar foto de criança fique de joelhos, sente, atire-se no chão. Faça o necessário para ficar ao nível dela.

FOTOS VERTICAIS

Muitos assuntos exigem uma foto vertical. Se o ele possuir mais linhas verticais, como um farol ou uma escada, vire a câmera de forma a obter uma imagem mais comprida do que larga.


APROVEITE A LUZ NATURAL

Não há luz mais bela que a do sol: sempre que puder, aproveite-a. Posicione-se de maneira que a fonte de luz fique atrás de você: aquilo que está sendo fotografado ficará bem iluminado (e com aspecto mais natural). Muitas vezes, um simples passo para o lado pode fazer toda a diferença. A luz difusa de um dia nublado é excelente para realçar cores e suavizar contornos; aproveite esses dias para tirar retratos.

Como falei há pouco, é preciso ter muito cuidado ao usar o flash. A luz dele é muito forte, e isso pode deixar rugas e imperfeições aparentes. Já notou como todo mundo fica feio em foto 3x4? Eis a resposta.

COR

A maioria das câmeras digitais permite fazer ajustes no controle de cor (também conhecido como white balance ou WB). Esse controle de cor faz com que o branco seja realmente branco sob determinada fonte de luz (lâmpada fluorescente, incandescente, luz natural, etc). Portanto, deixar que a câmera faça esse ajuste automaticamente não é o mais indicado para quem quer fidelidade.

A configuração para dias ensolarados, normalmente indicada por um pequeno sol, dá um tom mais amarelado às fotos. Essa tonalidade nos passa uma sensação de calor e afeto, tornando a foto mais interessante sob determinados aspectos.


Foto tirada com diferentes ajustes de WB

Teste todas as opções de WB de sua câmera; dessa forma, você saberá quando utilizá-los, e poderá se valer disso para criar alguns efeitos especiais.

EXPERIMENTE

Não há melhor dica do que esta: experimente. O segredo da fotografia está na tentativa e erro. Leia de cabo a rabo o manual da sua câmera para saber do que ela é capaz, e teste todas as configurações possíveis.

A fotografia é muito subjetiva, não há regras. O mais importante é aprender a dominar a luz e sua câmera, para depois fazer o que quiser.

sexta-feira, 18 de fevereiro de 2011

Testando as combinações de cores do site


O site checkmycolours disponibiliza uma ferramenta que verifica a
combinação de cores de um site. A ferramenta testa se a cor de fundo e a cor do texto possuem uma boa harmonia, se o contraste é suficiente para que uma pessoa mesmo com um tipo de deficiência visual consiga ler o conteúdo da página.

Logo depois de inserir o endereço da URL do site e clicar no botão Check, é apresentada uma tabela com todas as combinações de cores do site.

Caso o contraste não esteja apropriado é possível ajustar o erro.

Faça o teste.

Dicas de como desenvolver um site

Não pense em sair abrindo Dreamweaver, Fireworks, Flash… E iniciar seu projeto construindo a página inicial, links e tudo mais. Antes você deve desenhar o site. Para isso use como auxílio um programa gráfico como corel, ilustraitor, ou em uma folha de papel mesmo.
Em primeiro lugar você deve ter em mente:
Como vai distribuir as informações na tela. Exemplo. O menu de opções vai ficar no topo, ao lado, quantos links vai precisar, onde posicionar o logotipo da empresa, coisas do gênero…

  1. Velocidade
  2. O site deve ser leve, abrir a página inicial, ou boa parte dela, no menor tempo possível. Evite imagens pesadas. Muitas vezes uma imagem com resolução de 52 dpi não deixa muito a desejar se comparada a uma de 72dpi. No caso de animações em flash, devemos por um preloader (carregador) informando a porcentagem de conclusão do carregamento. No caso do site ser completamente em Flash, trabalhe com SWF externos, assim o usuário só aguarda o que realmente for ver…

  3. Manter um padrão
  4. Mantenha sempre um padrão no site. Se a página inicial tem o menu posicionado à esquerda, nas outras páginas deverá ser também. Não troque o menu de lugar, não faça cada página de uma maneira diferente. Mantenha um padrão em todas suas páginas. Exemplo. O logo da empresa sempre fica localizado no canto superior esquerdo, o menu sempre fica a esquerda e por aí vai… Mantenha uma Navegação Simples e objetiva. Faça com que a navegação de seu site seja fácil e intuitiva. Sem que o usuário fique procurando e procurando uma informação.

  5. A importância das cores
  6. Tome muito cuidado com as cores. Exemplo. Já tentaram ler um texto em azul sobre um fundo preto? Horrível. Muito cansativo! Este tipo de cuidado deve-se ter. Outra dica: quando colocamos imagens como background, achamos desnecessário uma cor no fundo da página. Já pensaram se essa imagem não abrir, e o texto dessa página tiver da cor branca, amarela, cinza claro ou qualquer outra cor clara? Levando em consideração que a cor default do fundo da página é branco. Desgraça total…

  7. Cuidado com textos extensos
  8. Não crie página de texto com parágrafos muito extensos. Dê um espaçamento entre um parágrafo e outro. Se caso o texto for muito grande, quebre-o em várias páginas. Use fonte de fácil leitura. Exemplo: Arial, Times New Roman e Verdana, Courier.

  9. Links quebrados
  10. Cuidado com links quebrados. Nada mais desagradável que clicar num link que não vai a lugar nenhum.

  11. Página que não pode faltar
  12. Obrigatoriamente a site dever ter um link, que leve o visitante até a página de contato. Faça um formulário com campos do tipo: nome, e-mail mensagem, isso é o mínio que uma página de contato deve ter. Ponha de preferência em todas as páginas um link para seu e-mail.

  13. Conteúdo e atualização
  14. Outro ponto importante é o conteúdo e a atualização. Como quer manter o visitante no seu site se não tem conteúdo para “segurar” o visitante. Então, ponha muito conteúdo no site. Mas não basta ter conteúdo se a cada visita o usuário lê as mesmas coisas, as mesmas notícias. Atualize seu site no mínimo semanalmente.

Belas ferramentas on line para Web designers

Hoje em dia existem muitas ferramentas on line para Web Designers, para agilizar o desenvolvimento do site e podem facilmente serem encontradas na internet. Essas ferramentas servem para realizar tarefas com facilidade e rapidez. Cada desenvolvedor tem sua lista de ferramentas, vou passar algumas para vocês terem base de onde começar, com essas ferramentas basta vocês procurarem outras ferramentas
Confira as ferramentas abaixo, algumas delas vão melhorar sua produtividade e agilidade durante seu trabalho.

Typetester

Aplicativo para fazer a compação de fontes. As fontes disponíveis são as mais comununs, entre elas, arial, verdana, Georgia. Além de trocar de fonte você pode escolher tamanho, cores e outras configurações…



Icon Finder

O uso de ícones em trabalhos impressos e em sites estão cada vez maior. Para achar seus ícones nada melhor que um buscador de icones.



Rounded Corner

Esse aplicativo gera um código HTML e CSS para simular uma div com cantos arredondados utilizando imagens. O aplicativo vai criar quatro arquivos de imagem, os htmls necessários e o código CSS para colocar cantos arredondados em torno do seu conteúdo. Essa técnica já se encontra ultrapassada uma vez que podemos fazer uso das propriedades CSS3 para tal finalidade.


Vecteezy

Obtenha gratuitamente gráficos vetoriais.


Photoshop Brushes

Pincéis (Brushes) photoshop é uma ótima maneira de acrescentar um toque de beleza e profissionalismo em seus trabalhos. Para pesquisar os pincéis você pode utilizar a opção de filtro e também a opção de versões do aplicativo.

CSS3 Made Simple

A grande maioria dos navegadores hoje em dia já tem suporte às propriedades CSS3. Pensando nisso o site CSS3 Generator desenvolveu um aplicativo online capaz de gerar as principais propriedades CSS3 sem a necessidade do desenvolvedor, ou Web Designer saber essas propriedades.

Para usar a ferramenta você seleciona um tipo de efeito que você está tentando criar a partir de uma lista drop-down, modifica algumas configurações e obtém um bloco de código CSS para copiar. Os efeitos incluem cantos arredondados, sombras, gradientes, etc.


Galeria de Inspiração para Web Designer

Uma situação muito comum principalmente para quem trabalha com Design é a falta de criatividade para desenhar seus layouts, ilustrações, etc. Quem já não ficou por horas em frente ao Photoshop com a página branca, sem saber que cor usar, que desenho fazer… Nessas situações é interessante dar uma olhada em “galerias de inspirações para Web Design”, que nada mais são que uma coleção de trabalhos. Esses tipos de sites têm sido extremamente influentes na escolha de Layouts para os projetos dos Designers.


Galeria de Inspiração de CSS

Quem trabalha com Internet sabe o poder das CSS. Esse site reúne uma coleção de sites onde o destaque fica por parte das famosas folhas de estilos, o site também pode ser usado como uma fonte de inspiração para desenhar seus layouts.


terça-feira, 15 de fevereiro de 2011

Definição de Projeto

Conjunto de ações, atividades, recursos materiais e humanos e tudo o mais necessário para a execução daquilo que foi imaginado ou desejado. O termo projeto vem do latim projectu e significa “lançado à diante”, ou seja, ideia que se forma para executar ou realizar algo no futuro; plano; intento; desígnio.

Características de um projeto.

Temporários


Todos os projetos possuem inicio e final definidos. O final é alcançado quando os objetivos são atingidos, quando se define que não é mais possível alcançar esses objetivos ou quando não mais existir a necessidade do projeto e ele for encerrado.

Produtos, serviços ou resultados exclusivos

Um projeto cria entregas exclusivas como um produto, uma capacidade de produzir algo ou um resultado final.

Os projetos se originam das seguintes considerações

Demanda de Mercado


Quando, por exemplo, uma indústria decide ampliar a área de fabricação devido a um aumento crescente das vendas de um produto.

Necessidade organizacional

Uma empresa decide implantar um sistema informatizado para melhor atender as necessidades de trabalho.

Solicitação de um cliente

Uma empresa solicita um produto, novo website ou um sistema de informação

Requisito legal

Quando o governo institui a obrigatoriedade de emissão eletrônica de notas fiscais.

Avanço tecnológico

Quando por exemplo uma empresa de telefones celulares solicita o desenvolvimento de uma nova geração de aparelhos.

Necessidades social

Quando por exemplo, um órgão publico autoriza a construção de uma escola para atender um bairro que ainda não tinha esse recurso.

Exemplo de projetos

Desenvolvimento de um novo produto

Desenvolvimento de um Website

Implantação de um novo software e sistemas

Implantação de uma nova linha de produção

Expansão de unidades industriais

Construção de edifícios residências

Agora pense bem e planeje antes de começar um projeto

Fonte: Livro gerenciamento de projeto Teoria e Pratica

Custo do Projeto

Independente do tipo e tamanho do projeto, há necessidade de utilização de recursos para execução das atividades. Os recursos, podem ser humanos, de equipamentos ou de materiais custam dinheiro à empresa ou ao dono do projeto. Além desse tipo de custo, chamado direto, existem outros custos que devem ser considerados no projeto como, por exemplo, salários da administração, despesas de manutenção do escritório, materiais e outros.
Custo
Custo é o valor monetário ou preço de uma atividade ou componente do projeto. Esse valor compreende a somatória de todos os custos envolvido na execução da atividade ou componente do projeto.
Estimar os custos
A pergunta que se faz em todo o ciclo de vida do projeto é: “ Quanto custará o projeto ?” Ou Melhor, “Afinal quanto custará o projeto?”. Só será possível saber com exatidão quando o projeto estiver concluído. É possível executar uma estimativa com base nas informação disponíveis no momento. A estimativa de custos é o processo de prever um resultado futuro em termos de custo, com base nas informações disponíveis no momento. Com o andamento do projeto e o consequente maior conhecimento dos detalhes do mesmo, deve-se realizar nova estimativa mais apura.

Pequena história da internet

Um pouco da História de como começou a internet.

1965 Dois computadores no laboratório Lincoln do MIT conversam entre si usando a tecnologia de troca de pacotes.

1969 Criação da ARPANET, a primeira rede de computadores à base de troca de pacotes, a percursora da Internet. Os primeiros computadores conectados em rede entre a Universidade da Califórnia e o Stanford Research Institute. Estava criado a ARPANET, primeira rede.

1972 Primeiro programa de e-mail é criado pelo programador Ray Tomlinson.

1973 Primeira conexão internacional da ARPANET é realizada. A conexão é com a University College of London e o Instituto de Pesquisa Norsar (Noruega).

1974 É criado um novo protocolo de troca de pacotes para ARPANET, o TCP por Vint Cerf e Robert Kahan, padrão mundial usado até hoje.

1980 O físico Inglês Tim Berners- Lee propõe um projeto baseado no conceito dehipertexto para facilitar a troca de informações entre pesquisadores do CERN, e escreve um protótipo para ele, o programa “ENQUIRE”, a semente do que se tornaria a world Wide Web.

1983 O sistema de nomes de Domínio (DNS) é projetado por Jon Postel, Paul Mockapetris e Craig Partridge. Os domínios .edu , .gov, .com, .mil, .org, .net são criados

1984 O escritor Willian Gibson publica o livro Neuromancer e cunha o termo ciberespaço

1991 Com base em ideias similares à do “ENQUIRE”, Tim Berners-Lee disponibiliza o primerio site da World Wide Web, após ter criado a sua linguagem (HTML), as regras de comunicação entre um servidor e um cliente(HTTP).

1993 O browser Mosaic é desenvolvido por Marc Andreesen e Eric Bina no National Center for Supercomputing Applications (NCSA) da Universidade de Illinois (Champaign-Urbana). No ano seguinte 1994 os dois fundariam a Netscape .

1995 O Altavista como o primeiro grande índice da internet. Também introduziu o recurso de tradução automática de páginas, que mais tarde seria adotada por outros engenhos de busca. Em fevereiro de 2003, a empresa assinou com a Overture um opção de venda, mas em julho de mesmo ano a Overture foi vendido pra Yahoo!.

1996 Dois estudante de graduação da Universidade de Stanfor, Larry page e Sergei Brin, criam um sistema de busca Chamado BackRub, rebatizado no ano seguinte deGoogle.

Sites para celulares moveis

Que a tecnologia evolui muito rápido todo mundo sabe, mas onde isso se aplica a nós web designers?

Pare e pense um pouco, lembre-se da internet 8 anos atrás. O que mudou? O que evoluiu?

Você vai perceber que a internet se tornou muito mais do que um meio de comunicação,ela se tornou o principal meio de comunicação. Imagine o mundo hoje sem internet: as comunicações, os economia, o governo, tudo isso depende da tecnologia que cada cidadão tem o pode usar, porque a internet é livre.

Eu ouso dizer que a internet é como energia elétrica, você só percebe que ela existe quando ela não está disponível. E por isso as pessoas criaram mais formas de estar conectado, hoje em dia o grande hype é o acesso a partir de dispositivos móveis.

Celulares, Smartphones, Tablets, Video games e outros gadgets agora vem equipados para acessar a rede em praticamente qualquer lugar, mas os sites estão preparados para estes dispositivos?

Um site para dispositivos móveis(ou Mobile) não é apenas “um minisite”, esse conceito é errado. Um Website móvel deve ter o mesmo conteúdo do site para computadores ou pelo menos, oferecer todos os serviços básicos que o website normal oferece, o que diferencia um do outro é a forma que você vai apresentar esse conteúdo.

Os navegadores desses aparelhos estão cada vez melhores e as vezes renderizando as páginas perfeitamente, porem não é só o navegador que conta nessa hora.

Ao acessar a internet móvel hoje em dia, a tecnologia mais usada é o 3G, que no Brasil, é oferecido a preços caríssimos. As operadoras de telefonia no Brasil criam pacotes que restringem e limitam a navegação de usuários após certo numero de megabites, por tempo ou por tipo de acesso. Ultrapassou seu limite? Pagou.

É aí que entra o principal papel de um Site para dispositivos móveis: a preocupação com a banda que esse site vai consumir. Um site normal as vezes chega a 4MB para ser carregado, que na velocidade e planos atais do 3G é inadmissível,

E como podemos melhorar nossos trabalhos para esses dispositivos?

Existem algumas dicas que podem ajudar:
  • Utilize folhas de estilo (css) para montar o tema do seu site, dessa forma você pode criar um outro visual para dispositivos móveis apenas trocando o arquivo css.
  • Não utilize Flash, embora vários dispositivos suportem flash, Iphone e Ipad não. Alem disso, o uso e flash torna o carregamento da página ainda mais lento.
  • Evite usar Scripts, além de aumentar o tempo de carregamento, certos dispositivos podem não exibi-los corretamente. Se for utilizar, faça de maneira que a navegação no site não seja afetada caso o script não funcione. Existem algumas soluções para esses scripts, que são frameworks preparados especialmente para acesso móvel. Um grande exemplo é o jQueryMobile
Pra servir de exemplo, vou deixar uma lista de sites que tem versões apropriadas para dispositivos móveis:
Facebook:

Flickr:

Amazon:



E agora, vai pensar em acesso móvel para os próximos trabalhos?




sexta-feira, 11 de fevereiro de 2011

Criando efeito 3D para fotografias

Hoje vou ensinar vocês a criar o efeito 3D em suas fotografias muito parecido com as fotos que a Playboy está usando nas modelos. É muito simples de criar.

Vamos aos passos:

1- Abra a fotografia que você irá utilizar.


Pressione CTRL+J para duplicar a imagem.

2- Clique com o botão direito sobre a camada duplicada e escolha a opção Blending Options (Opções de Mesclagem).

Na janela de Blend (Mistura), basta desmarcar a caixa R como mostrado abaixo. Clique em OK.


3- Mova a imagem ligeiramente para a direita. Dica: Você pode utilizar a seta da direita em seu teclado. No caso desta imagem, pressionei 4 vezes.


Você deve estar pensando: Tá, criei a imagem, mas como posso conferir o resultado em 3D?
Simples. Basta seguir este tutorial e criar seu óculos 3D caseiro.

Depois que criar a sua fotografia e experimentar com os óculos, não esqueça de deixar sua opinião.

quarta-feira, 9 de fevereiro de 2011

Holograma uma tecnologia inovadora e linda

Parece coisa de ficção científica, mas não é. Essa tecnologia se aprimora e é utilizada a cada dia de forma mais diversificada. No japão por exemplo existe “artistas digitais” como é o caso de Hatsune Miku, uma cantora japonesa famosa que não existe, ou melhor, existe em forma de holograma e faz o maior sucesso.
Veja o vídeo abaixo:


E temos tambem uma outra banda muito conhecida, essa agora é Norte Americana.




Não são necessárias muitas ferramentas para fazer um holograma. Você pode fazer um com:
  • um laser: os lasers vermelhos, geralmente lasers HeNe (hélio-néon) são comuns na holografia. Alguns experimentos caseiros de holografia contam com diodos de ponteiros de laser vermelho, mas a luz do ponteiro de um laser tende a ser menos coerente e estável, o que pode dificultar a obtenção de uma boa imagem. Alguns tipos de hologramas utilizam lasers que produzem cores diferentes de luz. Dependendo do tipo de laser que estiver usando, você também pode precisar de um obturador para controlar a exposição; 
  • lentes: a holografia geralmente é considerada uma "fotografia sem lente", porém ela requer lentes. Contudo, a lente de uma câmera focaliza a luz, enquanto as lentes usadas na holografia fazem o feixe propagar-se;
  • um divisor ótico: dispositivo que utiliza espelhos e prismas para dividir um feixe de luz em dois feixes;
  • espelhos: direcionam os feixes de luz para os locais certos. Junto com as lentes e o divisor ótico, os espelhos devem estar totalmente limpos. Pó e sujeira podem piorar a imagem final;
  • filme holográfico: o filme holográfico pode gravar luz a uma resolução muito alta, o que é necessário para criar um holograma. É uma camada de compostos sensíveis à luz em uma superfície transparente, como o filme fotográfico. A diferença entre o filme fotográfico e o holográfico é que o filme holográfico deve ser capaz de gravar mudanças muito pequenas de luz que ocorrem a distâncias microscópicas. Em outras palavras, ele precisa ter umgrão muito fino. Em alguns casos, os hologramas que utilizam um laser vermelho contam com emulsões que respondem mais intensamente à luz vermelha.



Existem diversas maneiras diferentes de organizar essas ferramentas - mostraremos um arranjo básico de holograma de transmissão.
  1. Os pontos do laser no divisor ótico, que divide o feixe de luz em duas partes.
  2. Os espelhos direcionam os caminhos desses dois feixes, para que eles incidam em seus alvos.
  3. Os dois feixes passam através de uma lente divergente e tornam-se uma fileira larga de luz em vez de um feixe estreito.
  4. Um feixe, o feixe do objeto, reflete fora do objeto e na emulsão fotográfica.
  5. O outro feixe, o feixe de referência, incide na emulsão sem refletir em outra coisa que não seja o espelho.
Temos outros modelos para gerar holograma como em linha reta.

terça-feira, 8 de fevereiro de 2011

Aumentando o desempenho do Photoshop

Caso você não tenha um computador suficientemente bom para rodar o Photoshop, vou mostrar um recurso que pode ajudar muito. O Photoshop guarda dados para os recursos de Undo, History etc. Essas informações consomem memória, então veja a dica para melhorar o desempenho do seu computador:

1) Vá em opções de menu: =>editar => Preferências => geral (Ctrl + K)


2) Clique em desempenho:


É nesta janela que vamos encontrar as configurações que gerencia diretamente a memória e o processamento do Photoshop. Vou explicar cada parte dessa janela de acordo com a marcação numérica da foto.

1 – Memory Usage ou (Uso de Memória) => Aqui é o local que iremos ajustar o valor da memória, fazendo com que o photoshop use mais recursos do computador (PC), ou seja, quanto da memória do computador nós desejamos destinar ao Photoshop. Se você está tendo problemas de lentidão no programa, aumente um pouco o valor, dependendo da quantidade de RAM que você tem no seu computador, deixando entre 55-65% (para aqueles com até 2 GB de RAM) e 70-75% (para 4 GB de RAM e mais). Só não vai exagerar, deixe um pouco de memória para o sistema operacional e para outros recursos do computador.

2 – History & Cache ou (Histórico e Cache) => Quando editamos uma imagem, um dos comandos que mais usamos é o Undo (”voltar” ou “desfazer”). Isso porque é comum que aconteçam erros que precisam ser corrigidos. No Photoshop, você pode escolher quantos “passos” você quer guardar na memória para poder voltar atrás, o chamado “histórico”. Porém, cada um desses passos precisa ser armazenado na memória e tem grande impacto na velocidade de processamento. O padrão do Photoshop é “20″ passos, mas isso é muita coisa quando se trata de computadores mais lentos. Reduza este número para “10″ e você terá um bom ganho de desempenho.

3- Scratch Disks ou (Memória Virtual) => Além da memória RAM, o Photoshop usa Scratch Disks ou a chamada “memória virtual”, que é a utilização do espaço disponível no HD do computador para simular memória RAM. Se você tiver mais de uma unidade de disco rígido, permitindo que o Photoshop possa usar o disco rígido secundário, isso vai aumentar drasticamente a sua velocidade de trabalho. Não se preocupe com o espaço, pois será apenas temporário e depois apagado quando você sair do Photoshop.

4- Enable OpenGL Drawing ou (Ativar desempenho do OpenGL) => Também no menu, marque a está opção, cuja finalidade é que o programa use a placa de vídeo para ganhar mais velocidade.

Pronto, problema resolvido qual quer duvida não deixe de perguntar, pois como diz a minha mãe quem tem boca vai a Roma.


segunda-feira, 7 de fevereiro de 2011

Fazendo um óculos 3D

Bom para fazer um óculos 3D é bem simples basta termos uma cartolina papel  acetato vermelho e verde e pronto temos um óculos 3D.
Vamos entender um pouco mais sobre o óculos e como ele funciona.
A ilusão de ótica 3D é formada por imagens que têm dois componentes, um azul e outro vermelho. Assim, quando você coloca um óculos em que cada lente tem uma dessas cores, cada olho só consegue ver um dos componentes da imagem. A lente vermelha neutraliza esta cor da imagem em um dos olhos, assim como a lente azul no outro lado. É a diferença de perspectiva entre as duas imagens que cria a ilusão de profundidade.
Agora vamos montar o nosso primeiro óculos? Claro que vamos :)
Vamos ao material...
- tesoura
- cola
- uma impressora e papel sulfite
- um pedaço de cartolina
- acetatos vermelho e azul

Modo de preparo :)

1- Clique na figura que está logo abaixo. Imprima a imagem numa folha sulfite (clique com o botão direito e, em seguida, Salvar Como).


2- Recorte o molde e cole as três peças, já unidas em sua posição correta (formando as hastes e a estrutura dos óculos), numa folha de cartolina
3- Recorte a estrutura resultante na cartolina, inclusive os espaços indicados para as lentes
4- Cole um pedaço de acetato vermelho e outro de acetato azul nos locais indicados
5- Dobre as hastes e seus óculos 3D estão prontos para uso!

Agora vamos testar o nosso brinquedinho novo :)
Basta pegar um filme em 3D ou ver algum video no youtube, pra quem não sabe o youtube tem uma sére de videos 3D, basta a gente testar o óculos

Barra

 
Copyright 2011 DarkFlayster.