Glossy Icons

Benutzeravatar
eleanora
Administrator
Beiträge: 8144
Registriert: Do 25. Mär 2010, 00:53
Skype:
Wohnort: Osnabrück
Kontaktdaten:

Glossy Icons

Beitragvon eleanora » Fr 19. Okt 2012, 13:55

Glossy Icons
Der Glossy-Look ist heute aus dem WWW nicht mehr wegzudenken. Deshalb geht auch in diesem Workshop kein Weg an dem Glossy-Look vorbei.

Ok beginnen wir mit einem runden Icon

Schritt 1
Öffne eine neue Datei 48px mal 48px transparent.
Stelle eine neue Ansicht ein mit einer 800% vergrößerten Ansicht, auf der du nun weiterarbeitest.
Aktiviere das Ellipsen-Tool :ellipse: und markiere eine Auswahl auf deiner Ebene. Lasse an allen Seiten einen kleinen Abstand von ungefähr 3 der kleinen Kästchen, die dir die Leinwand anzeigen.
Wähle aus deiner Farbpalette eine Farbe die nicht zu dunkel ist und fülle deine Auswahl damit.
#


Schritt 2
Invertiere die Auswahl. Rufe den Filter - Licht und Schatten Schlagschatten auf.
Einstellungen: X=0, Y=0, Radius=15, Deckkraft=100%, Größenveränderung deaktivieren.
Führe den Filter aus.
Hebe die Auswahl auf und dupliziere die Drop-Shadow- Ebene 2 Mal um den Schatten zu verstärken.
#


Schritt 3
Blende die Hintergrund-Ebene mit deinem Farbpunkt aus. Klicke mit rechter Maustaste auf eine der Ebenen und wähle Sichtbare Ebenen vereinen. Blende die Hintergrundebene wieder ein.

Schritt 4
Füge eine neue transparente Ebene hinzu. Nenne Sie Highlight.
Markiere im oberen Drittel eine Ellipse.
Aktiviere den dein Verlaufwerkzeug
Einstellungen: VG-Transparenz, Linear
Stelle die Vordergrundfarbe auf Weiß ein und fülle die Auswahl mit deinem Verlauf.
#


Fertig ist dein rundes Glossy-Icon.

#
Bild


Abwandlungen:

Möchtest du auf deiner Kugel ein Symbol einfügen, fügst du dieses immer zwischen der Hintergrund- und der Drop-Shadow-Ebene ein.

BildTIPP: Auf Windows findest du die Schriftart "Webdings", darin sind viele Symbole enthalten. Probiere deine Tastatur einmal durch. Mit Tastenkombiniationen mit Shift, STRG und AltGR findest du noch mehr Symbole


#

Als Symbole kannst du die Schriftzeichen aus irgendeiner Symbolschrift verwenden. Färbe dabei dein Symbol mit einer Kontrastfarbe ein und senke die Ebenendeckkraft auf 70%-80%:

BildBildBildBildBild


Du kannst natürlich auch dein eigenes Symbol malen. z.B. eine Blüte: Bild

Viel Spaß beim Nachbasteln!



Wer runde Icons kann, kann auch eckige :mrgreen:

Auf gehts...

Schritt 1
Öffne eine neue Datei 48px x 48px transparent. Aktiviere das Rechtecktool :recheck:
Einstellungen: Kantenglätten aktiv, Abgerundetes Rechteck Radius 2
Fülle das Rechteck mit einer Farbe, die nicht zu dunkel ist.
#


Schritt 2
Invertiere die Auswahl und wende den Filter - Licht und Schatten - Schlagschatten
Einstellung: X=0, Y=0, Radius=15, Deckkraft 100%, Größenänderung deaktiviert
an.
Dupliziere die Ebene zwei mal (je nach Hintergrundfarbe) und vereinige die Schatten-Ebenen.
Hebe die Auswahl auf.
#


Schritt 3
Markiere mit dem Rechteckwerzeug das obere Drittel deines Buttons.
Füge eine neue transparente Ebene hinzu und fülle sie mit einem Verlauf.
Einstellungen: VG-Transparent (VG-Farbe= Weiß), Linear
Fülle die Auswahl mit dem Verlauf.

