Antes de qualquer explicação, você sabe converter centímetros para polegadas, e vice-versa?

1 cm = 0,3937 pol ou 1 pol = 2,54 cm (mais fácil de gravar, não?)

Agora, você com certeza já deve ter ouvido falar em dpi. Sabe o que significa?

dpi (dots per inch, ou pontos por polegada em português),é uma medida de densidade relacionada à composição de imagens, que expressa o número de pontos individuais que existem em uma polegada linear (…). Também é comum encontrar referências a essa densidade pelo termo “resolução”. A resolução é indicada pela composição da densidade horizontal e vertical (…). De maneira geral, quanto maior o número de pontos por polegada, mais detalhada e bem definida é a imagem. –Wikipedia

Convertendo centímetros em pixels

Para calcular o número de pixels de um arquivo cujas medidas estão em centímetros é necessário saber qual é a resolução desse arquivo. A grosso modo, seria mais ou menos como querer saber quantos tijolos tem a frente da sua casa sem saber quanto mede um tijolo, compreende?

Lembrando que pixel é o menor ponto que forma uma imagem digital e não muda de tamanho, nunca!

Pois bem, em um exemplo ideal, rápido e prático, se uma imagem tem 10 x 10 cm a 1 ppc (pixel por cm, inventei agora pra esse exemplo), significa que temos uma imagem também de 10 x 10 pixels, concorda?

E na resolução padrão de imagens para web? São 72 dpi (pontos por polegada), quanto teria nossa imagem de 10 x 10 cm?
Convertendo a resolução de polegadas para centímetros, temos que 72 pontos por polegada são 28,346 pontos por centímetro (72 ÷ 2,54).
Então, nossa imagem de 10 x 10 cm a 72 dpi tem 283 x 283 pixels. Como pixel não varia de tamanho, é compreensível que não exista um número fracionário, tipo 283,46 x 283,46 pixels.

Se fosse na resolução ideal para impressão, desejável que seja 300 dpi, teremos um número maior de pixels e, portanto, melhor definição da imagem.
Fazendo as contas: 10 x 10 cm a 300 dpi (118,11 ppcm) resultam em 1181 x 1181 pixels.

As duas letras “A” têm o mesmo tamanho, mas resolução diferente.

Eu sei que pode parecer complicado fazer entender que a exibição no monitor de duas imagens com resoluções diferentes não revelam necessariamente as diferenças nas suas dimensões físicas. Note que no “A” da direita os pixels estão maiores. Na verdade, como já afirmei, não são os pixels que estão maiores, mas a resolução da imagem é menor para representar o mesmo tamanho físico de 10 x 10 cm.

Concluindo

Acredito que agora ficou mais fácil aplicar esse cálculo para o título desse artigo: Qual a medida em pixels de uma folha de papel A4?

Um arquivo com 21 x 29,7 cm a 72 dpi possui, para a largura, 21x(72÷2,54)=595 pixels. E, para a altura, 29,7x(72÷2,54)=842 pixels. Logo:

21 x 29,7 cm (a 72 dpi) = 595 x 842 pixels

E na resolução de 300 dpi, temos:

21 x 29,7 cm (a 300 dpi) = 2479 x 3508 pixels

Espero que tenha sanado suas dúvidas. Restou alguma? Comente!

Você, usuário um pouco mais, digamos, experimentado, já tentou posicionar uma imagem no background do seu perfil no Twitter?

Convenhamos, é meio chato! Vou explicar como adaptar (criar é com você!) uma imagem, de modo que seu background apareça melhor em algumas resoluções de monitor mais comuns.

Antes, você precisa saber de alguns incovenientes:

• Não existe um tamanho certo;
• O Twitter não centraliza a imagem, alinhando a esquerda (e ao topo);
• Quanto menor a resolução do monitor, menos da imagem é exibido;
• E quanto maior a resolução, mais estranho fica o enquadramento;
• Desaconselhável usar o lado direito da imagem (concentre o principal sempre no canto superior esquerdo);

Partindo do básico, mas necessário, você sabe qual a resolução do seu monitor?
Mesmo que isso não tenha importância – pois o background não tem que aparecer pra você, mas pra quem visita seu perfil no Twitter – é bom saber pra que isso não seja fator limitante na sua criação.

