Anzeige
Tutorialbeschreibung

Optimale Einstellungen für Slice

Optimale Einstellungen für Slice

Hier erfährst du, wie man Photoshop CS4 einstellen muss, um das optimale Ergebnis beim Abspeichern von Slices zu erhalten.


Nachdem ihr ein Bild in Photoshop fertig gesliced habt, wird es beim Abspeichern über Für Web und Geräte speichern... als nicht gerade schönes Tabellenlayout gespeichert. Dies lässt sich aber durch einige kleine Änderungen in ein brauchbares CSS-Layout wandeln.


Schritt 1:

Zuerst ganz normal ein Bild slicen.

Bilder

 

 

Schritt 2:

Nun klickt ihr wie gewohnt unter Datei auf den Punkt  Für Web und Geräte  speichern...


Bilder


 

Schritt 3:

Im nun erscheinenden Fenster Für Web und Geräte speichern auf den Pfeil rechts neben dem Punkt Vorgaben klicken und im Dropdownmenü auf den Punkt Ausgabeeinstellungen bearbeiten... klicken.

 

Bilder


Schritt 4:

Beim Fenster Ausgabeeinstellungen nun den Punkt Slice auswählen.

Bilder



 

Schritt 5:

Das Ganze sollte nun so aussehen:

Bilder


Durch einen Klick auf den Radiobutton CSS generieren aktiviert man nun die Erzeugung des CSS-Layouts anstelle des Tabellen-Layouts. Unter Mit Verweis: sollte man die Einstellung Nach ID so belassen.

Bilder



 

Schritt 6 (optional):

Es gibt auch noch die Möglichkeit, ein Hintergrundbild/Farbe festzulegen. Dies ist vor allem von Vorteil, wenn man mehrere Slices mit immer gleich bleibendem Basishintergrund erstellen möchte.
Dazu wechseln wir nun zum Punkt Hintergrund.

Bilder



Schritt 7 (optional):

Hier kann man nun den Pfad zu einem Hintergrundbild bzw. die Hintergrundfarbe angeben.

Bilder




 

Ergebnis (optional):

Hier nun noch der Unterschied.

Tabellen-Layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>reise_allgaeu_sonthofen_einzelner_baum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (reise_allgaeu_sonthofen_einzelner_baum.jpg) -->
<table id="Tabelle_01" width="480" border="0" cellpadding="0" cellspacing="0">
        <tr>
                <td colspan="3">
                        <img id="Baum_01" src="images/Baum_01.png" width="480" height="15" alt="" /></td>
        </tr>
        <tr>
                <td rowspan="2">
                        <img id="Baum_02" src="images/Baum_02.png" width="221" height="305" alt="" /></td>
                <td>
                        <img id="Baum_03" src="images/Baum_03.png" width="239" height="277" alt="" /></td>
                <td rowspan="2">
                        <img id="Baum_04" src="images/Baum_04.png" width="20" height="305" alt="" /></td>
        </tr>
        <tr>
                <td>
                        <img id="Baum_05" src="images/Baum_05.jpg" width="239" height="28" alt="" /></td>
        </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>



CSS-Layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>reise_allgaeu_sonthofen_einzelner_baum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (reise_allgaeu_sonthofen_einzelner_baum.jpg) -->
<style type="text/css">
<!--

#Tabelle_01 {
        position:absolute;
        left:0px;
        top:0px;
        width:480px;
        height:320px;
}

#Baum-01_ {
        position:absolute;
        left:0px;
        top:0px;
        width:480px;
        height:15px;
}

#Baum-02_ {
        position:absolute;
        left:0px;
        top:15px;
        width:221px;
        height:305px;
}

#Baum-03_ {
        position:absolute;
        left:221px;
        top:15px;
        width:239px;
        height:277px;
}

#Baum-04_ {
        position:absolute;
        left:460px;
        top:15px;
        width:20px;
        height:305px;
}

#Baum-05_ {
        position:absolute;
        left:221px;
        top:292px;
        width:239px;
        height:28px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (reise_allgaeu_sonthofen_einzelner_baum.jpg) -->
