Como fazer uma página em HTML 5 + CSS3 + jQuery!

Jomar — Thu, 08 Apr 2010 15:51:41 +0000

Já falamos das mudanças do HTML 5 em um outro post aqui no blog (leia “O que muda com o HTML 5?”), mas agora chegou a hora de botar a mão na massa, ou melhor, no código e mostrar como se faz uma página na nova versão de HTML, utilizando CSS e jQuery. É sempre bom lembrar que nem todos os browsers suportam esta linguagem e que ela é muito recente ainda, ou seja, muita coisa ainda pode mudar e/ou surgir!

Para ver como o layout ficará, clique aqui e confira o demo. Ele também está disponível para download, no tutorial orginal (aqui apresento uma tradução), caso queira acompanhá-lo mais de perto. O plugin de jQuery utilizado para rolar a página quando clicar no link do menu pode ser baixado aqui.

Antes de mudar totalmente para o HTML 5, faça uma análise nos seus visitantes, para saber se a maioria utiliza um navegador que suporte esta versão. Se você gostou desse layout, mas ainda prefere ele na versão antiga, ele está disponível para download no Tutorialzine.

O Design

Todo layout, ou a grande maioria deles, começa em um programa de edição de imagens. Não porque ele necessariamente deverá ter imagens, mas para se ter uma noção de como a página ficará antes de ser finalizada. O modelo a seguir é de um site com página única, apenas para explicação.

HTML

Vale falar novamente que ele ainda está em fase de testes, e muita coisa nova pode surgir daqui para frente. No entanto, algumas normas já estão completas e podem ser utilizadas hoje, com a que usamos neste tutorial:

header – Envolve o cabeçalho da página;
footer – Envolve o rodapé da página;
section –
article – Separa os artigos individuais do resto da página;
nav – Contém o menu de navegação;
figure – Geralmente contém uma imagem usada como ilustração para o artigo.

Estes são utilizados exatamente como você poderia usar divs normal. Com a diferença de que essas marcas organizar sua página semanticamente. Em outras palavras, a ideia é organizar os espaços do site para facilitar o reconhecimento de cada parte pelos motores de busca, gerando mais visibilidade para a sua página e consequente mais visitantes.

No entanto, existem algumas implicações em usar HTML5 hoje. Uma das mais notáveis é a família de navegadores IE, que não suporta essas marcas (que pode ser corrigido com um simples arquivo de inclusão JavaScrip). É por isso que você deve basear sua decisão de se mudar para HTML5 em audiência do seu site.

template.html – Head

 

    

        

        Coding A CSS3 & HTML5 One Page Template | Tutorialzine demo

Você pode observar o novo na linha um, que informa ao navegador que a página é criada com o padrão HTML5, também é muito mais curto e mais fácil de lembrar que doctypes mais antigos.

Depois de especificar a codificação do documento e do título, passamos a incluir um arquivo JS especial que permitirá que o Internet Explorer (qualquer versão) processe tags HTML5 corretamente. Novamente, isso significa que se um visitante está usando o IE e tem JavaScript desabilitado, a página vai ser vista toda desarrumada.

template.html – Body

 

    	 

             

                
                    Your Logo
                    and a fancy slogan
                
                 
                    
                        Photoshoot
                        Sweet Tabs
                        Navigation Menu

Nesta parte do código já utilizamos as novas tags, que dividem a página em seções separadas semânticanticamente. O #page section define uma largura de 960px na folha de estilo (largura padrão, principalmente levando-se em conta telas de computadores mais antigos). Depois vem a tag de cabeçalho e de navegação.

Observe os atributos do link (href), o símbolo # corresponde ao id do artigo que ele indica.

template.html – Article

          

				

                
  

                 
                    Photoshoot Effect

                    

                    

                    	 
	                    	
                        

                        In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio.

A marcação acima é compartilhada entre todos os artigos. A primeira é a linha divisória. Após isso, temos o novo artigo (tag

), com um ID único, que é utilizado pela navegação de rolar a página.