Saiba que o 1024×768 pixels já caiu em desuso faz tempo. O ideal é partir pra um formato nativo desses monitores de 22″ (que estão bastante populares) ou até mesmo a resolução Full HD, de 1920×1080 pixels. Mas lembre-se que quanto maior esse formato, mais pesado fica seu arquivo.

Para imagens/fotos de paisagens, composições, texturas e afins, sugiro o formato de 1680×1050 pixels, que vai exibir bem na maioria dos monitores. No entanto, se você pretende enquadrar um rosto, um olhar ou um close de algo, sugiro partir de um formato menor, como o de 1280×1024 pixels, para garantir um melhor acerto.

A matemática é a seguinte: A interface do Twitter tem 763 pixels de largura. Considerando a barra de rolagem do browser (que pra facilitar aqui vou arredondar para 20 pixels), temos 783 pixels que vão comprometer a largura total da nossa imagem de 1680 pixels. E, como eu disse, vamos aproveitar somente a parte da esquerda, ou seja, 449 pixels (1680 – 20 – 763 ÷ 2).

Note no exemplo que o que interessa só conseguimos identificar se chegarmos a imagem mais à esquerda. Caso contrário o rosto do animal fica escondido. Sendo assim, não há necessidade de se definir o tamanho da imagem como sendo o total da tela (essa do leão tem 1024×768 exatamente, o resto é cor sólida que você define no painel de configuração do próprio Twitter).

Perceba que esse enquadramento é o mesmo do anterior, porém exibido numa resolução menor.

Mesmo bem posicionado, perdemos um pouco numa resolução menor como a de 1280×1024 (acima).

Na prática

Um exemplo bacana de hoje é o Twitter da Ivete Sangalo que exibe muito bem em vários formatos. O jogo de fontes que o designer criou para o lado direito da imagem permite que parte seja lido em resolução maior e o necessário em resolução menor (isso porque o “ideal” é que você crie sempre em formatos maiores mas para serem vistos em resolução menores, quando você dominar essa manha…)

Background do perfil do twitter da cantora visto em uma janela de 1024×768 pixels de resolução

Visto em uma janela de 1440×900 pixels
(comum em notebooks, inclusive deste que vos escreve)

E, pra fechar, a imagem está em preto e branco não só por uma questão de estética, mas por deixar o tamanho do arquivo menor!

Conclusão

Deixe a parte da direita da imagem para coisas sem muita importância, ou que só componham o cenário. Evite deixar rostos ou algo que você considera importante exibir.
Mesmo quando você for criar uma fusão de fotos ou um mural (veja o background do perfil do Luciano Huck, e me avise se não se parecer com um mural de fotos!), deixe do lado direito as fotos menos importantes.

Aqui desconsiderei a altura das imagens, mencionando sempre a largura. Pois mais difícil que prever a resolução do monitor do visistante do seu perfil é saber quanto de links e barras de ferramentas ele possui em seu browser, limitando sempre mais e mais a área útil vertical. Se para a largura podemos pensar grande, por outro lado evite alturas maiores que 600 pixels, ou algo de importante que exceda esse valor.

Muito se discute sobre o uso de CSS Reset em desenvolvimento web. É um verdadeiro divisor de águas. Há quem o odeia e quem não viva sem (meu caso).

Especialistas divergem entre si e são muito políticos em suas defesas quanto ao uso ou não de resets. Tanto que confundem a cabeça de novatos nessa área e só fazem aumentar a necessidade de um veredito.

Pois bem, resolvi peitar uma defesa baseada em problemas que enfrento diariamente. E defino minha conclusão com uma pergunta mais que direta: “Como eu criava sites antes sem usar um CSS Reset?”

O que exponho aqui não é regra, mas uma abordagem pessoal. A diferença é que vou tentar te convencer do benefício da técnica e o espaço está aberto para uma discussão saudável.

Você sabe, existem diferenças sutis na renderização padrão de cada browser. A maioria delas giram em torno de margens e preenchimentos de vários elementos, como parágrafos, títulos (h1, h2, …), elementos de linha e de bloco, tabelas e outros. Isso tudo é normal! Fiquei surpreso quando um dia descobri que o tamanho padrão de fonte para todos os browsers é de 16px. Pense, poderia ser 16px para um, 12px para outro…

