PowerClip

Tutorial Power Clip

Download

Deixei o arquivo em CDR para download, para aqueles que quiserem ver os “bastidores” do desenho.

:: coreldraw 8, 10, 12 e X3 ::

1-Recurso Clip

Os programas de desenho vetoriais possuem um recurso muito poderoso, que não é usado por todos, o clip.No coreldraw ele se chama powerclip, no freehand é clipping path.Ele consiste em “encaixar” um objeto dentro de outro, sem no entanto ser preciso modificá-los:

Explicarei os comandos tanto para coreldraw como para freehand, mas usarei apenas imagens do coreldraw.

2-Preparando o desenho

Para começar, eu recomendo que crie todos os contornos usando dois objetos sem contorno, ao invés de apenas um com contorno e preencimento:
 

Desse modo, será possível controlar a espessura do contorno de forma mais precisa que a mídia artística por exemplo, além de aplicar gradientes e transparências, deixando o preenchimento inalterado.

Outro procedimento que facilita o trabalho é separar as partes do desenho em vários objetos independentes.Mesmo que você você tenha feito o desenho manualmente e passado o mesmo por um programa trace, corte o desenho em várias partes:
 

Defina as cores de contorno e os prenchimentos brutos.Outra coisa que também faço, mas não é essencial, é fazer uma marcação de sombras e luzes com lápis:
 

3-Começando

Desenhe o contorno das sombras em cima do objeto.Faça-o bem maior que o “recipiente”, isso facilitará um reposicionamento:

Escolha uma a cor e tire o contorno.Agora vamos à parte que realmente interessa:

No coreldraw: selecione o objeto, vá em Efeitos>Power Clip>Colocar em recipiente.Uma seta vai surgir, clique com ela no recipiente.

No freehand: selecione o objeto, escolha Edit>Cut.Depois selecione o recipiente e vá em Edit>Paste Inside.
 

Atenção: no coreldraw o posicionamento padrão é central, portanto, o objeto será colocado no centro do alvo.Para mudar isso, vá em Ferramentas>Opções (Ctrl+J) e na guia Editar desmarque a opção “Conteúdo de centralização automática do novo PowerClip”.

Para editar a posição do objeto dentro do recipiente:

No coreldraw existem 3 formas:

1 – selecione o recipiente, vá em Efeitos>Power Clip>Editar conteúdo.

2 – clique com o botão direito e escolha “Editar Conteúdo”.

3 – clique no recipiente com o Crtl pressionado.Você entra numa tela de edição, onde aprarecem os objetos encaixados e o contorno do recipiente em cinza.

Para sair da edição, clique em um lugar sem objetos com o Ctrl pressionado ou clique com o botão direito em um dos objetos e escolha “Finalizar edição deste nível”.

No freehand é bem mais simples, basta selecionar diretamente o objeto e fazer as alterações.

Para cancelar o Clip e retirar o os objetos inseridos:

No coreldraw: 1 – selecione o recipiente e vá em Efeitos>PowerClip>Extrair conteúdo.2 – Clique com o botão direito do mouse e escolha “Extrair conteúdo”.

No freehand: vá em Edit>Cut Contents.

Dica: tanto o coreldraw como o o freehand possibilitam a edição de todas as teclas de atalho.Se você colocar os comandos de power clip em teclas, muito trabalho será poupado.

No coreldraw vá em Ferramentas>Opções.Na guia Personalização escolha Comandos, e deixe aberta a aba “Teclas de atalho”.

Escolha as teclas, não esquecendo de clicar em “atribuir”, ou a mudança não ocorrerá.Prefira teclas próximas, por exemplo, I para “Colocar em recipiente”, O para “Editar o conteúdo” e P para “Extrair” ou “Sair da edição”.

4-Inserindo mais objetos

Continue o processo fazendo o desenho do brilho, e colocando dentro do recipiente.Se preciso “entre” nele e edite os objetos conforme o necessário.

A grande utilidade desse recurso se mostra aí.Você pode inserir um objeto completo sem precisar cortá-lo.Os objetos dentro do recipiente se comportam normalmente, podendo ser arrastados, editados e empilhados.
 

Esta é uma imagem da tela de edição do conteúdo do Power Clip:

Continue desenhando as sombras e luzes e inserindo dentro do recipientes:

5-Usando transparências

