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.

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.

Substituto para iframe

Eu uso bastante iframe para sites com muitas páginas, mas com conteúdos internos, basicamente para puxar um menu. Por exemplo, se um site tem 20 páginas e o cliente pede para inserir um novo link no menu, se este menu estiver no código de cada página, serão 20 alterações, pois você terá que mudar o menu em todas as páginas (mesmo que com copy e paste). E corre o risco de esquecer alguma. Com iframe, eu faço um arquivo HTML para o menu, com seus CSS e um iframe em cada página. Basta alterar a página do menu e todas as páginas irão puxar o atual. Você pode colocar um CSS também para iframe. No caso, se o menu alterado for maior na vertical ou horizontal, basta alterar no CSS e o iframe de todas as páginas muda também.

No exemplo acima, o código do iframe foi
<iframe id=”seletor” src=”menu.html” frameborder=”0″ scrolling=”no”>
(para os menus, é bom deixar sem scrolling e sem bordas). O CSS chama-se “seletor”.

A única desvantagem do iframe é que você não visualiza o que está nele no Dreamweaver, apenas no navegador. Além do mais, muitos comentam que seu uso está ultrapassado (não acredito muito). Mas como alternativas, se não quiser usar iframes, pode usar php ou a tag <object>.

Com PHP

Não conheço muito de PHP, mas para este processo não é necessário saber muito.

Feito sua página em HTML, você apenas deve salvá-la com extensão PHP (não precisa criá-la em PHP). Na parte do código onde está o menu (que deverá ser igual a todas as páginas), você seleciona e recorta (ou copia e apaga). Em um novo arquivo em branco, cole nos códigos a parte recortada, mas apenas eles (não deve ter nenhum outro tag HTML). Salve este arquivo com a extensão  “inc” (por exemplo, “menu.inc”). Volte na página que continha os códigos do menu, insira no lugar o comando php
<?php include ‘menu.inc’; ?>
(se você deu outro nome para o arquivo, substitua o menu.inc pelo nome dado). No preview do Dreamweaver você verá que o menu é colocado no lugar certinho. Se precisar mudar o menu, mesmo alterando seu tamanho no CSS, todas as páginas serão alteradas.

DICAS: guarde um arquivo cópia do seu menu em HTML, para ajudá-lo em futuras alterações, pois o arquivo inc não dá um preview para você visualizar enquanto estiver alterado (exceto se for alteração apenas de CSS, aí vc visualiza na página que o contém). Você pode ter problemas com acentos e cedilha, por isso use os códigos para cada símbolo.

A única coisa ruim é que suas páginas ficam em php e você pode ter problemas para visualizar offline nos navegadores, se não tiver instalado php em sua máquina.

Com a tag <object>

Esta é uma boa opção para manter suas páginas em HTML. O trabalho é semelhante a usar iframe. Crie uma página para seu menu e salve o html (por exemplo, “menu.html”). Nas páginas que terão o menu, no lugar onde deve entra o código, digite
<object data=“menu”.html”> (não esqueça de fechar a tag) </object>

Agora você deve associar o object a um estilo. No meu caso, eu criei um estilo chamado “boxmenu” onde entrará o arquivo html do menu. Então, vamos alterar a tag para
<object data=“menu.html” id=“boxmenu”></object>

Se houver alterações que façam o menu ficar maior na horizontal ou vertical, basta alterar o estilo “boxmenu” e todas as páginas serão atualizadas.

Com a tag <embed>

Para também manter o arquivo em HTML, pode-se usar a tag <embed>. Use-a da mesma forma que usaria <object>, você pode também, em vez de fazer um css dentro da tag, colocá-la dentro de uma div, e esta vinculada a um CSS. o código ficaria:
<div id=”boxmenu”>
<embed src=”menu.html”></embed>
</div>

_______________________

Você também pode usar estes 2 substitutos do iframe (e o próprio iframe) para fazer um rodapé ou um sidebar, que serão os mesmos em todas as páginas.