Imagens com fundo recortado

Muitas vezes é necessário aplicar uma imagem sobre um fundo ou textura colorida, onde é necessário que essa imagem seja recortada. Imagens em JPG, por exemplo, mesmo que seu fundo seja branco, este aparecerá no arquivo ao ser importado, seja no InDesign, ou no Power Point, como mostrado abaixo:

recorte_tela00

Mas há algumas extensões de arquivo que suportam não conter este fundo. Primeiramente, precisamos recortar este fundo. Eu utilizo o Photoshop, e existem várias maneiras de se fazer isso. Vejamos algumas delas:

  • Primeriamente transforme seu “background’ em uma camada, pois se você apagar o fundo no background, ele ainda continuará com um fundo, mesmo que branco. A maneira mais fácil de se fazer isso é com 2 cliques sobre a camada background, o Photoshop irá abrir uma caixa de opções para esta nova camada, clique Ok e seu background se transformará em uma camada.

recorte_tela01

  • Uma outra forma é duplicando seu background (com Comand J – MAC, Control J – PC; ou escolha “Duplicate” nas opções de camada). Feito isso, apague a camada background.

recorte_tela02

  • Se seu fundo for homogêneo, com uma cor predominante, você pode selecioná-lo com a ferramenta “Magic Wand”. Quanto maior for a tolerância, mais área ele irá pegar na seleção. Delete a área selecionada. Se a imagem for uma foto, com figura humana, por exemplo, e você queira um corte mais suave, pode escolher um feather de 1 ou 2 pixels na seleção antes de deletá-la. No menu “Select”, escolha “Refine Edge”. Aqui, você pode também configurar mais opções para as bordas da sua seleção, antes de deletá-la.

recorte_tela03

recorte_tela04

  • Se o fundo da imagem é cheio de detalhes e cores diversas, você pode “desenhar” ao redor da imagem com a ferramenta “Pen Tool”. Após fechar a forma (ponto de origem com ponto final), vá em opções de path e peça para transformar o path em seleção. Nesta caixa de opções, você já pode indicar o feather. Depois, inverta a seleção para capturar o fundo (Menu “Select”, escolha “Inverse”). Delete a seleção.

recorte_tela05

recorte_tela06

  • Se optar por maior precisão, principalmente se a imagem recortada tem detalhes como fios de cabelo, pode optar por apagar em volta da imagem com a ferramenta “erase”. Aqui o trabalho bem manual, e ajuda muito ter uma mesa digitalizadora.

recorte_tela08

Obs.: Você pode usar o conjunto de todas as formas mencionadas, pois algumas imagens precisam de algum retoque, ou mais precisão para deletar o fundo.

  • Se seu arquivo será usado em “RGB”, para apresentações em Power Point, impressões a jato de tinta, ou uso para internet, você pode salvar o arquivo como PNG, ou como GIF. Em ambos os casos o fundo permanecerá recortado. Para uma melhor qualidade, opte pelo PNG; para um arquivo menor em memória, opte pelo GIF.
  • Se você for usar a imagem para impressão em gráfica, seu arquivo estará em CMYK (4 cores de gráfica). Não é possível salvar em PNG ou GIF com cores em CMYK. Então, salve o arquivo como PSD mesmo (extensão do próprio Photoshop). Esta extensão pode ser importada tanto pelo Illustrator como pelo InDesign, mantendo a imagem recortada.
  • Com cores em CMYK, você pode também salvar o arquivo em TIF, mas não são todos os programas que aceitam a transparência do fundo.

recorte_tela09

O que você pode fazer é desenhar ao redor do elemento a ser recortado, com “Pen Tool”, como mencionei anteriormente. Mas em vez de transformar o “path” desenhado em seleção, nas opções, você primeiramente irá salvar o path atribuindo-lhe um nome. Depois, ainda nas opções, escolha “Clipping path”. Na caixa de seleção escolha seu path e atribua um valor de flatness (pode ser 1). Salve sua imagem em TIF. Ao importá-la em outro software, a imagem aparecerá recortada conforme o seu path desenhado.

