Zephon's Webdesign Stübchen [Hobby Thread]

Alles was nicht in die anderen Foren reinpasst kommt hier rein.

Moderatoren: Exekutor[NHF], Deathwing, GarfieldKlon, G A F, SaVi

Benutzeravatar
Zephon
Space-Marine
Beiträge: 42
Registriert: 12.08.2008, 22:08

Zephon's Webdesign Stübchen [Hobby Thread]

Beitrag von Zephon »

Bild


Wie im Signaturen und Banner Thread des Off Topic Bereichs angekündigt:
Da ich selbst noch üben muss und ich gerade in Feierlaune bin, könnte ich evt. einige "Tutorials" zu Effekten, Fonts und Aufbau erstellen, das auch nicht nur für Signaturen Smile

Es wäre zwar eigentlich das gegenteil was dieser Thread hier verfolgt, allerdings wären es keine Komplettanleitungen. Und da ich selbst einige dieser Effekte erst noch erfinden muss ... Wink

Themenschwerpunkt natürlich: Starcraft 2. Wünsche werden natürlich auch gerne gehört und wenn umsetzbar, dann wird das auch gemacht. D. H. wenn ihr schon immer mal wissen wolltet wie "der und der" Effekt von Starcraft in bekannten Programmen wie Photoshop umsetzbar ist oder funktioniert, kann ich versuchen da etwas zu reißen.

Allerdings werde ich keine Priorität auf das hier setzen, weswegen ich nicht so oft hier anwesend sein werde.
In Feierlaune bin ich zwar nicht mehr, aber ich erstelle jetzt trotzdem einen neuen THread und hoffe, dass das der richtige Schritt war, denn vielleicht hätte man das auch im Signaturen Thread unterbringen können.

Trotz eventuellen Zeitmangels werde ich versuchen soviel wie möglich zu "bearbeiten", herauszufinden und zu erklären.

Allerdings muss ich betonen, dass ich

a) (noch) kein ausgebildeter Webdesigner und somit kein Profi bin (Ist ziemlich allgemein gefasst der Begriff, doch eine andere Bezeichnung finde ich zur Zeit nicht...)

b) Ich selbst noch nicht alle Effekte kenne, da dem Programm keine Grenzen gesetzt sind und mit der Ankündigung zu Photoshop CS4 werde ich mich wohl noch einmal komplett umstellen müssen.

c) Ich keinen Zugang zu exklusivem Material (für Design und Weiterverarbeitung) habe, weswegen ich mich auf meine eigenen Mittel und Improvisationen beschränken muss.


Also werde ich versuchen mit meinen Mitteln und meinem Wissen euch einige (nicht alle) Effekte beizubringen und euch vielleicht sogar den ein oder anderen Trick beibringen. Im Erklären und Unterrichten war ich zwar schon immer eine Niete, allerdings gibt es ja immer das erste Mal :wink:

Auch kann ich mich mit anderen Erfahrene(r)n Usern gerne ergänzen, d. h wenn nun ein Profi erscheint und sagt: "Das hättest du ja mal…", dann werde ich das ggf. auch beherzigen, allerdings achte ich zum größten Teil nur auf:

konstruktive Kritik!

Wenn ihr also etwas auszusetzen oder Tipps habt, dann in einer gemäßigten Schreibweise :)

Bevor es aber losgeht will ich lieber nochmal in Erfahrung bringen, wie es auf rechtlicher Seite zu evt. „Blizzard Schrifteffekten“ aussieht (Hauptseite Starcraft2 usw.)? Denn sicher bin ich mir bei solchen Tutorials nie… Vielleicht kann mir ein Mod diese Frage beantworten
:?
GarfieldKlon
Moderator des Schwarmstocks
Moderator des Schwarmstocks
Beiträge: 4397
Registriert: 02.07.2007, 19:37
Liga 1vs1: Keine
Liga 2vs2: Keine
Mainrace: Zerg
Wohnort: Hannover

Beitrag von GarfieldKlon »

Also die ArtWorks von Blizzard sind ziemlich unstrittig , solange man sie nicht gewerblich nutzt. Diese sind ja quasi für die Fans und ist Werbung für SC2 , also von daher selten ein Problem. Ich denke mit gesunden Menschenverstand wirst du schon in kein Fettnäpfchen treten.

