0 Kommentare
Tags: Design, Photoshop-Tutorials, selbst gestalten, Tutorial, Visitenkarten
Habt ihr schon einmal daran gedacht, das Design eurer Facebook-Chronik als Grundlage für eine Karte im Visitenkarten-Format zu verwenden? Ich zeige euch hier, wie ihr bei der Gestaltung von Visitenkarten ein Augenmerk auf die Verwendung eines prägnanten Titelbildes setzt, wie es auch bei der Facebook-Timeline der Fall ist. Euer Profilbild und ein paar Informationen über euch runden das Design der neuen Facebook-Karten ab. So habt ihr eure Facebook-Chronik jederzeit auch offline zur Hand.
Step 1
Wir beginnen unsere Arbeit und erstellen uns hierfür eine neues Dokument in Photoshop. Wir legen es, inklusive 2mm Beschnitt an jeder Seite, mit den Maßen 8,9 x 5,9 cm an. 300dpi Auflösung, der CMYK-Modus und ein entsprechendes Farbprofil sollten ebenfalls gewählt werden. Wir speichern die Vorderseite anschließend gleich auf unserer Festplatte.
Step 2
Um während der Erstellung den Randanschnitt immer beachten zu können, ziehen wir uns jeweils 2mm von jedem Rand eine Hilfslinie auf.
Unser Foto wird eine Höhe von 3,7 cm haben und inklusive 2mm Beschnitt ziehen wir uns zusätzlich eine neue Hilfslinie bei 3,9 cm.
Step 3
Das wichtigste Gestaltungsmittel unserer Facebook-Karte ist das Titelbild, welches auch in jeder Facebook-Timeline zu finden ist.
Bei der Auswahl des Titelbildes sind euch keine Grenzen gesetzt. Je nachdem, ob ihr eine Business-Visitenkarte oder Karten für den privaten Gebrauch erstellen wollt, sollte die Wahl des Bildes mehr oder weniger seriös ausfallen. In jedem Fall sollte das Bild über eine entsprechend vernünftige Auflösung verfügen.
Ü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 entsprechende Breite/Höhe und bestätigen die Platzierung mit „Enter“. In meinem Fall habe ich dem Bild über die Optionen-Leiste (Fenster -> Optionen) gleich mit einer Breite von 8,9 cm eingefügt. Um das Seitenverhältnis des Bildes bei dieser Transformation beizubehalten, klicken wir einfach das Kettensymbol zwischen Breite und Höhe an.
Step 4
Nun ziehen wir eine Auswahl des oberen Bereiches bis zur unseren Hilfslinie bei 3,9 cm auf. Mit Hilfe dieser Auswahl vergeben wir unserem Bild eine Ebenenmaske.
Nachdem wir das Kettensymbol zwischen dem Bild und der Maske reaktiviert haben, können wir die Position des Bildes entsprechend anpassen und das Bild so innerhalb der Maske verschieben bis wir den gewünschten Ausschnitt erhalten haben. Fertig ist unser Titelbild.
Step 5
Nun fügen wir das Facebook-Profilbild von uns in die Karte ein. Hierzu ziehen wir uns erneut Hilfslinien – horizontal bei 2,9 cm und vertikal bei 0,6 cm. Im Anschluss hieran ziehen wir eine Auswahl in 1,6 x 1,6 cm auf. Wir gehen jetzt mal anders vor als beim Titelbild und speichern uns diese Auswahl vorerst unter Auswahl -> Aussahl speichern in unsere Kanäle ab.
Step 6
Nun laden wir uns über Datei -> Platzieren unser Profilbild in das Dokument und bestätigen mit Enter. Um unser Foto nun in die eben gespeicherte Auswahl einzupassen, rufen wir uns das „Kanäle-Fenster“ auf und klicken mit gedrückter STRG-Taste auf den Kanal „Profilbild“. Die Auswahl sollte nun geladen sein. Wieder zurück im „Ebenen-Fenster“ vergeben wir der Ebene Profilbild nun wie schon vorhin eine Ebenenmaske. Anschließend lösen wir noch die Verbindung zwischen Bild und Ebenenmaske mit einem Klick auf das Kettensymbol.
Step 7
Nun können wir unser Profilbild mit STRG+T beliebig skalieren und die Position innerhalb der Ebenenmaske optimieren. Nachfolgend vergeben wir unserem Profilbild über die Ebeneneffekte noch einen Schlagschatten sowie eine 5px starke Kontur nach innen. fertig ist auch unser Profilbild.
Step 8
Nun zum Text. Auf der Vorderseite werden wir unseren Namen, Firma/Arbeitgeber oder die aktuelle (Hoch-)Schule sowie unseren derzeitigen Wohnort angeben. Hierzu benötigen wir den Font „Lucida Grande“ (Mac) bzw. die „Lucida Sans Unicode“ (Windows). Diese sollte auf dem Betriebssystem eurer Wahl bereits vorhanden sein.
Unseren Namen erstellen wir in 12px und in 100% Schwarz (#1d1d1b). Positioniert den Namen auf der selben Höhe wie eurer Profilbild (ohne Kontur) und mit einem Abstand von ungefähr 2mm vom Profilbild.
Step 9
Im Folgenden fügen wir der Visitenkarte noch zwei Profilinfos in Form unseres Arbeitgebers sowie unserem Wohnort hinzu. 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 „House_icon.png“ über Datei -> Platzieren in unser Dokument ein. Beide Ions erhalten eine Breite von 0,25 cm und über Ebeneneffekte vergeben wir ihnen eine Farbüberlagerung in 60% Schwarz (#878787). Platziert die beiden Icons in einem gleichmäßigen Abstand zueinander.
Step 10
Neben die beiden Facebook-Icons platzieren wir nun die dazugehörigen Beschreibungen, in meinem Fall die Saxoprint GmbH und den Wohnort Dresden. Als Schriftart wählen wir hierfür ebenfalls die „Lucida“, Schriftgröße 6pt und wie schon die Facebook-Ions in 60% Schwarz (#878787).
Step 11
Fertig ist unsere Vorderseite. Wir speichern die PSD-Datei ab und speichern uns über Datei -> Speichern unter…“ zusätzlich eine TIFF-Datei ohne Ebenen und ohne Kanäle für den Druck ab.
Step 12
Nun zur Rückseite unserer Visitenkarte im Facebook-Look. Hierzu widmen wir uns der noch geöffneten Vorderseite und löschen bis auf die Hintergrundebene alle weiteren Ebenen. Den Alphakanal des Profilbildes sowie die zweite horizontale und vertikale Hilfslinie können wir ebenfalls löschen. Dieser Vorgang hat den Vorteil, dass wir die bereits erstellten Hilfslinien auch für die Gestaltung der Rückseite nutzen können. Nun rasch unter dem neuen Dateinamen „Facebook-Visitenkarte-RS.psd“ abspeichern und dann kann die Gestaltung der Rückseite losgehen.
Step 13
Zuallererst erstellen wir eine Auswahl des oberen Bereiches und füllen diesen mit einem sehr hellen Blau in 10% Cyan (#eaf6fe) auf der neu erstellten Ebene „Hintergrund oben“.
Step 14
Der hellblaue Hintergrund bietet nun ausreichend Fläche, für ein passendes und prägnantes Zitat oder einen Slogan eurer Wahl. Ich habe mich für ein an mein Profilbild angelehntes Zitat von Albert Einstein entschieden. Eurer Kreativität sind hier natürlich keine Grenzen gesetzt. Dieses Zitat platzieren wir in der Schriftart „Times New Roman“ und 100% Schwarz (#1d1d1b). Schriftgröße 10pt sollte genügen. Der Schriftzug wird anschließend mittig auf der (nach dem Schneiden) noch sichtbaren blauen Fläche ausgerichtet. Hierzu habe ich mir noch eine horizontale Hilfslinie gezogen, welche die Mitte zwischen erster Hilfslinie (0,2 cm) und der nun dritten Hilfslinie (3,9 cm) darstellt.
Step 15
Nun benötigen wir von den [Download nicht gefunden.] die drei anderen Icons, die Person, das Telefon und das Mail-Symbol. Wir fügen die Dateien „Person_icon.png“, „Phone_icon.png“ und „Mail_icon.png“ nacheinander über Datei -> Platzieren in die Rückseite unserer Facebook-Karte ein und platzieren sie gleichmäßig untereinander und mit einem Abstand von 0,6 cm vom linken Rand. Wie schon auf der Vorderseite erhalten auch diese 3 Icons eine Breite von 0,25 cm und über Ebeneneffekte vergeben wir ihnen eine Farbüberlagerung in 60% Schwarz (#878787).
Step 16
Nun vervollständigen wir die Ions mit den entsprechenden Angaben wie unserer (Facebook-) URL bzw. Webseite, unserer Telefon-Nummer und unserer Email-Adresse. Als Schriftart wählen wir hierfür ebenfalls die „Lucida“, Schriftgröße 6pt und anders als auf der Vorderseite diesmal in 100% Schwarz (#1d1d1b).
Step 17
Somit ist nun auch die Rückseite unserer Visitenkarte im Facebook-Look komplett und kann ebenfalls wieder als PSD mit Ebenen, als auch im TIFF-Format für den Druck ohne Ebenen abgespeichert werden.
Fertig
Gratuliere, eure Facebook-Karte 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 Facebook-Karte noch über das Download-Icon herunterladen. Wer noch weiter herumprobieren möchte, kann sich auch gerne den beiden anderen Tutorials der Google+ Visitenkarte und Twitter-Visitenkarte widmen.