recorte_tela10

Com o fundo recortado e o arquivo salvo na extensão apropriada, você pode importá-lo, ou usá-lo na internet sobre um fundo colorido.

recorte_tela11

Quando usar “ID” ou “CLASS” em seu CSS

Usar CSS é muito bom no desenvolvimento de páginas para internet. Usar CSS é similar a usar estilos no Word, por exemplo. Aos elementos da página são especificados estilos. Se você mudar o estilo (como tamanho de fonte, bold etc), todos os elementos que possuem aquele estilo serão alterados automaticamente. Isso ajuda muito, tanto para criação do site quanto para futuras alterações. Mas ao criar um estilo, pode-se ter uma dúvida: criar um ID ou um CLASS?

Bom, para isso, eu tenho uma analogia que pode ajudar bastante. Imagine uma sala de aula, com 40 alunos, das mais variadas idades, etnias e gênero. Cada aluno possui um número de chamada. Como professor, você chama o número 11, por exemplo. Apenas um aluno se levantará. É impossível que tenha mais de um aluno como sendo número 11 nessa sala. Portanto, esse número é a identidade daquele aluno, seu “ID”. Ao chamar um aluno pelo seu ID, você tem certeza que existe apenas um na sala. Isso se repete em qualquer outra sala de aula que você esteja.

Nesta mesma sala, agora você chama os alunos do sexo masculino. 15 alunos ficam de pé. Este número poderia variar dependendo da sala de aula que você estiver. Isso porque o dado que você apresentou para sala não foi único de um aluno, foi uma “Classificação”, um “CLASS”. Você teria também número variado de alunos, se pedisse para se levantar quem nasceu em janeiro, por exemplo. Poderia se apresentar um ou mais alunos, ou nenhum.

Então, na analogia acima, sua sala de aula é sua página da internet. Um elemento único na página terá como CSS um “ID”, e elementos que compartilham mais de um estilo serão um “CLASS”.

Considere o exemplo abaixo, de uma página com um cabeçalho, que chamarei de “Header” e 3 colunas de texto, que chamarei de Colunas. Neste exemplo vou considerar apenas a tag DIV.

id_class1

O cabeçalho é único na página. Então seu código será <div id=“header”></div> e seu CSS terá “#” antes do nome, ficando #header{definições do estilo}

Já as colunas possuem o mesmo formato, a mesma fonte de letra, não são únicas na página. Seu código será <div class=“coluna”></div> e seu CSS terá “.” antes do nome, ficando .coluna {definições do estilo}

id_class2

  • Lembre-se: os estilos podem ser únicos de uma página ou para todo o site. Se forem únicos de uma página, então seu código ficará na própria página, entre as tags <style type=”text/css”>aqui seu css</style> (dentro da tag <head></head>). Se você for usar os estilos para outras páginas também, ele deve ficar em um arquivo próprio, com extensão “.css”, por exemplo “basic.css”. Em cada página onde ele será usado, deve conter o código <link href=“basic.css” rel=”stylesheet” type=”text/css” />. Aqui considerei que o arquivo da página e o arquivo basic.css estarão na mesma pasta. Se o arquivo css estiver em outra pasta, lembre-se de indicar corretamente o caminho dele.

Como fazer download de vídeos do Youtube

Uma opção bem simples para fazer download de um vídeo do Youtube para seu computador é entrar no vídeo que queira baixar. Em seguida, na barra de endereços do navegador (URL do vídeo desejado), coloque “ss” antes de youtube, como na imagem abaixo:

Na tela a seguir, escolha o formato e tamanho do vídeo que deseja baixar. Clique sobre o formato, o download terá início.

Fonte deste post: http://www.youtube.com/watch?v=IubsfPD9U9Q

Na verdade, fazendo isso você está entrando no site “http://en.savefrom.net”. Então, você poderia também entrar diretamente neste site e colar o URL do vídeo do youtube no local indicado.