eCommerce Entwickler Blog

Der Entwickler Blog enthält verschiede Lösungsansätze für Fehler und Bug aus dem eCommerce Umfeld. Hier berichten Entwickler über ihre Erfahrungen und teilen ihre Lösungswege.

Photoshop Grundfunktionen

Für Anfänger ist die Fülle der Möglichkeiten erst einmal einschüchternd. So kompliziert ist Photoshop mit seinen Funktionen erst einmal nicht da viele Dinge für normale Aufgaben nicht benötigt werden.

 

Hier möchte ich dir zeigen wie man auch als Laie oder Programmierer einige seiner Ziele mit Photoshop erreicht. Zusätzlich möchte ich darauf hinweisen das viele Wege nach Rom führen, dies gilt auch für Photoshop daher zeige ich immer nur einen Weg und ich werde auch nicht jede Kleinigkeit ausführen. Um diese Informationen produktiv nutzen zu können sollten man schon die Oberfläche von Photoshop kennen wer diese noch nicht kennt sollte sich erst einmal dazu Tutorials anschauen.

 

Bildgröße ändern

Man zieht einfach das gewünschte Bild in den leeren Bereich von Photoshop.

 

Dann klickt man auf den Reiter „Bild“ und dann auf den Punkt „Bildgröße“

 

Ein neues Fenster öffnet sich und man bekommt die folgenden Informationen angezeigt:

  • Bildgröße: Hier wird die aktuelle Dateimenge angezeigt.
  • Maße: Hier werden die aktuellen Maße angezeigt (verschiedene Formate auswählbar)
  • Einpassen: Hier kann man verschiedene vordefinierte Größen nehmen.
  • Breite: Die Breite des Bildes in verschiedenen auswählbaren Formaten
  • Höhe: Die Höhe des Bildes in verschiedenen auswählbaren Formaten
  • Schloss: Hier wird die Bildproportion beibehalten, oder abgeschaltet.
  • Auflösung: Die Pixeldichte des Bildes (Web: 72 Pixel / Zoll)
  • Neu Berechnen: Wenn das Bild kleiner oder größer als vorher ist wird hier ausgewählt wie Photoshop das Bild neu berechnen soll.

 

Wenn man nun die Breite anpasst z.B. auf 600 Pixel wird dann automatisch die Höhe angepasst.


 

 

Bild exportieren

Dazu klickt man einfach auf den Reiter „Datei“ >>  „Exportieren“ >> „Für Web speichern (Legacy)“

 

Hier gibt es die folgenden Informationen auf der rechten Seite:

 

Vorgaben:

Bildtyp: Folgende Bildtypen kann man hier wählen: GIF, JPG, PNG-8, PNG-24, WBMP
Wenn man einen Bildtyp gewählt hat kommen darunter verschiedene Einstellungsmöglichkeiten, diese werden im Web zu genüge behandelt, falls man sich dort weiterbilden möchte kann ich diesen Link oder diesen Link empfehlen.

 

 

  • In sRGB konvertieren: wenn hier das Häckchen gesetzt ist wird das zu exportieren Bild in den sRGB Farbraum konvertiert
  • Vorschau: Hier kann man sich eine Vorschau des Bildes für bestimmte Bedingungen anschauen.
  • Metadaten: Die gewünschten zu speichernde Metadaten, diese werden in Photoshop in den Einstellungen festgehalten. 

 

 

Farbtabelle: Hier werden die Farben angezeigt die gespeichert werden (GIF, PNG-8, WBMP), diese kann man auch bearbeiten und löschen.

 

 

  • Bildgröße: Wie im Reiter „Bild“ >> „Bildgröße“ kann auch hier die Bildgröße angepasst werden mit etwas weniger Einstellungsmöglichkeiten.
  • Prozent: Hier kann man die prozentuale Bildgröße angeben.
  • Breite: Einstellung der Breite in Pixel
  • Höhe: Einstellung der Höhe in Pixel
  • Schloss: Hier wird die Bildproportion beibehalten, oder abgeschaltet.
  • Qualität: Hie sind wieder einige „Rendereinstellungen“ die für den gewünschten Zweck passend ausgewählt werden sollten.

 

 

 

  • Animation: Falls ein animiertes GIF erstellt wurde können hier noch die letzten Einstellungen getätigt werden.
    Option für Schleifenwiedergabe: Einstellung zu wiederholen der Animation
  • Playtools: Der Player ist zum Prüfen der erstellten Arbeit und der Frameweisen Ansicht.

 

Der linke Bereich zeigt die Originale Datei und die optimierte Variante, dort ist für einen normalen Export nur der untere Bereich interessant, hier wird gezeigt wie groß die Dateigröße ist und wie lange es dauert mit bestimmten Internetgeschwindigkeiten das Bild runter zu laden. Die weiteren Einstellungsmöglichkeiten interessieren uns erst einmal nicht.

Wenn man zufrieden mit seinen Einstellungen ist klickt man auf „Speichern“ und wählt den Ort aus wo das Bild gespeichert werden soll.


 

 

Bild zuschneiden

Wir erstellen ein Objekt (bei mir ist es ein Ring), aber drumherum ist noch sehr viel „Luft“ oder besser ungenutzte Pixel.

 

Um diese schnell und einfach zu entfernen klickt man einfach auf den Reiter „Bild“ >> „Zuschneidern“, daraufhin öffnet sich ein Fenster.

 

Dort wählt man Basiert auf „transparente Pixeln“

Und wählt aus wo diese überall entfernt werden sollen. Wenn man dies getan hat kann man einfach auf „OK“ klicken und Photoshop entfernt alle überstehenden transparenten Pixel.

 

