Pedro Diogo

Olá mais uma vez!

Ultimo artigo! então, prontos para aprender algumas coisas novas?

Já divulguei o tema num post anterior, mas para quem não sabe, vamos hoje criar uma userbar, usando GDLib.

Para isso vamos usar apenas a imagem do fundo, as outras imagens que pretendemos colocar na userbar, e a fonte, a mais usada nas userbars - Visitor TT2 (BRK).

Para criar a userbar vamos seguir os seguintes passos:

1. Criamos uma imagem com o fundo da userbar:

2. Definimos a fonte a usar, as cores, e criamos as imagens que queremos usar, para depois juntar à userbar.

(Aqui usei duas imagens, mas podia ter usado apenas uma, redimensionando-a, mas veremos isso mais à frente)

3. Adicionar o texto, e as outras imagens que queremos que façam parte da userbar, nas respectivas posições:

4. Por fim, adicionamos uma borda preta à volta da nossa userbar, e gravamos a userbar num ficheiro.

Simples não? (Já devem estar fartos de ler isto )

Então vamos lá começar a codar a sério
Vamos então ao primeiro passo:


//Primeiro Passo
$im = imagecreatefromjpeg("imagens/userbar.jpg");
?>


Nada de novo aqui certo ? Passo seguinte:


//Primeiro Passo
$im = imagecreatefromjpeg("imagens/userbar.jpg");
//Segundo Passo
$duck = imagecreatefromgif("imagens/duck.gif");
$bubble1 = imagecreatefromgif("imagens/bubble1.gif");
$bubble2 = imagecreatefromgif("imagens/bubble2.gif");

$preto = imagecolorallocate($im, 0, 0, 0);
$branco = imagecolorallocate($im, 255, 255, 255);

$fonte = 'fontes/visitor.ttf';
?>


Mais uma vez nada de novo… vamos agora às novidades:


//Primeiro Passo
$im = imagecreatefromjpeg("imagens/userbar.jpg");
//Segundo Passo
$duck = imagecreatefromgif("imagens/duck.gif");
$bubble1 = imagecreatefromgif("imagens/bubble1.gif");
$bubble2 = imagecreatefromgif("imagens/bubble2.gif");

$preto = imagecolorallocate($im, 0, 0, 0);
$branco = imagecolorallocate($im, 255, 255, 255);

$fonte = 'fontes/visitor.ttf';
//Terceiro Passo

function drawboldtext($image, $size, $angle, $x_cord, $y_cord, $r, $g, $b, $fontfile, $text)
{
/* Credit to a4W
* http://pt.php.net/manual/en/function.imagettftext.php#58081 */

$color = ImageColorAllocate($image, $r, $g, $b);
$_x = array(1, 0, 1, 0, -1, -1, 1, 0, -1);
$_y = array(0, -1, -1, 0, 0, -1, 1, 1, 1);
for($n=0;$n<=8;$n++)
{
ImageTTFText($image, $size, $angle, $x_cord+$_x[$n], $y_cord+$_y[$n], $color, $fontfile, $text);
}
}

//Escrever o texto, com a respectiva borda
drawboldtext($im,10,0,10,12,0,0,0,$fonte,"I Bath With My Duck");
imagettftext($im,10,0,10,12,$branco,$fonte,"I Bath With My Duck");
//Copiar patos e bolhas para a imagem
imagecopyresampled($im, $duck, 300, 0, 0, 0, imagesx($duck), imagesy($duck), imagesx($duck), imagesy($duck));
imagecopyresampled($im, $bubble1, 250, 3, 0, 0, imagesx($bubble1), imagesy($bubble1), imagesx($bubble1), imagesy($bubble1));
imagecopyresampled($im, $bubble2, 280, 2, 0, 0, imagesx($bubble2), imagesy($bubble2), imagesx($bubble2), imagesy($bubble2));
imagecopyresampled($im, $bubble2, 320, 1, 0, 0, imagesx($bubble2), imagesy($bubble2), imagesx($bubble2), imagesy($bubble2));
imagecopyresampled($im, $bubble1, 332, 3, 0, 0, imagesx($bubble1), imagesy($bubble1), imagesx($bubble1), imagesy($bubble1));
imagecopyresampled($im, $bubble2, 220, 7, 0, 0, imagesx($bubble2), imagesy($bubble2), imagesx($bubble2), imagesy($bubble2));
?>


