• 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

Worr

Veteran OT User
Joined
Jan 23, 2011
Messages
1,453
Reaction score
364
Location
Sweden
  • 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.
 

Dip Set

Intermediate OT User
Joined
Dec 27, 2007
Messages
226
Solutions
2
Reaction score
146
  • 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.
 
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
872
Solutions
19
Reaction score
410
Location
Santiago - Chile
  • 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!
 
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
872
Solutions
19
Reaction score
410
Location
Santiago - Chile
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:

johnsamir

Active Member
Joined
Oct 13, 2009
Messages
230
Solutions
1
Reaction score
35
Location
Nowhere
Nice work. you are improving your skills so much, btw. how did you fix outfit display at highscores?.php
 
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
872
Solutions
19
Reaction score
410
Location
Santiago - Chile
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:

johnsamir

Active Member
Joined
Oct 13, 2009
Messages
230
Solutions
1
Reaction score
35
Location
Nowhere
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
 
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
872
Solutions
19
Reaction score
410
Location
Santiago - Chile
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:
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
872
Solutions
19
Reaction score
410
Location
Santiago - Chile
Animation finished. Here is the outcome (with the current state of the client)



Regards!
 
Last edited:
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
872
Solutions
19
Reaction score
410
Location
Santiago - Chile
Changed the background to a more Tibia related artwork.

The outcome
1628908949176.png
 
Last edited:
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
872
Solutions
19
Reaction score
410
Location
Santiago - Chile
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!
 
Top