Dentro temos o título do artigo, dois parágrafos e a nova tag figure, o que marca o uso de imagens no artigo.

template.html – Footer

         

           

           Copyright 2010 - YourSite.com
 

           Go UP
           Template by Tutorialzine

A tag footer faz exatamente o que você espera que ela faça. Na parte inferior da página estão o resto do JavaScript, o que aumenta a biblioteca jQuery e o do scrollTo plug-in, que vamos usar nas próximas etapas.

CSS

Como estamos utilizando HTML5, temos que tomar algumas medidas adicionais com o styling. As marcas que esta nova versão do HTML introduz ainda não são fornecidos com um estilo padrão. Esta é, no entanto, facilmente corrigido com um par de linhas de código CSS:

CSS – parte 1

header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}

body{
/* Setting the default text color, size, page background and a font stack: */
font-size:0.825em;
color:#fcfcfc;
background-color:#355664;
font-family:Arial, Helvetica, sans-serif;
}

/* Hyperlink Styles: */

a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}

a:hover{
text-decoration:underline;
}

a img{
border:none;
}

/* Headings: */

h1,h2,h3{
font-family:”Myriad Pro”,”Helvetica Neue”,Helvetica,Arial,Sans-Serif;
text-shadow:0 1px 1px black;
}

h1{
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}

h3{
/* The slogan text */
font-family:forte,”Myriad Pro”,”Helvetica Neue”,Helvetica,Arial,Sans-Serif;
font-size:2em;
font-weight:normal;
margin:0 0 1em;
}

h2{
font-size:2.2em;
font-weight:normal;
letter-spacing:0.01em;
text-transform:uppercase;
}

p{
line-height:1.5em;
padding-bottom:1em;
}

.line{
/* The dividing line: */
height:1px;
background-color:#24404c;
border-bottom:1px solid #416371;
margin:1em 0;
overflow:hidden;
}

article .line{
/* The dividing line inside of the article is darker: */
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}

footer .line{
margin:2em 0;
}

nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;

border:1px solid #FCFCFC;

-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}

/* The clearfix hack to clear the floats: */

.clear:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* The navigation styling: */

nav ul li{
display:inline;
}

nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}

nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}

nav, article, nav ul li a,figure{
/* Applying CSS3 rounded corners: */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

Nós basicamente precisa definir o mostrar valor das novas etiquetas para block, Como você pode ver a partir do primeiro par de linhas. Após isso, o estilo pode usá-los como gostaríamos de fazer com divs regular.

CSS – parte 2

/* Article styles: */

#page{
width:960px;
margin:0 auto;
position:relative;
}

article{
background-color:#213E4A;
margin:3em 0;
padding:20px;

text-shadow:0 2px 0 black;
}

figure{
border:3px solid #142830;
float:right;
height:300px;
margin-left:15px;
overflow:hidden;
width:500px;
}

figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}

figure img{
margin-left:-60px;
}

/* Footer styling: */

footer{
margin-bottom:30px;
text-align:center;
font-size:0.825em;
}

footer p{
margin-bottom:-2.5em;
position:relative;
}

footer a,footer a:visited{
color:#cccccc;
background-color:#213e4a;
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}

footer a:hover{
text-decoration:none;
background-color:#142830;
}

footer a.by{
float:left;

}

footer a.up{
float:right;
}

Na segunda parte do código, nós aplicamos um estilo mais detalhada dos elementos. A largura para a cada seção da página, uma propriedade hover para o figura e estilos para os links dentro do rodapé. Há também alguns estilos que não estão incluídos aqui, mas você pode vê-los no arquivo styles.css. O layout está organizado na maneira como ilustra a figura abaixo:

jQuery

Para melhorar o modelo, vamos criar um efeito de rolagem suave quando o visitante clicar em um link de navegação, usando o plug-in scrollTo jQuery que foi incluído na página anterior. Para fazer funcionar só precisamos de um loop nos links na barra de navegação (o link e UP no rodapé) e atribuir um evento onclick que irá acionar a função $. SrollTo () , que é definida pelo plug-in.