Füge eine neue Transparente Ebene ein.
Stelle die Vordergrundfarbe auf einen sehr hellen Ton deiner Grundfarbe ein.
Öffne eine weitere Auswahl am unteren Drittel deines Buttons. Fülle diese Auswahl mit dem Verlauf und stelle die Ebenendeckkraft auf "Überlagern".
#


Fertig ist dein eckiger Button Bild

Auch diesen Button kannst du mit verschiedenen Symbolen füllen:
BildBildBildBildBild
Schau rein, in unsere Smiley-Werkstatt!
Aussuchen - Rechtsklick - Grafikadresse kopieren
im Beitrag als img einfügen!
Meine Lieblingssmileys ... BildBildBild

Benutzeravatar
RaphaelaS
Beiträge: 570
Registriert: So 14. Nov 2010, 17:50
Skype:
Wohnort: Austria
Kontaktdaten:

Re: Glossy Icons

Beitragvon RaphaelaS » Mo 22. Okt 2012, 17:13

Hallo, Ele,
das hat Spaß gemacht!

#

(Und wenn man draufdrückt, fängt es an zu schneien...)

Den Tipp mit den Symbolschriften finde ich sensationell, das kannte ich nicht! :umarm:

Schöne Grüße Raphaela

Benutzeravatar
eleanora
Administrator
Beiträge: 8144
Registriert: Do 25. Mär 2010, 00:53
Skype:
Wohnort: Osnabrück
Kontaktdaten:

Re: Glossy Icons

Beitragvon eleanora » Mo 22. Okt 2012, 18:08

Hallo Raphaela
ja der Button ist ja richtig hübsch geworden. Mit Schnee :D Wir haben hier Gott sei Dank noch ein bisschen Spätsommer abbekommen. Also noch ein bisschen Zeit bevor wir den Eiskratzer wieder herausholen müssen ;)
Schau rein, in unsere Smiley-Werkstatt!
Aussuchen - Rechtsklick - Grafikadresse kopieren
im Beitrag als img einfügen!
Meine Lieblingssmileys ... BildBildBild

Falke

Re: Glossy Icons

Beitragvon Falke » Di 19. Feb 2013, 20:38

Hallo,

sehr schöne Icons, aber ich habe es nicht geschafft eins zu erstellen. :?

Es scheitert gleich am Anfang:

Wähle aus deiner Farbpalette eine Farbe die nicht zu dunkel ist und fülle deine Auswahl damit.


Wie fülle ich die Auswahl? :idea:

Benutzeravatar
eleanora
Administrator
Beiträge: 8144
Registriert: Do 25. Mär 2010, 00:53
Skype:
Wohnort: Osnabrück
Kontaktdaten:

Re: Glossy Icons

Beitragvon eleanora » Di 19. Feb 2013, 21:53

Hallo Falke

Da nimmst du den Fülleimertool :eimer:

Gruß Ele ;)
Schau rein, in unsere Smiley-Werkstatt!
Aussuchen - Rechtsklick - Grafikadresse kopieren
im Beitrag als img einfügen!
Meine Lieblingssmileys ... BildBildBild

Falke

Re: Glossy Icons

Beitragvon Falke » Di 19. Feb 2013, 23:27

Ok, das wäre geschafft. Nächster Schritt,

Invertiere die Auswahl.


Wenn ich die Auswahl invertiere, wird meine (zuvor blaue) Auswahl jetzt gelb. :x

Um es ein bisschen schneller zu machen, gleich die nächsten Fragen,

Führe den Filter aus.


Wei führe ich den Filter aus?

Hebe die Auswahl auf


Wie hebe ich die Auswahl auf?

und dupliziere die Drop-Shadow- Ebene 2 Mal


Wie dupliziere ich die Drop-Shadow-Ebene 2 Mal?

Da sind jetzt zwar eine Menge Anfängerfragen in einem Tutorial für fortgeschrittene, aber wie man Bilder skaliert und zuschneidet, das weiß ich schon. Jetzt möchte ich tiefer in die Materie einsteigen und Icons erstellen. Doch dazu ist diese Anleitung zwar sehr gut, aber für mich ungeeignet weil sie nicht tief genug ins Detail geht. Deswegen muss ich diese Anfängerfragen stellen. :?

Benutzeravatar
eibauoma
Beiträge: 6003
Registriert: Do 25. Mär 2010, 21:02
Skype:
Kontaktdaten:

Re: Glossy Icons

Beitragvon eibauoma » Mi 20. Feb 2013, 01:03

