Home Rules

<a href="/~tuiila"><img src="http://i1206.photobucket.com/albums/bb453/ceehdaikirai/clockwise/graceful.gif" border="0"></a>

Icons IPOD WALLPAPERS General Banners Fake Avatars

Signs Web Resources BACKGROUNDS BLANK BASES Buttons Colour Palettes Placeholders

Tutoriais H eaders Estatísticas

home

A Graceful Box quer te dar as boas vindas a página, é explicar-le como funciona a página, é o que temos a lhe oferecer. A página é composta por gráficos, resources, tutoriais e css.

Mas qual a utilidade de tudo isso? Bom, depende do gráfico. Por exemplo: um banner em branco ajuda aqueles que não conseguem fazer uma boa textura ou mesmo tem preguiça, então nele você escreve o que quiser e pronto.

Todos os gráficos aqui, tem seu ponto de utilidade, porém quem utilizar deve creditar o meu trabalho em sua página.

Bom não tenho mais nada para lhe informar, então boa viagem ao mundo dos gráficos.

Started on: 08 Jan, 2012.

Rules

Essas regras vale para todos os gráficos e resources em geral. Peço o favor de respeita-las para evitarmos problemas futuros, obrigada.

Não copiar.
Não disponibilizar em outra página.
Não esquecer de creditar.
Não editar nenhum gráfico, sem minha autorização.

Icons

Você pode usa-los mas não está liberado edita-los. Portanto e necessário que me peça permissão para edita-los e fique ciente que tenho o direito de dizer não.
Quantidade: 75

Neopets Movies Nature Anime People Other

Neopets

Em Geral

Fadas

Movie

Game of Thrones

UP!

Procurando Nemo

avatar

Alice no País das Maravilhas

Percy Jackson e O Ladrão de Raios

Natures

Flores

Animais

Anime

People

Other

Ferias

Vintage

Ipod Wallpapers

Quantidade: 14

Anime

Neopets

Nature

General Banners

Quantidade: 24

Hiatus

Closed

Moved

Revamp

Fake Avatars

Quantidade: 26

Neopets com animação

Neopets sem animação

Cute

Signs

Quantidade: 15

Closed

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/7-18.png" border="0"></a><a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/6-34.png" border="0"></a>

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/7-18.png" border="0"></a>

Under Construction

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/5-56.png" border="0"></a><a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/2-92.png" border="0"></a>

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/3s.png" border="0"></a>

Hiatus

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/4-75.png" border="0"></a><a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-101.png" border="0"></a>

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/8-7.png" border="0"></a>

Moved

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/3-90.png" border="0"></a><a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/2-94.png" border="0"></a>

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-103.png" border="0"></a>

Revamp

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-105.png" border="0"></a><a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/2-95.png" border="0"></a>

<a href="/~tuiila"><img src="http://i743.photobucket.com/albums/xx77/shikinha_99/3-91.png" border="0"></a>

Web Resources

Quantidade: 321

Algumas imagens estão redimensionadas, arreste-as para seu navegador para ve-las em tamanho normal.

Bullets

Triângulos

Estrelas

Sinais de +

Sinais de -

Bolinhas

Corações

Casas

Up/Down

Down

Up

New/Updated

NEW

Updated

Online/Offline

Online

Offline

Best Viewed In

Fast/Medium/Slow

Counter Bases

Estilo 1º

Estilo 2º

Back

Next

Estatística

Neomail

Open/Closed

Agree/Disagree

BACKGROUND

Quantidade: 41

Como usar? Em baixo de cada imagem está sendo disponibilizado um código, mas onde devo colocar esse código?
Dentro das tags de estilo do seu layout. Essas tags:
<style></style>

Agora, caso queira usa-lo em uma edição de imagem eles já estão recortados da forma correta para se juntar perfeitamente. Então clique com o botão direito do mouse e clique em salvar como, salve e pronto.

Bem simples, não? Não se esqueça de creditar.

Frutas

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/5-73.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/4-93.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/3-94.png");}

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/2-98.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/1-108.png");}

Flocos

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/1-109.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/2-99.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/3-95.png");}

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/4-94.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/5-74.png");}

Natureza

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/6-50.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/5-75.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/4-95.png");}

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/3-96.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/2-100.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/1-110.png");}

Flores

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/5-76.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/4-96.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/3-97.png");}

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/2-101.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/1-111.png");}

Quadrados

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/5-77.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/4-97.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/3-98.png");}

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/2-102.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/1-112.png");}

Paris

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/5-78.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/4-98.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/3-99.png");}

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/2-103.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/1-113.png");}

Bolinhas

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/5-79.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/4-99.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/3-100.png");}

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/2-104.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/1-114.png");}

Basicos

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/Semttulo-2.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/Semttulo4-6.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/Semttulo3-10.png");}