<div id="Tabelle_01">
        <div id="Baum-01_">
                <img id="Baum_01" src="images/Baum_01.png" width="480" height="15" alt="" />
        </div>
        <div id="Baum-02_">
                <img id="Baum_02" src="images/Baum_02.png" width="221" height="305" alt="" />
        </div>
        <div id="Baum-03_">
                <img id="Baum_03" src="images/Baum_03.png" width="239" height="277" alt="" />
        </div>
        <div id="Baum-04_">
                <img id="Baum_04" src="images/Baum_04.png" width="20" height="305" alt="" />
        </div>
        <div id="Baum-05_">
                <img id="Baum_05" src="images/Baum_05.jpg" width="239" height="28" alt="" />
        </div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von 2406
  • 27.09.2013 - 14:01

Kann man sich sparen!
1. Wird nicht auf das slicen selbst eingegangen
2. Ist das nichts, was man nicht selbst hin bekommt
Schade um die Punkte!

Portrait von racingfee
  • 24.10.2011 - 23:15

Kurz und gut..super danke für die Arbeit.

Portrait von darkvelvet
  • 14.07.2011 - 10:08

kann ich sehr gut gebrauchen.verständlich geschrieben.danke!

Portrait von Kloppy
  • 11.03.2011 - 15:40

Super-TUT und 100% nützlich, vielen Dank!

Portrait von Kloppy
  • 11.03.2011 - 15:37

Super-TUT und 100% nützlich, vielen Dank!

Portrait von california88w
  • 14.02.2011 - 11:58

interessant zu wissen, ich habe mich schon länger gefragt wie so etwas funktioniert.

Portrait von Aelfry
  • 23.01.2011 - 18:13

Irgendwie hatte ich dem Titel nach zu urteilen was anderes erwartet. Ich meine, ist zwar schön zu wissen und spart einem etwas Rumprobiererei, aber wirklich tiefer gehende Kenntnisse habe ich jetzt keine bekommen...

Portrait von Iflis
  • 19.08.2010 - 18:42

für Neulinge ein Aha-Effekt

Portrait von Graf_Zotti
  • 04.08.2010 - 15:41

bissl kurz aber sonst ok danke

Portrait von friendofgermany
  • 05.07.2010 - 10:54

sehr gut danach hab ich schon länger gesucht!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.06.2010 - 22:39

naja, leider nicht wirklich das, was ich mir erhofft hatte

Portrait von mapegele
  • 25.05.2010 - 21:40

kurz und knackisch ! gut beschrieben.

Portrait von moonfiretl
  • 25.05.2010 - 10:07

Vielen dank für die Mühe, gutees Tut.

Portrait von pfriemala
  • 22.05.2010 - 12:21

Vielen Dank! Leider ein bisschen kurz.

Portrait von Bruhsman
  • 21.05.2010 - 12:17

Klein aber Oho ;-)
Danke!

Portrait von regina
  • 21.05.2010 - 07:05

Prima, hab das gleich mal in CS3 ausprobiert - es geht auch damit.

Portrait von itstumpp
  • 20.05.2010 - 10:08

Tolles Tut, hätte mir aber auch mehr Informationen gewünscht. Trotzdem Danke!

Portrait von tourischreck
  • 19.05.2010 - 10:55

Gutes TUT - Vielen Dank für die Mühe !

Portrait von standby83
  • 19.05.2010 - 00:19

Die Aufmachung des Tutorials in klarer Struktur und verständlichen Texten gefällt mir. Jedoch habe ich unter dem Titel "Optimale Einstellungen für Slice" etwas mehr erwartet. Mehr, als ich durch selbst Ausprobieren herausbekommen kann.

Mir fehlen hier die Hintergrundinformationen (Wozu werden Slices verwendet? Was sind die Vorteile gegenüber anderen Techniken?, usw....)

Portrait von Ironbird
  • 18.05.2010 - 20:49

Super. Geht das auch in CS3?

x
×
×