[Sebi]

Slicen mit PhotoShop und PhotoImpact

Dieses Tutorial wurde von Sebastian Betz geschrieben.

1.1 Einleitung

Wer kennt das nich. Man surft in Forum und da steht etwas mit Design zu Verkaufen. Nun schaut man sich das Design an und denkt sich „Das sieht doch super aus“. Dann steht da aber was mit nur .psd Datei. Jetzt denkt man sich doch was ist das und wie macht man das zu einer HTML Seite.
Die .psd Dateien (PhotoShopDatei) sind die ganzen Grafiken und Layern in einer Datei. Man kann nun mit PhotoShop noch änderungen vornehmen oder aber gleich die Grafik Datei in HTML umwandeln (Slicen).

Es gibt natürlich auch andere Grafikprogramme, mit denen man auch solche Dateien erstellen kann:

.ufo Datei --> Ulead Photo Impact
.psd Datei --> Photo Shop
.png Datei --> Fireworks

2.1Das Slicen

Man öffnet ein HP Design mit PS (.psd Datei). Nun wählt man das Skalpel aus der Werkzeugleiste aus.



Nun wählt man die einzelnen Grafiken aus, wie sie am Ende aussehen sollen. Man zerschneided quasi das ganze Bild in Teile.
Am besten hier viel Zeitlassen und üben.
Wenn man fertig ist kann das ganze so aussehen:



Nun geht man auf “File -- > Save for web“ bzw. “Datei --> Speichern für Web“

Jetzt öffnet sich ein neues Fenster.



In diesem Fenster wählt man jetzt „Save“ aus.
Nun kann man den Ordner auswählen, in dem die Html Datei + Grafik Dateien gespeichert werden sollen.
Wenn man gespeichert hat finded man 2 dateien.
Einmal die html Datei und einmal den Image Ordner, in dem die Grafiken sind.
Jetzt muss nurnoch der Code angepasst werden und fertig ist die HP.


2.3Der Code

PhotoShop gibt ja schone einen Code an, doch sollte man ihn schon leicht seinen Bedürfnissen anpassen.
Also PS macht alles in Tabellen.
Wenn man nun einfach mal einen Text in eine Spalte einfügt, steht der Text in der Mitte der Tabellenspalte.
Dies können wir so ändern:

statt ) einfach >

Bsp. für Alten Code:

<td height=“120“ width=“570“>(h3 align=“center“>TEST TEST TEST</h3)</td>

Nun muss man einfach ein “ valign=“top“ “ einfügen.

<td height=“120“ width=“570“ valign=“top“>(h3 align=“center“>TEST TEST TEST</h3)</td>

Nun ist der Text schon mal am oberen Tabellen rand.

Wenn wir aber nun einen Header bzw. Banner haben und diesen in HTML beschriften wollen, er aber eine Grafik ist, macht man am besten:

Bsp. für Alten Code:

<td><img src=“psd78027.gif“)</td>

Bsp. für Neuen Code:

<td background=“psd78027.gif“)</td>

Jetzt ist das Bild noch an der gleichen Stelle nur einfach in den Spaltenhintergrund versetzt worden.


3.0Das Slicen mit Ulead Photo Impact

Mit PhotoImpact geht das Slicen einfach wenn nicht sogar noch einfacher wie mit PhotoShop.
Da dies aber eigentlich ein Tutorial für PhotoShop ist, werde ich das Slicen nur ganz kurz beschreiben:

-> Ufo Datei in PhtotImpact laden.
-> “Web“ auswählen
-> “Slicer..“ auswählen
-> Alles schön slicen (siehe 2.1)
-> Nun auf das Browser (IE) Bild klicken.
-> Nun öffnet sich die Homepage schon in HTML
-> Der Pfad sieht “C:\Lokale Einstellungen\Temp\PhotoImpact\Preview0094\upi0094 .htm“ ähnlich. Nun einfach upo0094.htm weglassen und schon öffnet sich der Ordner mit den fertigen Grafiken. Jetzt alles in einen anderen Ordner kopieren und in Html anpassen (siehe 2.3)

4.0 Abschluss

So .. fertig ist die HP.
Ich hoffe dieses Tutorial war hilfreich.

Gruß Sebastian Betz


!Feedback zu diesem Tutorial erwünscht!

[David Reisner]

Erstmal guten Abend Sebastian!
Dein Tutorial gefällt mir gut, deckt viele wichtige Bereich ab und hilft sicher vielen Usern weiter, was PS und slicen angeht.

Einige Kleinigkeiten:
* Kleinere Tippfehler, wenn möglich bitte korrigieren
* Weitereführende Links/Erklärungen zu verwendeten Begriffen würden mir weiterhelfen

[Sebi]

Hallo,
ersteinmal Danke für dein Feedback.

Ich habe nun den ganzen Text noch einmal gelesen und nach Fehlern geguckt und korrigiert.

Auserdem werde ich versuchen Links passend zum Thema herrauszusuchen und zu posten

Gruß Sebi

[dein_opi]

super tutorial, hast du fein gemacht

hätte nur eine einzige zeile zu berichtigen

Bsp. für Alten Code: 

<td><img src=?psd78027.gif?)</td> 

Bsp. für Neuen Code: 

<td background=?psd78027.gif?)</td>

die letzte zeile ist nicht valide
ich würde die so schreiben

<td style="background-image:url(psd78027.gif"></td>

so meckert der validator nicht rum

[Sebi]

Ok .. stimmt ..

Vielen Dank für dein Feedback und verbesserungs Vorschlag.

Gruß Sebi

[maybach]

hi! hab ne frage ich hab das jetzt so gemacht wie du das erklärt hast! und da habe ich jetzt auch das bild siehe hier und wie bekomme ich jetzt die einzelnenn links und die mainframe und die anderen frame hin?????? bitte helfe mir!

mfg
maybach

[dein_opi]

stell mal die frage etwas genauer, verstehe nicht ganz was du machen möchtest..

[DasNiemand]

Jo , schon gutes Forum , nur mit dem HTML code da , um die Bilder in den Hintergrund zu stellen , komm ich noch nicht klar .... wäre nett wenn mir jemand helfen könnt , am besten Per ICQ , da dies nicht solange dauert
wäre für jede Hilfe Dankbar
ICQ =328674450

THX im vorraus , ich bekomm es einfach nicht raus

[Campino]

Hi,
sauber gemacht
nur das png-Dateien Layer mitspeichern ist mir neu

@dasniemand
hab dich in meiner Liste aufgenommen


// Campino

[DasNiemand]

An dieser Stelle von meiner Seite aus ein Herzlichen DANKESCHÖN an Campino
hast mir echt geholfen :roll: