Willkommen guest!
    So du willst also lernen wie man Layouts codet und ein paar Tipps zum Machen von Layouts. Schön hier bist du genau richtig. Ich will dich aber nicht lange aufhalten und schicke dich deshalb gleich zum Inhaltsverzeichnis ^^ So du willst also hier etwas lernen zum Machen von Grafiken und zum späteren coden? Schön, denn hier bist du genau richtig. Ich will dich aber nicht lange aufhalten und schicke dich deshalb gleich zum Inhaltsverzeichnis ^^




Die Erklärungsbilder sind teilweise stark komprimiert, dies ist beabsichtigt, damit auch User mit weniger schnellen Internetverbindungen, nicht ewig warten müssen.


Wie mache ich Swirls+Brushs?
Dieses Tutorial ist für Paint Shop Pro X gemacht!


    Wenn ich Grafiken mache, benutze ich immer PSP X (auf deutsch!). Dieses Tutorial ist genau für dieses Programm erklärt. Wenn du ein anderes Programm benutzt, ist es gut möglich, dass das Tutorial übertragbar ist, doch du musst dir dafür die Funktionen selber heraussuchen.


    Als erstes öffnest du ein neues leeres Bild. 500x500 Pixel ist eine gute Grösse, später kannst du das ganze ja immer noch ausschneiden, falls es Drumherum noch weiss ist.

    Den Hintergrund machst du weiss und wählst nun eine Schrift die „verschnörkelt" ist, wie z.B „Harrington". Nun mache die Schriftgrösse ziemlich gross und wähle einen Grossbuchstaben (bedenke einfach, dass der Brush für Eckbgs nur höchstens zwei Seiten über den Bildrand darf, da es sonst wie abgeschnitten wirkt). Mache am besten erst mal einen Buchstaben, diesen drehst du und änderst die Grösse, bis es dir gefällt. Im Idealfall ist der Buchstabe nicht mehr als solcher erkennbar.

    (Wenn man will, kann man natürlich hier schon aufhören und die Grafik schon als Brush verwenden)

    Um den Eckbrush zu verfeinern, machst du noch ein paar Ebenen und verzierst die noch mit z.B dem schon vorhandenen Marmorbrush von PSP. Ich persönlich mache meistens noch eine paar zusätzliche Swirls.
    Wenn du nicht direkt den Eckbg machst, sondern zuerst den Brush, dann lass alles in Grautönen.

    Wenn dir alles soweit gefällt, musst du die Grafik nurnoch, als Brush speichern (und nachher verwenden ^^)



    (Du kannst die Standarteinstellungen einfach übernehmen)


    Gratulation guest! Du hast nun selber einen Brush gemacht, mit selbergemachten Swirls!