script.js

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

$(‘nav a,footer a.up’).click(function(e){

// If a link has been clicked, scroll the page to the link’s hash target:

$.scrollTo( this.hash || 0, 1500);
e.preventDefault();
});

});

Finalizando isto, nossa página esta terminada

Tutorial original por Tutorialzine, traduzido por Jomar Bellini.

Webtutoriais:978F9977

46 vídeo tutoriais básicos de Photoshop!

Jomar — Wed, 31 Mar 2010 14:29:49 +0000

O You Tube disponibiliza uma enorme quantidade de vídeos no seu endereço na internet e é possível organizá-los em listas de reprodução. Me deparei com uma lista com 46 vídeo tutoriais básicos de Photoshop se sensacional. Não básico no sentido de iniciante, mas básico no sentido de saber lidar corretamente com as ferramentas que o programa te oferece, básico no sentido de facilitar a sua vida no Photoshop. Como você pode ver, a maioria dos vídeos é de curta duração e, mesmo estando em inglês, é fácil acompanhar os movimentos que ele faz no programa. A versão utilizada é a CS4.

1-) Removendo olhos vermelhos (HD)

2-) Trabalhando com ajustes de camadas (HD)

3-) Como usar Droplets: Você pode perguntar “WTF?”, mas o Droplets é muito útil para quem trabalha, por exemplo, com sites de baladas e precisa redimensionar várias imagens ou aplicar o mesmo efeito (colocar o logotipo, por exemplo) em várias fotos. Ao invés de aplicar cada efeito em cada imagem isolada e repetidamente, você pode criar um Droplet que vai fazer isso automaticamente para você.

4-) Como usar o Kuller, a ferramenta integrada com o site da Adobe que fornece escala de cores para você trabalhar

5-) Trabalhando com o Color Range Revision

6-) Existem várias maneiras de ver o trabalho que você está fazendo, conheca-as neste vídeo.

7-) Trabalhando com o Content-Aware Scaling, a ferramente que amplia/diminui sem
distorcer a imagem!

8- ) Trabalhando com Smart Filters

9-) Trabalhando com Extract Filter

10-) Animando no Photoshop

11-) Trabalhando com Replace Color

12-) Fazendo reflexos sem distorcer/destruir a imagem final (HD)

13-) Vibrance VS. Saturation (HD)

14-) Usando a Pen Tool – parte 1

15-) Usando a Pen Tool – parte 2

A lista completa pode ser vista no You Tube, clicando aqui.

Photoshop: Efeito Red Pops

Jomar — Wed, 24 Mar 2010 16:28:50 +0000

O primeiro tutorial de manipulação de imagens do JB Tutos fala sobre o efeito “Red Pops”, que dá um toque meio antigo e diferente para as suas fotos ficarem muito mais originais
1-) Abra sua imagem no Photoshop. Dê preferência para imagens com tons próximos ao vermelho, como o amarelo e o laranja.

2-) Duplique a sua imagem. Defina o modo de camada para ‘Screen‘. A definição de opacidade vai depender do tipo de imagem que você tem. Se é uma imagem um pouco escura, use alta definição de opacidade. Ou adicione uma outra camada de tela, se necessário. Basta escolher um número agora. Mais tarde, quando você já tiver feito todos os passos, ainda pode ajustar a opacidade para melhorar o resultado.

3-) Duplique a imagem mais uma vez. Defina o modo de camada para Soft Light. Defina a opacidade em torno de 40 – 50% … ou seja o número de sorte que você mais gosta ^-^

4-) Agora, vá em Layer> New Adjustment Layer> Selective Color.
Use as configurações abaixo para Reds e Neutrals e clique em OK:

5-) Em seguida, vá em Layer> New Fill Layer> Solid Color. Defina o valor de cor, conforme mostrado abaixo. Defina o modo desta camada de cor para Exclusion e coloque 100% de opacidade.

