Adesivo para unhas (e aula de HTML/Javascript)

E ai moçada, tudo beleza? =)
Hoje a dica é especialmente pras meninas...
Apesar de que a forma que fiz pode interessar aos meninos que desenvolvem sites...(Se é este o seu caso você pode pular mais pro final e depois voltar no gerador pra ver o resultado...rs)
Bom, certo dia encontrei um vídeo na internet, falando que era possível fabricar em casa adesivos para unha.
Consistia em imprimir em um "plástico" de pasta, por isso no começo achei que o vídeo era fake, mas como vi vários do mesmo gênero resolvi arriscar e tentar fazer...
Antes de mostrar como fazer, entenda no que consiste o esse adesivo...

Como você pode ver você passa a base no plástico, depois faz uma camada de cola e só depois imprime, no fim de tudo você passa extra brilho...

O que é necessário para fazer?

1 impressora
1 folha A4
1 pasta L (ou mais, pra fazer mais que uma cartela)
1 base
1 cola branca
1 extra brilho
outros materiais que se usa pra fazer unha, palito, algodão, acetona, lixa, etc...
paciência pra esperar secar...rs

Como fazer(Gerador de Cartelas)

Bom, se você ficou curioso em aprender a fazer esses adesivos pra unha, impressos em impressora normal, anime-se, vou facilitar bastante seu trabalho com o gerador de cartelas que fiz....

Imprimir Unhas Imprimir Molduras(Estêncil)

Primeiro Passo

Clique em Imprimir molduras no gerador acima, insira uma folha A4 na sua impressora e serão imprimidos 90 retângulos(9 linhas de 10 retângulos), cada retângulo deste será uma unha...

Segundo Passo

Depois de ter imprimido essa página com os moldes pros adesivos, você vai pega a pasta L e corta onde ela não é aberta, ficando com duas partes...
Pegue a parte que tem menos cortes. Pois você irá transformar essa metade de pasta em uma "folha A4". Fazer isso é simples, almenos na teoria...rs Você vai pegar essa folha que você usou pra imprimir os moldes, colocar por cima(ou por baixo, como achar mais fácil), e tirar o excesso de plástico em volta da folha...

Dependendo do modelo de pasta você consegue usar as duas metades, eu não consegui, peguei a de trás...

Terceiro Passo

Agora você vai começar a fazer o processo de camadas que eu tinha citado no começo do vídeo...

Você pega a folha de moldes e coloca essa folha de plástico(que você acabou de fazer), sobre a folha de moldes(de papel)... Prenda em uma prancheta, use durex, grampeador, enfim.

Depois você vai ter que tirar tudo isso, ficando só o plástico, então pense bem o que você vai usar pra prender, prenda firme o suficiente pro plástico não escorregar de cima do papel, enquanto você ta passando a base, cola, etc...

Depois de ter colocado o plástico sobre o papel, é simples...

Você preenche cada retângulo, com a base de sua preferência e deixe secar...

Depois você preenche cada retângulo, com uma camada de cola branca e espera secar...

Não faça uma camada de cola muito grossa, à ponto da cola ficar branca no plástico, também não faça muito fina, senão não pega muito a tinta eu acho....

Recomendo usar pincel, pra preencher os retângulos mais facilmente, eu acabei passando cola onde não devia nessa hora e quase estrago o trabalho.

Agora você vai usar novamente meu gerador de cartelas...

Aperte no botão "Escolher arquivos", ou algo assim, pra escolher imagens do seu computador.

Essas imagens serão automaticamente redimensionadas e transformadas em uma unha, que aparecerá com um campo de texto, com o número 10 embaixo...

Esse número será o número de unhas que será feito com aquele desenho...

Depois de escolher todos desenhos e definir o número de cópias de cada, clique em imprimir unhas e abrirá a janela de configuração de impressão do seu navegador... Aí é só você colocar a folha de plástico na sua impressora e mandar imprimir, o lado da cola é onde a tinta vai cair, então coloque o plástico do lado certo! rs

