Tutorial Stilerstellung - Teil 1: Erstellung des Designs

    • Teambeitrag

    Und meine Frage überhaupt, was ist die optimalste Größe um in Photoshop mit einem Design anzufangen?


    Ich nehme meistens 1100 x 800. Feste Breiten haben ja 960Px, so bekommt man noch einen Eindruck vom Hintergrund, bzw. hat man noch Platz dafür.


    Habe dazu eine Frage, was meinst du mit "alles in eine Datei packen". Wie ist das zu verstehen?


    Hmm, mach ich jetzt eigentlich nicht mehr so. Mittlerweile habe ich meistens 3 Dateien:


    Das Grunddesign
    Die Buttons (Small und Large)
    Threadhintergründe


    Ich mag diese Layerklickerei nicht.


    Hier gehts übrigens auch demnächst weiter, das Coding ist ja noch offen.

    • Teambeitrag

    Ich verwende ausschliesslich Fireworks. Die meisten verwenden wohl Photoshop, mag ich persönlich gar nicht. Kostenlos wäre zum Beispiel Gimp.

  • Du brauchst einmal den Normalen Hintergrund und einmal mit dem Hover Effekt.
    Deshalb 2x und Hover sollte am besten eine andere Farbe haben als der Normale Hintergrund.

  • Hi Tomsen,


    ich hoffe, dass mich Tom, Cr@@gle und Eragon nicht dafür queer durch das Forum jagen :D , aber vielleicht hilft dir die Erklärung, die ich einmal gefunden hatte. Vereinfacht in meinen Worten zusammengefasst:


    Grundsätzlich geht es beim "Slicen" ja darum, dass man mit einem Bildbearbeitungsprogramm eine Seite in ihre Bildsegmente aufzuteilen. Diese Segmente nimmt man dann, um sie auf der Seite wieder darzustellen. Durch die extrahierte Form sieht man dann deutlicher, welche Elemente z.B. im Design wo platziert sein sollen, wie groß sie sind usw.


    Wenn man das so macht, dürfte die Menge an Darstellungsfehlern eher gen Null tendieren, da das "Slicing" ja explizit die Segmente aufgeteilt darstellt. Arbeitet man an einem aufwendigen Design, dürfte das mit dieser Methode praktisch sein, weil man so nichts übersieht.


    Auf der anderen Seite gibt es ja CSS 3 und wenn man sich diese Designs ansieht, kommt man auch ohne das "Slicen" aus. Wenn ich es jetzt nicht verwechsle, ist CSS 3 besonders bei flexiblen Templates hilfreicher als wenn man es "slicen" würde bzw. das ginge dann ja gar nicht.



    In der Regel führen Entwickler bei Fachdebatten auch gerne die Performance und/oder den Traffic an, aber dazu kann ich leider nichts sagen. Da müsste doch einmal einer der Designer reinsehen und vielleicht einen 1:1-Vergleich notieren, um so festzuhalten, ob es signifikante Unterschiede und somit ein klares Pro/Kontra gäbe.






    Damit belasse ich es dann einmal, sonst rede ich mich noch um Kopf und Kragen und muss zur Strafe bei den cls-Designern nachsitzen. :D




    Es grüßt freundlich
    Gabbid :coffee:







    P.S. Cr@@gle war schneller, war ja klar. :D Cr@@gle, korrigiere mich sofort, wenn ich etwas falsch beschrieben habe, ja? Dann lerne ich gleich auch noch mit. :)

  • Also wenn ich das richtig verstehe:


    Ich mache das Design beispielsweiße mit Photoshop (fast) so wie es später aussehen soll, von Texturen bzw. Backgroundgrafiken her, alles wie es oben steht. Dann schneide ich alle Teile die ich brauch aus um sie dann mit CSS wieder so zusammenzufügen nur das es alles einzelne Elemente sind und nicht eine komplette Textur?


    Gut das klingt schonmal logisch und macht mir einiges klarer. Aber wenn ich zB.: bei einem Header die Eigenschaft "Nach außen Strahlen/Leuchten" an habe und es dann so aussieht Klick wie soll ich das dann rausschneiden, geht ja schlecht da das ja so halbtransparent ist.. :S


    - Tomsen