  |
| Autor |
Nachricht |
Sebi
Stammuser [User]
Anmeldung: 15.10.04
Beiträge: 44
|
 Verfasst am: 21.10.2004, 14:10 Titel: [Tutorial] Slicen mit PhotoShop und PhotoImpact |
 |
|
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!
_________________
Können ist, wenn man etwas umsetzen kann!
Zuletzt bearbeitet von Sebi am 31.10.2004, 22:13, insgesamt einmal bearbeitet
|
|
| Nach oben |
|
 |
David Reisner
Power-Poster [Admin]
Anmeldung: 08.04.04
Beiträge: 727
Wohnort: Peggau/Öst ...
|
|
| Nach oben |
|
|
Sebi
Stammuser [User]
Anmeldung: 15.10.04
Beiträge: 44
|
| Verfasst am: 31.10.2004, 22:21 Titel: |
|
|
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
_________________
Können ist, wenn man etwas umsetzen kann!
|
|
| Nach oben |
|
|
dein_opi
Beliebter [User]
Anmeldung: 07.11.04
Beiträge: 421
Wohnort: Göttingen
|
| Verfasst am: 08.11.2004, 12:25 Titel: |
|
|
super tutorial, hast du fein gemacht 
hätte nur eine einzige zeile zu berichtigen
| Code: | 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
| Code: | | <td style="background-image:url(psd78027.gif"></td> |
so meckert der validator nicht rum 
_________________
 News Script Rezepte CMS Counter
