Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: Silkroad Online Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

ChrisIsBack

Fortgeschrittener

  • »ChrisIsBack« ist der Autor dieses Themas

Beiträge: 166

Wohnort: Nähe Kassel

Beruf: Schüler

  • Nachricht senden

1

Sonntag, 28. Oktober 2007, 15:58

Einfach Homepage Erstellen und an HTML anpassen

Öffnet als erstes eine neue Datei (z.b. 800 x 700 px)

Macht eine neue Ebene.

Wir nehmen das Auswahlrechteck und ziehen ein Rechteck wie auf dem Bild. und füllt es mit Grau!

Jetzt auf Bild / Arbeitsfläche drehen / 90° im UZS



Jetzt auf Filter / Verzerrungsfilter / Verbiegen. und die Einstellungen übernehmen.

Jetzt auf Bild / Arbeitsfläche drehen / 90° gegen UZS



Jetzt schieben wir die Ebene ein stücke weiter hoch!

Das müsste jetzt so aussehen wie auf dem Bild.



Jetzt auf und die Einstellungen von den Bildern übernehmen.





Jetzt machen wir unter die 1. ebene eine 2. ebene.

jetzt nehmen das Auswahlrechteck und ziehen ein Rechteck unter der ersten ebene und füllen es mit einem helleren grau. siehe bild !!!



Jetzt eine neue ebene.

und wieder das Auswahlrechteck, zieht wie auf dem Bild eine Auswahl und färbt sie mit einem Grauen Farbverlauf.



Jetzt nehmt ihr wieder das Auswahlrechteck und zieht genau so eine Auswahl wie auf dem Bild und fühlt es mit dem helleren grau!



Wenn ihr wollt könnt ihr noch ein Muster darüber legen wie auf dem Bild.



Jetzt duplizieren wir die die 3. ebene und ziehen sie nach ganz unten wie auf dem bild !!!



Jetzt machen wir eine neue ebene und zeichnen ein Glasball.

macht einen Farbverlauf wie auf dem bild. grau /schwarz /grau /weiß.



Mit diesem verlauf füllt ihr die runde Fläche, die ihr mit erstellen könnt.

Dann: Filter/Weichzeichnungsfilter/gaußscher Weichzeichner Radius = 3



Jetzt eine neue ebene und einen kleineren kreis erstellen als zuvor.

Diesen füllt ihr einfach mit einem schwarz/weiß verlauf.

Jetzt zeichnet ihr eine kreis, der circa 4 Pixel kleiner ist als der vorige und füllt dann diesen mit einem Blau ton.



Jetzt auf und einstellen!!!

schatten nach innen:
Deckkraft:24
Distanz: 29
überfüllen: 0
Größe: 76

schein nach innen:
Deckkraft: 32
Scheinfarbe: schwarz
quelle: kante
überfüllen: 15
Größe: 13

( Da könnt ihr jetzt auch ein Bild von euch rein machen. )



Jetzt gehen wir noch mal auf die ebene 2 und / ebentransparenz auswählen! (die ebene 2 ist die unter dem Banner

Dann eine neue ebene aber die ebentransparenz muss ausgewählt bleiben. das füllen wir jetzt mit weiß.



Jetzt drückt ihr einmal auf D ( jetzt müsste die Vordergrund Farbe schwarz sein und die Hintergrund Farbe weis )

die ebentransparenz muss noch ausgewählt sein und ihr geht auf / Filter Rendering-Filter / Differenz-Wolken



die ebentransparenz muss noch ausgewählt sein. dann auf / Filter / Verzerrungsfilter /Strudel:

Winkel: 527°



die ebentransparenz muss noch ausgewählt sein. dann / Filter / Weichzeichnungsfilter / Radialer Weichzeichner / und die Einstellungen vom bild übernehmen

Dann Strg + U und mit einem Blau färben.



Jetzt machen wir noch schnell ein Muster!

Datei / Neu 5x5 Pixel (Transparent)

Dann nehmt ihr ein Bundstift und mahlt genau das selbe wie auf dem bild ( das weiße muss Transparent bleiben )

Dann auf Bearbeiten / Musterfestlegen und unter 45° speichern.



Ihr bleibt auf der Ebne die das Banner ist. Jetzt auf / Musterüberlagerung und die Einstellungen vom Bild übernehmen !!!



Das müsste dann so aussehen !!!



Jetzt nehmen wir das Textwerkzeug und schreiben denn Seiten nahmen rein.

dann auf und stellt das selbe ein wie auf dem bild !!!







Das müsste dann so aussehen !!!



Jetzt nehmt ihr wieder das Textwerkzeug und schreibt eure link nahmen hin !!!

Ihr könnt noch einen schwarzen rahmen um das bild machen.



Jetzt könnt ihr noch ein bissel an dem Bild rumspielen !!!



Jetzt nehmt ihr das Slice-Werkzeug und umrahmt den teil der Später verlinkt werden soll. ( so wie auf dem Bild )

Jetzt Springen wir zu Image-Ready (Strg + Umschalt + M )

jetzt auf Datei / Optimiert-Version speichern unter...

Das ist jetzt eine html Datei !!!



Fertig jetzt könnt ihr das bild (template weiterverarbeiten z.B.. mit Frontpage ...)




Ich hoffe ihr habt spaß damit ;)


