GFX (Banner) Tutorial

Wenn deine kreative Ader letztlich wieder übersprühte, kannst du uns hier die Ergebnisse davon vorstellen.

Moderators: ThePaSch, Codric

GFX (Banner) Tutorial 

Postby Jay_Bee » Tue Jan 08, 2013 12:09 pm

Tutorial fürs GFX’en

Ich möchte in diesem Tutorial zeigen, wie ich meine Banner gestalte. Ich mache das mit GIMP, deshalb weiß ich nicht genau, wie das ganze mit PS aussieht.

Dazu muss man sich erst überlegen, wie der Banner im Prinzip aussehen soll. Dazu müssen wir überlegen, ob wir einen Schriftzug in unserem Banner haben wollen, oder nicht. Wer eher spontan ist, der kann das auch alles im Schaffungsprozess überlegen (ich mache das auch so...)

Fangen wir also ganz Vorne an. Zuerst müssen wir überlegen, wie groß das Banner werden soll. Ich benutze normalerweise 500x150 Pixel.

Am besten ist es mit einem schwarzen Hintergrund anzufangen. Das macht es am Einfachsten so farbneutral wie möglich zu arbeiten.

Image

So, jetzt müssen wir überlegen, was im Vordergrund stehen soll. Das wird dann der RENDER genannt. Der muss aber einen dursichtigen Hintergrund haben, damit wir später keine störenden Rückstände haben. Um das zu erreichen müsst ihr u.U. den Render mit dem Lasso auswählen (da wo ihr ihn haben wollt) und mit ctrl+c kopieren und hinterher wieder einfügen.

Wichtig dabei ist, dass wir den Render als neue Ebene einfügen.

Image

Dann können wir ja jetzt loslegen und versuchen, unseren Render da hinzubekommen wo und in welcher Größe wir ihn haben wollen.

Image

Ich werde für das Beispiel diese nette Dame hier verwenden.
Danach duplizieren wir die neue Ebene, das sollte dann ungefähr so aussehen:

Image
Der Knopf dafür ist der mit den zwei Bildern übereinander.

Jetzt klickt ihr mit Rechtsklick auf die untere der beiden Ebenen und wählt „Ebene auf Bildgröße“ aus.

Mit einem möglichst großen Pinsel verwischt ihr jetzt die untere Ebene, ungefähr so:

Image

Dabei sollte nur ein kleiner Rand um den Render entstehen.
Wichtig, stellt jetzt die Ebenenart auf „Addition“!



Dupliziert die Ebene und verwischt sie etwas mehr

Image

Wenn das geklappt hat, sollte das schon ein Bisschen anfangen zu leuchten.
Wiederholt das solange, bis es euch gefällt. Ich mache es normalerweise so, dass ich drei verwischte Ebenen habe.

Image

Jetzt wollen wir den Hintergrund etwas interessanter gestalten. Dazu setzen wir ein paar Brushes (engl. für Pinsel, hier einzelne Pinselabrdrücke) auf die Ebene „Hintergrund“

Wählt dazu am Besten eine Farbe aus dem Render aus, im Prinzip ist aber egal, welche Farbe ihr benutzt.

Image

Ich habe hier das Rot von den Knöpfen verwendet. Das Pinselset ist im Internet zu finden. Auch wie ihr die Pinsel in GIMP einfügt, steht im Internet sehr gut beschrieben.

Wenn wir so weit sind, gibt es jetzt ganz viele Möglichkeiten, wie wir unseren Banner weiter gestalten können.
Eine relativ einfache sind Farbverläufe. GIMP erlaubt uns dabei, diese in verschiedenen Formen anzubringen. So zum Beispiel in Kreisförmig.

Image

Am Besten wählt ihr einen Farbverlauf der aus möglichst einer Seite durchsichtig ist, sonst füllt ihr eure Ebene mit nur einem einzigen Farbverlauf.

Image

ich habe hier Orangene Kreise gewählt, die ich auf einer neuen Ebene zwischen Render und der ersten verwischten Ebene eingefügt habe.

Image

Anschließend habe ich die Ebene auf „Addition“ gestellt. Das Ergebnis seht ihr hier.
Wenn euch jetzt z.B. auffällt, dass euch die Komposition eigentlich ganz gut gefällt, aber die Farben überhaupt nicht, könnt ihr eine neue Ebene einfügen und die auf die Art „Farbe“ stellten.

Image

Dabei wird die Färbung der Ebene auf die darunterliegenden projiziert.

