• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Text im Bild innerhalb TD

shishasmoker

New member
Hallo zusammen habe in Photoshop eine Page entworfen
und versuche mich nun ein bissel in HTML.
Und zwar habe ich das design gesliced und wollte nun auf einem
Bild welches als News Box gedacht ist eigenhändigen Text schreiben.
Aktueller Photoshop Code sieht so aus:
HTML:
<tr>
		<td colspan="15" rowspan="5"><img src="Bilder/index_40.png" width="697" height="165" alt=""></td>
		<td colspan="7">
			<img src="Bilder/index_41.png" width="185" height="53" alt=""></td>

Wie kann ich jetzt auf das Bild einen Text schreiben?

Danke im vorraus.
 
ersetze:

<img src="Bilder/index_40.png" width="697" height="165" alt="">

durch:

<div style="background: url('Bilder/index_40.png'); width: 697px; height: 165px;">dein text hier</div>
 
dkdenz klar ist das mein ernst.
Bin HTML/CSS anfänger.
Habe nur designt und wollte mal schauen
wie das nun geht.
Ich bitte daran zu denken das du auch mal
klein angefangen hast.
Erinner dich bitte daran und solche abfälligen
Posts wie deine sind dann eher etwas unreif.
Dachte das man das auch innerhalb des TD´s machen kann.
Also die Schriftfarbe ändern anstatt mit css.
Dennoch danke!
 
Das Problem sehe ich darin, dass du die Informationen selber hättest finden können (SuMa's, SelfHTML usw.)!
 
@shishasmoker: Ein Forum ist nicht dazu da, Dir die Arbeit des Suchens und Erlernens abzunehmen.
Wenn es Dich interessiert, suchst Du erstmal selbst nach einer Lösung in den gängigen Quellen.
Erst wenn man nix findet, dann postet man in einem Forum.

Zudem war das von mir nicht abfällig gemeint. Ich war einfach nur erstaunt.

Gute Quelle: http://css4you.de/
 
Hallo zusammen habe in Photoshop eine Page entworfen
und versuche mich nun ein bissel in HTML.
Und zwar habe ich das design gesliced...
Ich arbeite ja eher weniger mit Photoshop, aber das "Slicen" eines Photoshop Designs, mit dem Ergebnis eines HTML-Tabellen-Ungetüms, hat man im Browser-Mittelalter gemacht, sowas ist heutzutage eher schlechter Stil und verpönt.
 
Ich arbeite ja eher weniger mit Photoshop, aber das "Slicen" eines Photoshop Designs, mit dem Ergebnis eines HTML-Tabellen-Ungetüms, hat man im Browser-Mittelalter gemacht, sowas ist heutzutage eher schlechter Stil und verpönt.

Ich slice das design dann und
mach nur eine Bildausgabe?
und code es dann frei?

@dkdenz:
hatte selfhtml bereits gefunden und
einiges gelesen jedoch zu einigen css eigenschaften
war ich noch nicht vorgedrungen.
Die erste frage von mir wurde gut beantwortet von daher
dachte ich mir das ich die 2. hinterher schiebe :)
Danke nochmal an alle.
 
Ich slice das design dann und
mach nur eine Bildausgabe?
und code es dann frei?
Den Teil mit dem Slicen solltest Du auch gleich weglassen.

Photoshop hat halt das Problem, dass man da nicht einfach mal so eben ein Element markieren und exportieren kann. Wenn ich da also ein Logo irgendwo eingearbeitet habe (z.B. auf irgendeinem Hintergrundverlauf), dann muss ich erst mit den Ebenen rumhampeln, um das Ding einzeln zu bekommen und von dort dann als eigenständige Datei zu exporieren. Ein Slice hätte da den Hintergrund auch noch mit dabei, was die Einsatzmöglichkeiten des Logos stark einschränkt.