|
|
| Nach oben |
|
|
Sebi
Stammuser [User]
Anmeldung: 15.10.04
Beiträge: 44
|
| Verfasst am: 09.11.2004, 14:53 Titel: |
|
|
Ok .. stimmt ..
Vielen Dank für dein Feedback und verbesserungs Vorschlag.
Gruß Sebi
_________________
Können ist, wenn man etwas umsetzen kann!
|
|
| Nach oben |
|
|
maybach
Neuer [User]
Anmeldung: 26.07.05
Beiträge: 1
Wohnort: bautzen
|
| Verfasst am: 26.07.2005, 11:15 Titel: lol |
|
|
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
_________________
>KLICK<
|
|
| Nach oben |
|
|
dein_opi
Beliebter [User]
Anmeldung: 07.11.04
Beiträge: 421
Wohnort: Göttingen
|
| Verfasst am: 26.07.2005, 12:24 Titel: |
|
|
stell mal die frage etwas genauer, verstehe nicht ganz was du machen möchtest..
_________________
News Script Rezepte CMS Counter
|
|
| Nach oben |
|
|
DasNiemand
Neuer [User]
Anmeldung: 18.10.05
Beiträge: 2
|
| Verfasst am: 18.10.2005, 03:50 Titel: |
|
|
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 
|
|
| Nach oben |
|
|
Campino
Beliebter [User]
Anmeldung: 19.09.04
Beiträge: 451
Wohnort: Delmenhors ...
|
| Verfasst am: 18.10.2005, 11:52 Titel: |
|
|
Hi,
sauber gemacht
nur das png-Dateien Layer mitspeichern ist mir neu
@dasniemand
hab dich in meiner Liste aufgenommen
// Campino
_________________
d >_< b
|
|
| Nach oben |
|
|
DasNiemand
Neuer [User]
Anmeldung: 18.10.05
Beiträge: 2
|
| Verfasst am: 18.10.2005, 13:15 Titel: |
|
|
An dieser Stelle von meiner Seite aus ein Herzlichen DANKESCHÖN an Campino
hast mir echt geholfen 
|
|
| Nach oben |
|
|
s04malte
Neuer [User]
Anmeldung: 30.08.06
Beiträge: 9
|
| Verfasst am: 30.08.2006, 02:32 Titel: |
|
|
Gutes tutorial , nur komischer weise hab ich einen komplett andern quell code als was du hier schreibst 
Ja ich liefere euch ein link zur problem sichtung 
http://619graphics.61.funpic.de/DFB/test.html
PS : Habe mich bis jetzt mit dem normalen Code den PS erstellt rumgequält =(
_________________
Gott ist Gott und ich bin ich !
|
|
| Nach oben |
|
|
benjam4
Bekannter [Mod]
Anmeldung: 17.05.06
Beiträge: 1280
Wohnort: Ostfildern ...
|
| Verfasst am: 29.10.2006, 16:30 Titel: |
|
|
Ich kram das Thema nochmal raus, und zwar hab ich mich jetzt mal an das Thema gemacht.
Jetzt mein Problem, ich hab das alles so gemacht, auch mit dem umändern, in td background=... .
Wenn jetzt aber der Text in einer Zelle länger ist als die zelle hoch, wiederholt sich das hintergrundbild darunter nochmal, ich hätte aber gerne einen Scrollbalken mit einem feststehenden Hintergrundbild.
Kann mir jemand helfen.
_________________
Rechtschreibfehler sind beabsichtigt, sie dienen der Verschleiherung meiner tatsächlichen Genialität
____________________________________
Eine Signatur sie alle zu knechten
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1597
|
| Verfasst am: 29.10.2006, 18:44 Titel: |
|
|
füge mal folgendes hinzu:
| Code: |
style="background-attachment: fixed; background-repeat: no-repeat; overflow: auto;"
|
Sollte dann eigentlich klappen
MfG,
chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
benjam4
Bekannter [Mod]
Anmeldung: 17.05.06
Beiträge: 1280
Wohnort: Ostfildern ...
|
| Verfasst am: 29.10.2006, 19:17 Titel: |
|
|
ich habs nicht damit nicht hingekriegt, ich poste ma meinen Quellcode:
| Code: | <HTML>
<HEAD>
<TITLE>Design</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="stil.css" type="text/css">
</HEAD>
<BODY BGCOLOR=#808080 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 text="#FF0000">
<TABLE WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=2 background="Bilder/Design_01.gif" WIDTH=934 HEIGHT=145 valign="middle" align="center">
<h2>My Design</h2></TD>
<TD ROWSPAN=2 background="Bilder/Design_02.gif" WIDTH=90 HEIGHT=768 align="center" valign="top">
<h3>rechte Spalte</h3></font></TD>
</TR>
<TR>
<TD background="Bilder/Design_03.jpg" WIDTH=219 HEIGHT=623 align="left" valign="top">
<h4>Navigation</h4>
<ol>
<li>Punkt</li>
<li>Punkt</li>
</ol>
</TD>
<td background="Bilder/Design_04.gif" WIDTH=715 HEIGHT=623 align="left" valign="top" >
<h3>Content</h3><br>
blabla<br>blabla<br>blabla<br>
<!-- Hier ist der Text zu lang.-->
</td>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML> |
Wenn ich jetzt in der dritten Zelle einen Text einfüge, der zu länger ist als die Zelle hoch(623 Pixel), wird das Bild unten wiederholt, und alles verzieht sich irgendwie.
Könntet ihr euch den Code ma angucken?
Vielen Dank, schon mal jetzt.
Benjamin
_________________
Rechtschreibfehler sind beabsichtigt, sie dienen der Verschleiherung meiner tatsächlichen Genialität
____________________________________
Eine Signatur sie alle zu knechten
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1597
|
| Verfasst am: 29.10.2006, 19:52 Titel: |
|
|
jupp,
ich habe mich vertan
pack den Inhalt der Zelle in ein DIV:
| Code: |
<td background="Bilder/Design_04.gif" style="background-attachment: fixed; background-repeat: no-repeat;" align="left" valign="top" >
<div style="height: 623px; width: 715px; overflow: auto;">
---Inhalt---
</div>
</td> |
wobei du dir die stylesheets im <td> eigentlich auch sparen kannst, stellen nur sicher, dass das Hintergrundbild wirklich nicht wiederholt wird
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
|
|
