Homepage erstellen mit Adobe Photoshop 6.0 (--> Auch Grundzüge zur Hp-Erstellung)...

marco888

Haudegen

Dabei seit: 23.02.2004

Beiträge: 740

1

Donnerstag, 19. August 2004, 11:20

Hallöchen!

Ich habe mir kürzlich Adobe Photoshop 6.0 gekauft und möchte nun damit eine Homepage erstellen.

Jedoch habe ich mit PS noch nie eine erstellt(habe aber Html-Kenntnisse) und möchte nun eine erstellen.

--> Bitte um Erklärung von Grundzügen(Links, Iframe, Frame,Tabellen...)
also wie diese zu machen sind, nicht was sie sind, denn das weiß ich schon :finger:

!

--> Suche auch evtl. eine Anleitung für ne einfache Page
(vom Aufbau her ungefähr wie bei www.onlyfree.de)

--> Suche auch brauchbare und gute Tipps.

Thx im voraus,

mfg marco

.: mit dem Alter kommt die Weisheit - oder auch nicht :.

IceThunder

Kaiser

Dabei seit: 05.08.2003

Beiträge: 1 073

2

Donnerstag, 19. August 2004, 11:32

hi!

öhm... was genau möchtest du wissen? wie du mit photoshop ein hp-design machst? google ist dein freund. gibts einige tutorials für, viele z.b. bei photoshoptutorials.

mit photoshop wirst du aber keine homepage coden können! dafür müsstest du wenn überhaupt den dreamweaver verwenden. wobei ich aber von wysiwyg-editoren abraten würde, da diese keinen validen qt erzeugen. wenn du das mit nem text-editor selbst machst, bist besser beraten.

MfG

marco888

Haudegen

Dabei seit: 23.02.2004

Beiträge: 740

3

Donnerstag, 19. August 2004, 11:55

Hallöchen!

Also wenn ich mit Ps 6.0 jetzt eine Homepage designe, wie kann ich dann daruas ne fertige Page machen?

--> Das müsste doch mit Ps 6.0 gehen?

mfg marco

Edit:
Was kann man mit dem Sclise-Werkzeug machen?

.: mit dem Alter kommt die Weisheit - oder auch nicht :.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »marco888« (19. August 2004, 12:05)

IceThunder

Kaiser

Dabei seit: 05.08.2003

Beiträge: 1 073

4

Donnerstag, 19. August 2004, 12:03

hi!

du erstellst mit photoshop nur das design! wenn du das als ganzes hast, musst du es slicen (schneiden), damit du damit weiterbasteln kannst. wie slicen funktioniert, weiß ich aber nicht, da musst du die gfx'er hier fragen. avirell, kintaro, sprayer,...
wenn du dann gesliced hast, schreibst du dir ne index-datei, wo du dann mit html die geschnittenen bilder wieder zusammenfügst. kannst das mit tabellen oder am besten mit divs machen.

MfG

Shin Ryu

Routinier

Dabei seit: 23.03.2003

Beiträge: 467

5

Donnerstag, 19. August 2004, 13:25

Nope.

Hast du ein design erstellt, momentan ungeachtet der Techniken, die du benutzt, und fertig gesliced, so gehst du unter Datei/ wechseln zu Imageready. ( Ist imo integriert in Photoshop 7.0 und CS; wie es bei 6.0 aussieht, weiss ich nicht genau)

Dort hast du die Möglichkeit, deinem Des9ign den letzten Schliff zu verpassen, was die Interaktivität und einige andere Feinheiten ( Animationen etc. ) angeht.

Optional kann auch hier gesliced werden.

****
Slicen ist btw. dazu da, deine Page in einige sinnvolle Abschnitte einzuteilen. Also du schneidest dein Design regelrecht auseinander, um halt eine Navigation zu erstellen oder derartiges. Würdest du nicht sclicen, hättest du einfach nur ein Bild von deinem Design. PS weiss ja nicht, wo du die Navi haben willst; daher ist es deine Aufgabe, es dem Programm zu "sagen"
****

Das Slice-Werkzeug findest du in Photoshop ( Imageready auch ) in dem Werkzeug Modul ( zu aktivieren unter Fenster/Werzeuge )

Bist du mit dem Sclicen fertig, so gehst du unter Imageready zu Datei / Als Hmtl exportieren ( ? ) .

Ist deine Seite exportiert, so kannst du in einem geeigneten Editor den Feinschliff vornehmen. ( Mouseover etc. einbauen, falls du das nicht schon IR getan hast )

Tuts zum Slicen findest du unter : http://www.thewebmachine.com/

str8fwd.de - coming next winter

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Shin Ryu« (19. August 2004, 13:27)

marco888

Haudegen

Dabei seit: 23.02.2004

Beiträge: 740

6