Muito cuidado depois que terminar a impressão, não toque na tinta da impressora... Ela vai demorar um bom tempo pra secar.. Pra terem uma ideia, comigo demorou 5 dias...

Você pode imprimir um desenho no final da tabela só pra você ficar pondo o dedo e "vendo" se secou ou não a tinta, no final você descarta, eu fiz assim... Acho que as impressoras mais novas, à laser, secam mais rápido, ou talvez nem dê certo esse processo, não testei...rsrs

A última parte do processo é finalizar com uma camada de extra brilho...

Quarto Passo (Tá pronto e agora?)

Se você seguiu todas as orientações, fez as camadas seguindo o molde, etc. Basta você ir cutucando os cantos de cada adesivo, até tirar o suficiente pra pegá-lo com a mão, ou com a pinça...
Lembrando que você deve estar com sua unha feita, de preferência da cor branca! Pois as tintas da impressora trabalham com o fundo branco, qualquer cor diferente dessa acabará não exibindo o desenho como se esperava...
Se você não estiver com a unha pintada o adesivo também não cola... Se mesmo com a unha pintada você tiver dificuldade em colar, tente passar uma base e colar antes de secar totalmente, mas não testei essa segunda hipótese...

Depois de colocar o adesivo em sua unha, pra durar mais, dobre pra debaixo da sua unha a ponta que sobrar e lixe, #dicaDaJéssica(minha cobaia nesse experimento)...hahaha
E o resto do adesivo que ficar sobre o dedo você tira com acetona mesmo... Cuidado pra não danificar o desenho e o adesivo, que é elástico, mas ao mesmo tempo é frágil...rs

Finalize passando um brilho ou uma base, veja como você acha que fica melhor...

Pronto!

Você acabou de aprender a como fabricar seus próprios adesivos para unho! ^^

Caso tenha sobrado alguma dúvida você pode assistir o vídeo abaixo, que foi por onde eu aprendi como fazer... Mas você ignora as partes que a moça ensina a fazer o molde pelo Power Point, porque pelo meu gerador é mais fácil... De qualquer forma, se você gostar de fazer do jeito mais difícil pode fazer pelo Power Point também...kkk

Problemas que podem acontecer

Se ao imprimir o molde em papel, não aparecer nenhum retângulo, isso quer dizer que sua impressora não está imprimindo o background dos elementos...

No navegador Firefox, antes de imprimir, você deve ir no menu em Arquivo>Visualizar Impressão>Configurar Página e marcar a opção de imprimir cores e imagens de fundo.

Novos problemas e soluções serão adicionados, conforme pintar as dúvidas nos comentários... ^^

Então em caso de dúvidas, pode comentar! Se fez e deu certo também pode compartilhar sua felicidade conosco...hahaha

Não sei se compensa fazer pra vender, vai depender de quanto custa a tinta de sua impressora. No meu caso eu achei que compensa sim, mas o problema é que não tenho tanto tempo, e fiquei um pouco irritado com o cheiro de esmalte...kkkkkkkkkkkk Mas se você gosta de usar coisas personalizadas, essa é uma boa opção pra você fazer pra você mesma! ^^

Mas o que isso tem haver com HTML, Javascript e CSS afinal?!

Bom, pode parecer simples, mas esse gerador de adesivos usa várias técnicas muito úteis em diversos códigos...

Abaixo destacarei os trechos que acho mais interessante...

Primeiramente descobri que o código CSS abaixo pode configurar as margens da página de impressão, almenos no Google Chrome funcionou...

@page{

margin:0.5cm;

padding:0mm;

border:0mm;

}

