0 Kommentare
Tags: Design, Photoshop-Tutorials, selbst gestalten, Tutorial, Visitenkarten
Nachdem wir vor kurzem gezeigt haben, wie ihr Visitenkarten im Facebook-Look erstellen könnt, widmen wir uns heute dem (anspruchsvollerem) sozialen Netzwerk Google+. Dort wurden im März die XXL-Titelbilder vorgestellt und diese eignen sich in Miniaturgröße ebenfalls hervorragend für eure neuen Visitenkarten. Gestaltet mit mir in Photoshop eine persönliche Google+ Visitenkarte und habt eurer Google+ Profil fortan auch offline in der Geldbörse dabei. Die Visitenkarte mit dem PLUS an Information.
Step 1
Im ersten Schritt erstellen wir uns in Photoshop ein neues Dokument für die Vorderseite unserer Google+ Visitenkarte. Inklusive 2mm Beschnitt an jeder Seite hat diese also eine Größe von 8,9 x 5,9 cm sowie eine Auflösung von 300dpi. Den CMYK-Modus und ein entsprechendes Farbprofil wählen wir natürlich ebenfalls. Im Anschluss speichern wir das Dokument gleich einmal auf unserer Festplatte.
Step 2
Um in den folgenden Arbeitsschritten immer einen Blick auf den Randanschnitt von 2mm werfen zu können, ziehen wir uns im Abstand von 2mm an jedem Rand eine Hilfslinie auf. So stellen wir sicher, dass bis auf das Hintergrundbild kein Element dem Beschnitt zu nahe kommt.
Step 3
Der Eyecatcher unserer Visitenkarte soll, wie auch im neuen Google+ Design welches im März 2013 eingeführt wurde, ein großes und prägnantes Titelbild sein. Ich habe hierfür mal in meinem Archiv gekramt und ein sommerliches Foto von einem Ausflug auf die Insel Usedom im letzten Jahr gewählt. Irgendwie müssen wir dem anhaltenden Winter schließlich Paroli bieten. Eurer Kreativität sind für die Wahl des Titelbildes natürlich keine Grenzen gesetzt.
Über Datei -> Platzieren wählen wir ein Foto auf unserer Festplatte aus und fügen es in unser Dokument ein. Wir skalieren das Foto gleich auf die gewünschte Breite/Höhe und bestätigen die Platzierung mit “Enter”. Photoshop fügt das Bild nun als Smart-Objekt ein. Dies bedeutet, dass die (maximale) Originalauflösung des Bildes beibehalten wird, das Objekt also ohne Qualitätsverlust rauf und runter skaliert werden kann.
Step 4
Das XXL-Titelbild unseres Google+ Profils weist zum unteren Rand hin einen dezent abdunkelnden Verlauf auf. Dies soll gewährleisten, dass die Informationen über das Google+ Profil noch gut lesbar bleiben. Wir erstellen diesen Verlauf wie folgt.
Eine neue Ebene Namens „Verlauf“ füllen wir über Bearbeiten -> Fläche füllen (SHIFT + F5) mit Schwarz. Dieser Ebene fügen wir über die Optionen im Ebenenfenster eine Ebenenmaske hinzu. Nun wählen wir das Verlaufswerkzeug (V) und stellen die Farben des Verlaufes von #000000 zu #FFFFFF ein.
Step 5
Mit gewählten Verlaufswerkzeug und aktiver Ebenenmaske der Ebene „Verlauf“ erstellen wir nun einen vertikalen Verlauf in der Maske. Mit gedrückter Shift-Taste erhält der Verlauf die gewünschte 90°-Richtung. Mit diesem Verlauf bewirken wir, dass nur ein Teil der schwarzen Fläche sichtbar bleibt, der Rest wird einmaskiert. Der Ebene „Verlauf“ geben wir im Anschluss eine Deckkraft von 40%. Eventuell müsst ihr ein wenig ausprobieren, je nachdem wie hell oder dunkel eurer Titelbild beschaffen ist.
Step 6
Kommen wir zu unserem Profilbild auf der Google+ Visitenkarte. Dieses wird im Google+ Profil kreisförmig angezeigt, ganz anders als die quadratischen Varianten von Facebook & Co. Über Datei -> Platzieren laden wir unser Profilbild in das Photoshop-Dokument und skalieren es schon einmal ungefähr auf die passende Größe. Zwei Hilfslinien, 8mm vom linken Rand und 5mm von unten, stellen die Position unseres Profilbildes dar.
Mit dem Auswahlellipsenwerkzeug (M) erstellen wir jetzt mit gedrückter Shift-Taste eine runde Auswahl in 1,6 x 1,6 cm und platzieren diese an den eben erstellten Hilfslinien.
Step 7
Nun maskieren wir unser Profilbild über die Funktion der Ebenenmaske mit einem Klick in die runde, eben erstellte Auswahl ein. Anschließend heben wir die Verbindung des Fotos und der Ebenmaske auf, indem wir das Kettensymbol zwischen den beiden mit einem Klick deaktivieren. Wir können nun vorne das Foto auswählen und mit Strg+T so skalieren, dass es optimal in den kreisrunden Bereich passt.
Step 8
Kommen wir zum Text. Hierzu ziehen wir 2mm rechts unseres Fotos eine neue Hilfslinie auf. In der Arial oder einen ähnlichen serifenlosen Schrift setzten wir in Weiß und einer Größe von 12pt unseren Namen neben das Profilbild. Die Laufweite setzen wir zusätzlich noch auf -25.
Step 9
Für die zusätzlichen Informationen fügen wir nun Arbeitgeber und Standort neben das Profilbild ein. Hierfür laden wir uns die [Download nicht gefunden.] herunter. Wir entpacken die Zip-Datei und fügen die zwei Icons “Baggage_icon.png” und “location_icon.png” über Datei -> Platzieren in unser Dokument ein. Die Tasche skalieren wir auf eine Breite von 0,26mm und das Ortungssymbol auf ca 0,16mm. Über Ebeneneffekte vergeben wir ihnen eine weiße Farbüberlagerung und reduzieren die Deckkraft beider Ebenen anschließend auf 80%.
Step 10
Neben beiden Symbolen platzieren wir nun Arbeitgeber und Wohnort in einer weißen 8pt Arial. Die Deckkraft reduzieren wir ebenfalls auf 80% und optimieren zum Schluss noch die Abstände zueinander. Fertig ist unsere Vorderseite und wir speichern diese nun als PSD-oder Tiff-Datei mit Ebenen ab. Zusätzlich sichern wir uns über Datei -> Speichern unter… eine Kopie ohne Ebenen für den Druck ab.
Step 11
Nun zur Rückseite unserer Visitenkarte im Google+ Look. Hierzu widmen wir uns der noch geöffneten Vorderseite und löschen bis auf die Hintergrundebene alle weiteren Ebenen sowie die zentrale vertikale Hilfslinie. Dieser Vorgang hat den Vorteil, dass wir die anderen bereits erstellten Hilfslinien auch für die Gestaltung der Rückseite nutzen können. Nun rasch unter dem neuen Dateinamen “Google-Plus-Visitenkarte-RS.psd” abspeichern und dann kann die Gestaltung der Rückseite losgehen.
Step 12
Die Rückseite werden wir mit einem an den Startbildschirm der Google+ iOS-App angelehnten Google+ Hintergrund versehen. Diesen habe ich für euch nachgebaut und über Datei -> Platzieren laden wir uns nun den [Download nicht gefunden.] in unsere Rückseite. Um den Hintergrund exakt zu platzieren, nehmen wir in der Optionenleiste am besten die folgenden Einstellungen vor. Die Platzierung nun einfach mit Enter bestätigen.
Step 13
Um in der linken oberen Ecke ein Plus platzieren zu können, ziehen wir uns zwei Hilfslinien 5mm vom oberen und linken Rand auf. An diesem Rand positionieren wir nun ein 60pt großes und weißes „plus“, geschrieben ebenfalls in der Arial.
Step 14
Für die letzten Profilinformationen über unsere Person platzieren wir nun das „person_icon.png“ von den [Download nicht gefunden.] über Datei -> Platzieren auf unserer Rückseite. Wir geben diesem über die Ebeneneffekte ein weiße Farbüberlagrung und reduzieren die Deckkraft der Ebene ebenfalls auf 80%.
Step 15
Unsere Kontaktdaten platzieren wir nun neben unserem Icon. Ich habe mich hier für eine Internetadresse, eine Telefonnummer und natürlich die Google-Mail-Adresse entschieden. Ihr könnt diese Angaben natürlich beliebig erweitern. Wie bereits auf der Vorderseite setzen wir diese Informationen in Arial 8pt und weiß. Die Deckkraft der Textebene wird anschließend ebenfalls auf 80% reduziert. Fertig ist auch unsere Rückseite. Noch kurz die PSD-Datei mit Ebenen speichern und für den Druck eine Kopie ohne Ebenen abspeichern.
Fertig
Gratuliere, eure Google+ Visitenkarte ist nun fertig und bereit für den Druck bei Saxoprint. Ich hoffe das Tutorial hat euch gefallen und wenn ihr mögt, könnt ihr euch die offenen PSD-Dateien der hier erstellten Google+ Visitenkarte noch über das Download-Icon herunterladen. Wer noch weiter herumprobieren möchte, kann sich auch gerne den beiden anderen Tutorials der Facebook-Karte und Twitter-Visitenkarte widmen.