Wenn Du ernsthaft Webdesign machen willst, dann solltest Du Photoshop nur noch zum Erstellen einzelner Bestandteile der Seiten nutzen (denn z.B. so einen Verlauf kann man auch 1px breit machen und über die gesamte Breite ziehen lassen, das spart Bandbreite und man muss die Seite nicht in der Breite beschränken, bzw. der Verlauf hört nicht irgendwann auf, wenn das Bild zuende ist).
Ein komplettes Design machen wir (meine Firma) z.B. gleich in HTML/CSS, dann sieht der Kunde kein gefaktes Bild mit einem Browserfenster-Rahmen (von irgendwelchen Designer-Browsern, die er sowieso nicht kennt), sondern kann die Seite direkt in _seinem_ Lieblingsbrowser angucken. Außerdem fällt da auch der Schritt weg, bei dem man feststellt, dass das Design so gar nicht umsetzbar ist, oder dass der Platz an bestimmten Stellen nicht passt, weil der Designer zwar wunderbar sein Lorem Ipsum reingefummelt hat, aber sich keine Gedanken über den tatsächlichen Text gemacht hat, usw.

Wenn ein Designer mit einer Photoshop-Datei ankommt, dann gibt es i.d.R. Probleme bei der Umsetzung (meine Erfahrung).
 
Ja Problem ist das ich das Design jetzt nicht auf die ganze Breite bekomme
lediglich einen weissen hintergrund habe.
Da der Verlauf des Hintergrunds an jeder ecke verschieden ist (von schwarz nach silber zur mitte hin
und dann von silber nach schwarz von der mitte nach rechts.)
möchte aber keinen weissen Hintergrund haben das sieht wie Ihr die ganze
zeit "bäh" aus.
 
@Albu: Da muss ich jetzt doch mal etwas differenzieren.

Es kommt durchaus sehr oft vor, das sich der Grafiker das Layout in Photoshop (oder sogar in Illustrator) zusammengeklöppelt hat.
(BTW, das ist mein täglich Brot)
Im Idealfall hat er das natürlich mit Ebenen und Layern und so gemacht.

Und wenn das ein mitdenkender Grafiker gemacht hat (man muss sie sich nur richtig ziehen), dann sind alle Elemente einzeln auf Ebenen verteilt.
Also zählt der Einwurf mit dem Logo nicht wirklich.

Somit ist es für den Webdesigner eigentlich kein Problem mehr, benötigte Teile des Layouts zu "extrahieren".

Und da bietet PS (auch Illustrator) doch schon sehr gute Möglichkeiten, sofern man das beherrscht.
Sebstverfreilich kann das Ganze auch auf GIMP umgemünzt werden, denn die Voraussetzungen liegen da gleich.

Nur: Wenn Adobe dieses Slicen von Layouts anbietet, nutzen das eben auch Leute die nix mit Quältext anfangen können.
Diese Option ist ja auch extra an diese "Zielgruppe" gerichtet.

Summa summarum: Jedem Tierchen sein Plesierchen.

Professionell finde ich das auch nicht, aber das steht auf einem anderen Blatt.
 
Es kommt durchaus sehr oft vor, das sich der Grafiker das Layout in Photoshop (oder sogar in Illustrator) zusammengeklöppelt hat.
(BTW, das ist mein täglich Brot)
Im Idealfall hat er das natürlich mit Ebenen und Layern und so gemacht.

Und wenn das ein mitdenkender Grafiker gemacht hat (man muss sie sich nur richtig ziehen), dann sind alle Elemente einzeln auf Ebenen verteilt.
Also zählt der Einwurf mit dem Logo nicht wirklich.
Bei meinem Einwurf bin ich davon ausgegangen, dass der Designer mit dem Werkzeug umzugehen weiß und entsprechend Ebenen (sinnvoll) einsetzt. Soviel Professionalität muss man dann schon von den Designern erwarten können (auch hier gibt es Ausnahmen).
Was ich mit dem Logo-Beispiel (das ja offensichtlich nicht so weit von der Thread-Realität entfernt ist) ansprach ist die Problematik, dass ich erst alle anderen Layer ausblenden muss, um nur das Logo zu erhalten, und es in eine neue Datei für den Export kloppen kann. Im Vergleich dazu Fireworks: dort kann ich dat Ding anklicken, Copy und Paste in eine neue Datei machen und muss eben Null mit Ebenen rumhampeln - obwohl es dort sowas ebenfalls gibt.
Beim Slicen haben ich das Logo zwar ausgeschnitten, aber, in meinem Beispiel, ohne das Ausschalten der Ebenen, hat man das Ding fest auf den Untergrund gestempelt, was eben den weiteren Einsatz einschränkt.
Natürlich kann man auch beim Slicen die störenden Ebenen vorher ausblenden und dann die freigestellten Objekte zerschnippeln und exportieren. Aber das ändert nichts daran, dass ich es für ein Problem von Photoshop halte, dass man dort keine Hand zum Grapschen von einzelnen Elementen hat (bin halt mehr so objektorientiert eingestellt.)

Und wie gesagt einige Designer kennen zwar ihr Photoshop, aber haben von HTML/CSS keine Ahnung und bauen dann Designs, die gar nicht oder nur mit Problemen umsetzbar sind, oder wo Teile nicht, weil man sich keine tieferen Gedanken über die realen Texte/Inhalte gemacht hat. Es gibt sicherlich auch Ausnahmen, aber die oben erwähnte Daumenregel (Designer mit Photoshop-Layout) halte ich für realistisch.

Somit ist es für den Webdesigner eigentlich kein Problem mehr, benötigte Teile des Layouts zu "extrahieren".
Unbestritten, ich finde es halt nur sehr umständlich. Außerdem ist es dann auch wieder davon abhängig, wie gescheit die Benennung der Ebenen vorgenommen wurde, weil sonst muss man bei einer komplexen Datei arg suchen und klicken, bis man kapiert welche Ebene für was zuständig ist, und welche irgendwie noch "über" sind von Tests, Versuchen oder anderen Entwürfen.
Meine Beispiele sind natürlich Extrem-Beispiele für besonders merkbefreite Designer, aber sowas kommt halt vor.
 
@Albu: Mich verwundert es etwas, wie negativ Du von PS "redest".
PS ist i.d.R. das non plus ultra, und das kannst selbst Du nicht wegreden.
Wenn es Grafiker gibt, die das nicht beherrschen, dann ist das eine andere Gschichte.

Der Knackpunkt ist eigentlich der, das es diese Option des Slicen gibt, welches jeden einigermaßen untalentierten Webdesigner anspricht.
Aber das ist nicht die Kernidee von PS.

Und wenn ich nur einigermaßen PS beherrsche, brauche ich tatsächlich auch kein Fireworks.
Das ist eine Frage des Erlernten!

BTW Irgendwie MUSS ich ja die grafische Idee übermitteln und für andere nutzbar machen.
Was also spricht dann tatsächlich gegen PS?

Wenn das Ganze überlegt bereitet ist, gibt es doch eigentlich null Diskussionsgrundlage...
 
@Albu: Mich verwundert es etwas, wie negativ Du von PS "redest".
PS ist i.d.R. das non plus ultra, und das kannst selbst Du nicht wegreden.
Wie gesagt arbeite ich eher selten mit Photoshop. Und ich rede nicht negativ von Photoshop, sondern eher über die Leute die Photoshop einsetzen und meinen damit Webdesign machen zu können. Natürlich gibt es auch Leute, die es nicht nur meinen, sondern die es tatsächlich hinbekommen, nach meiner Erfahrung bilden sie aber die Ausnahme. Aber: Photoshop Designs kommen mir selten unter, weshalb meine Aussagen kein Gesamtbild aller Designer darstellt, sondern sich auf die wenigen Fälle bezieht, die ich selbst erlebt, bzw. von denen ich Kenntnis habe.

