Responsive Webdesign mit Bootstrap und Photoshop

Responsive Webdesign mit Bootstrap und Photoshop | PSD-Tutorials.de

Erstellt von Aeon-112, 13.05.2022.

  1. Aeon-112

    Aeon-112 Noch nicht viel geschrieben

    Dabei seit:
    30.04.2017
    Beiträge:
    45
    Geschlecht:
    männlich
    Software:
    VSCode, Photoshop, Illustrator, MacOS, NodeJS, Docker, Kubernetes, redHat Openshift, Linux
    Responsive Webdesign mit Bootstrap und Photoshop
    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
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. draupnir

    draupnir J. Kriebeler Teammitglied Kreativ-Flatrate-User

    Dabei seit:
    08.11.2008
    Beiträge:
    1.413
    Geschlecht:
    männlich
    Ort:
    Kelkheim (Taunus)
    Software:
    Adobe Illustrator, Photoshop; CINEMA 4D R13; Corel Painter; macOS 10 und 11, Windows 10 und 11
    Kameratyp:
    Sony Alpha 7R
    Responsive Webdesign mit Bootstrap und Photoshop
    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.
    [​IMG]

    # 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.
     
    #2      
    owieortho gefällt das.
  4. Aeon-112

    Aeon-112 Noch nicht viel geschrieben

    Dabei seit:
    30.04.2017
    Beiträge:
    45
    Geschlecht:
    männlich
    Software:
    VSCode, Photoshop, Illustrator, MacOS, NodeJS, Docker, Kubernetes, redHat Openshift, Linux
    Responsive Webdesign mit Bootstrap und Photoshop
    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.
    [​IMG]
     
    #3      
  5. draupnir

    draupnir J. Kriebeler Teammitglied Kreativ-Flatrate-User

    Dabei seit:
    08.11.2008
    Beiträge:
    1.413
    Geschlecht:
    männlich
    Ort:
    Kelkheim (Taunus)
    Software:
    Adobe Illustrator, Photoshop; CINEMA 4D R13; Corel Painter; macOS 10 und 11, Windows 10 und 11
    Kameratyp:
    Sony Alpha 7R
    Responsive Webdesign mit Bootstrap und Photoshop
    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.
     
    #4      
  6. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.313
    Geschlecht:
    männlich
    Ort:
    Ö
    Responsive Webdesign mit Bootstrap und Photoshop
    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.
     
    #5      
  7. Aeon-112

    Aeon-112 Noch nicht viel geschrieben

    Dabei seit:
    30.04.2017
    Beiträge:
    45
    Geschlecht:
    männlich
    Software:
    VSCode, Photoshop, Illustrator, MacOS, NodeJS, Docker, Kubernetes, redHat Openshift, Linux
    Responsive Webdesign mit Bootstrap und Photoshop
    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.
     
    #6      
  8. owieortho

    owieortho Aktives Mitglied

    Dabei seit:
    25.06.2010
    Beiträge:
    785
    Geschlecht:
    männlich
    Ort:
    9.8241,51.3515
    Software:
    PS CS5, Scriptly, Notepad++
    Kameratyp:
    Caputio Ex und Bin
    Responsive Webdesign mit Bootstrap und Photoshop
    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.
     
    #7      
    Aeon-112 gefällt das.
  9. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.313
    Geschlecht:
    männlich
    Ort:
    Ö
    Responsive Webdesign mit Bootstrap und Photoshop
    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.
     
    #8      
    Aeon-112 gefällt das.
  10. Aeon-112

    Aeon-112 Noch nicht viel geschrieben

    Dabei seit:
    30.04.2017
    Beiträge:
    45
    Geschlecht:
    männlich
    Software:
    VSCode, Photoshop, Illustrator, MacOS, NodeJS, Docker, Kubernetes, redHat Openshift, Linux
    Responsive Webdesign mit Bootstrap und Photoshop
    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!
     
    #9      
Seobility SEO Tool
x
×
×