Webprogrammierung lernen

Browser Screenshots erstellen mit Fireshot - ein kostenloses Browser Screenshot Tool

Wem die Funktionalität seines Browsers nicht ausreicht kann bei Firefox ca. 4000 Erweiterungen von der Addons Homepage runter laden und installieren (https://addons.mozilla.org/de/firefox/).

Eine geniale Erweiterung für Firefox (und in dem Fall sogar auch für den Internet Explorer) ist Fireshot, ein Tool mit dem man Screenshots von Homepages machen und dann noch mit Erklärungen beschriften kann. Damit kann man Kunden besser zeigen, wo man als Webprogrammierer etwas auf einer Homepage bearbeitet oder geändert hat. Und auch für Kunden die einem damit besser zeigen können, wo auf einer Webseite etwas geändert oder verbessert werden soll, ist das Tool einfach zu bedienen.

Runterladen bzw. Installieren kann man die Erweiterung hier:
https://addons.mozilla.org/de/firefox/addon/5648

Hier eine Anleitung wie man Fireshot verwendet >>

Installation:
Ich empfehle diese Anleitung im Internet Explorer zu öffnen und dann parallel dazu im Firefox die Installation zu starten. Oder die Anleitung vorher ausdrucken.

1. Auf der Downloadseite auf den grünen Button klicken:
Fireshot Installation Schritt 1


2. Warten bis folgende Meldung kommt wo man unten den Button "Jetzt installieren" anklicken kann:
Fireshot Installation Schritt 2


3. Nach dem Klick auf den Button "Jetzt installieren" wird die Erweiterung runtergeladen:
Fireshot Installation Schritt 3


4. Warten bis die Erweiterung komplett runter geladen wurde und in den Dialog der Button "Firefox neu starten" erscheint:
Fireshot Installation Schritt 4


5. Auf den Button "Firefox neu starten" klicken und Firefox wird neu gestartet. Nach dem Neustart ist Fireshot installiert. Jetzt kann man mit Klick auf den roten Fireshot Button rechts oben einen ersten Screenshot Test machen:
Fireshot Installation Schritt 5


6. Beim ersten Start kann man noch entscheiden, ob man Fireshot auch für den Internet Explorer installieren will. Wenn ja bei folgendem Dialog einfach auf "Ja" klicken:
Fireshot Installation Schritt 6


7. Wenn Fireshot für den Internet Explorer installiert ist, dann kommt folgende Meldung, dort auf "Ok" klicken:
Fireshot Installation Schritt 7


8. In einem letzten Schritt kann man noch entscheiden, ob man 30 Tage lang die Pro Version von Fireshot testen will, oder gleich die kostenlose Version. Man kann ohne Probleme die 30 Tage Version testen, wenn die Zeit abgelaufen ist, stellt sich das Tool wieder auf die kostenlose Basisverison um und man kann weiter damit arbeiten. Hier entweder auf "Yes, please switch me to Pro!" (für den Test der Pro Version) oder "No, thank you" (für die kostenlose Basisversion) klicken:
Fireshot Installation Schritt 8


Verwendung von Fireshot:

1. Nachdem man auf den roten Fireshot Button geklickt hat, wird ein Screenshot der Webseite im Fireshot Editor geöffnet. Der Mauszeiger verwandelt sich in ein Fadenkreuz. Jetzt kann man durch anklicken und ziehen eine Maske auf den Screenshot ziehen:
Fireshot Anwenden Schritt 1


2. Durch Klick im rechten Menü auf CropCrop, wird der Screenshot auf die Maske beschnitten. Damit kann man einen Ausschnitt aus dem Screenshot ausschneiden:
Fireshot Anwenden Schritt 2


3. Jetzt noch eine Hinweisbox dort hin setzen, wo z.B. auf der Webseite etwas geändert werden soll. Dazu verwendet man die Funktion Shape (oben in der Menüleiste). Durch Anklicken und Ziehen kann man das Shape aufziehen:
Shape
Fireshot Anwenden Schritt 3


4. So ein Shape lässt sich in vielfältiger Weise nachbearbeiten. Man kann die blaue transparente Fläche verschieben und die Größe ändern. Auch die Box, wo man den Text rein schreiben kann, lässt sich verschieben. Dazu einfach mit dem Mauszeiger auf den roten Punkt gehn, bis die Hand kommt. Dann klicken und an eine beliebige Stelle ziehen.
Dazu hier ein Video:


5. Wenn der Screenshot fertig bearbeitet ist, kann man ihn als Grafikdatei speichern oder gleich als E-Mail vorbereiten. Dazu auf den Save oder Mail Button oben im Menü klicken. Fertig!

Webdesign Nürnberg