Temos aqui coisas novas! Usei uma função, com o devido credito ao autor, que cria de uma forma muito grosseira, um bold do texto pretendido. É mesmo este efeito grosseiro que pretendemos
Criei duas vezes o mesmo texto por uma razão: Quero escrever o texto em preto uma vez em bold, para criar uma borda no texto principal, que vai ser branco. Vão poder ver o efeito final depois.

A função imagettftext permite-nos criar texto com TrueType Fonts, criando uma imagem final bem mais bonita. Para isso necessitam ter a fonte em questão numa pasta acessível ao script.

Depois temos uma nova função - imagecopyresampled. Neste caso usámos a função para copiar as imagens do pato e das bolhas para a nossa userbar, mas também pode ser usada para copiar imagens para outra imagem, redimensionando o seu tamanho original. Por isso referi em cima que podia (e devia) ter usado apenas uma imagem .

Vamos ao próximo, e último, passo que isto está quase

//Primeiro Passo
$im = imagecreatefromjpeg("imagens/userbar.jpg");
//Segundo Passo
$duck = imagecreatefromgif("imagens/duck.gif");
$bubble1 = imagecreatefromgif("imagens/bubble1.gif");
$bubble2 = imagecreatefromgif("imagens/bubble2.gif");

$preto = imagecolorallocate($im, 0, 0, 0);
$branco = imagecolorallocate($im, 255, 255, 255);

$fonte = 'fontes/visitor.ttf';
//Terceiro Passo

function drawboldtext($image, $size, $angle, $x_cord, $y_cord, $r, $g, $b, $fontfile, $text)
{
/* Credit to a4W
* http://pt.php.net/manual/en/function.imagettftext.php#58081 */

$color = ImageColorAllocate($image, $r, $g, $b);
$_x = array(1, 0, 1, 0, -1, -1, 1, 0, -1);
$_y = array(0, -1, -1, 0, 0, -1, 1, 1, 1);
for($n=0;$n<=8;$n++)
{
ImageTTFText($image, $size, $angle, $x_cord+$_x[$n], $y_cord+$_y[$n], $color, $fontfile, $text);
}
}

//Escrever o texto, com a respectiva borda
drawboldtext($im,10,0,10,12,0,0,0,$fonte,"I Bath With My Duck");
imagettftext($im,10,0,10,12,$branco,$fonte,"I Bath With My Duck");
//Copiar patos e bolhas para a imagem
imagecopyresampled($im, $duck, 300, 0, 0, 0, imagesx($duck), imagesy($duck), imagesx($duck), imagesy($duck));
imagecopyresampled($im, $bubble1, 250, 3, 0, 0, imagesx($bubble1), imagesy($bubble1), imagesx($bubble1), imagesy($bubble1));
imagecopyresampled($im, $bubble2, 280, 2, 0, 0, imagesx($bubble2), imagesy($bubble2), imagesx($bubble2), imagesy($bubble2));
imagecopyresampled($im, $bubble2, 320, 1, 0, 0, imagesx($bubble2), imagesy($bubble2), imagesx($bubble2), imagesy($bubble2));
imagecopyresampled($im, $bubble1, 332, 3, 0, 0, imagesx($bubble1), imagesy($bubble1), imagesx($bubble1), imagesy($bubble1));
imagecopyresampled($im, $bubble2, 220, 7, 0, 0, imagesx($bubble2), imagesy($bubble2), imagesx($bubble2), imagesy($bubble2));
//Quarto Passo
//Criar uma borda para a userbar
imagerectangle($im,0,0,349,18,$preto);
//Copiar imagem para um ficheiro
imagejpeg($im, "userbar.jpg");
?>


Aqui também temos duas novidades!

Uma delas é a função imagerectangle que usámos para desenhar a borda preta à volta da userbar.

A outra é a possibilidade de gravar-mos a imagem para um ficheiro, bastando apenas acrescentar o nome do ficheiro pretendido noutro argumento.

O resultado final foi este:

Espero que tenham gostado desta pequena (para muitos interminável) Introdução à GDLib com PHP.

Quem tiver gostado dos meus artigos, pode pagar-me uma moeda no puzzle bubble.
Abraços,

Pedro Diogo