i really dont know how to teach it but ill give ya the basic steps i use to make themes
Choose a character! Im gonna make an example theme for this tutorial, so ill choose riche from witch hat atelier! Then, i normally go search the characters name, along with keywords like ‘png’ ‘transparent’ or ‘render’. If its an obscure character, sometimes going to that fandom’s wiki can help you find renders. For gluttomy, i just had to make them myself unfortunately.
decide on a vibe and theme for your theme! I normally choose a color, and a descriptive word. Im going to choose “blue”, “angelic” “gurokawaii” “spooky” for this one. Then, i search those words with ‘png’ at the end on either Pinterest or tumblr to find png packs with those themes. I also like to search things that relate to the character or the media the character is from. Since the character i chose, riche likes ribbons, im going to search for ribbon pngs as well! I like to get a large variety of pngs so i have a lot of options when i start making my theme.
Once you have all the pngs, start making the banner! You dont have to use all the pngs you got, but its a good start. I make my banners as 2650x1440. I start by placing down the main character png, and then some borders/divider (like these below!) and adjusting the color. I have a big album of resources, so it makes it fairly easy for me.
As of right now, my banner looks like this!
Then, i go ahead and arrange the pngs however. I normally during this process, add outlines to the character png, and the pngs that i think should be highlighted. Make sure that the pngs are all somewhat of a consistent theme and have motifs, other wise it’ll look all over the place! (Unless thats what your going for). While im doing this, i also add outlines and stuff.
Now, to add the frosting, which brings us to our next step!
4. Adjusting opacity, adding effects, and masks! Basically, your just adding texture, and adjusting colors and stuff.
And heres our finished banner!
i pretty much follow this same process for all my layouts and their components. For stuff like dividers however, i do those with divider/border pngs and templates and then add small little character pngs in the corners. For pfps, i get a pfp mask, and choose the pfp i want to use for it, and then adjust the colors.
Have you ever considered making a tutorial on how you do your layouts? They’re so cool and I’d love to learn and see the process!! :D
HAI I hope I can explain shit well, I would insert my actual process but my phone here cannot screen record and if it can then I've got no clue how and I'm not rlly tryna learn (I've also currently lost all my old projects so these are just my two most recent ones) , THIS IS RLLY A WHOLE YAP I DID NOT INTEND TO BE SO COMPLEX WITH IT BUT THAT'S SOMEHOW HOW I'VE ENDED UP..
LAYOUT TUTORIAL
gonna start with my banners here, && probably the most important thing to note here is the fact that I have all my resources already picked out and ready before I even touch my editing app (which is Ibispaint), I already have a vision and idea I am looking to do (and if you need help getting yourself a vision cuz you can't figure one out then I absolutely recommend just looking at other people's layouts and using it for inspiration (of course as long as inspiration is allowed, all mine r so feel free to do it with my acc)), and just the fact I have a lot of these pngs already just ready in my files, when I am scrolling resources I like to just grab some of the most generic basic things I can that I know will fit with a lot of different layouts and that I can continue using in multiple, generally when I'm doing something like this I already have a theme picked out, I was looking to be very simplistic on my ro (purple) theme so when I was looking for pngs I was thinking about what I could do to make it look pretty simple, and that is what I deem that theme to be! My clown (red) layout is probably more straightforward as my main theme here was love & war, I add multiple hearts, as well as swords chains! Themes also important because it helps when you're looking up the keywords on tumblr for resources, like png / pixel / transparent / rentry / resources / f2u , generally speaking I just look up PNG and it works out all well! You can also be more specific or vague depending on what you want, like love png vs heart png, with heart being the more specific one there
Pretty much I just start with a mask, whatever one that decides to be.. this can be quite the difficult part for me as I am extremely picky with them and I need to see how they look before I even can decide.. hopefully you're not like me though and you're a normal person who can pick shit
I add my pngs of the character, and pick places I want them to go, generally speaking I like the characters r everywhere, I luv messy layouts personally, or if you're more simple person then two or even one png works fine too as long as you confiscate it with a few things around it so it doesn't look too empty
Then I like to go and fuck with the background and add png's and shit around there, as well as on occasion I'll just straight up add pictures or anything I generally deem aesthetic to be in the background
Then I like to go and add the pngs that'll be above and on the characters, sometimes they even mix and match my above and below ones just to decide what I think is cuter
After that when I'm all happy with my pngs and actual layout, I go and mess with my grayscale (this is incredibly important for layouts that you have not already color matched everything you're using and therefore need to change the color) you can also always go back and change the grayscale it's a color is not looking how you like it, saturation brightness and ect can be extremely important to how it comes out and I recommend experimenting with it so you can see what I mean
Then afterwards I do my actual coloring, (this step would also be where I insert any overlays so if you're looking to do those do that here, generally speaking with overlays I always do soft light but you can do whatever you want and just like coloring you should experiment with it) generally speaking I just free-ball this, I always have a color idea that I'm thinking of when I'm doing it, and I just add different colors and change transparency and overlay settings and etc, I know there's also other websites that do coloring really well but I just prefer ibispaint cuz that's what I'm used to! And although I always recommend doing things yourself you can look up on websites like Pinterest specific colorings to use, I'm also always willing to show & share my own colorings with anybody
And well BOOM ur done now go upload it or equip it or do whatever TF u want with it really
Okay pfps r way more simple for me, if you're looking for a more complex ones you should probably ask somebody else as pfps are my most simple process , this will be extremely different for these two examples though
first I would get my mask if I have one, and size it however the fuck I feel, more than often I make mine pretty small and then size it up at the end, if not then I'd just insert my png here
if I have a mask this would be where I insert my picture and make sure it fits into the mask (also make sure you copy your picture and save it BEFORE you cut it out) , if I'm not using a mask then I'd transparent my png
if I have a mask then this is where I am using my copy, I go through my png and cut out the part that I want to be 3D I want to say (?) but you can see what I mean on the third picture below, the png goes above the mask and makes it visible and just look better to me! , if I don't have a mask then this is where I'm coloring and overlaying if I do that, and then boom I'm done
If I have a mask then this step is where I grayscale mine
And if I have a mask then this is where I'm coloring and overlaying if I decide to do that and boom I'm done
HIIII!!! I wanted to ask how you make the layout (?) for your picture perfect series.
Hi there <33 Gonna be honest, i’ve been secretly hopping someone would ask just because i had so much fun figuring it out lol
It’s more simple than it looks like tbh. I made a step by step, it's under the cut just because i added images / screenshots as i go so it’s easier to picture what i’m describing. I insist, it's really simple, it just felt like a big wall of text without the images.
I started with taking screenshots of my phone’s photo library UI — in my first try it was a bigger screen shot that i placed the images on, but that was a dumb and over-complicated way of doing it lol
Instead i ended up making one for the top part and the other one for the bottom, to make sure it all stayed white and looked more like a clean slate i just spammed my gallery with white background pictures i downloaded from pinterest :p (of course feel free to use these two if you want this lay out / UI and don't have the same iOS or have android, they're literally just two screen shots lmao)
Next step was downloading the pics from pinterest, i based the organisation on my phones Ui again. It has a grid that is 3 pictures wide, and when i adjusted it to be the size of a full screen shot it had 4 columns; so i made sure to have 12 pictures for every character. // I'm pretty sure you can change the 3x4 grid proportion in the actual photo library app if you want to, so it wouldn't be unbeliveable if you wanted to make your smau look different, this is just the standard grid on iPhone.
The issue with having this many pictures is that tumblr can be a pain in the ass with uploading and placing them (+ i belive multiple of them cut weird on my first try), so i went into Picsart* (although im pretty sure you can do this in any basic image editing app on your phone/tablet) and chose the collage option.
*All of this can fully and absolutely be done in their free tier
I chose the 3x1 layout (aka the collage pictured above lol). To get the images to stay in a square ratio. To reach from side to side of the screen without sacrificing quality/readability, i changed the general ratio to the “X header” option. The rest of banners/headers also work for the collage to reach from side to side, but don’t always keep the images in perfect squares.
I’ve used this option for making fic headers and similar stuff before, and for those i usually forgo having any visible borders (you simply slide the borders meter to 0 lol). In this case i noticed the UI does have thin borders between the images + it makes it look more integrated in the post itself. So, for the thin little border, i figured out 10pxl is enough.
From there i just layered the 4 headers in a tumblr draft however they looked best, tbh. You should have 6 banner-style images total as the ed product; the opener with “library” and the date on it, four rows of three pics each, and the last layer with the menu buttons.
This is something more based on personal tastes, but as a tip: Given that everything was image-based and there was a lot of info on screen already, i also used the library and menu pictures as a divider for my title / text from the post itself instead of my usual, blog-themed ones.
And that was it!! Don’t think there’s anything left to explain, but if i’ve missed something do let me know and i’ll gladly say how i did it!!!
Again, thank you for asking because i felt really proud of the layout when i figured it out lol and making a mini tutorial was really fun too!! If you ever go for it and make your own versions, i'd love to be tagged to see them :D Much love <33
TUTORIAL - Como fazer um Cronograma do zero com o Google Planilhas
Oi, tudo bom? Estava há um tempo com vontade de fazer alguns tutoriais e textinhos para auxiliar você, capista e cronomaker, a melhorar (ou pelo menos mostrar como costumo trabalhar). De primeira mão, estou fazendo aqui um tutorial de Como Fazer um Cronograma do Zero! Caso vocês façam um crono com ajuda de meu tutorial, não deixem de me marcar ao postar aqui no Tumblr para eu ver e dar amor! Qualquer dúvida, sintam-se livres para me chamar no chat ou mandar uma Ask, vou tentar sempre responder! O modelo desse Cronograma do tutorial estará disponível para vocês verem o resultado lá no fim do post!
0. Rascunho
Antes de eu fazer um cronograma, eu sempre faço um rascunho de que funções e abas ele deve ter para eu me organizar. “Se esse cronograma vai ser mostrado para os meu seguidores, como ele deve ser?” “O que a pessoa precisa para encontrar seu próprio pedido e entender em que fase do andamento ele está?” “Se o meu projeto tem uma equipe grande e muitos pedidos, o que preciso para organizar isso tudo?”. Respondendo essas perguntinhas, eu anoto (mentalmente) mais ou menos assim:
Espaço 1 (o que deve conter nele)
Espaço 2 (o que deve conter nele)
Espaço (o que deve conter nele)
Exemplo:
Menu (Espaço para “Sobre” e para 4 links de contato)
Design (título da fanfic, user de quem pediu, prazo, legenda de projeto e status do pedido)
Escrita (título da fanfic, prazo para postar, casal, legenda de projeto e status da fanfic)
Com isso em mente, você deve encaixar todas essas funções em um cronograma como se fosse um quebra-cabeças antes de passar pro papel. Costuma ajudar bastante.
#DICA: Boas referências sempre ajudam! Mas não copie o trabalho do colega, seja crítico e estude o cronograma alheio. Veja o que gosta, o que não gosta, tente pensar o porquê das coisas estarem posicionadas daquele jeito. “Por que será que elu colocou o menu ali? Será que fica mais prático assim?” “Esse banner está muito grande, acho que os meus eu farei menores” “Gostei de como ela usou as linhas, acho que farei assim no meu cronograma!”. Não faça ctrl+c ctrl+v, analise o design alheio, pegue o que gostou e faça do seu jeitinho! E às vezes nem precisa ser um cronograma, você pode se inspirar em uma capa de fanfic, um style, um alimento... Nesse tutorial, o cronograma é inspirado pelo símbolo do Yin Yang!
#DICA: Não descarte suas ideias de cara, sempre tente inovar! Geralmente para eu chegar ao modelo final, eu faço dois ou três modelos diferentes só testando as possibilidades com as ideias que tive. Essas também eu tento sempre fazer um “jogo do contrário”: se em um cronograma o espaço para pedidos ficou da direita, no próximo que eu fizer eu jogo para a esquerda. Se nesse eu usei muita linha pontilhada, no próximo usarei linhas grossas. São detalhes bobos como esse que podem te ajudar a sair do lugar comum.
1. A base
Agora que você tem tudo definido, vamos passar para o Google Planilhas! Essas são as funções básicas do site nas barras de ferramentas:
Com isso, vamos fazer esse cronograma!
Eu costumo começar pela cor do plano de fundo. Eu seleciono todas as células e pinto com a cor que eu gostaria que o cronograma tivesse. Dessa vez irei usar branco mesmo, mas eu costumo usar tons de cinza ou cores pastéis/acinzentadas para não doer a vista quando for usar o crono.
Depois, vá na aba “Ver” e em “Linhas de Grade” para automaticamente tirar todas as linhas da planilha e você poder trabalhar livremente.
Demarque as áreas que você vai usar no cronograma pintando as bordas dele com a Ferramenta Borda. Pode ser usando a borda preta simples mesmo, não precisa ser do jeito que ficará no final, é apenas para posicionar tudo o que você listou no rascunho.
Ajeite o tamanho das linhas e colunas para dar forma ao seu cronograma. Escreva alguns textos de teste para medir o tamanho que você precisará para cada segmento e ajuste selecionando a coluna/linha ao clicar no número/letra dela e arrastando sua lateral. Você também pode fazer isso clicando no botão direito do mouse e usando a opção “redimensionar coluna”.
Para áreas onde você vai escrever um texto longo (ex.: regras, bio, avisos), utilize o site Lipsum para que ele gere um texto aleatório do tamanho que você precisar só para teste. Então selecione a área que você precisa (clique numa célula e segure o Shift para clicar na outra borda até formar a área que precisa) e use a ferramenta Mesclar Células, que transforma várias células em uma grandona que cabe seus textos. Você pode fazer o mesmo com títulos que sejam muito grandes!
#DICA: sempre tente alinhar as áreas do seu cronograma e deixe as áreas com a mesma função próximas umas das outras, isso torna ele muito mais bonito visualmente e prático de usar. Também, lembre-se que o sentido de leitura das pessoas é da esquerda para a direita, então deixe à esquerda as áreas mais importantes ou as que você quer dar mais destaque, pois é o lugar onde vão olhar primeiro.
#DICA: deixe o tamanho das linhas e colunas iguais para cada função para que o design se torne mais harmônico (desde que essa seja sua intenção). Também, lembre de mudar o tamanho de TODAS as linhas do seu cronograma para um padronizado fixo (recomendo de 20 a 25 pixels) pois, caso você use um banner, ele não ficará com borda branca quando você escrever algo porque a linha estará fixa! Veja um exemplo abaixo:
2. Fontes e Paletas de Cor
Tá aí uma parte que todo o mundo se embanana (inclusive eu) na hora de fazer um cronograma: Cor e Tipografia. Não sou muito boa explicando as teorias em si, por isso, irei deixar essa pasta do Pinterest sobre Psicologia das Cores e esse guia sobre Tipografia (parte 02, parte 03), pois acho que como base pode te ajudar bastante.
Para as paletas de cores, eu geralmente uso o Pinterest para pesquisar as paletas e o Coolors para pegar os hexcodes (é aquele código de números e letras que representam uma cor). Caso o banner seja uma parte de destaque no seu cronograma, faça seu banner primeiro e depois passe as cores dele pro Cronograma. Essa também é a hora de você mudar as linhas do seu cronograma, mas não há uma regra muito específica para isso. Só tente fazer as separações das informações de forma mais destacada e precisa, onde a pessoa consiga ler as linhas sem se perder com as informações.
Acho que não há muito mistério de como colorir e mudar as fontes de seu cronograma, por isso, essa parte conterá uma lista de #Dicas do que pode tornar seu design mais atrativo. Siga-as se quiser:
Use NO MÁXIMO 3 fontes em seu Design. Recomendo que seja 1 para os títulos e 1 para os textos, desde que a para textos seja LEGÍVEL. Tente usar só fontes Serifadas e Sem Serifas para essa parte pois elas são muito mais fáceis de ler que uma caligráfica (que você pode usar para os títulos).
Sei que vocês gostam de conceito clean e cores pastéis, mas POR FAVOR CUIDADO PARA NÃO COLOCAR TUDO MEGA CLARO NO CRONOGRAMA. Se não a gente não lê nada né? Também não coloque as fontes muito pequenas, pense nos amigos míopes de plantão.
Cuidado também com as cores vibrantes de mais! Tente sempre as puxar um pouco mais para o cinza, cores muito abertas doem os olhos de quem lê e atrapalha a visualização.
CORES PARA AS LEGENDAS: por favor, faça-as uma diferente da outra, mesmo que você esteja usando uma paleta monocromática. É importante que quem esteja consultando seu crono saiba diferenciar o status do pedido dela, por exemplo.
Algo que ajuda muito no cronograma se tornar intuitivo é cada área ter sua cor específica, mas seguindo a paleta de cores geral que você escolheu. Nesse que fiz, a área do Design é Branca e a de Escrita é preta, e isso se repete até nas legendas.
No fim, nosso Cronograma ficou coloridinho assim:
3. Banner
Bem, você deve ter se perguntado o que é essa área cinza logo abaixo do “@USERAQUI”, certo? Esse lugar é onde ficará o banner do cronograma, coisa que costumo demarcar já na base caso ele seja algo realmente importante para o design. Eu não tenho como ensinar a fazer um banner do zero porque isso vai do gosto e do estilo de design de cada um. Porém, eu tenho como ensinar como colocar um banner dentro da planilha.
Para que você pegue o tamanho exato do banner, recomendo que você printe seu cronograma com o zoom da tela e da planilha no 100% (para não haver alteração na dimensão). Caso a área seja grande de mais e fique cortada, tire vários prints até ter a área completa e você poder ajustar uma imagem ao lado da outra.
Dito isso, abra o seu print no Photoshop. Agora é só ir na Ferramenta Corte Demarcado, demarcar o mais exato possível a área que irá ocupar o seu banner e clicar em “Confirmar operação de corte atual”, vulgo “ok”.
Agora, sem mudar o tamanho dessa área que você recortou, faça o banner em cima dessa dimensão! Isso vai garantir que ele continuará com uma boa qualidade quando for colocar no Cronograma. Uma outra dica é usar a opção do Photoshop “Salvar Para Web” para salvar seu banner em PNG-24 com uma boa qualidade:
De volta para sua planilha, selecione a área que você usará para seu banner e utilize a ferramenta Mesclar Células para que a célula fique do tamanho que você fez o banner. Ainda com essa área selecionada, vá em Inserir > Imagem > Imagem na célula / Imagem sobre as células. Nesse cronograma eu irei usar “Imagem na célula” e depois disso é só selecionar o arquivo do seu banner. Ah, é bom lembrar de pintar a área do banner com a mesma cor do fundo, já que a marcação não vai nos servir mais.
Qual o melhor uso da Inserção de Imagem?
Imagem na célula - Imagem com dimensão exatamente igual da célula a qual você quer inserir. A imagem automaticamente ficará alinhada com as demais células.
Imagem sobre as células - Imagem com qualquer dimensão, já que você pode ajustar isso na hora. A imagem pode ficar alinhada com as demais células, mas não é automático.
Resultado final:
live preview
Caso use esse cronograma para você ou como inspiração, NÃO RETIRE MEUS CRÉDITOS! Para fazer o download do modelo, é só ir em Arquivo>Fazer uma cópia.
Bem, se você chegou até aqui: PARABÉNS, VOCÊ FEZ UM CRONOGRAMA! Ah, que orgulho!
Espero que tenham gostado desse tutorial! Caso ainda sinta alguma dúvida, não deixe de me mandar um ask ou me chamar no pv aqui do Tumblr que eu irei tentar ajudar, ok? Beijinhos e bebam água, cronomakers ~
For Gobelins’ entering contest, one of the request is background skills, and the ability, with a pen, to visualize yourself in a 3D space.
So I gaved myself an exercice than can be similar to what you can have during the contest, and which are the steps I’m going through :
Here is a background concept done by Armand Serrano, for the movie Lilo and Stitch.
Let’s put the following consign : try to draw the “against field” of this place (it mean, as in cinema, shooting in the opposite direction to another shot)
For this, we must be aware to :
- Place our virtual camera correctly
- respect perspective rules
-placing correctly our objects in the space (what does make the “link” between the two shots)
- Keep a cool composition
-respect the design
-use our imagination to field the empty space
So, let’s do this !
1. Making a Map and a good thumbnail
-It’s a good exercise to try put everything in a map, including the camera (CAM1) and visualize what we know and what we have to imagine ; not very easy, but it’s making win a lot of time for after !
- Then I just had to place the other camera (CAM2) on the other side, and begin to think about what would be in the room on the other side.
- When I did the map, I was working in the same time with a thumbnail of my scene (note : thumbnail is a very small drawing. Good to remember : small drawings for big ideas ! ) ; like this I could think about having a cool composition and match with the background in the same time. That’s why (as you might see) I decided to tilt a bit my CAM2, because I felt it more interesting for the composition.
2. Ruff drawing
- So here begin the interesting part :) it’s importent to begin by placing the horizon line, the vanishing points (in this case, two) and a perspective grid, all of this being sure it’s mathching with your thumbnail.
-Then, I built every objects, being sure it’s on the perspective, and puting all my ideas.
note : I was always thinking : this is a place where people are living, we have to FEEL It. It’s passing by using the props and the randomness of their position to suggest this idea.
3. Line Up
- On this part I was always trying to be careful about keeping the style of the artist, about props design, and the way of working the line.
4. (Bonus) Shadows
- Personnaly, I wanted to try making she shadows on a traditionnal way, as they where doing before at Disney. For this I first scanned my drawing (to have a backup in case), then I used carbon powder, I was putting stronger at some places, using an eraser to have my lights, and my pencil to go into the detail in the lighting.
-It’s important, when doing lighting, to know where the light come from, and what you want to show. Contrast is the master word ; with the light and shadow, you can choose to show more one thing than an other (for example, I chosen to show less the left part, and put on the light the right part)
My drawing could be better, about the choice of props and the angle, but I hope this tutorial helped you to see better the process to draw an “against field” from an existing layout, hope you enjoyed :)
1. Open Photoshop and create a new file (Ctrl + N). Width and height should be 240 pixels and the background should be transparent then click on OK.
2. Open a new file (Ctrl + O) and choose a picture for your icon.
3. Drag the picture to the base (?) and adjust the photo by using the move tool (v) and/or the transformation tool (Ctrl + T) while pressing the Shift key.
4. Go to Filter then Topaz Clean (it’s a photoshop plug-in). Then adjust the edges to the following: Accent; 1, Radius; 1.71, Sharpness; 0.10 then click on OK.
5. Open a new file and choose a PSD (i got this psd from tumblr) then drag the folder to the icon.
6. Right click on any layer then click on ‘Flatten Image’. Save your image (Ctrl + S) as PNG.
The same for the header. Only the header size is either width; 500, height; 167 or width; 600, height; 200, or 1500 x 500
You need to know basic HTML to use this layout. I posted the coding but the colors and background are all things you'll want to change.
I made this layout from scratch. If you have questions just ask.
Step 1.) First you need to hide a lot of stuff and add the base font editing, etc. So add this code to your Who I'd Like to Meet: Pastebin
(In this code, you will find the box where I had my music and a small image. I left these in the coding so you can find them. Press ctrl+f on your keyboard and search 'music:' and you will find where to paste things for them to be inside the box.)
Step 2.) Then you need to do the banner part of it. Be as creative as you want. Mine kind of happened on accident. The size is 800px wide and 300px tall.
Then you add the banner to your profile using this code. Paste it in your heroes section. Pastebin
NOTE: If the codes still hide any text, place ALL of the code in your heroes section. There are certain codes somewhere in the layout that initially hid anything pasted below the coding and I'm not sure where they are.
NOTE #2: To learn how to use the music player I used, check out our tutorial here.
