To do this the majority of the work would be in an image editing program such as GIMP, which I will assume you have downloaded for the purpose of my response. I'll try to break this into easy steps. It is worth noting my way of accomplishing this may be different than how the original guide creator did it, so if you want an exact 100% match you should ask the guide creator via PM for the BBCode.
1. Screenshot pictures from the League client, or Mobafire, of all the runes you want to include.
Upload all images to IMGUR, or a similar site.
2. Coding
For the purpose of demonstrating the code, I took screenshots directly from your post for the images. I do not advocate taking screenshots of peoples guides for images in general, as it is stealing to do so without permission.
The final product will look exactly like your post if you take the time to crop/erase everything except the rune picture, as the black background automatically generated by your guide will will up the empty space between the images.
Raw Code
What The Code Looks Like
Basically you can copy this code into your guide and replace the image links with your own. You can also play with the column sizes to leave more or less room for your explanation, depending on your preference. I repeated the same images over and over in mine because I am too lazy to upload 12 images and link them all.
Hope this helped. If you have any more questions, quote part of this response and reply on this post! Good luck with your guide and on the Rift!
1. Screenshot pictures from the League client, or Mobafire, of all the runes you want to include.
- After you've saved them to your computer, open each of them in your image editor and erase everything in the image except the circle with the rune icon.
- Crop the images tightly, so that only the circly rune picture remains (NO BACKGROUND; everything that is not the image should be colored "Alpha").
- Open the screenshot of the rune you want to have inside a box. Draw a box around it in your image editor. Create a new image in your image editor as well and draw a line.
Upload all images to IMGUR, or a similar site.
2. Coding
For the purpose of demonstrating the code, I took screenshots directly from your post for the images. I do not advocate taking screenshots of peoples guides for images in general, as it is stealing to do so without permission.
The final product will look exactly like your post if you take the time to crop/erase everything except the rune picture, as the black background automatically generated by your guide will will up the empty space between the images.
Raw CodeWhat The Code Looks LikeBasically you can copy this code into your guide and replace the image links with your own. You can also play with the column sizes to leave more or less room for your explanation, depending on your preference. I repeated the same images over and over in mine because I am too lazy to upload 12 images and link them all.
Hope this helped. If you have any more questions, quote part of this response and reply on this post! Good luck with your guide and on the Rift!
@ Swuft I don't think they've used images. They've used table formatting. But the effort you went to to recreate this look is pretty amazing :)
Below is the coding how I'd do it - not as nice as the original, but that's due to just quickly grabbing colours/icons etc. Concept is still the same.
code of above
Below is the coding how I'd do it - not as nice as the original, but that's due to just quickly grabbing colours/icons etc. Concept is still the same.
|
|
|
|
|
|
|
code of above
Also, round icons are much prettier than square icons. Comparison:
Perhaps MobaFire could apply a round filter to all images to get them similar? Would be gorgeous overall.
Perhaps MobaFire could apply a round filter to all images to get them similar? Would be gorgeous overall.
jhoijhoi wrote:
@ Swuft I don't think they've used images. They've used table formatting. But the effort you went to to recreate this look is pretty amazing :)
Hey look at that. I wondered if that was the case, but I had no idea you could do things with rounded corners using tables so I assumed images. Neato.
@ Swuft You can adjust the radius too, to make the square round ^^ Which I'm surprised they didn't do, because I think it looks much nicer with round icons.
But it does look less nice with square icons:
|
Aery |
But it does look less nice with square icons:
|
Morgana |
♡ guide writing tips 'n tricks ♡ ashes to ashes ♡ fancy a sig? ♡
♡ sig unintentional collab with Jovy and me ♡
♡ sig unintentional collab with Jovy and me ♡
jhoijhoi wrote:
@ Swuft I don't think they've used images. They've used table formatting. But the effort you went to to recreate this look is pretty amazing :)
Below is the coding - not as nice as the original, but that's due to just quickly grabbing colours/icons etc. Concept is still the same.
Below is the coding - not as nice as the original, but that's due to just quickly grabbing colours/icons etc. Concept is still the same.
Thank you for correcting him, but that code isn't exactly correct. If you use that code exactly it will not line up each row correctly.
The width in each row chosen needs to be smaller than the other columns since the table circling the icons/words will push the other columns more left or right.
The amount you remove from the width of the column needs to be the width of the line's pixels times two (width of the line on each side).
Remove that from the overall width of that specific column and you're good to go!
|
What It Looks Like
|
code I useAssume the base width of each column I use is 200 and Box's line width (padding) is 10.
Any column that I choose to box will need -20 pixels to the width to keep aligned with any columns of the same code under it.
It is also important to not there are a few key parts to note on when changing the colors to work for your code:
-The Divider's lines above and below
-The Box's own color
-The Text color under the icon
Those 3 are key changes in color from guide to guide.
Of course my code looks a little different from the guide since there is more added on, but this is the basis on that particular question without the code being too complicated to replicate.
I get so many compliments on this particular template I made and I thank you all for making the effort and time put into making it look nice worth it!
If anyone needs services, advice, or art, my shop is filling with dust since I mostly get pms for requests (which I am on the site often and love seeing/replying to) and etc. Feel free to click anywhere on this sentence to stop by~
Thank you so much again
-Hoppermh
Hoppermh wrote:
Thank you for correcting him, but that code isn't exactly correct. If you use that code exactly it will not line up each row correctly... The width in each row chosen needs to be smaller than the other columns... needs to be the width of the line's pixels times two...
But in my example post it looks fine? Perhaps I wasn't accounting for something? I also probably should reword my post - the coding is how I'd do it, obviously not your coding, lol.
EDIT: Ah, I think I know now. In forum posts the table/column formatting is adjusted automatically, whereas in guides you have to force code it. That sound right?
jhoijhoi wrote:
But in my example post it looks fine? Perhaps I wasn't accounting for something? I also probably should reword my post - the coding is how I'd do it, obviously not your coding, lol.
EDIT: Ah, I think I know now. In forum posts the table/column formatting is adjusted automatically, whereas in guides you have to force code it. That sound right?
Something like that, you can see in one of my early examples of the template made here:
The format without adjusting the width according to the box that your rows overall will not align straight with the previous/next one with the code similar to what you used.
<3? qq
You need to log in before commenting.
<Member>
Check out my Jhin Guide!