Wie erstellt man Design Entwurf in Photoshop für Website mit "Parallax Scrolling" Effekt?

...komplette Frage anzeigen

2 Antworten

Ich zeige auf der Skizze den Ausschnitt des Bildes und schreibe z.B. (Parallax - position: center center) daneben. Wenn jemand anders die Website programmiert (meist mache ich das selbst), bekommt er das ganze Bild, halt nicht nur den Ausschnitt, bzw. er kann sich das Bild aus der Skizze ziehen.

Und meist schreibe ich dem Programmierer sowieso eine readme.text Datei, und er kann ja anrufen wenn er Fragen hat.

moonhj2323 07.07.2017, 15:28

...und welche Ausschnitt? Ich habe in vielen Artikeln gelesen über "für die wichtigste Schnitt" Entwurf machen.Wie definiere ich das? Es bewegt sich bei jede Pixel. 

Was ist parallax position?

0
Steffile 07.07.2017, 15:40
@moonhj2323

Wenn du das Biild in der Website einfuegst, ist es ja eigentlich ein Hintergrundbild, bloss mit position fixed, das macht dann den Effekt.

Genauso wie bei anderen Hintergrundbildern kannst du die position bestimmen: left top, center center, center bottom etc.

Wenn du also willst, dass der obere Teil des Bilds vor dem scrollen sichtbar ist, gibst du position: center top an, und dementsprechend anders, wenn die "Startposition" anders sein soll. 

Oder wenn du dir nicht sicher bist, gib gar keine Poition an und lass den Programmierer das regeln.

1
moonhj2323 07.07.2017, 16:18
@Steffile

Ich dachte Hintergrund ist nur eine Ebene. Es gibt noch Vordergrund Ebene und Inhalt Ebene, und die Ebenen liegen quasi übereinander und bewegen sich mit unterschiedlichen Geschwindigkeit, dadurch entsteht das Effekt. Stimmt das?

Beispiele: http://www.cantilever-chippy.co.uk/

http://www.itosieceni.pl/

Es ist so komplex dass ich gar nicht weiß wo soll ich anfange...

Wie sieht es dann in PS aus?


0
Steffile 07.07.2017, 19:59
@moonhj2323

Zerbrich dir echt den Kopf nicht darueber. Fueg in PS einfach das gesamte Bild in eine tiefere Ebene als die Sektionen die davor und danach kommen. Also etwa:

Section A normal

Section B Parallax - das Hintergrundbild ueberlappt mit Section A + C, liegt aber auf einer tieferen Ebene und nur der Ausschnitt von Sektion B ist sichtbar. Die Teile des Bilds, die unter den anderen Sections liegen, werden nur beim Scrollen sichtbar.

Section C normal

1
moonhj2323 10.07.2017, 09:16
@Steffile

Hi, ich glaube ich habs verstanden. Vielen Dank für deine Hilfe! :-)

0
Alexderschwabe 07.07.2017, 15:53

Richtige Vorgehensweise 👍🏼

0

In Photoshop werden die benötigten Bilder lediglich fürs Web optimiert und anschließend in unterschiedlichen Größen gespeichert. 

wie kann man das auf einen unbewegten Entwurf darstellen.

Im Werkzeuge-Bedienfeld gibt es unter anderem das Anmerkungen-Werkzeug (Shortcut i). Mit diesem Tool kannst du Notizen erstellen und so an den Programmierer weitergeben. Wobei Features und Funktionen eigentlich schon bei der Konzeption oder spätestens im Mockup (Wireframe) festgehalten werden.  

was bekommt Programmierer zum Schluss von mir?

Ja was wohl? ;) Natürlich sämtliche Bilder und Grafiken, die der Entwickler für die Umsetzung des Layouts benötigt. Welche das genau sind, vom jeweiligen Layout abhängig. Entweder mit dem Entwickler Rücksprache hältst oder diesem gleich deine Arbeitsdatei zukommen lässt. 

Ob einfacher oder mit mehreren Ebenen umgesetzter Parallax-Effekt. Die Vorgehensweise ist im Grunde immer die selbe. Wenn es lediglich ein Bild oder eine Grafik ist, diese fürs Web-optimiert speicherst. Bei einem Parallax-Effekt mit mehreren Ebenen lediglich die einzelnen Bilder im PNG-Format mit transparentem Hintergrund speicherst. Grafiken hingegen Vektoren-basiert umgesetzt werden sollten. 

Zu guter Letzt noch ein paar Tipps zum Arbeiten in Photoshop: 

  1. Gestalte (d)ein Layout modular
  2. Betitle deine Ebenen sinnvoll
  3. Gruppiere zusammenhängende Elemente/Ebenen (Ebenen-Gruppen)
  4. Nutz Ebenenkompositionen und/oder Zeichenflächen
  5. Arbeite mit einem Grid (Menü: Ansicht > Neues Hilfslinienlayout)

LG medmonk 

Was möchtest Du wissen?