body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/Semttulo2-1.png");}body {background: url("http://i743.photobucket.com/albums/xx77/shikinha_99/Semttulo1-7.png");}

Blank Bases

Quantidade: 28

Se você simplesmente não consegue fazer um bom efeito uma boa borda, você pode usar essas bases onde você pode modificar mas sempre creditando. Alguns já vão até com lugares para colocarem textos, com texturas, outros apenas com edição na cor ou seja mais simples.

Buttons

Banners

Natureza

Neopets

Variados

Buttons

Quantidade: 28

BEST VIEWED IN FIREFOX

BEST VIEWED IN INTERNET EXPLORER

BEST VIEWED IN GOOGLE CHROME

BEST VIEWED IN OPERA

Colour Palettes

Happy Heroes

Maraqua

PlaceHolders

Tutoriais

Colocando Textura Aqui você irá aprender a como colocar uma textura em uma imagem, porque nada mais feio do que uma imagem sem nenhuma edição, não é mesmo ?
Programa Utilizado: PhotoFiltre Studio X.

Fazendo Animações Você vive vendo aquelas imagens, ou buttons animados e não sabe como fazer ? Bom nesse tutorial ensinarei como fazer uma animação em imagem ou texto.
Programa Utilizado: GIF Movie Gear.

Efeito 3D Quer aprender a fazer aquele efeito elevado na sua imagem ou texto? Aqui eu ensinarei passo a passo para você aprender a fazer este efeito.
Programa Utilizado: PhotoFiltre Studio X.

Editando Imagem As imagens devem sempre estar muito bonitas e com uma cor bem editada, nesse tutorial ensinarei vocês a fazer um bom efeito na sua imagem.
Programa Utilizado: GIMP.

Colocando Texturas

Veja abaixo como ficara o efeito na sua imagem:
Antes/Depois

Para começarmos abra o seu programa de edição (Photo Filtre Studio X).

Aperte CTRL+N para abrir um arquivo, selecione Padrão de fundo e clique na pasta para abrir um arquivo. Selecione a sua imagem. E de OK.

Vá no menu superior e clique em Filtro, e selecione PhotoMasque. Na janela que abrirá clique na pasta, veja:

Recomendo essa PetPage para pegar textutas. Que foi de onde eu retirei essa textura: Nienke's Resources
Depois de OK. Pronto você já tem sua textura na sua imagem, mas pode ficar melhor.
Vá em Filtro no menu superior e clique em Nitidez e depois Nitidez novamente, faça isso quantas vezes quiser na imagem acima eu fiz dua vezes.

Se você quiser aquele efeito de bolhas, assim:

Geralmente não funciona da mesma forma que a outra textura. Então eu faço da seguinte forma:
Copie um textura, no site mesmo aperte com o botão direito do mouse e clique copiar imagem, agora vá no PhotoFiltre Studio X e com sua imagem já aberta, aperte CTRL+V. A textura irá cobrir a sua imagem. Então clique com o botão direito do mouse e selecione transformar livremente, coloque no 30 o mínimo ou no que você preferir. Agora aperte W e vá no menu do lado direito e selecione a opacidade 10 ou 20 ou de sua escolha. A que eu usei estava em 20.
Agora você pode mover essa camada até que fique na posição que você prefira. Agora você clica com o botão direito na camada da textura e selecione Juntar com camada anterior. Pronto acabamos a nossa textura.

Espero ter ajudado, voltem sempre.

Fazendo Animações

Acima eu fiz um exemplo de uma animação mas você pode faze-la da forma que quiser. Mas irei ensinar assim primeiro.