MfG Chris

2

Sonntag, 28. Oktober 2007, 16:27

Sieht nicht schlecht aus ...

Frage : Hasse es selber gemacht oder hasse es woanders kopiert? xD [ TuT ]

ChrisIsBack

Fortgeschrittener

  • »ChrisIsBack« ist der Autor dieses Themas

Beiträge: 166

Wohnort: Nähe Kassel

Beruf: Schüler

  • Nachricht senden

3

Sonntag, 28. Oktober 2007, 16:52

:D Ich habe das gemacht^^ das ist leicht...

bitte bewerten *hust*

MfG Chris

*~ ThE_PaiN ~*

Verklag mich doch!

Beiträge: 933

Wohnort: D:\Norden\Hamburg

Beruf: Programmierer

  • Nachricht senden

4

Sonntag, 28. Oktober 2007, 17:45

hübsches tutorial :thumbup:


www.ThE-PaiN.net

5

Sonntag, 28. Oktober 2007, 17:45

Schick schick :D

Daddi

Administrator

Beiträge: 8 170

Wohnort: Berlin

Beruf: Web-Entwickler / Student(AI)

  • Nachricht senden

6

Sonntag, 28. Oktober 2007, 18:19

Das Problem dabei ist die fehlende Dynamik sowie das schhwere Hinzufügen von Inhalten bei Leuten ohne fundierte HTML Kentnisse.

Daddi

ChrisIsBack

Fortgeschrittener

  • »ChrisIsBack« ist der Autor dieses Themas

Beiträge: 166

Wohnort: Nähe Kassel

Beruf: Schüler

  • Nachricht senden

7

Sonntag, 28. Oktober 2007, 18:56

Mache nachher ein Video wie man es mit Dreamweaver macht also alles verlinkt und den text hinschreibt...Kann aber auch erst morgen sein, weil ich gleich mit janine telefoniere und dann baden/duschen gehe...


MfG Chris

8

Sonntag, 28. Oktober 2007, 19:00

Mache nachher ein Video wie man es mit Dreamweaver macht also alles verlinkt und den text hinschreibt...Kann aber auch erst morgen sein, weil ich gleich mit janine telefoniere und dann baden/duschen gehe...


MfG Chris
Viel spaß XD


Ich wollte die Welt verändern, aba Gott gab mir den Quellcode nicht. --.--


Server: Hercules | Ingame Name: Hitoml | Build: Pure INT s/s | Level: 6x | Guild: FocuS
Cerberus: 0 | Tiger Girl: 0 | Captain Ivy: 0 | Uruchi: 0 | Isyutaru:0 | Lord Yarkan: 0

ChrisIsBack

Fortgeschrittener

  • »ChrisIsBack« ist der Autor dieses Themas

Beiträge: 166

Wohnort: Nähe Kassel

Beruf: Schüler

  • Nachricht senden

9

Sonntag, 28. Oktober 2007, 19:39

Der du weißt schon was geht Pierre ;) schrieb wenn du es haben sillst...#

Die Smilies sind geil :D : :hammer: :idiot: ! Erinnern mich irgendwie an zu Hause *hust*

MfG Chris

10

Sonntag, 28. Oktober 2007, 19:50

Lol der Teil in PS is ja leicht - mich würde eher interessieren wie ich das in Frontpage weiterbearbeiten soll. Wie geht das mit Rollover? Wie klappt das mit ner gescheiten Tabelle dass ich da auch Text reinschreiben kann? Weil wenn ich die html von PS öffne sind da nur die Bilder in der Reihenfolge drin, also kann ich da nix hinschreiben. o.O

ChrisIsBack

Fortgeschrittener

  • »ChrisIsBack« ist der Autor dieses Themas

Beiträge: 166

Wohnort: Nähe Kassel

Beruf: Schüler

  • Nachricht senden

11

Sonntag, 28. Oktober 2007, 21:19

Ich habe jetzt leider keine Zeit dir alle fragen zu beantworetn... wenn du so ein design gemacht hast musst du es als jpg speichern und mit Frontpage öffnen... da kannste nen text ander der seite eingeben und die dann verlinken... mit Front kenne ich mich ent so gut aus...

Werde aber nen idioten sichern TuT schreiben mit Bildern wie man es mit Dreamweaer macht...
Habe bis eben mit meiner Freudnin getelt :herz: :jaa: und gehe jetzt duschen...

Bismorgen und gn8


MfG Chris

12

Donnerstag, 1. November 2007, 23:16