Coden eines Petpagelayouts
Dieses Tutorial beginnt gleich mit dem coden, also sobald du deine Grafik fertig gestellt hast!


    Es gibt zwei-und einteilige Layouts, zuerst werde ich das Coden der einteiligen erklären. Am Schluss werde ich dir noch den Unterschied zwischen ein-und zweiteiligen Layouts zeigen.


    Deine Grafik sollte in der Breite höchstens 800px sein, damit auch User mit kleineren Bildschirmen nicht nach rechts scrollen müssen. Was die Höhe der Grafik angeht bist du freier, du solltest einfach beachten, ob du willst, dass man scrollen muss bei kleineren Bildschirmen. Wenn nicht ist die Grafikhöhe bei höchstens 600px zu lassen.
    Tipp: Wenn du es für eine Bewerbung machst, kannst du ja vorher nachfragen, was für eine Bildschirmgrösse er oder sie hat.

    Deine Grafik sieht wahrscheinlich im groben so aus wie die unten (vermutlich grösser). Es ist nicht von Bedeutung wie gross die Grafik ist oder wieviele "Kästchen" (bekannt als div) sie enthält.
    Tipp: Wenn deine Grafik nicht am äusseren Rand einfarbig ist, dann sieht es je nach Bildschirmgrösse wieder abgeschnitten aus. Bei dem Code, den ich dir hier zur Verfügung stelle und auch erkläre, solltest du nur oben und am linken Bildrand überschneiden lassen.


    Weiterhin werde ich dir mit PSP und Paint zeigen wie du an die nötigen Bildinformationen kommst, da letzteres sozusagen jeder User auf dem Computer hat. Aber nun zum Code.

    Die ist der Grundcode. Bei "BILDURL.jpg" musst du die URL deiner Grafik einfügen. Die Grafik ist von oben 14 Pixel entfernt, dies ist extra für Petpages, damit der Balken, der auf jeder Petpage zu finden ist (der auf dem "pets, games, homepages...." steht) nicht verdeckt ist.
    Unten ist die Hintergrundfarbe auch noch definiert. Diese musst du dem Hintergrund deiner Grafik anpassen.

    Bei PSP kannst du dir auch gleich den HTML-Code zeigen lassen:


    Jetzt zum (individuelleren) schwierigeren Teil. Jedes div musst du einzeln anpassen. Dies ist der Grundcode zum öffnen eines divs:

    width=Breite
    height=Höhe
    top=Abstand von Oben (y-achse)
    left=Abstand von Links (x-achse)
    Diese Angaben werden meist in Pixeln (px) gemacht. Wie du auf diese Angaben von deiner Grafik kommst:
    bei Paint:

    Bei PSP:

      Du fährst mit dem Cursor über die Eckpunkte deiner angedeuteten Kästchen. Wenn du genau im Eckpunkt bist, merke dir die Kordinaten, die du bei 2tens siehst. Den x-wert kannst du einfach bei "left" eintragen, beim y-wert musst du noch 14px hinzuzählen, da die Grafik selber ja auch 14px von oben entfernt ist und so alles 14px nach unten rutscht.
      Jetzt musst du noch vom zweiten roten Eckpunkt die Kordinaten abmessen. Jetzt rechnest du x-Wert vom unteren rechten Eckpunkt minus den x-Wert vom oberen linken Eckpunkt und trägst das Ergebnis als Breite ein. Nun rechnest du den y-Wert vom unteren rechten Eckpunkt minus den y-wert vom oberen linken Eckpunkt (ohne 14px dazugerechnet zu haben!), das ist jetzt die Höhe deines Kästchens. Wenn du jetzt alles richtig gemacht hast, ist dein div am richtigen Ort.

    Als Beispiel der Kordinatenpunkt von oben links ist (x:100 y:200) und der unten rechts ist (x:300 y:400).
    Dh. top=200+14=214px; left=100px; width=300-100=200px; height=400-200=200px

    Divs sind wie Ebenen, du sagst wie gross sie sein sollen und wo sie hingehören. Wenn du nun einfach noch mal eine Ebene öffnest ohne die vorherige zu schliessen, wird die neue Ebene in der vorherigen Ebene sein und von der vorherigen Ebene z.B 50px weiter links sein. Wenn du dies nicht beabsichtigst, musst du das divs wieder schliessen. Das ist ganz einfach mit diesem Code, er schliesst die zuletzt geöffnete div. Wenn du mehrere schliessen willst, musst du den Code einfach so oft verwenden, wie du divs schliessen willst


    Den letzten (in der Reihenfolge der unterste) div auf einer Petpage musst du offen lassen, dort kommt das copyright von Neopets rein. Das DARF man nicht entfernen, da auch Non-Neopetsuser Petpagen anschauen können.

    Gratulation guest! Du weisst nun wie man ein einteiliges Petpagelayout codet!


Bildränder mit PSP
Dieses Tutorial ist nur für Paint Shop Pro X gemacht!


    Als erstes beginne ich mit ein paar Beispielen, damit du weisst, was ich genau mit Bildrändern meine. (Der schwarze Hintergrund dient nur dazu, damit du es besser siehst)

    Dies ist ein netter Effekt, der leicht zu machen ist. Bei einem dunklen Hintergrund erspart es einem einen Teil des mühsamen Ausschneidens und ausserdem leuchtet es auch noch so schön ^^

    Als erstes musst du ein Bild auswählen und den weissen Rand wegmachen. Ich habe hier ein piraten Xweetok gewählt.


    Jetzt gehst du unter "Effekte" - "3D-Effekte" und dann auf "Schlagschatten


    Bis jetzt ist bei beiden Varianten alles gleich, aber je nachdem musst du nun andere Einstellungen vornehmen.
    Diese sind für das weniger verschwommene:

    und


    Bei dem verschwommenen Bildrand musst du einfach andere Einstellungen vornehmen:

    und





    NEOPETS, characters, logos, names and all related indicia
    are trademarks of Neopets, Inc., © 1999-2009.
    ® denotes Reg. US Pat. & TM Office. All rights reserved.
    PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
    Use of this site signifies your acceptance of the Terms and Conditions