Workshop Designentwurf mit Photoshop Elements 7 (Trial)

Das Programm Adobe Photoshop Elements 7 soll Privatpersonen und kleinere Unternehmen ansprechen, dann schauen wir mal, wie sich die Trial-Version zu der Erstellung eines einfachen Designs stellt.
Eines schon vorweg - das Programm ist wesentlich umfangreicher und bietet neben einfacherer Bedienung auch wesentlich mehr Ausstattung - und die Trial-Version ist ebenfalls kostenlos - jedoch funktioniert das Programm hier nur 30 Tage.
Eine Produkt-Key kannst Du auch noch nach Ablauf dieser Zeit kaufen und eingeben, so dass es dann wieder seine Dienste erledigt - ob Du es tust - das ist Dein Problem.
Sehr sauber funktioniert dieses Programm von Windows XP bis Windows 7 RC.

Erstens: die Vorbereitung (Hintergrund erstellen und Behelfsfelder anlegen)

Screenshot 01 - Elements 7 starten

Um Adobe Photoshop Elements 7 zu starten klickst Du zuerst auf die Desktopverknüpfung und im aufgehenden Menü auf "Bearbeiten".
Screenshot 02 - Auswahl TRIAL

Da wir hier die kostenlose Trial-Version nutzen musst Du diese Auswahl auch wählen (oder gibst bei Vorhandensein der Serialnummer diese ein) und klickst anschließend auf "Weiter".
Screenshot 03 - Vorbereitung Design

Ein Design-Entwurf muss nicht überdimensional Groß sein - also erstellen wir eine neu Datei über den Kartenreiter "Datei" -> Menü "Neu" -> Untermenü "Leere Datei ...".
Screenshot 04 - Designgröße einstellen

In dem nun geöffneten Menüfeld vergibst Du unter Name am besten schon jetzt einen passenden Namen für diesen Entwurf - zum Beispiel Entwurf 01, gibst unter Breite und Höhe die gewünschten Werte ein (Monitorauflösung 1024x768 Pixel ergibt Bildauflösung 988x768 Pixel ohne Scrollleiste). Den Modus solltest Du auf RGB-Farben setzen und der Hintergrund kann transparent oder auch weiß bzw. schwarz sein. Übernehme jetzt noch diese Einstellungen mit "OK".
 
Screenshot 05 - Farben auswählen

Um Farben auszuwählen klickst Du auf eines der beiden Farbefelder links und im nun geöffneten Menüfeld kannst Du diese bearbeiten. Mit der mehrfarbigen Leiste in der Mitte kannst Du Mittels klick oder verschieben eine Vorauswahl treffen und dann anschließend im großen Feld die gewünschte Farbe anklicken. Die beiden oberen kleinen Farbfelder zeigen Dir Veränderungen an - unteres kleines Feld - die alte Farbe - oberes kleines Feld - die neu gewählte Farbe. Mit einem Klick auf "OK" übernimmst Du diese Einstellung (neue Farbe).
Screenshot 06 - Hintergrund mit neuer Farbe füllen

Die so ausgewählte Farbe verwendest Du als Hintergrundfarbe in dem Du auf den Farbeimer (Farbfüllelement in den Tools) klickst, anschließend gehst jetzt auf den Hintergrund und klickst noch einmal (mit der linken Maustaste) und der Hintergrund hat jetzt diese Farbe.
Screenshot 07 - Hintergrundmuster

Wenn Dir ein einfarbiger Hintergrund nicht gefällt, dann gehst Du auf den Kartenreiter "Ebenen", hier im Menü auf "Neue Füllebene" und hier im Untermenü zum Beispiel auf "Muster ...".
Screenshot 08 - Hintergrundfüllung

Im nun geöffneten Menüfeld vergibst Du als erstes einen Namen - wie zum Beispiel Hintergrundfüllung - die anderen Optionen kannst Du belassen und klickst auf "OK".
 
Screenshot 09 - Füllung wählen

Mit diesem Menü wählst Du Dir die am besten gefallende Füllung durch anklicken aus - verfolge dabei alle Auswahlmöglichkeiten (anklickbare Dreiecke - sehr vielfältig!). Auch die Skalierung solltest Du probieren. Mit dem abschließenden Klick auf "OK" übernimmst Du diese Einstellungen.
Screenshot 10 - Deckkraft der Füllung ändern

Da die ausgewählte Füllung Dir bestimmt Deine Hintergrundfarbe zu sehr geändert hat verstellst Du jetzt die Deckkraft der Füllung im Feld Ebenen (entweder mit Tastureingabe oder mit dem Schieberegler) auf den gewünschten Wert.
Screenshot 11 - Skallierung der Füllung verändern

Falls Dir die Skalierung Deiner Füllung immer noch nicht recht gefällt, so kannst Du diese immer noch bearbeiten (und auch zu jedem Zeitpunkt) in dem Du auf die Füllung im Feld Ebenen klickst und die Werte im Menü veränderst. Mit "OK" übernimmst Du wieder.
Screenshot 12 - Ebene umbenennen

Um die Übersichtlichkeit zu verbessern solltest Du jetzt noch die Ebene 1 in dem Feld Ebenen umbenennen in dem Du auf den Text "Ebene 1" klickst und den neuen Namen (zum Beispiel Hintergrund) mit der Tastatur eingibst.
 
Screenshot 13 - Neue Ebene - Logo & Bannerfeld

Als nächsten benötigen wir das Behelfsfeld "Logo und Bannerfeld". Um dieses Feld zu erstellen klickst Du auf den Kartenreiter "Ebene" - hier im Menü auf "Neu", und im Untermenü auf "Ebene ...".
Screenshot 14 - Behelfsfeld Logo und Banner einrichten

Im jetzt geöffneten Menü vergibst Du einen passenden Namen - zum Beispiel Logo und Bannerfeld - und übernimmst alles mit "OK".
Screenshot 15 - Logo und Bannerfeld Größe

Als nächstes klickst Du jetzt das Markierwerkzeug an, stellst den Modus auf "Feste Größe" ein, weiterhin stellst Du die Breite auf 988 Px* (Gesamtbreite des Entwurfs) und die Höhe auf 140 Px (mehr benötigst Du nicht)* ein (* - andere Werte möglich).
Screenshot 16 - Logo und Bannerfeld erstellen

Nun klickst Du mit der linken Maustaste ins Bild, hältst diese gedrückt und ziehst die Markierung mit der Maus nach oben links.
 
Screenshot 17 - Logo und Bannerfeld farbig absetzen

Damit Du einen guten Kontrast hast wählst Du jetzt eine neue Farbe aus, klickst den Farbeiemer (Farbfüllelement) an, gehst mit der Maus in den markierten Bereich und klickst hier noch einmal mit der linken Maustaste und der markierte Bereich ist mit der Farbe gefüllt.
Screenshot 18 - Logo und Bannerfeld Deckkraft ändern

Die Deckkraft kannst Du jetzt noch ändern, in dem Du im Feld Ebenen die Deckkraft entweder mit der Tastatur (Eingabe) oder dem Schieberegler änderst.
Screenshot 19 - Neue Ebene - Logo & Linkfeld

Um das Logo und die Links besser einrichten zu können erstellst Du jetzt noch das Behelfsfeld "Logo und Linkfeld" über den Kartenreiter "Ebene" -> Menü "Neu" - > Untermenü "Ebene ...".
Screenshot 20 - Logo und Linkfeld einrichten

Im jetzt geöffneten Menü gibst Du wieder einen passenden Namen ein wie zum Beispiel Logo und Linkfeld und klickst abschließend auf "OK".
 
Screenshot 21 - Logo und Linkfeld Größe

Mit einem Klick auf das Markierwerkzeug, dem einstellen des Modus auf "Feste Größe", der Breitenangabe von 210 Px* (sollte reichen), der Höhenangabe von 768 Px* (Höhe Deines Entwurfes) sind die ersten Vorbereitungen getroffen. Nun nur noch ins Bild klicken, Maustaste gedrückt halten und nach links oben ziehen und das Behelfsfeld ist eingerichtet.
Screenshot 22 - Logo und Linkfeld - Farbe und Deckkraft

Zur abschließenden Einrichtung dieses Feldes füllen wir den markierten Bereich mit einer Farbe (Farbe auswählen, Farbeimer anklicken, ins markierte Feld klicken) und stellen noch die Deckkraft geringer (Feld Ebenen - Deckkraft mit Schieberegler oder Tastatureingabe ändern).
   

Zweitens: Logo, Banner und Textfeld

Screenshot 23 - Datei für Banner öffnen

Um in diesen vorgefertigten Entwurf ein Banner zu integrieren benötigen wir ein Bild, welches wir über den Kartenreiter "Datei" und dem Menüpunkt "Öffnen ..." erst einmal auf dem Computer suchen.
Screenshot 24 - Bild für Banner aussuchen

In dem jetzt geöffneten Menü kannst Du mit wenigen Klicks Dein Bild auswählen (angeklickte Bilder werden dabei unten etwas größer dargestellt) und werden mit dem Klick auf dem Button "Öffnen" im Photoshop geöffnet.
Screenshot 25 - Bildausschnitt markieren

Aus dem so geöffnetem Bild kannst Du Dir einen Bereich des Bildes für ein Banner markieren, dazu gehst Du auf das Markierwerkzeug, stellst den Modus auf "Feste Größe" und die Bannergröße auf Breite 728 Px sowie Höhe 90 Px ein. Anschließend klickst Du ins Bild und ziehst mit gedrückter Maustaste die Markierung in den gewünschten Bereich.
Screenshot 26 - Bildausschnitt kopieren

Den so ausgewählten Bildausschnitt (oder auch komplettes Bild) übernimmst Du in den Entwurf mittels kopieren. Dazu gehst Du auf den Kartenreiter "Bearbeiten" und im Menü auf "Kopieren" und der Ausschnitt ist in die Zwischenablage Deines PC kopiert.
 
Screenshot 27 - Bildausschnitt einfügen

Das Bild fügst Du aus der Zwischenablage in den Entwurf ein in dem Du unten in der Bildauswahl Deinen Entwurf anklickst (Dein Entwurf ist jetzt wieder sichtbar) und anschließend wieder über den Kartenreiter "Bearbeiten" und jetzt im Menü auf "Einfügen" klickst.
Screenshot 28 - Bildausschnitt ist eingefügt

Auch der Adobe Photoshop legt die eingefügt Datei in der Mitte des Bildes ab, sie muss also noch verschoben werden.
Screenshot 29 - Bildausschnitt / Banner verschieben

Um das Banner (oder auch den Bildausschnitt) zu verschieben klickst Du auf das Verschiebewerkzeug und danach auf das Bild und verschiebst es jetzt mit der Maus an die gewünschte Stelle.
Screenshot 30 - Banner ist fertig

Nach dem verschieben bist Du wieder einen Schritt näher zum fertigen Entwurf.
 
Screenshot 31 - Bildauflösung umstellen

Damit Du besser weiter arbeiten kannst stellst Du Dir den Bildentwurf etwas größer. Dazu klickst Du auf die Lupe und anschließend im Menü auf "Ganzes Bild".
Screenshot 32 - Bildebene des Banners umbenennen

Jetzt schaffen wir noch einmal etwas Ordnung und benennen die Ebene in die wir das Banner geladen haben auf "Banner" um (im Feld Ebenen auf Schrift klicken und im Menü unter Name den neuen Namen vergeben und mit OK übernehmen).
Screenshot 33 - Effekte fürs Banner

Effekte (Rahmen, Schatten, ......) kannst Du im Photoshop ganz einfach übernehmen in dem Du unter Effekte (weit oben über dem Feld Ebenen) Effekte aussuchst, doppelt anklickst (zum Übernehmen). Wenn das Zeichen "fx" erscheint, dann hast Du einen Effekt in dieser Ebene hinterlegt.
Screenshot 34 - Bannereffekte bearbeiten

Den Effekt einer Ebene kannst Du mit einem Doppelklick auf "fx" im Feld Ebenen im daraufhin sich öffnenden Menü bearbeiten. Solltest Du Farbwerte ändern, dann musst Du diese Änderungen auch erst abschließen (klick auf OK) eh Du die gesamte Bearbeitung abschließen kannst. Sinnvoll ist, wenn Du verschieden Werte probierst.
 
Screenshot 35 - Das Logo

Falls Du schon ein Logo hast, dann kannst Du dieses hier wieder verwenden (ähnlich dem Banner: "Datei" -> "Öffnen" bis "Bearbeiten" ->"Einfügen") oder Du erstellst alternativ einen Text. Um einen Text zu erstellen klickst Du auf das Textwerkzeug, stellst Schriftart, Größ ... ein und klickst anschließend in das vorbereitete Feld (Überlappungen der Behelfsfelder).
Screenshot 36 - Logo Texteingabe und Farbe

Sobald Du ins Feld geklickt hast kannst Du Deinen gewünschten Text eingeben, die Textfarbe lässt sich auch im Nachhinein noch ändern (Felder oben).
Screenshot 37 - Logotext verschieben

Um die Arbeiten am Logo abzuschließen klickst Du jetzt auf das Verschiebewerkzeug und verschiebst den Text an die gewünschte Stelle.
Screenshot 38 - Effekte Logotext

Natürlich kannst Du auch Text mit Effekten belegen und dies auch wieder sehr einfach - im Feld Effekte auf "fx" klicken, den gewünschten Effekt suchen und anklicken (doppelt oder einfach und dann auf "Anwenden") und die Schrift hat jetzt diesen Effekt.
 
Screenshot 39 - Vorbereitungen Textfeld

