Anzeige
Tutorialbeschreibung

Anfang: Slice-Tool richtig verwenden

Anfang: Slice-Tool richtig verwenden

In diesem Tutorial möchte ich euch erklären, wie man das Slice-Tool richtig einsetzt. Ich habe es so erklärt, dass Anfänger es auch schaffen sollten.


Das Tool findet man in Photoshop in der Werkzeugleiste in der dritten Reihe rechts.

Lage des Tools Bilder

Dabei liegt es in zwei Varianten vor, dazu komme ich aber dann zu angebrachter Zeit.

Schritt 1: Slices einblenden

Wir gehen von einem fertigem Design aus, welches jetzt nur noch in Html umgesetzt werden soll. Das Design öffnen und unter Ansicht -> Einblenden -> Slices die Slices sichtbar machen.

Slices einblendenBilder

Es sollte jetzt in der rechten oberen Ecke eine 1 in einem grauen Viereck stehen.

Slices eingeblendetBilder

Wenn nicht, kontrolliert noch mal ob ihr die Slices wirklich eingeblendet habt. Wenn ihr zum Beispiel eine Vorlage aus dem Forum nehmt, kann es sein das sie schon gesliced ist, dann müssten blaue Linien erscheinen, die sich über das Bild erstrecken. Wenn dies der Fall ist, könnt ihr gleich zu Schritt 7 gehen.

Schritt 2: Ersten Slice in Benutzer-Slice umwandeln

Wenn die Slices da sind, nehmt ihr das Slice-Werkzeug aus der Werkzeugleiste

Slice-WerkzeugBilder

und macht einen Rechtsklick auf das Bild. Es öffnet sich ein Pulldown Menü, in welchem ihr den Punkt „In Benutzer-Slice umwandeln“ wählt.

In Benutzer-Slice umwandelnBilder

Das graue Viereck wird jetzt blau und es erscheint ein oranger Rahmen um euer Bild. Am Rahmen sind in den Ecken und jeweils in der Mitte jeder Seite kleine Vierecke, an denen ihr die Größe des Slice verändern könnt.

Schritt 3: Aufteilung der Seite überlegen

Ihr habt jetzt einen Slice der euer gesamtes Bild umfasst, was aber noch nichts bringt. Ihr solltet euch schon beim Gestalten der Seite überlegt habe, wie sie später aufgeteilt werden soll, denn dann kommt ihr jetzt schneller vorwärts. Ich habe mir bei meinem Design überlegt, es in 5 Stücke zuteilen, da ich es später in CSS umsetzen will, habe ich keine Schrift eingeblendet.

Was später nicht in den Bildern sein soll, wie zum Beispiel die Schrift im Content, weil ihr es als Text in er Html schreiben wollt, muss ausgeblendet werden.

Idee der AufteilungBilder

Schritt 4: Ersten Slice auf die richtige Größe bringen

Jetzt bringt ihr eueren ersten Slice auf die gewünschte Größe, indem ihr über die orangen  Vierecken geht bis sich der Mauszeiger verändert und den Slice zusammen schiebt. Ihr solltet das Bild etwas vergrößern, damit ihr besser die Grenze zwischen zwei Abschnitten besser trefft. Man kann es zwar später noch bearbeiten, aber es spart Arbeit, wenn man es gleich ordentlich macht.

Slice für HeaderBilder

Ich habe den Slice genau auf die Größe meines Headers gebracht. Dabei macht Photoshop einen neuen Slice, welcher den entstanden leeren Raum genau ausfüllt. Versucht sowenige Slices wie möglich zumachen, damit später sie Übersicht nicht verloren geht.

!Vorsicht! - Man kann nur rechteckige Slices machen, wenn ihr runde Formen habt müsst ihr diese so zerschneiden, dass unter umständen auch etwas mit rein kommt was vielleicht nicht zum Button oder ähnlichem gehört. Ich habe es mal an einem runden Button versucht zu zeigen.

Slicen von runden FormenBilder

Man hätte auch die Slices 2, 3 und 4 zu einem machen können, doch dann ist später die gesamte Fläche der Link und es könnte den User verwirren, wenn eine scheinbar leere Fläche einen Link enthält, darum ist es besser die Slices 2 und 4 als Platzhalter einzufügen.