6-) Mais uma vez, vá para Layer> New Adjustment Layer> Selective Color. Agora temos um pouco mais trabalho a fazer aqui. Defina as configurações da seguinte forma:

7-) Em seguida, vá para Layer> New Fill Layer> Solid Color. Defina o valor de cor, conforme mostrado abaixo. Defina este modo de camada de cor de preenchimento para Lighten e defina a opacidade em 70%.

Mais uma vez, vá para Layer> New Fill Layer> Solid Color. Defina o valor de cor, conforme mostrado abaixo. Defina este modo de camada de cor de preenchimento para Exclusion e 80% de opacidade.

9-) Eu prometo a vocês, esta será a última camada de preenchimento de cor que você precisa fazer. Layer> New Fill Layer> Solid Color. Defina o valor de cor, conforme mostrado abaixo. Defina este modo de camada de cor de preenchimento para Exclusion e 10% de opacidade.

10-) Em seguida, vá a Layer> New Adjustment Layer> Curves. Nós apenas estamos indo fazer a curva em S para os Reds eo S-invertido para a curva de Blues. Veja as imagens abaixo:

Terminamos aqui. Lembrando que os valores podem variar de imagem para imagem. Se sua arte não ficar tão boa, você pode voltar a algumas das camadas e ajustar a opacidade, até que você tem algo de bom.

Traduzido de Best Photoshop Tutorials por Jomar Bellini.

O que você quer ver no JBTutos?

Jomar — Fri, 19 Mar 2010 14:31:33 +0000

O JB Tutos quer saber: O que você quer ver no blog??

Hoje começa a enquete para deixar o blog ainda mais útil para você!

Entre as opções estão as top listas de links favoritados, aqueles links que você não pode deixar de ter nos seus favoritos; Photoshop, tutoriais de manipulação de imagens, web design e design gráfico; Corel Draw, focando em vetorização e dando dicas para você usar da melhor maneira o Corel Draw; Tutoriais de Internet, com dicas de, por exemplo, como ser interessante no Twitter, como melhorar o número de visitantes do seu blog, SEO, entre outros; Web Design, dando continuação a semanada de posts, ou Vídeos, que são raros no blog, só postei um até agora (logicamente, eles estarão dentro dos assuntos abordados no blog).

Se você quiser, também pode sugerir outros assuntos que não estão na enquete. É só comentar que responderei o mais rápido possível

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Vetorizando no Corel Draw!

Jomar — Wed, 17 Mar 2010 13:24:44 +0000

É difícil para iniciantes acharem um bom tutorial sobre vetorização no Corel Draw na internet. Achei este no blog Vetorizar, escrito por Alan Melo, que vale a pena conferir! Abaixo, você confere um dos melhores tutoriais de vetorização ponto a ponto para iniciantes

Esse Tutorial é sobre vetorização c/ o uso de um dos mais populares editores gráficos que existe… o CorelDRAW.

O desenho escolhido para essa vetorização foi um personagem de VideoGame antigo. O Cool Spot. Um desenho bem simples. Vou mostrar um passo a passo minucioso, com bastante figuras, p/ que nenhum detalhe seja perdido. Apenas p/ os novatos entenderem melhor alguns comandos.

Vetorizar um desenho é muito importante pois, depois de vetorizados, podemos dimensionar, trocar cores e, principalmente, garantir a qualidade da impressão.

Segue o GIF do desenho escolhido.

Vamos vetorizar apenas o personagem.

