Webseite mit Photoshop

Betso · 01.09.2012

Hallo Forengemeinde,

ich habe dieses Tutorial hier beachtet und damit eine Webseite erstellt.

Klick zum Tutorial

Nur das Tutorial endet bei der "Hauptseite"..

Ich habe dann versucht alleine weiterzumachen und die Verlinkungen selbst gesetzt, indem ich die Navigation "gesliced" habe und dann zur nächsten Seite verlinkt habe.

Jetzt habe ich natürlich die Homepage, sieht auch toll aus.. aber :

a) Die Navigation ist statisch, bis auf das Verlinken.. ich habe jedem Navipunkt Schwarz unterlegt.
Geht sowas auch mit Mouseover? Das das erst schwarz unterlegt wird, wenn man mit der Maus darüber fährt?

b) Ebenfalls habe ich versucht ein Bild zoomen zu können (auch mit Mouseover) .. auch das hat nicht funktioniert :-(

Weiß jemand Rat oder Tutorial für mich, damit ich weiter daran üben kann?

Peggy56 · 01.09.2012

AW: Webseite mit Photoshop

Betso schrieb:
Hallo Forengemeinde,

ich habe dieses Tutorial hier beachtet und damit eine Webseite erstellt.

Klick zum Tutorial

Nur das Tutorial endet bei der "Hauptseite"..

Ich habe dann versucht alleine weiterzumachen und die Verlinkungen selbst gesetzt, indem ich die Navigation "gesliced" habe und dann zur nächsten Seite verlinkt habe.

Jetzt habe ich natürlich die Homepage, sieht auch toll aus.. aber :

a) Die Navigation ist statisch, bis auf das Verlinken.. ich habe jedem Navipunkt Schwarz unterlegt.
Geht sowas auch mit Mouseover? Das das erst schwarz unterlegt wird, wenn man mit der Maus darüber fährt?

b) Ebenfalls habe ich versucht ein Bild zoomen zu können (auch mit Mouseover) .. auch das hat nicht funktioniert :-(

Weiß jemand Rat oder Tutorial für mich, damit ich weiter daran üben kann?

Hallo,
es wäre sehr empfehlenswert, wenn du einen Link zu deiner Seite setzen würdest. Woher sollen wir sonst wissen, was du genau gemacht hast, dazu müsste man die css Datei sehen. Dieses Video werde ich mir jetzt nicht runterladen, denn es zieht mir ja meine Punkte ab.
Wenn du ein Bild zoomen möchtest, kannst du das ganz einfach in der css Datei generieren.
so zum Beispiel:

a:link .zoom {
width: 100px;
height: 100px; }

a:hover .zoom {
width: 350px;
height: 350px; }

du musst dann in deiner html Datei das Bild natürlich in die Klasse .zoom einbinden.

Um deine Navi zu verändern, setzt du:

#menu a:hover, .active a {
deine gewünschten veränderungen bzw. img oder farbe }

Ich hoffe, ich konnte dir helfen.

LaFaSiLuc · 01.09.2012

AW: Webseite mit Photoshop

Hast du denn die Navigation mit Bildern (weil du was von slicen schreibst) ?
Am einfachsten geht die Navigation ja mit ner ungeordneten Liste, die du dann mittels CSS ganz nach deinem Geschmack stylen kannst...

Und in Peggys Beispiel musst du dem a Element noch ein display:block verpassen, sonst geht das nicht. Allerdings würde ich an deiner Stelle nach fertigen Galerievorlagen zu gucken, das gibts ja auch in hübsch mit fliessendem Übergang, etc

Betso · 01.09.2012

AW: Webseite mit Photoshop

Hallo ,

ich habe leider keinen Webserver, wo ich das hochladen könnte :-(

Habe jetzt in Photoshop dieses "Bild" von der Seite mit anklickbarer Navigationsleiste und anklickbaren Bildern. Die habe ich gesliced -> rechtsklick -> optionen -> Ziel verknüpft mit der nächsten Seite.

Aber die sind halt "fest", also nur anklickbar..

Kann ich also in psd die Navigation löschen und per CSS eine eigene generieren?

LaFaSiLuc · 01.09.2012

AW: Webseite mit Photoshop

aber lokal mit xampp hast du die schon am laufen?

Peggy56 · 01.09.2012

AW: Webseite mit Photoshop

Betso schrieb:
Hallo ,

ich habe leider keinen Webserver, wo ich das hochladen könnte :-(

Habe jetzt in Photoshop dieses "Bild" von der Seite mit anklickbarer Navigationsleiste und anklickbaren Bildern. Die habe ich gesliced -> rechtsklick -> optionen -> Ziel verknüpft mit der nächsten Seite.

Aber die sind halt "fest", also nur anklickbar..

Kann ich also in psd die Navigation löschen und per CSS eine eigene generieren?

So wie du es beschreibst, hast du nicht gesliced sondern nur verlinkt, d.h. die Seiten miteinander verbunden. Mit welchem Programm schreibst du denn deine HTML und deine CSS?
Hast du noch keinen Provider?

Betso · 01.09.2012

AW: Webseite mit Photoshop

Hallo,

- Einen Provider habe ich nicht, Local Xampp auch nicht. Ich habe nur die .html Datei die Photoshop mir ausgegeben hat.

- gesliced habe ich die mit dem Werkzeug: Slice Werkzeug (Taste C)

- habe jetzt mal dieses Tutorial hier befolgt: Link

Das Problem: unter background.jpg habe ich kein Bild was die gleichen Farben hat, sondern ein größeres zusammenhängendes Bild.. repeat-x habe ich schon rausgenommen, weil das ja sonst sehr seltsam aussieht.
Aber jetzt erscheint nur weiß.

So sieht meine Seite derzeit aus:

http://www.abload.de/image.php?img=fr_forum2xj69.png

Die einzelnen Punkte oben in der Navigation kann ich verlinken.. aber der Text aus Photoshop ist dann in der "wirklichen" webseite nicht markier, oder anklickbar.. ebenso kann ich dann keine "scripts" für zoom etc. verwenden

Peggy56 · 01.09.2012

AW: Webseite mit Photoshop

Leider hast du meine Frage noch nicht beantwortet. Mit welchem Editor schreibst du denn deine CSS ? Hast du die darauf folgenden Seite nschon durchgearbeitet?:

"Und wie machen wir daraus nun eine richtige Website?
Das wird hier erklaert => Webseiten Layout mit Photoshop erstellen - das Coding"

Du kannst doch nicht im Ernst annehmen, dass du nur mit PS eine Webseite erstellen kannst. PS ist ein BILDbearbeitungsprogramm.
Wie steht es denn mit deinen Kenntnissen in HTML5 und CSS3?

leveler · 01.09.2012

AW: Webseite mit Photoshop

Du kannst doch nicht im Ernst annehmen, dass du nur mit PS eine Webseite erstellen kannst. PS ist ein BILDbearbeitungsprogramm.

Man kann schon, sollte es aber besser nicht tun.

Betso · 01.09.2012

AW: Webseite mit Photoshop

Hallo,

ich habe die Testversion von Adobe Dreamweaver. Vorher habe ich mit Phase 5 solche Dinge bearbeitet.
Mir ist klar, dass ich mit PS alleine keine Webseite erstellen kann, deshalb frage ich ja hier nach ;-)

Meine Kenntnisse in HTML und CSS sind begrenzt, weswegen ich mich penibel an Tutorials halte.

Das Webseiten Layout habe ich ja mit PS erstellt, aber so recht will das nicht funktionieren (Navigationsleiste, Bilder-Zoom etc. pp.)
Bei dem Tutorial wird ja nur ein Teilstück der Grafik verwendet, ich habe ja eine Straße als Hintergrund die sich nicht (repeat-x) wiederholen kann.

Peggy56 · 01.09.2012

AW: Webseite mit Photoshop

Betso schrieb:
Hallo,

ich habe die Testversion von Adobe Dreamweaver. Vorher habe ich mit Phase 5 solche Dinge bearbeitet.
Mir ist klar, dass ich mit PS alleine keine Webseite erstellen kann, deshalb frage ich ja hier nach ;-)

Meine Kenntnisse in HTML und CSS sind begrenzt, weswegen ich mich penibel an Tutorials halte.

Das Webseiten Layout habe ich ja mit PS erstellt, aber so recht will das nicht funktionieren (Navigationsleiste, Bilder-Zoom etc. pp.)
Bei dem Tutorial wird ja nur ein Teilstück der Grafik verwendet, ich habe ja eine Straße als Hintergrund die sich nicht (repeat-x) wiederholen kann.

irgendwie scheine ich jetzt auf der Leitung zu stehen.... wenn du keinen Webserver hast und auch keinen Xampp, wie siehst du denn, ob deine Verlinkung richtig funktioniert ?

Das Hintergrundbild ist schon richtig und es gefällt mir ausserordentlich gut.
Es wird auch nicht wiederholt, deshalb muss unbedingt im Background-div geschrieben werden: background-image: url(.........) no-repeat;
Die weisse Fläche, die du siehst, ist die Textfläche. Wie wolltest du die denn haben?

Betso · 01.09.2012

AW: Webseite mit Photoshop

Verlinkt habe ich auf meinen eigenen Ordner auf dem PC
z.B.: D:/Photoshop/Tutorial/team.html

und die team.html habe ich auch in Photoshop bearbeitet und auch mit dem Photoshop text darin erzeugt.

>>Das Hintergrundbild ist schon richtig und es gefällt mir ausserordentlich gut. // Dankeschön

)

Es wird auch nicht wiederholt, deshalb muss unbedingt im Background-div geschrieben werden: background-image: url(.........) no-repeat;

--

Soll ich das gesamte Layout (außer Navigation) nehmen und als Hintergrund nehmen? Oder kann ich z.B. Background_linkestraße in ein div packen und das mit css anordnen?

patrick_l · 01.09.2012

AW: Webseite mit Photoshop

Betso schrieb:
Geht sowas auch mit Mouseover? Das das erst schwarz unterlegt wird, wenn man mit der Maus darüber fährt?

Du solltest dich meiner Meinung nach erst einmal näher mit HTML und CSS beschäftigen und dir die nötigen Grundlagen aneignen. Danach dein Slicen in Photoshop überdenken bzw. schauen welche Grafiken überhaupt nötig sind. Vieles kann schließlich allein durch bzw. mit CSS umgesetzt werden.

Peggy56 schrieb:
a:link .zoom {
width: 100px; height: 100px; }
a:hover .zoom {
width: 350px; height: 350px; }

[strike]Das ist nicht richtig. Bei Hintergrundfarben könnte man es wohl so lösen, bei Grafiken sieht es schon anders aus.[/strike] Auch wäre das so kein zoomen. Man könnte bei Grafiken mit CSS3 und dem "transform" arbeiten. Das "transition" ist nicht notwendig. Wirkt aber so etwas angenehmen beim hovern.

Code:

/* ----- CSS3 ----- */

a {
background: #fff url(../img/bg.png) no-repeat; 
transition: all 500ms ease-in-out;
}
a:hover {
transform: scale(1.25,1.25);
}

Da dies wie viele anderen CSS3 Features nur in neuen (aktuellen) Browsern funktioniert, müsste man entsprechend durch JS ältere Browser nachrüsten bzw. CSS3 beibringen.

Hier ein Thread voll gepackt mit tollen Sachen, die das Website erstellen leichter machen.

(Werbejingle höre

) Hilfreiche Dokumentationen und andere Ressourcen helfen dir dich gut einzulesen und vieles zu verstehen. Also auch dort nochmal stöbern

- Webbereich » Grundlagen & mehr (HTML, CSS & JS)

Grüße Patrick

Peggy56 · 01.09.2012

AW: Webseite mit Photoshop

@ Patrick...
Dein Zitat:
Das ist nicht richtig. Bei Hintergrundfarben könnte man es wohl so lösen, bei Grafiken sieht es schon anders aus. Auch wäre das so kein zoomen. Man könnte bei Grafiken mit CSS3 und dem "transform" arbeiten. Das "transition" ist nicht notwendig. Wirkt aber so etwas angenehmen beim hovern.

Ich habe es bisher immer so gemacht bei Bildern. Selbst der IE vergrößert mir das Bild. Aber danke für deine Version, die werde ich mir notieren und demnächst in meine HP einbinden.
Was ist nicht verstanden habe, du schreibst, bei Hintergrundfarben könnte man so zoomen, aber was will ich denn bei HG Farben zoomen?

patrick_l · 01.09.2012

AW: Webseite mit Photoshop

Peggy56 schrieb:
@ Patrick...
Dein Zitat:
Das ist nicht richtig.

Ist auch ein Fehler von mir :rolleyes:

Weiß nicht was da mit mir los war. Liegt wohl am Wochenende.

Natürlich geht auch mit den Höhen und Breitenangaben bei Grafiken. Ist mir echt schleierhaft wieso ich das Gegenteil behauptet habe. Also ganz schnell wieder vergessen

Mit CSS3 "transition" und "transform" nur etwas netter umgesetzt. Was ja aber nicht unbedingt sein muss. Was aber gemacht werden sollte, die Grafik in der "Endgröße" zu speichern. Also Normalzustand kleiner als Originalgröße.

Grüße Patrick

behemoth65 · 01.09.2012

AW: Webseite mit Photoshop

Das grundlegende Problem des TE scheint zu sein, dass er/sie sich noch nicht mit den Grundlagen von HTML und insbesondere CSS auseinandergesetzt hat. Bevor man eine Website mit PS in Angriff nimmt sollte man sich vielleicht erstmal mit den grund sätzlichen "Basics" der Website-Gestaltung beschäftigen. Das ist jetzt kein "Runtermachen" sondern nur ein Tipp. oder wie mein Opa sagte:" Wenn man rennt, bevor man richtig gehen kann, fällt man auf die Fresse.."

havemorefun · 02.09.2012

AW: Webseite mit Photoshop

ganz neu und frisch eingetroffen ist ADOBE MUSE

Peggy56 · 02.09.2012

AW: Webseite mit Photoshop

patrick_l schrieb:
Ist auch ein Fehler von mir Weiß nicht was da mit mir los war. Liegt wohl am Wochenende. Natürlich geht auch mit den Höhen und Breitenangaben bei Grafiken. Ist mir echt schleierhaft wieso ich das Gegenteil behauptet habe. Also ganz schnell wieder vergessen

Mit CSS3 "transition" und "transform" nur etwas netter umgesetzt. Was ja aber nicht unbedingt sein muss. Was aber gemacht werden sollte, die Grafik in der "Endgröße" zu speichern. Also Normalzustand kleiner als Originalgröße.

Grüße Patrick

Ich habe dein post von gestern ganz schnell wieder aus meinem Kopf heraus gezogen und vernichtet. Nur der Teil mit transition liegt noch abholbereit

.
Ich gebe dir Recht und habe vergessen, es zu erwähnen. Die Größe des Bildes wird in der HTML Datei als Thumb definiert, aber im img Ordner liegt die Originalgröße. Sonst würde das alles ja viel zu pixelig werden. Schönes Wochenende aus dem sonnigen Osnabrück

patrick_l · 02.09.2012

AW: Webseite mit Photoshop

Peggy56 schrieb:
Ich habe dein post von gestern ganz schnell wieder aus meinem Kopf heraus gezogen und vernichtet.

Dann ist ja gut

Hier auch nochmal ein Link zum Thema 2D Transform in CSS3 drei. Ein nettes Tutorial in dem du dir alles nochmal etwas genauer anschauen kannst.

-

Wünsche dir noch einen angenehmen Sonntag und Grüße aus der Nähe. Wohne gleich direkt ums Eck

Peggy56 · 03.09.2012

AW: Webseite mit Photoshop

danke dir für diesen Link, den werde ich mir mal ganz in Ruhe ansehen.

Umme Ecke.... ja ich hab es gesehen, ich habe mich im OS-Stammtischthread gemeldet