Responsive Webdesign mit Bootstrap und Photoshop

[Aeon-112]

Hi Zusammen,
ich würde gerne mit Photoshop anfangen Response Websites zu erstellen, nun meine Frage wie würdet Ihr dort vorgehen? Bis her habe ich immer einfach drauf los gecodet und bei Bedarf Grafiken erstellt und eingefügt, bei mir kommt überwiegend das Bootstrap Framework zum Einsatz sowie Javascript und SASS. Ich habe mir vor etwaiger Zeit mal ein Theme auf ThemeForest gekauft in welchem ebenfalls psd Dateien drinne waren. Jedoch in unterschiedlicher Größe des Arbeitsbereiches mal 1600x2121 mal in 1280x1024 etc. Wie würdet Ihr beim erstellen von Websites mit Photoshop vorgehen welche Größe für das Dokument etc.

Gruß
Ich

 

[draupnir]

Guten Morgen Aeon,
zum Programmieren von Website ist Dreamweaver das Werkzeug. Photoshop, Illustrator oder InDesign bieten nach meinem Verständnis bestimmte unterstützende Hilfsmittel an. (Adobe hat ja vor langer Zeit Fireworks abgeschafft und nie einen echten Ersatz dafür gebracht oder dessen Funktionen in einem anderen Programm eingebaut.)

Eine responsive Webseite hat bestimmte Punkte, an denen von der einen auf eine andere der Darstellung umgeschaltet wird. Diese Veränderung läuft über CSS.
Mein Vorgehen für wäre, dass ich in Photoshop mir zuerst ein Dokument in der maximalen Breite anlege, z. B. 1600 px, die die Webseite haben soll. Die Höhe ergibt sich später aus dem Inhalt, hier in Photoshop würde ich ein übliche Höhe eintragen.
Dann würde ich mir (verschiedenen farbige) Rechtecke erstellen für die nächsten Breiten, die die Website haben soll. Die Breiten ergeben sich aus den benutzen Endgeräten wie Laptop, Tablett und Smartphone. Die Rechtecke, die die Grenzen der kleineren Layouts anzeigen werden im Arbeitsdokument zentriert. Auf diese Grenzen kannst du nun senkrechte Hilfslinien ziehen.
Nun würde ich verschiedene Ebenen anlegen und zwar für jede Bildschirmgröße eine.
Dann hast Du eine Basis für Deine Gestaltung.

Ich habe beim Entwerfen von Website immer erst nur mit Rechtecken gearbeitet, wobei diese den späteren div-Boxen entsprechen. Dabei hatte ich ein Farbschema: grau waren die fixen Bereiche, orange die Bereiche, die automatisch gefüllt wurden aus der Datenbank (CMS) und grün die Bereiche, die mit Text und Bild gefüllt wurden und den eigentlichen Inhalt der Seite ausmachten. Dies stammt noch aus einer Zeit von XHTML und CSS 2. Heute gibt es viele andere, schöne Möglichkeiten.


# media
siehe https://www.freecodecamp.org/news/c...ts-media-types-standard-resolutions-and-more/
Now let’s see some common breakpoints for widths of devices:
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV
und siehe https://www.w3schools.com/css/css_rwd_mediaqueries.asp
weitere im Web bei Tante Google.

Viel Erfolg,
– j.

 

[Aeon-112]

Vielen Dank für deinen sehr ausführlichen Beitrag! Vom programmieren nutze ich seit Jahren schon sehr erfolgreich VSCode, mir ging es hauptsächlich darum wie man so ein Layout in Photoshop und Illustrator (für Logos etc.) gestaltet und hinterher dann stück für stück zurecht schneidet und programmiert. Ich habe mir vor einiger Zeit bei ThemeForest mal ein Layout gekauft wo auch die PSD Dateien mit enthalten sind, jedoch blicke ich nicht ganz durch warum bzw. was sich der Author bei gewissen Hilfslinien gedacht hat.

Ah gut zu wissen, hatte Fireworks nämlich ewig gesucht in der Adobe Cloud und nicht mehr gefunden.

