Anzeige
Tutorialbeschreibung

Mini-Icons in z.B. 14x14 Pixel erstellen

Mini-Icons in z.B. 14x14 Pixel erstellen

In diesem kleinen, aber sehr hilfreichem Tutorial will ich euch zeigen wie man diese Kleine Miniicons macht die man überall im Web findet. Sie sind zwar klein, tragen aber dennoch im unterbewusstsein zum ersten Eindruck der Homepage bei. Die Mini-Icons sind 14 x 14 Pixel groß, am Ende des Tutorials werde ich noch erklären wie man größere 21x21 oder 32x32 Icons daraus macht. Aber jetzt zu meinem übrigens ersten Tutorial:


Schritt 1:

Zuerst erstellt ihr ein neues Dokument 14x14 Pixel. Da man bei 100% nur wenig erkennen kann, stellen wir die Größe einfach auf 3200% so füllt das Bild den Gesamten Bildschirm (zumintest bei meinem).

Schritt 2:

Jetzt wird gezeichnet: Um auf ein Pixel genau zu zeichnen benutzen wir das Buntstift-Werkzeug, Größe 1px, Deckkraft 100%.  Fangen wir mit unserem ersten Icon an.
Wir zeichnen das Typische Papier-Icon. Zuerst wird ein dunkel grauer Rand gezeichnet. Neue Ebene. Dann wird die Mitte ausgewählt und ein Verlauf von Weiß zu Silber von rechts unten nach links oben gezogen.

Bilder

Schritt 3:

Neue Ebene. Links und oben wird ein weißer Streifen als Highlight gezeichnet. Rechts und unten wird ein silberner Streifen gezeichnet. Das Ergebnis sieht jetzt komisch aus, aber sobald man die Größe wieder auf 100% setzt sieht das Papier nach Papier aus.

Bilder

Erweitern und Verfeinern:

Der Größe Teil ist geschafft. Die drei Ebenen mit strg-klick einzeln markieren und mit Strg- G zu einer Gruppe zusammen fügen so kann man jederzeit alle ebenen auf eimal ausblenden. Jetzt sind der Fantasie keine grenzen gesetzt. Erstellt eine neue Ebene und zeichnet mit dem selben Prinzip drauflos. Stifte, Büroklammern, Ordner, Sprechblasen, Figuren, Herzchen, Favoriten-Sternchen usw. Immer wenn ihr ein neues Icon erstellt habt gruppiert ihr die ebenen und schaltet auf unsichtbar.

Beispiel:

Bilder

Wenn ihr verschiedene Icons gemacht habt, könnt ihr immer zwei miteinander kombinieren. Grund-Icons wie Ordner Papiere Notizbücher usw. die eine große Fläche einnehmen sollten immer unter den kleinen Zusatzebenen liegen, zb: Stifte Sterne Plus und minus. enn ihr zwei Ebenen kombiniert habt speichert ihr das Icon einfach als Gif oder Ico und kombiniert zwei weitere. Mit dieser Methode habe ich aus 20 Icons 164 kombiniert und so viel Zeit gespart. Ich hoffe das Tutorial war hilfreich und erspart viel unnötige Arbeit.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von jenshop
  • 05.04.2012 - 20:11

Oh mann... 5 Punkte? schade...

Portrait von krusi24
  • 20.08.2011 - 13:25

Einfach zu wenig Substanz, als dass es ein Tutorial sein könnte - das Lesen lohnt sich nicht.

Portrait von MARIA52
  • 05.01.2011 - 15:39

Ich bin enttäuscht - nur einen Beispiel und wo sich die anderen versprochenen Größen befinden?

Portrait von Neeri
  • 14.04.2010 - 15:52

Hilfreich, aber leider ohne Hinweise für die Gestaltung von größeren Icons.

Portrait von funtick
  • 13.02.2010 - 17:38

Gut geschrieben.
Sehr Hilfreich

Portrait von g_sus
  • 11.08.2009 - 20:11

verständlich geschrieben und dadurch ganz gut für anfänger. allerdings hätte ich mir ein paar mehr beispiele gewünscht.

was ist eigentlich mit den 21x21 und 32x32 - icons auf die du noch eingehen wolltest ? ;)

Portrait von eigogi
  • 23.07.2009 - 13:03

Für Anfänger nett...

Portrait von Oxfort
  • 25.05.2009 - 19:55

Passt, war hilfreich!

Portrait von Lilll
  • 13.04.2009 - 21:19

naja,,,etwas knapp aber verständlich,danke

Portrait von jokerin
  • 22.01.2009 - 11:03

Schade ich hätte mir mehr darunter vorgestellt. Für Anfänger ist es sicher gut geeignet und auch nett erklährt. Es ist etwas kurz geraten mehr Beispiele wären nett gewesen. Aber danke für das tut.

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

kurz aber doch sehr hilfreich, wenn man sich etwas informieren will.

Portrait von nikeee13
  • 04.11.2008 - 21:58

bissche kurz geraten, aber ihc habe etwas dazugelernt :D

Portrait von nikeee13
  • 04.11.2008 - 21:43

bissche kurz geraten, aber ihc habe etwas dazugelernt :D

Portrait von Luke1995
  • 15.08.2008 - 19:34

Gutes Tut
habs vor geraumer zeit mal selber versucht bin aber gecheitert...
Das mit dem Highlight war das Prob...
Trotzdem n bisl kurz...
aber thx

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.08.2008 - 15:08

Hätte ein bisschen länger und ausführlicher (den pros zu liebe) sein können, denn es macht ja nix wenns die Anfänger nicht zu ende lesen.
Ich habs aus der Perspektive versucht zu beurteilen, von dem her ziemlich klasse!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.08.2008 - 15:01

Hätte ein bisschen länger und ausführlicher (den pros zu liebe) sein können, denn es macht ja nix wenns die Anfänger nicht zu ende lesen.
Ich habs aus der Perspektive versucht zu beurteilen, von dem her ziemlich klasse!

Portrait von sunriser
  • 30.03.2008 - 14:26

gut erklärt. Hab mich schon oft geärgert, das Firmen nicht in der Lage sind gescheite Icons zu erzeugen...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.03.2008 - 15:43

Super erklärt, hoffe du schreibst noch mehr in die richtung

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.03.2008 - 13:00

Schöne Idee... Hättest allerdings noch das ein oder andere Beispiel mehr machen können ;)

Portrait von hadedeha
  • 29.03.2008 - 09:40

Schön einfach gehalten und gut für Anfänger erklärt! Danke.

x
×
×