Schritt 5: Zweiten Slice umwandeln und auf die richtige Größe bringen

Jetzt wandelt ihr den zweiten von Photoshop erstellten Slice in einen Benutzer-Slice um und passte seine Größe an. Dies funktioniert wie beim ersten auch.

Slice für NavigationBilder

Photoshop macht wieder einen neues Slice um den Leerraum zufüllen und nummeriert sie fortlaufend von 1 bis X.

Schritt 6: Restlichen Slices auf die richtige Größe bringen

Ihr fahrt jetzt mit Schritt 5 solange fort, bis ihr alle Teile euerer Homepage gesliced habt und Photoshop keine neuen Slices mehr erstellt, nur dass ihr immer den nächsten von Photoshop erstellten Slice nehmt. Es kann passieren das Photoshop zwei neue Slices erstellt, dann könnt ihr euch raussuchen, welchen ihr als nächstes macht.

Bei mir sieht es fertig dann so aus.

Seite fertig geslicedBilder

Wandelt alle Slices in Benutzer-Slices um, da dies ab jetzt wichtig ist. Wenn ihr merkt, dass ein Slice nicht die richtige Größe hat, aber ihr schon einen anderen ausgewählt habt, dann müsst ihr das Slice-Auswahlwerkzeug nehmen und damit könnt ihr den entsprechenden Slice auswählen und nachbearbeiten. Achtet aber darauf das ihr auch die Größe der umliegenden Slices ändert, damit die Leerräume gefüllt werden und nicht zusätzlich vielleicht ein Slices erstellt wird.

Slice-AuswahlwerkzeugBilder

Schritt 7: Slice-Optionen bearbeiten

Wenn die Seite komplett gesliced ist, müssen die Slices noch aussagekräftige Namen bekommen. Dazu müsst ihr die Slice-Optionen bearbeiten. Um in diese zu kommen, nehmt ihr das Slice-Werkzeug und macht einen Rechtsklick in den gewünschten Slice, um Pulldown Menü wählt ihr „Slice-Optionen bearbeiten…“ aus.

Slice-Optionen öffnenBilder

Es öffnet sich ein Fenster, wie folgendes:

Bilder

Dort gebt ihr unter „Name“ einen Name für den Slice ein, der euch später sagt, was es für ein Teil genau ist, z.B. nennt ihr den Header  header oder wenn ihr einen Button habt der zu Links führen soll button_links. Unter „URL“ tragt ihr, wenn später das Bild ein Link werden soll, die Adresse ein, auf die der Link zielt, z.B. „../links/links.html“. Wenn das Bild kein Link werden soll lasst ihr es einfach frei. Bei „Ziel“ gebt ihr an, in welchem Fenster der Links später geladen werden soll, dies ist bei Frames wichtig. Der „Meldungstext“ erscheint später in der Browser Statusleiste und im „Alt-Tag“ beschreibt ihr kurz das Bild. Wenn ihr später keine Tabellenkonstruktion wollt, in welches es Photoshop das Bild später abspeichert, braucht ihr nur den Namen ändern, damit ihr wisst was für ein Teil es ist.

Schritt 8: Webseite abspeichern

Jetzt seit ihr so gut wie fertig und das Projekt muss nur noch gespeichert werden. Speichert es zuerst als normale .psd, damit man später vielleicht noch etwas verändern kann und dann wählt ihr Datei -> Für Web speichern.

Es öffnet sich ein Fenster, in welchem ihr die Page mit Slices seht.

Bilder

Stellt unten links die Vergrößerung auf „Ganzes Bild“ und klickt mit gedrückter Umschalttaste mit der Maus auf alle Slices im Bild. Es müssen am Ende alle Slices markiert sein.

 

Jetzt stellt ihr unter Voreinstellungen ein Format wie .gif oder .gif ein, welches nicht sehr groß ist (die Größe des gesamten Bildes wird unter links angegeben mit Ladezeit), aber noch eine gute Qualität hat. Ihr könnt auch die Farben verringern oder die Qualität bei .gif, einfach einwenig probieren.

 

Wenn ihr ein gutes gefunden habt klickt ihr speichern und wählt am besten einen ganz neuen Ordner wo ihr es rein speichert. Beim speichern darauf achten, dass unten bei „Dateityp“ „HTML und Bilder“ und bei „Slices“ „Alle Slices“ ausgewählt ist.

