• 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

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
1,470
Solutions
27
Reaction score
844
Location
Santiago - Chile
GitHub
ralke23
Twitch
ralke23
Hi! I wanted to share some of my recent work. I started editing oldschool layout for ZnoteAAC. The goal is to hand draw all the layout from scratch, iv'e currently done the corners and borders on photoshop (to start building it), the next step will be the cleaning process of the line in Toon Boom Harmony. To motivate me on this task I will be updating the post with recent changes.

All artwork on the layout that looks different from oldschool layout is hand drawn by me, including logotype.
I uploaded the layout with the notes of future changes. Without any more preambles...

GreedLayout.png

What does images say? This is my current tasklist:
  • (White) Clean corners and border artwork lines on Toon Boom Harmony
  • (Red) Remove all the icons al the left side of menus
  • (Pink) Use pink pantone of the logo for the titles backgrounds
  • (White/Black) Make a bone textured background for news and menus

Other advances:
- Characterprofile same as TibiaCOM layout (still need to remove outfits that are not from 8.6 version)

otherchanges.png

I did the thread to hear opinions, get feedback! That's esscential for me, the best way to work is constructively.
Regards, ralke.
 
Changelog:
  • Replaced colors from the layout based on Timeless theme of the book "Armonia Cromatica edicion Pantone"
988a8e71f2d4fea68e2b9ee7b39df0dd.jpg
  • Discarded hand-drawn design of corners/bars (too hard to fit)
  • All header and footer has been organized, also added streaming panel and moving gifs.
  • Added html5 radio FM
  • Added snow falling effect
  • Changed some .css text attributes
  • Font change of all widget_text
  • Fixed background colours of characterprofile/highscores/etc.
First test
Second test


layout_1.png

I'll be attentive to opinions/feedback
Regards!
 
Last edited:
Today advances!
  • New background to fit 100% with the colors. Main imagen taken from deviantart. Also merged with Tibia reference images.
  • Changed 99% of .css to the main palette. Currently using #afa9a0 (pantone 406c) #31261D (pantone black 4c) #E1D3C4(pantone 9186c)
Greed Layout.png

pswork.png

Regards!
 
Steve aoki use Traktor DJ cracked np its normal XD
 
Some advances
  • Improving quick login buttons
  • Rewriting the Registration page
Quicklogin menu changes (left non-highlighted, right highlighted)

quicklogin.png

Button process

button_process.png

Register page code outcome (html code release)


HTML:
<?php
require_once 'engine/init.php';
logged_in_redirect();
include 'layout/overall/header.php';
require_once('config.countries.php');

if (empty($_POST) === false) {
    // $_POST['']
    $required_fields = array('username', 'password', 'password_again', 'email', 'selected');
    foreach($_POST as $key=>$value) {
        if (empty($value) && in_array($key, $required_fields) === true) {
            $errors[] = 'You need to fill in all fields.';
            break 1;
        }
    }

    // check errors (= user exist, pass long enough
    if (empty($errors) === true) {
        /* Token used for cross site scripting security */
        if (!Token::isValid($_POST['token'])) {
            $errors[] = 'Token is invalid.';
        }

        if ($config['use_captcha']) {
            if(!verifyGoogleReCaptcha($_POST['g-recaptcha-response'])) {
                $errors[] = "Please confirm that you're not a robot.";
            }
        }

        if (user_exist($_POST['username']) === true) {
            $errors[] = 'Sorry, that username already exist.';
        }

        // Don't allow "default admin names in config.php" access to register.
        $isNoob = in_array(strtolower($_POST['username']), $config['page_admin_access']) ? true : false;
        if ($isNoob) {
            $errors[] = 'This account name is blocked for registration.';
        }
        if ($config['ServerEngine'] !== 'OTHIRE' && $config['client'] >= 830) {
            if (preg_match("/^[a-zA-Z0-9]+$/", $_POST['username']) == false) {
                $errors[] = 'Your account name can only contain characters a-z, A-Z and 0-9.';
            }
        } else {
            if (preg_match("/^[0-9]+$/", $_POST['username']) == false) {
                $errors[] = 'Your account can only contain numbers 0-9.';
            }
            if ((int)$_POST['username'] < 100000 || (int)$_POST['username'] > 999999999) {
                $errors[] = 'Your account number must be a value between 6-8 numbers long.';
            }
        }
        // name restriction
        $resname = explode(" ", $_POST['username']);
        foreach($resname as $res) {
            if(in_array(strtolower($res), $config['invalidNameTags'])) {
                $errors[] = 'Your username contains a restricted word.';
            }
            else if(strlen($res) == 1) {
                $errors[] = 'Too short words in your name.';
            }
        }
        if (strlen($_POST['username']) > 32) {
            $errors[] = 'Your account name must be less than 33 characters.';
        }
        // end name restriction
        if (strlen($_POST['password']) < 6) {
            $errors[] = 'Your password must be at least 6 characters.';
        }
        if (strlen($_POST['password']) > 100) {
            $errors[] = 'Your password must be less than 100 characters.';
        }
        if ($_POST['password'] !== $_POST['password_again']) {
            $errors[] = 'Your passwords do not match.';
        }
        if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) {
            $errors[] = 'A valid email address is required.';
        }
        if (user_email_exist($_POST['email']) === true) {
            $errors[] = 'That email address is already in use.';
        }
        if ($_POST['selected'] != 1) {
            $errors[] = 'You are only allowed to have an account if you accept the rules.';
        }
        if (validate_ip(getIP()) === false && $config['validate_IP'] === true) {
            $errors[] = 'Failed to recognize your IP address. (Not a valid IPv4 address).';
        }
            if (strlen($_POST['flag']) < 1) {
                        $errors[] = 'Please choose country.';
                }
    }
}

?>
<table border="1" cellspacing="1" cellpadding="4" width="100%" >
  <tr bgcolor="#505050">
  <td class="white"><b><u>Register account</b></u></td>
  </tr>
  <td><ul>
  <li> <b><span style="color: #C64125;">[Warning]</b></span> If you lose your account details, either your account number or password, Greed managers will not be responsible for recovering your data. <b>Please keep your account number and password in a safe place in case you forget your account and do not use the same passwords for your accounts on other servers to avoid hacks.</b></li></ul>
  </td>
</table>
<table border="1" cellspacing="1" cellpadding="4" width="100%" >
  <tr bgcolor="#505050">
  <td class="white"><b><u>Account details</b></u></td>
  </tr>
  <td>
<?php
if (isset($_GET['success']) && empty($_GET['success'])) {
    if ($config['mailserver']['register']) {
        ?>
        <h1>Email authentication required</h1>
        <p>We have sent you an email with an activation link to your submitted email address.</p>
        <p>If you can't find the email within 5 minutes, check your <strong>junk/trash inbox (spam filter)</strong> as it may be mislocated there.</p>
        <?php
    } else echo 'Congratulations! Your account has been created. You may now login to create a character.';
} elseif (isset($_GET['authenticate']) && empty($_GET['authenticate'])) {
    // Authenticate user, fetch user id and activation key
    $auid = (isset($_GET['u']) && (int)$_GET['u'] > 0) ? (int)$_GET['u'] : false;
    $akey = (isset($_GET['k']) && (int)$_GET['k'] > 0) ? (int)$_GET['k'] : false;
    // Find a match
    $user = mysql_select_single("SELECT `id`, `active`, `active_email` FROM `znote_accounts` WHERE `account_id`='$auid' AND `activekey`='$akey' LIMIT 1;");
    if ($user !== false) {
        $user = (int) $user['id'];
        $active = (int) $user['active'];
        $active_email = (int) $user['active_email'];
        // Enable the account to login
        if ($active == 0 || $active_email == 0) {
            mysql_update("UPDATE `znote_accounts` SET `active`='1', `active_email`='1' WHERE `id`= $user LIMIT 1;");
        }
        echo '<h1>Congratulations!</h1> <p>Your account has been created. You may now login to create a character.</p>';
    } else {
        echo '<h1>Authentication failed</h1> <p>Either the activation link is wrong, or your account is already activated.</p>';
    }
} else {
    if (empty($_POST) === false && empty($errors) === true) {
        if ($config['log_ip']) {
            znote_visitor_insert_detailed_data(1);
        }

        //Register
        if ($config['ServerEngine'] !== 'OTHIRE') {
            $register_data = array(
                'name'        =>    $_POST['username'],
                'password'    =>    $_POST['password'],
                'email'        =>    $_POST['email'],
                'created'    =>    time(),
                'ip'        =>    getIPLong(),
                'flag'        =>     $_POST['flag']
            );
        } else {
            $register_data = array(
                'id'        =>    $_POST['username'],
                'password'    =>    $_POST['password'],
                'email'        =>    $_POST['email'],
                'created'    =>    time(),
                'ip'        =>    getIPLong(),
                'flag'        =>     $_POST['flag']
            );
        }

        user_create_account($register_data, $config['mailserver']);
        if (!$config['mailserver']['debug']) header('Location: register.php?success');
        exit();
        //End register

    } else if (empty($errors) === false){
        echo '<font color="red"><b>';
        echo output_errors($errors);
        echo '</b></font>';
    }
?>
    <form action="" method="post">
        <ul>
            <li>
                Account Name:<br>
                <input type="text" name="username">
            </li>
            <li>
                Password:<br>
                <input type="password" name="password">
            </li>
            <li>
                Password again:<br>
                <input type="password" name="password_again">
            </li>
                                  </td>
</table></ul><table border="1" cellspacing="1" cellpadding="4" width="100%" >
  <tr bgcolor="#505050">
  <td class="white"><b><u>Personal information</b></u></td>
  </tr>
  <td><ul>
            <li>
                Email:<br>
                <input type="text" name="email">
            </li>
            
            <li>
                Country:<br>
                <select name="flag">
                    <option value="">(Please choose)</option>
                    <?php
                    foreach(array('pl', 'se', 'br', 'us', 'gb', ) as $c)
                        echo '<option value="' . $c . '">' . $config['countries'][$c] . '</option>';

                        echo '<option value="">----------</option>';
                        foreach($config['countries'] as $code => $c)
                            echo '<option value="' . $code . '">' . $c . '</option>';
                    ?>
                </select>
            </li>
    
            <?php
            if ($config['use_captcha']) {
                ?>
                <li>
                     <div class="g-recaptcha" data-sitekey="<?php echo $config['captcha_site_key']; ?>"></div>
                </li>
                <?php
            }
            ?>
            <li>
                      </ul></td>
</table><table border="1" cellspacing="1" cellpadding="4" width="100%" >
  <tr bgcolor="#505050">
  <td class="white"><b><u>Server rules</b></u></td>
  </tr>
  <td>
<body>
<div style="height:120px;width:auto;overflow:auto;background-color:white;color:black;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;"><p style = "font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; "><h3><b><u>Greed Online rules</b></u></h3>  <b><p style=”text-align: justify;”><u>Sobre las reglas generales de la comunidad de Greed:</u> </b> </p>
 
 <p style=”text-align: justify;”>I. No insultar de forma mal intencionada al God, GM Tutores, ni a los jugadores que juegan el servidor. Tampoco puede hacer uso inapropiado de los canales Spanish-Chat, Brazil-Chat, Trade, donde se atienden ventas y conversaciones sobre el servidor.</p>
 <p style=”text-align: justify;”>II. No abusar de cualquier posible bug o error del juego, notifica y da a conocer la situacion al GOD si ocurre y sera solucionado a la brevedad.</p>
 <p style=”text-align: justify;”>III. No publicitar contenido externo al servidor. Especificamente, se castigaran publicidades sobre cualquier otro servidor externo a Greed. Ademas se prohibe vender tus items o personajes de Greed por dinero REAL, tibia coins, o world-change por otro servidor que no sea greed.cl</p>

 <p style=”text-align: justify;”><b><u>Sobre los problemas de cuentas hackeadas, olvidadas o robadas:</u></b></p>

<p style=”text-align: justify;”>I. El equipo de Greed te solicita atentamente que utilices datos de buena seguridad, evitando repetir contraseñas que hayas utilizado en otros servidores o que sean faciles de predecir (por ejemplo: asd, 123, etc).</p>
<p style=”text-align: justify;”>II. En caso de tener problemas para ingresar puedes comunicarte via e-mail a [email protected] con el asunto "Greed OT".</p>

<p style=”text-align: justify;”> <b><u>Sobre la realizacion de donaciones al servidor:</u></b></p>

<p style=”text-align: justify;”>I. Usted al momento de donar, esta totalmente de acuerdo con que su donacion es un aporte a fin de mantener y mejorar el servidor Greed. Por lo tanto, usted aprueba el hecho de que no esta comprando ni pagando ningun objeto, fin, o situacion en particular.</p>
<p style=”text-align: justify;”>II. Usted tambien esta de acuerdo en que no habra ningun reembolso por su donacion. El servidor Greed se compromete a entregar de buena fe las gratificaciones pertinentes en agradecimiento por las donaciones realizadas.</p>

 <p style=”text-align: justify;”><b><u>Sobre amonestaciones y baneos:</u></p></b>
 
<p style=”text-align: justify;”>I. El incumplimiento de alguna de estas reglas se traducira en distintos castigos, estos seran aplicados en consideracion de las circunstancias en que se incumplieron las reglas de Greed.</p>
<p style=”text-align: justify;”>II. El equipo de Greed no tendra la obligacion de avisar o justificar un baneo.Sin embargo, si consideras injusta la aplicacion de alguna de estas medidas puedes enviar un mai a [email protected]</p>
<p style=”text-align: justify;”>III. Los castigos por el incumplimiento de reglas son:</p>
<p style=”text-align: justify;”>a) Baneos normales (30 dias)</p>
<p style=”text-align: justify;”>b) Baneos permanentes (1 año)</p>
<p style=”text-align: justify;”>c) Eliminacion de cuentas</p>
<p style=”text-align: justify;”>d) Bloqueo de direccion IP</p></p>
 <p style=”text-align: justify;”><b><u>Sobre cambios en las reglas y servicios:</u></p></b>
