quarta-feira, 19 de abril de 2017

Tutorial: apresentação personalizada

Olá galera!
Tudo bem com vocês?
Vamos aprender a fazer uma apresentação personalizada para a suíte e/ou o clube?
Clique em Mais informações e confira duas opções super fáceis para sua "apre". :)



OPÇÃO 1: CÓDIGO HTML

A primeira opção é usar códigos html. Você precisa apagar sua apresentação, caso tenha alguma, e salvar. Depois disso poderá fazer uma nova sem riscos de ter interferências.


Clique em "Editar" e exclua a frase "Você ainda não escreveu uma apresentação". Agora escolha qual código vai usar:

*Fundo Preto e Letras Sombreadas*

Copie o seguinte código e cole na apresentação, clique em "Salvar":

<p style="margin: 0in 0in 0pt; background-image: none; background-attachment: scroll; background-color: black; font-family: 'Century Gothic'; font-size: 8pt; background-position: 0% 0%; padding: 0px; text-align: center;"> <!--p--><span style="color: rgb(255, 255, 255); text-shadow: 3px 2px 4px rgb(255, 255, 255);"><font size="5"> Fundo preto com letra sombreada </br><br />

Ficará assim:

Clique em "Editar" novamente, ficará assim:

Escreva o que deseja e clique "Salvar".

Pronto! Exemplo:

Você também pode adicionar fotos normalmente. Exemplo:



*Fundo com outras cores e letras*

Para ficar com outras cores e letras (fontes), você usa o mesmo código, porém deve modificar dois detalhes:
1º: Para mudar apenas a cor, troque o nome indicado em negrito no código pela cor que você quer (aqui está "black", você pode trocar por "pink" para o ter um fundo rosa, por exemplo):

<p style="margin: 0in 0in 0pt; background-image: none; background-attachment: scroll; background-color: black; font-family: 'Century Gothic'; font-size: 8pt; background-position: 0% 0%; padding: 0px; text-align: center;"> <!--p--><span style="color: rgb(255, 255, 255); text-shadow: 3px 2px 4px rgb(255, 255, 255);"><font size="5"> Fundo rosa com letra sombreada </br><br />


*Importante: Você deve escrever o nome da cor que deseja o fundo em inglês.
Outras cores: Azul - Blue / Cinza - Gray / Roxo - Purple / Verde - Green / Vermelho - Red / Laranja - Orange / Amarelo - Yellow / Marrom - Brown


2º: Para mudar apenas a letra, troque o nome indicado em negrito no código pela fonte que você quer (aqui está "Century Gothic", você pode trocar por "Comic Sans MS", por exemplo):

<p style="margin: 0in 0in 0pt; background-image: none; background-attachment: scroll; background-color: black; font-family: 'Century Gothic'; font-size: 8pt; background-position: 0% 0%; padding: 0px; text-align: center;"> <!--p--><span style="color: rgb(255, 255, 255); text-shadow: 3px 2px 4px rgb(255, 255, 255);"><font size="5"> Fundo rosa com letra sombreada </br><br />

Outras fontes: Comic Sans MS / Arial / Courier New


Para mudar cor e fonte, troque os dois nomes por aqueles que deseja. ;)

Exemplo com a cor rosa:


Para outros modelos, faça o mesmo processo, trocando apenas os códigos a seguir:

2º MODELO

Código:

 <div style="text-align: center; line-height: 10px">
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-size: 70px"><span style="letter-spacing: -10px; text-shadow: 0px 0px 4px black"><span style="font-family: georgia"><font color="#eb5385">Dr</font><font color="#e05688">op</font><font color="#d4588c">p</font><font color="#c95b8f">i</font><font color="#be5e93">n</font><font color="#b26196">g  </font><font color="#a7639a">y</font><font color="#a7639a">o</font><font color="#9b669d">u</font><font color="#856ca4">r  </font><font color="#856ca4">i</font><font color="#796ea8">P</font><font color="#5777b2">o</font><font color="#407cb9">d</font><font color="#357fbd">;</font></span></span></span><br />
<span style="font-size: 11px; text-shadow: 0px 0px 1px black"><span style="font-family: tahoma">but then having your earphones save its life.<br />
<span style="font-family: bookman old style">[<font color="#eb5385">♥</font>][<font color="#796ea8">♥</font>][<font color="#1387c7">♥</font>]</span></span></span>
<p> </p>
</div>


Ao salvar e clicar em editar novamente, a apresentação ficará como na imagem a seguir, você só precisa editar como quiser.

3º MODELO


Código:

<div>
<div style="font-size: 10pt; margin: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;">
<span style="font-size: 48px;"><span class="Apple-style-span" style="color: black; font-family: 'brush script mt', sans-serif; line-height: 20px;"><strong><span style="letter-spacing: -2pt; text-shadow: black 0px 0px 2px;"><span style="color: #9edfc7;">Y</span><span style="color: #a0d9c9;">o</span><span style="color: #a3d2cc;">u&nbsp;</span><span style="color: #a8c5d1;">k</span><span style="color: #aabfd3;">no</span><span style="color: #acb8d5;">w&nbsp;</span><span style="color: #b1abda;">w</span><span style="color: #b4a5dd;">h</span><span style="color: #bf9ed8;">a</span><span style="color: #c49ed5;">t&nbsp;</span><span style="color: #cd9ece;">i&nbsp;</span><span style="color: #d19ecb;">l</span><span class="Apple-style-span" style="color: #da9ec4;">o</span><span style="color: #dfaab3;">v</span><span style="color: #dfadb0;">e?</span></span></strong></span></span>


<span class="Apple-style-span" style="font-family: arial, sans-serif; line-height: 20px;"><span style="font-size: 20px; letter-spacing: -2pt; text-shadow: black 0px 0px 2px;"><span style="color: #9edfc7;">whe</span><span style="color: #a6c9cf;">n&nbsp;</span><span style="color: #b69edf;">y</span><span style="color: #c09ed8;">ou&nbsp;</span><span style="color: #d59ec9;">re</span><span style="color: #df9ec1;">a</span><span style="color: #dfa8b5;">d&nbsp;</span><span style="color: #dfb2aa;">a q</span><span style="color: #dfbc9e;">uo</span><span style="color: #d7ce9e;">t</span><span style="color: #d2d69e;">e&nbsp;</span><span style="color: #9edfb1;">&amp;</span>

<span style="color: #9edfd7;">completely understand &amp; feel the same way.</span></span></span>



<span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; line-height: 20px;"><span style="font-size: 28px; text-shadow: black 0px 0px 2px;"><span style="color: #9edfc7;">-</span><span style="color: #b69edf;"> </span><span style="color: #df9ec1;">-</span><span style="color: #dfbc9e;"> </span><span style="color: #d7ce9e;"></span><span style="color: #cedf9e;"> </span><span style="color: #9edfa4;">-</span><span style="color: #9edfd7;"> </span><span style="color: #9ea6df;">-</span></span></span>

<div>


4º MODELO


Código:

<div style="line-height: 15px;">
<div>
<p style="letter-spacing: -3px; text-align: center; "><br />
<br />
<br />
 </p>
<p style="text-align: center; "><font class="Apple-style-span" color="#ba55d3"><span class="Apple-style-span" style="font-size: 36px; letter-spacing: -3px;"><font color="#4b0082">Y</font><font color="#550e83">o</font><font color="#5f1b83">u</font><font color="#682984"> </font><font color="#723685">m</font><font color="#7c4485">u</font><font color="#865286">s</font><font color="#8f5f87">t</font><font color="#996d87"> </font><font color="#a37a88">g</font><font color="#ad8888">i</font><font color="#b69589">v</font><font color="#c0a38a">e</font><font color="#cab18a"> </font><font color="#d4be8b">u</font><font color="#ddcc8c">p</font><font color="#e7d98c"> </font><font color="#f0e68c">a</font><font color="#efdf8a"> </font><font color="#edd787">l</font><font color="#ebce84">i</font><font color="#e9c681">f</font><font color="#e6be7f">e</font><font color="#e4b67c"> </font><font color="#e2ae79">y</font><font color="#e0a676">o</font><font color="#de9d73">u</font><font color="#dc9570"> </font><font color="#da8d6d">p</font><font color="#d8856a">l</font><font color="#d57d68">a</font><font color="#d37565">n</font><font color="#d16c62">n</font><font color="#cf645f">e</font><font color="#cd5c5c">d</font></span></font><br />
<strong><span style="font-size:16px;"><span style="color:#696969;"><span style="font-family:segoe script;">in order to  gain the life that is waiting for you     </span><br />
<span style="font-size:12px;"><span style="font-family:segoe script;">                                                                -Pretty Little Liars</span></span></span></span></strong></p>
</div>
</div>


Ao colar o código e salvar a apresentação, aparecerá a mensagem de texto impróprio, como no exemplo. Mas não se preocupe, escreva normalmente o que deseja e salve.



5º MODELO




 <div style="line-height: 15px; border-right: 100px solid transparent;">
<div style="letter-spacing: -3px;">
<p style="text-align: center;"><br />
<br />
<br />
 </p>
<p style="text-align: center;"><font class="Apple-style-span" color="#808080"><span class="Apple-style-span" style="font-size: 36px;"><span style="text-shadow: mediumpurple 0px 0px 3px; "><b><font color="#a83ac9"><font color="#bc8f8f">I</font><font color="#ba8e94">t</font><font color="#b78c99">'</font><font color="#b58a9e">s</font><font color="#b287a4"> </font><font color="#af85a9">n</font><font color="#ac83ae">o</font><font color="#a981b3">t</font><font color="#a77fb8"> </font><font color="#a47dbd">t</font><font color="#a17bc2">h</font><font color="#9e79c7">e</font><font color="#9b76cd"> </font><font color="#9974d2">g</font><font color="#9672d7">o</font><font color="#9370db">o</font><font color="#9a79dd">d</font><font color="#a182e0">b</font><font color="#a78be2">y</font><font color="#ae95e5">e</font><font color="#b59ee7"> </font><font color="#bca7ea">t</font><font color="#c3b0ec">h</font><font color="#c9b9ef">a</font><font color="#d0c2f1">t</font><font color="#d7cbf4"> </font><font color="#ded4f6">h</font><font color="#e5def9">u</font><font color="#ebe7fb">r</font><font color="#f2f0fe">t</font><font color="#f8f8ff">s</font></font></b></span></span></font><br />
<span style="color:#a9a9a9;"><span style="font-size:18px;"><span class="Apple-style-span" style="letter-spacing: normal; "><span style="font-family: 'segoe script'; ">but the flashbacks that follow              <<<</span></span></span></span></p>
<div style="letter-spacing: 0px; text-align: center;">
<div class="controlsStyle" id="textDivBG">
<div class="controlsStyle" id="textDivBG" style="text-align: center;">
 </div>
</div>
</div>
</div>
</div>
      


OPÇÃO 2: WORD


A outra forma de personalizar a apresentação é pelo Word, que é aquele programa que você usa para editar seus trabalhos.

*Importante: com os códigos html não dá para personalizar apresentação de clube, já pelo word dá para fazer na suíte e no clube.

Eu fiz na apresentação de um clube para mostrar que funciona lá também. ;)
Usei o Google Chrome.


Abra uma guia/documento no Word e escolha qual fonte quer usar, além da cor e do tamanho:



Feito isso, digite o texto que você quer na apresentação:



Selecione todo o texto de uma vez:



Com o texto selecionado, clique em um balde (sombreamento), como no exemplo, e escolha a cor que quer para o fundo da apresentação:



Clique na cor e continue com o texto selecionado:



Minimize (diminua) a guia do Word e coloque do lado da parte da apresentação no Stardoll, depois arraste o que está selecionado para o local de editar a apresentação:



Pronto! Se necessário, ajuste a formatação e você pode incluir fotos normalmente:



Clique em "Salvar" e fim!



DICA EXTRA


*Personalizando as fotos da apresentação*

Para diminuir ou aumentar o tamanho das fotos na apresentação você deve acessar sua conta pelo Mozilla Firefox. Vá em editar e carregue as fotos que quer. Depois é só clicar nelas e diminuir ou ampliar o tamanho. Dá para colocá-las lado a lado também. Confiram:


Resultado:


Ufa! Quantas dicas!
Espero ter ajudado um pouquinho vocês. ^^

Você conhece alguma outra forma de personalizar a apresentação?
Compartilha com a gente! ;)
Atualizarei a matéria com os devidos créditos.
Gostaram? Dúvidas? Comente aqui.
Beijos!

9 comentários:

Jaque Kitty disse...

Uau A-D-O-R-E-I!!!! Uma verdadeira aula de personalização e de como utilizar o html ^_^ Gostei principalmente das dicas das imagens, sempre vejo apresentações com as imagens dessa forma e não sabia como fazer. Vou tentar deixar a preguiça de lado e dar uma mudada na minha apresentação ^_^ Obrigada pelo excelente post, beijos =^.^=

Laryssa disse...

Vou fazer isso é muito legal obrigado por postar por mim!

Megan disse...

GENTE, EU MAIS QUE AMEI. Eu A-D-O-R-E-I a do Word porque essa eu não sabia, esses dias eu tava querendo muito mudar a minha apresentação, mas não achava nenhuma que eu queria. Mas você me ajudou muito, arigato gosaimasu pelo maravilhoso post!

Nay Nascimento disse...

De nada meninas! Qualquer dúvida, estou a disposição. ❤

Luisa Galvão disse...

Nossa, adorei, com certeza usarei essas dicas! Obrigada

Saiaka Uchiha disse...

Vlw Nay!!Tava precisando disso haha!

Nay Nascimento disse...

De nada meninas! Boa sorte na hora de personalizar, às vezes dá um trabalhinho! Haha ❤

Helenna M. N. disse...

Adorei as dicas ♥
Aliás, tem outro método de mudar o tamanho das imgs da apresentação pelo Google também...
É assim:

Você coloca a img normal, daí você clica nela, e quando ficar azul, aperta com o botão direto em cima dela, e depois vai em "Inspecionar"...
Quando vc clicar ali, vai abrir uma espécie de janelinha...
Lá você vai encontrar uma moldura coloridinha, escrito "margin", "border" e "padding", e logo abaixo de "padding" vai estar um número, exemplo 250 x 250.
Clica onde está esse número e coloca o tamanho que vc quer que fique na sua apresentação, dai ela vai ficar certinho daquele tamanho...

Não sei se vcs entenderam, se quiserem dps faço um post explicando...

Stardoll PinkVivianny disse...

Uau, quantas dicas! Obrigada, Nay!