Ein allgemeiner Grafikthread ist schonmal nicht schlecht, da es ja Signaturenbanner alleine wohl einfach nicht ausreichend genug war.

Und gleich mal zur konstruktiven Kritik:
So wie ich es rauslese benutzt du Photoshop. Bei Tutorials würde ich aber eher auf Gimp ausweichen, da dieser Freeware ist und alle auch was davon haben wenn sie in Grafiken einsteigen.

Und noch eine Frage: Soll das jetzt wirklich alles nur um das Webdesign gehen, oder eher allgemeiner, wie Wallpaper, Signaturenbanner etc. ?
║▌║█║║▌║█║ Warnung! Falscher oder fehlender Kaffee - Benutzer angehalten --(◔̯◔)--
1334566890100
Benutzeravatar
Zephon
Space-Marine
Beiträge: 42
Registriert: 12.08.2008, 22:08

Beitrag von Zephon »

Und gleich mal zur konstruktiven Kritik:
So wie ich es rauslese benutzt du Photoshop. Bei Tutorials würde ich aber eher auf Gimp ausweichen, da dieser Freeware ist und alle auch was davon haben wenn sie in Grafiken einsteigen.
Ja, das ist ein Problem mit dem ich selbst zu kämpfen habe. Weil ich später beruflich mit Photoshop (7.0 - CS4) arbeiten werde, habe ich mich größtenteils nur darauf spezialisiert, vorallem durch die Möglichkeiten, die bei Gimp teilweise nicht gegeben sind.

Deshalb muss ich mich auch nochmal entschuldigen für das jetzt schon entstandene Missverständnis. :oops:


Da ich ebenfalls Tipps zum Gebiet geben werde, denke ich, dass der Threadtitel schon richtig gewählt wurde. Es geht ja nicht nur um die Grafiken sondern auch um das was dahintersteckt. Farbkombinationen, Aufteilung und Strukturierung, Gestaltgesetze und Psychologie.

Webdesign ist nicht nur Design fürs Web ;) Aber der Begriff ist auch allgemein genug um meine Sachen hier zu beschreiben.
Benutzeravatar
DavionX
Ultralisk
Beiträge: 1005
Registriert: 16.02.2008, 12:46
Wohnort: Kentares

Beitrag von DavionX »

es ist also ein Thread wo man alle Grafischen Sachen reinposten kann, ausgenommen Banner und SC2Comics, die ja einen eigenen threat haben, und dann eine konstruktive Kritik erwarten kann, vielleicht auch tips und natürlich auch Komplimente ;) (?)
Benutzeravatar
Zephon
Space-Marine
Beiträge: 42
Registriert: 12.08.2008, 22:08

Beitrag von Zephon »

Das wäre mein zweiter Vorschlag gewesen :wink:

Da ich mich auf die Photoshop CS Reihe fixiere, können auch andere mich gerne mit GIMP und anderen freeware Programmen ergänzen. :)

D. h. Der Thread ist geeignet für:

- Tutorials
- Kritik an grafischen Werken
- Vorstellung der grafischen Wekre oder grafischer Projekte
- Erfragen von etwaigen Auftragsarbeiten. Wenn ich mir ausmale wieviele Clans für StarCraft 2 aufmachen und eine Internetpräsenz brauchen werden... wird mir schwindlig :wink:

AUch wenn der Titel es anders vermuten lässt, es soll ja nicht nur um mich gehen :!: (Zeitmangel usw.)
Benutzeravatar
Zephon
Space-Marine
Beiträge: 42
Registriert: 12.08.2008, 22:08

Beitrag von Zephon »

Photoshop CS:
Einen Starcraft 2 orientierten Schrifteffekt erstellen


Ich fange einfach erstmal an, auch wenn es Photoshopbezogen ist.
Ich weiß es ist teuer und ich weiß, dass deswegen auch nicht jeder Zugang dazu hat. Aber so bin ich nunmal. :P

Als erstes Tutorial will ich in einen einfach herzustellenden Schrifteffekt Starcraft 2‘, Schritt für Schritt erklären und gleichzeitig in eine simple Technik einführen die es ermöglicht viele Variationen, schnell zu erhalten.

Also betrachten wir zuerst die Grafik (oder das Bild) was wir erstellen möchten.

Bild

