Anzeige

Webseiten in Photoshop erstellen

Webseiten in Photoshop erstellen | PSD-Tutorials.de

Erstellt von dpie, 18.06.2008.

  1. dpie

    dpie Noch nicht viel geschrieben

    Dabei seit:
    17.06.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    Hallo!

    Ich habe beriets beide Tutorials auf der Seite erfolglos gelesen, ebenso das übers slicen.

    Ich beschreibe mal kurz wie weit ich komme. Ich erstelle ein Grunddesign mit Photoshop und slice das ganze (als Beispiel in 3 Teile [Navi, Top, Main]) und speichere das ganze "fürs Web".

    Was in keinen der Tutorials erklärt wird: WIE kann ich jetzt beispielsweise in Slice3 der Main heisst etwas per html hinzufügen? Es wäre wünschenswert wenn es ein Tutorial gäbe, das etwas mehr davon ausgeht das man diese Zusammenhänge nicht kennt :) Wenn ich es irgendwann verstehe, schreibe ich vielleicht selber noch eins dazu..

    Gruß
    dpie
     
    #1      
  2. DavidCaspar

    DavidCaspar Webdesigner

    Dabei seit:
    01.11.2007
    Beiträge:
    408
    Geschlecht:
    männlich
    Software:
    Adobe Design Premium CS 5
    Kameratyp:
    Canon EOS 350D
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Photoshop ist kein Homepageprogramm, wenn du wirklich eine gute Homepage bauen willst, fang hiermit an und arbeite es durch:

    SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

    Danach dürften all deine Fragen beantwortet sein :)
    Gut Ding will Weile haben
     
    Zuletzt bearbeitet: 18.06.2008
    #2      
  3. dpie

    dpie Noch nicht viel geschrieben

    Dabei seit:
    17.06.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Ich kenne Selfhtml und bin auch (rudimentär) mit html vertraut, es geht mir darum wie ich PS und html verbinden kann.
     
    #3      
  4. DavidCaspar

    DavidCaspar Webdesigner

    Dabei seit:
    01.11.2007
    Beiträge:
    408
    Geschlecht:
    männlich
    Software:
    Adobe Design Premium CS 5
    Kameratyp:
    Canon EOS 350D
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Nun wenn du meinst, dass du die Bilder die du quasi in Photoshop zerschnitten und abgespeichert hast, in html einbaust geht das mit folgendem html-tag: <img src="deinbild" alt="bild">
    Den <img> Tag dann noch in einen <div> container packen, diesen mit einer ID versehen und dann per css den div verschieben wohin du ihn halt haben möchtest. Hoffe, du meintest das? :uhm:

    Nochmal als Beispiel:

    <div id="bild">
    <img src="" alt="bild">
    </div>
     
    Zuletzt bearbeitet: 18.06.2008
    #4      
  5. xxsiv

    xxsiv Creative Director

    Dabei seit:
    12.07.2007
    Beiträge:
    230
    Geschlecht:
    männlich
    Ort:
    New York
    Webseiten in Photoshop erstellen
    #5      
  6. dpie

    dpie Noch nicht viel geschrieben

    Dabei seit:
    17.06.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Vermutlich ja, allerdings kenne ich mich dann doch nicht gut genug aus um zu wissen was div container sind und wie man die verschiebt, vermutlich werde ich doch noch ein bisschen Selfhtml pauken :)

    Falls jemand mir für das oben geschilderte Problem eine passende Antwort geben kann, würde mir das auch helfen :)

    (Hab den Post danach erst jetzt gelesen, danke das scheint zu sein was ich gesucht habe, englisch ist nicht schlimm, ich werde mich mal durcharbeiten und bei Fragen nochmal an euch wenden, danke erstmal für die zahlreichen schnellen Antworten und das noch zu dieser Zeit)

    Mir ist wohl bewusst, das dies zwei unterschiedliche Sachen sind, ich kann was Design und HTML/CSS angeht nur Grundlagen, wenn ich erstmal verstanden habe wie ich die zwei Sachen verbinden kann ist die Motivation natürlich größer, sich in beidem entsprechend weiter fortzubilden. Das Problem bei dem oben genannten Tutorial für mich ist wieder, das ich scheinbar in beiden Bereichen nicht genug weiß um die für mich wichtige Information herauszufiltern, da dort wieder ein ganzes Beispielprojekt durchgenommen wird, aber keine Grundlagen.
     
    Zuletzt bearbeitet: 18.06.2008
    #6      
  7. DavidCaspar

    DavidCaspar Webdesigner

    Dabei seit:
    01.11.2007
    Beiträge:
    408
    Geschlecht:
    männlich
    Software:
    Adobe Design Premium CS 5
    Kameratyp:
    Canon EOS 350D
    Webseiten in Photoshop erstellen
    #7      
  8. dpie

    dpie Noch nicht viel geschrieben

    Dabei seit:
    17.06.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Ich mein es genau andersherum, wie ich html Inhalte in die Slices von Photoshop bekomme :)

    Photoshop generiert mir ja eine index.html wenn ich es fürs Web speichere, aber egal was ich an html code hinzufüge, es ist nichts zu sehen. Als ob die Photoshopgrafiken das html überlagern würden.

    Wenn ich als Beispiel ein Design mit 2 Slices erstellt habe (Top, Main) und jetzt eine html Seite im 2ten Slice Main einbinden will, wie mache ich das?
     
    #8      
  9. DavidCaspar

    DavidCaspar Webdesigner

    Dabei seit:
    01.11.2007
    Beiträge:
    408
    Geschlecht:
    männlich
    Software:
    Adobe Design Premium CS 5
    Kameratyp:
    Canon EOS 350D
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Also html code in slices einfügen geht schonmal net *g* sclicen bedeutet,
    dass du nur das bild zerschneidest in mehrere Teile. Die Index die PS die erstellt, fügt dann nur die einzelnen Bildteile via <div> Container oder tabelle wieder zusammen wie ein Puzzle. Poste doch einfach mal den Quelltext deiner Index datei. Dann poste den code den du in die Index eingefügt hast oder einfügen willst. dann wird sich dir wohl eher helfen lassen ;)
     
    #9      
  10. dpie

    dpie Noch nicht viel geschrieben

    Dabei seit:
    17.06.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Also die Index besteht wie gesagt aus 3 Slices, PS generiert folgenden html code:

    ( http://alcatraz230.wohnheim.uni-kl.de/~dpie/1/test.psd )

    Code (Text):
    1.  
    2. <html>
    3. <head>
    4. <title>test</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    6. </head>
    7. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    8. <!-- ImageReady Slices (test) -->
    9. <table id="Tabelle_01" width="800" height="777" border="0" cellpadding="0" cellspacing="0">
    10.     <tr>
    11.         <td colspan="2">
    12.             <img src="Bilder/test_01.gif" width="800" height="165" alt=""></td>
    13.     </tr>
    14.     <tr>
    15.         <td>
    16.             <img src="Bilder/test_02.gif" width="196" height="612" alt=""></td>
    17.         <td>
    18.             <img src="Bilder/test_03.gif" width="604" height="612" alt=""></td>
    19.     </tr>
    20. </table>
    21.  
    22.  
    23.  
    24.  
    25. <!-- End ImageReady Slices -->
    26. </body>
    27. </html>
    Ich möchte jetzt gerne Content per HTML hinzufügen, als Beispiel einfach nur

    Code (Text):
    1. <a>Hier wird mal der Haupttext der Seite stehen</a>
    -> In den dritten Slice (test_03)

    Code (Text):
    1. <a href="index.html">home</a>
    -> Beispielsweise in den zweiten Slice links (zur Navigation)
     
    Zuletzt bearbeitet: 18.06.2008
    #10      
  11. quicky

    quicky Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2007
    Beiträge:
    222
    Geschlecht:
    männlich
    Ort:
    Mannheim
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Photoshop generiert dir eine Tabelle du musst den Text also in eine Zelle schreiben und nicht einfachd ranhängen..

    Ich würde dir aber empfehlen von PS nur die Grafiken speichern zu lassen und den rest selbst zu schreiben..
     
    #11      
  12. dpie

    dpie Noch nicht viel geschrieben

    Dabei seit:
    17.06.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Gut, das leuchtet mir ein. Wenn ich jetzt als Beispiel

    Code (Text):
    1.  
    2. <td><a>test</a></td>
    hinzufüge, zeigt er mir test auch an. Und wie bekomme ich den Text jetzt da hin, wo er hin soll? Es scheint mir so als ob die Grafiken aus Photoshop den Bereich "vereinnahmen" in dem eigentlich auch später Text stehen soll.

    Das hatte ich vor, ich wollte halt das Grundlayout in Photoshop entwerfen und den html/css Teil dann selbst schreiben.
     
    #12      
  13. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    vergiss die Tabellen und den von PS ausgegeben code und setze dein Layout in (x)html & css um...

    Warum CSS?

    hier mal ein grobes Gerüst

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html>
    3. <head>
    4. <title>New Document</title>
    5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    6. <style type="text/css">
    7.  
    8. body {
    9. background:url("images/bg.jpg"); <!-- Hintergrundgrafik //-->
    10. background-repeat:repeat-x;
    11. background-color: #fff;
    12. font-size: 16px;
    13. font-family: verdana, arial, helvetica, sans-serif;
    14. color: #000;
    15. margin: 0px auto;
    16. }  
    17.  
    18. /* Header */
    19.  
    20. #header{
    21. height: 180px;
    22. width: 900px;
    23. background-color:   #fff;
    24. background: url("images/header.jpg"); <!-- Headergrafik //-->
    25. background-repeat: no-repeat;
    26. margin: 0 auto;
    27. }
    28.  
    29. /* Textbreich  */
    30.  
    31. #content{
    32. width: auto;
    33. height: 900px;
    34. margin: 0 auto;
    35. padding: 20px 20px 20px 20px;
    36. }  
    37.  
    38. /* Navigation  */
    39.  
    40. #menu{
    41. height: 20px;
    42. background-color: red;
    43. color: black;
    44. margin:0 auto;
    45. padding-top: 5px;
    46. }
    47.  
    48. ul#menu{
    49. margin:0;
    50. padding:0;
    51. list-style-type:none;
    52. width:auto;
    53. display:block;
    54. text-align: center;
    55. height:20px;
    56. font-size:12px;
    57. font-weight:bold;
    58. font-family:Helvetica,Arial,Verdana,sans-serif;
    59.  
    60. }
    61.  
    62. ul#menu li{
    63. display:inline;
    64. margin:0;
    65. padding:0;
    66. }
    67.  
    68. ul#menu li a{
    69. display:inline;
    70. color:#000;
    71. text-decoration:none;
    72. padding: 0 20px 0 20px;
    73. height:20px;
    74. }
    75.  
    76. </style>
    77. </head>
    78. <body>
    79. <div id="header">
    80. </div>
    81.  
    82. <div id="menu">
    83.   <ul id="menu">
    84.     <li><a href="#">Home</a></li>
    85.     <li><a href="#">Home</a></li>
    86.     <li><a href="#">Home</a></li>
    87.     <li><a href="#">Home</a></li>
    88.     <li><a href="#">Home</a></li>
    89.     <li><a href="#">Home</a></li>
    90.   </ul
    91. </div>
    92.  
    93. <div id="content">
    94.  
    95. hier kommt dein Inhalt rein
    96.  
    97. </div>
    98.    
    99. </body>
    100. </html>
    richtig schick und übersichtlich wird es, wenn du die css-datei noch auslagerst...

    gute Seite zum Einstieg sind:

    CSS 4 You - The Finest in Stylesheets
    SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
    css-tutorials.de: CSS

    ...und hier gibts nen nettes Tutorials als ebook CSS Tutorial
     
    #13      
  14. dpie

    dpie Noch nicht viel geschrieben

    Dabei seit:
    17.06.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Also ist dein Tip komplett auf Tabellenbasierte Layouts zu verzichten und alles von Anfang an nur mit html und css umzusetzen? Danke für die Links!
     
    #14      
  15. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    jep das ist mein Tip ... :nick:

    und was heisst "nur" mit html und css?...*gg

    tabellen waren einmal...mit css bist du wesentlich flexibler...



    edit: btw. schieb ich das Ding hier mal in den Webbereich...
     
    #15      
  16. DavidCaspar

    DavidCaspar Webdesigner

    Dabei seit:
    01.11.2007
    Beiträge:
    408
    Geschlecht:
    männlich
    Software:
    Adobe Design Premium CS 5
    Kameratyp:
    Canon EOS 350D
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Lad dir vielleicht auch mal die Testversion von Dreamweaver CS 3 bei Adobe herunter, damit lässt es sich etwas einfacher coden.
     
    #16      
  17. Maxerateur

    Maxerateur Noch nicht viel geschrieben

    Dabei seit:
    29.07.2006
    Beiträge:
    11
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Ich persönlich benutze Weaverslave. Keine Hammer-Funktionen, aber das Programm ist kostenlos und tut was es tun sollte.
    Hebt halt Tags farblich hervor, man kann mit einem Farbregler Hexadezimalwerte testen etc.
    Ich kanns aber empfehlen.
     
    #17      
  18. Hansi05

    Hansi05 Aktives Mitglied

    Dabei seit:
    18.06.2006
    Beiträge:
    623
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    An kostenlosen Programmen kann ich Dir Phase5 wärmstens empfehlen, nutzen wir in der Schule ... erleichtert die Arbeit ungemein, man muss weniger nervige Codes suchen weil das Programm diese selbst erstellt, CSS-Datei einfach in den Head schieben und schon steht der Code da, das gleiche gild für Links und wenn ich mich recht erinnere auch Bilder ;)
     
    #18      
  19. McSteel

    McSteel Noch nicht viel geschrieben

    Dabei seit:
    27.03.2008
    Beiträge:
    15
    Geschlecht:
    männlich
    Ort:
    weiß ich nicht
    Software:
    Adobe Photoshop & Paint.NET
    Kameratyp:
    Canon EOS 1000
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Jetzt habe ich auch einiges dazu gelernt, wie man mit "slicen" und div Tags die Webseiten optimiert. Coool.....

    Vielen Dank Tattoomaus78

    Freeware Editoren:
    - Notepad2 - light-weight Scintilla-based text editor for Windows -> flo's freeware
    - Weaverslave 3.9.18 -> Weaverslave - Home/News

    Grafikprogramm zum zerschneiden von Grafiken:
    - Ultrasnap = [FONT=verdana,arial,helvetica]30 Day Trial version[/FONT] -> UltraSnap PRO - professional screen capture tool
     
    Zuletzt bearbeitet: 19.06.2008
    #19      
  20. dpie

    dpie Noch nicht viel geschrieben

    Dabei seit:
    17.06.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Webseiten in Photoshop erstellen
    AW: Webseiten in Photoshop erstellen

    Habt ihr auch Softwaretips für Linux?
     
    #20      
x
×
×