Um recurso muito intressante é combinar o Power Clip com transparências.Nesse recurso o coreldraw leva vantagem, oferece vários tipos de configurações, como transparência em gradiente, gradiente múltiplo, radial, filtros.Já o freehand oferece apenas a transparência uniforme, criando na verdade um novo objeto com configurações que simulam uma transparência (Se alguém conhece outros métodos de transparência do freehand, por favor me avise).

Crie os objetos normalmente.Aplique a transparência e depois use o Power Clip.
   

Com transparências em gradiente linear ou radial é possível criar alguns efeitos muito úteis:
   

Para editar as transparências, se oriente pelo esquema abaixo:

1-Ferramenta transparência > selecione ela para o menu aparecer na parte de cima.

2-Editar transparência > é possível editar as transições, como em um gradiente normal, mas apenas em preto e branco.A cor preta indica transparência total e a branca a opacidade total.A imagem abaixo indica uma transparência nos dois lados do objeto:

3-Tipo de transparência > escolha entre linear, radial, uniforme, etc.

4-Operação de transparência > filtros de cor.

5-Ponto médio da transparência.

6 e 7-Ângulo e transição da transparência gradiente.

8-Aplicação no objeto > escolha se a transparência vai ser aplicada apenas no contorno, no preechimento, ou ambos.

6-Mais transparências

Use trasparências para suavizar sombras e brilhos que estejam muito contrastantes:
   

Sobrepondo transparências cria-se efeitos bem suaves:
   

7-Finalização

Nesse exemplo usei um fundo formado por 3 elipses nas cores branca, bege e verde, aplicadas ao efeito Misturar.

No coreldraw, selecione dois objetos e vá em Efeitos>Misturar.Uma caixa de diálogo irá
aparecer para as configurações.

No freehand, selecione dois objetos e vá em Modify>Combine>Blend.As configurações
podem ser feitas através do Window>Inspector>Object.
 

Depois usei uma sombra verde musgo com transparência, colocada atrás da flor e na frente do fundo.
   

Depois disso, é só fazer algum ajuste de cores, caso necessário.Coloquei abaixo duas imagens,
uma usando Power Clip, e a outra sem, apenas com preenchimento simples.
 

8-Download

Deixei o arquivo em CDR para download, para aqueles que quiserem ver os “bastidores” do desenho.

:: coreldraw 8, 10, 12 e X3 ::

WordPress Multisite em localhost com XAMPP + domain mapping no Windows

jobs_wp Um dos problemas que enfrento ao desenvolver com WordPress em localhost é a duplicidade dos arquivos do core, gerando um grande volume em disco, ao mesmo tempo que fragmenta as diversas instalações dos vários trabalhos, cada um em sua versão do WordPress. Pode ser que a imagem ao lado seja familiar à alguns de vocês.

No meu caso, como eu uso uma biblioteca base para os plugins que faço, esse problema fica mais grave já que pode acontecer de ter uma instalação com uma versão mais antiga da biblioteca. Já até aconteceu de eu resolver um bug em uma versão mais velha, e a lógica da correção só se aplicava à essa versão antiga, o que gerava mais trabalho para corrigir a nova versão, enfim, um problema sério.

Por um tempo eu resolvi esse problema unificando a pasta de plugins de todos os trabalhos, apontando para o mesmo diretório. Assim só mantinha uma única pasta local com todos os plugins, assim ao atualizar um plugin, ele era atualizado para todos os sites em localhost. O problema é que ainda assim o core(wp-admin, wp-includes, etc) continuava fragmentado e era necessária a atualização individual de cada instalação/job.