Hier habe ich zum Beispiel diesen Farbverlauf verwendet.

Image

Wenn ihr findet, dass jetzt noch ein Schriftzug auf euer Banner draufsoll, dann fügt ein Schriftfeld da ein, wo ihr es wollt.

Image

Es scheint aber so, dass häufig das ganze nicht so geil zu lesen ist.
Um das zu beheben, könnt ihr entweder die Schriftfarbe komplementär zur Hintergrundfarbe wählen oder das Folgende Verfahren anwenden:

1.) Kopiert eure Schriftebene
2.) Ändert die Schriftfarbe zu schwarz
3.) Wählt die Ebene auf und stellt sie auf „Ebene auf Bildgröße“. Statt euerm Textfeld sollte jetzt eine normale Ebene angezeigt werden.
4.) Wählt im Menü „Filter“ -> „Verzerren“ -> „Wert propagieren“ und klickt mehr Deckung an. Ihr könnt im Prinzip das Ganze gleich bestätigen. Ihr solltet jetzt einen zarten schwarzen Rand rund um euren Schriftzug sehen.
5.) Wählt erneut im Menü „Filter“ -> „Weichzeichner“ -> „Gaußscher Weichzeichner“. Auch hier könnt ihr gleich auf „OK“ drücken.

Wenn ihr das gemacht habt, sollte das Ganze so aussehen.

Image

Und das sollte auch für euch gelten! Probiert viele verschiedene Dinge aus, experimentiert rum, bannert was das Zeug hält!

Wenn ihr Lust habt, schickt mir eure Banner per PN, ich werde dann ein paar Kommentare dazu abgeben!

Und jetzt noch VIEL SPAß!!

GIMP findet ihr hier:
http://www.gimp.org

Gute Pinsel findet ihr hier:
http://stylishwebdesigner.com/2000-free ... designers/

Ein Tutorial zum Hinzufügen neuer Pinsel findet ihr hier:
http://brushfire.wordpress.com/2008/08/ ... denwieleo/
Spoiler : Fetter GK2 SPOILER :
Image

Hikaru no Go!
Image
User avatar
Jay_Bee
 
Posts: 96
Joined: Sun Oct 09, 2011 2:14 pm
Location: Zuhause
Gender: Male
Spoken languages: Deutsch, Alt-Griechisch, Hebräisch, Englisch, uvm.

Re: GFX (Banner) Tutorial 

Postby Mono » Tue Jan 08, 2013 2:13 pm

Tolles Tutorial. :)
Ich habe damit dies hier erstellt:

Spoiler : :
Image

(Charaktere aus Devil Survivor 2)
Image
Image
User avatar
Mono
 
Posts: 6231
Joined: Sat Jul 16, 2011 9:34 pm
Location: The Purest Sky and Sea
Gender: Male
Spoken languages: German, English

Re: GFX (Banner) Tutorial 

Postby Jay_Bee » Tue Jan 08, 2013 2:28 pm

Image

hm, an sich gefällt der mir sehr gut... Ich finde, dass du den rechten Charakter z.B. sehr schön mit dem Hintergrund verbunden hast, während der linke, wie auch bei mir häufig, ehr auf dem Hintergrund zu liegen scheint. Das sorgt für eine gewisse Spannung im Bild.
Was mir nicht so gefällt ist der Schriftzug. Ich finde die Farbe ein bisschen zu unauffällig, und irgendwie ist die Schattierung verwackelt, sie scheint nicht ganz einheitlich zu sein. Du kannst auch mal mit den Schriftarten rumexperimentieren, ich persönlich mag z.B. die Schriftart "Rockwell" sehr, die wirkt markanter als die sehr glatte Schrift, die du verwendet hast.
Sehr gelungen dagegen finde ich den Rest vom Hintergrund, das Eckige hat was, nur über dem Schriftzug könnte noch irgendwas sein... das wirkt noch ein Bisschen leer.

Mehr davon!!

LG

Jay_Bee

Ich habe gerade festgestellt, dass das Menü Einstellungen nicht an dem Ort liegt, der in dem Tutorial angibt, sondern je nach Version:
(Das gilt für den MAC!!)
2.6 Bearbeiten -> Einstellungen
2.8 GIMP -> Einstellungen
Spoiler : Fetter GK2 SPOILER :
Image

Hikaru no Go!
Image
User avatar
Jay_Bee
 
Posts: 96
Joined: Sun Oct 09, 2011 2:14 pm
Location: Zuhause
Gender: Male
Spoken languages: Deutsch, Alt-Griechisch, Hebräisch, Englisch, uvm.