<p style=”text-align: justify;”>En caso de existir algun cambio en las reglas, servicios, o sistemas de alta relevancia en Greed (donaciones, registros, accesos, etc.), los jugadores seran notificados por la via que sea considerada mas apropiada para su difusion inmediata. Reglas para http://www.greed.cl. Contacto: [email protected].</p>
</div>
</body>
</html>
            </li>    </td>
</table></ul>
            <table border="1" cellspacing="1" cellpadding="4" width="100%" >
  <tr bgcolor="#505050">
  <td class="white"><b><u>Confirmation</b></u></td>
  </tr>
  <td><ul><li>
                Do you agree to follow <b><span style="color: #C64125;">Greed Online rules</b></span>? By approving these rules, <b>you have clearly understood each of them and you are willing to accept them.</b><br>
                <p><select name="selected">
                  <option value="0">Umh...</option>
                  <option value="1">Yes.</option>
                  <option value="2">No.</option>
                </select></p>
            </li>
            <?php
                /* Form file */
                Token::create();
            ?>
            <li>
                <input type="submit" value="Create Account">
            </li>
        </ul>
    </form>
    </td>
</table></ul>
<?php
}
include 'layout/overall/footer.php';
?>

Image of register.php

register_menu.png
 
Last edited:
This time I used Effects, Adobe Premiere, Photoshop, and other stuff. I wanted to upload this here, because it is .gif/.apng format and has to do with webdesign. Is an entergame screen for OTClient.

