#layout tutorial

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.

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

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

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!

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 :)

Video tutorial on how I made my professional style galaxy layout header, featuring Nicholas Hoult. Sidebar/content tutorials will follow. 

Icon

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.

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.