Part 3:
Third times the charm right? Well, welcome back everyone to the third and last lesson on how to make a layout. This may be the last class, but I do have a few more ideas in mind to add on to this, something a bit more detailed about layout making. So don't stop here, but please do keep reading!
*Disclaimer* This is how I make my layouts and is in no way how you have to do it. There are many other tutorials out there and plenty of options to do what you want. I am not forcing you to make a layout nor am I forcing you to do it my way. I am *not* endorsed by any of the sites mentioned. I love each of these and use them because they give me what I want and are very simple to use. :)
Coding your layout
Before you freak out, take a deep breath. HTML coding is not hard! At least DIV coding isn't, a while back I discovered there is more then one way to code a layout two of those is DIV and Table coding. Now I've heard Table coding is excruciating and takes hours, but I have yet to learn Table coding so I shall present to you the simple HTML coding technique that could potentially only take you 30 minutes...With practice of course. Let's get started!
Capt. Obvious coming at you with a knowledge filled statement, in order to code a layout you need to first find a place where you can code your layout. *mind blown* I know it's incredibly awesome. If you perhaps know of an HTML coding website that you can enter your HTML code and view the results then awesome! If not, don't worry. You can ask around or look for one, but if you don't want to I do have one website that you can use, Draac. I have used this and still do, which tells you it works. Plus it's super simple, another bonus!
If you use Draac then you are going to want to expand the box to as big as you can by clicking and dragging the right bottom corner of the tile. If you do use a different HTML coding site then make sure to delete any example code, so that you have a blank space (I've got a blank space baby... and I'll write your name *click*) Sorry, I had to do that.
Now, you are going to put in your first piece of code.
<div style="background: url('DIRECT LINK FOR IMAGE'); width: xxxpx; height: xxxpx;">
All the blue highlighted text needs to be filled in and here is how you do it.
For the direct link; go ahead and head on over to tinypic.com, upload your image and copy the "direct link for layouts" at the bottom of the options of different codes. Just paste it in between the two quote marks and you are good to go on that subject.
Before we get to what you do with the XXX's let me give you a little information on why those are there.
The width and height XXX's are the Pixel measurements for your layout image size. Remember when you re-sized your image to 900 in Ribbet? That's what you need to enter in the first space (the width: XXXpx;) and then other number that you got for the height in the height section.
Press enter and you are ready for your first text box!
<div style= "width: XXXpx; height: XXXpx; overflow: auto; text-align: XXX; margin-top: XXXpx; margin-left: XXXpx; float: left;">
Just like before the XXX's represent the measurements for the width and length in Pixels, this time it's for the boxes not the image. The best route here is just to to 100 x 100 for now and later we can go back in a and adjust to the perfect fit.
The text-align represents how the text will sit in the box. It can be center, left, or right. I usually go with right, but you can also do center or left.
And then we have the margin(s). These margins are the most important as they tell your computer where to put your text boxes on your layout. The margin-top is how far from the top of the photo your text box will be, and the margin-left is how far from the left side it is. Once again this is all measured in Pixels. (:
I recommend starting with 50 for each for right now, and then like before (with the box size) we can adjust as we go on.
Now, note that this code depends on where you are putting your text box. If you are putting it on the right side, you can change the "margin-left" to "margin-right" and change the "float: left" to "float: right". You can choose to have the "margin-top" become "margin-bottom" as well. Of course you can leave it the way it is, but by changing to were your box position should be it will help make the coding easier.
Once you fill that in, press enter again, and start the code to customize your text further:
<font color="black" size="2" face="arial">
The colour can be change to what ever you want, White, blue, orange, ect... If you are looking for a more unique color hue, then you can go here, to Howrse Info's HTML safe colours, and pick one and put the code in. Like #FFFF (which is white by the way.)
The size is the code for the size of your box text (of course). Mostly layouts will have either 1 or 2, but you can do any number you choose. Keep in mind a proper text size is between 1-3, for any bigger is just way to huge. Again another caution; when making your text size 1 it can sometimes make the text show up distorted in some browsers, depending on the font you use. So the safest font size is 2.
The "face" part is the font of your text. I usually just stick with Arial because it is an all around safe font that isn't hard to read, or to fancy. Most people don't really care what font you use but every no and then a fun one is nice. You can go here to view a list of mutual internet save fonts. Find one you like and type it in for arial.
Press enter to form a new line and we can now add our random text. You need to make sure you use a ton to ensure your box is going to scroll properly. here is an example.
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
We can end this section of code with the below. Pasting next to the end of the big mass of text.
</font></div>
Go down one more line and paste this.
</div>
It's time to press the submit button and see where your text box is! Trust me it won't be perfect yet, and you'll have to do quit a bit of tweaking and re-testing before it will be done. But patience is a virtue. When you do get it right it should somewhat look like the below:
Capt. Obvious coming at you with a knowledge filled statement, in order to code a layout you need to first find a place where you can code your layout. *mind blown* I know it's incredibly awesome. If you perhaps know of an HTML coding website that you can enter your HTML code and view the results then awesome! If not, don't worry. You can ask around or look for one, but if you don't want to I do have one website that you can use, Draac. I have used this and still do, which tells you it works. Plus it's super simple, another bonus!
If you use Draac then you are going to want to expand the box to as big as you can by clicking and dragging the right bottom corner of the tile. If you do use a different HTML coding site then make sure to delete any example code, so that you have a blank space (I've got a blank space baby... and I'll write your name *click*) Sorry, I had to do that.
Now, you are going to put in your first piece of code.
<div style="background: url('DIRECT LINK FOR IMAGE'); width: xxxpx; height: xxxpx;">
All the blue highlighted text needs to be filled in and here is how you do it.
For the direct link; go ahead and head on over to tinypic.com, upload your image and copy the "direct link for layouts" at the bottom of the options of different codes. Just paste it in between the two quote marks and you are good to go on that subject.
Before we get to what you do with the XXX's let me give you a little information on why those are there.
The width and height XXX's are the Pixel measurements for your layout image size. Remember when you re-sized your image to 900 in Ribbet? That's what you need to enter in the first space (the width: XXXpx;) and then other number that you got for the height in the height section.
Press enter and you are ready for your first text box!
<div style= "width: XXXpx; height: XXXpx; overflow: auto; text-align: XXX; margin-top: XXXpx; margin-left: XXXpx; float: left;">
Just like before the XXX's represent the measurements for the width and length in Pixels, this time it's for the boxes not the image. The best route here is just to to 100 x 100 for now and later we can go back in a and adjust to the perfect fit.
The text-align represents how the text will sit in the box. It can be center, left, or right. I usually go with right, but you can also do center or left.
And then we have the margin(s). These margins are the most important as they tell your computer where to put your text boxes on your layout. The margin-top is how far from the top of the photo your text box will be, and the margin-left is how far from the left side it is. Once again this is all measured in Pixels. (:
I recommend starting with 50 for each for right now, and then like before (with the box size) we can adjust as we go on.
Now, note that this code depends on where you are putting your text box. If you are putting it on the right side, you can change the "margin-left" to "margin-right" and change the "float: left" to "float: right". You can choose to have the "margin-top" become "margin-bottom" as well. Of course you can leave it the way it is, but by changing to were your box position should be it will help make the coding easier.
Once you fill that in, press enter again, and start the code to customize your text further:
<font color="black" size="2" face="arial">
The colour can be change to what ever you want, White, blue, orange, ect... If you are looking for a more unique color hue, then you can go here, to Howrse Info's HTML safe colours, and pick one and put the code in. Like #FFFF (which is white by the way.)
The size is the code for the size of your box text (of course). Mostly layouts will have either 1 or 2, but you can do any number you choose. Keep in mind a proper text size is between 1-3, for any bigger is just way to huge. Again another caution; when making your text size 1 it can sometimes make the text show up distorted in some browsers, depending on the font you use. So the safest font size is 2.
The "face" part is the font of your text. I usually just stick with Arial because it is an all around safe font that isn't hard to read, or to fancy. Most people don't really care what font you use but every no and then a fun one is nice. You can go here to view a list of mutual internet save fonts. Find one you like and type it in for arial.
Press enter to form a new line and we can now add our random text. You need to make sure you use a ton to ensure your box is going to scroll properly. here is an example.
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
We can end this section of code with the below. Pasting next to the end of the big mass of text.
</font></div>
Go down one more line and paste this.
</div>
It's time to press the submit button and see where your text box is! Trust me it won't be perfect yet, and you'll have to do quit a bit of tweaking and re-testing before it will be done. But patience is a virtue. When you do get it right it should somewhat look like the below:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
A couple tips before you leave:
| It sometimes my be necessary to use negative numbers when adjusting your boxes. It sounds crazy, but when you can no longer go higher or lower without your box not reaching the destined location try putting a - before your numbers, it will most likely help and save you a good few sane minutes. Just remember when dealing with negative numbers, the higher the number, the smaller the distance it will move, and the lower the number, the larger the distance it will move- the opposite of positive numbers. Brought to you by MATH.
| When doing more then two boxes -
It's very simple, copy and paste the code of the most recent box you did and put it on a new line below your last box.
Change some things based on your best estimate to make sure the boxes don't end up on top of each other.
From there tweak the numbers till you get the box where you want it.
| And there's more things you can do too- for instance, in the text box code you can add background color="red" or whatever color and have a background on the text box- you just can't fade it out like we did on the photo editing. :)
| The more time you spend on a layout to get it the way you want the better the result will be. It will also benefit you and/or a customer in the long run. While you don't want to spend a month on one layout, don't force yourself to get it done in one sitting.
With confidence and patience you will soon be ready to paste your layout code into your presentation and start writing in your boxes!
Well, that's it! You now know how to make a layout of your very own, and wasn't way easier then you thought? Thank you for following me through my three part class, make sure to check back for my bonus lessons that will take you deeper into a few subjects on layout making!
If you have any questions or problems with your coding then go to my contacts page for more information. I hope this tutorial was helpful and opened your knowledge of the graphics world. Thank you again for participating.
Good Luck!
_Rose
Comment Form is loading comments...