Nun kann man wie gewohnt die Grafik exportieren (WICHTIG! Bei Transparenz sollte man immer PNG-24 nehmen, alternativ auch PNG-8, oder GIF dort ist die Qualität aber nicht sehr gut)

 

 


 

Ein Bild in ein neues Bildformat skalieren 

Oft ist es so das Programmierer ein Bild bekommen dieses aber überhaupt nicht in die programmierte Divbox (1000 Pixel X 200 Pixel) passt. Dann ist es wichtig das Bildformat schnell anzupassen das geht wie folgt: 

Das Bild https://upload.wikimedia.org/wikipedia/commons/d/df/Saint-Privat-d'Allier.JPG

hat eine Bildgröße von Breite: 5184 und Höhe: 3456.

Nun könnten wir mit dem Freistellungswerkzeug das Bild in der Breite und Höhe soweit anpassen so das dies Bild in unsere Divbox passt. Dies ist aber sehr ungenau und ist auch eher nervig zu bewerkstelligen.

 

Einfach ist es eine neue Datei mit den Maßen der Divbox zu erstellen.

 

Nun die Ebene vom Originalbild in das Fenster der Divboxgröße hineinziehen.

 

Das „Originalbild“ ist nun in dem neuen Fenster aber noch viel zu groß. 

 

 

Um das Bild nun skalieren zu können muss man das Bild nun in ein Smartobjekt umwandeln.

 

Daraufhin kann man nun mit dem Reiter „Bearbeiten“ >> „Frei Transformieren“ (Strg + t) das Smartobjekt skalieren

 

(wichtig ist hier das im oberen Bereich das Schloss aktiviert ist da es sonst schnell passieren kann das die Proportionen nicht mehr korrekt sind). Dazu sollte man immer die Ecken zum Skalieren benutzen und niemals die Seiten da sonst das „Schloss“ entfernt wird und die Proportionen nicht mehr stimmen.

 

Wenn der Ausschnitt dann wie gewünscht im neuen Fenster ist kann man wie gewohnt das Bild für das Web speichern. Wenn das Projekt in der Zukunft noch genutzt oder erweitert werden soll muss man sich das neue Fenster als Projekt speichern (Datei >> Speichern unter…). Dazu kann ich die Formate .psd und für große Dateien .psb empfehlen.

 


 

 

Masken

Diese Thema ist schon sehr groß soll daher nur zur Einführung des Systems und der Logik helfen.

 

Erstmal der Theoretische Teil:

Wir stellen uns vor es ist Tag und wir spazieren im Garten, wir können alles sehen und den Ausblick genießen.

Nun wird es Abend und wir sehen immer weniger, bis es Nacht ist und wir überhaupt nichts mehr sehen.

Genauso verhält es sich mit einer Maske bei Photoshop.

 

 

Wenn wir also eine Maske auf eine Ebene legen wird diese erst einmal weiß sein d.h. wir sehen alles und erkennen daher keinen Unterschied ausser das bei dem Ebenenfeld eine Maske hinterlegt ist. Wenn wir nun auf die Maske klicken haben wir die Möglichkeit mit einem Stift Bereiche zu „bemalen“, um hier etwas zu erkennen habe ich die Farbe schwarz gewählt und um Hintergrund haben wir nichts.

 

Man erkennt sofort das die Ebene mit den Farbinformationen „ausgeblendet“ wird als wäre es punktuell Nacht. Dieses Ausblenden ist sehr grob wie man an den Kanten erkennt.

 

Wenn man nun einen Pinsel mit weichen Kanten nimmt wird das „ausblenden“ weicher.

 

Diese „Weichheit“ oder eher das teilweise ausblenden erreicht man mit Grauwerten zwischen Weiß und Schwarz.

 

Wenn man das Maskenprinzip für sich verstanden hat eröffnet es einem extrem viele Möglichkeiten um Bildebenen zu kombinieren und zu erweitern. Dazu gibt es mehr als genug Tutorials die sich mit dem Thema beschäftigen.


 

 

Kontur um „Objekt“

 

Wir hatten uns weiter oben ja schon ein Objekt erstellt, nun wollen wir das Objekt mit einer Kontur versehen. Diese Möglichkeit der Einstellung nennt sich „Ebenenstil“ und wirkt meistens auf die gesamte Ebene.

 

Das Ebenenstilfenster kann man mit Doppelklick „neben“ dem Ebenennamen öffnen.

 

Nun hat man viele Einstellungsmöglichkeiten, für uns ist nur die Einstellung Kontur relevant. Wenn wir darauf klicken bekommen wir wieder einige Einstellungsmöglichkeiten angezeigt, diese sind überwiegend selbsterklärend. Wenn noch keine Kontur zu sehen ist dann ist kein Häkchen auf der rechten Seite „Vorschau“, dies sollte immer an sein.

 

Falls die Innere Kontur nicht gewünscht ist kann man im Bereich „Mischoptionen“ ein Häkchen bei „Ebenenmaske verbirgt Effekte“ setzen.

 

Alle Stile sind miteinander kombinierbar, einfach mal Ausprobieren und kreativ inspirieren lassen.


 

Fazit

Mit diesen Informationen können Programmierer ohne Probleme angelieferte Bild selber schnell anpassen und weiterverwerten ohne lange auf den Grafiker warten zu müssen weil dieser wieder in einer wichtigen Komposition vertieft ist.


 

Haben Sie Fragen, Wünsche oder Anregungen?
Dann können Sie uns über unser Kontaktformular kontaktieren.

Jetzt das Kontaktformular öffnen!

oder Sie erreichen uns unter der Telefonnummer: (040) 88 14 00 36