Bilder

Wenn ihr jetzt den Ordner öffnet, findet ihr eine Html Datei und einen Ordner „Bilder“, wo die Seite in die mit den Slice-Werkzeug eingeteilten Bildteile abgespeichert ist. Die Html Datei funktioniert auch schon, es ist aber besser sie noch manuell zu optimieren, dies gehört aber nicht mehr in dieses Tutorial.

 

Um euch zu zeigen, dass es nicht unbedingt so wenige Slices wie in meinem Beispiel sein müssen, habe ich hier noch eine Seite schon fertig gesliced, wo es viel mehr Slices sind.

Wie ihr auch hier seht kann es passieren, dass Hintergrundgrafiken durch die Slices zerstückelt werden, dies ist aber nicht weiter schlimm, da sie ja in der Html wieder ordenlicht zusammen gefügt werden, ohne das man etwas sieht.

Wichtig!!! - Wenn ihr ohne i-Frames arbeitet, was sehr viele machen werden, müsst ihr in euer Homepage ein Stelle einbauen, wo sie gesteckt werden kann und Bilder eingefügt werden, die einen flüssigen Übergang ermöglichen. So eine Stelle ist z.B. hier:

"StelleBilder


Dort sollte ein Linie über die ganze Seite gehen und auf der Linie sollten keine Hintergrundgra fiken liegen, da diese sonst zerteilt werden, wenn die Seite zu lang wird.

Ich hoffe, ich konnte euch das Slice-Tool gut erklären und ihr werden es auch bei eueren Homepages erfolgreich einsetzen können. Bei Fragen zum Tutorial könnt ihr mir gerne eine PN schicken.

MfG Stroker


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von VoinG
  • 28.05.2012 - 21:10

Toll, nur kann ich slicen(?) ;)

Portrait von doug_butabi
  • 07.05.2012 - 10:37

Sehr cool! Danke für die Hilfe!!!

Portrait von Paradoxi
  • 14.03.2012 - 23:32

sehr gut erklärt. ;)

Portrait von Vlado0505
  • 13.11.2011 - 14:51

... sehr gut erklärt... danke!!!

Portrait von VanyM
  • 27.09.2011 - 09:34

Super Tutorial sehr gut erklärt :)

Portrait von Fastec
  • 23.09.2011 - 10:05

Juchuu, GENAU sowas habe ich gesucht. Vielen, vielen Dank. Und natürlich super erklärt - Dankel

Portrait von hcmt
  • 15.09.2011 - 02:59

Danke für das Tutorial.
Sehr gut erklärt.

Portrait von Xander77
  • 13.08.2011 - 20:00

Sehr guter Artikel! Prima erklärt. Danke!

Portrait von mayog
  • 27.06.2011 - 17:09

Sehr schön... vielen Dank!

Portrait von mediocritas
  • 17.04.2011 - 18:21

vielen dank, werd mich gleichmal dransetzen

Portrait von maiermaster
  • 28.03.2011 - 11:30

exzellentes tutorial. vielen dank!

hier bitte noch korrigieren: "Es sollte jetzt in der rechten oberen Ecke eine 1 in einem grauen Viereck stehen." Natürlich ist es die obere linke Ecke.

Portrait von schnie
  • 15.03.2011 - 23:19

danke, das tut vermittelt zumindest einen guten einstieg ins thema

Portrait von E_Bear
  • 04.12.2010 - 13:15

Sehr schön, von mir 5 Sterne, danke.

Portrait von Beathoven
  • 15.11.2010 - 12:16

sehr schön beschrieben :-)

Portrait von Benric
  • 14.11.2010 - 18:10

schön beschriben...5stars

Portrait von oksana11
  • 07.11.2010 - 00:23

danke... sehr gutes tut.

Portrait von silver002
  • 01.11.2010 - 18:45

Super Tutorial, das hat mir echt weitergeholfen! Danke!

Portrait von Ando
  • 01.10.2010 - 00:22

Prima.
Kann ich gut verstehen.
Danke

Portrait von CrazyPlaya
  • 01.09.2010 - 10:30

Danke für das Tutorial da kann ich mal ein bisschen mit dem Slice Tool üben.
Ist sehr gut und verständlich erklärt.

Portrait von ChrissyGorgeous
x
×
×