Re: GFX (Banner) Tutorial 

Postby Mono » Tue Jan 08, 2013 3:18 pm

Danke! Ich habe den Schriftzug mal etwas verändert:

Image

(diesmal sollte die Schattierung so verrutscht und drunter sein, Ich dachte das gab nen schicken Effekt. ^^)
Image
Image
User avatar
Mono
 
Posts: 6231
Joined: Sat Jul 16, 2011 9:34 pm
Location: The Purest Sky and Sea
Gender: Male
Spoken languages: German, English

Re: GFX (Banner) Tutorial 

Postby Gregory Edgeworth » Tue Jan 08, 2013 6:09 pm

Image

Ist zwar nicht das beste, aber für mein erstes Banner bin ich ganz zufrieden. :)

In Anbedracht dessen, das ich seit ewigkeiten nichtmehr GIMP, bzw. Paint.NET aufhatte. ._.
Image
~ Die Wahrheit kommt ans Licht! ~
User avatar
Gregory Edgeworth
 
Posts: 2252
Joined: Mon Sep 27, 2010 5:01 pm
Location: Germany
Gender: Male
Spoken languages: German, English

Re: GFX (Banner) Tutorial 

Postby Mick » Tue Jan 08, 2013 6:23 pm

@Jay_Bee
Sehr schön! Das wird vielen (mir eingeschlossen, da ich bei Effekten immer relativ wenig Ideen habe) eine große Hilfe sein. :)

Mono the Meerp wrote:(diesmal sollte die Schattierung so verrutscht und drunter sein, Ich dachte das gab nen schicken Effekt. ^^)

Das ginge etwas einfacher. Den gleichen Effekt erzielst Du mit Filter > Licht & Schatten > Schlagschatten. Darüber hinaus: Der Banner gefällt mir! ;)

Was es auch im Bezug zu Schriftarten vielleicht noch gut zu wissen ist: Auf dieser schicken Seite finden sich zahlreiche Schriftarten. Von ihr ist auch die Schriftart in meinem Avatar.
User avatar
Mick
Moderator
 
Posts: 6451
Joined: Sun May 29, 2011 10:29 pm
Location: Germany
Gender: Male
Spoken languages: English, German, some Italian, some French

Re: GFX (Banner) Tutorial 

Postby Mono » Tue Jan 08, 2013 6:45 pm

Mick wrote:Das ginge etwas einfacher. Den gleichen Effekt erzielst Du mit Filter > Licht & Schatten > Schlagschatten

Gut zu wissen. :)

Ich habe noch einen gemacht:

Image
Image
Image
User avatar
Mono
 
Posts: 6231
Joined: Sat Jul 16, 2011 9:34 pm
Location: The Purest Sky and Sea
Gender: Male
Spoken languages: German, English

Re: GFX (Banner) Tutorial 

Postby Jay_Bee » Tue Jan 08, 2013 6:55 pm

Sooo:

Image

joa, sehr schöne Idee! Ich finde zwar die blauen Streifen etwas störend, aber ansonsten gefällt er mir sehr gut! Besonders die Effekte am guten Sniper selber gefallen mir sehr gut! Du kannst aber dich ruhig trauen, mehr zu verwischen, dann hast du ein schönes Highlight um deinen Render drum rum. Der Hintergrund gefällt mir aber sehr gut und die Schrift passt gut zum Banner. (Mal davon abgesehen, dass ich den Spruch liebe xD) Such dir am Besten ein paar Pinselsets aus, dann kannst du "schönere" Effekte erzielen. Weiter so!

Image

Ja, sehr geil! Farblich richtig schön stimmig!

Image

Gefällt mir deutlich besser jetzt! Weiter so!

Ich find das so geil, das ihr das macht! Das macht mir richtig Spaß!!!!

LG Jay_Bee
Spoiler : Fetter GK2 SPOILER :
Image

Hikaru no Go!
Image
User avatar
Jay_Bee
 
Posts: 96
Joined: Sun Oct 09, 2011 2:14 pm
Location: Zuhause
Gender: Male
Spoken languages: Deutsch, Alt-Griechisch, Hebräisch, Englisch, uvm.

Re: GFX (Banner) Tutorial 

Postby Gregory Edgeworth » Tue Jan 08, 2013 9:12 pm

Image

Habe mich mal an was neues gesetzt. :)
Image
~ Die Wahrheit kommt ans Licht! ~
User avatar
Gregory Edgeworth
 
