Das Interface von Windows 8 zeichnet sich u.a. durch bunte Kacheln mit einfarbigen weißen Icons im Startmenü aus. Neben Programmicons können hier auch Websites „angeheftet“ werden um vom Startmenü aus einen Schnellzugriff auf die Seite zu ermöglichen. Mit einer kleinen Anpassung im head der Website können Titel, Farbe und Icon dieses „Tile Icons“ festgelegt werden.

Tile Icon erstellen

Zunächst sollte ein Tile Icon in der Größe von 144x144 Pixeln und mit transparentem Hintergrund erstellt werden. Farbige Icons sind zwar auch möglich, entsprechend der Design-Guideline von Windows fügen sich einfarbige Icons aber besser in den Gesamtlook ein. Speichert das Icon im PNG-Format ab und verschiebt es ins Stammverzeichnis der Website. Hier dürften bereits ein Favicon und ein Apple Touch Icon liegen.

Meta-Tags für Tile Icons

Nun muss eine Anpassung am Quellcode der Website vorgenommen werden. Kopiert folgende Meta-Tags in den head und passt die Inhalte an. Neben dem Titel der Kachel und dem Pfad zum bereits erstellten Icon, muss eine Hintergrundfarbe angegeben werden. Hier sind Hexadezimal und RGB-Werte möglich. Der Titel sollte nicht länger als 2x 13 Zeichen sein, ansonsten wird er abgeschnitten (Danke an Michael für die Info).

<meta name="application-name" content="kulturbanause">   
<meta name="msapplication-TileImage" content="tile-icon.png">
<meta name="msapplication-TileColor" content="#014454">

Websites zum Startmenü hinzufügen

Wenn alle Änderungen gespeichert und hochgeladen sind, kann die Website im Internet Explorer 10 über den Button „An Start anheften“ zum Startmenü hinzugefügt werden.

Anschließend kann das Tile Icon wie alle anderen Kacheln auch positioniert werden. Per Klick öffnet sich die Website im IE10.

Windows Tile Icon unter Windows Phone 8

Bedauerlicherweise scheint das Tile Icon unter Windows Phone 8 nicht zu funktionieren. Wenn du mehr weißt, freue ich mich auf deinen Kommentar.

Links / Quellen:

• Build my pinned site
• Tile design guidelines for Windows Phone
• Mobile HTML5 Boilerplate
• High Quality Visuals for Pinned Sites in Windows 8
• Add your web site to the Windows 8 Metro UI

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Im Zuge der „Retina-Optimierung“ von Websites sollte man sich Gedanken machen, welche technische Lösung sich für welche Art Icon am ehesten anbietet. Neben Webfont-Icons, Vektoren (SVG) und hochauflösenden Pixelgrafiken kommen auch CSS-generierte Grafiken in Frage. Für das in diesem Artikel beschriebene Icon halte ich eine Umsetzung mittels CSS3 für durchaus sinnvoll.

Vorteile der CSS3 Umsetzung

Die Umsetzung mittels CSS3 hat einige wesentliche Vorteile. Die Grafik wird berechnet und eignet sich daher auch für hochauflösende Displays. Auch die Performance der Website wird verbessert wenn kein Bild geladen werden muss. Darüber hinaus ist die Grafik sehr flexibel. Sie kann unkompliziert animiert und umgefärbt werden und passt sich relativen Schriftgrößen an.

Tag-Icon mit CSS3

Der Quellcode des Icons ist recht übersichtlich. Mit Hilfe der Pseudoelemente :before und :after wird das Dreieck und der Kreis innerhalb des Dreiecks erstellt. Der HTML-Code ist ein gewöhnlicher Link mit CSS-Klasse.

.tagIcon {
   float: left;
   height: 30px;
   line-height: 32px;
   position: relative;
   margin-bottom: 10px;
   padding: 0 15px 0 15px;
   background: #C09;
   color: white;
   text-decoration: none;
   border-radius:0 4px 4px 0;
}

.tagIcon:before {
   content: "";
   position: absolute;
   top: 0;
   left: -15px;
   border-color: transparent #C09 transparent transparent;
   border-style: solid;
   border-width: 15px 15px 15px 0;
}

.tagIcon::after {
   content: '';
   position: absolute;
   top: 12px;
   left: 0;
   float: left;
   width: 5px;
   height: 5px;
   border-radius: 100%;
   background: white;
}

.tagIcon:hover {
   background:#333;
} 

.tagIcon:hover:before {
   border-color: transparent #333 transparent transparent;
}

Live-Beispiel

Die nachfolgende Abbildung ist ein Live-Beispiel. Du kannst die Datei auch in einem separaten Fenster anzeigen.

Themenverwandte Links

