Anzeige

Über Photoshop-Design schreiben?

Über Photoshop-Design schreiben? | PSD-Tutorials.de

Erstellt von SvA, 12.03.2005.

  1. SvA

    SvA Guest

    Über Photoshop-Design schreiben?
    Hi!

    Ich habe mir mit Photoshop 7.0 ein Design für eine Homepage designt.
    Besser gesagt ist es nur ein Grundgerüst. Habe es von ImageReady als HTML-Datei erstellen lassen. So sieht's momentan aus:
    http://homepage.sunrise.ch/mysunrise/elwinzo/NeueHP/FERTISCH.html

    Nun, ich weiss, sieht nicht gut aus, habe auch erst grad mit Webdesign/Photoshop angefangen.

    Nun wie man erkennen kann, hat ImageReady das Design in Tabellen eingeteilt.
    Nun aber - wie zum Teufel kann ich z.B. darüber schreiben?
    Oder ich habe mir Buttons gemacht, ich möchte diese nun in diese ovale Etwas (Von mir als Navigation vorgesehen) legen. Nur geht das irgendwie nicht - weder über CSS (mit so IDs und absoluten Positionierungen) oder direkt in die Tables geht's.
    Wie kann ich das trotzdem tun?
    Oder muss ich das ganz anders machen (z.B. das Design als Hintergrund)?
    Ich wäre froh wenn mir jemand weiterhelfen könnte.
    Wäre super! :)

    Gruss SvA

    P.S. Könnte sonst auch .psd-Datei liefern, damit jemand mir jemand das Zeugs grad in eine HTML-File packen könnte :oops:
     
    #1      
  2. webdesign

    webdesign Aktives Mitglied

    Dabei seit:
    06.03.2005
    Beiträge:
    1.474
    Geschlecht:
    männlich
    Ort:
    DE
    Kameratyp:
    Nikon D70
    Über Photoshop-Design schreiben?
    Hallo,
    also die Idee ist net schlecht, doch das Design ist grausam....
    Du muss die Farben mehr amonieren lassen und nicht so ne besch.. Schrift nehmen.

    MfG webdesign :D
     
    #2      
  3. Guest

    Guest Guest

    Über Photoshop-Design schreiben?
    Hm... habe schon einiges ausprobiert, was würdest denn du nehmen?

    Aber du weisst doch sicher die Antwort auf meine eigentliche Frage!
     
    #3      
  4. SvA

    SvA Guest

    Über Photoshop-Design schreiben?
    Argh, das war eigentlich mein Post :(
     
    #4      
  5. Paccoo

    Paccoo Punktedealer

    Dabei seit:
    26.12.2004
    Beiträge:
    4.093
    Geschlecht:
    männlich
    Ort:
    Austria
    Über Photoshop-Design schreiben?
    grundsätzlich mal einen hellen hintergrund. ich "hassen" nichts mehr, als wenn ich stänig gegen diese dunkle wand starren muss.

    bei der schift kannst du rühig auch schlicht bleinen (Arial & Co) oft ist weniger mehr.

    Paccoo
     
    #5      
  6. webdesign

    webdesign Aktives Mitglied

    Dabei seit:
    06.03.2005
    Beiträge:
    1.474
    Geschlecht:
    männlich
    Ort:
    DE
    Kameratyp:
    Nikon D70
    Über Photoshop-Design schreiben?
    Hallo,

    also text kannst darüber legen in einer neuen Ebene. Ansonsten rate ich Dir einfach mal hier zu schaun:

    http://de.selfhtml.org/

    Da kannst das genauer nachlesen... bzw. das was Du brauchst.

    MfG webdesign :D
     
    #6      
  7. TeraVolt

    TeraVolt Noch nicht viel geschrieben

    Dabei seit:
    22.01.2005
    Beiträge:
    28
    Über Photoshop-Design schreiben?
    Hallo SvA,

    Das ist garnicht so schwer. Momentan ist der Innhalt der Tabellenzelle deine Grafik. Das könntest du jetzt so ändern, dass die Grafik der Hintergrund (das Wallpaper) der Tabellenzelle ist. Dein Text wird dann zum Innhalt der Tabellenzelle. 2 Fliegen mit einer Klappe.

    momentan sieht das für die "Main" box so aus:

    Code (Text):
    1.  
    2. <TD COLSPAN=3 ROWSPAN=2>
    3.         [img]images/FERTISCH_08.gif[/img]</TD>
    4.  
    Wenn du das jetzt änderst in:
    Code (Text):
    1.  
    2. <TD COLSPAN=3 ROWSPAN=2 style="width:438px; height:657px; background-image:url(images/FERTISCH_08.gif)">
    3.         Hier kannst du jetzt soviel schreiben wie es der Platz zulässt</TD>
    4.  
    siehst du den unterschied? Allerdings musst du jetzt höhe und breite der Tabellenzelle extra angeben, weil man für Hintergrundbilder keine Größenangaben machen kann.

    Schau dir dazu speziell mal http://de.selfhtml.org/html/tabellen/gestaltung.htm#hintergrund an.

    Schöne Grüsse,
    Harald
     
    #7      
  8. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    Über Photoshop-Design schreiben?
    zum design: du bist wohl auch mit 1280*1024 unterwegs...mir kam das ganze gleich mal ungewohnt groß vor. bei mir passts auf den bildschirm, aber andere, die mit 1024*768 unterwegs sind, werden das sicher nich so toll finden. die schrift finde ich persönlich in ordnung, solange es nicht mehr wird als bisher zu sehen ist.
    aber ich kann nur hoffen, dass die 2. schriftart dann mit dieser recht ungwöhnlichen schrift harmoniert.

    mir würde auch die farbgestaltung nichts ausmachen, aber jeder hat seinen eigenen geschmack (und manchmal weich ich ziemlich weit von der masse ab) und wenn jetzt noch weitere leute kommen, denen das nich gefällt, würde ich evt doch was augenfreundlicheres nehmen :)

    ansonsten nich schlecht für jemanden, der mit photoshop anfängt :D
     
    #8      
  9. SvA

    SvA Guest

    Über Photoshop-Design schreiben?
    Hi!

    Erstmal vielen Dank für Eure Rückmeldungen!

    Habe nun mit Dreamweaver Ebenen über das Bild gelegt, nur sehen die halt mit verschiedenen Auflösungen ziemlich verzerrt aus.
    Also habe ich mal die Seite grafisch leicht abgeändert und sie an Zwei Auflösungen angepasst:
    http://homepage.sunrise.ch/mysunrise/elwinzo/NeueHP/Blau/index.html

    Weitere Auflösungen, naja... 1152x864 werde ich wohl noch machen, aber für 1600x1200 kann ich net, weil ich keinen so grossen Bildschirm haben & für 800x600 oder gar noch kleiner ist die Website einfach ungeeignet.Habe gehört, dass man über Javascript die Auflösung eines Besucher erkennen kann, wie ginge das?
    Würde mich erneut über Verbesserungsvorschläge freuen!

    Gruss SvA
     
    #9      
  10. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    Über Photoshop-Design schreiben?
    die links auf der (funkierenden) seite gehen nich...

    aber die auswahl ließe sich sicher auch mit javascript umsetzen :)
     
    #10      
  11. SvA

    SvA Guest

    Über Photoshop-Design schreiben?
    Jop, gehen noch net... ist ja auch erst ein Entwurf.
    Und wie ginge das jetzt mit den Frames?
    Wie ein Frameset funktioniert etc. weiss ich schon, aber ich möchte jetzt. z.B. der mittlere Teil (Main) als Frame benutzen...
     
    #11      
  12. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    Über Photoshop-Design schreiben?
    ah..eben gehts..ich hab die links auf der verlinkten seite gemeint ("1024" und "1280")

    für das mit dem frame guckst du dir den code an, was treavolt gepostet hat.

    Code (Text):
    1. <TD COLSPAN=3 ROWSPAN=2 style="width:438px; height:657px; background-image:url(images/FERTISCH_08.gif)">
    2.         Hier kannst du jetzt soviel schreiben wie es der Platz zulässt</TD>
    würd ich aber umwandeln zu
    Code (Text):
    1. <TD COLSPAN=3 ROWSPAN=2 style="width:438px; height:657px; background-image:url(images/FERTISCH_08.gif)"><iframe src"deinecontentfile.htm"></iframe></TD>
     
    #12      
  13. SvA

    SvA Guest

    Über Photoshop-Design schreiben?
    Oook... da wartet ja noch ein ganzes Stück Arbeit auf mich :?

    jo, vorhin hats net funktioniert, weil ich auf index1024.html bzw index1280.html anstatt index1024.htm/index1280.htm gelinkt habe :roll:

    Zum Anderen -
    das Iframe wäre jetzt also das gesamte Hintergrundbild, also "width:438px; height:657px"? Kann ich das irgendwie eingrenzen, weil sonst schreib ich über die Ränder der Figur... :?
     
    #13      
  14. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    Über Photoshop-Design schreiben?
    hmm da könntest du

    a) neu slicen, sodass du ein xtra-slice für den content-bereich (=iframe) hast, oder

    b) noch einen layer nehmen
     
    #14      
  15. maik

    maik Nicht mehr ganz neu hier

    Dabei seit:
    08.02.2005
    Beiträge:
    158
    Geschlecht:
    männlich
    Ort:
    IZ im Norden
    Kameratyp:
    Samsung Digimax D 530
    Über Photoshop-Design schreiben?
    warum benutzt du kein css damit klappt das auf alle fälle auch mit den ebenen und laß dir die Html datei nicht von imageready ausgeben, sondern nur die geslicten bilder und pack sie selber in eine tabelle, da der code von imageready der letzte dreck ist(meine Meinung).
    Und mit den absoluten positionsangaben mit layern würde dir das aufalle fälle gelingen.
    Als schrift würde ich eine Impact oder Verdana wählen aber nicht sowas total unlesbares. Am besten beschäftigst du dich erstmal mit dem Thema css und erstellst dann deine Hp. Nicht böse gemeint, aber erst in die Materie einlesen und dann anfangen zu coden.
     
    #15      
  16. SvA

    SvA Guest

    Über Photoshop-Design schreiben?
    Hm, die Layer haben schon ihre abosluten Positionen, aber halt net über CSS.

    Edit: Öhm, ist es Absicht, dass in deinem obigen Post bei

    <iframe src"deinecontentfile.htm"></iframe>


    bei src kein = gesetzt wurde?
     
    #16      
  17. YoungSpirit

    YoungSpirit Guest

    Über Photoshop-Design schreiben?
    Also, ich möchte mich auch mal melden ;)

    Die Beispielseite die im Ausgangspost angegeben wurde, gefällt mir doch recht gut!
     
    #17      
  18. Askalon

    Askalon Aktives Mitglied

    Dabei seit:
    20.12.2004
    Beiträge:
    312
    Ort:
    München
    Über Photoshop-Design schreiben?
    Hi
    wenn du dir schon die Mühe machst das du für verschiedene Auflösungen programierst,dann solltest du es auch tun.Ich muss immer noch nach rechts scrollen und dann solltest du dir auch die Mühe machen die Grafiken zu verkleinern.
    Das ist der Sinn dabei wenn man für verscheidene Auflösungen baut.
    bei einer 1024er Auflösung sehe ich den oberen banner,deine Navigation und die Überschriften deiner Blöcke. Und das interesiert niemanden.

    Der Sinn einer Homepasge ist es Informationen zu übermitteln.
    Und nicht übergrosse Banner,-Navigationen und und Lücken zwischen der beiden zu präsentieren.
    Das ganze schaut aus als wäre es für sehschwache Kinder geschaffen.
    lerne doch erstmal html und mache dein html-Grundgerüst.mit Frames etc . wie du es haben willst.
    wenn du dann deine Grafiken gesliced hast, dann baust du das in deine Seite als background ein.

    du fährst ja auch nicht Porsche bevor du zur Fahrschule gehst.

    nicht böse sein das es bissl giftig klingt, soll kein Angriff gegen dich persönlich sein,nur eine harte Kritik.

    gruss
     
    #18      
  19. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    Über Photoshop-Design schreiben?
    nein, keine absicht..tschuldigung :wink:
     
    #19      
  20. SvA

    SvA Guest

    Über Photoshop-Design schreiben?
    Jo, wieder vielen Dank für eure Rückmeldungen!

    Ich kann mit Frames umgehen, nur als ich auf vielen anderen Pages sah, dachte ich, dass ich es auch besser von Photoshop ausgeben lasse. Ich finde ich kann HTML, wenigstens mehr als die Grundlagen :wink: , nur von CSS habe ich sehr wenig Ahnung. Kann zwar meist sagen, was dieser oder jener Teil einer CSS-File bedeutet, aber selber proggen kann ich und will ich net... Lass ich besser vom DW generieren.

    Nun zum anderen, die Page sieht schon lange nicht mehr so aus - ich habe die Grafiken in den Hintergrund verschoben, mit Ebenen gearbeitet und iFrames drüber gelegt. Habe ein bisschen mit HoverLinks und Rollovern rumprobiert. Das Design sollte jetzt um einiges leichter wirken.
    Übrigens - Die Ebenen und Grafiken sind sogar mit CSS definiert ;-)

    Habe aber noch eine Frage:

    Ich möchte, dass immer ein Foto gezeigt wird, und dann nach z.B. 30 Sekunden das nächste. Weiss zwar, dass das mit PHP möglich ist, aber geht es nicht auch ohne? Weil von PHP habe ich so gut wie keine Ahnung.
    Aber PHP-Webspace wäre kein Problem. Ich könnte es ja als .gif machen, aber würden so 40 Fotos à 200x100 nicht ein bisschen gross werden?

    THX schon mal im Voraus!

    Gruss SvA
     
    #20      
Seobility SEO Tool
x
×
×