Baixe aqui o arquivo já vetorizado e c/ os quadros do passo a passo p/ você entender melhor a vetorização. CLIQUE AQUI. O arquivo está no formato CDR (CorelDraw à partir da versão

As ferramentas utilizadas nessa vetorização:

– Ferramenta Seleção (Essa é básica)
– Ferramenta Zoom (Outra ferramenta básica)
– Ferramenta Bézier (A melhor p/ marcar os pontos)
– Ferramenta Forma (Muito importante p/ definirmos as curvas)
– Converter linha em curva (Deixa as linhas retas c/ opções p/ curva-las, quando preciso)
– Ferramenta Interseção (Muito útil). Nesse tutorial, vou mostrar um MACETE c/ essa ferramenta.

Vamos ao Tutorial:

01) Abra o CorelDraw e importe o GIF. Após inserir a figura, salve e nomeie o arquivo. Novatos tem o péssimo hábito de fazer um trabalho e só salvar após concluir o serviço. Nada contra, mas se a máquina travar ou der uma queda de energia, vai ter que refazer todo o trabalho. Gosto nem de lembrar (risos).

02) Com a ferramenta Zoom ou apertando a letra (Z), faça uma aproximação do desenho. O zoom é muito importante p/ definir melhor onde serão colocados os pontos (nós).

03) Agora vamos a escolha dos pontos. Selecione a ferramenta bézier . É com ela que tudo começa.

04) Antes de começar a escolher os pontos, é importante a escolha de uma cor p/ o contorno. De preferência, uma cor bem viva e que não seja muito predominante no desenho. Nesse caso, vamos escolher o AMARELO (meu preferido p/ essa função). Na barra de ferramentas CORES, clique c/ o botão direito do mouse na cor AMARELO.

Nota: Quando abrir uma janelinha de confirmação p/ mudança de cor, clique em OK. À partir daí, todo o contorno que fizer no desenho, vai vir c/ a cor AMARELO padronizada. Não se preocupe, a escolha vai deixar o amarelo como padrão apenas nesse arquivo. O Padrão geral em qualquer outro arquivo criado vai continuar sendo o preto.

05) Uma regra básica. Quando vetorizamos qualquer desenho, é muito importante começar pelas partes maiores. Nesse caso, temos que marcar, ponto a ponto, o contorno geral do desenho (cor preto). Com a ferramenta bézier, vamos começar pela parte do corpo.

Nota: De início, foram dados 8 pontos à partir do lado esquerdo (braço) até o outro braço. Veja na seta branca onde simulei c/ algumas bolinhas em vermelho. É muito importante encurtar, o máximo possível, os pontos dados no desenho. Vamos continuar.

06) Depois de marcar cada ponto do contorno, vejam como ficou.

Nota: Ao todo, foram dados apenas 76 pontos até o fechamento completo do contorno no mesmo ponto de onde começou. Poderia até ser uma quantidade menor de pontos, mas já é o suficiente.

07) Agora que vai começar a brincadeira. Vamos começar a definir as curvas. Clique na ferramenta FORMA ou aperte F10.

08) A primeira coisa a fazer com a ferramenta forma, é transformar todos os traços em curva (não que vá curvar, obrigatoriamente, cada um dos traços). Com a ferramenta forma selecionada, clique em quaisquer dos pontos ou linhas feitas pela ferramenta Bézier e aperte Ctrl+A. Vai ver que todos os pontos vão ser selecionados simultaneamente. Agora, clique na opção converter linha em curva . Todas as linhas vão estar liberadas p/ serem curvadas. Mas não é obrigado curvar todas elas.

Nota: Acontece que, tem muitos iniciantes, até mesmo profissionais de longas datas, que utilizam essa ferramenta linha por linha quando precisam curva-las. Considero isso uma grande perda de tempo.

09) Agora é só começar a fazer as curvas nas linhas necessárias. Com a ferramenta FORMA selecionada, clique, segure a linha no centro dos 2 pontos e puxe p/ lado, como se tivesse formando uma barriguinha. Puxe até deixar como está na figura.

10) Na próxima linha, vamos fazer de uma outra maneira. Clique no centro da linha, segure e arraste até onde mostra a figura abaixo.

11) Como na figura abaixo, clique no ponto onde mostra a seta 1 e após aparecer os pontos imaginários, como mostra as setas 2 e 3, arrasteos até que o contorno cubra o limite do desenho.

12) Repitam os procedimentos de curva desmostrados acima em todas as outras linhas até que todo o contorno do desenho fique completo. É hora de salvar (Ctrl+S).

