Du bist nicht angemeldet.

Social Network #5 Das Design: Das Logo

Patrick

Profi

  • »Patrick« ist der Autor dieses Themas

Beiträge: 694

Danksagungen: 168

  • Private Nachricht senden

1

23.07.2012, 18:20

#5 Das Design: Das Logo

Bevor es jetzt ans Coden geht, beschäftigen wir uns erstmal mit dem Design unseres Social Networks. Es ist sehr wichtig, dass ihr immer erst das Design fertig macht und anschließend erst ans Programmieren geht, da ihr vorher nicht das DOM genau kennt und somit Fehler machen könnt, die nachher viel Arbeit machen können.
Aber noch vor dem kompletten Webdesign brauchen wir zuerst einmal ein Logo, denn davon hängt das komplette Look & Feel der Seite ab.

Ich verwende hier Photoshop CS6, es funktioniert aber auch mit jeder anderen Version, bzw. jedem anderen - halbwegs vernünftigen - Grafikprogramm. Paint ist damit also ausgeschlossen ^^

Anleitung

Spoiler Spoiler

Als erstes erstellen wir uns mit der Tastenkombination Cmd+N* ein neues Dokument, bzw. gehen auf Datei->Neu. Die Maße betragen 1000px * 1000px und die Auflösung sollte bei 72 Pixel/Zoll liegen, den Hintergrundinhalt wählen wir transparent.


Anschließend schreiben wir mit dem Textwerkzeug in die Bildmitte SocialNetwork. Als Schirftart benutzen wir Pricedown.


Nun drücken wir Cmd+T* bzw. gehen auf Bearbeiten->Frei transformieren und ziehen uns bei gedrückter Shift Taste – damit die Proportionen beibehalten werden – den Text fast komplett auf Bildbreite und bestätigen mit Enter.


Jetzt färben wir das S, das N und das K auf die Farbe #111111 und die restlichen Buchstaben auf die Farbe #363843. Wir benutzen #111111 und nicht #000000, da zum einen bei #000000 der Schatten innerhalb des Buchstabens nicht mehr zu sehen wäre und zum anderen, weil meiner Meinung nach das echte Schwarz auf die Augen immer sehr stark wirkt und ein getrübtes Schwarz da eher etwas ruhiger und weniger ablenkend wirkt.


Danach klicken wir doppelt auf unsere Textebene, um einen Ebenenstil hinzuzufügen. Wir wählen Schatten nach innen an und tippen folgende Werte ein: Farbe: #000000; Deckkraft: 75%; Winkel: 120°; Abstand: 5px; Unterfüllen: 21%; Größe: 9px.


Das sieht doch schon ganz gut aus. Allerdings fehlt noch etwas ganz wichtiges an dem Logo: Der Eye-Catcher. Und dafür habe ich mir überlegt, dass man die schon verlängerten Striche des, Ls und des Rs noch bis zum Ende des jeweils nachfolgenden Buchstaben ziehen könnte.

Und um das zu realisieren müssen wir als erstes eine Kopie unserer Textebene anlegen. Das geht mit Cmd+J* oder indem wir unsere Ebene auf das neue Ebene-Symbol ziehen. Das Original blenden wir nun aus, behalten es als Sicherheitskopie und arbeiten mit der Kopie.
Diese Kopie rastern wir nun. Dazu klicken wir mit der rechten Maustaste auf die Ebene und wählen Text rastern aus.


Als nächstes zoomen wir nun ganz nah heran (Cmd++*) – in meinem Fall auf 3200% - und wählen mit dem Rechteck Auswahl-Werkzeug das Ende des Ls aus und gehen auf Bearbeiten->Inhaltsbasierend skalieren. Alternativ könnte man auch die Tastenkombination Control+Shift+Cmd+C* benutzen ;)


Wir ziehen jetzt das Ende des Ls solange nach rechts, wie sich die letzte Pixelreihe nicht verbreitert – wenn ihr es ausprobiert werdet ihr wissen was ich meine ;) Dann bestätigt ihr mit Enter und macht das ganze nochmal, diesmal könnt ihr direkt bis zum Ende des Ns ziehen. Es sollte jetzt so aussehen:


Das ganze macht ihr beim R genauso.


Wir zoomen wieder heraus (Cmd+-*) und können unser Prachtwerk betrachten ;)
Jetzt schneiden wir das Logo noch zu und sind fertig. Dazu gehen wir auf Bearbeiten->Zuschneiden.


Im folgenden Fenster wählen wir Basierend auf transparenten Pixeln aus und bestätigen das ganze mit einem Klick auf OK.


Und voilà, da ist unser Logo für das SocialNetwork!


Jetzt dürft ihr nur nicht vergessen, das ganze als PNG abzuspeichern, damit die Transparenz erhalten bleibt.

* unter Windows Strg


Hier nochmal als PNG zum downloaden:
Ex ungue leonem.

War der Beitrag für dich hilfreich?
Dann drück auf .

Es hat sich bereits 1 registrierter Benutzer bedankt.

Benutzer, die sich für diesen Beitrag bedankt haben:

iweb-md (26.07.2012)

psycho

Fortgeschrittener

Beiträge: 413

Registrierungsdatum: 26.06.2011

Danksagungen: 80

  • Private Nachricht senden

2

06.05.2013, 15:49

Hier gehts wohl auch nicht mehr weiter was? :D
Computer sind dazu da, uns die Arbeit zu
erleichtern, die wir ohne sie gar nicht hätten.

Patrick

Profi

  • »Patrick« ist der Autor dieses Themas

Beiträge: 694

Danksagungen: 168

  • Private Nachricht senden

3

06.05.2013, 22:21

Leider seit einiger Zeit 0 Zeit für Programmieren was sehr schade ist :(
Ex ungue leonem.

War der Beitrag für dich hilfreich?
Dann drück auf .

psycho

Fortgeschrittener

Beiträge: 413

Registrierungsdatum: 26.06.2011

Danksagungen: 80

  • Private Nachricht senden

4

06.05.2013, 23:13

DA hast du recht^^
Computer sind dazu da, uns die Arbeit zu
erleichtern, die wir ohne sie gar nicht hätten.

Es hat sich bereits 1 registrierter Benutzer bedankt.

Benutzer, die sich für diesen Beitrag bedankt haben:

JuKu (13.05.2013)

Ähnliche Themen

Verwendete Tags

Design, Logo, Photoshop, Social Network