Anmelde-Formular
shocki3 23. August 2004, 15:03
Also ich verzweifle noch ;)
Nehmen wir folgende Situation an. Umsetzung der Website mit CSS. Die Grafiken wurden im Photoshop von einer Designerin erstellt und dann von mir gescliced.
Wir haben jetzt 5 unterschiedliche Bilder die auf jeder Seite gleich ausgerichtet sein sollen. Soweit mit CSS kein problem. Alle Bilder kommen in den gleichen DIV container.
Sie haben ja auch die gleiche Größe, da ich einfach die unterschiedlichen Ebenen ein und ausschalte. D.h. die unterschiedlichen Bilder liegen im Photoshop übereinander.
Aber jetzt fängt das Problem. Die Grafikerin hat die Photoshop Datei nochmal geändert. (Da sind jetzt keine Slices mehr drin) Es kommt ein neues Foto hinzu. Eigentlich kein Problem. Wenn ich das Foto aber jetzt slice bekomme ich das nicht auf den Pixel genau so hin wie bei den älteren Bildern. Folge: Das Bild ist auf der website im Gegensatz zu den anderen ein wenig versetzt. Ich muß also jetzt einen extra DIV container für das neue Bild schreiben.
Wenn das im großen Umfang und immer wieder passiert, ist das einfach total nervig und kostet viel Zeit.
Wer hat ne Lösung ;)Ist bestimmt ganz einfach und ich komme nicht drauf !
Gruß Jens.
Ferengi 23. August 2004, 15:28
Hallo,
hast Du schon nachgesehen, ob das Bild die gleiche Länge, gleiche Breite, gleiche Auflösung hat wie die Ursprungsbilder?
grüsse
Ferengi
shocki3 23. August 2004, 16:05
Naja das kann man in der Tat ja gleich einstellen.
Aber die Anfangskoordinaten sind nicht immer gleich.
Das ist das Problem...
Gruß Jens.
Ferengi 24. August 2004, 07:57
Hallo,
... dann habe ich das Problem vielleicht noch nicht genau verstanden. Kann ich mir die Sache irgendwo ansehen?
Grüsse
Ferengi
Pedrito 24. August 2004, 08:45
Das sieht ein wenig so aus, wie wenn du dich von Photoshop gängeln lässt, statt es zu beherrschen. Maximal sollte man in Photoshop das Grund-Design slicen, nicht aber Dinge, die sich immer wieder ergeben.
Nehme doch Slice design_057.jpg mit den korrekten Massen und lege das als Template design_057.psd fest. Dann kannst du alle folgenden Bilder da rein ziehen und von da her fürs Web speichern.
Anscheinend fehlt es auch an Kommunikation, das die Designerin die Slices gelöscht hat.
Wenn die Hilfslinien noch da sind(hoffentlich fixiert), kannst du daraus auch neue Slices festlegen. Notfalls musst du halt aus den früher abgespeicherten Slices die korrekten Masse ermitteln und alles neu slicen.
Wenn die Startmasse nicht stimmen, könnte es daran liegen, das sich auf der linken Dokument-Kante eine fast nicht sichtbare Hilslinie befindet. Wenn du jetzt Slices entlang der Hilfslinien erstellst, kann es sein, das ImageReady, das als Spacer ansieht, oder zusätzliche Slices erzeugt.
Ich selber komme immer mehr vom slicen ab, da es nicht wirklich sinnvoll ist, ein Design aus was weiss ich wie vielen Bildern zu verwenden, durch mehr Requests hält es die Ladezeit eher auf.
Bei einem CSS-Layout kannst du mit Ebenen arbeiten, ganz kleine Gifs aus wenigen Farben als Hintergrundbild für die Struktur, darauf kommt das grössere komplette ungeslicte Headerbild. Die Struktur lässt sich so beim Laden schon erkennen und die Texte sind auch schon da.
Mit diesen wenigen Bildern sehe ich slicen als Hemmer im Workflow. Hilfslinien auf das Headerbild und dann direkt ausschneiden. Wenn Ausrichten aktiviert ist, kostet dich das nicht mal einen Zoom. Dann noch den Querschnitt der Navigation ausgeschnitten , dann nochmals ein Schnitt für das Listen-Gif und fertig ist das Layout.
mfG
Pedrito
shocki3 24. August 2004, 14:33
Pedrito: Danke schonmal
Hui. Das muß ich aber 3 mal lesen;)
Das Hintergrundbild ist eine grosses Datei, wie Du meinst. Das mach ich auch so mit den Ebenen. Es gibt aber z.b. ne Menge Überschriften in Schreibschrift. Also als gif. Wenn ich das nun auf der Website ein wenig verschieben möchte, ist es gut, das als einzelne Ebene bzw DIV zu haben.
Man weiß im PS meist nicht genau, wie der Text im Browser wirklich fließt. Darum muß ich teilweise die Elemente ein wenig verschieben.
Gruß Jens-
wahsaga 24. August 2004, 15:14
> Es gibt aber z.b. ne Menge Überschriften in Schreibschrift. Also als gif. Wenn ich das nun auf der Website ein wenig verschieben möchte, ist es gut, das als einzelne Ebene bzw DIV zu haben.
diese überschriften hätten m.E. schon von vornherein gar nicht an eine "feste" position ins layout gehört.
das sich überschriften mit dem restlichen fliesstext beinahe beliebig verschieben können, sollte doch klar sein.
> Man weiß im PS meist nicht genau, wie der Text im Browser wirklich fließt. Darum muß ich teilweise die Elemente ein wenig verschieben.
nein, deswegen solltest du dich von dem gedanken, pixelgenau zu designen, verabschieden.
Pedrito 24. August 2004, 17:03
Hi, shocky3,
Überschriften sollen keinesfalls nur als Bild eingebunden werden, da die Relevanz für eine Suchmaschine gleich Null ist, ebenso für Sehbehinderte.
Will hier aber nicht sülzen, ohne eine Lösung anzubieten:
h1{
background-image:url(titel.gif);
background-repeat:no-repeat;
}
h1 span{
visiblity:hidden;
}
<h1><span>Titeltext</span></h1>
So ist der Text zzwar vorhanden, wird aber per CSS ausgeblendet und macht Platz für das Hintergrundbild. Für die Suchmaschine ist der Text vorhanden, teils wird er auch Sehbehinderten vorgelesen.
Wenn du mehr h1 hast:
h1{
background-repeat:no-repeat;
}
h1 span{
visiblity:hidden;
}
h1#titel1 {
background-image:url(titel1.gif);
}
h1#titel2 {
background-image:url(titel2.gif);
}
<h1 id="titel1"><span>Titeltext1</span></h1>
<h1 id="titel2"><span>Titeltext2</span></h1>
mfG
Pedrito
shocki3 24. August 2004, 17:19
Wahsaga:
Also mir macht Pixelgenaues Design bestimmt keinen Spaß.
Für mich ist das super viel Arbeit, wie man sich denken kann.
Wenn der Grafiker oder Kunde alles genau so haben will, wie er sich das vorstellt, komme ich leider bei manchen Seiten nicht darum herum.
Ich arbeite dran, ihn(sie) zu überzeugen ;)
Pedrito:
Grundsätzlich ein guter Tipp. Wobei die Frage aufkommt, ob Google dies nicht als Spam werten könnte.
Man könnte so ja theoretisch riesige Textfiles vertecken.
Keine Ahnung, ob der Schaden nicht größer als der Nutzen ist.
Font color = Hintergrundfarbe ist z.b. nicht erlaubt.
Gruß Jens.
drummerboy 24. August 2004, 19:01
zu den überschriften:
http://www.sitepoint.com/article/header-images-css-xhtml
http://www.alistapart.com/articles/dynatext/
drummerboy
shocki3 24. August 2004, 22:17
Also besonders der 2. link ist ja wohl genial.
Das hätte mir ne Menge Arbeit erspart.
Einfach dynamisch PNGs aus true type fonts erstellen. Hammer!
Bin ich der Einzige, der das nicht weiß, oder was ?
Ich versteh nix mehr. Da brauche ich wirklich nicht mehr slicen ;)
Gruß Jens.
drummerboy 24. August 2004, 23:53
> Also besonders der 2. link ist ja wohl genial.
:)
hab lange gebraucht, um den wiederzufinden.
drummerboy
wahsaga 25. August 2004, 09:34
> Einfach dynamisch PNGs aus true type fonts erstellen. Hammer!
> Bin ich der Einzige, der das nicht weiß, oder was ?
mach ich schon seit längerem so :-)
allerdings speichere ich mir die bilder beim erstellen eines neuen textes auf platte - sie bei jedem seitenaufruf neu zu erstellen, ist auch wieder zu unperformant.
und zur methode von pedrito:
da sieht der surfer leider auch wieder nix, wenn er die anzeige von bildern abgestellt hat.
deshalb gibt es da noch einen anderen weg:
der text kommt ganz normal ins <hX>, und danach ein leerer span. dieser span wird dann so positioniert, dass er den text überlagert, und der span bekommt dann das hintergrundbild. wer bilder "an" hat, sieht jetzt unsere "schöne" überschrift, wer sie deaktiviert hat, sieht den normalen text.
funktioniert aber nur, wenn die hintergrundbilder keine transparenten bereiche haben - kann ich deshalb bei mir derzeit leider auch nicht anwenden.
shocki3 25. August 2004, 10:11
wahsaga:
"mach ich schon seit längerem so :-) "
ja aber ich glaube nicht, daß den Trick viele Leute kennen.
Es gibt aber die Funktion z.b. in PHPWCMS. Einem OS CMS.
"allerdings speichere ich mir die bilder beim erstellen eines neuen textes auf platte - sie bei jedem seitenaufruf neu zu erstellen, ist auch wieder zu unperformant."
logisch das es nicht schnell genug sein kann.
Also ich habs jetzt noch nicht getested. Aber was meinst Du, mit Bilder auf Platte speichern ?
PHP erstellt die Bilder doch dynamisch. Was speicherst Du an welcher Stelle auf Platte ?
Oder einfach nach dem dynamischen erzeugen auf "bild speichern unter" ?
Gruß Jens.
Schlammonster 25. August 2004, 10:42
hi jens,
ganz einfach, mit z.b.
ImagePNG($this->pic) ... zeigst du dein bild nur an und mit
ImagePNG($this->pic, "/images/meins.png") ... speicherst du es (zeigst es aber nicht an).
http://de.php.net/manual/de/function.imagepng.php
alles was du tun musst ist also 1. das bild erstellen und speichern und 2. danach verlinken.
lässt sich sehr gut in kombination mit file_exists
http://de.php.net/manual/de/function.file-exists.php
einsetzen. wenn das entsprechende bild existiert zeige es an, wenn es nicht existiert erstelle es erst und zeige es dann an.
viele grüsse,
schlammonster.
shocki3 25. August 2004, 11:14
Ich bekomme das script irgendwie nicht zum laufen. Läuft es bei euch ? Ich habe alles so gemacht wie beschrieben. Sowohl lokal als auch bei allinkl probiert. GD aktiviert.
im php script
$font_file = 'arr.ttf' ;
$font_size = 20 ;
$font_color = '#000000' ;
$background_color = '#ffffff' ;
$transparent_background = true ;
$cache_images = true ;
$cache_folder = 'cache' ;
im javascript
replaceSelector("h2","heading.php",true);
var testURL = "test.png" ;
<h2> test </h2>
es tut sich garnichts. die normale schrift wird angezeigt....
mhhh..
shocki3 25. August 2004, 11:23
nochwas.
ich sehe zwei leere bilder nebeneinander. D.h die bilder können nicht geladen werden...
Schlammonster 25. August 2004, 11:24
hmmm, das kann an vielem liegen. zuallererst: um ttf-schriften in der gd-lib nutzen zu können reicht es nicht nur die gd-lib installiert und aktiviert zu haben, du benötigst auch noch die freetypebibliothek ( http://www.freetype.org/ ), ansonsten kannst du nur mit einer in gd-lib enthaltenen pixelschrift arbeiten.
ruf doch mal dein bilderstellungsscript direkt auf oder schau mal in den sourcecode, stehen da fehlermeldungen ?
shocki3 25. August 2004, 11:52
Wenn ich das PHP script direkt aufrufe steht dort:
The image localhost/.../heading.php cannot be displayed cause it contains errors.
das mit der freetype bibliothek scheint ziemlich komplex zu sein. Denkst Du nicht, der Author hätte darauf hin gewiesen, wenn es notwendig ist ?
Gruß Jens.
wahsaga 25. August 2004, 14:27
> Wenn ich das PHP script direkt aufrufe steht dort:
>
> The image localhost/.../heading.php cannot be displayed cause it contains errors.
dann kommentiere mal den header()-befehl aus, damit du die fehlermeldungen angezeigt bekommst.
shocki3 25. August 2004, 14:30
phpinfo zeigt bei mir
FreeType Support enabled
FreeType Linkage with freetype
shocki3 25. August 2004, 17:43
bringt leider nichts.
läuft's denn bei euch ?
benutzt ihr genau dieses script vom link ?
wahsaga 25. August 2004, 17:51
> bringt leider nichts.
war das auf den header() auskommentieren bezogen?
schau noch mal nach, was dann in der quelltext-ansicht steht.
shocki3 25. August 2004, 18:00
so lustige sachen stehen dann da.
‰PNG ùöÃ ÀB æ{TölÃ?̆Mpð
shocki3 25. August 2004, 19:37
Ahh jetzt jaa. Es stand noch ein HTML Tag da rum, wo er nix zu suchen hatte. Nochmal vielen Dank an alle.
Das ist echt die Revolution meiner Arbeitsweise.
Drummerboy bekommt ein virtuelles Bier von mir spendiert. ;)
Ok die Anderen auch.
Bis dann.
drummerboy 25. August 2004, 21:26
:)
