Anzeige
Tutorialbeschreibung

Mini-Icons - Teil 1: Ein Lautsprecher + Teil 2: Ein Notizblock

Mini-Icons - Teil 1: Ein Lautsprecher + Teil 2: Ein Notizblock

In den Nächsten Teilen werden wir folgende Icons bauen:
Teil 1: Ein Lautsprecher
Teil 2: Ein Notizblock
Teil 3: Ein Brief (geöffnet und geschlossen)
Teil 4: Einen Ordner
Teil 5: Eine Mini-Statistik
Teil 6: Einen Einkaufswagen
Teil 7: Kombinierbare Zusätze für die Icons ( Stift, Kreuz, Downloadpfeil, Büroklammer)

Los geht’s:

Du erstellst ein neues Dokument 14x14 Pixel, das ist die Größe für ein Miniicon. So, jetzt kann es richtig los gehen.

Bilder

Wähle den Bleistift aus, wenn du keinen Bleistift in deiner Werkzeugleiste siehst mache folgendes:
Der Bleistift ist im Untermenü vom Pinselwerkzeug. Ein Rechtsklick auf das Pinselicon öffnet dieses Menü. Dort kannst du den Bleistift auswählen. Stelle den Bleistift auf 1px Durchmesser.

Dann Zoomst du auf 800% ran. Auf einer neu erstellten Ebene zeichnest du ein Umgekipptes A wie auf dem Bild zu sehen. Das wird später unser „Hinterteil“ des Lautsprechers.

Bilder

Schritt 1:
Jetzt zeichnest du Diagonalen vom A weg. Wie auf Bild 1 zu erkennen ist, nimmt der Lautsprecher langsam Form an.

Schritt 2:

Verbinde nun die beiden Enden wie auf Bild 2 zu sehen.

Schritt 3:
Jetzt malst du mit dem Bleistift und einer Beliebigen Farbe (außer der die du für den Umriss benutzt hast) aus.

Schritt 4:
Jetzt kannst du bequem den Zauberstab benutzen um die Gelben Flächen auszuwählen.

Wenn du jetzt auf 100% zurück Zoomst, sollte der Lautsprecher schon als solcher zu erkennen sein.

Um den Lautsprecher schöner zu gestalten kannst du ihm statt einer einheitlichen Farbe einen Verlaub verpassen.

Die Auswahl von Gerade eben sollte noch aktiv sein.

Jetzt Wählst du für die Vordergrundfarbe folgende Einstellungen. (Rot markiert):

Bilder


Für die Hintergrundfarbe folgende:

Bilder

Jetzt kannst du einen Verlauf in die Auswahl setzten:

Bilder

Eigentlich ist der Lautsprecher jetzt schon ein Lautsprecher. Aber um das deutlicher zu machen, solltest du noch die charakteristischen Schallwellen hinzufügen:

Bilder
 

Wähle die Farbe: #626262

Jetzt ist das Lautsprecher-Icon fertig!

Und sollte etwa, nein genau so aussehen:

Bilder

Wenn du statt der Gelben Hinter- und Vordergrundfarben einen anderen Farbton wählst kannst du viele verschiedene Icons gestalten:

Bilder

Lass deiner Fantasie freien lauf 


Mini-Icons - Teil 2: Ein Notizblock

Los geht’s:

Du erstellst ein neues Dokument 14x14 Pixel, das ist die Größe für ein Miniicon. So, jetzt kann es richtig los gehen.

Bilder

Male zuerst ein Viereck, beachte das links 2px und rechts 1px frei sein müssen. Der Abstand nach oben ist egal, dadurch kannst du die Höhe beliebig anpassen.

Bilder

Mit dem Rechteckigenauswahl-Werkzeug wählst du den Inneren Teil aus und Füllst ihn mit #f0ff89.

Aber was wäre ein Notizblock ohne Notizen?

Die erstellst du folgendermaßen:

Bilder

Wie auf dem Bild zusehen ist malst du Striche in der Farbe #949b60 auf den Notizblock.

Jetzt könnte man schon erahnen was es darstellen soll. Für die bessere Erkennung, solltest du die Charakteristischen „Ringbuch-Ringe“ einfügen:

Damit ein wenig Farbe ins Spiel kommt malst du die Ringbuch-Ringe wie folgt an:

Bilder

Jetzt ist das Notizblock-Icon fertig!

Und sollte etwa, nein genau so aussehen:

Bilder

In Teil 7 dieser Tutorialserie zeige ich dir wie du Kombinierbare Zusätze für die Icons machen kannst:

Bilder

Stifte, Downloadpfeile, Kreuze, Lupen, Büroklammern, und vieles mehr werde ich in Teil 7 beschreiben!

Ich hoffe das Tutorial hat euch Gefallen.

Und immer schön Kommentare schreiben!  

Bis zum nächsten Teil dieses Tutorials,

Duststorm


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von putorois
  • 09.11.2009 - 16:20

Sowas habe ich schon damals auf dem Amiga unter Deluxe Paint 3 gemacht. Das Tutorial wäre in der Rubrik MS-Paint besser aufgehoben. Für einen ganz blutigen PS-Anfänger mag es aber durchaus empfehlenswert sein, um zu lernen, wie man die Lupe und den Buntstift benutzt.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.08.2009 - 17:32

Wie schon erwähnt, ist leider nichts besonderes...

14x14 Image erstellen und reinzoomen sollte man gleich mal können, und die icons sehen eher 90er style aus...

Portrait von Jeopardize
  • 28.06.2009 - 17:37

sieht ganz gut aus, entspricht aber nicht mehr ganz dem aktuellen Standard..

Portrait von kaltestantchen
  • 10.03.2009 - 12:30

Schnell gemacht für einfache schnelle Dinge, doch nichts für Anspruchsvolle!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.11.2008 - 17:32

nicht hilfreich für PS, ABER für die icons allemal

Portrait von mdg70
  • 07.09.2008 - 06:22

Für Anfänger ganz gut, da man durch das "nachbasteln" sieht, wie
leicht sowas eigentlich ist und evtl. Anregungen dadurch bekommt.
Für "alte" Hasen sicherlich nicht so wichtig ;-)
Danke

Portrait von Weichzeichner
  • 05.09.2008 - 17:19

Naja so recht überzeugts mich noch nicht. Das gleiche könnte ich auch mit Paint malern....

Portrait von jenni
  • 05.09.2008 - 12:40

schönes Tut aber wie viel davon willst du denn schreiben
bei mehr als 100000 verschiedenen Icons die es so gibt?
ach so ich darf ja nicht mehr meckern dann nehme halt die 5 Sternchen
ups. verdrückt sind leider nur 4 geworden *zwinker*

Portrait von marDin_H
  • 05.09.2008 - 12:29

wenn mans vektororientiert und in Illustrator macht, ist es natürlich auch nicht schlecht! sieht dann nicht so pixelig aus ;-)

Portrait von eddybaer
  • 05.09.2008 - 12:14

so simpel, so einfach - einfach klasse! und ich hab mir neulich noch 'nen wolf gepixelt für icons, tz... danke! freu mich auf die nächsten tuts

x
×
×