Não vejo grandes destaques no resto do CSS. Talvez utilizar a medida cm(centímetros) ou invés de px(pixels), pra ter uma ideia real do que imprimiria. E também o atributo background-size:cover; que faz com que a imagem se ajuste ao tamanho do elemento, sem deixá-lo de cobrir totalmente. Quantas vezes já tive trabalho fazendo uma DIV dentro da outra, configurando overflow, usando javascript, enfim, e agora é possível obter um resultado muito bom, com apenas uma linha de css... Isso é aceito pela maioria de navegadores modernos.

No código javascript, destaco o FileReader. Veja o código abaixo.

function newUnha(){ //essa função é chamada quando o campo de arquivos é alterado

arq=document.getElementById('unhas_input').files; //define que arq é a array de arquivos selecionados pelo usuário

if(arq.length>0){

for(i=0;i<arq.length;i++){

var reader = new FileReader(); //cria um elemento FileReader, capaz de ler a imagem se upload pro seu servidor

reader.onload = function (e) { //quando a imagem for carregada

unha=document.createElement('div'); //criando um elemento div dinamicamente

unha.className='unha';

unha.style.backgroundImage='url('+e.target.result+')'; //e.target.result é o link da imagem carregada

campo=document.createElement('input'); //criando outro elemento, dessa vez input

campo.type='text';

campo.style.width='1.5cm';

campo.value=10;

out=document.createElement('div'); //criando elemento que conterá elementos anteriores

out.className='out_unha';

//quando você cria um elemento com createElement, ele não é colocado automaticamente no documento, você tem que indicar onde ele deve ser colocado

out.appendChild(unha); //indicando que o elemento unha deve ser colocado no elemento out

out.appendChild(document.createElement('br')); //indicando que a tag <br> deve ser colocada no elemento out

out.appendChild(campo); //indicando que o elemento campo deve ser colocado no elemento out

//até aqui o elemento ainda nao está visível na página, pois o elemento out só existe na memória do navegador

document.getElementById('unhas_escolhidas').appendChild(out); //indicando que o elemento out deve ser colocado no elemento unhas_escolhidas

//note que na linha anterior é usado document.getElementById('unhas_escolhidas') isso define que o elemento com id "unhas_escolhidas" será o "pai" do elemento out...

}

reader.readAsDataURL(arq[i]); // cuidado pra não se confundir nesse ponto, o código acima é pra quando a imagem for carregada, mas ela só será carregada se você executar essa linha DEPOIS de definir o que será feito se ela carregar...

}

Pra terminar outra parte do javascript que acabei achando interessante, foi a de escolher o que você quer imprimir e quando a pessoa clicar, imprimir só aquilo, no caso as unhas... Pra isso usamos o código window.open...

var popupWin = window.open('', '_blank', 'width=640,height=480');

popupWin.document.open();

popupWin.document.write('<html><body onload="window.print()">'+nhtml.innerHTML+'</html>');

popupWin.document.close();

E no HTML o que tenho a destacar é o atributo multiple no input file...

Fazendo isso as pessoas poderão selecionar várias fotos de uma vez, sem precisar ficar abrindo e fechando a janela do explorer pra procurar outra foto que estava na mesma pasta da foto anterior... Muita gente acaba não colocando essa função nos formulários de input file por falta de conhecimento mesmo... O que acaba gerando um desconforto muito grande do usuário, principalmente quando ele precisa carregar várias fotos...

E você que pensava que fazer unha era coisa fácil né?rsrs =P

Bom na verdade, depois que você descobre como o código funciona realmente fica fácil...kkkk Mas descobrir para muitos é um problema...^^

Bom, espero ter ajudado, tanto quem procurava um tutorial para adesivos para unha, quanto quem procurava algumas dicas e soluções pra html e javascript... Qualquer dúvida ou sugestão de post, é só escrever nos comentários e tentarei ajudar e/ou fazer um post sobre o assunto... ^^

Valeu moçada, bom feriado pra nóes! eashuiehsaiuehasiuh

Pesquisar este blog

Como Fazer "Certo"