Bom comece fazendo sua imagem em um editor qualquer, faça seu texto normalmente. Agora você pega e começa a criar outras camadas com cores mais claras ou mais escuras da cor original da letra, e vá salvando (fica mais facil quando você salva na ordem. Desta forma:

Eu salvei nesta sequencia mas o GIF permite que você possa deletar imagens, move-las então não é tão necessário mas é mais fácil. Bom agora vamos abrir o GIF. Quando abrir clique em Open File.

Abrirá sua pasta de arquivos, arraste o mouse des do ultimo ao primeiro sem soltar quando selecionar todos solte o mouse e clique em abrir.

Abrirá uma janela que e a Preview da Animação com uma animação super rápida, clique no relógio que está no canto direito dessa janela, irá abrir um lugar para você ajeitar a velocidade da sua imagem. Quanto maior o numero mais devagar a animação fica, quanto menor mais rápida.

Em Vermelho: O relógio que você tem que clicar.
Em Roxo: Onde você edita os números da velocidade da animação.
Em Laranja: O botão play e pause, quando sua imagem não estiver se movimentando clique nele para dar play e visualizar a sua animação.

Depois de pronto feche a janela e vá no menu superior e clique em File e depois em Save As, selecione a pasta onde quer salvar e clique em salvar.

Pronto, espero ter ajudado.

Efeito 3D

Veja como ficará o efeito 3D em um texto:

Para começarmos faça seu texto normalmente no PhotoFiltre Studio X, se não sabe como fazer seu texto eu ensino. Bom primeiro aperte CTRL+T escreva o que quiser, escolha a cor do seu texto, e se quiser pode colocar efeitos. Depois de OK para concluir. Agora iremos fazer o Efeito 3D é bem simples. Vá em Filtro no menu superior, depois estilizar e contorno 3D.

Abrirá uma janela nela você seleciona as cores recomendo deixar sempre preto na cor 2 pois aparece mais o efeito. Escolha a largura a opacidade e a posição por preferencia sua. Bom, recomendo que você use fontes grossas, pois aparece mais o efeito. Na imagem que eu fiz acima eu fiz da seguinte forma:

Pronto, espero ter ajudado.

Editando Imagem

Veja abaixo o antes e o depois da imagem:
Antes/Depois

Para começarmos abra sua imagem normalmente no GIMP, para começarmos vá em cores/equilíbrio de cores. E coloque Ciano 60 - Magenta 30 - Amarelo -50:

Agora vá em cores/matriz saturação. Coloque: Matriz: -5 - Luminosidade: 5 - Saturação: 30.

Agora vá em Filtro/Artístico/Ilustração. Coloque: Raio de Máscara: 10 - Porcentagem de preto: 0,100.

Agora você vai novamente em Filtro/Artístico/Brilho Suave. Coloque: Raio de Brilho: 10,00 - Brilho: 0,45 - Acuidade: 0,85.

Pronto, espero ter ajudado.

Headers

Podem modificar da forma que quiserem. Troquem esses: # pelos números que vocês desejam. Esse headers feitos com ajuda do tutorial Lady's CSS.

h# { color: #AC60DF; font: 9pt calibri; text-align: left; text-transform: Capitalize; border-bottom: 4px groove #A0A0FF; letter-spacing: 4pt;}h# { color: #81527D; font: 9pt georgia; text-align: right; text-transform: UPPERCASE; border-right: 4px dotted #BF9BBC; letter-spacing: 5pt;}

h# { color: #7E7E7E; font: 9pt Times New Roman; text-align: center; text-transform: UPPERCASE; border-bottom: 4px double #FF6600; letter-spacing: 5pt; vertical-align: sub;}h# { color: #8A9CA4; font: 4px Times New Roman; text-align: center; text-transform: UPPERCASE; font-size: xx-small; border-left: 4px solid #DA6D68; border-right: 4px solid #DA6D68; letter-spacing: 5pt; font-variant: small-caps;}

h# { color: #7A9470; font: 7px verdana; text-align: center; text-transform: UPPERCASE; font-size: small; border-top: 2px solid #B8DABA; letter-spacing: 5pt;}h# { color: #D6320A; font: 7px verdana; text-align: center; text-transform: UPPERCASE; font-size: small; border-right: 2px dotted #A60000; border-top: 2px dotted #A60000; border-left: 2px dotted #A60000; letter-spacing: 5pt;}

Estatísticas

Quer saber o que tem na página no geral ? Pois bem aqui estarei disponibilizando essa informações.

Antes da atualização do dia 23.01.2012 nós tínhamos 69 gráficos e 135 resources. Os extras só aumentou dois um tutorial e um header.

Sitely

Buttons

<a href="/~tuiila"><img src="http://i.imgur.com/JyXtK.gif" border="0"></a><a href="/~tuiila"><img src="http://i.imgur.com/WDDRY.gif" border="0"></a><a href="/~tuiila"><img src="http://i1220.photobucket.com/albums/dd443/Frueer/gracefulbox.gif" border="0"></a><a href="/~tuiila"><img src="http://i1085.photobucket.com/albums/j429/chosmostic/Button---En8.gif" border="0"></a><a href="/~Tuiila"><img src="http://thirdeyealliance.webs.com/buttonari.gif" border="0"></a><a href="/~tuiila"><img src="http://i1206.photobucket.com/albums/bb453/ceehdaikirai/clockwise/graceful.gif" border="0"></a>

<a href="/~tuiila"><img src="http://i43.tinypic.com/fyhoo7.gif" border="0"></a><a href="/~tuiila"><img src="http://i39.tinypic.com/vwpsoj.gif" border="0"></a>

Listers

Reviews

Afiliados

Sugar Pink

Creditos

Pelas texturas que usei em vários gráficos:

Pelo menu de CSS:

Buttons estão sendo direcionados
até seu devido credito.

Sister Site

Uma página feita pela giulinha_99, trás gráficos de ótima qualidade que te ajudaram a deixar sua página ainda melhor. Visite a página tenho a certeza que vai se encantar como me encantei.