News - Features - Downloads - Forum - Team - Support - Switch View: Screen
Login - Registrierung - Passwort vergessen

Antworten: 29
Seite [1] 2 >
----x


King for a day




Beiträge: 307
# Thema - 02.10.2008 um 00:12 Uhr
Hallo Leute

Da ich bald mit meinem Design fertig bin, geht es an die nächste Hürde... das Design muss gesliced werden.

Da hab ich dann schon mal ein paar Fragen:

1. Da ich es eh fast von grund auf lernen muss... welches ist die bessere Slice Methode (die nicht unbedingt sooo schwer ist

2. Womit Slice ich? (Hab beim letzten Mal Photoshop genommen

3. Generell ein paar Tipps oder Tutorials?

Wäre euch für Hilfe echt verbunden... hab schon gut was hinbekommen, aber beim slicen bin ich mir nicht so sicher, ob ich das alles so umgesetzt bekomme :/

Danke auf jeden Fall schon mal für eure Hilfe!

Greetz
Overlord
Inaktiv
fay-pain


Specialist




Beiträge: 2006
# Antwort: 1 - 02.10.2008 um 00:29 Uhr
Also grundsätzlich geht es ja beim Slicen darum, Grafiken zu zerschneiden.

Wie gesagt GRAFIKEN. Alles was keine wirkliche Grafik ist, sondern z.B. nur eine Farbe ist, kannst du beim Coden über CSS mit einer Hintergrundfarbe lösen.
Verläufe z.B. sliced du 1px x ?px und lässt diese später beim Anpassen als wiederholende Grafik anzeigen.
Wichtig ist jedoch, dass du sehr genau bist und dir Gedanken machst, wie es später wieder zusammengesetzt wird.
Deswegen blendest du auch beim Slicen Texte und Ebenen aus, die du später einzelnd wieder einfügst.

Edit: ImageReady oder Photshop
und für weitere Tipps: google.de


------------------
Manchmal hast du fay und machmal pain.
- hajo

Zuletzt editiert von fAY-pA!N am 02.10.2008 um 00:30 Uhr (1x Editiert)
Inaktiv
|
Pred


Poststar




Herkunft: Bischofsmais
Beiträge: 762
# Antwort: 2 - 02.10.2008 um 01:36 Uhr
Jau, du musst dir beim Slicen schon vorstellen, wie du die Seite später zusammensetzt.

Und wie Fay schon sagte, sei dabei sparsam mit den Grafiken. Versuch soviel wie möglich mithilfe von CSS Klassen zu machen. was auch helfen kann, wenn du dir das Design vorab schon als HTML Grundgerüst machst und die einzelnen sachen dabei einfach nurmal mit irgend ner Frabe belegst. Hast du das Gerüst fertig, sliced du das Design, so das du nur noch die Grafiken einbauen musst.


------------------


Inaktiv
|
duRiel ClanSphere Team


Weltmeister




Herkunft: Cambridge
Beiträge: 7300
# Antwort: 3 - 02.10.2008 um 01:45 Uhr
nimm beim wieder zusammensetzen nicht die html datei von photoshop sondern fang zb mit dreamweaver bei 0 an und erstell den grundaufbau der seite. am besten mit divs, ansonsten mit tabellen. so alles ein etwa ordnen und dann die bilder einfügen.


Inaktiv
|
RaPiD


Geekboy




Beiträge: 1192
# Antwort: 4 - 02.10.2008 um 03:21 Uhr
Also ich Slicen mit Photoshop cs3, sobald ich das Design alles mit vorlagen von Slicens drin habe, muss ich nur noch auf (Datei / Speichern für Web) und dann die html als index nennen und schon erstellt es eine Index mit html codes und schneidet die bilder genau so zu wie man es gemacht hat.

Das blöde ist aber sobald ich was in meine geslicente Designs in den Content oder so schreibe verhaut es die ganzen grafiken weil ich nicht weis wie der rest geht, also wie man die grafiken so macht das sie sich mit in die länge ziehen. Dafür jemand zu finden der es für mich machen würde das es geht ist schwer.
Da es freiwillige leute nicht so gibt *leider* und ne tut finde ich auch nicht im web.


Zuletzt editiert von RaPiD am 02.10.2008 um 03:21 Uhr (1x Editiert)
Inaktiv
|
Pred


Poststar




Herkunft: Bischofsmais
Beiträge: 762
# Antwort: 5 - 02.10.2008 um 03:50 Uhr
ja, die index.htm die von Imageready erstellt wird ist schrott und so nicht zu gebrauchen.

Meiner Meinung nach gehört zum Slicen auch ein bissl Kenntniss über html. Zumindest ein Tabellen Layout sollte man hinbekommen, damit ungefähr weiss, wie man alles slicen muss.

Ich persönlich nutze für den GROBEN aufbau immer Frontpage Express (gibts als Free Version im Netz) und baue darauf dann mein Design auf. Wie gesagt selbst die Datei von Frontpage ist nicht wirklich zu gebrauchen, jedoch erspart es ein wenig denk- und schreibarbeit, wenn man sehr verschachtelte Designs hat.


------------------


Inaktiv
|
UnKn0wn ClanSphere Team


Geekboy





Beiträge: 1160
# Antwort: 6 - 02.10.2008 um 08:25 Uhr
Wenn das Design einen guten Aufbau hat kannst Du auch mit tabellen slicen und auch die seite dynamisch machen.

Die Grafiken liegen dann bei PS3 immer in den Tabellen zb. <td> <img=../bilder/bild1.jpg> Damit du nun Inhalt reinschreiben kannst müssen die entsprechenden Grafiken in den Background also <td background="./bilder/bild1.jpg">Hier kann jetzt Text stehen</td>.

Früher hab ich auch mit Tabelle die Designs angepasst und das geht schneller und einfacher als mit DIV.

Nachteil:
- Seite läd länger
- Ist verpönnt mit Tabellen zu arbeiten

Da der Content und die rechte und link leiste mit dem Content wachsen sollen, musst Du hier so slicen das die Grafiken sich wiederholen können ohne das irgendwas das Bild stört. Die Höhe der Tabellen dann auf 100% setzten wo der Inhalt sich verschieben kann. zb. <td background="../bilder/bild1.jpg" height="100%">

Pixelgenau slice musst Du bei beiden Varianten. Also beim Slicen das Bild ruhig auf 300 % zoomen und genau die Ränder anpassen.

Schwer eigentlich in einem Forum zu erklären wie das funktionieren soll.


------------------
Mit freundlichen Grüßen

SEBEL-DESIGN
http://www.sebel-design.com


Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
# Antwort: 7 - 02.10.2008 um 12:23 Uhr
Also für die Freeware User unter uns

ich nehm ausschließlich Gimp...

dabei erstelle ich zuerst das Layout (ja ne ist klar)
danach ziehe ich Hilfslinien um die Bereiche die ich Slicen will (diese zieht man von den Linealleisten von oben (waagerechte) und von links (senkrechte) einfach aufs Bild....(jetzt speichern nicht vergessen )

Danach nehme ich das Schneidewerkzeug und schneide jede Grafik einzeln aus und speichere jedes Bild einzeln, ist ein bisschen ein fizzel Geschäft, aber dadurch, dass du Hilfslinien dirn hast brauchst du nichtmehr auf jedes pixel achten, weil das Schneidewerkzeug an die Hilfslinien springt...

sooo...dann gehe ich in meinen Html-Editor und beginne sozusagen bei null...
und da gehe ich so vor, dass ich von oben nach unten arbeite und von links nach rechts und baue so alles nacheinander auf...


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;


Inaktiv
|
duRiel ClanSphere Team


Weltmeister




Herkunft: Cambridge
Beiträge: 7300
# Antwort: 8 - 02.10.2008 um 13:23 Uhr
ein tabellenaufbau lässt sich nur dann schneller erstellen wenn man mit divs nicht so fit ist.
ich fange bei jedem design bei der html und bei der css datei bei 0 an im texteditor.


Inaktiv
|
Ramires ClanSphere Team

Supporter
Supporter



Herkunft: Waldeck
Beiträge: 1900
# Antwort: 9 - 02.10.2008 um 13:35 Uhr
schliesse mich duriel an, so gehe ich auch vor,...


------------------

Verschwende keine Energie an Dinge die Du nicht ändern kannst...


Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
# Antwort: 10 - 02.10.2008 um 15:39 Uhr
agree @ duriel. alles andere macht auch wenig sinn.

und zu sachen tabellenlayout. sicher geht das schneller, wenn man mit div nicht so recht klar kommt. aber wenn man erstmal durch die arbeit mit css und html durchsteigt, hat man beim coden mit div´s nen richtigen workflow.


------------------



Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
# Antwort: 11 - 02.10.2008 um 16:28 Uhr
wobei die .css zu erstellen auch relativ schnell geht, wenn man weis was man macht
vor allem wenn man viele "gleiche" Grafikbuttons hat (also solche wo dann nur der Schriftzug anders ist) kann man das meiste per copy and paste machen...da muss man dann im Prinzip nur den Bildernamen ändern und den class oder id Namen...

aber ich stimme x-Ray zu, die Index geht dann wirklich schneller (wesentlich schneller)
außerdem verliert man den Überblick nicht so schnell


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;


Inaktiv
|
----x
Thread-Ersteller


King for a day




Beiträge: 307
# Antwort: 12 - 02.10.2008 um 19:27 Uhr
Cool, danke erstmal für eure Hilfe. Also wäre es am besten so vorzugehen:

1. Design in kleinere Teile schnipseln
2. Und als HTML wieder zusammen machen, dabei die Bilder dann in den Background.

Da es bei mir recht egal ist, ob ich es mit Divs oder Tabellen mache, weil ich beides nicht kann... wäre es wohl vorteilhafter zu lernen wie das mit Divs geht... hat jemand da paar gute Seiten?

Greetz
Overlord


Inaktiv
|
SCHIRI ClanSphere Team


Weltmeister



Herkunft: Hamburg
Beiträge: 5299
# Antwort: 13 - 02.10.2008 um 19:29 Uhr
kannst du denn überhaupt sicher mit html umgehen?

http://www.html-seminar.de/

ich hab da mal drüber geschaut und ich denke da wird alles rund um html und css gut erklärt.
Wenn du weisst, was du und wie du es mit html machen kannst, dann weisst du auch wie du slicen musst.


------------------
www.laszlokorte.de

Zuletzt editiert von SCHIRI ClanSphere Team am 02.10.2008 um 19:30 Uhr (2x Editiert)
Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
# Antwort: 14 - 02.10.2008 um 19:52 Uhr
du kannst dir auch mal das Template Toxic Mirror von reVerB anschauen, das ist recht einfach aufgebaut, was die DIVs und css angeht

http://www.clansphere.net/design/template/view/id/33

kannst ja dort auch mal zeugs verändern, dann siehste schnell was für was ist und so...
natürlich kannst du dir auch die Anderen Templates in dieser Hinsicht mal vornehmen

nach dem Moto learning by doing


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;


Inaktiv
|
----x
Thread-Ersteller


King for a day




Beiträge: 307
# Antwort: 15 - 04.10.2008 um 18:55 Uhr
@fUnK3r

Danke, hab ich gemacht... aber das scheint doch irgendwie sehr einfach... zumindest wenn ich mir den Code so in Front Page angucke (wenn man da auf teilen geht, zeigt er den Code und die Seite an und markiert halt, was welche id ist).

Und wenn ich das so machen würde, wäre es ok?


Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
# Antwort: 16 - 05.10.2008 um 12:42 Uhr
Jop, das ist eines der einfachsten Templates zum verstehen, was wo gemacht wurde....

einfach mal rumprobieren, testen...(man kann ja im Template nix kaputt machen, wenns dir nicht mehr gefällt oder wenn dus total verpfuscht hats, dann einfach wieder löschen und gut is )

Ich hab mir das halt alles so beigebracht, dann wusste ich gleich etwa wofür was ist....
natürlich lernt man nie aus...

Gute Nachschlagewerke sind z.B. css4you.de und die Seiten von selfhtml...


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;


Inaktiv
|
RaPiD


Geekboy




Beiträge: 1192
# Antwort: 17 - 05.10.2008 um 14:35 Uhr
Adobe Photoshop CS3:
Wie slice ich mein WebDesign: Video Vorschau TuT

Adobe Dreamweaver CS3:
Wie passe ich mein WebDesign an: Video Vorschau TuT


EDIT:
Gibt ja noch mehr Video TuT's -> mehrere TUT's


Zuletzt editiert von RaPiD am 05.10.2008 um 15:06 Uhr (1x Editiert)
Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
# Antwort: 18 - 05.10.2008 um 14:52 Uhr
Da wird aber eine Tabellen Anpassung gezeigt


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;


Inaktiv
|
----x
Thread-Ersteller


King for a day




Beiträge: 307
# Antwort: 19 - 05.10.2008 um 22:17 Uhr
Die Frage, welche ich noch hätte, ist ob es irgendwas beachten muss beim slicen meines Banners etc.... oder von Bildern.


Inaktiv
|
Nachtmeister


Specialist




Herkunft: Bern
Beiträge: 2091
# Antwort: 20 - 05.10.2008 um 22:41 Uhr
Dateiformat. PNG oder JPG für grössere Grafiken (Für sehr grosse Grafiken eher JPG). Für kleine Grafiken mit wenig Farben oder Transparenz: GIF.

Wenn du mit Photoshop exportierst kannst du dir auch noch die optimierten Ergebnisse anschauen. Oftmals reicht eine Qualität von 60% völlig, der Unterschied ist erst von 1% - 60% Qualität sichtbar (Ausser natürlich bei komplexen Fotos).

Und zum Schluss: Learning By Doing. Du kannst das Ganze ja auch immer wieder neu exportieren. Es ist auch nicht schlimm, mal etwas falsch zu machen, so lernt man nämlich auch, wie das suboptimale Ergebnis aussieht.


------------------
"God created the universe in 1 Day, and then spent 5 days making it look good In Internet Explorer"

Inaktiv
|
Antworten: 29
Seite [1] 2 >


Sie müssen sich registrieren, um zu antworten.


ClanSphere Project - Mailus - Imprint - Disclaimer - Scriptinfo