Um anzufangen benötigen wir eine Arbeitsfläche die wir natürlich mit Photoshop neu erstellen.

Ich habe hier auf einer Fläche von 400x200 Pixeln gearbeitet, es ist natürlich vollständig erweiterbar, wer also gerne ein Wallpaper machen möchte, der ist besser daran getan, wenn er eine entsprechende Größe (wie z. B. 1024 x 768 Pixel) wählt.

Diese Fläche füllen wir (mit dem Füllwerkzeug) mit Schwarz um eine nicht ganz so beißende Grundlage zu haben wie es das Weiß war. Wenn erfolgreich ausgeführt sollte es jetzt so aussehen ;):

Bild

Der nächste Schritt besteht darin einen einfachen Text auf die Arbeitsfläche zu bringen. Ich habe den Font „Federation“ benutzt, der frei zum Download im Internet bereitsteht und dem Blizzards am nächsten kommt.

Font

Wenn ihr den Font erfolgreich installiert habt (C:Windows/Fonts) sollte es nun weitergehen.

Den Schriftzug oder Namen könnt ihr natürlich selbst wählen. Ich habe mich nicht in kreative Abgründe gestürzt und den schon zu betrachtenden „Terraner“ Schriftzug (von 3) auf die schwarze Fläche geschrieben.

Bild

Wenn umgesetzt sollte das Teilergebnis so aussehen.

Wie man unschwer erkennen kann, strotzt die Grafik noch nicht vor Effekt und Schönheit, das werde ich allerdings in den nächsten Schritten zu ändern versuchen.

Da dieses Tutorial ausschließlich einen Schrifteffekt zeigt, wird es auch nur um die Ebenenstile(effekte) gehen die entsprechend verändert werden müssen. Was sich simpel anhört… ist es auch, aber man erlangt ein akzeptables Ergebnis in wenigen Schritten.

Die Ebenenstile sind ebenfalls nicht sehr zahlreich und so beginnen wir mit der Verlaufsüberlagerung des Textes, der die Grundlage weiterer Veränderungen schafft.

Bild

Bild

Wie oben zu erkennen, wird es ein 3 Farbiger Verlauf. Die Farbcodes können dem Verlaufsfeld entnommen werden und in die Farboptionen Photoshops eingetragen werden.

Tipp: Einen neuen Verlaufspunkt erstellt ihr einfach, indem ihr mit gedrückter alt-Taste und dem Mauszeiger auf einem bestehenden Punkt, einen neuen in das Feld zieht.

Der nächste Schritt zeigt den Ebenenstil „Kontur“ und die entsprechenden Farbcodes.

Bild

Bild

Nach diesen eingestellten Ebenenstilen, betätigt man das Feld „OK“ und man erhält den oben gezeigten Schrifteffekt. Wer noch einen weiteren Effekt herbeiführen will, der erstellt noch einen in das dunkel gehende, lilanen Schlagschatten.

Bild

Etwas schwieriger hätte mir selbst natürlich gutgetan, allerdings fange ich wohl erstmal einfach an und arbeite mich dann weiter vor. Wer will kann, um es noch Stilsicherer zu gestalten, noch einige Elemente erstellen oder einfügen um dem Bild die Starcraftnote zu verpassen und man könnte das Endergebnis hier erhalten.

Bild

Übertragbar ist das nun natürlich auf vielerlei Dinge. So kann ich auch Signaturen damit bestücken ;)

Die Verlaufsart die ich aufgezeigt habe, setzt sich simpel zusammen bietet aber Platz für eine Masse an Effekten und Erscheinungsmöglichkeiten.

So kann ich auch in die andere Richtung schwenken und Warcraft damit gestalten.

Bild

Versucht das einfach für euch zu individualisieren und ihr könnt unendliche Variationen für Homepages, Avavtare, Singaturen und anderer grafischer Dateien erhalten.

Ich hoffe es war einigermaßen verständlich, ansonsten, einfach bei Ungereimtheien schrei(b)en.
Zuletzt geändert von Zephon am 26.09.2008, 21:31, insgesamt 1-mal geändert.
Benutzeravatar
Zephon
Space-Marine
Beiträge: 42
Registriert: 12.08.2008, 22:08

Beitrag von Zephon »

