Anzeige

Simples? Weblayout

Simples? Weblayout | PSD-Tutorials.de

Erstellt von jogiebaer, 13.10.2008.

  1. jogiebaer

    jogiebaer Noch nicht viel geschrieben

    Dabei seit:
    13.10.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    Software:
    Photoshop CS3
    Simples? Weblayout
    Hallo,

    mein erster Beitrag^^

    Ich hab vor eine Webseite zu erstellen, Kenntnisse in HTML, CSS, PHP sind eigentlich mehr als genug da:)

    Ich hab hier ein Muster wie die Seite aussehen soll
    Könnt ihr mir da bitte helfen wie ich das machen muss? Habe bisher noch nie mit CS3 gearbeitet.

    [​IMG]

    Der Kasten soll nactürlich etwas moderner sein als die Skizze es zeigt

    Hoffe ihr könnt mir hier helfen.
    Hab auch mal in die Tuts geguckt aber das wird mir scheinbar dort nich behandelt......

    Gruß
     
    #1      
  2. hyperactive

    hyperactive Fotojäger

    12111
    Dabei seit:
    28.03.2008
    Beiträge:
    2.915
    Geschlecht:
    weiblich
    Ort:
    NRW
    Kameratyp:
    Canon EOS 60D, CANON EOS 450D, Olympus C-500 Zoom, Casio EX-FH20, div. digitale und analoge Kameras
    Simples? Weblayout
    AW: Simples? Weblayout

    Hi!
    Eine konkrete Frage, die mich trotzdem ratlos zurückläßt.

    Darf ich mal nachfragen, was genau Du suchst....
    Also, Du beherrscht HTML und CSS. Dann kannst Du die technischen Probleme alle lösen. Ich kann daher nicht empfehlen, eine Website in PS zu erstellen und zu slicen. Der Code läßt Dir die Haare zu Berge stehen.

    Es gibt jetzt mehrere Möglichkeiten - hauptsächlich 2 - , wie Du PS sinnvoll und effektiv einsetzen kannst.
    Ich habe eine Website beispielsweise mit einer Kombi aus beiden Methoden schön aufgepeppt.

    Du kannst alle Design-Elemente in PS erstellen, abspeichern und in HTML und CSS einbetten.
    Du kannst einen Hintergrund erstellen, auf dem Du dann Deine Page aufsetzt (drüberlegen, mehr nicht).

    Ich habe beispielsweise eine Seite im Grunge-Look gestaltet, indem ich erst einen Hintergrund gebastelt habe, der einfach als Hintergrundgrafik über schwarzer Grundfarbe eingefügt ist. Weil seine Ränder schwarz auslaufen, ergibt das bei jeder Bildschirmgröße ein gutes Gesamtbild.

    Dann habe ich die einzelnen Elemente, beispielsweise die Buttons, jeweils in PS erstellt und als Grafiken eingebettet.

    Beim Erstellen des Hintergrunds habe ich mir vorher das Layout mit genauen Pixel-Zahlen erstellt. Dann habe ich in PS Hilfslinien an diese Stellen gesetzt und im Grunde mein Raster gehabt. Vorsicht mit Browserkompatibilität, denn die Grafik muss Platz lassen für unterschiedlich verstande Ränder, Scrollbalken, etc. Aber die Hintergründe kennst Du ja sicher.

    Mein Beispiel ist hier: www.hyperactivity.de

    Vorteil ist auch, dass ich dem Ganzen demnächst mal einen frischen Look verpassen kann, indem ich das Hintergrundbild austausche und sonst nichts. Oder Unterrubriken mit einem eigenen Bild hinterlegen könnte, ohne auch nur das CSS umschreiben zu müssen.

    Geht das so in die Richtung, die Dir vorschwebt? Ich bin gespannt.
     
    #2      
  3. jogiebaer

    jogiebaer Noch nicht viel geschrieben

    Dabei seit:
    13.10.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    Software:
    Photoshop CS3
    Simples? Weblayout
    AW: Simples? Weblayout

    Hmm erstmal danke für die antwort.
    Ich bin mit nicht so ganz sicher das das mit css gehen wird was ich vorhabe.
    Oder meine Kenntnisse reichen dann doch nicht soo weit.
    Der kasten solll z.B. abgerundet sein und link oben und rechts unten ein strich nach außen gehen!

    Es soll auch nicht die komplette Webseite dann in diesem Layout sein, deshalb denke ich das wenn es geschnitten ist ich keine Probleme hab den Link beim Login einzufügen.
    Wenn man eingelogt ist baue ich etwas mit CSS/HTML
    Es soll hauptsächlich die 1. Seite in diesem hammerlook sein.
     
    #3      
  4. hyperactive

    hyperactive Fotojäger

    12111
    Dabei seit:
    28.03.2008
    Beiträge:
    2.915
    Geschlecht:
    weiblich
    Ort:
    NRW
    Kameratyp:
    Canon EOS 60D, CANON EOS 450D, Olympus C-500 Zoom, Casio EX-FH20, div. digitale und analoge Kameras
    Simples? Weblayout
    AW: Simples? Weblayout

    Ich kann auch keine abgerundeten Ecken in CSS - hab ich schon mal nach gesucht, auch hier, aber mit dem Ergebnis, dass es eh fast kein Browser verstanden hätte.

    Aber was hältst Du denn davon, wenn Du einfach ein Bild hinter Deine Texte legst und die Texte genau in die richtigen Zonen des Bildes positionierst?
    Du kannst ja für Deine Startseite eine eigene CSS-Datei schreiben, wenn Du da ein völlig anderes Layout haben willst. Recht einfach, denke ich.

    In einem solchen "Grundbild" brauchst Du nur eine einzige Datei einbinden (oder noch Buttons), aber es kann sich nichts verschieben, nichts ausfallen, etc.

    Ich würde dazu einfach nur bei der Erstellung des Bildes auf schöne Verteilung der Proprotionen achten und dann mit CSS oder Tabelle das Layout entsprechend schreiben.

    Mit dem Einsatz von CSS meine ich aber nur: Wohin kommt der Text, welche Schriftart, welcher Textfluss, etc. nicht das Layout selbst.
     
    #4      
  5. jogiebaer

    jogiebaer Noch nicht viel geschrieben

    Dabei seit:
    13.10.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    Software:
    Photoshop CS3
    Simples? Weblayout
    AW: Simples? Weblayout

    Stimmt an das Texte positionieren hab ich gar net gedacht
    Jetzt weiß ich nur noch wie ich das Layout erstelle, also den Kasten mit dem Strich links oben und rechts unten
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Simples? Weblayout
    AW: Simples? Weblayout

    tja, da kommt wirklich ratlosigkeit auf! mehr als genug Wissen über HTML/CSS und PHP kann man gar nicht haben (umfassendes vollständiges Wissen finde ich schon fast unmöglich...)
    ich würde auch bei diesem einfachen Layout eine ganz klassische Lösung nehmen:
    wrapper(div) aussenrum, header(div) mit dem Schriftzug, content(div)mit zwei floats(div) für den linken und rechten bereich, "footer"(div) für die kleinen Links drunter - fertig.
    mit 'mehr als genug' Wissen umdie Thematik sollte daskein Problem sein.
     
    #6      
  7. hyperactive

    hyperactive Fotojäger

    12111
    Dabei seit:
    28.03.2008
    Beiträge:
    2.915
    Geschlecht:
    weiblich
    Ort:
    NRW
    Kameratyp:
    Canon EOS 60D, CANON EOS 450D, Olympus C-500 Zoom, Casio EX-FH20, div. digitale und analoge Kameras
    Simples? Weblayout
    AW: Simples? Weblayout

    Hab ich gemerkt ;)

    Für einen Rahmen mit runden Ecken hast Du in PS verschiedene Möglichkeiten, würde ich sagen.

    Das eigene-Form-Werkzeug oder eine rechteckige Auswahl und Kreissegmente, die Du einfügst, oder einen Pfad, den Du anlegst und dann in die passende Symetrie spiegelst, ...

    Am leichtesten ist sicherlich das eigene-Form-Werkzeug. Zieh die Grundform Deiner Fläche auf. Wenn Du dann nur den Rahmen willst und keine Füllung, dann lad die Form als Auswahl, wandle die Auswahl zum Pfad um und zieh den Pfad mit einem Brush nach.

    Oder lade die Auswahl aus der Form, geh auf Verändern und klicke "Border". Dann bekommst Du einen "Korridor" neben Deiner Auswahl, den Du füllen kannst.

    Oder Du ziehst eine Fläche auf, stellst die Füllung auf 0 % und setzt über Ebenenstile > Stroke einen Rahmen drum.

    Endlose Möglichkeiten. Viel Spaß dabei.

    Aus rein optischen Gründen könnte ich mir gut vorstellen, dass die Tabellenfelder gefüllt sind, vielleicht einen Schlagschatten bekommen, aber gar keinen Rand, das Ganze Ton in Ton gearbeitet - oder auffälliger mit starkem Kontrast, aber ich hatte gerade an Lindgrün für den Hintergrund und Oliv für die Felder gedacht. (Als meine Version, die sicher nicht zu Deinen Vorstellungen paßt).
     
    #7      
  8. Riku992

    Riku992 Guest

    Simples? Weblayout
    AW: Simples? Weblayout

    es gibt doch video tutrials wo man lernen kann weblayouts macht und sie mit css coden tuht^^ so kann man das am einfachsten lernen ^^
     
    #8      
  9. Lusche

    Lusche Noch nicht viel geschrieben

    Dabei seit:
    14.08.2007
    Beiträge:
    13
    Geschlecht:
    männlich
    Simples? Weblayout
    AW: Simples? Weblayout

    Sorry, aber das ist Blödsinn. Learning by doing. Sehen und verstehen. So etwas kann man nicht durch Videos erlernen. Das erlebt man und benötigt entsprechend Zeit.
     
    #9      
  10. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    Simples? Weblayout
    AW: Simples? Weblayout

    Von Videos zum Thema Programmierung & Co. halte ich auch wenig, da passt einfach zu wenig relevante Information rein. Ich kann kreatives Abschreiben nur empfehlen: such dir ne Seite, die in etwa deinen Vorstellungen entspricht, wühl dich durch den Code, und schau wie andere spezielle Probleme lösen. Hat bei mir prima funktioniert.
     
    #10      
x
×
×
teststefan