The process, in resume (with lots of testings):
  • Divide this image in a multi-layer on photoshop
  • Set up a camera movements and layer depth on after
  • Setting up flame text effects and blur masks on after
  • Back to photoshop, frame-by-frame to fix blur
  • Premiere composite, timing and vignette effect
  • H264 to GIF, GIF to APNG

If you like it, leave your feedback ;p
Regards!

P.S If someone knows how to set H264 video instead of APNG for login screen, and where to change OTC sources (if there's no problems with bytes and thoose stuff) please let me know!
 
Last edited:
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!
 
Last edited:
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!


Feel like I've heard that song somewhere.... Diablo 3?
 
Feel like I've heard that song somewhere.... Diablo 3?
Jajajaja yes, originally from Diablo 2 but remastered on Diablo 3

I'm using this modification and have a track list with recognized RPG songs, to make OTClient reproduce them with math.randomseed
The track list is: Tristam (Diablo 2), Worlds OST S2 (Lol), Bayek of Siwa (AC:Origins), Adventurer's Dream Mark (Goblin Slayer)
 
Jajajaja yes, originally from Diablo 2 but remastered on Diablo 3

I'm using this modification and have a track list with recognized RPG songs, to make OTClient reproduce them with math.randomseed
The track list is: Tristam (Diablo 2), Worlds OST S2 (Lol), Bayek of Siwa (AC:Origins), Adventurer's Dream Mark (Goblin Slayer)

Diablo 2/3 is such an amazing game for inspiration and music for any RPG even if theyre not the same vibes. They do everything so well in that game to make it unique but at the same time its derived from many older inspirations as well and so its easy to tie their sounds and vibes to multiple types of moods even if they weren't* visually meant for each other to begin with. You can grab almost any Diablo track and it sounds amazing with any image behind it, but you cant do the same for most other game soundtracks.

TLDR; good choice xD
And the wesbite is really coming together nicely too, I was thrown off by that mirrored waterfall/game graphics being flipped and used in the header, but then on second glance it actually fits pretty cool. Most OTs have horrendous websites--including the big ones--but I'd be proud of an OT with a landing like yours
 
Some advances.
  • Successfully imported retro outfits to website layout, files involved: characterprofile.php, topplayers.php.
  • Added 7 retro outfits by breaking limit in sources and compiled outfits to .dat using Object Builder

characterprofile.png
 
Back
Top