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.

Cintiq, o sonho de todo ilustrador

Com a computação gráfica, veio a possibilidade de se desenhar diretamente no computador. Isso é possível graças às “mesas digitalizadoras”. Antigamente eram conhecidas por “tablets”, mas isso mudou com a popularização dos computadores portáteis pequenos com touch screen, ou seja, os atuais tablets, como IPad.

Um mesa digitalizadora é um device que permite você usar uma caneta (própria do aparelho) para desenhar usando seus softwares. Essa caneta reproduz o que um mouse faz, com a diferença que ela é sensível a pressão das mãos, algo imprescindível para um desenhista. Com ela, você pode fazer um traço ficar fino ou grosso conforme a pressão exercida.

A grande dificuldade de uma mesa digitalizadora tradicional é que você desenha nela, sobre sua mesa, mas seus olhos devem olhar para a tela do computador. No início isso é bastante desconfortável e leva um tempo para se acostumar. Na verdade, após anos de uso, ainda tenho dificuldade para traçar linhas retas.

Agora temos as mesas digitalizadoras “Cintiq”, da Wacom. Já estão há um tempo no mercado e são fantásticas. Essa mesa digitalizadora permite que você veja o desenho nela mesma, e você traça olhando para seu desenho, sobre a tela. Há várias configurações e algumas, como as de 22 ou 24 polegadas são excessivamente caras. Se você tem muito capital e seu computador é um desktop sem monitor acoplado, pode ser uma ideia ter uma delas. São caras, mas são também monitores para se trabalhar e usar seu mouse, além de desenhar e usá-las como prancheta. Mas se você quer uma opção mais barata, pode optar por uma Cintiq 13HD. Como seu nome diz, ela tem 13 polegadas e resolução HD. Como monitor, ela é semelhante a um notebook regular, mas é ótima para se desenhar. Pode aparentemente parecer pequena, mas se você está acostumado a desenhar em uma folha A4, ela tem dimensões parecidas e é muito confortável, com vários níveis de inclinação. Veja aqui o modelo no site da Wacom.

Esclarecendo algumas dúvidas sobre a Cintiq 13HD:

  • Ela funciona como um monitor compartilhado. Acessando suas configurações de monitores, pode usá-la como um monitor adicionado ou “espelhado”, ou seja, o que você vê no seu monitor normal é o que verá na Cintiq.

  • A mesa não possui um sistema operacional. Muitas pessoas acham que podem tirá-la do computador e ir desenhar em outro lugar. Isso não é possível, como sendo um monitor compartilhado, ela usa o sistema do seu computador. Por isso, ela está sujeita à velocidade do processador e placa de vídeo do seu computador.
  • Ela não é touch screen. Você usa a caneta específica para desenhar nela. Quem sabe no futuro essa opção possa ser incluída, mas poderá ter um botão para ligar ou desligar o touch, ou um reconhecimento muito bom dos dedos e das mãos, pois  você encosta suas mãos na tela para desenhar, o touch não pode ser acionado sem querer.
  • A mesa possui vários níveis de inclinação para se ajustar a maneira mais cômoda para você desenhar.
  • Ela não possui software específico para desenho. Ela vem com o drive para ser instalado, que controla os níveis de pressão e precisão da caneta, bem como configurações de seus botões (isso mesmo, você pode configurar tanto os botões da caneta como os botões laterais da mesa conforme desejar, incluindo funcionalidades diferentes para cada software que usa). Mas você a usará com os softwares que possui em seu computador.

  • Ela possui um único cabo com três plugues em uma de suas pontas (o cabo 3 em 1 da Wacom). O primeiro plugue é para ligar à rede elétrica, o segundo é a conexão USB (que a define como mesa digitalizadora e suas funcões) e o terceiro é para ligar à placa de vídeo e transformá-la em um monitor. Este último plugue dá um pouquinho de trabalho para usuários Mac. Ele é HDMI e para conectá-lo no Mac é preciso um adaptador (não incluso) para converter o HDMI no Mini Display Port do Mac, ou Thunderbolt. Um único adaptador serve tanto para Thunderbolt como Mini Display Port (abaixo). Lembro que pode-se ligar o Mini Diplay Port no Thunderbolt, mas não o contrário.
Para cuidar da sua Cintiq, é melhor usar uma luva protetora.  Existem luvas protetoras específicas, mas você pode economizar muito comprando uma de algodão que também evita oleosidade da pele e riscos em sua tela. Você pode cortar na luva os dedos usados para segurar a caneta (polegar, dedo indicador e dedo médio) para lhe dar mais comodidade.

Como retirar/mostrar o nome do autor no Twenty Eleven

Quando há mais de um colaborador em um blog com o tema Twenty Eleven (WordPress), é exibido quem escreveu o post. Mas se você não deseja que o nome do autor apareça nos posts, há várias formas de fazê-lo. A que achei mais prática foi instalar o plugin “Show Hide Author”.

Após instalar o plugin (através do painel administrativo do WordPress), basta retirar todas as opções em “Post Types” (ou colocar, se esta for sua necessidade).

 

Depois de salvar as alterações, você notará que no seu blog ainda aparecerá a palavra “por” após a data. Para isso, esse mesmo plugin tem uma solução. Mais abaixo você encontra “Advanced: Hide the “by” word”, que se refere a ocultar a palavra “por” (by, em inglês).

Coloque no primeiro campo a classe que deseja ocultar (ex: entry-meta; author-meta). No segundo campo, veja em seu código fonte como a palavra “por” se apresenta e insira nesse espaço (ex: <span class=“sep”>por</span>).

Pronto, o nome do autor foi retirado dos posts. Da mesma forma, se você é o único autor em seu blog, pode usar este plugin para apresentar seu nome em cada post, colocando uma URL para quem clicar no autor.