13) Agora é criar os pontos e fazer as curvas de todas as outras partes do desenho como: corpo (vermelho), Mãos (branco), botas (branco) e as formas restantes. Comecei pelo corpo e boca. O óculos já faz parte do preto.

Nota: Cada parte feita em um desenho no CorelDraw, entende-se como objetos. Até agora, fizemos 6 objetos. Para fazer a boca basta usar a ferramenta Círculo.

14) Agora, passamos a vetorizar as mãos, braços e vamos partir p/ bota. Após vetorizar o objeto que corresponde ao tênis e o círculo (ver figura abaixo), é preciso combinar os mesmos. Ative a Ferramenta Seleção e clique no objeto maior (bota). Agora, segure a tecla Shift e selecione o círculo. Vai ver na barra de Status que o programa selecionou “2 objetos em camada 1″. Depois de selecionados, clique na opção COMBINAR ou aperte o atalho Ctrl+L. Essa opção aparece na barra de propriedades quando a ferramenta seleção é ativada e os objetos selecionados. Como resultado da combinação, os 2 objetos tornaram-se um só. Se pintar esse objeto c/ qualquer cor, vai ver que o círculo vai se manter inalterado. Depois faça o círculo que corresponde ao vermelho. Não esqueça de salvar (Ctrl+S).

15) Vamos ao macete da vez. Conheceremos uma ferramenta muito útil nas vetorizações. Nunca ninguém me mostrou essa técnica, aprendi c/ o tempo, mas acredito que vários profissionais devem usa-la. Se você ainda não conhece, trate de aproveita-la. É muito útil.

A bota tem uma cor mais escura. Faça a vetorização como mostrado na figura abaixo.

Nota: O contorno azul representa a parte mais escura. Selecione a bota e esse contorno depois utilize a opção interseção . Agora apague o contorno que aqui está representado pelo azul. Agora termine a vetorização da outra bota.

16) Depois de contornar todo o desenho vem a parte mais divertida, COLORIR. Selecione todos os objetos desenhados e coloque ao lado do desenho original e mude a cor do contorno p/ o preto. Pode deixar em amarelo se preferir, mas ofusca um pouco a vista.

17) Clique em cada objeto e coloque uma cor igual ou parecida c/ o desenho original. Mas pode colorir a gosto. Todo o contorno (preto) vai ser colorido por último.

18) Agora, selecione o contorno maior e pinte de preto.
Suma c/ todos os contornos dos objetos. Selecione todos os objetos c/ a ferramenta seleção e clique c/ o botão direito do mouse na opção mostrada pela seta vermelha na figura abaixo.

19) Fim da vetorização. O que precisa agora é usar a ferramenta forma p/ melhorar alguns pontos e contornos. Como o desenho foi feito à partir de uma matriz em GIF, é normal não acertamos alguns pontos e contornos de primeira, só vamos notar isso após colorir todo o desenho.

Baixe o arquivo dessa vetorização CLIQUE AQUI.
Tem um tipo de passo a passo de alguns pontos e contornos p/ facilitar o entendimento desse tutorial.

Por Alan Melo – ExcelArtes no blog Vetorizar

9 atalhos de Photoshop para aumentar a sua produtividade!

Jomar — Wed, 10 Mar 2010 14:59:51 +0000

Atalhos de teclado são sempre bem vindos em qualquer programa, principalmente porque eles possuem o “dom” de agilizar, e muito, o nosso trabalho. Nesta lista selecionei 8 atalhos do Adobe Photoshop para aumentar a sua produtividade. Alguns já são conhecidos, outros nem eu conhecia, outros atalhos foram mudados nas últimas versões, e se você conhecer mais algum não pense duas vezes antes de compartilhar ele com a gente nos comentários!

