• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Webdesign [Showoff] Greed Layout

  • I like the undead theme with the grey color scheme and the banner
  • The header icons and the font has a more goofy feeling (like Halloween decoration)
  • The "index" header has a better font, but the color blends together with the background (could be fine if it's intentional)
  • I think you mean "statistics" (not "statics")
  • Some titles doesn't seem informative. I only know that "index" is your news section because you show us that page.
  • The server description in your news section will be buried after a while, which can be confusing to new players that arrive after release. I think it's fine if you post the same information in multiple places though.
 
  • I like the undead theme with the grey color scheme and the banner
  • The header icons and the font has a more goofy feeling (like Halloween decoration)
  • The "index" header has a better font, but the color blends together with the background (could be fine if it's intentional)
  • I think you mean "statistics" (not "statics")
  • Some titles doesn't seem informative. I only know that "index" is your news section because you show us that page.
  • The server description in your news section will be buried after a while, which can be confusing to new players that arrive after release. I think it's fine if you post the same information in multiple
Jesus dude, this is probably the best feedback I’ve ever seen on Otland.

Finally, set-up 50 FPS .apng with 166 MB to otclient. I follow some tips of @Gesior.pl. For those intrested, the process was:
  • Export Animated GIF (720p) from After Effects, to Media Encoder. It was important to do from After because it has motion blur enabled.
  • After exporting, I searched and found the software Flowframes. It is just amazing, it automatically create missing inbetween frames.
  • Then I loaded the Animated GIF, and exported again with Flowframes to reach 50 FPS on GIF.
  • With the 50 FPS .gif, loaded it on gif2apng, another great software that converts GIF to aPNG without losing quality.
  • Got the render, and it weights too much (215 MB) and the next step is the key!
  • Downloaded APNG Assembler 2.91 and this did the magic, investigated what Zopfli compression method is.
  • The last step, was to compress and output. (Zopfli is slow, but is decreased it from 215 MB to 166 MB)
The outcome (average 12%-20% GPU):

Regards!
The background.apng is 166 mb? It looks absolutely stunning but if it’s 166 mb, probably not super functional for the average user. That combined with a 12.66 sprite file, would be around 500 mb before compression.
Still, looks absolutely stunning 10/10 job.
 
  • I like the undead theme with the grey color scheme and the banner
  • The header icons and the font has a more goofy feeling (like Halloween decoration)
  • The "index" header has a better font, but the color blends together with the background (could be fine if it's intentional)
  • I think you mean "statistics" (not "statics")
  • Some titles doesn't seem informative. I only know that "index" is your news section because you show us that page.
  • The server description in your news section will be buried after a while, which can be confusing to new players that arrive after release. I think it's fine if you post the same information in multiple places though.

Thanks dude, sorry for the delay I was away, i'm 100% agreed with this feedback and will be applied.

Jesus dude, this is probably the best feedback I’ve ever seen on Otland.


The background.apng is 166 mb? It looks absolutely stunning but if it’s 166 mb, probably not super functional for the average user. That combined with a 12.66 sprite file, would be around 500 mb before compression.
Still, looks absolutely stunning 10/10 job.

apng.png
It does weight 170,183 KB, passed it in different ways of compression (trying to decrease the maxium as possible). If you wish I can post a guide or something here or in other new thread. Regards!
 
I did some changes based on @Worr feedback.

progress.png

Also did some minor changes to protected.php, gallery, and other pages

req_login.png

invalid.png

protected.php
PHP:
<?php
require_once 'engine/init.php';
// To direct users here, add: protect_page(); Here before loading header.
include 'layout/overall/header.php';
if (user_logged_in() === true) {
?>
<table border="3" cellspacing="8" cellpadding="7" width="100%" >
  <tr bgcolor="#505050">
  <td class="white"><b>Greed Online | Invalid</b></td>
  </tr>  <td><span style="background-color: #FF0000; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Error</span> <span style="background-color: #31261D; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Sorry, this page is invalid. Please go <a href='myaccount.php'>back</a> to account management.</span></table></td></ul>

<?php
} else {
?>
<table border="3" cellspacing="8" cellpadding="7" width="100%" >
  <tr bgcolor="#505050">
  <td class="white"><b>Greed Online | Requiered Log-In</b></td>
  </tr>  <td><span style="background-color: #FF0000; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Error</span> <span style="background-color: #31261D; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Sorry, this page can't be viewed if you're not logged in.</span></table></td></ul>
                            <p class="two"><center style="font-size: 11px;"><table border="1" cellspacing="1" cellpadding="5" width="100%" bgcolor="#afa9a0"><tr><td><center><em>
                            <div class="login"></div> <form action="login.php" method="post" style="margin-bottom: 0;">
                            <input type="text" name="username" value="Account number" class="w3-input w3-border w3-light-grey" onfocus="this.value=''" onblur="if(this.value=='') { this.value='Account number'};">
                            <input type="password" name="password" value="Password" class="w3-input w3-border w3-light-grey" onfocus="this.value=''" onblur="if(this.value=='') { this.value='Password'};">
                            <input type="submit" name="Submit" value="" class="loginbtn2"><a class="createbtn2" href="register.php"></a></em></center></tr></td></table></p>
<?php
}
include 'layout/overall/footer.php'; ?>

Regards!
 

Attachments

Last edited:
Nice work. you are improving your skills so much, btw. how did you fix outfit display at highscores?.php
 
Nice work. you are improving your skills so much, btw. how did you fix outfit display at highscores?.php
Thanks for the feedback! I created my own image library for outfits

outfits.png
Here's the header.php lines
PHP:
<div class="border_bottom">
                    </div>
                    <div class="left_box">
                    <div class="corner_lt"></div><div class="corner_rt"></div><div class="corner_lb"></div><div class="corner_rb"></div>
                    <div class="title"><img src="layout/img/exp.gif"><span style="background-image: url(layout/widget_texts/powergamers.png);"></span></div>
                    <div class="content">
                        <div class="rise-up-content">
                        <ul class="toplvl">
 <?php
            $cache = new Cache('engine/cache/topPlayer');
            if ($cache->hasExpired()) {
                $players = mysql_select_multi('SELECT `name`, `level`, `experience`, `looktype`, `lookaddons`, `lookhead`, `lookbody`, `looklegs`, `lookfeet` FROM `players` WHERE `group_id` < ' . $config['highscore']['ignoreGroupId'] . ' ORDER BY `experience` DESC LIMIT 5;');
                $cache->setContent($players);
                $cache->save();
            } else {
                $players = $cache->load();
            }
            if ($players) {
            $count = 1;
            foreach($players as $player) {
            echo '<img style="margin-top: -35px; margin-left: -35px;" src="layout/outfitter/outfit.php?id='.$player['looktype'].'&addons='.$player['lookaddons'].'&head='.$player['lookhead'].'&body='.$player['lookbody'].'&legs='.$player['looklegs'].'&feet='.$player['lookfeet'].'&g=0&h=3&i=1"></img> <a href="characterprofile.php?name='.$player['name'].'">'.$player['name'].'</a> (<span>' . $player['level'].')<br>';
           $count++;
            }
            }
            ?>
                            </ul>
                        </div>
                    </div>
                    <div class="border_bottom"></div>
                </div>
                </div>
            </div>
            <div class="container_mid">
 
Last edited:
Thanks for the feedback! I created my own image library for outfits

View attachment 60343
Here's the header.php lines
PHP:
<?php
            $cache = new Cache('engine/cache/topPlayer');
            if ($cache->hasExpired()) {
                $players = mysql_select_multi('SELECT `name`, `level`, `experience`, `looktype`, `lookaddons`, `lookhead`, `lookbody`, `looklegs`, `lookfeet` FROM `players` WHERE `group_id` < ' . $config['highscore']['ignoreGroupId'] . ' ORDER BY `experience` DESC LIMIT 5;');
                $cache->setContent($players);
                $cache->save();
            } else {
                $players = $cache->load();
            }
            if ($players) {
            $count = 1;
            foreach($players as $player) {
            echo '<img style="margin-top: -35px; margin-left: -35px;" src="layout/outfitter/outfit.php?id='.$player['looktype'].'&addons='.$player['lookaddons'].'&head='.$player['lookhead'].'&body='.$player['lookbody'].'&legs='.$player['looklegs'].'&feet='.$player['lookfeet'].'&g=0&h=3&i=1"></img> <a href="characterprofile.php?name='.$player['name'].'">'.$player['name'].'</a> (<span>' . $player['level'].')<br>';
           $count++;
            }
            }
            ?>
                            </ul>
                        </div>
                    </div>
                    <div class="border_bottom"></div>
                </div>
                </div>
            </div>
            <div class="container_mid">
thank
 
Time to update
#1 The layout developed on this thread now can be seen in Greed Online (http://greedot.net/). Take a look into it ;)

#2 Currently working on a new log-in screen animation for OTClient, in Maya with free 3d resources (rigs, geometries, in .fbx, .obj, etc.). The goal is to do a loop of 3 seconds (72 frames) with the dragon animated, here are some SS of the first render:

greedot_maya.png

greed_dragon.png

greed_dragon_2.png

Still need to work more on the text. Leave your feedback!
Regards :)
 
Last edited:
New updates:

Results:
unknown (4).png
unknown (5).png

unknown (2).png

unknown (3).png

As always, i'll be attentive to feedback and comments.
Regards!
 
Ok, some advances here!
Here goes client background (has logo attached as otfont, a shadow image, and the background). Also modified the animation of the particles.
1704793423536.png

Also took out a lot of elements, and changed the buttons from top bars. Changed the whole color of the UI to fit it to the background. And traduced everything to spanish.

1704793475794.png

And finally the website, has animated logo and some animated headers. Also particles effect, and a background that changes color automatically (written in css, js). Been taking some scripts from codepen, it's been really helpfull.

1704793693287.png

So this have been for the moment. Can't wait to open the live version of this animated stuff. Anyways, there's a lot of work to do. Regards and thanks for reading! ^^
 
Back
Top