Jetzt benötigen wir noch ein Textfeld und dazu erstellst Du wieder über "Ebene" -> Menü "Neu" - > Untermenü "Ebene ..." eine neue Ebene.
Screenshot 40 - Textfeldnamen

Im Dialogfeld gibst Du unter Name einen Namen ein (zum Beispiel Textfeld) und übernimmst mit "OK".
Screenshot 41 - Textfeld markieren

Um das Textfeld zu erstellen klickst Du nun auf das Markierwerkzeug, stellst den Modus auf "Feste Größe", die Breite auf die Bannerbreite (in diesem Entwurf 728 Px) und die Höhe auf 608 Px (Gesamthöhe Entwurf 768 Px minus 140 Px Logo und Bannerfeld und minus 20 Px für Abstand). Als nächstes klickst Du wieder ins Bild und ziehst bei gedrückter Maustaste die Markierung unter das Bannerfeld.
Screenshot 42 - Textfeld Farbe

Die Farbe des Textfeldes änderst Du, in dem Du eine passende Farbe Mittels der Pipette im Banner auswählst oder die Farbauswahl selbst triffst und dann den Farbeiemer auswählst und in den markierten Bereich klickst.

Drittens: verschiedene Buttons erstellen und Design bearbeiten

Screenshot 43 - Buttons erstellen

Um Buttons für den Entwurf zu erstellen klickst Du einfach auf das Textwerkzeug (eventuell vorher eine Farbe auswählen), anschließend in das Feld unterhalb des Logos, gibst jetzt Deinen Text ein (zum Beispiel Startseite) und klickst jetzt auf Ebene 1 im Feld Ebenen.
Screenshot 44 - weitere Buttons erstellen

Alle weitere Buttons erstellst Du wie den Button Startseite zuvor: Textwerkzeug anklicken, ins Feld klicken, Text eingeben und abschließend auf die Textebene im Feld Ebenen klicken
Screenshot 45 - Behelfsfelder ausblenden

Bevor Du Deinen Entwurf verschönerst solltest Du jetzt die Behelfsebenen ausblenden in dem Du die Augen in den Behelfsebenen abschaltest (durch anklicken).
Screenshot 46 - Entwurf optisch aufpepen

Deine Entwurf kannst Du jetzt noch aufpeppen in dem Du die jeweilige Ebene im Feld Ebenen anklickst und mit Effekten belegst, mit anderen Farben füllst oder auch verschiebst - Möglichkeiten bietet Dir Adobe Photoshop Elements 7 in Hülle und Fülle.
 
Screenshot 47 - geändertes Hintergrundmotiv

Mit dem ändern des Hintergrundmotives beeinflusst man sehr stark das Erscheinungsbild des Entwurfes . gegebenenfalls müssen dazu die Buttons angepasst werden.
Screenshot 48 - Effekte beim Banner ändern

Feine Änderungen bei den Effekten für das Banner können den Gesamtentwurf aufwerten - hier zusätzlich eingestellt der Schein nach innen.
Screenshot 49 - Farbwerte des Hintergrundes ändern

Mit den Änderungen an Farbwerten, Deckkraft, Effekten und und und kann man das Endbild in Ruhe erstellen.
 

Abschließend zum Entwurf mit dem Adobe Photoshop Elements 7 sei bemerkt, dass er so viele Effekte und Möglichkeiten anbietet für die Designerstellung, dass man diese nicht alle beschreiben kann - hier hilft nur selbst probieren.

Auch dieser mit Photoshop Elements 7 erstellte Entwurf ist bestimmt nicht gerade Medaillenanwärter - das sollte er auch nicht - er soll Dir nur zeigen, dass es durchaus möglich ist, mit diesem Programm für Privatpersonen und/oder Familien so wie kleineren Firmen brauchbare Designs zu erstellen.

Weitere Details die für den Adobe Photoshop Elements 7 sprechen: Foto und Bildverwaltung mit Erstellung von Bewertungen, Tags, ... um die spätere Suche nach Bildern zu vereinfachen (muss man bei verschiedenen anderen Anbietern zusätzlich erwerben), Erstellung von Diashows (auch im PDF-Format), ....

Falls Du Dir ein Fotoprogramm kaufen möchtest - dann downloade Dir erst eine Demo- oder Trialversion herunter und probiere, ob Dir die Funktionen ausreichen und ob Du mit dem Programm zurechtkommst.

Denke dabei daran, das Demo- und Trialversionen meist auf Tage begrenzt sind - Du solltest also auch Zeit haben, diese Tage effektiv auszunutzen.

Weitere Testprogramme gibt es von: Ulead (Magix)