Ctrl+Z Eternamente: Este eu não conhecia e achava um saco o fato do Ps só permitir usar o “Crtl+Z” uma vez. Andando pela net, descobri que se você apertar Ctrl + Alt + Z você pode desfazer, desfazer, desfazer, desfazer e desfazer novamente quantas vezes você quiser
Mãozinha Amiga: Quando se edita uma imagem no Photoshop, muitas vezes precisamos movimentar a tela enquanto utilizamos uma ferramenta. As duas alternativas para isso são: Barra de Navegação e/ou clicar na mãozinha na Barra de Ferramentas, certo? Errado, se você apertar e segurar a Barra de Espaço do seu teclado você poderá movimentar a tela sem trocar de ferramenta
Múltiplos Arquivos: Seu espaço de trabalho do Photoshop pode tornar-se uma confusão quando se trabalha com vários arquivos, especialmente quando você odeia minimizar, assim como eu!! Ctrl+Tab permite que você navegue de maneira rápida entre os arquivos abertos no Ps.
Nova Camada: Camadas são a melhor coisa que já se inventou em programa de edição de imagens e saber trabalhar com elas é essencial. Digitando Ctrl + Shift + N, abrirá uma caixa de diálogo para você criar uma nova camada no Photoshop, agora se você quiser só criar a camada, sem essa caixa de diálogo chata, é só adicionar um alt no comando: Ctrl + Shift + Alt + N \o//.
Duplicando Camadas: Você pode duplicar um agrupamento, uma seleção de camadas ou apenas uma camada, clicando Ctrl + J. Agora se você quiser uma caixa de diálogo no meio dessa ação, é só adicionar o Alt: Ctrl + Alt + J.
Zoom In/Zoom Out: Quando você está um pouco obsessivo e é necessário colocar a 1 pixel-perfeito zoom in e out, rapidez é uma necessidade para alcançar a perfeição. Para aproximar a tela, digite Ctrl + =, para afastar opite pelo Ctrl + -, agora se o que você deseja é ajustar ao tamanho da tela, vai de Ctrl + 0!
Déjavu dos Filtros: Algumas vezes o preview de um filtro não basta para você ter uma noção de como sua arte vai ficar. Se você aplicou um efeito, gostou, mas procura algo mais intenso, digitando Ctrl + F ele será executado novamente. Se você gostou e quer denovo, mas não tão intenso, use Ctrl + Shift + F, pois você poderá controlar o Fade do filtro. Agora, se você não gostou do viu e quer utilizar esse mesmo filtro, alterando sua configuração, o Ctrl + Alt + F, desfaz o filtro e abre automaticamente a janela com as configurações de filtro que você acabou de usar
Uma Camada dentro de Outra: Você pode clicar na camada com o botão direito e depois em Create Clipping Mask para colocar uma camada dentro da outra, mas é bem mais fácil fazer isso com um atalho, certo?. Antes era Ctrl + G (atualmente faz agrupamentos de camadas), agora ficou mais simples porque você não precisa selecionar a camada que vai por dentro da outra. Basta clicar no meio das duas segurando o Alt.
Crie o seu próprio atalho: Estes atalhos podem não estar na sua lista de favoritos, mas uma das vantagens dos produtos Adobe é que você pode personalizar seus atalhos pressionando as teclas Ctrl + Alt + Shift + K ou utilizando o menu Edit > KeyBoard Shortcuts…

Referência: Photoshop Lab

Você conhece algum atalho que não está na lista?? Conte para a gente!

Web Design #5: 14 sites que todo Web Designer deve conhecer!

Jomar — Fri, 26 Feb 2010 03:01:52 +0000

Criar um bom website não é uma das coisas mais fáceis de se fazer, mas existem ferramentas que tornam a vida de web designers bem mais fácil! Neste artigo você confere uma compilação de 14 destes sites. Uns servem para facilitar a nossa vida, outros para testar o produto que estamos criando, mas independente disso, todos são uma enorme “mão na roda”.

ColorCombos

Quando você começa a criar um site, uma das primeiras e mais importantes decisões que deve tomar são as cores do projeto. O ColorCombos oferece milhares de combinações de cores diferentes para você escolher a que melhor se adapta ao seu trabalho