Soo, es gibt Probleme mit meinem Hoster... Die Bilder werden wahrscheinlich spätestens Morgen wieder online sein.
Benutzeravatar
Zephon
Space-Marine
Beiträge: 42
Registriert: 12.08.2008, 22:08

Beitrag von Zephon »

Photoshop CS:
einen weiterführenden Starcraft 2 orientierten Schrifteffekt erstellen (Navi-Version)


Auch hier werde ich einen weiteren Starcraft orientierten Schrifteffekt anhand von einigen Schritten erklären. Diesmal mit Lichteffekten und dem Rahmen. Anhand dessen soll es am Ende als Navigationspunkt identifiziert werden, kann allerdings auch für viele weitere Projekte verwendet werden.

Bild

Wir werden also Schritte die wir im vorherigen Tutorial gelernt haben hier noch einmal intensivieren.

Ich setze voraus: weiterführende Grundkenntnisse in einer der Adobe Photoshop Versionen. Doch durch meine Erklärungen sollte das Werk auch Laien gelingen, da wie ja bereits in der vorangegangenen Anleitung Schritt für Schritt erklärt wird.

Fangen wir wie im ersten Tutorial mit einer Arbeitsfläche von 400x200 Pixeln an, die wir schwarz Füllen. Der Font bleibt glücklicherweise ebenfalls gleich, also wird genauso die Schriftart namens „Federation“ verwendet.

Bild

Um die ersten Schritte zum finalen Schrifteffekt herzustellen benutzen wir wieder die Ebenenstile.

Bild

Bild

Die Farbüberlagerung wird mit einer einzelnen Farbe gehandhabt.
d07400

Der wichtige Teil stellt hier auch wieder die Kontur da, die mit einem Verlauf an die Schrift gefügt wird.

Bild

Bild

Die colorcodes können wie schon im Vorgänger aus dem Screenshot hier entnommen werden. Wenn richtig angewendet erhält man dieses Ergebnis:

Bild

Da wir nun einige kleine Veränderungen in Form und Neigung der Schrift vornehmen wollen, eignet es sich besser, wenn wir die Schrift in eine Form umwandeln um sie später besser für unsere Zwecke zu transformieren.

Bild

Nach diesem Schritt wird es Zeit die neu entstandene Form ein wenig zu transformieren. Wir stellen das an, indem wir unter Bearbeiten, den Reiter Transformieren auswählen. Hier soll es eine Perspektivische Verzerrung werden.

Bild

Bild

Mit dem Mauszeiger transformiert man die Form durch das ziehen an der linken oder rechten oberen Ecke bis man ein gewünschtes Ergebnis vorliegen hat. Ich will hier keine zu kenntliche perspektive herbeiführen, also belasse ich es bei diesem zu sehenden Ergebnis.

Bild

Für die Umgebung der Schrift erstelle ich eine rechteckige Form mit dem Rechteck Werkzeug der Werkzeugleiste und regle die „Fläche“ (zu sehen im Bild) auf 0 Prozent um nur eine Kontur erstellen zu können à 1 Pixel und der Farbe 724213 und wandle sie perspektivisch (diesmal ist keine Umwandlung in eine Form vonnöten) gleich der Schrift um.

Diesen Schritt wiederholt ihr wenn gewünscht noch einmal um eine etwas größere Umrandung zu erhalten die gleichzeitig noch einen Schwung Stil mit in die Grafik bringt ;)

Bild

Die zweite Form sollte in ihrer Größe so Transformiert werden, dass sie die erste nur minimal überragt.

Ist dieser Schritt getan, erstellt ihr über das Linienzeichner Werkzeug einen geraden Strich der ungefähr die Höhe der Schrift besitzt. Um auch hier ein wenig Perspektive und Gleichung zur Schrift zu erhalten wird die Linie einfach Nach rechts geneigt. Das Tastenkürzel Strg + T aktiviert das Skalieren und durch einige Mausbewegungen könnt ihr die Linie in eine für euch ideale Position bringen.

Bild

Bild

Das Zwischenergebnis sollte nun so aussehen. Um dem Text noch ein wenig Tiefe zu verleihen werden wir noch ein paar Lichteffekte hinzufügen.

Bild

Dafür erstellt ihr eine neue Ebene mit der Einstellung „Ineinanderkopieren“. Um ein sattes Leuchten zu produzieren empfehle ich eine helle oder einfach weiße Farbe. Ich habe für diesen Fall hier Weiß gewählt und gehe mit dem Pinselwerkzeug um einige Buchstaben und den Rahmen herum.

