Aller erstes Design!

  • Hallo,

    ja nun bin ich 20 Jahre alt und seit dem ich 14 oder 15 Jahre bin, hab ich mit Webseiten zu tun. Dann hab ich mir einfach mal jetzt ein Tutorial angesehen und herauskam folgendes Design... na ich muss sagen ein bisschen hat ein Kumpel auch geholfen mir erklärt wo ich dies und jenes finde aber im großen und ganzen hab ichs selbst gemacht :)

    [Blockierte Grafik: http://www.autmax.de/images/design.jpg]

    Jetzt muss ichs nur noch slicen und coden. :P Wobei ich das coden doch ziemlich schwierig finde... könnte sich da einer von euch zu bereit erklären? :)

    MfG
    Autmax

  • Hallo Autmax,


    erstmal Glückwunsch zum ersten Design. Auf mich wirkt es etwas zu dunkel, ich hätte vielleicht noch ein helleres Grau oder eine Farbe (blau oder orange) miteinbezogen aber das sieht jeder anderes. Trotzdem ist es natürlich schön.


    Wenn Du Dich mehr mit Templates beschäftigen möchtest, dann solltest Du Dir die Zeit nehmen auch auch das technische (Coden) lernen. Dann kannst Du Designs erstellen und auch umsetzen. So bist du nicht auf andere angewiesen.


    Solltest Du anfangen und dann fragen haben stehen Dir viele Mitglieder hier sicherlich gerne zur Verfügung. Komplett alleine Coden würde ich persönlich jedoch ablehnen.

  • Hallo,

    danke! Ja ich hab das Design wie gesagt nach nem Tut gemacht, aber mit meinem eigenen Stil versehen. Sprich es entstand wieder ein ganz eigenes!

    Wenn man es slict und dann als Web speichert ist alles ja nur als Image... wie sollte ich denn da am besten anfangen??

  • Zitat von Autmax;30346

    wie sollte ich denn da am besten anfangen??


    Einmal überlegen welche Elemente du nicht als Bild brauchst, die du direkt mit CSS umsetzen kannst. Und dann arbeitest du dich langsam an alles heran. Gute Lektüre: SelfHTML :)



    MfG Christian

    "Wer nur noch Enten sieht, hat die Kontrolle über seine Server verloren." (Netzentenfund)

  • Möchtes du es an ein eigenes CMS oder an ein vorhandenes CMS anpassen und wenn ja welches? :D


    Auch wenn ich das Designen kaum kann finde ich es bis auf deine Kreise gut der Übergang ist meiner Ansicht misslungen .

  • Hey Proyx

    Schau dir das Bild nochmal an. Habs ausversehen als *.gif hochgeladen, da wars dann lila.

    Ich will es an WordPress anpassen. Aber das kann ich selbst. Nur dass mir das jemand codet wäre echt super. Dann kann ich nämlich sehen wie es geht... ^^ kannst du es ?

  • hi,
    slicen ist überhaupt kein Problem, wenn Photoshop das vernümpftig könnte :D

    Bei deinem Bild ist es relativ einfach.
    Ich würde an deiner Stelle damit anfangen eine Tabelle zu erstellen die vom Aufbau her zu deinem Template passt. Dann fängst du an und schneidest die Grafiken in kleine häpchen, so dass sie deine Tabelle füllen
    padding=0 und spacing=0 helfen dir dabei enorm.
    Wenn du das fertig hast, dann schaust du dir an wo welcher Text reinkommst und verlegst die Bilder in den Hintergrund und passt den text an.
    So arbeitest du dich stück für stück ran und am ende hast du es in deiner webseite integriert.

    Das ist zwar nicht sonderlich professionell, aber du lernst einiges, das vor allem auch Einfluss auf deine späteren Arbeiten haben wird.

    So wie ich das sehe, hast du die ûberschriften atm. als Bild mit effekten, sowas ist später einfach unpraktisch bzw. nicht umsetzbar.
    Aber ansonsten ganz nett für den Anfang.

  • Zitat von Homwer;30660

    hi,
    slicen ist überhaupt kein Problem, wenn Photoshop das vernümpftig könnte :D

    Bei deinem Bild ist es relativ einfach.
    Ich würde an deiner Stelle damit anfangen eine Tabelle zu erstellen die vom Aufbau her zu deinem Template passt. Dann fängst du an und schneidest ...


    Das kann doch Photoshop auch?


    Musste mal Googeln PS hat verschiedene Einstellungen was das angeht.


    Einmal über div tabelle usw usw.
    Bei den Tabellen bekommste glaube ich auch eie CSS datei mit nummerierten Tabellennamen.


    Habe es selbst so gemacht ... der Code ist bisschen Primitiv aber naja ...


    Eleganter fände ich, wenn das Template komplett im Css geschrieben wäre.


    MfG

  • na türlich kann Photoshop das auch, allerdings schaut es dann auch dementsprechend aus und der Lerneffekt ist = 0

    Gut ich sehe gerade meine Version 6 ist nicht mehr ganz zeitgemäß, aber sie ist bezahlt und macht was sie soll :D
    Sie erstellt aber immernoch platzhalter grafiken und das nicht zu knapp.
    Einfach weil padding / spacing = 0 nicht benutzt werden.

    Das ganze in CSS umzusetzen wäre schon professionel und ich finde CSS-Boxen in der aktuellen version einfach zu kompliziert für den Einstieg.
    Aber vieleicht könnte der Ersteller mal sagen wie weit er ist.

  • So liebe Freunde!
    Tut mir Leid, habe in letzter Zeit viel zu tun gehabt im privaten Leben, weshalb dies auch der Grund ist, wieso ich gerade mit dem Design nicht weiter gekommen bin.

    Habe mir nun eure guten Vorschläge durchgelesen und dankbar entgegen genommen. Das mit den Tabellen erstellen und Ausfüllen verstehe ich. Jedoch das mit dem CSS: Wie müsste man da rangehen? Slicen ist für mich kein Problem, jedoch hab ich ja da im Inhalt abgerundete Bilder. So dann als Web speichern und dann isses ja quasi schon zurecht gemacht... nur wie soll ich das "Bild" was eigtl der Text sein sollte eben weg machen um dort nen Text zu machen und sowas? ^^

  • Hi,
    Ich gehe mal davon aus, dass du dich grundlegend mit CSS beschâftigt hast.
    Also wie entsteht ein Layout auf <DIV> boxen und wie legt man diese an und die größe fest.


    Jetzt musst du das Bild in so viele Einzelteile zerlegen, dass es passt.
    Also alleine für das Feld in dem der Text ist, brauchst du, alle 4 Ecken als Bilder, jede Seite einmal usw.
    Dann erstellst du eine Box und darin 9 Felder. 3x3
    1: Ecke oben Links
    2: Grafik oben
    3 Ecke oben rechts


    4: Grafik Links
    5 Mitte (dein Text kommt hier rein) da also nur ne Hintergrundfarbe
    6 Grafik Links


    7,8,9 wie oben nur mit unteren Elementen


    Das war's an sich. Dr vortei so einer Box ist, dass du sie in jede Richtung skalieren kannst.


    Alternstiv kannst du auch (wenn es feste Größen sind) nur ein Bild als Hintergrund nehmen und dann mit Padding (Abstand zum Rand) arbeiten.


    Ich hoffe das hilft dir weiter.