Alguns já devem ter pensando que a solução mais óbvia seria usar o WordPress Multisite, e de fato é a melhor solução :-D! O grande problema era conseguir fazer rodar o Multisite em localhost usando domain mapping, ou seja, cada site possuindo sua própria url, o que não é possível usando o localhost normal, permitindo apenas o modo de subpasta( http://localhost/site1http://localhost/site2, etc ).

Começando

Antes de tudo, vou listar o ambiente que usei:

  • Windows 8
  • XAMPP 1.8.1, com PHP 5.4.7
  • WordPress 3.5.1

Caso você use outra versão do Windows e quiser compartilhar informações pode deixar nos comentários que eu atualizo a lista 🙂

Primeiro vamos habilitar os domínios completos, assim poderemos usar endereços como http://meusite.com.br,  em vez de http://localhost/xampp/meusite/, permitindo organizar melhor os trabalhos, deixando por exemplo o endereço de desenvolvimento semelhante ao final, como joburgente.dev.br e joburgente.com.br.

Links úteis que usei para este artigo:

1 – Arquivo hosts

Nos sistemas operacionais, é possível mapear, através do arquivos hosts para onde os endereços web apontarão, permitindo que uma requisição de endereço absoluto, como http://exemplo.com.br acesse o localhost em vez da web. O arquivo hosts se encontra em C:\Windows\System32\Drivers\etc.

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host
# localhost name resolution is handled within DNS itself.
127.0.0.1	localhost

Para editar este arquivo será preciso ser como administrador. Neste arquivo os comentários são definidos com # no começo de cada linha. Para adicionar um novo endereço, basta adicionar uma linha apontando para 127.0.0.1, que é o localhost:

127.0.0.1	localhost
127.0.0.1	jobs.dev.br

Agora todas as requisições para jobs.dev.br irão direcionar para o localhost e não para um site real da internet. Agora precisamos configurar para que o XAMPP trabalhe com este endereço, servindo os arquivos corretos.

2 – Arquivo httpd-vhosts.conf

Este arquivo se encontra em \xampp\apache\conf\extra\httpd-vhosts.conf, e possui as mesmas regras em relação aos comentários, feitos com #. Certamente este arquivo já estará com o localhost configurado:

<VirtualHost *:80>
	ServerName localhost
	DocumentRoot "D:\PHP\xampp\htdocs"
</VirtualHost>

Vamos agora adicionar nosso host virtual:

<VirtualHost *:80>
	ServerName localhost
	DocumentRoot "D:\PHP\xampp\htdocs"
</VirtualHost>

<VirtualHost *:80>
	ServerName jobs.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

Em ServerName, coloque o mesmo endereço presente no arquivo hosts. Em DocumentRoot, coloque o caminho de computador da pasta, que deverá conter a raiz do WordPress – eu prefiro colocar o caminho entre aspas, assim evita-se erros devida a nome de pastas com espaços ou caracteres especiais.

3 – WordPress Multisite

Agora é preciso reiniciar o apache através do controle do XAMPP, e poderemos acessar o nosso WordPress em jobs.dev.br, que nos mostrará a tradicional tela avisar para criar o arquivo wp-config. Faça a instalação normalmente como em qualquer WordPress comum.

Depois ative o Multisite, conforme explicado no Codex: https://codex.wordpress.org/Create_A_Network. Após adicionar a constante WP_ALLOW_MULTISITE, irá aparecer o novo item no menu: Ferramentas > Instalação da Rede. Escolha a opção utilizando subdomínios. Siga as instruções do WordPress e adicione as constantes no arquivo wp-config.php e as novas regras no .htaccess. Após esses passos, será pedido para reloggar e você já poderá adicionar um novo site, utilizando o modelo de subdomínio:

wordpress_subdomain_site

Porém após clicar em “Adicionar Site”, você ainda não poderá acessá-lo! Infelizmente o Windows não permite o uso de wildcards(¹). Será necessário registrar todos os novos sites nos arquivos hosts e httpd-vhosts.conf:

127.0.0.1	localhost
127.0.0.1	jobs.dev.br
127.0.0.1	teste.jobs.dev.br
<VirtualHost *:80>
	ServerName localhost
	DocumentRoot "D:\PHP\xampp\htdocs"
</VirtualHost>

<VirtualHost *:80>
	ServerName jobs.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

<VirtualHost *:80>
	ServerName 	teste.jobs.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

Atentem para o DocumentRoot do novo site, que permaneceu igual ao site principal. Será o WordPress mais o plugin do domain mapping que irá fazer a mágica para rodar tudo com os mesmos arquivos. Reinicie o apache e pronto, a WordPress Multisite está instalado localmente 😀

Até este ponto, será possível utilizar o multisite em ambiente local utilizando os subdomínios, além da possibilidade de ter quantos multisites quiser em localhost. Agora se quiser seguir um passo adiante, vamos ver como aplicar o domain mapping nas instalações multisite, permitindo que cada site da rede possua sua própria url única.

4 – Domain Mapping

É possível fazer o domain mapping e ao mesmo tempo manter o acesso por subdomínio. Vamos fazer primeiro a versão mantendo o subdomínio, que é mais simples, mas envolve em mais passos no admin:

Instale o WordPress MU Domain Mapping, e ative-o na rede. Em seguida, copie o arquivo sunrise.php presente na pasta do plugin e copie-o na pasta wp-content. E por último, em wp-config, adicione a constante define('SUNRISE', 'on'); logo após as constantes de multisite.

Visite então Painel da Rede > Configurações > Dommain Mapping. Será exibida a mensagem Domain mapping database table created. Agora devemos fazer a parte que é o ponto chave, que é configurar o Server IP Address que o domain mapping deverá acessar. Preencha o campo Server IP Address com 127.0.0.1 e pronto! Agora você poderá definir domínios completos para os sites adicionais, e não apenas subdomínios!

Agora acesse o painel de controle do site Teste, que neste momento ainda estará rodando em subdomínio ( teste.jobs.dev.br/wp-admin ). Vá em Ferramentas > Domain Mapping e preencha com o endereço final que o o novo site deverá ter:

wordpress_domain_mapping_localhost

Ao salvar, será exibido qual deverá ser o “Primary Domain”, escolha o novo domínio (teste.dev.br):

wordpress_domain_mapping_localhost_2

Depois disso, será preciso, novamente registrar o domínio nos arquivos hosts e http-vhosts.conf:

127.0.0.1	localhost
127.0.0.1	jobs.dev.br
127.0.0.1	teste.jobs.dev.br
127.0.0.1	teste.dev.br
<VirtualHost *:80>
	ServerName localhost
	DocumentRoot "D:\PHP\xampp\htdocs"
</VirtualHost>

<VirtualHost *:80>
	ServerName jobs.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

<VirtualHost *:80>
	ServerName 	teste.jobs.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

<VirtualHost *:80>
	ServerName 	teste.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

Reinicie o apache e “thats a bingo!” Você poderá acessar o seu Multisite em localhost, mas usando o domínio próprio para cada um deles:

wordpress_domain_mapping_frontend

Ainda será possível acessar os sites utilizando o subdomínio, no exemplo teste.jobs.dev.br

5 – Adicionando os novos sites diretamente, sem passar pelos subdomínios

Uma forma mais prática de adicionar novos sites é fazer isso sem precisar configurar os subdomínios. Primeiro, adicione normalmente o novo site pelo Painel da Rede:

wordpress_subdomain_site_direct

Logo em seguida, clique em editar site e troque o endereço com subdomínio para o endereço único desejado, não esquecendo de marcar o “Atualizar siteurl e home também”:
wordpress_domain_mapping_new_url

Depois, adicione normalmente o novo domínio no hosts e no http-vhosts.conf e reinicie o apache:

127.0.0.1	localhost
127.0.0.1	jobs.dev.br
127.0.0.1	teste.jobs.dev.br
127.0.0.1	teste.dev.br
127.0.0.1	lab.dev.br
<VirtualHost *:80>
	ServerName localhost
	DocumentRoot "D:\PHP\xampp\htdocs"
</VirtualHost>

<VirtualHost *:80>
	ServerName jobs.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

<VirtualHost *:80>
	ServerName 	teste.jobs.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

<VirtualHost *:80>
	ServerName 	teste.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

<VirtualHost *:80>
	ServerName 	lab.dev.br
	DocumentRoot "D:\PHP\xampp\htdocs\xampp\sites\jobs"
</VirtualHost>

No Painel da Rede > Configurações > Domains, adicione um novo domínio, utilizando os mesmos blog_id e domain da etapa anterior:

wordpress_domain_mapping_new_domain

E fim, acabou 😀 Agora pode-se ter quantos sites quiser, com qualquer url, em localhost, utilizando uma única instalação do WordPress Multisite:

wordpress_domain_mapping_frontend_2

Conclusão

O único ponto negativo desta abordagem ao meu ver é em relação ao banco de dados, que inevitavelmente se tornará imenso, já que usa um único banco com o padrão $prefix$n$table, onde $prefix é o prefixo definido em wp-config.php, $n é a id do blog/site e $table é o nome de cada tabela(posts, users, etc). Mas como isso será usado apenas para desenvolvimento local, creio que não seja tanto problema assim.

Apesar de ainda ser preciso adicionar manualmente os novos domínios nos arquivos hosts e http-vhosts.conf, a quantidade de trabalho e arquivos locais necessários terá diminuído bastante.

(¹) Nesse post do stackoverflow, existem algumas sugestões para tornar isso possível: http://stackoverflow.com/a/9695861/679195 – eu testei, mas para o caso do Multisite não deu certo.