Pois bem, essas diferenças necessitam ser zeradas para que o programador de interface, lá na frente, não perca tempo com adaptações, filtros e hacks em sua folha de estilo.

Aquela coluna direita que em um browser fica alinhadinha com o miolo do site desce como num passe de mágica no IE. Aquele parágrafo que começa próximo do topo de um elemento qualquer não está assim tão próximo em outro browser (não necessariamente o IE).

Qual o seu motivo?

Enfim, uma série de razões pelas quais um CSS Reset é necessário e não usamos – ou não queremos usar – também por uma série de fatores:

• Uma requisição a mais de servidor? Ora, inclua na sua folha de estilos principal (sempre no cabeçalho antes de todas as outras declarações, claro!)
• O arquivo .css fica “grande”? Mas o que são 5, 6 ou mesmo 10 linhas de código?
• Tem elementos no Reset que não necessitam ser zerados? Sim, tem! Você não precisa zerar até as tags strong e em, por exemplo. Tenha em mente que uma das maiores dificuladades que enfrentamos enquanto programador de interface é com relação a margens e preenchimentos de elementos de nível de bloco.

Você que já procurou por CSS Reset nos mecanismos de buscas já deve ter lido algo tipo “Best CSS Reset” blá, blá, blá… Saiba que o melhor Reset é aquele que zera as propriedades que você vai implementar. Exemplo, não vai usar tabelas no seu site? Então porque zerar seus atributos?

Penso que quando Eric Meyer apresentou sua versão de Reset em 2008, o que ele queria mostrar é o tanto de atributos que você pode resetar.

/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Repare que ele declara o body com line-height = 1. Mas qual a unidade (em, px)? Achei isso falho.

Abaixo, o Reset do Yahoo!

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
q:before, q:after {
	content: '';
}
abbr, acronym {
	border: 0;
}

E aqui, a versão “mini”:

/* CSS Mini Reset */
html, body, div, form, fieldset, legend, label {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
th, td {
	text-align: left;
	vertical-align: top;
}
h1, h2, h3, h4, h5, h6, th, td, caption {
	font-weight:normal;
}
img {
	border: 0;
}

Conclusão

Como eu já disse, você não precisa manter todos os parâmetros no seu CSS Reset. O importante é que você saiba que está zerando as propriedades necessárias.

Eu particularmente na maioria das vezes retiro as tags bold, em e table. O resto, deixo como está e não tenho dores de cabeça em meus projetos.

E você? Ainda não usa um CSS Reset sem seus trabalhos? Dê sua opinião!

Em um artigo que escrevi sobre o uso de @font-face e a conversão de fontes do formato TTF para EOT abordei o modo mais prático de implementação de fontes diversas para criação de sites mais, digamos, elaborados. Expliquei como e com o que converter fontes, e as linhas de código em CSS para implementação.

Agora vou explicar novamente o uso do @font-face abordando uma, na verdade duas, ajudas muito bem-vindas do gigante do Vale do Silício: a Google font API e o Google font directory.

As vantagens de usar a API do Google são:

• Com apenas uma linha de código (na verdade um link), substituimos aquelas poucas linhas que expliquei para “embedar” uma fonte;
• Não é necessário fazer a conversão de TTF para EOT.
• Não é necessário baixar qualquer script ou fonte;

A desvantagem é ainda a pouca variedade de fontes. Mas acredito que novas famílias de fontes vão ser incluídas nesse diretório de tempos em tempos. E, falando em desvantagem, não creio que apontar um link diretamente para o servidor do Google seja uma. Só para sua informação. Vamos ao que interessa.

Usando a Google font API

Não tem segredo, você escolhe uma fonte que deseja “embedar” e insere um link entre as tags <head> de sua página. Aqui um exemplo usando a fonte Tangerine.

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style type="text/css">
body {
    font-family: "Tangerine", serif;
    font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>

Outra opção que não seja por link é importar a fonte diretamente da tag style no cabeçalho de sua página (ou de um arquivo CSS externo).

<html>
<head>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Tangerine);
body {
    font-family: "Tangerine", serif;
    font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>

Tanto por link quanto por @import, a URL vem sucedida com o nome da fonte, e você pode escolher mais de uma usando o caractere “|” e “+” para quando o nome da fonte tiver espaços (por exemplo, para “Droid Sans” escreva “Droid+Sans“).

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

A API do Google traz a versão normal (regular) das fontes por padrão. Para suas variantes (itálico e negrito), adicione dois pontos “:” após o nome da fonte com os parâmetros separados por vírgula “,“.

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Para cada estilo da fonte existe uma abreviação:

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b

http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

É necessário Javascript?

Não satisfeitos, os desenvolvedores do Google ainda criaram uma biblioteca em Javascript para evitar o chamado FOUC (Flash Of Unstyled Content) causado pela “demora” no carregamento da fonte. Acontece quando uma fonte padrão é carregada e logo depois a fonte correta. Mas isso não demora mais que alguns décimos de segundo.

Totalmente voltada para desenvolvedores, acho desnecessário explicar seu uso aqui. No entanto, caso seja de seu interesse, acesse http://code.google.com/apis/webfonts/docs/webfont_loader.html

Para mais informações sobre a Google font API acesse http://code.google.com/apis/webfonts (em inglês)

Como tratar uma imagem?

Lembro que quando comecei a mexer com tratamento de imagem – em meados de 1995 – o Photoshop (versão 3.x) era muito limitado e não podíamos cometer erros. Aliás, um erro só podia, pois não havia múltiplos undos (o “desfazer”), dá pra imaginar?! Também não tinha recursos de layers (camadas) e os pincéis não eram elaborados, além de outras tantas limitações. Mas, desde aquela época o processo de Seleção de Cores (grosso modo, é como chamam o tratamento de imagem para mídia impressa), sofre apenas a interferência das melhorias da ferramenta: as evoluções do programa.

Meu intuito neste artigo é tão somente explicar alguns processos básicos que considero importantes para correções de luz, cor e contraste, baseado na minha própria experiência nessa área. Acredito que seja muito mais voltado – e útil – para fotógrafos amadores ou pra quem tem uma câmera digital amadora ou semi-profissional mas não domina todos os seus recursos e se permite fazer uma foto sem aproveitar corretamente a luz, não corrige o balanço de branco (whitebalance), invasão de cor (colorcast) ou deixando fora de foco. Aliás, se existe alguma coisa que eu até hoje nunca vi o Photoshop corrigir é o foco de uma imagem borrada. Não é como uma foto escura que você ainda consegue “puxar” algum detalhe. Uma foto fora de foco é uma foto desfocada e pronto. Já era.

Você já parou pra analisar uma imagem qualquer e identificar rapidamente se sua temperatura é quente ou fria? Se está azulada? Se tem contraste?

Bons conhecimentos de fotografia ajudariam muito, mas não são necessários (estou desconsiderando o fato de você ser algum tipo de profissional).

A maneira com que você manipula a imagem vai depender tanto do seu conhecimento técnico (e isso aparece com o tempo e consequente domínio da ferramenta) quanto do feeling para analisar e compreender o que a imagem tem de falha e/ou que possa ser melhorado.

Analisando a imagem

Ponto de branco¹: É a área mais clara da imagem e, a não ser que seja esse o objetivo, não deve ser confundida com áreas de luz direta como fontes de luz primária e/ou reflexos (ex.: lâmpadas, sol, superfícies cromadas, etc.). Geralmente são partes de uma parede ou chão branco, folha de papel ou algo que não seja o branco “chapado” (o branco zerado no modo CMYK ou 255,255,255 em RGB). É muito importante definir o correto ponto de branco da imagem pois assim fica mais fácil corrigir invasões de cor e podemos também definir sua temperatura: quente (amarelada ou avermelhada) ou fria (azulada ou esverdeada).

Ponto de preto²: Diferente do ponto de branco no nível de detalhamento, é a área mais escura da imagem mesmo. Geralmente uma sombra ou o que ela tem de mais escuro.

Griz ou meio tom³: Como o nome diz é o meio termo, o cinza, e é tão importante quanto o ponto de branco para definir a temperatura de cor da imagem: quente ou fria.

Familiarize-se com essas duas ferramentas: Níveis (Levels) e Curvas (Curves).

Tanto os Níveis (menu Image > Adjustments > Levels ou Ctrl+L) quanto as Curvas (menu Image > Adjustments > Curves ou Ctrl+M) do Photoshop têm em comum o ajuste dos pontos de branco, preto e meio tom (entre outros tantos controles) e ambos exibem o Histograma da imagem para controle. Para tratamento de imagem eu particularmente gosto de mexer pelas Curvas, sinto mais flexibilidade, mas é gosto pessoal.

Pois bem, repare nos conta-gotas, presente em ambas as janelas. São as target colors (cores alvo). É através deles que vamos determinar os 3 pontos-chave já mencionados. O mais claro (da direita) aplica um valor de branco ao local da imagem que você apontar; o mais escuro (da esquerda) aplica um valor de preto. O do meio, bom, o do meio deixa tudo verde. Brincadeira!

Clique duas vezes sobre o conta-gotas da direita. A janela de configuração da cor-alvo aparece.

Devido a minha “formação” em tratamento de imagem para mídia impressa, acostumei a configurar os valores das cores-alvo pelo painel do modo de cor CMYK (em destaque a direita na figura). Mas isso é relativo. Note que para o modo CMYK (cores de pigmento), o branco puro se dá pela subtração das 4 cores, ou seja, zero de ciano, de magenta, de amarelo e de preto resulta em ausência de cor: branco. Já para o modo RGB (cores de luz) é o inverso, a soma do vermelho, verde e azul resulta em branco puro.

Temperatura da imagem

Mas, e aí? Deixamos no branco puro? Se esse for o intuito, marcar uma área da imagem que seja realmente branco “chapado”, a resposta é sim. Mas se sua imagem não tiver esse tipo de área o ideal é deixarmos um pequeno valor. Algo em torno de -4% no RGB ou +3% no CMYK.

Como falei, acho mais fácil mexer no modo CMYK. Se configurarmos o branco nesse modelo, com +3%, teremos 3-3-3-0 (importante: deixe o canal K – preto – sempre em 0 para ponto de branco e meio-tom). Perceba como o degradé da escala cromática no grande box à esquerda desses campos fica avermelhado. Acabamos de configurar um ponto de branco quente.

Experimente configurar o ponto de branco em 3-2-2-0 e teremos um ponto de branco frio.

Clique em Ok.

Agora, com o conta-gotas do branco selecionado, clique em um ponto da sua imagem que seja branco (essa ação é tão subjetiva quanto técnica, e só a tentativa e erro vai poder te ensinar o melhor acerto). Clicou numa área que não era tão branca? Não faz mal. Clique em outra, e outra. Até que você encontre o verdadeiro ponto de branco, ou o mais próximo (isso não deve levar mais que uns 5 segundos!). Se em vez de ficar clicando até achar o ponto correto você quiser “zerar” as curvas, segure Alt e depois clique em Reset. As curvas voltam ao seu estado inicial e você precisará clicar (uma vez só) no conta-gotas branco para escolher um novo ponto na imagem.

Ponto de branco definido? Não feche a janela Curves (ou Levels) ainda! Vamos para o próximo. Clique duas vezes sobre o conta-gotas do meio. A mesma janela de configuração da cor-alvo aparece.

Meio tom quente: 45-45-45-0

Meio tom frio: 55-45-45-0

Clique em Ok.

Com o conta-gotas selecionado, clique em um ponto da imagem que seja cinza ou o mais neutro que encontrar. Clicou numa área nada a ver? Clique em outra. Assim como fez da primeira vez. Precisa “zerar” a escolha pra recomeçar? Bom, agora fica um pouco mais complicado porque você já definiu o ponto de branco. Se resetar nesse momento vai zerar toda a curva, inclusive o ponto de branco.

Até aí tudo bem. Como saber se o meio-tom escolhido é o correto? Só depende de você. Se a imagem não puxou pra nenhum tom (azulado, esverdeado, amarelado) e ficou neutra, está ótimo. A imagem acima teve somente o meio-tom corrigido.

Sendo assim, vamos para a última etapa. Clique duas vezes sobre o conta-gotas da esquerda. Agora, a definição do preto em quente ou frio não interfere tanto na imagem e você pode configurá-lo em 96-92-92-80 (opa! Definimos um valor para o canal de preto!)

Você pode estar se perguntando: “Por que esses valores?” – Olha, estou tentando ser metódico sem ser técnico. Procure entender que esses valores também carregam uma dose de subjetividade. Tratamento de imagem é subjetividade baseada nas mais variadas técnicas. Cada um tem seu estilo próprio.

Clique em Ok e, com o conta-gotas do preto selecionado clique no ponto mais escuro da imagem. Como ficou o aspecto geral da imagem? Já deu uma melhorada? Clique no checkbox de Preview para ver o antes e depois da aplicação e compare. Está tudo certo? Se sim, clique em Ok e encerramos essa parte com as Curvas (ou Levels). Se não, faça um ajuste fino na curva ou tente outros valores. Veja também se você não se enganou ao interpretar a temperatura da imagem. O que você pensou que pudesse ser frio na verdade ficaria melhor se fosse quente.

Por exemplo, um prato de salada pode ter todo o aspecto frio pela predominância de folhas verdes ou por ser um prato servido frio. Questão de coerência. Mas, acredite, tratá-lo como quente pode vai fazer toda a diferença. Na verdade, na maioria das vezes, tratar uma imagem como quente surte um resultado melhor, mais agradável. Exceto, claro, quando a foto for de um dia nublado, chuvoso, neve, etc.

Sugiro você aplicar esses conceitos de pontos de branco, preto e meio-tom e temperatura de cor em suas fotos antes de passarmos para a parte 2 deste artigo, onde falo de contraste, saturação e HDR (High Dinamic Range ou Grande Alcance Dinâmico).

Dúvidas? Comente!

Você encontrou “aquela” textura pela internet e deseja usá-la como background no seu site. Mas a imagem não é grande o suficiente para cobrir a tela toda. Ao perceber que quando a textura se multiplica pela página (formando um pattern), as bordas dessa imagem ficam visíveis “quebrando” a homogeneidade da textura.

Tomemos o exemplo abaixo (clique na imagem para ampliar).

Ao multiplicar a imagem pelo eixo X vemos que as vigas de madeira não se “encaixam” horizontalmente.

Você descarta essa textura e parte pra outra? Melhor não!

Saiba que o Photoshop tem um filtro chamado Offset que pode resolver essa questão. Eu, particularmente, confesso que nunca tinha encontrado uma aplicação pra ele (e olha que existem várias) até que comecei a mexer com webdesign.

Além do filtro Offset você vai precisar da ferramenta Rubber Stamp (aquela de clonagem) e isso pode requerer um pouco de prática.

Preparação

Abra no Photoshop a textura que você quer trabalhar e veja suas dimensões (largura e altura) no menu Image > Image Size. Memorize o valor da largura. Vamos precisar dele nesse exemplo prático.

Agora selecione o menu Filter > Other > Offset.

No campo Horizontal coloque o valor da metade* da largura da sua imagem. Tanto faz ser positivo (para a direita) ou negativo (para a esquerda), não importa. E deixe selecionado a opção “Áreas indefinidas” marcada como Wrap Around.

Isso faz com que a metade da imagem seja deslocada dentro de sua própria área, exibindo sua outra parte do outro lado.

Essa é exatamente a “transição” que não queremos. E é aí que entra a ferramenta de clonagem (Rubber Stamp).

Retoque

Comece a suavizar a aresta que apareceu no meio da imagem. Aconselho a usar a ferramenta de clonagem variando o diâmetro do pincel. Áreas de muitos detalhes use um pincel menor. Varie também sua opacidade, dependendo do caso uso entre 30~50%. (Dica: com a ferramenta selecionada – e somente com ela selecionada – tecle de 0 a 9 pra variar sua opacidade; sendo 0 para 100%, 1 para 10%, 2 para 20% e assim por diante. Teclando dois dígitos rapidamente você altera para números não rasos)

Aqui fiz movimentos mais lineares, acompanhando as frestas das vigas da madeira. Evite usar uma mesma referência (origem) para diferentes áreas do retoque (destino). Outra dica é começar pelas áreas mais lisas. Aquelas que você “completa” o retoque mais rapidamente. Isso acelera o trabalho (bom, pelo menos funciona comigo).

O resultado final fica muito parecido com o original, pois sem a aresta e sem alguns elementos de repetição que sempre aparecem em retoques desse tipo fica difícil perceber o antes e depois.

Tudo bem que pode ter uma falhazinha ou outra. Nada impede de retocarmos até que fique quase perfeito. E lembre-se que talvez o conteúdo do seu site pode sobrepor grande parte da textura.

Mesmo comparando o original e o retocado, a diferença não é tão perceptível.

O resultado

O filtro Offset é o pai desse retoque e você pode voltar a textura a sua “posição original” reaplicando o filtro com o mesmo valor (caso você tenha seguido minha orientação de usar a metade da largura). Ou fazer todo esse procedimento também pro eixo Y. Se for esse o caso, aplique o filtro Offset simultaneamente na horizontal e vertical e retoque as arestas em “cruz” que se formaram. Evite retocar um eixo por vez para um não interferir no outro.

Se tiver qualquer dúvida, comente! Ou entre em contato.

Já tentou fazer uma lista de itens (<ul>) contornar uma imagem? Simples. Um float:left (ou right) na própria imagem resolve de imediato.

E se os itens da lista (<li>) forem estilizados com alguma imagem de fundo, já viu o que acontece?

As setinhas não contornam a imagem e ainda ficam por trás dela.

Enquanto background você pode posicionar uma imagem em qualquer lugar de uma área com largura e altura fixas. Num exemplo mais limitado, pra não citar valores relativos (%), você pode posicioná-la ao centro, no topo, embaixo, à esquerda, à direita ou em um dos quatro cantos dessa área. São 9 posições. Porém, no caso de itens de lista, que são elementos em nível de linha, você tem apenas 3: esquerda, centro ou direita (lembrando que não estou citando valores relativos).

Por padrão, um sinalizador de item (no caso a setinha vermelha) deve estar alinhado à esquerda. E como a imagem da onda tem um float – “sai” do fluxo normal da página – o normal é que objetos “ocupem” o espaço antes preenchido pela imagem até que suas margens (da imagem e do texto) se toquem. Afinal, dois objetos, mesmo que flutuantes não podem ocupar o mesmo espaço ao mesmo tempo. Por isso o texto contorna a imagem e a setinha (que é uma imagem de fundo), não.

O que fazer? A menos que você possa abrir mão de usar imagens estilizadas para seus itens de lista, uma solução que encontrei foi aplicar display, float e margem à lista, além de um clear ao primeiro elemento após a lista. O resultado é bastante satisfatório pra mim e você confere na página de exemplo que criei para este “problema”.

Conhece alguma outra solução? Sugestões que não sejam adicionar marcações extras ao código HTML são bem-vindas. Comente!

Existem algumas dezenas de serviços online que podem tanto gerar quanto salvar uma imagem criada por você como favicon para seu site (alguns até hospedam o arquivo).

Cito alguns que gosto de testar:

• Favicon.cc
• FavIcon from Pics
• Favicon Hosting and Icon Generator

Criar ícones é uma arte, em inglês é chamada de iconart. Por se tratar especificamente de favicons, estamos falando de imagens com não mais que 16×16 pixels, e representar uma marca ou uma ideia em uma área tão mínima é uma proeza e tanto. Veja que bacana essa coleção de favicons da Fineicons.

Bom, se você quiser gerar seus favicons diretamente do Photoshop, baixe este pequeno plugin ICOFormat.8bi para Windows (tem também a versão para Windows 64 bits) e salve-o na pasta C:\Program Files (x86)\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats (ou C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Plug-ins\File Formats para versão de 64 bits).

Abra o Photoshop e crie um arquivo novo com 16×16 pixels. Seu favicon não precisa ter necessariamente fundo branco. Dependendo do caso um fundo transparente cai bem.

Crie seu iconart e salve o arquivo no formato .ICO

Feito isso, falta inseri-lo no código HTML.

Entre as tags <head></head> das páginas que você deseja que ele seja exibido insira a seguinte linha de código:

<link rel="shortcut icon" href="http://www.seusite.com.br/imagens/favicon.ico" />

Criar uma lista de itens é simples.

<ul>
  <li>Box 1</li>
  <li>Box 2</li>
  <li>Box 3</li>
</ul>

Para que os itens fiquem na horizontal você pode usar display:inline; ou float:left; nos itens e tudo certo.

Neste exemplo vou expôr um problema que me ocorreu há algum tempo: Um destaque de notícias de 3 em 3 em blocos em linha, com largura e altura fixa.

Aplico uma margin-right pra dar um respiro e o que acontece?

O que fazer pra impedir a quebra de linha indesejada? Aplicar uma largura fixa na lista para que ela comporte também as margens de seus elementos resolve parte do problema. Por exemplo, se cada item da lista tem 200px de largura com uma margem direita de respiro de 10px, minha lista deve ter 630px de largura. Então é só aplicar um overflow:hidden; no elemento pai da lista.

E pra garantir um resultado ideal, uma margin-bottom também foi adicionada.

É um problema simples, que poderia ser resolvido de outras formas, mas evita que classes extras sejam inseridas no CSS.

Borda arredondada (rounded corner) ou border-radius em CSS é uma técnica amplamente utilizada em sites. Mas devido a velha ladainha de ter que fazer “funcionar” no IE, vez ou outra temos que recorrer a soluções alternativas. E, sempre que busco (falo por mim) uma solução de implementação para isso, sei que não vai ser possível de usá-la devido às limitações do IE. Ainda assim me faço essas três perguntas:

1. Dá pra implementar usando somente CSS e algumas poucas imagens ou é necessário Javascript?
2. Se for por CSS+imagens, funciona direitinho no IE?
3. Se for por Javascript, qual o resultado quando eu o desabilito?

Sem fazer qualquer menção ao CSS3 e seja qual for o método de implementação, sempre coloco o conceito de Graceful Degradation em primeiro lugar nessas situações. Ou seja, se sem a borda arredondada meu layout não perder muito em detalhes, ótimo. Caso contrário tenho que repensar o projeto.

Voltando à solução, de todas as que já encontrei na internet, essa é de longe a mais prática, rápida e leve de implementar. Além de, claro, funcionar em todos os browsers (conheça as limitações mais abaixo).

Drew Diller criou uma biblioteca javascript chamada DD_roundies voltada exclusivamente para o IE que é uma mão-na-roda. Sua solução pode não agradar a todos justamente por ser em javascript, mas, como eu disse, é muito fácil de implementar. E, se você não quiser usar hacks proprietários (-moz-border-radius, -webkit-border-radius e outros) pode usar essa solução também para todos os outros browsers, livrando seu código CSS dos validators.

Solução

Baixe uma cópia do DD_roundies (este é um arquivo zipado contendo as versões compressed e uncompressed), e adicione as linhas abaixo no cabeçalho de sua página HTML:

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
    //somente para o IE
    DD_roundies.addRule('.borda', '10px');
    //variando os raios, somente para o IE
    DD_roundies.addRule('.outraborda', '10px 5px 3px');
    //true (sem aspas) = IE + todos os outros browsers
    DD_roundies.addRule('.bordamenor, img, input, span', '5px', true);
</script>

Até 3 argumentos separados por vírgula podem ser declarados:

• Uma string representando o(s) seletor(es) CSS (obrigatório);
• Uma string representando o(s) raio(s) da borda (obrigatório);
• Um atributo booleano (true/false) indicando se será aplicado só para IE (false, por padrão) ou para todos os browsers (true) (opcional).

A exemplo da 2ª linha do script, onde mais de um raio de borda foi declarado, vale lembrar o seguinte:

• 1 atributo configura todos os quatro cantos;
• 2 atributos configuram os cantos superior-esquerdo/inferior-direito e superior-direito/inferior-esquerdo;
• 3 atributos configuram os cantos superior-esquerdo, superior-direito/inferior-esquerdo e inferior-direito;
• 4 atributos configuram os cantos superior-esquerdo, superior-direito, inferior-direito e inferior-esquerdo.

Limitações

• Não deve ser aplicado à tag <body>
• Evite também aplicar nas tags <table>, <tr>, <td>, <select>, <option> e <textarea>
• O script não aceita o parâmetro background-position:fixed;
• Elementos <img /> “fixos” devem assumir visibility:hidden; e, assim, se tornar não-clicável.
• <input type="image" /> também não suportam o script. Estes com imagens PNG devem assumir visibility:hidden;
• Nos browsers webkit (Safari e Chrome) a borda pode não arredondar caso o border-radius tiver valor maior que o valor de preenchimento (padding) do elemento.
• O IE8 beta 2 fica extremamente lento e some com imagens de fundo (background images)

Browsers testados

Segundo o autor essa solução foi testada nos IE6 e IE7, Firefox 3.0.x, Safari 3.1.2, Chrome 1.0 e já funciona no Opera 10.x. Já o IE8 suporta parcialmente, além de ficar extremamente lento.

Para demonstração veja os exemplos no site do autor.