Topo

Arquivo de February 18th, 2007

Mudar a cor dos olhos

Data: 18 Feb 07, 7:48

Uma maneira não tão complexa como a do tutorial para colorir uma imagem inteira a preto e branco. Esta apenas muda uma cor, neste caso, vamos ver para a dos olhos com esta imagem da Mena Suvari.

eye01.gif

Vai até Image > Adjust > Selective Color e escolhe Blues, agora é só ajustar qualquer coisa como: Cyan 0%, Magenta -100%, Yellow 98% and Black 0%. E fica verde.

eye02.gif

Outra maneira seria, a tal do tutorial para colorir uma imagem a preto e branco: usar a polygon lasso tool seleccionar os olhos, criar novo layer, escolher uma cor para os olhos e pintar. Colocar o layer com o blend mode: Color ou Hue.

eye03.gif

eye04.jpg

Upa!

Colorir imagens a preto e branco

Data: 18 Feb 07, 7:47

Vou utilizar esta imagem da Evangeline Lilly.

Onde está a Lasso Tool, selecionar a polygon lasso tool ou a magnetic lasso tool, a que der mais jeito para a selecção de cada parte da imagem para colorir com diferentes cores.

Vou começar pelo cabelo, e depois de selecioná-lo todo, para não perder a selecção ir até Select, Save Selection e dar um nome aquela selecção, por exemplo: cabelo.

Faz-se um novo layer, e escolhe-se uma cor para o cabelo, por exemplo #AA6F1B, assim uns tons castanhos. Com o paint bucket, pinta-se a selecção, selecionar no blend mode: Color (onde existe: normal, dissolve, multiply, etc). Senão ficar, basta ir-se experimentando outros tons.

Esta, por acaso, não é uma das melhores selecções, por ter o cabelo espalhado, mas tenta-se contornar a situação. E para isso, na janela dos layers, em baixo, clicar em add a mask, selecionar o paint bucket e trocá-lo pela gradient tool: linear gradient e arrastar um bocadinho a imagem, na parte onde o cabelo está mais disperso. Eu acabei por pintar de novo com um castanho mais escuro.

Podes ir até Image > Adjust > Selective Color (ou Replace Color, Curves, etc) e ajustar os tons para ficarem mais realistas (se for essa a intenção, pelo menos aqui é)

Agora é só continuar o mesmo para as outras partes, fazer sempre um layer novo para cada parte.

Nas selecções, uma dica, por exemplo, nesta imagem, a pele, é dividida pela camisola, utiliza o shift quando tiveres a seleccionar, para adicionar outra selecção, não faças em separado cada parte, por exemplo, um ombro, depois pintas, e depois selecionar outro ombro e pintá-lo, seleciona logo ambas as partes e pinta junto, porque se se misturam cores diferentes, não é muito bonito ver um ombro com tons de pele diferentes. Depois de todas as selecções continua a usar o Hue/Saturation ajuda muito.

Resultado final:

É verdade, esta é a foto original. Créditos: www.lost-media.com

Upa!

Blurring Out

Data: 18 Feb 07, 7:45

Para ter um efeito de blur apenas por fora, onde no centro aparecerá uma imagem focada, aqui fica este tutorial.

Com esta foto da Jennifer Garner. Duplica-se o layer e começase com os passos referidos nas imagens seguintes na imagem original, não no duplicado.

Com a eraser tool elimina, no duplicado, os contornos da imagem, excepto a parte centrada que ficará focada.

Resultado final.

Upa!

Padrões (Pattern)

Data: 18 Feb 07, 7:43

Patterns são padrões que vão sempre repetindo, pode-se fazer muitas variações, vou colocar 3 muito básicas.

Vamos então fazer já as três patterns: File > New, um deles será: 1 pixel de width e 2 pixeis de height. Outro: 2 pixeis de width e 1 de height e outro, por exemplo, 8 pixeis de width e height (comprimento e largura). Vê as três imagens seguintes, principalmente o que está destacado a amarelo.

Aumenta o zoom das três para o máximo 1600%. Seleciona a Pencil Tool na barra de ferramentas, é a que está junta com a Paintbrush Tool. E nas propriedades dessa ferramenta, coloca apenas 1px de diâmetro, como na figura em baixo.

Com a cor preta (ou talvez outra qualquer), preenche como na figura seguinte os três exemplos. No primeiro é apenas um quadradinho em cima, no segundo é num dos lados e no maior é na diagonal.

De seguida, Edit > Define Pattern, em cada uma delas. E pronto, elas estão feitas.

Agora para pô-las em prática e talvez até para inventar mais umas. Numa imagem qualquer, adiciona um novo layer, na barra de ferramentas seleciona o paint bucket e nas suas propriedades em vez de Foreground, seleciona Pattern e escolhe um dos que fizeram.

Muda o blending mode desse layer para Soft Light e tens três efeitos interessantes. Outros patterns podem ficar simples apenas como fundo de algum site vosso por exemplo, assim como estes são indicados para imagens.

Até se juntarem os dois patterns mais pequenos (os que nomeámos como Exemplo 01 e 02), fica giro, ambos juntos é o mesmo que um quadradinho, por exemplo 2 pixeis por 2 pixeis.

Upa!

Cristais 3D

Data: 18 Feb 07, 7:38

Cria um novo ficheiro com as medidas que quiseres, eu fiz um com 800×600 (que já foi redimensionado).
Com o paint bucket pinta o fundo de preto e de seguida vê os passos seguintes que as imagens mostram:

Filter - Render - Lens Flare
Filter - Render - Lens Flare

50% Lens Type: 35mm Prime
Brightness: 50% Lens Type: 35mm Prime

Lens Flare
Lens Flare

Filter - Artistic - Fresco
Filter - Artistic - Fresco

Brush Size 2, Brush Detail 8, Texture 1
Fresco: Brush Size 2, Brush Detail 8, Texture 1

Fresco
Fresco

Filter - Stylize - Extrude
Filter - Stylize - Extrude

Pyramides, Size: 20 pixels, Depth, 255 Random
Extrude: Pyramides, Size: 20 pixels, Depth, 255 Random

Extrude
Extrude

Create new layer
Create new layer

Cristais 3D Final
Cristais 3D Final

No final, poderás copiar, por exemplo, metade e colocá-la num canto e a outra metade noutro canto e adicionar efeitos.

Cristais 3D Efeitos
Cristais 3D Efeitos

Upa!

Acessibilidade

Data: 18 Feb 07, 7:10

Cada vez mais se começa a verificar uma preocupação por isto nos websites mas mesmo assim ainda não é o suficiente para os visualizar correctamente. Este assunto é um pouco geral, mas alguns aspectos podem ser referidos aqui.

Consiste em tornar o website navegável na maior parte dos browsers e para pessoas com problemas que necessitam de outro tipo de equipamento para ter conhecimento da informação nos sites.

Já usando CSS facilita imenso nesse tipo de coisas mas é preciso avançar e explorar mais. O artigo sobre semântica está relacionado com este.

  • Listas: as marcas e numerações do conhecido Microsoft Word, essas listas devem ser usadas sempre que possível em CSS, ordered ou unordered lists - com números ou letras - ou mesmo usando listas e omitir essas marcas e/ou numerações, dá para fazer inumeras coisas com as listas, nomeadamente menus: verticais, horizontais, etc. Ler mais sobre listas.
  • Todas as imagens devem conter um alternate text, mesmo que não esteja nada lá escrito, esta é uma regra de validação de código, mas convém colocar sempre texto que realmente explique a imagem. Os títulos nas imagens e as longas descrições são fundamentais para entender as imagens. O mesmo acontece para os links com o title.
  • Os headings devem ser utilizados não só para os títulos principais. Um erro que fazia no início, quando comecei a utilizar classes era definir parágrafos com uma determinada class, chamada título por exemplo, o que, por questões de semântica, é errado. De <h1> a <h6> devem ser utilizados e formatados com CSS.
  • Em menus ou outras imagens em que são usadas o rollover para outras imagens, não se deve utilizar javascript já que muitos utilizadores navegam sem suporte para tal, se for um menu, pode tornar o site extremamente inacessivel para navegar. Mais uma vez deve-se utilizar CSS para tal, para além de ser muito mais rápido a carregar.
  • Nos links, não escrever "clica aqui", utilizar mesmo nomes com significado para saber do que se trata