Bild

Ist das getan seid ihr auch an das Ende Dieses Tutorials gelangt. Wem das noch zu leicht war, der kann sich noch auf andere Dinge gefasst machen ;)

Das Endergebnis könnte mit noch hinzugefügtem dunkleren Rahmen und den dazugehörigen Lichteffekten, so aussehen:

Bild

Zu verwenden sind diese Vorgänge sicher in einigen Arten von grafischer Webgestaltung, oder verwendet diese Dinge einfach für eure Avatare oder Signaturen :D
Benutzeravatar
DavionX
Ultralisk
Beiträge: 1005
Registriert: 16.02.2008, 12:46
Wohnort: Kentares

Beitrag von DavionX »

cool, eigentlich echt einfach xD

hab heute was gemacht...

http://davionx.deviantart.com/art/PizzaGod-99230014
Bild

der hintergrund ist murks, da wollte ich auch eigentlich was ganz anderes machen... ^^;

der gedanke hinter dem bild ist: ein kumpel von mir isst "fast" jeden tag pizza in der schule, also nenn ich ihn pizzagott (bitte keine weiteren fragen dazu -_-)
ich habe sein gesicht abgezeichnet und die figur draus gemacht....
Benutzeravatar
Zephon
Space-Marine
Beiträge: 42
Registriert: 12.08.2008, 22:08

Beitrag von Zephon »

cool, eigentlich echt einfach xD
Deswegen sind es ja auch erstmal die Basics, aber erzielt schon was recht nettes :P

Nette Idee mit klasse Umsetzung^^ . Mir erscheinen nur die Knie etwas unersichtlich, deswegen scheinen die Proportionen des Körpers minimal komisch... Ansonsten aber wirklich super geworden :)
Benutzeravatar
DavionX
Ultralisk
Beiträge: 1005
Registriert: 16.02.2008, 12:46
Wohnort: Kentares

Beitrag von DavionX »

Mir erscheinen nur die Knie etwas unersichtlich, deswegen scheinen die Proportionen des Körpers minimal komisch..
jo stimmt, is mir bewusst
Benutzeravatar
Zephon
Space-Marine
Beiträge: 42
Registriert: 12.08.2008, 22:08

Beitrag von Zephon »

So, nach ein paar Tagen inaktivität, bin ich wieder dazugekommen zwei Themenbasierte Layouts zu erstellen. Zum Start der neuen Animationsserie "The Clone Wars".

Hier also meine, vielleicht noch unfertigen Arbeiten: (Es handelt sich lediglich um Layouts, d. h. Designs die noch nicht interaktiv zu bedienen sind)
_______________________________________________________

1. Layout:

Eine moderne, kindlich und bunt angehauchte Seite zur Comic/Animations Verfilmung "Star Wars: The Clone Wars".

TCW Preview
_____________________________________________________

2. Layout:

Diesmal der Gegensatz: Die Idee einer klassischen Star Wars Community mit schlichtem Design aber vielaussagendem Header.

Star Wars Classic Preview
Benutzeravatar
Sestror
Belagerungspanzer
Beiträge: 900
Registriert: 23.05.2008, 23:54
Wohnort: Hinterm Berg - Irgenwo in NRW

Beitrag von Sestror »

Super Idee, gute gestaltung.

Ich könnte es nicht so gut machen. (Zu faul, um sowas zu machen.)
Schönheit ist Ansichtssache;
Das heist aber nicht, das alle Hässlich sind.
- Sestror, Lebensmotto seit 2003.

Schau in den Spiegel, und du weist was du bist:
Ein Terraner, ein Mensch.
- Sestror, November/Dezember 2008.
Benutzeravatar
DavionX
Ultralisk
Beiträge: 1005
Registriert: 16.02.2008, 12:46
Wohnort: Kentares

Beitrag von DavionX »

finde beide ganz klasse, wobei mir das zweite besser gefällt, der name, die farbe und die grafiken darin...
Benutzeravatar
thelch
Goliath
Beiträge: 272
Registriert: 29.09.2008, 13:17

Beitrag von thelch »

Also ich finde die sind alle gut gemacht :D
Antworten