Donnerstag, 19. August 2004, 17:37

Hallöchen!

Also das hat mir sehr geholfen!

Echt danke!

Noch eine kleine Frage:

Ich habe einen Farbferlauf und über diesem ist ein Text, jedoch wenn ich Sclise, dann kann ich diesen Text ja icht mehr verändern, außer die .pds-Datei zu erneuern, was ist hier ein Ausweg?

Thx,

mfg marco

.: mit dem Alter kommt die Weisheit - oder auch nicht :.

zoryfl

Moderator

Dabei seit: 14.01.2003

Beiträge: 2 766

7

Donnerstag, 19. August 2004, 17:40

Mach den Text erst nach dem Slicen drauf.

Mehr fällt mir auch nicht ein!

MfG

http://zoryfl.wmw.cc

marco888

Haudegen

Dabei seit: 23.02.2004

Beiträge: 740

8

Donnerstag, 19. August 2004, 19:36

Hallöchen!

Habe hier mal nen uelltext(mit Ps 6.0 erstellt:

Problem:

Wie kann ich text darüber schreiben, ohne, dass sich ein Weißer Fleck bildet?

Zitat

<HTML>
<HEAD>
<TITLE>hp 19.08.2004 teil2 sclising</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF>

<TABLE WIDTH=950 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=40 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=190 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=37 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=50 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=10 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=618 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=8 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=70 HEIGHT=1></TD>
<TD></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=3>
<IMG SRC="images/hp-19.08.2004-teil2-sclisin.gif" WIDTH=267 HEIGHT=124></TD>
<TD COLSPAN=6>
<IMG SRC="images/hp-19.08.2004-teil2-scli-03.gif" WIDTH=757 HEIGHT=40></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=40></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=3>
<IMG SRC="images/hp-19.08.2004-teil2-scli-04.gif" WIDTH=61 HEIGHT=92></TD>
<TD COLSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-05.gif" WIDTH=626 HEIGHT=66></TD>
<TD ROWSPAN=3>
<IMG SRC="images/hp-19.08.2004-teil2-scli-06.gif" WIDTH=70 HEIGHT=92></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=66></TD>
</TR>
<TR>
<TD COLSPAN=2 ROWSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-07.gif" WIDTH=626 HEIGHT=26></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=18></TD>
</TR>
<TR>
<TD ROWSPAN=4>
<IMG SRC="images/hp-19.08.2004-teil2-scli-08.gif" WIDTH=40 HEIGHT=593></TD>
<TD ROWSPAN=3>
<IMG SRC="images/hp-19.08.2004-teil2-scli-09.gif" WIDTH=190 HEIGHT=524></TD>
<TD ROWSPAN=4>
<IMG SRC="images/hp-19.08.2004-teil2-scli-10.gif" WIDTH=37 HEIGHT=593></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=8></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="images/hp-19.08.2004-teil2-scli-11.gif" WIDTH=1 HEIGHT=585></TD>
<TD COLSPAN=5>
<IMG SRC="images/hp-19.08.2004-teil2-scli-12.gif" WIDTH=756 HEIGHT=36></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=36></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-13.gif" WIDTH=50 HEIGHT=549></TD>
<TD COLSPAN=2>

hier solll text (nur einer von mehreren)

<IMG SRC="images/hp-19.08.2004-teil2-scli-14.gif" WIDTH=628 HEIGHT=480></TD>
<TD COLSPAN=2 ROWSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-15.gif" WIDTH=78 HEIGHT=549></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=480></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/hp-19.08.2004-teil2-scli-16.gif" WIDTH=190 HEIGHT=69></TD>
<TD COLSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-17.gif" WIDTH=628 HEIGHT=69></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=69></TD>
</TR>
<TR>
<TD COLSPAN=9>
<IMG SRC="images/hp-19.08.2004-teil2-scli-18.gif" WIDTH=1024 HEIGHT=51></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=51></TD>
</TR>
</TABLE>

</BODY>
</HTML>

Thx,

mfg marco

.: mit dem Alter kommt die Weisheit - oder auch nicht :.

IceThunder

Kaiser

Dabei seit: 05.08.2003

Beiträge: 1 073

9

Donnerstag, 19. August 2004, 20:20

hi!

hast dafür auch mal ein beispiel? kann ich mir nicht richtig vorstellen. btw: benutze doch bitte bei werzuweisungen wie z.b. width=51 quotes, das ist eleganter. also width="51".

MfG

marco888

Haudegen

Dabei seit: 23.02.2004

Beiträge: 740

10

Donnerstag, 19. August 2004, 21:52

Hallöchen!

Also hier hab ich mal den graben Anfang:

mfg marco

»marco888« hat folgendes Bild angehängt:

.: mit dem Alter kommt die Weisheit - oder auch nicht :.

Shin Ryu

Routinier

Dabei seit: 23.03.2003

Beiträge: 467

11

Donnerstag, 19. August 2004, 22:25

Setze doch den Verlauf ( den Content Teil / Menü Teil, oder was auch immer du daraus machen willst ) als Hintergrund, und anschließend per CSS als statisch definieren.

Das ganze in IFrames, und fertig der Salat.

Wenn du nicht auf Frames stehst, müsstest du das ganze dann so slicen, dass sich der content Teil zum Beispiel ausdehnt, was aber dem Verlauf nicht richtig gut tun würde.

Daher haben die meisten Universal Resolution Pages ( ich nenn sie mal so

) keine Verläufe oder leicht zu zerstörende Hintergründe, da sie oft auf Inhalt und Information fixiert sind.

Versuch es mal mit einem Pattern. Das sind kleine Hintergründe, die so generiert sind, dass sie sich gegenseitig ergänzen und somit keine Lücken enstehen können.

Moment, ich habe da einen Link :

http://www.k10k.net/frames.aspx?section=patterns

str8fwd.de - coming next winter

marco888

Haudegen

Dabei seit: 23.02.2004

Beiträge: 740

12

Freitag, 20. August 2004, 12:31

Hallöchen!

Also ich habe nun den Quelltext vereinfacht:

Zitat

<HTML>
<HEAD>
<TITLE>hp 19.08.2004</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<body >

<TABLE

style="background-image:url(bakground1.jpg)" -geht net!!!

WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/hp-19.08.2004-teil2-sclisin.gif" WIDTH=277 HEIGHT=120></TD>
<TD>
<IMG SRC="images/hp-19.08.2004-teil2-scli-02.gif" WIDTH=747 HEIGHT=120></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-03.gif" WIDTH=1024 HEIGHT=461></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-04.gif" WIDTH=1024 HEIGHT=58></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-05.gif" WIDTH=1024 HEIGHT=71></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/hp-19.08.2004-teil2-scli-06.gif" WIDTH=1024 HEIGHT=58></TD>
</TR>
</TABLE>

</BODY>
</HTML>

Jedoch habe ich noch ein zwei Probleme:

1. Wie kann ich im Tabel-Bereich(siehe Quelltext) einen Hintergrund darüber legen, der mit heigth und wi. veränderbar is?

2. Wie kann ich im Sclise-bereich 4 es so machen, dass bei Platzbedarf automatisch zusätzliche Sclise 4-Teile sich darunter ergänzen?

3. Das Hauptproblem:
Wie Text über die Bilder?
(Achtung: Mit background is nicht, denn das is schon der Verlauf!!! :finger

Thx,

mfg marco

»marco888« hat folgendes Bild angehängt:

.: mit dem Alter kommt die Weisheit - oder auch nicht :.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »marco888« (20. August 2004, 12:33)

dsich

Routinier

Dabei seit: 22.11.2003

Beiträge: 417

13

Dienstag, 24. August 2004, 08:10

Das mit dem Slicen erfordert viel Erfahrung.
Du solltest einfach üben und ausprobieren.
Dein 3. Slice ist denke ich sowiso zu groß. Mach die Felder so das dort wo Text steht ein eigenes Tabellenfeld ist. Dort kannst Du dann das "Bild" als Hintergrund nehmen und normal texten.
Das komplizierte ist die Slices so setzten das sie sich beim Überlauf automatisch strecken. Das geht auch indem man das Bild aus Hintergrund verwendet und kacheln lässt. Die Größen in etwa fixieren kannst Du indem Du die Größen der Slice Bilder als Größe der <td> verwendest. Von den Verläufen im Hintergrund würde ich am Anfang ganz weggehen. Versuchs erst mal mit einem einheitlichem Grau oder mit Weiß.
Bei Deinem Slice Nr. 4 müsstest Du an der Seite noch Slices machen und dort einen Überlauf provozieren. Dann siehst Du was sich wie streckt und kannst ggf. andere Felder durch Höhenangaben und "oben" / "unten" befehlen ggf. fixieren.

dsich

www.tauchvideo.com
www.spiegel-colditz.de
www.solar4me.de
www.space-discount.net

marco888

Haudegen

Dabei seit: 23.02.2004

Beiträge: 740

14

Dienstag, 24. August 2004, 16:31

Hallo,

also danke @disch!!!!

Habe es so gemacht, wie du es gesagt hast und es funktioniert!

Also nochmal vielen Dank.

Jedoch wegen:

<TABLE

style="background-image:url(bakground1.jpg)" -geht net!!!

WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>

c u,

mfg marco

.: mit dem Alter kommt die Weisheit - oder auch nicht :.

IceThunder

Kaiser

Dabei seit: 05.08.2003

Beiträge: 1 073