Donnerstag, 29 Januar 2026

Diese Woche am beliebtesten

Vertiefendes Material

Smilie Schild Generator

Erstelle individuelle Grafiken mit unserem Smilie Schild Generator. Mit diesem Php Script kannst du im Handumdrehen personalisierte Smilies erstellen, die ein Schild mit deinem eigenen Text halten. Egal ob für Foren, Blogs, Discord oder soziale Netzwerke, unser Generator bietet dir eine zeitgemäße Oberfläche und eine intuitive Bedienung.

Wähle einfach deine gewünschte Emotion (zB. glücklich, traurig oder wütend), gib deinen individuellen Text ein, ändere die Farbe oder Schriftgröße und beobachte in der Live Vorschau, wie sich das Schild dynamisch an deine Botschaft anpasst. Dank der hochwertigen PNG Ausgabe mit Transparenz lassen sich die generierten Bilder perfekt in jedes Design integrieren. Klicke auf den Download Button und erhalte dein persönliches Smilie Schild sofort als gebrauchsfertige Grafik.

Die install.php. Es erstellt die Ordnerstruktur, lädt eine Schriftart herunter und generiert die benötigten Smilie Grafiken (per Code), damit du sofort ein funktionierendes Paket hast. Sollte die font.ttf fehlen lade dir eine aus dem Netz herunter.

<?php
$folders = ['smilies', 'fonts'];
foreach ($folders as $f) {
    if (!file_exists($f)) mkdir($f, 0777, true);
}
function createSmilie($name, $color, $eyeType = 'normal') {
    $path = "smilies/{$name}.png";
    if (!file_exists($path)) {
        $im = imagecreatetruecolor(30, 30);
        imagesavealpha($im, true);
        $trans = imagecolorallocatealpha($im, 0, 0, 0, 127);
        imagefill($im, 0, 0, $trans);
        $yellow = imagecolorallocate($im, 255, 204, 0);
        $black = imagecolorallocate($im, 0, 0, 0);
        imagefilledellipse($im, 15, 15, 28, 28, $yellow);
        imageellipse($im, 15, 15, 28, 28, $black);
        imagefilledellipse($im, 10, 12, 4, 4, $black);
        imagefilledellipse($im, 20, 12, 4, 4, $black);
        if($name == 'happy') imagearc($im, 15, 18, 15, 10, 0, 180, $black);
        if($name == 'sad') imagearc($im, 15, 22, 15, 10, 180, 360, $black);
        imagepng($im, $path);
        imagedestroy($im);
    }
}
createSmilie('happy', null);
createSmilie('sad', null);
$fontFile = 'fonts/font.ttf';
if (!file_exists($fontFile)) {
    $fontData = file_get_contents("https://github.com/google/fonts/raw/main/apache/roboto/static/Roboto-Bold.ttf");
    if($fontData) file_put_contents($fontFile, $fontData);
}
echo "<h3>Installation abgeschlossen!</h3>";
echo "<p>Ordner erstellt, Standard Smilies generiert und Schriftart geladen. Cool ...!</p>";
echo "<a href='index.html' style='padding:10px 20px; background:green; color:white; text-decoration:none; border-radius:5px;'>Jetzt Dreamcodes Generator öffnen</a>";
?>

Die index.html. Du kannst einfach weitere PNGs in den smilies/-Ordner werfen (z.B. wut.png, cool.png) und sie einfach als neue <option> im <select> Menü hinzufügen. Das System erkennt sie automatisch.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Schilder-Smilie Generator | Dreamcodes</title>
    <style>
        :root { --accent: #2563eb; --bg: #f1f5f9; }
        body { font-family: sans-serif; background: var(--bg); display: flex; flex-direction: column; align-items: center; padding: 20px; }
        .card { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 500px; }
        .control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .full-width { grid-column: span 2; }
        label { font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; }
        input, select { width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; margin-top: 5px; box-sizing: border-box; }
        .preview { background: #fafafa; border: 2px dashed #cbd5e1; margin: 20px 0; padding: 20px; display: flex; justify-content: center; min-height: 80px; }
        .btn { background: var(--accent); color: white; border: none; padding: 15px; border-radius: 12px; cursor: pointer; text-decoration: none; display: block; text-align: center; font-weight: bold; }
        footer { margin-top: 30px; font-size: 14px; }
        footer a { color: var(--accent); text-decoration: none; }
    </style>
</head>
<body>
<div class="card">
    <h2 style="margin-top:0">Schilder-Generator</h2>
        <div class="control-grid">
        <div class="full-width">
            <label>Text</label>
            <input type="text" id="t" value="Dreamcodes" maxlength="30">
        </div>
        <div>
            <label>Schriftfarbe</label>
            <input type="color" id="c" value="#000000">
        </div>
        <div>
            <label>Schriftgröße</label>
            <select id="sz">
                <option value="9">Klein</option>
                <option value="12" selected>Normal</option>
                <option value="16">Groß</option>
            </select>
        </div>
        <div>
            <label>Emotion</label>
            <select id="s">
                <option value="happy">Glücklich</option>
                <option value="sad">Traurig</option>
            </select>
        </div>
        <div>
            <label>Schriftart</label>
            <select id="f">
                <option value="font.ttf">Standard</option>
                </select>
        </div>
    </div>
    <div class="preview">
        <img id="p" src="" alt="Vorschau">
    </div>
    <a id="db" href="#" class="btn">Download PNG</a>
</div>
<footer>
    © 2026 <a href="https://www.dreamcodes.net" target="_blank">Dreamcodes</a>
</footer>
<script>
    const el = { t: 't', c: 'c', sz: 'sz', s: 's', f: 'f', p: 'p', db: 'db' };
    Object.keys(el).forEach(k => el[k] = document.getElementById(el[k]));
    function update() {
        const color = el.c.value.replace('#', '');
        const url = `generate.php?text=${encodeURIComponent(el.t.value)}&type=${el.s.value}&color=${color}&size=${el.sz.value}&font=${el.f.value}`;
        el.p.src = url;
        el.db.href = url + '&dl=1';
    }
    [el.t, el.c, el.sz, el.s, el.f].forEach(i => i.addEventListener('input', update));
    update();
</script>
</body>
</html>

Die generate.php:

<?php
$text       = $_GET['text']  ?? 'Dreamcodes';
$type       = $_GET['type']  ?? 'happy';
$color      = $_GET['color'] ?? '000000'; // Hex ohne #
$size       = (int)($_GET['size'] ?? 12);
$font_file  = $_GET['font']  ?? 'font.ttf';
$download   = isset($_GET['dl']);
$font_path  = __DIR__ . '/fonts/' . $font_file;
if(strlen($color) == 6) {
    $r = hexdec(substr($color, 0, 2));
    $g = hexdec(substr($color, 2, 2));
    $b = hexdec(substr($color, 4, 2));
} else {
    $r = $g = $b = 0;
}
$bbox = imagettfbbox($size, 0, $font_path, $text);
$tw = abs($bbox[2] - $bbox[0]);
$th = abs($bbox[5] - $bbox[1]);
$sw = max($tw + 24, 50); // Schildbreite
$iw = $sw + 60; // Gesamtbreite
$im = imagecreatetruecolor($iw, 70);
imagesavealpha($im, true);
$trans = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefill($im, 0, 0, $trans);
$txt_color = imagecolorallocate($im, $r, $g, $b);
$black     = imagecolorallocate($im, 0, 0, 0);
$white     = imagecolorallocate($im, 255, 255, 255);
imageline($im, 45, 35, 45, 65, $black);
imagefilledrectangle($im, 30, 5, 30 + $sw, 40, $white);
imagerectangle($im, 30, 5, 30 + $sw, 40, $black);
$smilie_file = __DIR__ . "/smilies/{$type}.png";
if (file_exists($smilie_file)) {
    $s_img = imagecreatefrompng($smilie_file);
    imagecopy($im, $s_img, 5, 25, 0, 0, 30, 30);
}
$tx = 30 + ($sw / 2) - ($tw / 2);
$ty = 22 + ($th / 2);
imagettftext($im, $size, 0, $tx, $ty, $txt_color, $font_path, $text);
header('Content-Type: image/png');
if ($download) header('Content-Disposition: attachment; filename="smilie.png"');
imagepng($im);
imagedestroy($im);
Dreamcodes Redaktion
Dreamcodes Redaktion
Qualität als Standard. Verantwortung als Prinzip. Jede Ressource auf Dreamcodes basiert auf geprüften Best Practices und fundierter Praxiserfahrung. Unser Anspruch ist ein belastbares Fundament statt experimenteller Lösungen. Die Integration und Absicherung der Inhalte liegt in Ihrem Ermessen. Wir liefern die fachliche Basis, die Verantwortung für den produktiven Einsatz verbleibt bei Ihnen.
Vorheriges Tutorial

Vielleicht einen Blick WERT?