Habe mal ein Foto angehangen von dem PSD Layout, vielleicht kannst du mir ja erklären was sich der Author mit den Hilfslinien gedacht hat.

 

[draupnir]

Guten Morgen,
ich vermute mal, dass die Hilfslinien für vier Spalten stehen. Bei maximaler Breiter gibt es vier Spalten zu sehen, wenn der Bildschirm kleiner ist, dann nur drei Spalten, und im minimalen Fall gibt es nur eine Spalte. Nach der Logik müsste nach meiner Meinung, dann aber alles innerhalb der beiden doppelten Hilfslinien sein, was im Kopfbereich nicht der Fall ist.

VSCode ist auch ein guter HTML/CSS-Editor. Damit wirst Du von der technischen Seite aus, keine Probleme haben.

Viel Erfolg,
– j.

 

[Myhar]

Guten Morgen Aeon,
zum Programmieren von Website ist Dreamweaver das Werkzeug.

Vor 15 Jahren ja, aber heutzutage nicht mehr. Kein wirklich ernstzunehmender Webdeveloper verwendet heute mehr Dreamweaver. Visual Studio Code (nicht zu verwechseln mit Visual Studio) ist hier die populärste Wahl zur Zeit, auch da es gratis verfügbar ist.

Auf das eigentliche Thema bezogen: Was musst du "zurechtschneiden"? Bilder fügst du sowieso so ein, wie sie vorhanden sind. Ansonsten braucht es keinerlei Grafiken für Rahmen etc. mehr, das funktioniert alles mit CSS im modernen Webdesign.

Logos sind ja zB auch SVG, da muss nichts geschnitten werden. Die werden als SVG eingefügt und passen sich automatisch der Seite an.

 

[Aeon-112]

Auf das eigentliche Thema bezogen: Was musst du "zurechtschneiden"? Bilder fügst du sowieso so ein, wie sie vorhanden sind. Ansonsten braucht es keinerlei Grafiken für Rahmen etc. mehr, das funktioniert alles mit CSS im modernen Webdesign.

Logos sind ja zB auch SVG, da muss nichts geschnitten werden. Die werden als SVG eingefügt und passen sich automatisch der Seite an.

Mir wurde mal erklärt, dass wenn man das Layout in PSD erstellt hat, dass man dieses dann mit so genannten Slices raus schneidet und dann programmiert.

Meine Logos habe ich in Illustrator erstellt und als Icons kommen Font Aweasome und Bootstrap icons zum Einsatz.

 

[owieortho]

Mir wurde mal erklärt, dass wenn man das Layout in PSD erstellt hat, dass man dieses dann mit so genannten Slices raus schneidet und dann programmiert.

Das stimmt(e) wohl. Genauso hat man auch mal Layouts mit Tabellen gemacht oder Seiten in frames aufgeteilt. Alles hat seine Zeit. Es ist deswegen nicht unbedingt falsch, aber eben nicht mehr zeitgemäß.

O.

 

[Myhar]

Mir wurde mal erklärt, dass wenn man das Layout in PSD erstellt hat, dass man dieses dann mit so genannten Slices raus schneidet und dann programmiert.

Wenn du im Jahre 2002 lebst dann stimmt das auch. Falls du aber schon im Jahre ~2010 (oder auch später) angekommen bist, dann kannst du das getrost vergessen.
Wenn du dein Logo als SVG hast dann füge das als SVG ein.
Warum aber zwei icon-sets, nimm lieber eines. Das passt dann auch optisch besser zusammen. Auch kannst du statt icons direkt SVG verwenden, wie beim Logo.

 

[Aeon-112]

Super vielen Dank! Als icon set habe ich mich für die Bootstrap Icons entschieden, da ich auch mit dem Bootstrap Framework arbeite. Mein Logo habe ich als SVG eingeführt mittels Inline SVG, dadurch kann ich dies per CSS und Javascript noch "manipulieren".

Besten Dank an alle für eure Hilfe!