# Photoshopdesign coden



## kakapopo (28. März 2006)

Hallo,

ich suche schon den ganzen Tag in Google. Kennt ihr vielleicht ein Tutorial, indem beschrieben wird, wie ich meine Designs coden kann? Sozusagen "Coding for dummies"  .

Wäre sehr dankbar dafür.

mfg


----------



## Gumbo (28. März 2006)

Was genau verstehst du unter „Design coden“? Etwa die Umsetzung eines grafischen Layouts zu einem HTML-Layout?


----------



## kakapopo (28. März 2006)

Ganz genau. Ich erstelle leidenschaftlich gerne Design in Photoshop. Nur möchte ich jetzt zum nächsten Schritt übergehen und diese Designs auch coden, also in HTML umsetzen können.

mfg


----------



## Gumbo (28. März 2006)

Prinzipiell dient ein grafisches Layout nur der Verschönerung des Inhalts. Das heißt, das Layout wird um den Inhalt aufgebaut und nicht anders herum. Dafür ist es allerdings nötig, dass der Inhalt bereits ausreichend semantisch ausgezeichnet ist.
Grundsätzlich ist auch nicht HTML für die Formatierung/Gestaltung zuständig sondern eine Stylesheet-Sprache wie etwa CSS. Denn HTML ist im Gegensatz zur letztgenannten Sprache eine Auszeichnungssprache und ist somit (eigentlich) nur für die Beschreibung der Daten zuständig.

Für den Anfang solltest du also erst einmal HTML lernen.


----------



## kakapopo (28. März 2006)

Selbst wenn ich Dreamweaver benutze, Also einen WYSIWYG-Editor?

mfg


----------



## franz007 (28. März 2006)

WYSIWYG ist gut und recht aber HTML sollte man schon können, wenn man eine Seite erstellen will. Man kann ja auch nicht sagen, dass man kein Deutsch mehr können muss, da Word eine gute Rechtschreibprüfung hat und sowiso alles korrigiert.

Wenn du dich wirklich dafür interessierst, lern HTML und CSS z.B. bei http://de.selfhtml.org/ und du wirst lange Freude daran haben. Du kannst dir natürlich auch so eine Seite zusammenbauen aber du wirst immer wieder bei Kleinigkeiten nicht weiterkommen.

Also eins, zwei Tage http://de.selfhtml.org/ durchlesen, dann klappt’s auch besser mit dem Dreamweaver.


----------



## kakapopo (29. März 2006)

Das bin ich gestern durchgegangen: ich hab mir fast alles durchgelesen: Aber wo ist der Part, der mir erklärt, wie ich ein fertiges design coden kann?

Könnte ihr mir da helfen?

danke


----------



## unmountable (29. März 2006)

Du guckst Dir an, wie Du das Design "zerstückeln" kannst, also was für Tabellen, Divs, Imagemaps man daraus in HTML macht.

Dann zerstückelst Du Dein Photoshop-Bild und bastelst aus den Einzelteilen eine HTML-Seite.


Trotzdem eine etwas eigenwillige Variante eine Webseite zu bauen, wenn Du mich fragst...


----------



## franz007 (29. März 2006)

Erzeugt Photoshop bzw Imageready nicht selbst schon eine html file mit entsprechenden Tabellen, so eine mit "super wunderschönem" Code 

(Ich erstelle meine Seiten nicht mit PS.)

Der dürfte doch für deine Anforderungen reichen oder


----------



## unmountable (29. März 2006)

Stimmt, ich glaube, mit ImageReady konnte man sich eine HTML-Datei erzeugen lassen, nachdem man sein Bild "zerschnippelt" hat.


----------



## kakapopo (30. März 2006)

Hy,

ja ich weiss, aber da kommt nicht wirklich ein tauglicher code dabei raus. Eben nur verlinkte Bilder. Ich möchte HTML aber schon "beherrschen". Ich habe mir selfhtml durchgelesen, aber wo ist der Part, der mir jetzt beim Start hilft. Ich finde da nur Beschreibungen was HTML heißt und sowas. Aber wie man jetzt wirklich ein design codet (ich möchte mine Photoshop designs nur coden und nicht alles komplett per html machen), habe ich noch nicht gefunden.

mfg


----------



## franz007 (30. März 2006)

In selfhtml steht nicht wirklich wie man das genau macht, dort werden nur die Grundlagen vermittelt.

Es gibt 2 Ansatzpunkte wenn du dein Design umsetzen willst, entweder mit Tabellen oder per CSS mit divs. Beides ist im selfhtml erklärt.

Du musst dein Layout im PS so zerschneiden (slicen) wie wie du sie nachher brauchst (zb den Kopf, die Ränder, den Unteren Bereich) und erstellst nachher ein Grundgerüst mit HTML in das du deine Bilder wieder hineinsetzt oder als background zuweist.

Schau dich mal im PS-Bereich um da gibt es sicher mehr dazu.


----------



## kakapopo (30. März 2006)

Hy,

danke für die Hilfe. Aber das verstehe ich nicht: _"und erstellst nachher ein Grundgerüst mit HTML in das du deine Bilder wieder hineinsetzt oder als background zuweist"_

Slicen kann ich. Muss ich bevor ich slice, die Flächen, in die der Text soll, leer machen, sodass ich nur noch "drüberscheiben" muss? Ich habe das mal in dreamweaver versucht, aber ich finde da irgendwie nicht das Schreibwerkzeug. Naja is ja auch egal, soll nicht dein Problem sein:

Trotzdem danke für die Hilfe


----------



## unmountable (31. März 2006)

kakapopo hat gesagt.:
			
		

> Muss ich bevor ich slice, die Flächen, in die der Text soll, leer machen, sodass ich nur noch "drüberscheiben" muss? Ich habe das mal in dreamweaver versucht, aber ich finde da irgendwie nicht das Schreibwerkzeug.


Jup, das wäre sinnvoll. Kannst Du vielleicht mal einen Screenshot von Deinem Bild machen, was zur HTML-Seite werden soll? Ist irgendwie so schwer vorstellbar...

Ein Schreibwerkzeug gibt es in HTML nicht, anzuzeigender Text wird direkt in die HTML-Seite geschrieben und kann dann noch mit entsprechenden Tags formatiert werden (fett, kursiv, etc.)


----------



## franz007 (31. März 2006)

So ganz scheinst du nicht verstanden zu haben was selfhtml dir zu vermitteln versucht hat.


----------



## Online-Skater (31. März 2006)

Er meint sicherlich den Bezug zu Dreamwaver, also wenn dann kann er nicht mit Dreamwaver umgehen  

1. Design slicen (ps)
2. In Tabellen oder Div-Elementen zusammenfügen (html)
3. Inhaltszellen müssen als Hintergrund eingefügt werden (css)
4. Inhalt per Html 

Aber wie schon gesagt, ist qualitativ hochwertiger Inhalt besser als ein tolles Design. Ist wie bei Spielen


----------



## kakapopo (31. März 2006)

Ok danke. Könntet ihr mir vielleicht die parts sagen, die für das, was ich machen will, am wichtigsten sind?

mfg


----------



## Jan-Frederik Stieler (2. April 2006)

Hi,
also am besten zeigst du uns mal dein PS Design. Dann ist es für uns leichter zu sehen was du benötigst.

Gruß


----------



## NomadSoul (2. April 2006)

Hier fehlt einfach ein Google Tutorial..

http://www.webmasterwelt.net/artikel,387,-[tutorial]-slicen-mit-photoshop-und-photoimpact.html

http://www.designnation.de/Tutorial...PhotoshopundanschlieendinHTMLverarbeiten.html


----------

