nicht angemeldet basti_p
Der Martin
basti_p
Der Martin
basti_p
Der Martin
basti_p
Der Martin
Hallo liebe Selfhtml Forum User!
Ich bin gerade dabei Css zu lernen und habe da eine Frage. Kann ich mir über Photoshop ein Design für eine Website speichern lassen. Den Code dann benutzen und über ein Bild per Css dann Text legen?
Sprich ich habe ein Bild das Nenne ich jetzt mal Design_01.png. Ich weiß das Bild ist 150x450 Pixel groß. Wie bekomme ich jetzt einen Text dort hin?
Ich bin gerade dabei Css zu lernen und habe da eine Frage. Kann ich mir über Photoshop ein Design für eine Website speichern lassen. Den Code dann benutzen und über ein Bild per Css dann Text legen?
Ich rate _dringend_ davon ab, dass du dir HTML oder CSS von Photoshop erstellen lässt. Erstelle ein Design mit Photoshop (dagegen spricht nicht viel), erzeuge dann anhand deines Inhalts eine entsprechende Dokumentenstruktur und formatiere diese dann mit CSS bis sie so aussieht wie deine Vorlage.
Sprich ich habe ein Bild das Nenne ich jetzt mal Design_01.png. Ich weiß das Bild ist 150x450 Pixel groß. Wie bekomme ich jetzt einen Text dort hin?
<http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=
Negative Aussenabstände> oder eine <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=entsprechende Positionierung> wären ein Anfang.
ich weiß nur noch nicht ganz, wie ich die Bilder ausrichte. In den Anleitungen wurde das immer mit Piexel gemacht, aber das sieht bei jedem ja anders aus. Ich verstehe auch net wie ich mehre Bilder neben einander setze.
ich weiß nur noch nicht ganz, wie ich die Bilder ausrichte. In den Anleitungen wurde das immer mit Piexel gemacht, aber das sieht bei jedem ja anders aus. Ich verstehe auch net wie ich mehre Bilder neben einander setze.
Wie wär's wenn du einfach mal herzeigst, was du umsetzen möchtest?
»» ich weiß nur noch nicht ganz, wie ich die Bilder ausrichte. In den Anleitungen wurde das immer mit Piexel gemacht, aber das sieht bei jedem ja anders aus. Ich verstehe auch net wie ich mehre Bilder neben einander setze.
Wie wär's wenn du einfach mal herzeigst, was du umsetzen möchtest?
http://maxistieg.homepage.t-online.de/Cross/Cross.html
über die dunkelblauen flächen soll der Text.
http://maxistieg.homepage.t-online.de/Cross/Cross.html
über die dunkelblauen flächen soll der Text.
Warum sollten über die dunkelblauen Flächen Texte? Warum befolgst du meinen Rat nicht, den Quelltext den dir Photoshop ausspuckt nicht zu verwenden?
Wenn du ein entsprechendes gruppierendes Element für deine Textabsätze wählst, die in die drei Kästen sollen (z.B. eine Liste, also li-Elemente - oder schlichtweg drei div-Elemente) kannst du diese bequem mit einer Hintergrundfarbe (bzw. einem Bild) versehen.
Der Kopf (das Bild mit dem Streifen daneben) kommt als Hintergrund ins body-Element, das andere als Hintergrund ins html-Element und die 3 Käste sind eine Liste mit drei Elementen oder drei div-Elemente (mit ggf. einer "Runde-Ecken-Technik").
Solltest du dennoch gewillt sein, deinen Text "darüber" zu bringen:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=Positionierung oder http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=Aussenabstände habe ich bereits genannt. Da ich bei dieser Sache aber denke, dass es eine Katastrophe (in mehrerlei Hinsicht) ist, will ich dir hier einfach nicht weiterhelfen. Bei obiger, ordentlicher Lösung aber gerne.
Hi,
Ich bin gerade dabei Css zu lernen und habe da eine Frage. Kann ich mir über Photoshop
Photoshop ist nicht geeignet, um web-taugliche Designs zu erstellen. Dieses Programm kommt erst dann zum Einsatz, wenn das Design feststeht, implementiert wird und es nötig wird, die bereits bekannten Anforderungen mit Grafiken zu untermauern. Um Photoshop schon zu einem früheren Zeitpunkt sinnvoll einsetzen zu können, muss man *sehr* gut sein - nicht nur im Umgang mit dem Programm, sondern im Umgang mit Webdesign - und sich an vielen Stellen der schlichten Tatsache bewusst sein, dass wesentliche Teile eines in Photoshop erstellten Webdesigns nicht über den Status einer Hilfskizze hinaus gehen können.
ein Design für eine Website speichern lassen.
Dann kannst Du auch gleich pixelgenaues Tabellenlayout machen.
Cheatah
Hallo,
warum sollte man das Grundlayout nicht mit Photoshop erstellen? Ich benutze zwar lieber Fireworks wegen der Vektorgrafikfunktionen - aber in irgendeinem Grafikprogramm muss das Layout doch erstellt werden (ich spreche vom Layout, welches dann manuell in HTML/CSS umgesetzt wird, nicht davon, sich von dem Grafikprogramm HTML-Code erzeugen zu lassen)
Grüße Basti
Hallo,
warum sollte man das Grundlayout nicht mit Photoshop erstellen?
wie sollte man? Photoshop erzeugt Bilder, keine Layouts.
ich spreche vom Layout, welches dann manuell in HTML/CSS umgesetzt wird
Ich spreche vom Layout als Gesamtkomposition. Bilder -auch Hintergrundbilder- können Teil des Layouts sein bzw. sich harmonisch in dieses eingliedern. Das "Layout" ist aber wesentlich mehr. Es umfasst die Anordnung der Inhalte, die Farbschemata, die Typographie, graphische Verzierungen und vieles mehr, was den visuellen Eindruck prägt.
Das beste "Werkzeug" in diesem Stadium ist IMHO ein traditioneller Zettelblock und Stifte in verschiedenen Farben, mit denen man "das Layout" skizzieren kann, einschließlich Notizen zu Abständen, Bezugslinien, Anmerkungen zum Verhalten beim Skalieren und Zoomen usw., dazu ein gutes Vorstellungsvermögen für Formen, Farben und Farbharmonie.
Es sei denn natürlich, du verstehst unter einem Layout etwas, das so flexibel ist wie ein Granitplatte.
So long,
Martin
Hallo,
Das beste "Werkzeug" in diesem Stadium ist IMHO ein traditioneller Zettelblock und Stifte in verschiedenen Farben, mit denen man "das Layout" skizzieren kann, einschließlich Notizen zu Abständen, Bezugslinien, Anmerkungen zum Verhalten beim Skalieren und Zoomen usw., dazu ein gutes Vorstellungsvermögen für Formen, Farben und Farbharmonie.
Geschmackssache (das was Du beschreibst, würde ich nicht als Layout - eher als Funktionsskizze bezeichnen) - aber irgendwann wirds ja doch konkret und ich (und der Kunde) möchte wissen, wie das Ganze mal aussehen wird - und dann schlägt die Stunde der Grafikprogramme (ich hatte ja schon geschrieben, das ich Photoshop nicht ungedingt zu Layouten nehmen würde - aber viele tun es)
Grüße Basti
Hi,
»» Das beste "Werkzeug" in diesem Stadium ist IMHO ein traditioneller Zettelblock und Stifte in verschiedenen Farben, mit denen man "das Layout" skizzieren kann, einschließlich Notizen zu Abständen, Bezugslinien, Anmerkungen zum Verhalten beim Skalieren und Zoomen usw., dazu ein gutes Vorstellungsvermögen für Formen, Farben und Farbharmonie.
Geschmackssache (das was Du beschreibst, würde ich nicht als Layout - eher als Funktionsskizze bezeichnen) - aber irgendwann wirds ja doch konkret und ich (und der Kunde) möchte wissen, wie das Ganze mal aussehen wird
also ich selbst und auch meine wenigen bisherigen Kunden konnten uns anhand solcher Handskizzen schon sehr gut vorstellen, wie es einmal aussehen würde (bzw. sollte). Und auch den Fall, dass das Browserfenster sehr schmal wird, kann man da mal schnell skizzieren und überlegen, wie das Layout darauf reagieren soll: Alle Maße beibehalten und scrollen? Bestimmte Elemente schrumpfen lassen? Die Anordnung ändern (z.B. bei float bestimmte Elemente nicht mehr nebeneinander, sondern untereinander darstellen)?
und dann schlägt die Stunde der Grafikprogramme
Aber mit denen müsste ich ja eine ganze Handvoll unterschiedlicher Bilder machen, jedesmal unter anderen Voraussetzungen hinsichtlich der Fenster- und Schriftgrößen. Es sei denn, ich habe den Trivialfall: Ein starres Layout. Das möchte ich aber nicht - und die Kunden oft auch nicht, wenn man das mal kritisch hinterfragt (und ihnen z.B. was von Internet-tauglichen Handies erzählt). Ausnahmen bestätigen die Regel.
Ciao,
Martin
Hallo,
vielleicht haben wir unterschiedliche Vorstellungen von dem Begriff "Layout".
Für mich besteht ein (Web)Layout aus konkreten Dingen:
Farben, Farbverläufe, Hintergründe, Navigationselemente, Bildelemente etc.
Und genau diese Dinge gestalte ich zuerst in einem Grafikprogramm. Das sich z.B. der Inhaltsbereich bei der Änderung der Browserfenstergröße in der Breite anpasst etc. hat doch mit dem Grundlayout erstmal nichts zu tun.
Wenn ich meinen Kunden sagen würde: also, hier kommt die Überschrift, hier die Navigation und hier der Inhalt - wie das Ganze mal konkret aussieht, sehen Sie, wenn es fertig ist, hätte ich wahrscheinlich sehr wenige Aufträge:-(
Grüße Basti
Hi,
vielleicht haben wir unterschiedliche Vorstellungen von dem Begriff "Layout".
scheint so.
Für mich besteht ein (Web)Layout aus konkreten Dingen:
Farben, Farbverläufe, Hintergründe, Navigationselemente, Bildelemente etc.
Das sind für mich nur *Bestandteile* eines Layouts, und zwar welche, die erst in einem sehr konkreten, nahezu finalen Stadium ins Spiel kommen.
Und genau diese Dinge gestalte ich zuerst in einem Grafikprogramm.
Gut, dagegen spricht ja auch nichts.
Das sich z.B. der Inhaltsbereich bei der Änderung der Browserfenstergröße in der Breite anpasst etc. hat doch mit dem Grundlayout erstmal nichts zu tun.
Doch, es ist nach meinem Verständnis eine ganz wesentliche Eigenschaft.
Wenn ich meinen Kunden sagen würde: also, hier kommt die Überschrift, hier die Navigation und hier der Inhalt - wie das Ganze mal konkret aussieht, sehen Sie, wenn es fertig ist, hätte ich wahrscheinlich sehr wenige Aufträge:-(
Stimmt. Deswegen ist bei mir das nächste Stadium nach den Handskizzen eine schnell hingezimmerte Rohversion in HTML/CSS, die vielleicht noch Detailmängel hat, aber bereits die wesentlichen vorher besprochenen Merkmale wie Platzaufteilung, Farben und Rahmen und Skalierung zeigt. Daran kann man dann noch Feinheiten diskutieren, kritisieren und verändern.
Was du erwähnt hast, ist für mich nur der allerletzte Schritt zum fertigen Layout: Die Ausgestaltung mit graphischen, dekorierenden Elementen. Dass dieser Schritt -je nach Anspruch und Pedanterie des Kunden- noch ein sehr langwieriger werden kann, will ich nicht bestreiten.
So long,
Martin
Hallo,
Was du erwähnt hast, ist für mich nur der allerletzte Schritt zum fertigen Layout: Die Ausgestaltung mit graphischen, dekorierenden Elementen. Dass dieser Schritt - je nach Anspruch und Pedanterie des Kunden- noch ein sehr langwieriger werden kann, will ich nicht bestreiten.
OK, dann arbeiten wir wahrscheinlich seitenverkehrt;-) Bei mir kommt als erster Schritt die Erstellung eines Layouts inklusive aller grafischen Details, die Abnahme des Layouts durch den Kunden und dann die Umsetzung in HTML/CSS; mit "schnell hingezimmerten Rohversionen" bin ich vorsichtig geworden - habe schon zu oft erlebt, dass Kunden die Aussage "das ist nur eine Vorschauversion" einfach nicht begreifen und es zu endlosen Diskussionen bzgl. noch fehlendem Inhalt und Design kommt.
Grüße Basti
ich nutze zum Layouten *nur* Photoshop,so abwegig ist das nicht. Und wenn man mit PS vernünftigen umgehen kann, sind Skalierungen (z.b. für verschiedene Browsergrößen) etc. das geringste Problem. Der erste Schritt ist allerdings auch bei mir eine Rohskizze auf einem weissen Blatt Papier.
Aber jeder hat andere Vorgehensweisen, und das ist auch gut so.
Hi,
»» Was du erwähnt hast, ist für mich nur der allerletzte Schritt zum fertigen Layout: Die Ausgestaltung mit graphischen, dekorierenden Elementen.
OK, dann arbeiten wir wahrscheinlich seitenverkehrt;-) Bei mir kommt als erster Schritt die Erstellung eines Layouts inklusive aller grafischen Details, die Abnahme des Layouts durch den Kunden und dann die Umsetzung in HTML/CSS
aha, das könnte eine Erklärung sein. Tatsächlich gehe ich nach der Devise, dass erst die Inhalte und deren Strukturierung und Gliederung geklärt werden müssen (wobei ich diese Strukturierung im weitesten Sinn auch schon zum Layout zähle). Erst wenn klar ist, *WAS* wir publizieren wollen, kümmern wir uns um das WIE.
mit "schnell hingezimmerten Rohversionen" bin ich vorsichtig geworden - habe schon zu oft erlebt, dass Kunden die Aussage "das ist nur eine Vorschauversion" einfach nicht begreifen und es zu endlosen Diskussionen bzgl. noch fehlendem Inhalt und Design kommt.
Das Problem hatte ich bisher nicht. Der Hinweis "das ist eine Designstudie, an der wir die Feinheiten miteinander abstimmen können", war eigentlich immer recht eindeutig. Endlose Diskussionen gab es nur in einem Fall, als ich in diese Designstudie schon einen Teil der realen Inhalte eingebaut hatte und sich die Diskussion über die visuelle Gestaltung plötzlich zu einer Diskussion über Formulierungen entwickelte. Seither setze ich da nur Fülltexte ein (z.B. Lorem Ipsum, gern auch ein paar Absätze aus irgendeinem Roman).
Aber ich bin es gewöhnt, auch bei der Softwareentwicklung so zu arbeiten, dass ich in relativ kurzer Zeit (meist <10% der Projektdauer) ein Gerüst habe, dass den späteren Umfang der Software erahnen lässt. Da sind dann viele Funktionen noch als leere Hülsen realisiert, oder Menüeinträge zwar vorhanden, aber ohne Wirkung. Aber so bekommen die Kunden (oder Chefs oder Auftraggeber allgemein) schon eine gute Vorstellung, wie das fertige Produkt wohl werden mag.
Schönen Abend noch,
Martin
Hallo,
warum sollte man das Grundlayout nicht mit Photoshop erstellen? Ich benutze zwar lieber Fireworks wegen der Vektorgrafikfunktionen - aber in irgendeinem Grafikprogramm muss das Layout doch erstellt werden (ich spreche vom Layout, welches dann manuell in HTML/CSS umgesetzt wird, nicht davon, sich von dem Grafikprogramm HTML-Code erzeugen zu lassen)
Grüße Basti
Danke für die Tipps. Meine Frage Wie ich das mache ist aber immer noch nicht geklärt. Das Tut was ich mir ansehe und wo ich übe, dort wird alles mit farbigen Kästen gemacht. In diese Kästchen kann ich aber auch ohne CSS ein Text reinschreiben. Meine Frage ist noch immer, wie ich mit Hilfe von Css ein Text über ein Bild schreiben kann, ohne das sich das ganze Design verzieht.
Mfg
Haruzept
Hi,
Das Tut was ich mir ansehe und wo ich übe, dort wird alles mit farbigen Kästen gemacht. In diese Kästchen kann ich aber auch ohne CSS ein Text reinschreiben. Meine Frage ist noch immer, wie ich mit Hilfe von Css ein Text über ein Bild schreiben kann, ohne das sich das ganze Design verzieht.
Erstelle dein HTML-Dokument, welches die Inhalte strukturell sinnvoll ausgezeichnet enthält.
Formatiere es anschliessend mit CSS.
Den Text wirst du bspw. in einem Element wie einem Absätz, oder mehrere dieser in einem gruppierenden Element wie einem Div haben.
Und diese Elemente richtest du dann aus [1], und gibst ihnen dann Hintergrundbilder (und -farben), um das gewünschte Aussehen zu erreichen.
[1] http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
MfG ChrisB
Erstelle dein HTML-Dokument, welches die Inhalte strukturell sinnvoll ausgezeichnet enthält.
Formatiere es anschliessend mit CSS.Den Text wirst du bspw. in einem Element wie einem Absätz, oder mehrere dieser in einem gruppierenden Element wie einem Div haben.
Und diese Elemente richtest du dann aus [1], und gibst ihnen dann Hintergrundbilder (und -farben), um das gewünschte Aussehen zu erreichen.[1] http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
MfG ChrisB
Danke dir. Werde mir die Tage das TUT ansehen und schauen ob meine Frage beantwortet wurde. Wenn ja, dann dickes DANKE