Die einzige Kritik von mir in Richtung Photoshop geht dahin, dass mir persönlich diese Möglichkeit jedesmal aufs Neue fehlt, dass ich keine Funktion zum "Markieren" eines "Objektes" zur Verfügung habe. Da Photoshop aus der "Pixelecke" kommt, ist eine solche Funktion aber vom Prinzip her eben nicht drinne, weil quasi jede Ebene einen Pixelhaufen darstellt und kein Objekt (Gimp ist da identisch ausgerichtet). Fireworks dagegen versucht ein Zwitter zwischen Pixel und Vektor zu sein, und deshalb gibt es dort eine solche Funktion, weil da jede Ansammlung von Pixeln ein Objekt darstellt. Dieser Ansatz liegt mir eher, weil es eben objektorientierter ist.

Der Knackpunkt ist eigentlich der, das es diese Option des Slicen gibt, welches jeden einigermaßen untalentierten Webdesigner anspricht.
Aber das ist nicht die Kernidee von PS.
Habe ich nicht behauptet oder gut geheißen -> Browser-Mittelalter.
Es gab eine Zeit, in der sowas Mode war, als Tabellendesign üblich war, diese Zeit ist aber vorbei.

Und wenn ich nur einigermaßen PS beherrsche, brauche ich tatsächlich auch kein Fireworks.
Das ist eine Frage des Erlernten!
Ich, als Nicht-Grafiker tendiere eher zu Fireworks, weil es meiner "Denke" und Anforderungen eher entspricht, ich mache aber auch kein anspruchsvollen Sachen. Photoshop kann ich zwar bedienen, kenne aber mit Sicherheit über 75% der Funktionen nicht. Aber: Ich Programmier, ich nix Grafiker. Und in der Regel nehme ich das Tool, dass den Job am schnellsten erldigt, genauer, mit dem ich den Job am schnellsten (oder überhaupt) erledigen kann (und zur Verfügung steht).

BTW Irgendwie MUSS ich ja die grafische Idee übermitteln und für andere nutzbar machen.
Was also spricht dann tatsächlich gegen PS?
Unser Arbeitsweise. Es kommt bei uns durchaus vor, dass wir einen Klickdummy aus Bildern zusammenbauen (meist bei Sachen, die anders nur mit höherem Aufwand gebaut werden können). Aber meist wird bereits im Entwurf eine HTML/CSS Seite gebaut, die sich der Kunde dann direkt im Browser anschauen kann.
Es mag sein, dass andere Web-Agenturen das anders machen, aber wir arbeiten so.
Das ist kein Argument gegen Photoshop, wir haben nur für uns entschieden, dass es nicht in unseren "Workflow" passt: man bastelt erst mit Photoshop ein Design und muss dabei bedenken, was alles möglich ist oder wo es Probleme gibt und am Ende muss man es doch in HTML/CSS umsetzen. Wir sparen uns die Zwischenschritte.

Wenn das Ganze überlegt bereitet ist, gibt es doch eigentlich null Diskussionsgrundlage...
Sag ich ja auch gar nicht, ich spreche aber eben von meiner Erfahrung, und die ist nunmal so. Wenn Du sagst, dass man das nicht auf die Masse der Grafiker übertragen kann, dann gibt es ja zumindest Hoffnung. ;)
 
In PS kann man übrigends Ebenen lokalisieren und Objekte auswählen.

Aber in vielen Dingen gebe ich Dir recht.
Wenn ich Layouts von Grafikern bekomme, muss ich mich auch manches Mal wundern.
60, 70 Ebenen und keine ordentlich benannt, viele unnötige Ebenen, etc.
Bei dem Einen funktionieren meine Einwände beim nächsten Mal, bei dem Anderen eben nicht.

Edit: Habe was nettes gefunden: http://www.pixlr.com/editor/
 
Zuletzt bearbeitet:
Zurück
Oben