• Tools zur Thema Retina-/HiDPI-Optimierung
• Retina-Optimierung von Websites

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In Folge 69 der Photoshop-Profis wurde ein Screencast von mir zum Thema Icon-Design veröffentlicht. Das etwa 11 Minuten lange Video behandelt die Grundlagen der Icon-Erstellung und zeigt wie man mit Photoshop-Basics wie den Ebenenstilen und Formebenen sehr schnell zu einem ansehnlichen Ergebnis kommt. Auch die Arbeit mit Lichtern und Verläufen wird ausführlich beschrieben.

Die Photoshop-Profis beschreiben den Inhalt so:

Individuelle Icons verleihen Ihrer Webseite einen unverwechselbaren Look. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Webdesigner Jonas Hellwig, wie Sie mit wenigen Mitteln ein Web-Icon erstellen. Dabei erfahren Sie, wie Sie das Icon mit Gold überziehen und ein Symbol einstanzen. [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Für ein vor kurzem abgeschlossenes Projekt habe ich einen Kochtopf illustriert. In Form eines Icons sollte der Kochtopf die Termine einer Kochschule anteasern. Letztendlich wurde das Icon durch ein Foto ersetzt und kam somit nicht zum Einsatz. Aus diesem Grund stelle ich die Photoshop-Datei sowie das Icon im PNG-Format hier als Download zur Verfügung. Vielleicht könnt ihr es ja in einem zukünftigen Projekt einsetzen.

Kochtopf-Icon

Die PNG-Grafik hat eine Größe von 512x512 Pixel und transparenten Hintergrund. Ich bin der Meinung, dass sich fertige Icons so gut wie nie wirklich 100%ig in eine Seite integrieren lassen. Daher könnt ihr auch die original Photoshop-Datei herunterladen und euren Anforderungen entsprechend anpassen. Der Topf, der Deckel, die Flüssigkeit und die Henkel liegen in separaten Ordnern.

Viel Spaß.

Icon und Photoshop-Datei herunterladen (ca. 250 KB)

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ich bin kein großer Fan von Artikeln, in denen Unmengen von Social Media Icons zum Download angeboten werden. Selbst wenn ein Icon-Set noch so schön gestaltet ist, so passt es in meinen Augen selten hundertprozentig ins Layout und muss häufig noch angepasst werden. Viel brauchbarer ist eine solide Ausgangsbasis, die sich schnell und einfach individualisieren lässt.
Mit JustVector Social Icons hat Alex Peattie nun genau diese Basis geschaffen und stellt 150 monochrome Social Icons als Vector und als Webfont (!) zur Verfügung.

Welche Icons sind dabei?

Das Icon-Set umfasst aktuell folgende 150 Icons - wird laut Changelog aber erweitert:

AIM, AIM (alt), Amazon, Apple, App Store, Arto, AWS, Baidu, Basecamp, Bebo, Behance, Bing, Blip, Blogger, Bnter, Brightkite, Cinch, CloudApp, Coroflot, Creative Commons, DailyBooth, Delicious, DesignBump, DesignFloat, Designmoo, deviantART, Digg, Digg (alt), Diigo, Dribbble, Dropbox, Drupal, DZone, eBay, Ember, Etsy, Evernote, Facebook, Facebook (alt), Facebook Places, Facto.me, Feedburner, Flickr, Folkd, Formspring, Forrst, foursquare, FriendFeed, Friendster, gdgt, GitHub, GitHub (alt), Goodreads, Google, Google Buzz, Google Talk, Gowalla, Gowalla (alt), Groove- shark, Hacker News, hi5, Hype Machine, Hyves, ICQ, Identi.ca, Instapaper, iTunes, [...]

[...] Kik, Krop, last.fm, LinkedIn, LinkedIn (alt), LiveJournal, LoveDsgn, Meetup, Metacafe, Mister Wong, Mixx, Mixx (alt), MobileMe, MSN Messenger, Myspace, Myspace (alt), Newsvine, Ning, Official.fm, OpenID, Orkut, Pandora, Path, PayPal, Photobucket, Picasa, Pinboard, Ping, PingChat!, Playstation, Plixi, Plurk, Podcast, Posterous, Qik, Quora, Rdio, Readernaut, Reddit, Retweet, Robo.to, RSS, Scribd, ShareThis, Simplenote, Skype, Slashdot, SlideShare, Smugmug, SoundCloud, Spotify, Square- space, Squidoo, Steam, Stumble- Upon, Technorati, threewords.me, tribe.net, TripIt, Tumblr, Twitter, Twitter (alt), vCard, Viddler, Vimeo, Virb, W3, WhatsApp, Wikipedia, Windows, Wists, WordPress, WordPress (alt), Xing, Yahoo!, Yahoo! Buzz, Yahoo! Messenger, Yelp, YouTube, YouTube (alt), Zerply, Zootool, Zynga

• Vector-Icon-Set
• Webfont

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor einigen Jahren habe ich ein Martini-Glas gezeichnet, dass ich euch nun als Download zur Verfügung stellen möchte. Die Illustration zeigt einen typische Martini-Kelch, stilecht garniert mit einer Olive. Also wenn mich nicht alles täuscht, ein klassischer Vodka-Martini. Die Gesamthöhe der Grafik beträgt ca. 280 Pixel (ohne Spiegelung). Damit ihr das Glas auch überall einsetzen könnt ist der Hintergrund natürlich transparent.

Download

Lizenz

Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google Chrome 11 ist erschienen. Neben einigen gefixten Bugs wurde auch die Hardware-Beschleunigung aktiviert. Somit kann der Browser u.a. direkt auf die Grafikkarte zugreifen, was die Performance moderner, komplexer Web-Anwendungen spürbar verbessert. Neben den technischen Änderungen wurde bei Chrome 11 auch das bereits angekündigte, neue Logo eingeführt. Das neue Programm-Icon ist eine reduzierte Version des bisherigen Chrome-Logos, was mir persönlich sehr gut gefällt.

Eine weitere Neuerung von Chrome 11 ist mir heute morgen beim Besuch meiner eigenen Seite aufgefallen: Offenbar hat Google einige CSS3-Rendering-Darstellungen verändert. Insbesondere die Eigenschaft box-shadow erzeugt jetzt deutlich dunklere Schatten. Zwar werden die Schatten jetzt in Chrome und Firefox gleich dargestellt - Safari zeigt jedoch andere Schatten. Das ist ärgerlich, da beide Browser auf die gleiche Weise angesprochen werden müssen. Ich hoffe sehr, dass Apple hier bald nachzieht.

• Google Chrome erhält neues Logo - Design Tagebuch
• Google Chome 11: bearbeitete Tickets in dieser Version

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Das Apple Touch Icon erscheint immer dann wenn Ihr innerhalb von iOS (also auf dem iPhone, iPod oder iPad) eine Website auf dem Home-Screen abspeichert. In einem früheren Beitrag habe ich bereits erklärt wie Ihr das Apple Touch Icon erstellt und welche Voraussetzungen das Icon erfüllen muss damit es auch auf dem Retina-Display des iPhone 4 hübsch aussieht. Nun möchte ich erneut ein Update nachschieben und erklären wie Ihr den automatisch von iOS hinzugefügten Glanz auf dem Icon verhindern könnt.

Icon ohne Glanz erstellen

Für gewöhnlich genügt es wenn Ihr das Apple Touch Icon einfach unter dem Dateinamen "apple-touch-icon.png" im Root der Website ablegt. iOS-Devices suchen in diesem Verzeichnis automatisch nach dem Icon und greifen auf die Datei zurück, sobald ihr eine Website zum Home-Screen hinzufügen möchtet.

Bei der Gestaltung des Icons müsst Ihr den typischen "App-Icon"-Glanz nicht selbst hinzufügen. Auch das übernimmt iOS für Euch. Wenn Ihr den Glanz jedoch nicht mögt oder einen eigenen, individuellen Glanz herstellen wollt, so könnt Ihr das dem iPhone-System ebenfalls mitteilen.

Erstellt zunächst wie gewohnt eine Datei mit den Abmessungen 129x129 Pixel und gestaltet auf dieser Arbeitsfläche das Icon. Diese Größe entspricht zwar nicht dem Retina-Display, führt aber auf dem iPhone 4, iPod, iPad und dem "normalen" iPhone zu sehr hochwertigen Ergebnissen. Anschließend speichert Ihr die Datei unter dem Namen "apple-touch-icon-precomposed.png" im Root eurer Website ab.

Im <head> der Website sollte das Icon nun noch einmal explizit aufgerufen werden. Das erreicht Ihr über folgendes Code-Snippet.

<link rel="apple-touch-icon-precomposed" href="http://www.absoluter-pfad ... /apple-touch-icon-precomposed.png">

Das war's auch schon. Ab sofort wird für Eure Website das Icon ohne Glanz aufgerufen.

Verschiedene Icons für iPad, iPhone etc. verlinken

Ihr habt auch die Möglichkeit verschiedene Icons für verschiedene Endgeräte anzubieten. Hierbei werden einfach mehrere Links eingebunden die jeweils über ein individuelles size-Attribut verfügen. So könnt Ihr auch die perfekten Abmessungen für die verschiedenen Geräte berücksichtigen.
Meiner Meinung nach ist das allerdings nicht nötig, wenn Ihr wie oben beschrieben das Icon in der Abmessung 129x129 Pixel erstellt. Es bietet Euch allerdings die Option völlig unterschiedliche Icons bereitszustellen.

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

Weitere Infos findet Ihr auch in der offiziellen Guideline von Apple: Apple Documentation

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Für verschiedene Online-Projekte habe ich Icons und illustrative Elemente rund um das Thema Haare, Wellness, Beauty etc. gezeichnet.
Diese Icons möchte ich Euch nun zum gratis Download zur Verfügung stellen - vielleicht helfen sie euch bei dem ein oder anderen Layout ja weiter. Ich habe alle Icons als PNG und als Photoshop-Datei bereitgestellt. So könnt Ihr selbst noch ein paar Details anpassen, sollte das Icon eurer Vorstellung nicht 100%ig entsprechen.

Die Icons

Das Iconset umfasst folgende Icons: Scheren, Haarspray, Fön, Creme und Kamm. Alle Elemente sind so angelegt, dass Ihr sie optimal individualisieren könnt.

Download Icon-Set

Lizenz

Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Die Hintergrundtextur des Beispielbildes stammt von Flickr: flickr.com/photos/webtreatsetc/4451865583

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Auf dem hauseigenen Video-Blog "Photoshop-Profis" hat der Galileo-Verlag einen Screencast von mir veröffentlicht. In diesem 13 Minuten langen Video schaut Ihr mir bei der Erstellung eines Buntstift-Icons mit Photoshop CS5 über die Schulter. Ich arbeite in diesem Beispiel mit diversen Verlaufsüberlagerungen und einem Smart-Object.
Galileo Press schreibt folgendes über den Inhalt dieses Screencasts:

Anhand eines Buntstift-Icons zeigt Ihnen Jonas Hellwig in dieser Folge der »Photoshop-Profis«, wie Sie mit Photoshop individuelle Icons und Symbole gestalten können. Im ersten Schritt zeichnen Sie mit Hilfslinien und dem Pfad-Werkzeug die Form und füllen sie anschließend mit Farbe. Zum Schluss setzen Sie Glanzlichter und Schatten ein, um die Plastizität des Objekts zu unterstreichen. Für eine möglichst realistische Ausleuchtung sorgen außerdem gezielte Verlaufsüberlagerungen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In diesem Photoshop CS5-Screencast möchte ich Euch zeigen wie einfach es ist mit simplen Grundformen und ein paar Ebenenstilen ein realistisches CD/Blu-Ray Disc Icon zu erstellen. Der Schwerpunkt liegt in der Erstellung individueller Farbverläufe und Ebenenstile. Das Tutorial ist auch als Text-Tutorial verfügbar.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In diesem Photoshop CS5-Tutorial möchte ich Euch zeigen wie einfach es ist mit simplen Grundformen und ein paar Ebenenstilen ein realistisches CD/Blu-Ray Disc Icon zu erstellen. Der Schwerpunkt liegt in der Erstellung individueller Farbverläufe und Ebenenstile. Das Tutorial ist auch als Screencast verfügbar.

Endergebnis

Zunächst wollen wir uns einmal anschauen auf welches Ziel wir hinarbeiten.

Grundformen anlegen

Öffnet eine neue Datei (500 x 500px) und färbt zunächst den Hintergrund dunkelgrau ein. Anschließend legt die Grundformen für die CD an. Wählt hierzu das Auswahlellipe-Werkzeug [M] und wählt daraufhin in der Optionsleiste "Feste Größe". Nun gebt die folgenden Werte ein und erstellt auf je einer separaten Ebene eine entsprechende Auswahl. Es ist vorerst egal wenn die Ebenen nicht übereinander ausgerichtet sind, darum kümmern wir uns gleich.

Mit dem Füllwerkzeug [G] füllt Ihr die jeweilige Auswahl ein; achtet darauf die angebenden Farben einzuhalten. Das erleichtert Euch später die Arbeit enorm.

• Body: 300 x 300 Pixel. Farbe: Grau (#8d8d8f)
• Ebene 1: 300 x 300 Pixel. Farbe: Grau (#8d8d8f)
• Ebene 2: 90 x 90 Pixel, Farbe Schwarz (#000000)
• Ebene 3: 60 x 60 Pixel, Farbe Weiß (#ffffff)
• Ebene 4: 25 x 25 Pixel, Farbe Rot (#ff0000)

Nachdem Ihr alle benötigten Grundebenen erstellt habt markiert Ihr im Ebenen-Bedienfeld alle Ebenen außer der Hintergrundebene und wählt danach "Auswahl > Alles auswählen". Jetzt  klickt Ihr in der Optionsleiste auf die folgenden Buttons um alle Ebenen übereinander auszurichten. Anschließend könnt Ihr die Auswahl aufheben [Cmd/Strg] + [D].

Ihr habt nun die groben Grundelemente erstellt. Eine Kleinigkeit muss allerdings noch erledigt werden: Klickt zunächst auf die Ebenenminiatur von Ebene 4 (kleiner roter Kreis) um alle Pixel dieser Ebene zu markieren. Anschließend wählt Ihr die Ebene Body aus. Achtet darauf, dass die Auswahl nach wie vor besteht und löscht über [Backspace/Entf.] den Auswahl-Bereich.

Die folgende Abbildung zeigt nur die Ebene body, alle anderen Ebenen habe ich ausgeblendet.

Jetzt könnt Ihr Ebene 4 wieder löschen, wir brauchen sie nicht mehr.

Schnittmasken erstellen

Nun müssen einige Schnittmasken erstellt werden. Markiert Ebene 1 und wählt anschließend "Ebene > Schnittmaske erstellen". Alternativ könnt Ihr auch [Alt] drücken und auf die Kante zwischen den Ebenen klicken um die Schnittmaske zu erstellen. Ein veränderter Cursor zeigt Euch an wenn die Funktion bereit steht. Erstellt nun Schnittmasken von Ebene 1, Ebene 2 und Ebene 3.

Das schwierigste ist schon geschafft, nun arbeitet Ihr mit Ebenenstilen weiter.

Ebene 1: Verlaufsüberlagerung erstellen

Doppelklickt Ebene 1 im Ebenen-Bedienfeld um die Ebenenstile zu öffnen. Nun wählt Ihr den Bereich Verlaufüberlagerung. Stellt hier zunächst Winkel als Verlaufsart ein. Das Ergebnis sollte nun wie folgt aussehen.

Nun klickt Ihr innerhalb des Dialogs in den Farbverlauf um die erweiterten Verlaufseigenschaften zu öffnen. Hier habt Ihr die Möglichkeit den Verlauf nach Belieben anzupassen. Unter dem Farbverlauf werden Farbunterbrechungen angezeigt. Klickt eine Markierung an um die hier Farbe zu verändern oder die Position der Unterbrechung anzugeben. Erstellt nun einen Verlauf von Weiß zu Weiß.

Wenn Ihr zusätzliche Unterbrechungen einfügen wollte, so klickt unter den Verlauf. Es wird nun eine weitere Markierung eingefügt die Ihr entsprechend anpassen könnt. Erstellt drei weitere Unterbrechungen auf den Positionen 25%, 50% und 75% und passt die Farben entsprechend des Screenshots an.

Ihr werdet gleich mehrfach mit diesem Verlauf arbeiten. Klickt daher jetzt auf den Button "Neu" innerhalb des Dialogs um den Verlauf zu speichern. Er wird neben allen anderen Verläufen in der Vorauswahl angezeigt und kann mehrfach verwendet werden.

Anschließend könnt Ihr die Verlaufsbearbeitung schließen.

Das Ergebnis sollte jetzt in etwa so aussehen:

Der Verlauf ist bisher  zu gerade. Ändert daher den Winkel innerhalb der Verlaufsüberlagerung auf 45°.

Ebene 1: Kontur mit Verlauf erstellen

Wechselt nun innerhalb der Ebenenstile in den Bereich Kontur und stellt eine Stärke von 3 Pixeln sowie einen Winkel von 135° ein. Wählt als Art "Winkel" und als Position "Innen" aus. Nun klickt Ihr in den Verlauf um die soeben kennengelernten Verlaufsbearbeitungs-Optionen zu öffnen. Hier klickt Ihr den abgespeicherten Verlauf an und bestätigt alle Dialoge mit "OK". Das Ergebnis sollte nun so aussehen.

Da Ihr den wichtigsten Verlauf bereits abgespeichert habt ist die kommende Arbeit  im Handumdrehen erledigt.

Ebene 2 und 3: Verlaufsüberlagerung

Wählt Ebene 2 aus und begebt Euch erneut in die Verlaufsüberlagerung. Wählt als Art "Winkel", als Winkel "45°" sowie den bereits abgespeicherten Verlauf aus. Anschließend reduziert Ihr die Deckkraft der Verlaufsüberlagerung auf 93%.

Nun wählt Ihr den Bereich Kontur aus und richtet eine nach "Innen" gekehrte, 1 Pixel starke, schwarze Kontur ein. Reduziert die Deckkraft auf ca 20%.

Euer Ergebnis sollte jetzt so aussehen:

Erstellt nun auf gleiche Art und Weise eine Verlaufsüberlagerung der Ebene 3. Die Verlaufsüberlagerung muss hier nicht ganz so stark sein. Eine Deckkraft von 45% ist ausreichend. Anschließend wirkt die weiße Fläche in der Mitte nicht mehr ganz so eintönig.

Regenbogen-Effekt hinzufügen

Die CD selbst ist nun fertig. Es fehlt aber noch die Prisma-Lichtbrechung. Klickt zunächst bei gedrückter [Cmd/Strg]-Taste auf die Ebenenminiatur von Ebene 1 um alle Pixel auszuwählen. Nun erstellt Ihr oberhalb von Ebene 1 eine neue Ebene (Rainbow) und füllt hier die Auswahl rot ein. Eventuell ist die Schnittmaske aller darüber liegenden Ebenen verloren gegangen. Achtet darauf, dass die Schnittmaske noch aktiv ist und hebt die Auswahl anschließend wieder auf.

Nun reduziert Ihr innerhalb des Ebenen-Bedienfeldes die Fläche auf 0%. Die Ebene ist nun unsichtbar, Ebenenstile können jedoch nach wie vor angewandt werden. Öffnet anschließend die bereits bekannte Verlaufsüberlagerung.

Als Art stellt Ihr "Winkel" ein und öffnet die Verlaufs-Bearbeitungs-Optionen. Hier wählt Ihr den Regenbogen-Verlauf aus den Photoshop standardmäßig installiert hat und verschiebt die Verlaufsunterbrechungen entsprechend des Screenshots.

Bestätigt nun die Ebenestile und reduziert die Deckkraft der Ebene auf ca.15%.

Um den Effekt auf der anderen Seite der CD ebenfalls erscheinen zu lassen könnt Ihr entweder neue Verlaufsunterbrechungen dem bestenenden Verlauf hinzufügen oder alternativ die Rainbow-Ebene kopieren und in der Verlaufsüberlagerung den Winkel umkehren. Letztere Variante ist schneller aber "unsauberer". :)

Schatten hinzufügen

Um den Eindruck zu erwecken die CD würde schweben erstellt Ihr zunächst eine neue Ebene oberhalb der Hintergrundebene. Nun wählt Ihr Schwarz als Vordergrundfarbe und das Verlaufswerkzeug [G]. In der Optionsleiste stellt Ihr sicher, dass der Verlauf radial ist und von Vordergrundfarbe zu Transparent verläuft. Anschließend zieht Ihr einen kleinen Verlauf auf.

Über "Bearbeiten > Transformieren > Skalieren" [Cmd/Strg + T] könnt Ihr den Verlauf nun in die richtige Form bringen. Reduziert auch die Deckkraft damit der Schatten nicht zu stark wird.

Einstellungsebenen verwenden

Wenn Ihr nun aus der CD eine Blu-Ray- oder eine beliebige andere Disc erstellen wollt, so geht das seit Photoshop CS5 mit einer simplen Einstellungsebene. Klickt hierzu zunächst auf das entsprechende Icon innerhalb der Ebenenpalette und wählt "Farbton/Sättigung" aus. Es wird eine neue Einstellungsebene eingefügt die Ihr nun über das "Korrekturen"-Bedienfeld anpassen könnt.

In den Korrekturen setzt Ihr den Haken bei "Färben" und passt die restlichen Einstellungen nach Belieben an. Anschließend könnt Ihr die Einstellungsbene wie eine normale Ebene an die gewünschte Position innerhlab der Ebenenpalette verschieben. Die Einstellungsebene wirkt sich immer auf alle Ebenen unter Ihr aus.

Der Vorteil der Einstellungsebene liegt darin, dass Ihr den Farbton auch nachträglich noch anpassen könnt.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Neben dem Favicon gehört das WebClip-Icon (auch Apple Touch Icon genannt) mittlerweile zum Must-Have einer guten Website. In einem älteren Artikel habe ich erklärt was genau man machen muss und worum es sich hier überhaupt handelt.

Nun schiebe ich ein wichtiges Update nach: Seit dem iPhone 4 mit seinem brillianten Retina-Display muss das Apple Touch Icon nämlich in höherer Auflösung vorliegen, sonst sieht es so aus wie auf folgendem Screenshot.

Höhere Auflösung für das Apple Touch Icon auf dem Retina Display

Damit das Icon auch auf dem Retina-Display hübsch anzusehen ist muss es nicht wie bisher in einer Abmessung von 60 x 60 Pixeln sondern in 129 x 129 Pixeln Größe vorliegen! Ansonsten bleibt alles beim Alten. Das Icon muss als PNG unter dem Namen "apple-touch-icon.png" im Root Eurer Website liegen.

Tipp: Wenn Ihr das Icon aktualisiert dauert es ein wenig bis das iPhone es merkt. Um diesen Vorgang zu beschleunigen könnt Ihr die Grafik direkt im mobilen Browser aufrufen. Anschließend ist der Cache geleert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Nur ein paar schnelle Tipps heute. Die Website 365psd.com bietet seit nunmehr 23 Tagen jeden Tag eine neue, kostenlose Photoshop-Datei (PDS) zum Download an. Ich hab mir das Ganze mal angeschaut und bin recht positiv überrascht. Es handelt sich bisher fast jeden Tag um ein einzelnes Stilelement was man sicher irgendwann mal sinnvoll einsetzen kann. Besonders gut finde ich, dass die Elemente leicht den eigenen Bedürfnissen abgepasst werden können.

• 365psd.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In vielen Büros ist es leider nach wie vor trauriger Alltag. Hunderte von E-Mails werden Tag für Tag ausgedruckt und im schlimmsten Fall auch noch ungelesen weggeschmissen. Und tschüss, papierloses Büro...
Um dieser Unsitte entgegen zu wirken kann es durchaus hilfreich sein einen entsprechenden Hinweis in die E-Mail einzubauen und so den Empfänger im Idealfall davon abzuhalten.

Einige Organisationen und Firmen (z.B. die Allianz) haben im E-Mail-Footer bereits standardmäßig Hinweistexte oder Grafiken eingebaut - Zeit, dass es mehr werden!

Nichts Neues

Diese Methode ist wie bereits angesprochen keinesfalls neu. Zahlreiche Quellen im Netz haben hierzu in der Vergangenheit Grafiken und Texte erstellt.
Wem mein persönliches Icon gefällt, der kann es selbstverständlich hier kostenlos herunterladen. Viel Erfolg damit!

E-Mail Signatur "Save the World - Don't print ..."

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Icons sind aus modernem Webdesign nicht mehr wegzudenken; in Bezug auf das heutige Thema möchte ich jedoch die Diskussion um ein spezielles Icon anstoßen.
Die Rede ist von der Glühbirne. Dieses Icon wird allgemein für Tips, Infos, Hinweise, Ideen etc. verwendet. Auch ich verwende dieses Icon auf meiner Seite um bestimmte Textabschnitte im wahrsten Sinne des Wortes zu highlighten. Ist das überhaupt noch zeitgemäß?

Ein kleiner Schritt ins Bewusstsein

Ich will gar nicht erst meine Überlegungen erklären, ich stelle einfach folgende These auf: Die Glühbirne steht stellvertretend für einen Gegenstand der die globale Erwärmung fördert. Aus diesem Grund sollte sie (auch in Form eines Icons) nicht weiter verwendet werden! An die Stelle der Glühbirne tritt hier als Bildsymbol die Energiesparlampe die eine identische Symbolwirkung erzielt, jedoch keinen negativen Beigeschmack hat.

Jedem Seitenbesucher der bemerkt, dass hier die moderne Lichtquelle als Icon verwendet wurde, wird diese Tatsache unweigerlich ins Bewusstsein gerufen. User die keinen Unterschied bemerkten haben das Ziel bereits erreicht: Für diese Menschen ist eine Energiesparlampe schon heute ganz normal.

Wie seht Ihr das? Sinnvoll oder Schwachsinn? Kennt Ihr vielleicht noch weitere Icons die man auf diese Weise umgestalten sollte?

Update 22.05.2011: Heute habe ich auf Yahoo Clever! doch tatsächlich die Energiesparlampe als Icon gesehen! Vielleicht entwickelt sich die Angelegenheit ja doch noch.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Während eines aktuellen Web-Projektes habe ich drei Illustrationen zum Thema Motorsport/Rennsport erstellt die im weiteren Projektverlauf jedoch nicht eingesetzt wurden. Aus diesem Grund stelle ich sie Euch hier kostenlos zum Download zur Verfügung.
Je nach Projekt lassen sie sich die Motive sicher auch als Icon verwenden auch wenn das Anwendungsgebiet eher klar eingegrenzt sein dürfte. Aber wie das nunmal mit kostenlosen Grafiken so ist. Mitnehmen, abspeichern und wenn man es irgendwann mal braucht darauf zurückkommen. Die drei Grafiken haben die abgebildete Standardgröße und liegen im PNG-Format zum Download bereit. In diesem Sinne: Viel Spaß damit!

Icon-Set herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Für ein aktuelles Projekt habe ich sieben Sport-Icons gestaltet. Da ich das Projekt jedoch abbrechen musste, stelle ich Euch diese Icons kostenlos zur Verfügung. Ich hoffe Ihr findet sinnvolle Verwendung dafür. Das Icon-Set umfasst sieben Icons in einer Größe von 64x64 Pixeln und im PNG-Format. Viel Spaß damit.

Download Icon-Set

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Zu Weihnachten schenke ich Euch in diesem Jahr 40 kostenlose und von mir gestaltete Icons. Diese Icons wurden größtenteils für ein ehemaliges Projekt erstellt und stehen stellvertretend für verschiedene Branchen. Da dieses Projekt nun nicht mehr existiert könnt Ihr sie gerne für Eure Website, Euren Blog oder was auch immer nutzen.
Das Icon-Set umfasst 40 Icons: 20 verschiedene Motive, jeweils in den Größen 48x48 und 24x24 Pixel, sowie im PNG-Format.

Icon-Set herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor einiger Zeit brauchte ich für ein Projekt dringend einen männlichen und einen weiblichen Avatar. Nach kurzer und erfolgloser Suche im Netz entschloss ich mich dazu sie selbst zu zeichnen.
Anschließend erstellte ich einige farbliche Variationen die Ihr Euch hier nun kostenlos herunterladen könnt um sie für Eure Projekte (kommerziell und nicht-kommerziell) zu verwenden. Es handelt sich um 18 männliche und 18 weibliche Icons, alle auf transparentem Hintergrund im PNG-Format.

Icon-Set herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Kleine Icons zur bildhaften Kennzeichnung von Internetseiten haben sich in den letzten Jahren großer Beliebtheit erfreut. Das Favicon als Markierung von Lesezeichen oder der Browser-URL kennt wohl mittlerweile jeder. Doch was genau ist ein WebClip Icon? Die Lösung ist ganz einfach. Das Favicon im iPhone und iPod Touch!

Damit das iPhone anstelle eines automatisch generierten Icons ein schönes, vom Webseitenbetreiber erstelltes, Icon anzeigt muss nicht viel getan werden. Im Folgenden erkläre ich in aller Kürze was getan werden muss.

Wo erscheint das Icon denn überhaupt?

Das WebClip Icon wird erst dann sichtbar, wenn ein iPhone oder iPod Touch Benutzer sich dazu entscheidet eine Website nicht in den Favoriten von Safari zu verwalten sondern ihr einen ehrenvollen Platz auf dem Home Bildschirm zuzuweisen.
Sofern kein WebClip Icon vorhanden ist, erstellt das iPhone automatisch ein passendes. Dieses zeigt jedoch nur eine stark verkleinerte Ansicht der gesamten Website. Ich für meinen Teil wollte solch ein hässliches Icon nicht auf dem Home Bildschirm platzieren, also muss ein WebClip Icon her.

WebClip Icon erstellen

Erstellt eine neue Datei mit den Abmessungen 60x60 Pixel und gestaltet Euer Icon. Beachtet hierbei bitte, dass die gesamte Arbeitsfläche zum Icon generiert wird.
Der große Vorteil liegt darin, dass Ihr weder die abgerundeten Ecken einbringen, noch die Spiegelungen hinzufügen müsst. Dies geschieht alles im iPhone selbst.
Die fertige Grafik speichert Ihr nun unter dem Dateinamen "apple-touch-icon.png" in den Root Eurer Seite ab. (Hinweis: Bei WordPress muss das Icon in der selben Hierarchieebene liegen in der sich auch die wp-config.php-Datei befindet.)
Das wars. Ihr benötigt im Gegensatz zum Favicon keine Codeschnipsel im Seitenhead oder ähnliches. einfach nur das Icon erstellen, hochladen fertig.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Für ein aktuelles Projekt brauchten wir ein Icon einer Zeitung. Ihr könnt es Euch hier kostenlos herunterladen.
Das Set umfasst ein Icon in den Größen 32x32, 64x64, 128x128 und 256x256 Pixel. Selbstredend im PNG-Format.
Viel Spaß damit!

Icon herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ich habe soeben bei mir ein altes Folder-Icon gefunden. Wenn es jmd brauchen kann, so darf er es gerne herunterladen.
Das Set beinhaltet 4 Icons in den Größen 32x32, 64x64, 128x128x und 256x256 Pixel. Alle Icons sind im PNG-Dateiformat.

Icon herunterladen


Das Set unterliegt folgenden Lizenzbestimmungen: Creative Commons Namensnennung 3.0 Unported License

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Drei von mir nicht weiter benötigte Kategorie-Icons als kostenloser Download. Diese Grafiken dürfen für geschäftliche und private Zwecke eingesetzt werden.

Icon-Set herunterladen

Das Set unterliegt folgenden Lizenzbestimmungen: Creative Commons Namensnennung 3.0 Unported License

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Hier findet Ihr 17 von mir erstellte Page-Icons zum kostenlosen Download.
Das Icons-Set umfasst verschiedene Icons wie Upload, Download, PDF, Excel, Word, Kontakt, E-Mail etc. die Ihr sicherlich im ein oder anderen Projekt verwenden könnt.

Icon-Set herunterladen

Das Set unterliegt folgenden Lizenzbestimmungen: Creative Commons Namensnennung 3.0 Unported License

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.