Grafiken einer responsive Webseite anfertigen

Auf dieser Seite möchte ich Ihnen zeigen, wie das folgende Bild mit den verschiednen Darstellungen der Webseite erstellt wurde. Auf dem Bild sieht man, wie die Webseite auf einem PC, einem Laptop, einem Tablett und einem Handy aussieht.

Grafiken einer responsive Webseite anfertigen

Vorlage für die Darstellung

Als Grundlage für das Bild dient eine Vorlage, die in dem PNG-Format dargestellt wurde. PNG hat die Eigenschaft, dass Teile des Bildes transparent (durchsichtig) sein können.

In dem Bild auf der rechten Seite, das Vorlage dient, sind die transparenten Teile grau hinterlegt. 

Die einzelnen Bilder der Webseite müssen im nächsten Schritt hinter diese Vorlage gelegt werden.

Grafiken einer responsive Webseite anfertigen

Die Webseiten abfotografieren

Im nächsten Schritt machen wir Bilder von der Webseite. Wir machen jeweils ein Bild  der Webseite auf dem

  • PC mit einer Auflösung von 1920×1080
  • Laptop mit einer Auflösung von 1240×860
  • Tablett mit einer Auflösung von 768×1024
  • Smartpone  mit einer Auflösung von 375×812

Für den Laptop nehmen wir das gleiche Bild, wie für den PC.

 Um die Webseite auf dem PC abzufotografieren, kann man die Windows Funktionen benutzen:

  • mit der Druck Taste wird der komplette Bildschirm als Bild in die Zwischenablage gelegt.
  • mit der Alt + Druck Taste wird ein Bild des aktiven Programms in die Zwischenablage gelegt.
  • mit der Alt Gr + Drucktaste wird eine Bild des aktiven Dialogs in die Zischenablage gelegt.

Von der Zwischenablage kann das Bild mit STRG + V Taste nach Powerpoint oder einem anderen Programm übernommen werden

 

Bild der Webseite vom PC

Grafiken einer responsive Webseite anfertigen

Bild der Webseite vom Tablett

Grafiken einer responsive Webseite anfertigen

Bild der Webseite vom Smartphone

Grafiken einer responsive Webseite anfertigen

Vorlage mit den Bildern zusammenfügen

Im nächsten Schritt geht es darum, die Bilder mit der Vorlage zusammenszufügen. Dazu öffen Sie Powpoint und fügen die Vorglage auf einer leeren Powerpoint Seite ein.

 

Grafiken einer responsive Webseite anfertigen

Bilder einfügen

Danach nehmen Sie das PC Bild und fügen es ebenfalls in die Powerpoint Seite in. Sie müssen das Bild in den Hintergrund verschieben, die Größe verändern und an den richtigen Platz stellen.

Für den Laptop müssen Sie das PC Bild noch einmal einfügen.

Mit den Bildern für das Tablett und das Smartphone verfahren Sie dann genauso.

Grafiken einer responsive Webseite anfertigen

Grafik erstellen

Anschließend können Sie die Powerpoint Seite als Grafik abscpeichern und auf Ihrer Webseite, oder ein einem Dokument verwenden.

Grafiken einer responsive Webseite anfertigen

Video – Erstellung der Grafik

Wir haben den ganzen Prozess auch noch einmal als Video dargestellt.