hello, loving this blog header!! Please teach me how did you make the colouring isolation this way.
thank you!! below the cut, i'll show you how i made my current blog header!
as far as my headers go, this was on the simpler side! the most important thing for something like this to work is minimal movement, comfortability with using keyframes (only if there's a lot of movement), and if you're going for a more monochromatic look like this, a scene with pre-existing colors that either align with the colors you want to focus on OR colors that can be easily manipulated into the colors you want!
this is my gif sharpened but before any coloring (640px x 360px for header dimensions):
i knew this scene would work well because the psd i use for law & order really emphasizes blues (and turns greens into blues) and because there's minimal movement from mike and the camera itself. once i apply my psd, this is what i have:
now, the header would have been just fine like this, but i really wanted mike to pop (shocking, tumblr user mikelogan wants mike logan to be the main focus). to do this, i decided to use the eyedropper tool (e) to select a blue shade from elsewhere in the gif. i think i picked from the wall right behind his head, but may have adjusted it a bit. create a new layer (ctrl+shift+n) above your coloring layers, equip a soft brush, and set the blending mode of the layer to color. don't be afraid to play around with the blending modes though!
now, what you're gonna do is one of two things. either color the entire canvas or color everything around mike's general outline. because there's minimal movement, i opted to do the former and colored the entire canvas. this is what that looks like:
blue 🩵
lmao anyway, now we're gonna add a layer mask using the highlighted button at the bottom of your layers panel:
as you can see in the above screenshot, i then used a black brush (black removes the layer, white adds it back) to color over mike, thereby removing the blue coloring from him. i liked how the coloring looked over his tie, so that's what that white spot is in the middle at the bottom.
because he doesn't move much, no keyframes were necessary, but in a gif with more motion, they can help a lot. check out the keyframes tag on @gifmakerresource for more info on how to use layer mask keyframes for coloring!
the only other thing left was adding the torn paper edge at the bottom of the header. i've walked through how to do this in other header tutorials here and here!
if you have any additional questions on this tutorial or anything else, just let me know!
how do you make the little banners for your posts.,,., sorry if someone else has already asked this im just wondering because they look really cool
AH thank you so so much!!! i'm so happy you like them ₍₍⚞(˶>ᗜ<˶)⚟⁾⁾
i don't think anyone's asked about this before, but i'd love to share my process! not sure how much detail you wanted, but i went and wrote up a detailed post about how i make them below ⸜(｡˃ ᵕ ˂ )⸝♡ let me know if you have any questions, i'd be happy to help!
how i make my headers!
this is, overall, how i've made a lot of my headers recently - it's not the same for every header, but it's the steps most of them have largely followed hope it's useful :))
step 1: find an image of the character you're going to use for the header!
exactly what kind of image this is will vary for the fandoms / characters i write for - for date everything, i mainly use pngs that i source from the wiki, and for dispatch etc, i mainly use screenshots from the game's cutscenes in addition to pngs. though ideally it's not super pixellated, it doesn't particularly matter what the quality is as long as you're happy with it and you think it works for the header!
for this guide i'm going to use a screenshot of waterboy that i took from a compilation of his scenes on youtube! look at this beautiful man
step 2: import the image into your software!
this should work with any art software you have that allows for both image importing and creating a new work - i edit / draw all my headers in clip studio paint, my main drawing software, though you can use any you like!
i have an illustration with the dimensions set to 1300 x 300 which will form the size of the header (i use the same file for all of my headers, but you can make a new one with each too if you want that). then i import the image into my file and i resize it so that it appears where i'd like it to be positioned on the final image.
this is also the point where i edit out anything i don't want in the image, which mainly involves the background of the screenshot, if there is one. in this case, i basically just erase everything except for the character
it looks very weird but that's okay, because now we can head to...
step 3: background image!
so you have the main image for your character, but now you need a background! i've done a couple different things for header backgrounds - i used to have one image and then edit the colors along with each character, and i've also drawn a number of my headers. recently i've also really loved using photos. i like taking pictures of things and then messing around with them to see what is interesting!
for this header, i'm going to show the photo route! i use a picture of some fast-moving fish i took at an aquarium, and similarly resize it so that it fits where i'd like it to on the canvas (hiding the layer the character is on so that i can see it better). sometimes i also distort the image, blur it, etc - whatever comes to mind
usually, the colors of the image aren't very important (because they'll be changed so i convert the image to grayscale.
then i fiddle with the contrast of the image a bit, using more layers to make it brighter or darker how i want, and here's how it looks at that point, with the character overlaid:
when it comes to backgrounds i draw myself, i usually draw them in grayscale, so i can see the contrast better before i gradient map them
step 4: gradient mapping!
i take the background layer and gradient map it. this is the part where it might depend on what software you have and if it supports gradient mapping or not!
essentially, it takes all the values from darkest to lightest in the image, and i can replace the black and white with any color i want. this is how it looks as the default:
for the colors i use i look a lot on sites like pinterest for inspiration combos and color palettes, as well as presets, and i do whatever looks good to me! then i'll usually replace the darker values with my darkest color, lightest with my lightest, etc, and have other stuff in between. though it's interesting to play around with it and see what comes out of it!
this is what i ended up using for colors, and this is how the background looks with the subsequent gradient mapping:
as you can see, it looks really different! but waterboy still sticks out a lot (fish out of water, one could say.) this brings us to...
step 5: gradient mapping AGAIN!
i duplicate the character layer, then take the gradient map i have, and i use it on the copy of the layer!
now waterboy looks like he fits in too much, so i lower the opacity of the gradient map layer until his colors are just about even between the gradient map and the original screenshot!
step 6: making it look better lol
now comes the time i do a whole bunch of editing, and that kind of depends on what i feel like the image needs in order to look better! for this one i mainly:
changed the colors of the gradient map slightly to make them shift slightly warmer (so that he doesn't look so waxy)
added an additional layer which upped the saturation a bit and heightened the lighting
added additional layers to the background which highlighted the slightly off colors created by the character layer to make them match
added a faint shadow underneath the character layer to make it stand out slightly
with a textured brush, added a couple more highlights to the image so there's more light on the right side other than just behind waterboy's head
merged all the layers and gradient mapped them one more time so the whole thing would be more cohesive
so it looks more like this now! experiment with what you think works for you
step 7: noise and chromatic aberration
basically what it says on the tin: i apply a noise layer, and then i apply chromatic aberration to finish it off! and here's the final result:
then i just colorpick from the final image for the dividers and for the gradient text (which i wrote something about here)!
hope this helps, anon!!!! and thank you so much for asking, this was quite fun to write ٩(^ᗜ^ )و ´-
GUIA COMPLETO DE COMO EDITAR FOTOS EM ALTA QUALIDADE (HQ)!
oiê, bem vindos(as)! à pedidos, estou trazendo um tutorial bem abrangente sobre como editar fotos no geral para icons, headers, etc., em alta qualidade. neste guia/tutorial trarei dicas, truques e informações gerais sobre o que é preciso para editar em hq. lembrando que o conteúdo deste guia é sobre como eu edito, a maneira que funciona comigo e meu progresso e aprendizado ao longo de quase 12 anos editando icons, ou seja, o que contém neste guia pode — e deve — ser adaptado à sua maneira e ao software de sua preferência. aproveitem e se divirtam!
nota: este tutorial está bem longo, então, se possível, veja este guia pelo pc/notebook!
O QUE VOCÊ VAI ENCONTRAR NESTE GUIA
softwares necessários com links para download;
onde e como baixar as fotos para as edits;
métodos de edição e passo a passo;
como melhorar a qualidade de uma foto;
como salvar a foto corretamente para postar;
dicas de actions e outros resources.
clique em “continuar lendo” para ver o tutorial.
1. SOFTWARE
photoshop
eu recomendo fortemente o uso do photoshop cc na versão mais recente, ou outra versão com camera raw ou filtros neurais suportada pelo seu pc ou notebook.
você também pode usar o photopea como alternativa (eu particularmente prefiro o photoshop pois acho que as edits ficam com mais qualidade). se você preferir o photopea, algumas dicas desse guia poderão não funcionar devido à falta de algumas funcionalidades que o photopea não oferece (ex: camera raw, galeria de filtros, filtros neurais e outros).
eu uso a última versão do photoshop (atualmente, a versão 25.5.1) e uso a versão paga (obrigada adobe pelo desconto de estudante!!!!!), mas vou deixar alguns links para você baixar o photoshop gratuitamente caso você não seja estudante e/ou não tenha condições para assinar um plano.
atualmente eu uso um mac mini 2014 para editar, mas sempre usei windows, então, as dicas e os links valem para os dois sistemas operacionais.
links
macos: 1, 2 & 3.
windows: 1, 2, 3 & 4.
2. BAIXANDO AS FOTOS
galerias de fotos
muitos artistas têm fansites com galerias de fotos e você pode achar facilmente digitando no google: “nome da pessoa + gallery”.
o artista que eu quero não tem galeria própria e agora? tranquilo, ainda temos galerias de fotos de famosos variados como hqdiesel, hqsource, hq-pictures e até mesmo o theplace.
em último caso você pode usar o gettyimages e usar um removedor de marca d’água ou um site como o gettyimages downloader.
instagram
para artistas estrangeiros que tenham apenas instagram e/ou não tenham fotos em galerias de imagens, eu recomendo o instagram pessoal da pessoa.
você poderá fazer o download das fotos com extensões de navegadores como o image downloader for instagram (para firefox e google chrome), ou sites como o saveig, o snapinsta ou o igdownloader.
eu recomendo baixar pela extensão do navegador, pois ela baixa a foto direto do site do instagram no computador, diferente dos sites que você precisará ir foto por foto, copiar o link e colar no site para fazer o download.
mas, caso a extensão esteja indisponível, com algum erro ou pare de funcionar, o site é uma excelente alternativa (só precisa ter mais paciência).
nos sites para baixar fotos do instagram, geralmente eles dão a opção para você escolher o tamanho da foto. você deve sempre selecionar a resolução maior da foto (acima de 1000px é o melhor).
pinterest
em casos extremos de artistas low profile, sem instagram, sem aparições públicas, sem galerias de fotos, nadica de nada, eu recorro ao pinterest.
porém, é preciso ter muito cuidado ao fazer download de fotos do pinterest, porque são muitas fotos repetidas e muitas com baixíssima resolução e qualidade.
se você for baixar fotos do pinterest, escolha a foto com maior resolução (imagens maiores que 500px já são ok para editar icons), e depois de baixar a foto, eu recomendo fazer um tratamento na foto para melhorar a qualidade dela, como vou ensinar.
3. EDITANDO
3.1 importando a foto no photoshop
apertando ctrl+o ou cmd+o uma guia vai abrir no programa, onde você vai até a pasta onde a foto foi salva. selecione a foto e clique duas vezes nela para abrir.
3.2 cortando a foto nas dimensões desejadas
muitos tutoriais de edições de icons sugerem que você copie a imagem e cole ela em um documento novo já do tamanho da sua edit, mas eu não recomendo essa opção, pois ao redimensionar a foto com a ferramenta de transformar (ctrl+t), ela dá poucas opções para manter a qualidade da foto e se você não souber o que cada opção faz, poderá perder a qualidade da imagem. então, eu sempre faço o recorte na própria foto para não alterar muito a qualidade dela.
aperte a letra c no teclado para abrir o atalho da ferramenta de corte. (se o seu photoshop for alguma versão do cc, eu recomendo que você marque a opção para usar o modo clássico de corte, assim fica mais fácil e você tem um controle maior sobre a ferramenta!). para fazer essa alteração é simples, vá no ícone de engrenagem, clique e marque a opção “usar modo clássico”.
para fazer icons, você deverá cortá-lo usado dimensões quadradas, ou seja, 1x1, e para headers 15x5. você pode mudar as dimensões na caixinha da ferramenta de corte.
3.3 redimensionando a foto
nessa parte você precisará prestar atenção, pois ao redimensionar a foto, você poderá perder ou ganhar um pouco mais de qualidade na foto, e para isso você usará uma opção chamada reamostrar (ou resample se seu photoshop estiver em inglês). deixe a opção marcada para usar as definições.
3.4 explicando as definições do reamostrar e qual definição usar de acordo com o resultado que você quer
bilinear: a melhor opção para redimensionar gifs, mas para fotos não é tão bom pois dependendo da foto algumas partes ficam nítidas, outras mais suaves e se você for aplicar action de nitidez, pode ficar com um aspecto de “craquelado” com as bordas granuladas, o que eu pessoalmente acho que fica um pouco estranho.
bicúbico mais suave (ampliação): como o nome já diz, ele deixa a foto mais suave, ou seja, os pixels “craquelados” e granulados da foto ficarão mais suaves. é uma ótima opção tanto se você for aplicar actions de nitidez ou actions mais desfocadas e mais suaves.
bicúbico (gradientes suaves): pode parecer a mesma coisa do bicúbico mais suave, mas esta opção além de suavizar a imagem, cria um “desfoque iluminado” nas transições das cores da foto. é a melhor opção para fotos sem muita qualidade e principalmente se você for usar actions suaves e desfocadas, sem muita nitidez.
bicúbico mais nítido (redução): acentua os pixels e as arestas nítidas da foto, ou seja, essa definição redimensiona a imagem mas preserva a nitidez da foto. se você usa actions de nitidez que não tem desfoque nas configurações, essa é a melhor opção de reamostra. (mas cuidado, se sua imagem ficar muito nítida com essa definição, você precisará usar outra opção. caso contrário, quando você aplicar a action, a edit poderá ficar muito exagerada e/ou com aspecto áspero.)
preservar detalhes (ampliação) com redução de ruído: esse em especial é ótimo para quando você precisar redimensionar uma foto para deixá-la maior sem distorcer tanto a imagem. você pode ajustar a redução de ruído para deixar a foto mais suave, sem perder muita qualidade. (obs.: essa opção não deve ser usada para redimensionar imagens muito pequenas, por exemplo de 200x200 para 400x400, ou a imagem vai ficar muito distorcida. ela deve ser usada quando a diferença de pixels não é muito grande, por exemplo, você cortou a foto e ela ficou no tamanho 370x370, aí sim você pode redimensionar para maior sem perder muito da qualidade. então você pode ir ajustando a qualidade com a porcentagem da redução de ruído).
pelo mais próximo (arestas sólidas): essa é uma opção traiçoeira, pois não fica bem em quase nenhuma imagem (a menos que seja um pixel art). essa definição redimensiona a imagem e mantém os pixels nítidos, ou seja, a foto fica menor mas tudo nela que tem aspereza vai prevalecer. é muito usada para redimensionar pixel art, pois preserva as bordas ásperas. pode ocorrer de ficar boa em uma foto aleatória mas não será possível aplicar action, ou a imagem ficará exagerada.
3.5 aplicando a nitidez depois de redimensionar
depois de escolher a foto, baixar, redimensionar de acordo com o estilo da action da sua escolha, está na hora de aplicar.
eu fiz duas versões para mostrar como fica com cada tipo de action:
assim, os dois icons tem uma alta qualidade usando actions diferentes, graças a remostragem ideal para cada tipo de action :)
4. TRATAMENTO DE IMAGEM PARA MELHORAR A QUALIDADE
nesta parte, é muito importante que você tenha baixado uma versão do photoshop com neural filters e/ou com o camera raw, mas caso você não tenha, tudo bem também, vou ensinar como fazer uma melhoria na foto de três jeitos: com camera raw, com neural filters e com desfoques. a melhor forma vai depender de quão ruim está a qualidade da sua foto. em geral, apenas fazendo ajustes no camera raw você já tem um ótimo resultado na maioria das fotos.
camera raw
se seu photoshop tem o filtro do camera raw, ele vai estar em filtro > filtro do camera raw...
tudo que iremos fazer será na aba de “detalhe”, ali você deve dar mais atenção ao ajuste de redução de ruído, pois é ele que vai remover o ruído da imagem e melhorar a qualidade dela.
vá mexendo nas configurações de redução de ruído até que a foto fique mais suave. ajuste também o detalhe e o contraste da redução de ruído.
essa parte será mais no olhômetro mesmo, pois as configurações vão variar de foto para foto, mas eu recomendo muito você mexer também na nitidez para não deixar a foto tão desfocada, mas nada muito intenso para não interferir na action que você irá usar.
eu mexo também na redução de ruído de cores, porque dependendo da foto, algumas cores estarão saturadas ou com muito ruído. só cuidado para não colocar um número muito alto, pois esse ajuste pode tirar a saturação da sua foto e deixá-la apagada.
enfim, aqui está uma comparação da foto original com o tratamento feito com o filtro do camera raw e depois já com a action de nitidez aplicada:
e essas foram as configurações que usei nessa foto em específico:
como eu disse antes, as configurações irão variar de foto para foto, a depender da qualidade de cada uma e de quão ruim a foto está, mas com essa configuração básica, você já vai conseguir melhorar algumas fotos.
neural filters
se a versão do seu photoshop vem com neural filters (ou filtros neurais), ele estará em filtro > neural filters...
irá abrir uma janela com vários filtros mas o que a gente irá usar vai estar em “restauração”, com o nome “remover artefatos jpeg”. se precisar, faça o download do filtro.
eu recomendo usar a intensidade sempre média, a menos que a foto esteja muito ruim, aí você usa a intensidade alta. mas em geral, a intensidade média ou baixa já dá conta do recado.
a saída deve sempre estar na camada atual, ou seja, na camada da foto selecionada.
assim:
e aqui está uma comparação da foto original com o tratamento feito com o neural filter e depois já com a action suave com desfoque aplicada:
a opção do neural filter é uma ótima alternativa ao camera raw, o único contra é que ele deixa a foto com uma textura áspera, e quando você usa uma action de nitidez eles ficam muito visíveis e acaba não ficando muito legal.
porém, um bom jeito de contornar isso é adicionando ruído na foto. eu uso o efeito de granulação do camera raw para adicionar ruído no icon (você também pode adicionar o ruído em filtro > ruído > adicionar ruído..., mas eu prefiro o camera raw pois ele dá mais opções para ajustar o granulado do jeito que eu preferir).
no primeiro icon abaixo, dá para perceber a textura áspera que o neural filter deixa depois de melhorar a foto e adicionar nitidez; já no segundo icon eu mostro como eu adicionei o ruído e contornei esse defeito.
as configurações de ruído que usei no camera raw foi 12 de granulado, 35 de tamanho e 20 de aspereza.
lembrando que, se você for usar uma action de desfoque e/ou remoção de ruído, não será necessário adicionar a granulação, pois a própria action já vai suavizar a textura do neural filter (a menos que você queira adicionar o ruído, claro).
redução de ruído + desfoque
caso a sua versão do photoshop não tenha nenhuma das opções de camera raw ou neural filter, caso você use um photoshop mais antigo, photoshop portable ou prefira usar o photopea, essas alternativas podem ser úteis.
mais uma vez, irei me basear no olhômetro, de acordo com a foto e irei ajustando as configurações de acordo com o que eu quero e acho necessário.
vamos começar com a redução de ruído! ele está em filtro > ruído > reduzir ruído...
na janela de redução de ruídos você verá alguns ajustes que são: intensidade, preservar detalhes, reduzir ruído de cores e tornar detalhes nítidos e vou explicar cada um para que você possa saber ajustar eles de acordo com sua foto:
intensidade: o número de 1 a 10 irá definir a intensidade da luminescência, a intensidade do filtro e o quanto da imagem você quer preservar ou extinguir, sendo 1 o mínimo da intensidade do filtro e 10 o máximo;
preservar detalhes: o número digitado irá definir a porcentagem de detalhes a serem preservados. quanto maior o número, maiores serão os detalhes mantidos na foto, como ruídos, manchas e outras aberrações da foto;
reduzir ruído de cores: o número digitado irá definir a intensidade e reduzir o ruído cromático, ou seja, vai reduzir as aberrações cromáticas, como por exemplo, fotos que distorcem as cores. preste atenção na porcentagem inserida, pois quanto maior o número, menos saturação sua foto terá e poderá ficar com aspecto de foto envelhecida;
tornar detalhes nítidos: o número digitado vai definir a porcentagem de nitidez para restaurar pequenos detalhes da foto. quanto maior a porcentagem, maior vai ser a intensidade dos detalhes da foto. preste atenção na porcentagem inserida, pois se a intensidade da nitidez for muito alto, vai afetar a sua action, seja ela de nitidez ou de desfoque.
sendo assim, para a foto usada eu fiz estes ajustes:
obs.: se você for um usuário mais avançado do photoshop, poderá explorar a opção avançado, que possui as configurações básicas para melhorar a foto e também as configurações para remover ruído das cores primárias (vermelho, amarelo e azul) individualmente. mas, mesmo se você não for um usuário expert, eu recomendo você dar uma olhada nessa opção e explorá-la, mexendo nas configurações e ir ajustando e aprendendo, pois o resultado poderá ficar ainda melhor nos ajustes avançados.
aplicado a redução de ruído, vamos partir para o desfoque! eu estarei usando o desfoque inteligente antes do desfoque de caixa. você vai achá-lo em filtro > desfoque > desfoque inteligente...
na janela que abrirá, você verá os ajustes: raio, limiar, qualidade e modo. vou explicar eles:
raio: vai determinar o tamanho da área que será considerada para o desfoque. quanto maior o número, mais detalhe serão preservados;
limiar: vai determinar a diferença dos pixels entre si antes de serem alterados pelo desfoque.quanto maior o número, maior será a área em que o desfoque será aplicado;
qualidade: vai determinar a qualidade e intensidade do desfoque. ao escolher a opção mais alta, mais partes da foto o desfoque atingirá;
modo: vai determinar o traçado das linhas de bordas que o filtro identificar. o modo normal aqui é o ideal, pois os outros modos “somente arestas” e “sobrepor arestas” irão identificar somente as bordas da imagem.
sendo assim, esses foram os ajustes:
após o desfoque inteligente, partiremos para o desfoque de caixa! ele está em filtro > desfoque > desfoque de caixa...
(você também poderá usar o desfoque gaussiano a depender da foto, mas para esta em questão, o desfoque de caixa funcionou perfeitamente)
a intensidade do desfoque de caixa, assim como do desfoque gaussiano, é medida em pixels e o mínimo é 1 pixel, e para icons é uma intensidade forte, então eu coloco o número mínimo (1, no caso) e depois de clicar em OK e aplicar o desfoque, vou em editar > atenuar desfoque de caixa... e ajusto a porcentagem de acordo com a foto. nessa foto deixei a porcentagem em 33% e ficou ótimo.
no entanto, infelizmente, por não ser o melhor método para melhorar a qualidade de uma imagem, ela ficará um pouco desfocada demais. mas podemos contornar isso usando o filtro alta frequência para devolver um pouco da nitidez e detalhes na foto. você encontrará esse filtro em filtro > outros > alta frequência...
o filtro de alta frequência, assim como os desfoques, é medido através de pixels e quanto maior o número, mais detalhes passarão despercebidos, ou seja, menos detalhes e menos nitidez sua foto terá. eu recomendo em torno de 2px se você quiser mais detalhes e em torno de 5px se você quer mais suavidade.
a primeira vista esse filtro parecerá estranho e distorcido, mas dará tudo certo, você só precisará mudar o modo de mesclagem. para isso vá em editar > atenuar alta frequência e mudar o modo de mesclagem para “sobrepor” ou “luz indireta” se você quiser que fique mais suave. se preferir, poderá também ajustar a opacidade para os detalhes ficarem mais ou menos intensos.
assim:
assim fica o resultado sem o filtro de alta frequência e com o filtro:
sendo assim, fica a seu critério usar o filtro ou não.
aqui está a comparação das fotos com o tratamento de redução de ruído + desfoque com e sem o uso das duas actions:
5. SALVANDO A EDIÇÃO
e chegou a melhor parte: salvar a edição para postar!
seja a edição um icon, uma header, ou qualquer outro gráfico estático (edições não animadas), a melhor opção é sempre, sempre, SEMPRE, salvar no formato PNG!
o formato jpg ou jpeg não preserva a qualidade original como o formato png preserva. então, sempre escolha esse formato ao salvar suas edições estáticas!
a melhor forma de salvar uma edição em alta qualidade é exportando ela. sendo assim, vá em arquivo > exportar > exportar como...
em “configuração de arquivo”, selecione o formato PNG e desmarque a opção “transparência” se sua foto não é uma imagem com fundo transparente; em “tamanho da imagem” deixe como a altura, a largura e a escola como estão, apenas mude a opção em “criar nova amostra” para BICÚBICO AUTOMÁTICO; e em “espaço da cor” marque a opção CONVERTER PARA SRGB, porque assim, independente da calibração do seu monitor, a foto ficará com as cores originais e não sofrerá alteração.
assim:
no entanto, se você tiver um pc ou notebook lento, ou apenas não tiver paciência para salvar sua edit em exportar, você pode salvar no modo normal, indo em arquivo > salvar como... OU arquivo > salvar uma cópia..., no entanto, se você for usar essa opção, não esqueça de marcar a caixinha para “incorporar o perfil de cores srbg”, essa opção geralmente fica na parte de baixo da janela que abre quando você vai salvar a edição.
6. ACTIONS & RESOURCES
para facilitar pra vocês, todos as configurações de filtros usados neste guia, estarão disponíveis para download em uma pasta de action. para fazer o download é só clicar aqui: ★. já a dupla de actions usadas (a de nitidez & a de desfoque suave) estarão disponíveis para download na lista de dicas abaixo.
dicas de actions de nitidez
– premium & gratuitas (free)
lovie potion by @loviestudio [premium]
action #26 by @harupsds [premium]
action #25 by @harupsds [free]
01 action by @harupsds [free]
cherrie by @loviestudio [free]
action #11 by @miniepsds [premium]
face action by @miniepsds [premium]
crispy by @nebulies [free]
scarlett by @l-agallerrie [free]
eight action by @peachcoloring [premium]
bubblegum by @hisources [free]
kendall by @hisources [premium]
hekate by @hisources [premium]
sharpen by @l-agallerrie [free]
#01 action by @buntterflies [free]
dicas de actions “suaves”
– premium & gratuitas (free)
teddy bear by @loviestudio [free]
action ten by @peachcoloring [premium]
caelestis by @miniepsds [premium]
fleuriste by @hisources [free]
angel by @loviestudio [free]
action #13 by @harupsds [premium]
action #12 by @harupsds [premium]
wild action by @hisources [free]
outras actions
– premium & gratuitas (free)
denoise action effect — remove o ruído das fotos sem perder muita qualidade by @loviestudio [premium]
photopea quality action — action para melhorar a qualidade da foto no photopea by @loviestudio [free]
exclusive hq actions — um conjunto com as actions que foram usadas neste tutorial by @girasois, @loviestudio [free]
denoise and sharpen actions — conjunto de actions para melhorar a qualidade da foto automativamente by heavnsent
7. BÔNUS: DICAS EXTRAS
a adobe cc learn tem muitos tutoriais que você pode dar uma olhada e aprender muito mais sobre o photoshop e outros programas da adobe!
o youtube é outra fonte incrível para você aprender edição no photoshop, lá você encontra tutorial para quase tudo de edição de fotos e muito mais! se você entende inglês, eu recomendo muito os canais piximperfect e brendan williams tutorials.
para fonte de inspirações, o tumblr é o lugar certo! se jogue nas tags para se inspirar e nos blogs de photoshop para ver muito mais tutoriais e muito mais resources.
o blog @looksgreat infelizmente não é mais atualizado, mas você ainda pode encontrar muitos tutoriais sobre quase tudo de edição, e o melhor, todos os tutoriais são em português!!
ainda recomendo outros tumblr brasileiros de resources e tutoriais: @miniepsds, @harupsds, @peachcoloring, @gmfioart, @colour-source, @l-agallerrie, @wasirauhlpsds, @hisources, @opulenceps, @sunshinepsds, e @loviestudio; e no deviantart: jungrainsoul, rockjealous, heavnsent, aureangels e rohdossantos.
8. CRÉDITOS E INFORMAÇÕES
crédito colorings
off hearts + whimsy by @miniepsds ♡
informações
antes de tudo eu gostaria de pedir desculpas pelo tamanho deste guia, mas eu quis abranger o máximo de dicas possíveis para vocês e deixar o tutorial super completinho.
em segundo lugar eu gostaria de agradecer todo o carinho de vocês, isso me motiva muito a continuar. obrigada, de coração!
enfim, é isso! minha ask estará sempre aberta para dúvidas, sugestões, pedidos e mensagens fofas (sempre com educação e respeito, claro)!
haiii how do you make the headers for your fics? bc i’m so obsessed and i wanna try them for mine
hi love! so it's pretty simple, i'll find a high quality screenshot of the character i am usually writing about and try to find a good shot that would best describe the fic i am writing about.
let's take this screenshot of jack for example. i will typically capture multiple frames until i find one i like.
so let's say i'm going for a more solemn like fic idea, his facial expression would be great here. now these screenshots are in 2160p so they are perfect for headers.
i'll then zoom in until i find a good position for a header, my headers are set to 540x250 to fit tumblr's photo guidelines, cause shit will get blurry.
here is the frame set to the exact pixels (btw i do this all in photoshop), next comes the fun part! coloring, adjustments and text!
tumblr is a good place to find psds for coloring, their are tons of resource blogs, and you can always go to sites like dafont.com or fontspace.com for fonts to download and use, btw canva is a really good alternative for photoshop.
so after doing some coloring, editing the background, doing some smart sharpening, blurring effects, i'll add my text, in this instance and like most of my other headers i use regular Arial font, capitalized lettering, with about 140% of space between each letter.
i'm not sure if this was entirely helpful but i hope it gives you some inspiration for your headers! don't be afraid to reach out if you have any questions! that goes for anyone! ♡⸜(˶˃ ᵕ ˂˶)⸝♡
theme anon ohh i haven't use that app i will definitely try it! i have tried with Photobea but i still don't have it figure it out , i would love the tutorial if it's okey with you thank you !
oh yeah, photopea took me a bit to get the hang of and i only use it for gifs.
sure! here's a quick tutorial, babes! 💗
first, i go to pinterest and search for gradients
and this is the one i ended up chosing: (bc autumn vibes)
and ofc you can always adjust the color in ibis, pressing on the brush icon, go to filter, then adjust color then hue saturation and lightness.
more under the cut bc this is going to be a bit long
i decided to keep the color, so next i search for clouds on pinterest and end up choosing this pic:
i play around with opacity, blurriness, etc and i get this result:
then i add glitter:
with this brush i made myself
then i add an autumn leaf and duplicate it, playing with the blending modes. in this case the first layer is in soft mode and the second layer in add and i play with the opacity of these as well
(btw, you can search png aesthetic on pinterest and you'll get pretty much anything you could want, but here's the already png i used for this one:
then i add the pic of my choosing. in this case a buddie one. i erase the background until it's just the two of them plus the blending of the header, that you can make yourself too. and wha-la!
(if anyone's gonna use this header, pls credit me in the bio)
anyway, just have fun. mess around with the app until you get something you're satisfied with <333
How are you making the headers for the stories? They are so nice
headers tutorial!!
1. first pick three pictures that have a similar theme. for example i go on pinterest and find a picture from a player i really like and go in the suggested section to see if there are any more pictures from that event or match. for example:
these are all of pedri wearing the same suit so i could use these
2. place your three pictures and turn them into square format. you can do this in your settings or any editing app you have. (i use alight motion) example:
3. once they’re all in square format you can add any coloring you want on them. i used to edit so i use my old coloring but you can go on polarr and apply whatever filter you like! example:
4. afterwards go on whatever app you use to edit and them together. once again i use alight motion.
i also use this picture for reference
it’s from an enzo fic on wattpad unfortunately i don’t remember who the author was but all credits to them for giving me the inspo to do the headers
so the end result should be this:
for the border i usually choose a color that kind of ties in with the all the photos? here it’s a dark gray almost black but i could’ve done a dark green as well or maybe even a dark blue or white.
for the border i usually add rectangles and make them really skinny and simply make them a bit transparent to add the border effect like in the reference pictures
how did you make the color fade and glow for the smiley lamp on your header? if you’re willing to make a tutorial, i’d love to see your process!
I prayed at the shrine of Feral Pran & in a moment of divine generosity, he shone his unhinged light upon me (literally) 🙏
back to business 🤪 I figured out how to create this effect as I went along, but I’m really happy with how it turned out! there are probably plenty of ways to achieve it, but I liked the control this method gave me.
for context, here's the Bad Buddy lamp Nonnie's referring to before we jump into it:
first, I did a Google search for "color change GIF." I used one very similar to this:
I imported the GIF into my header PSD in Photoshop.
I changed the GIF's blending mode to "Lighten".
this is what my GIF looks like now. it's already looking more subtle and glowy, which is our goal!
I moved the GIF over the light, then reduced the size quite a bit.
be sure to actually play the GIF through a couple of times and see if you like how the light is moving. you can always rotate the GIF, resize it, etc. to better achieve the effect you're going for.
now the fun part: make a layer mask and get thee to blending!
make sure you have the GIF layer selected (see screenshot). create a layer mask by clicking on the little square and circle icon (again, screenshot).
blending is a whole other tutorial, so check out a guide on Tumblr or on YT if you're not familiar. there's an art to it- you're literally blending away the GIF/image/whatever by hand- so a lot of it comes down to the effect you're trying to achieve and personal preference.
my advice: use a brush set to 0% hardness, blend away the hard outer edges first, and play around with the opacity (I'd start no higher than 50%). you can always use the eraser tool to bring back anything you blended away too much of.
as a last step, I changed my brush size to a small enough size that I could erase the GIF completely just on the smiley face portion. we want those lines to pop and stay stationary while the rest of the GIF seems to "move" (the glowing effect).
here's what I ended up with:
we're not done yet, though: I wanted the light to look like it was actually fading in and out, so I needed to add a fade transition to the beginning and end of the GIF.
click on the half-white square on the Timeline (see screenshot).
a little pop-up menu will come up- "Fade" is the first option at the top. click and drag on "Fade", releasing over the start of your GIF.
a little incline 'hill' will appear on the GIF layer. you can click and drag on the high point of the 'hill' to make the fade effect longer or shorter.
do the same thing again, but click and drag the Fade effect onto the end of the GIF.
that's pretty much it!
you might have noticed I have two color fade GIF layers on my header (layers 6 and 7, above). I wanted the lamp to have multiple fades- it's just more visually interesting- so I copy-pasted my blended GIF. now, the effect will play twice as the header loops (never said I wasn't extra).
— so i decided to immortalize these brush presets i had lying around into a pack, so that it would be easier to use! These brushes will make jazzing your headers up super easy, and will also be easier to have a definite shape without fucking around with the pen tool for four hours (since i’ve done it for you 😌). please do rb if you plan on using! credit is not necessary, but is nevertheless appreciated.
HERE IS A PREVIEW OF THE BRUSHES BELOW ON AN IMAGE: (click on the image and expand it if you’d like to get a closer look).
the file is linked under the cut and in the source of the post.
If you’d like any other presets, feel free to ask <3.