Posts: 2252
Joined: Mon Sep 27, 2010 5:01 pm
Location: Germany
Gender: Male
Spoken languages: German, English

Re: GFX (Banner) Tutorial 

Postby Mo! » Tue Jan 08, 2013 9:19 pm

Vielen Dank für das Tutorial. Ich setz mich auch bald mal an einen dran.
Profi-Wolf

Image
User avatar
Mo!
 
Posts: 1918
Joined: Sun Oct 14, 2012 5:45 pm
Location: Jabberwock Islands
Gender: Male
Spoken languages: Deutsch, English

Re: GFX (Banner) Tutorial 

Postby Keromean » Tue Jan 08, 2013 9:41 pm

Da ich recht faul bin, benutze ich Paint.net. Habe mir jetzt nicht sooo viel Mühe gegeben.
Ich wollt nur mal testen.
Da. Ich weiß, der ist nicht schön. Und mir sind auch die Fehler im Banner klar :side:
Image
MVP Medallien: (Düsterwald) Dangan Ronpa 2./"Kinda canon" Award//"Franken Fran"

Fellow Youtuber and Member on Youtube:
The real MalcoraX i've seen on Youtube: https://www.youtube.com/channel/UCYOwo9UEG1Zu3sOGuT01WeA
The real Mastermind i've seen on Youtube: https://www.youtube.com/user/Mastermind6425
The real Blasterboy i've seen on Youtube: https://www.youtube.com/user/BlasterboyGaming
The real EvolinaX i've seen on Youtube: Search for yourself.

Let it go and move on. - Prosecutor Sahdmadhi
User avatar
Keromean
 
Posts: 1423
Joined: Sat Dec 03, 2011 2:02 pm
Gender: Male
Spoken languages: Deutsch; Englisch; Denglisch

Re: GFX (Banner) Tutorial 

Postby Xemnas » Tue Jan 08, 2013 11:36 pm

Ich hab auch einen Versuch gemacht - mein Kunstwerk gibt es im Spoiler zu bestaunen.

Spoiler : seid ihr ganz sicher? :
Image
SHSL Juror

Image

Source für Profilbild: http://www.pixiv.net/member_illust.php?mode=medium&illust_id=41985302
Original-Artist: http://www.pixiv.net/member.php?id=3892891

Die Katze grinste. "Hierzulande ist jedermann verrückt. Ich bin verrückt. Auch du bist verrückt."
"Woher weißt du, dass ich verrückt bin?"
"Sonst wärst du nicht hier", antwortete die Katze.

Lewis Carrol, "Alice im Wunderland"
User avatar
Xemnas
 
Posts: 2350
Joined: Sun Jun 12, 2011 8:21 pm
Location: Erste Foundation, Terminus
Gender: Male
Spoken languages: Deutsch, Englisch, kein Russisch

Re: GFX (Banner) Tutorial 

Postby EdgeOverRuled » Wed Jan 09, 2013 12:21 am

Sehr schöne Banner hier.^^
Auch ein tolles Tutorial, werde mich vielleicht auch einmal an einem versuchen.

@Xemnas: Warum zuerst englisch, und dann deutsch? xD
User avatar
EdgeOverRuled
 
Posts: 2756
Joined: Wed Jun 29, 2011 3:34 pm
Location: Not available.
Gender: Male
Spoken languages: German, English y un poco de Español

Re: GFX (Banner) Tutorial 

Postby Jay_Bee » Wed Jan 09, 2013 12:28 am

Image

ja, das ist besser !!

Image

Ganz nett von der Idee, aber die Farben sind mir zu blass... Aber das kann auch am Programm liegen. Schönes Hintergrundbild, die beiden Render passen auch ganz gut.

Image

wirklich? Ein My Little Pony Banner? Sieht aber sehr schön aus und bis auf den sprachlichen Fehler? der ja Edge auch schon aufgefallen war sehr schön. Der Render sitzt gut in der Mitte des Farbverlaufs und die Farben passen. Allerdings könnte die Schrift links ein Bisschen heller sein finde ich.

Macht alle weiter so!!

LG Jay_Bee
Spoiler : Fetter GK2 SPOILER :
Image

Hikaru no Go!
Image
User avatar
Jay_Bee
 
Posts: 96
Joined: Sun Oct 09, 2011 2:14 pm
Location: Zuhause
Gender: Male
Spoken languages: Deutsch, Alt-Griechisch, Hebräisch, Englisch, uvm.


Return to Kreativ

Who is online

Users browsing this forum: No registered users and 1 guest