LIpsum

Que desenvolvedor não conhece o popular texto Lorem Ipsum? Ele é amplamente utilizado porque permite simular um texto real para produzir o design da página. No LIpsum você pode criar rapidamente textos de acordo com o número de parágrafos que desejar

What The Font?

A sigla – WTF – é bem sugestiva, mas o What The Font? é ótimo quando você quer descobrir o nome de determinada fonte que você viu em alguma imagem. O esquema é simples: você envia a imagem, o código analisa ela e dá o nome da fonte pesquisada. É importante que se envie imagens com o minimo de detalhe no fundo possível para facilitar esta análise

ConvertIcon

“Favicon”s são utilizados pela maioria dos sites. No ConvertIcon você manda a imagem que deseja diminuir e ele converte para os formatos .ico e .png no tamanho que você escolher

BgPatterns

Quando bem utilizado, um BgPatterns dá um visual bacana para qualquer site! O BgPatterns é “fazedor” de backgrounds muito útil! Você pode utilizá-lo também no seu twiiter

Spoon Browsers

O Spoon Browsers permite que você veja o seu site nos mais populares browsers da atualidade

Test Everything

O nome já diz tudo: esse site serve para testar o seu em todos os quesitos! No Test Everything você digita o endereço do site, escolhe os itens a serem analisados e tem como resposta um super relatório a respeito da sua página. Definitivamente, este é um dos sites obrigatórios na lista de favoritos de qualquer web designer!

Gerador de Sprite CSS

Segundo o próprio Gerador de Sprite CSS: “As Sprites CSS são uma forma de reduzir o número de pedidos HTTP feitos para os recursos gráficos, pelo seu site. As imagens são combinadas numa imagem alargada nas coordenadas X e Y definidas. Após atribuir a imagem gerada aos elementos referentes da página, a propriedade CSS background-position pode ser utilizada para deslocar a área visível necessária para a componente gráfica.

Esta técnica pode ser muito eficaz para melhorar o desempenho do site, nomeadamente em situações em que muitas imagens pequenas, tais como os ícones de menu, são utilizadas. A homepage do Yahoo!, por exemplo, aplica esta técnica exactamente para isso.”

Buttonator

Por falta de tempo ou pura preguiça, você pode utilizar o Buttonator para fazer botões de maneira rápida e fácil para o seu site ;D

Load Impact

O Load Impact lhe permitirá testar como seu site pode lidar com várias explosões de tráfego. É ou não e super-útil?

IconFinder

Este site é nada mais, nada menos do que o Google dos ícones! Usando o IconFinder você pode fazer buscar em um enorme banco de ícones totalmente gratuito!

Type Tester

O Type Tester serve para você testar e comparar combinações de caracteres antes de decidir qual será a fonte do seu site.

CSS Tidy

Mesmo desenvolvedores avançados muitas vezes precisam otimizar seu código CSS. CSS Tidy é um aplicativo gratuito on-line que vai corrigir erros e otimizar o código CSS. Por exemplo, ele pode detectar automaticamente estilos redundante, um problema muito comum de códigos CSS.
Lotes de configurações estão disponiveis, para garantir que você vai ficar feliz com os resultados.

Gerador de Formulários de Contato

Os formulários são uma parte muito importante de qualquer site, pois permitem que os seus leitores ou clientes interajam com você. Ao utilizar Contact Forms Generator, você economizará um precioso tempo criando suas formas, incluindo o PHP, ASP ou mesmo código Perl que é necessário enviar e-mails de seu site à sua caixa de correio. Contact Forms Generator nem sequer exigem conhecimentos de programação.

Este artigo foi baseado no post de Jean-Baptiste Jung no Cats Who Code.

Web Design #4: Estatísticas do uso da Internet no mundo

Jomar — Thu, 25 Feb 2010 16:37:34 +0000

Fonte: Design BR / @Design_BR

JBTutos

Helvetica – O Filme

O que é ser um Web Designer?