Hallo Falke,

ich weiß nicht, ob Du schon gesehen hast, dass Du hier im Forum einen kostenlosen Schnupperkurs für Gimp finden kannst. Auch dieser Kurs ist für Neulinge recht anspruchsvoll. Er wird aber betreut von Mitgliedern, die auch vor einiger Zeit Neulinge waren.
Danach sind einige Grundbegriffe klar.

Dein erstes Problem - beim Auswahl invertieren - wird die Fläche gelb: wahrscheinlich hattest Du einen gelben Hintergrund eingestellt und zu Beginn keine transparente Ebene, Deine Ebene besitzt noch keinen Alphakanal. - rechte Maustaste auf die Ebene im Ebenendialog - Alphakanal hinzufügen

Der auszuführende Filter - Schlagschatten - wird unter Punkt 2 mit seinen Einstellungen erklärt.

Ebene duplizieren findest Du u.a.im Menü Ebene, außerdem bei den Symbolen unter dem Ebenendialog.

na dann, bis bald :pfeifmaus:

Benutzeravatar
PfotenNews
Beiträge: 2596
Registriert: Sa 14. Mai 2011, 18:47
Skype:
Wohnort: NRW
Kontaktdaten:

Re: Glossy Icons

Beitragvon PfotenNews » Mi 20. Feb 2013, 02:52

... ich vermute fast, dass statt "Auswahl -> invertieren" der Menüpunkt "Farben -> invertieren" benutzt wird. Da wird nämlich aus blau dann gelb.

Du solltest Dir vielleicht wirklich die Zeit nehmen und den kostenlosen Schnupperkurs für die Grundbegriffe durcharbeiten. Danach hast Du schon einen guten Überblick und Grundstock für die weiteren Tuts.

Benutzeravatar
eibauoma
Beiträge: 6003
Registriert: Do 25. Mär 2010, 21:02
Skype:
Kontaktdaten:

Re: Glossy Icons

Beitragvon eibauoma » Mi 20. Feb 2013, 07:28

Hatte schon gerätselt, mit welcher Gimp-Version Falke wohl unterwegs sein mag :think:
PfotenNews könnte mit ihrer Vermutung Recht haben.

Falke

Re: Glossy Icons

Beitragvon Falke » Mi 20. Feb 2013, 14:04

Puuh, also das ist aber anstrengend. :wall:

Liebe Damen, ich bin gestern voller Begeisterung auf dieses Forum das sich "Gimp-Werkstatt" nennt, gestoßen. In der Hoffnung, ich würde hier was über den Umgang mit Gimp lernen. Da stelle ich doch drei konkrete Fragen und bekomme stattdessen eine lapidare Antwort, ich solle doch einen Schnupperkurs besuchen. Vielen dank auch. Einen Schnupperkurs um Icons zu erstellen, für deren Erstellung nicht mal zehn Schritte notwendig sind?

Das wäre so, als würde jemand in einem Forum, sagen wir mal, nach einer geeigneter Steuersoftware fragen, und dann die Antwort bekommen, "suche doch bei http://www.google.de" oder "schau im WWW nach". Oder wenn jemand fragen würde, wie erstelle ich eine Website und man würde dann sagen, "na ja, du gibst den (X)HTML Code in einem Editor ein, lädst dann die HTML Datei mit FTP auf den Server und fertig ist die Site". So kann man es natürlich auch machen, nur hilfreich ist es nicht. Bei solchen technischen Fragen, helfen keine pauschalen Antworten a lá "schau im Web nach", hier muss man schon ins Detail gehen.

Die Antwort von eleanora auf meine erste Frage, war schon sehr viel hilfreicher: Da nimmst du den Fülleimertool. Dann hat es geklappt.

Meine Bitte wäre, wenn man schon freiwillig hilft, dann aber ORDENTLICH, Schritt für Schritt erklärt, so dass man jeden der einzelnen Schritte nachvollziehen kann. Ich mache einen Schnupperkurs wenn ich den Icon hier erstellt habe, versprochen, aber bitte mehr Liebe zum Detail. Ich weiß, niemand ist verpflichtet zu helfen, aber nur weil man es freiwillig macht, heißt es nicht dass man es lausig machen soll. Vielen Dank.

Ich benutze Gimp 2.6.


Zurück zu „Fortgeschrittene Tutorien“



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast