hi! quick question... hope it's ok<3 how did you do/where did you find the gif doodles like in your acid rap template?
hiya! i think the doodles from that particular template were from a pack on envato, which is a paid subscription, but here's the good news: i've since found a FREE way to do your own animated doodles in seconds if you own an ipad or an iphone.
there's an app called amberdraw that has animated brushes, which means you can do simple drawings like a lil heart or star and they'll have an animation by default.
these doodles can be exported as videos for free, and then turned into gifs using photoshop/photopea. i choose a black background and a white brush, and then apply it over photos using blending mode > screen.
for reference, here's one i did in literally 20 seconds on my phone:
i hope this helps! i can also do a few pre-made doodle gifs using this tool if that'd make your life easier, so do let me know and i'll throw a pack together.
oi mauve, tudo bom? você sabe se existe algum tutorial sobre como colocar um gif em um template normal (estático)?
oi, mozi! eu fiz um tutorial há um tempo que talvez te ajude, dá uma espiada. o princípio para colocar um gif em qualquer template é o mesmo:
você precisa ter o número de frames (quadros) certo
você precisa saber como copiar e colar os frames
você precisa saber como usar máscaras de recorte
se você já sabe como substituir uma foto por outra em um template, é provável que já saiba como usar as máscaras. meu tutorial ensina como copiar e colar os frames onde você colocaria a imagem. para adaptar um template estático para comportar gifs, o esquema é o seguinte:
1. primeiro, decida quantos frames do gif você quer incluir e qual a duração de cada frame. para efeitos de demonstração, digamos que são 40 frames com a duração de 0,05 segundos em cada.
2. com o template aberto no photoshop, vá em window > timeline (janela > linha do tempo) para abrir o painel de animação.
3. aperte o botão "create frame animation" (criar quadros de animação) que aparece no meio da janela.
4. agora você tem um gif de um frame com delay de 0 segundos. para ajustar a duração, clique na setinha ao lado do frame, selecione "other" (outro), e insira 0,05 segundos como duração. [esse passo também serve para ver a duração dos frames no gif original!]
5. com o seu frame único na duração certa, selecione ele na timeline e aperte o botão que tem um quadrado com um + no meio, e que se chama "duplicate selected frames" (duplicar quadros selecionados). vai apertando até estar com o total de quadros do gif que você planeja usar (no nosso exemplo, seriam 40 quadros).
a partir daqui, é só seguir o passo a passo do meu tutorial original.
vale ressaltar que cada template é diferente. esse passo-a-passo funciona para a esmagadora maioria dos templates que eu já vi mas, dependendo do que você planeja usar, talvez seja preciso uma técnica diferente. se esse método não funcionar pro que você quer, o melhor esquema é chegar na pessoa que criou e perguntar se ela ensina.
oi mauve! tudo bem? eu tenho a vaga impressão de que você já falou disso por aqui (ou não, se não, me perdoa), mas você teria um guia de como colocar música em anexo no post do tumblr daquele jeito que fica a barrinha colorida + um png? eu achei que era só embutindo o link nas funções de post do tumblr, mas ficou enorme kkkkkkkkrying. mesmo se não tiver, agradeço de antemão!!
oi, mozi! eu num lembro de ter falado não, e nem nunca achei tutorial sobre – eu tive que aprender na marra, mas você não precisa.
1. baixe o mp3 que você quer incluir.
meu método favorito é encontrar a música/áudio no youtube, e usar uma ferramenta para baixar mp3 direto no seu navegador. se essa não funcionar para você, é só pesquisar "youtube mp3 downloader" e várias alternativas vão aparecer.
2. corte o áudio.
o tumblr tem uma ferramenta de deteção de copyright automática, e se você baixar e tentar subir o mp3 de uma música direto depois de baixar, vai dar erro toda vez. para evitar isso, eu costumo cortar só um trechinho que gosto da música, ou editar para colocar efeitos. se você quiser só cortar e talvez colocar um fade no começo/fim, essa ferramenta aqui faz o trabalho sem precisar baixar nada. eu também curto colocar um slowed + reverb como alternativa, e essa ferramenta faz isso no seu navegador.
3. crie um novo post.
com a versão editada do áudio salva no seu computador, abra o tumblr e vá em criar um novo post. nas opções de upload de mídia, você vai ver um ícone de fones de ouvido – esse é o que estamos procurando.
4. faça o upload do áudio.
clique no ícone do fone para fazer o upload do mp3 editado. se tiver cortado mais curtinho e/ou editado o suficiente, vai conseguir subir a mídia sem erro algum. se der erro aqui, é porque o filtro de copyright do tumblr está te pegando no pulo.
se seu upload estiver falhando de maneira repetida, é sinal de que o áudio ainda está próximo demais do original, e precisa ser cortado ou editado para que o tumblr não encrenque. volte pra um dos editores e tente novamente.
5. personalize o visual.
uma vez feito o upload do áudio, você vai ter o seguinte na sua tela:
o .png bonitinho você inclui como arte de capa, clicando no "select album art". nos campos de texto (track, artist, album), você pode colocar o que quiser. o de álbum eu costumo deixar em branco, por exemplo. esses campos também aceitam as letrinhas bonitinhas, se quiser frufruzar.
extra (avançado): como adicionar efeitos sonoros.
você já deve ter visto a galera postando áudios que tem música, mas também tem efeitos sonoros, que nem esse exemplo aqui.
para fazer algo assim, primeiro eu procuro e baixo os efeitos que quero usar. você pode achar efeitos sonoros no próprio youtube, pesquisando "walking sound effect", "magic sound effect", ou qualquer outra coisa que quiser. a pesquisa em inglês vai te dar mais resultados.
com o(s) efeito(s) que eu quero usar baixados, eu uso a versão gratuita do veed.io pra editar o áudio no meu navegador. com esse editor você consegue ajustar o timing dos efeitos, o volume, e todos esses detalhes que dão um toque mais polido. eu acho ele bem auto-explicativo, clicando você consegue se virar legal, mas ele é 100% em inglês e eu não conheço alternativas em português. depois de editar o babado, é só exportar em .mp3, e vai estar pronto para o tumblr.
seguindo esse passo-a-passo, você vai ter algo que nem o meu exemplo no topo do post!
can you make a tutorial on how you did the grain / text effect on the first manon gif? 🥹
i'll do you one better, anon: here's an animated texture pack with that grain effect if you prefer frame mode for gif making, and here's a smart object with a grain overlay if you make gifs using timeline mode.
the smart object creator included their own set of instructions in the original post. for using the gif textures, all you'll have to do is:
open the gif on photoshop. go to windows > animation, select all frames, click the hamburger menu on the top right corner of the window, select "copy frames".
go back to whatever tab you want to use it in.
if you're using the texture over a static image, create a frame animation from the animation window – you'll see a big button to do it smack in the middle of it. click the square with a plus at the bottom menu to add new frames until you have as many as the gif texture, then select all the frames.
(if you want to use it on a gif, count the number of frames you have on your gif, go back to the tab with the animated texture, select all the frames again and click the square with the plus until you have the same number of frames as your gif. you might have to delete a few until the numbers match exactly. once the numbers match, re-do the "copy frames" step above, then go back to the gif you want to use it on, and select all of its frames.)
click the same hamburger menu in the animation window, select "paste frames", and pick the "paste over selection" option. the layers will be pasted on top of your image and selected automatically, so just group them from the layers menu by clicking the folder icon at the bottom bar. if you're adjusting position for the layers, make sure to only do so when you have the first frame selected, this way all adjustments will be mirrored across every frame.
once the layers are in a group, select the group and change the blending mode to "color dodge". you can do this by clicking the dropdown on the layers panel where it says "normal" – it'll be in the layers window's top bar. i typically adjust the opacity until i'm happy with how it looks, which you can do by clicking the dropdown with the percentage in the top bar of the layer window, but you can also experiment with different blending modes. some people prefer soft light, for example.
i wrote this super quick because it was the easiest piece and it didn't require me to open photoshop, so sorry for the lack of screenshots. if you can't follow along without them, let me know and i'll come back to this once i have proper time!
i didn't tackle the text effect because that'd require opening photoshop, so pls send another message if you still want it and i'll add it to my to-do.
for this tutorial, we’ll use my template belle as an example. it can be downloaded for free here. don’t forget to leave a like/reblog when downloading!
step 1: check how many frames you need
open the template you want to use in photoshop. in the top bar, click on window > timeline, and scroll to the end of the gif to see how many frames the template has.
in our example, we need 34 frames.
step 2: make/choose your gif with that number in mind
for belle, the gif needs to be at least 143 wide by 215 tall. it’s important to check this for the template you want to use.
for this tutorial, i made this sample gif for us to test together.
save it and open it in photoshop. keep the timeline window open because we’ll need it.
step 3: copy the selected gif
in the timeline, select the number of frames you need. my example has 34 frames, so you can select all of them to test in belle.
with the frames selected and still in the timeline panel, click on this icon here to open the dropdown menu we need. it’s always in the upper right corner, near the last frame.
in the dropdown, choose the option copy frames. now we’ve got the gif ready for ctrl c + ctrl v, but this part works a little differently from what we’re used to.
step 4: paste the selected gif
go back to the template window and select all of its frames in the timeline panel. using the same dropdown from the previous step, now choose the option paste frames.
when you click it, a pop-up will appear asking for the paste method. choose paste over selection and click ok, like this:
done correctly, your result should look like this:
step 5: position the gif
when you paste frames in photoshop, the corresponding gif layers are automatically selected by default.
keep only those layers selected and, with the first frame selected in the timeline, move the layers until they’re centered over the frame.
it’s crucial that the first frame is selected in the timeline to ensure the adjustment applies to all the frames.
if you did everything right, what you have on screen should now look like this:
step 6: place the gif below the frame
with only the gif layers selected, drag them vertically in the layers panel until they’re placed immediately above these two layers:
since my gif is exactly the right size, i don’t even need a clipping mask, but let’s say you want to use a gif with larger dimensions.
step 7: use a clipping mask
with the gif layers still selected, right-click on them in the layers panel. a dropdown will open. the second-to-last option is create clipping mask, and that’s what we’re going to click.
once that’s done, the gif will be neatly cropped to the size and place we need, like this:
if you need to adjust the position, always remember to select all gif layers and only move them while the first frame is selected in the timeline.
you can also resize the gif with the layers selected by going to edit > free transform. note that this adjustment will make the gif lose sharpness, and i don’t recommend it unless you know how to use sharpening actions.
extra: changing the background gif
to change the background, the process is exactly the same, but you’ll need a gif that’s at least 700 wide by 450 tall, and you’ll drag it into the background group in the layers panel. the gif should go below but not inside the background coloring subgroup.
the background group is the first from bottom to top in the layers panel, and you should place the new background gif layers right here:
for the background, you won’t need the clipping mask step.
extra: what if my background gif is smaller than 700px wide?
you can resize the whole template by going to image > image size. change the width of the template to match the gif you want to use, and it will fit just right.
when you resize an image in photoshop, sometimes it leaves a weird 1-pixel border around the edges. what i usually do to avoid that is this:
i add 2 pixels to the target width before resizing. for example, if i want the final result to be 600 pixels wide, i resize to 602 pixels first.
after resizing, i go to image > canvas size in the top menu bar and change the canvas from 602 to 600. this will cut off the weird extra pixels and leave you with a clean final result.
always remember that tumblr’s minimum width is 540 pixels. anything smaller will result in bad quality when posting.
extra: good etiquette
if you’re going to use a premade gif made by someone else, it’s important to remember that not every creator allows their content to be edited. choose gifs from creators who allow edits according to their rules, and pay attention to whether they require credit when using their materials.
many content creators ask for credit when their resources are used because that’s how you compensate them – by promoting their work.
in my rules, credit is required when using my templates. many gif creators have the same rule when it comes to editing gifs, and most are fine with being credited in the post tags, so it doesn’t clutter the content itself.
Maeve, você consegue ensinar como colocar gifs em templates? como o Belle, que tem um gif dentro do quadro, e outro no fundo
como colocar gifs em templates.
para este tutorial, vamos usar meu template belle de exemplo. ele pode ser baixado gratuitamente aqui. não esqueça de deixar seu like/reblog ao baixar!
passo 1: verifique de quantos frames você precisa
abra o template que quer usar no photoshop. na barra do topo, clique em windows > timeline, e vá até o final do gif para ver o número de frames do template.
no nosso exemplo, precisamos de 34 frames.
passo 2: faça ou escolha o seu gif com essa quantidade em mente
no caso do belle, o gif precisa ter pelo menos 143 de largura por 215 de altura. é importante checar isso no template que você quer usar.
para este tutorial, eu fiz esse mini-querido aqui pra gente testar juntes.
salve aí e abra no photoshop. mantenha a janela de timeline aberta, pois vamos precisar dela.
passo 3: copie o gif selecionado
em timeline, selecione o número correspondente de frames. meu exemplo tem 34 frames, então pode selecionar todos para testar no belle.
com os frames selecionados e ainda no menu de timeline, você vai clicar neste icon aqui para abrir o dropdown de opções que precisamos. ele sempre fica no canto superior direito, pertinho do último frame.
no dropdown que abrimos, selecione a opção "copy frames". agora temos o gif pronto pro ctrl c + ctrl v, mas essa parte funciona um pouco diferente do que estamos acostumados.
passo 4: cole o gif selecionado
volte para a janela do template, e selecione todos os frames dele no menu de timeline. usando o mesmo dropdown do passo anterior, agora nós vamos escolher a opção "paste frames".
ao clicar nela, você verá um pop-up para selecionar o "paste method". escolha "paste over selection" e clique ok, assim:
feito isso, seu resultado deve estar assim:
passo 5: posicione o gif
por padrão do photoshop, ao colar os frames no template você terá as camadas correspondentes ao gif selecionadas automaticamente.
mantenha apenas elas selecionadas e, com o primeiro frame selecionado na timeline, mova as camadas até que estejam centralizadas sobre a moldura.
é crucial que o primeiro frame esteja selecionado na timeline, pra garantir que esse ajuste se propague para todos os outros frames.
se você fizer tudo direitinho, agora teremos algo assim na tela.
passo 6: coloque o gif sob a moldura
com apenas as camadas do gif selecionadas, arraste elas verticalmente no menu de layers até que elas estejam imediatamente acima destas duas camadas aqui:
como meu gif é do tamanho certinho, eu nem preciso de clipping mask, mas digamos que você queira usar um gif que tem dimensões maiores que as minhas.
passo 7: use a máscara de corte
com as camadas do gif ainda selecionadas, clique sobre elas com o botão direito do mouse no menu de layers. você vai abrir o dropdown de que precisamos. a penúltima opção se chama "create clipping mask", e é nela que vamos clicar.
feito isso, o gif ficará recortadinho no tamanho e lugar que precisamos, assim:
se precisar ajustar a posição, lembre sempre de selecionar todas as camadas do gif, e de só mexer na posição quando estiver com o primeiro frame selecionado no menu de timeline.
também é possível ajustar o tamanho do gif com as camadas selecionadas, indo em edit > free transform. note que esse ajuste te fará perder a nitidez do gif, e eu não recomendo a menos que você saiba usar sharpening actions.
extra: mudando o gif de fundo
para mudar o fundo, o processo é exatamente o mesmo, mas você vai precisar de um gif que tenha pelo menos 700 de largura por 450 de altura, e vai arrastá-lo para o grupo "background" no menu de layers. o gif deve ficar abaixo mas não dentro do subgrupo background coloring.
o grupo "background" é o primeiro de baixo para cima no menu de layers, e você deve encaixar as camadas do novo gif de fundo bem aqui:
para o background você não precisará do passo da clipping mask.
extra: e se meu gif de fundo for menor que 700px de largura?
você pode redimensionar todo o template em image > image size. mude a largura do template para a do gif que deseja usar, assim vai caber direitinho.
quando você redimensiona uma imagem no photoshop, às vezes ela fica com uma moldura esquisitinha de 1 pixel ao redor. o que eu costumo fazer para evitar é o seguinte:
eu adiciono 2 pixels à dimensão que eu quero antes de fazer essa mudança. por exemplo, se eu quero que meu resultado final sejam 600 pixels de largura, eu redimensiono para 602 pixels.
após redimensionar, eu vou em image > canvas size na barra de menu do topo, e mudo o tamanho da tela de 602 para 600. isso vai cortar os pixels esquisitinhos e me deixar apenas com o resultado bonitão.
lembre sempre que a largura mínima pro tumblr é de 540 pixels. menos que isso te deixará com qualidade ruim na hora de postar.
extra: normas de etiqueta
caso vá usar um gif pronto e feito por outro criador, é importante lembrar que nem todo criador permite que seus conteúdos sejam editados. escolha gifs de criadores que o permitem em suas regras, e se atente à necessidade de creditá-los quando usar seus materiais.
muitos criadores de conteúdo pedem crédito no uso de seus recursos, pois assim você os compensa divulgando o trabalho.
nas minhas regras, o crédito é obrigatório ao usar meus templates. muitos criadores de gif tem a mesma regra no caso de edição dos gifs, e a maioria permite que você os credite nas tags do post, assim não polui o conteúdo em si.
we've all been there. we've all made an edit that we LOVED, only to find out we did not have the faintest idea on what to do for its typography.
i'm here to tell you that you don't have to do the absolute most. you just have to pick the right fonts.
here's my favorite hack when i'm stuck not knowing what to do for the text:
using fonts with ligatures will make your edits look more polished.
what's a ligature?
a glyph that combines the shapes of two (or more) letters into a new form, blending the letters together or rearranging them.
not every font will have ligatures, but the ones that do will make your edits look much more detailed and elaborate, even if you're just plain writing and calling it a day.
you can download a bunch of free fonts with ligatures from this link.
once you have them installed, here's how you enable them:
1. write whatever text you want.
make sure you're using one of the fonts you've just downloaded to test this out.
2. open the character panel (windows > character).
in text editing mode, you'll see this little icon on the top bar.
3. toggle on the ligatures option from the menu.
it's the little "st" icon at the bottom, this is what it looks like.
you can also toggle on the "fi" icon for good measure, it'll enable any optional glyphs too.
once you do, you'll go from plain to fancy without having to do the manual work of adding vector ornaments yourself.
we're not nara smith. you don't have to do it all from scratch.