Ganz nettes Tut, wär IMO aber besser gewesen, wenn du auch beschrieben hättest, warum was wie gemacht wird. Du schreibst einfach "diese Einstellungen übernehmen". Jemand der da nicht durchblickt, lernt so nicht besonders gut. Also nächstes mal besser auf den Tutanten eingehen. ;)
Wir müssen [...] der Versuchung widerstehen, ein Geflecht von Gesetzen herzustellen, hinter dem eines Tages die Freiheit unsichtbar wird. - Helmut Schmidt[/size]

13

Dienstag, 6. November 2007, 21:32

hey cool danke :thumbsup:

werd mir das aufjeden fall mal anschauen und durchmachen. das mit dreamweaver wäre nocht wichtig ja, aber sonst sollte ich das verstanden haben.(Will grad html üben)

Bin da noch ne null drin(mit Texteditor ^_^)

Zu dem Dreamweaver wo bekomm ich das her - kostet das was. Falls ja *hust* ihr wisst glaub schon^^ :whistling:


@andere hmm kritisieren kann ich auch ;) , aber sowasmal frewillig machen RESPEKT :thumbup:

War bestimmt viel arbeit alles "screenshoten" cuten, textdazuschreiben etc. aber sieht mal so leicht aus. mal schauen wies in der praxis dann klappt^^


€dit: Da ich bei Image ready immer .gifs geamcht habe, und ich das dann optimized speicher bekomm ich doch en gif raus oder nicht und keine html version^^ wie stell ich das um(bzw. auf was muss ichs stellen?)
The place where the possible and the impossible meet
The possimpeble

ChrisIsBack

Fortgeschrittener

  • »ChrisIsBack« ist der Autor dieses Themas

Beiträge: 166

Wohnort: Nähe Kassel

Beruf: Schüler

  • Nachricht senden

14

Mittwoch, 7. November 2007, 13:07

Du kannst es ruhig mit gif speichern...

www.develdesign.de wenn du es so haben willst wie da musst du es so machen...

Quellcode

1
2
3
4
5
<html>
<body bgcolor=000000>
<center><img height=100%  src="Index_01.gif"></center>
</body>
</html>


Wo das heir steht : <img height=100% src="Index_01.gif"> ,gibst du den namen das bildes ein...

Dreamweaver ist 31Tage um sonst und kostet 600€ aber guck erst ob du damit zu rechts kommst....

Hier der Link

15

Mittwoch, 7. November 2007, 16:10

danke ;) jetzt muss ich dann noch wissen wie ich da sahcen mit verlinke ;) ^^

aber war eigentlich verständlich beschrieben^^ mein bild sieht jetzt so ähnlich aus wie deins^^
The place where the possible and the impossible meet
The possimpeble

16

Mittwoch, 7. November 2007, 17:52

Für den Anfang reicht vollkommen der phase 5 HTML Editor. Da brauchst du absolut kein Dreamweaver. Könnte nämlich leicht passieren, dass du von Dreamweavers Funktionsumfang erschlagen wirst.
Wir müssen [...] der Versuchung widerstehen, ein Geflecht von Gesetzen herzustellen, hinter dem eines Tages die Freiheit unsichtbar wird. - Helmut Schmidt[/size]

hifish

Schüler

Beiträge: 77

Wohnort: Bochum

Beruf: Azubi Fachinformatiker

  • Nachricht senden

17

Donnerstag, 8. November 2007, 23:20

Sieht echt gut aus, aber vieleicht solltest du als erstes mal sagen welches Tool du benutzt und was du überhaupt machen willst, weil mir wurde das erst so zum ende hin klar ;)

Und das Tool ist nicht einmal in deinem Post erwähnt.

Nur so als Tipp, weil du kanst nich automatisch davon ausgehen das alle auf anhieb wissen was sie benutzen sollen.

18

Freitag, 9. November 2007, 06:46

sieht man doch photoshop ;) naja die frage hatte ich mir nicht gestellt xD^^


zu dem phase..: hab ich dann kann ich da die html datei von image ready reinziehen- code wird angezeigt und ich kann dann die einzelenen abschnitte verlinken. wenn ich nen button verlinke und dann anzeigen lass kommt um den button nen lila rahmen, der mir das ganze bild verschiebt.. kann ich den rahmen irgendwie entfernen?
The place where the possible and the impossible meet
The possimpeble

Daddi

Administrator

Beiträge: 8 170

Wohnort: Berlin

Beruf: Web-Entwickler / Student(AI)

  • Nachricht senden

19

Freitag, 9. November 2007, 09:39

Klar kannst du, dem <img> - Tag gibst du ein Style-Attribut;

style="border:none;"

20

Freitag, 9. November 2007, 16:33

ty:
hab das mal gemacht klapp tdanke
The place where the possible and the impossible meet
The possimpeble

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Sunshine« (9. November 2007, 18:05)