Upa!

Acrónimos e Abreviaturas (acronym, abbr)

Data: 18 Feb 07, 7:02

Estes códigos em HTML são bom para não ter de dispôr as palavras na sua totalidade, fornecendo ao utilizador a sua definição na mesma. Quando são definidos em HTML, o utilizador ao passar o rato por cima de um acronym ou de uma abreviatura, aparece um título com a sua definição.

Um acrónimo (acronym) é uma palavra "abreviada" constituída exactamente pelas iniciais das palavras que nos estamos a referir. Por exemplo: CSS em que as três iniciais equivalem mesmo às três palavras.

Uma abreviatura (abbr) é a redução das palavras onde podem surgir letras que não são as iniciais das mesmas. Exemplo: HTML, em que uma palavra da expressão por extenso equivale a duas iniciais.

No entanto, no Internet Explorer o abbr não é suportado, pelo que os webdesigners podem escolher utilizar o acronym para ambos, pelo que também não é correcto, mas é à escolha de cada um.

Acrónimo

  1. <acronym title="Cascading Style Sheets">CSS</acronym>

Abreviatura

  1. <abbr title="HyperText Markup Language">HTML</abbr>
Upa!

Cursores

Data: 18 Feb 07, 6:43

Para alterar o cursor do rato no site todo:

  1. body {
  2. cursor: default;
  3. }

Onde está default podes alterar para um da seguinte lista:

Para personalizar com uma imagem própria, tem de ser com extensão .cur
E o código em CSS será o seguinte:

  1. body {
  2. cursor: url("nome.cur");
  3. }
Upa!

Iframe scrollbar transparente

Data: 18 Feb 07, 6:39

Este só dá mesmo para aplicar transparência dos scrollbars nos iframes, portanto, é só adicionar o código seguinte ao do iframe, e o restante no CSS, a cor usada, convém ser uma que não vá ser utilizada em mais nenhum lado no CSS.

  1. <iframe src="pagina.html" name="conteudo" width="600" height="400" scrolling="auto" border="0" frameborder="no" style="FILTER: chroma (color=#dadbfe)"></iframe>
  1. body {
  2. scrollbar-3dlight-color: #dadbfe;
  3. scrollbar-arrow-color: #000000;
  4. scrollbar-base-color: #dadbfe;
  5. scrollbar-darkshadow-color: #dadbfe;
  6. scrollbar-face-color: #ffffff;
  7. scrollbar-highlight-color: #dadbfe;
  8. scrollbar-shadow-color: #dadbfe;
  9. scrollbar-track-color: #dadbfe;
  10. }
Upa!

Scrollbar colorido

Data: 18 Feb 07, 6:32

Scrollbars coloridos são apenas visiveis no Internet Explorer e não é código válido em CSS.

  1. body {
  2. scrollbar-3dlight-color: #000000;
  3. scrollbar-darkshadow-color: #000000;
  4. scrollbar-track-color: #000000;
  5. scrollbar-arrow-color: #c0c0c0;
  6. scrollbar-highlight-color: #000000;
  7. scrollbar-shadow-color: #c0c0c0;
  8. scrollbar-face-color: #000000;
  9. }
Upa!

21 - 0.420 segundos.