HOME  I  LAYOUTS  I  FANFICTIONS  I  REQUEST SHOP  

Layout Techniques (May 17, 2014)

Edited: February 7, 2017

❊

This tutorial was requested by someone who won the giveaway.>

To be honest, I'm not really versed in layouts since it frustrates me to make them and it really takes me quite a while to make them come out as decent as what I have imagined them to look like.

So that being said, I don't have much to offer up my sleeve but I hope that this will at least be a little bit helpful. In all honesty, layout techniques come with imagination and a lot of playing around so I suggest that you delve more deeper into layout coding to develop those techniques. ^^

P.S.Roy Mustang will be your guide for this tutorial.

Note: If you can't see the image, click on the image for the full size. Codes are available at the bottom.

Step 1

Personally, whenever I make a layout, I need inspiration. It doesn't matter if they are simple or complicated; I just need a basic idea of what the layout should look like.

I recommend searching on Google for ideas or maybe even playing with Photoshop to create something. Here are some examples that I have seen: Example 1, Example 2, Example 3.

Note: credits to the owners of the pictured layouts. I do not own anything of the three mentioned.

Once you're done picking out a layout, it's time to start. For this tutorial, let's try combining all three layouts.

Step 2

Head to 'source' and let's start with the div tags. These are used for the background. Here are some codes if you have not yet learned them:

Padding: indents the paragraph. this adds on to the width restrictions, so keep that in mind.

Text-transform: 'uppercase' makes all the words in that container capitalized while 'lowercase' does the opposite.

Margin: lets you control where the text/picture/etc you want to place them. you can specify by adding a dash and saying 'bottom', 'top', 'left', or 'right'. note that adding a negative sign makes the word go up. example: 'margi