Anzeige

PSD als Html mit links etc. HILFE !!!

PSD als Html mit links etc. HILFE !!! | PSD-Tutorials.de

Erstellt von Dusk47, 06.02.2009.

  1. Dusk47

    Dusk47 Guest

    PSD als Html mit links etc. HILFE !!!
    Hallo! Ich hab mit Photoshop ein design für eine Website gebaut, und habe auch "gesliced" . Soweit so gut. Dann wollte ich es für "Web und geräte Speichern" aber dann stürzt das programm jedes mal ab.

    Gibt es irgendein anderes programm, mit dem ich ohne große html kenntnisse die Buttons verlinken kann bzw. hat jemand einen Tipp wo ich eine Step by Step anleitung her bekomme, in der von anfang bis ende erklärt wird wie genau ich meine HP fertig machen kann um sie ins netz zu stellen? Also quasi von PSD zu html. Auch mit Webspace, die ganzen sachen die man halt dafür machen muss? Ich habe geringe html kenntnisse und weiss im großen und ganzen egtl wie das alles funktioniert, ich brauche jedoch ein bissel "starthilfe"... Ich habe mein design mal als grafikanhang hier hinzugefügt. Ich hoffe wirklich dass mir hier jemand weiterhelfen kann, dafür wär ich extrem dankbar, bin am verzweifeln... DANKE für die Aufmerksamkeit! Gruß nick

    BILD: http://img24.imageshack.us/img24/2010/69377016ma7.jpg
    [​IMG]
     
    #1      
  2. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    In Advanced Photoshop Ausgabe 12 Dezember 2008 ist es anhand eines Beispiels genau erläutert. Ohne großartige HTML Kenntnisse schaffst du es auch mit Dreamweaver, KnowHow darf einem aber auch da nicht fehlen...

    PS: Design gefällt mir!
    Edit: In der neuen Ausgabe der Photoshop und der ct extra Webdesign sind jeweils Videotutorials von Video2Brain enthalten, welche die Schritte ebenfalls genau erläutern.
     
    #2      
  3. Dusk47

    Dusk47 Guest

    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    Erst mal danke fürs Kompliment, habe mir auch sehr viel mühe gegeben.

    Kann ich meine PSD datei in Dreamweaver bearbeiten? Oder muss ich es als JPG speichern? Sorry ich bin egtl ein noob was diese dinge angeht, aber ich hab schon ein paar html kenntnisse, noch aus schulzeiten. Ich bekomm langsam kopfschmerzen ich weis gar nicht wie ich an die sache rangehen muss... Am besten wäre eine genaue erklärung an die ich mich halten kann, um noch heute abend eine rohversion meiner Hp zu haben.

    Ich hab jetzt meine PSD Datei
    Brauche ein Programm, mit dem ich diese datei weiter verarbeiten kann.
    HILFE ! Thx
     
    #3      
  4. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    Oh man, also bis heute Abend siehts schlecht aus, die Beschreibung würde auch das Tutorial sprengen, weisst ich kann dir nur sagen du musst das Bild zerschneiden slicen und die einzelnen elemente in eine Tabelle einfügen dazu kann ich dir Fireworks empfehlen zum zerschneiden... wenn du dich mit html auskennst dann kannst ja nen Code von ner Tabelle schreiben
    <table border="0">
    <tbody>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </tbody>
    </table>
    Der wäre jetz für deine geeignet sie ist sieben breit das du alle knöpfe reinkriegst (erste Spalte fürs blind.gif zur höhenjustierung) 5 hoch 1 Zeile für die Breite (blind.gif) 4 für den Inhalt... die Bilder kannst dann mit nem img tag einfügen... ob das jetzt aber das gewünschte ergebnis erziehlt ist fragwürdig... webseiten erstellen geht halt nicht so schnell.. es sei denn du hast ein cms... kannst dir auch mal joomla anschauen ist aber auch nicht grade einfach... wenn du noch keine Webseite gemacht hast... dann wird das heute auch nichts wahrscheinlich...
     
    #4      
  5. Freell

    Freell Chaot :D

    Dabei seit:
    11.09.2008
    Beiträge:
    54
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    PS, AI, ID, AE, FL, SB (alles CS4), C4D
    Kameratyp:
    FinePix 5700
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    hmmm ... vllt ein bisschen zu dunkel deine HP?^^
    außer sie wird noch beleuchtet or so.
    denn zB ganz unten fällt auf dem ersten blick schwer es zu lesen.

    na jedenfalls: dreamweaver ist ein Programm von Adobe (gekauft worden) und könnte kompatibel mit den PSD datein sein.^^
    alternavit kannst du auch alles selbst schreiben in form von .txt mit anleitung dieser vielen hilfestellungen in form von vielen texten^^"
    SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

    hoffe konnte ein bisschen helfen^^
     
    #5      
  6. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    Hatte mal in nem anderem Forum ein Tutorial geschrieben für Internet neulinge... da stehen alle wichtigen Adressen drin... vielleicht hilfts ja.

    n letzter Zeit kommt es immer häufiger vor, dass Fragen gestellt werden, welche von den meisten Usern als Voraussetzung gesehen werden. Deswegen wollte ich den Interneteinsteigern ein bisschen helfen und zeigen wo ich alles gelernt habe. Denn so gut wie keiner hier in dem Forum hat hier Informatik studiert, auch wenige üben einen Beruf in der Richtung aus. Die meisten hier haben sich alles selbst beigebracht. So... Ihr habt probleme mit Comtodate und kommt nicht weiter? Als aller erste Anlaufstelle kann ich euch das Handbuch empfehlen, alle Grundfunktionen sind hier aufgeführt. Findet ihr euer Problem dort nicht beschrieben, dann versucht es mal über die Suchfunktion der Fusonic-Seite (hier). Denn fast alle Probleme die ihr gerade habt, hat einer von uns schon durchgemacht und behoben. Solltet ihr dann nicht zur Problemlösung gekommen sein, dann unterscheidet ersteinmal.
    Habe ich ein Problem das sich auf Comtodate bezieht oder gehört es zum Grundverständnis eines Webmasters?
    Wenn ihr ein Problem habt das sich auf Comtodate bezieht, schaltet hier einen Thread ein und formuliert euer genaues Problem und möglichst sprachlich korrekt, denn so zollt ihr der Person die euch dann hilft, und die sich die Mühe macht euer Problem zu lösen, den nötigen Respekt, denn jemand macht sich die Mühe euch sachliche Hilfe unentgeldlich zu entbieten. Es ist immer ärgerlich wenn hier ein Thread geschaltet wird in dem man überhaupt nichts versteht, indem wirklich brutale Tippfehler enthalten sind und das schlimmste sind Überschriften wie diese: COMTODATE: NUR NOCH FEHLER. Später stellt sich dann raus das es am Grundverständnis der Person gemangelt hat und dann macht man sich echt lächerlich...
    So euer Problem gehört zum allgemeinem Programierverständnis? Ihr kennt euch nicht mit den Grundlagen von HTML aus? Das ist kein Problem wenn man sich zu helfen weiss.
    Hier die Grundanlaufadressen:
    1. Google: gebt als suchbegriff eure frage ein... Beispiel der 2te Treffer erklärt euch genau wie es geht.
    2. Youtube: gebt ein was ihr lernen möchtet inkl. dem Begriff tutorial... Beispiel jetzt seht ihr eine liste in der euch alles anhand eines schönen videos erklärt wird.
    3. Selfhtml.org das ist eine Seite auf der man so gut wie alles über die Programmiersprachen lernen kann.
    4. Deviantart.com hier gibt es wirklich alles was man braucht vom Design bis zum programmieren.
    Jetzt habt ihr die Grundvoraussetzungen drauf. Jetzt sieht eure Seite aber noch ein bisschen langweilig aus.
    Woher haben denn die großen Firmen immer diese schönen Headergrafiken und Bilder? Von Fotolia! Ab einem Euro seid ihr dabei! Kleiner effektiver Tipp, sucht bei Fotolia was zu eurem Thema, schneidet euch was aus dem Bild im Headerformat raus, fügt einen Schriftzug ein und hinterlegt ihn vielleicht noch mit nem Schatten, schon habt ihr einen professionell wirkenden Header.
    Aber mit was füge ich schriften ein und vor allem wie bekomme ich dann einen Schatten hin?
    Hier zwei links für die genialste Grafik Freeware:
    Gimp: Das beste Freeware Pixelbearbeitungsprogramm das es gibt. Umfasst ähnlich viele Funktionen wie Photoshop.
    Inkscape: Das beste Freeware Vektorprogramm auf dem Markt.
    Ihr kommt mit den Programmen nicht zurecht? Hier wieder ein paar Beispiele wie ihr Tutorials findet.
    Tutorials Gimp: 1 2 3 etc... wühlt euch selbst mal ein bisschen durch
    Tutorials Inkscape: 1 2 3 nur zur info da gibts noch mehr ;)
    Hier noch ein paar schöne Tricks: Deviantart ist echt die geilste Seite für Designer hier gibt esalles hier ein besonderer Trick mit dem man schnell schöne Ergebnisse bekommt. Benutzt Pinsel!
    Alle hier genannten Sachen könnt ihr natürlich auch auf Photoshop, Illustrator, Flash etc. anwenden. Ich habe jetzt aber bewusst die Kostenlosen Beispiele genannt, weil ich letztens 1500 € für die education Version der MasterCollection hinblättern musste, und wer nicht mehr in der Ausbildung ist zahlt 3500 € ;)
    Ihr seht jeder hat hier fast die gleichen Vorraussetzungen es ist alles kein Hexenwerk, wer sich dafür begeistert wird bald viel Spaß damit haben! Und evtl. auch Erfolg!
    Vielleicht fühlt sich ja jemand angesprochen und verrät mir ein paar schöne Seiten die ich noch nicht kenne[​IMG]Würde mich freuen man lernt ja nie aus[​IMG]hier nochmal ne nette Seite für alle Photoshopper!
    Gruß Gregor
     
    #6      
  7. Freell

    Freell Chaot :D

    Dabei seit:
    11.09.2008
    Beiträge:
    54
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    PS, AI, ID, AE, FL, SB (alles CS4), C4D
    Kameratyp:
    FinePix 5700
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    da isses ja xD
    "3. Selfhtml.org das ist eine Seite auf der man so gut wie alles über die Programmiersprachen lernen kann."

    also du siehst, net so unbekannt die site ;P
     
    #7      
  8. Dusk47

    Dusk47 Guest

    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    Naja ich weiss ich stoße evtl auf eine von noobs genervte community, die fragen wie meine sicherlich jeden tag liesst. Trotzdem danke!
     
    #8      
  9. 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
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    mit "einer PSD Datei" wirst du nicht weiter kommen. Wenn du die Slices nicht für Web und Geräte speichern kannst, hilft die Dreamweaver auch erstmal nicht weiter.
    Um die Buttons verlinken zu können musst du zumindest diese als einzelne Grafiken (hier png) haben.
    Bei dem Problem der Abstürze kann dir evtl der Kundendienst von Adobe schnell weiterhelfen.
     
    #9      
  10. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    Hmm glaub nicht das jemand hier genervt reagiert hat... wir haben doch konstruktiv hilfe angeboten? Außerdem bin ich erst seit gestern hier aktiv ;) also zumindest in diesem Forum noch nicht von noobs genervt ;)
     
    #10      
  11. Freell

    Freell Chaot :D

    Dabei seit:
    11.09.2008
    Beiträge:
    54
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    PS, AI, ID, AE, FL, SB (alles CS4), C4D
    Kameratyp:
    FinePix 5700
    PSD als Html mit links etc. HILFE !!!
    dann wäre die community aber nicht sehr kompetent, wenn sie Einsteiger niedermachen würden :D
    Fragen sind da um beantwortet zu werden, doch vorher sollte man schon die SuFu benutzt haben^^

    neija, das problem wäre es ja net. es gibt ja noch das normale abspeichern in JPG und GIF o_O
    Nur macht "für Web und Geräte speichern" alle ebenen auf einer (ohne das es im der .PSD passiert), man kann die Qualität ändern und es speichert die namen für das web mit - bei leerzeichen. denn im web gibt es keine namen mit leerzeichen.^^ ("mein eigenes bild" > "mein-eigenes-bild")
    Mehr macht diese form des speicherns auch net o_O
     
    Zuletzt von einem Moderator bearbeitet: 06.02.2009
    #11      
  12. Dusk47

    Dusk47 Guest

    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    hab mich vllt falsch ausgrdückt, ich finde es sehr lobenswert dass ich so schnell gute antworten bekomme. Hmm ich weiss gar nicht wie ich mein problem am besten erklären kann -

    Ich habe mein design als PSD bzw PNG datei.
    Leider kann ich die buttons nicht mit Photoshop slicen, das programm stürzt jedes mal ab.
    Kundendienst kommt für mich nicht in frage, weil ich kein geld habe um längere kostenpflichtige gespräche führen zu können.

    Es muss doch einen weg geben, relativ einfach eine rohversion meiner Hp bauen zu können, mit verlinkung der buttons, der möglichkeit meine textbeiträge einzufügen, etc. Sodass ich die seite nur noch online stellen muss. Für einen weiteren denkanstoss wäre ich sehr dankbar...
    Sorry für die "noobische" ausdrucksweise :rolleyes:

    Oder kann mir evtl jemand nen rohquelltext schreiben der zu meinem Design passen würde?!? Ach ich weiss nich iwie kann ich meine gedanken gar nicht ordnen ich verlier hier langsam aber sicher die nerven, mir lässt das einfach keine ruhe...

    Danke f die Aufmerksamkeit erstmal... Gruß Nick
     
    #12      
  13. Freell

    Freell Chaot :D

    Dabei seit:
    11.09.2008
    Beiträge:
    54
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    PS, AI, ID, AE, FL, SB (alles CS4), C4D
    Kameratyp:
    FinePix 5700
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    np ;P

    uff...^^
    bei mehr als meinen bisherigen ratschlägen kann ich dir net weiterhelfen ;/
    mein wissen ist begrenzt, weißt du^^
     
    #13      
  14. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    </head>

    <body>
    <table width="1024" border="0">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

    Ja das ist der Rohtext mit Tabelle... vielleicht hast ja nen Editor mit entwurfsansicht dann geht es einfacher... ansonsten musst du halt programmierkenntnisse haben... ein Blog ist die Zeile und das sind die Zellen <td>&nbsp;</td> von links nach rechts... deine Bilder musst du entsprechend einfügen eine zelle ist jeweils zur größen justierung freigelassen... HTML Editor Phase 5 von Ulli Meybohm - HTML lernen - HTML Kurs / Seminar hier ein Freeware editor mit Entwurfsansicht... achja den inhalt fügst du anstatt &nbsp; ein... versuch gimp mal zum Slicen...
     
    #14      
  15. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    PS: Solltest du es mit Notepad oder so machen musst natürlich die Bilder mit FTP hochladen...

    Und würde mich interessieren ob und wie du es dann gemacht hast...
     
    #15      
  16. pixelkobold

    pixelkobold 3-Sterne Pixelkoch

    Dabei seit:
    15.09.2006
    Beiträge:
    157
    Geschlecht:
    männlich
    Ort:
    Ruhrpott
    Software:
    CS3 (PS,AI)
    Kameratyp:
    Sony DSC-F828, Sony DSC-W55
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    Mal davon ab, das "Für Web speichern" auch einzelne Slices abspeichert, was meines Wissen nach beim normaln JPG speichern nicht geht.

    @Dusk:
    Wenn das "Für Web speichern" nicht geht, dann speicher doch das gesamte Design als Jpg und schnipsel das anschließend manuell in die Teile die du brauchst. Wenn ich dich richtig verstanden habe, ist das eben dein Problem, das du die Slices nicht mit der Funktion "Für Web speichern" speichern kannst.
    Die manuelle Variante ist etwas aufwändiger und zeitintensiver, aber soviel iust das dann auch wieder nicht.

    zum Design:
    gefällt mir ganz gut übrigens. Die Schriftist etwas zu düster finde ich.
    Welchen Font hast du benutzt? Der gefällt mir.
     
    #16      
  17. Freell

    Freell Chaot :D

    Dabei seit:
    11.09.2008
    Beiträge:
    54
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    PS, AI, ID, AE, FL, SB (alles CS4), C4D
    Kameratyp:
    FinePix 5700
    PSD als Html mit links etc. HILFE !!!
    AW: PSD als Html mit links etc. HILFE !!!

    klär mich bitte auf^^
    was sind einzelne Slices? :D
     
    #17      
Seobility SEO Tool
x
×
×