Designprozess einer iPad App - Rivers and Seas - Vom ersten Scribble bis zum fertigen Design

Designprozess einer iPad App - Rivers and SeasMobile Endgeräte der neuesten Generation sind mittlerweile mehr als nur die Möglichkeit darüber mit anderen Menschen in Kontakt zu treten. Smartphones und Tablets erleichtern den Alltag, als durchaus nützliche Begleiter und das manchmal an Orten, an denen man sie nicht unbedingt zuerst vermuten würde. Denn sie haben sich im Alltag immer wieder als nützliche Begleiter herausgestellt. Ein solches Beispiel stellt die iPad App - "Rivers & Seas" dar, welche für Boote jeglicher Art auf Binnengewässern wie Flüssen, Kanälen und Seen geeignet ist und seit letzter Woche im Apple iTunes Store erhältlich ist. Thema dieses Artikels wird allerdings weniger die Funktion der auf OpenSea- & OpenStreetMap basierenden iPad-App, sondern die Entwicklung des Designs auf Basis der Anforderungen in diesem doch recht speziellen Nutzungsumfeld - dem Binnengenwässer.

 (weiter)

Artwork-Tutorial: Gefallener Engel - Photoshop für Fortgeschrittene

Artwork-Tutorial: Gefallener EngelGefallener Engel - Die Fähigkeiten im Umgang mit Webstandards sind immens wichtig, sorgen allein allerdings nicht für eine sehenswerte oder erfolgreiche Webseite. Dazu gehört neben der Berücksichtigung von Standards wie CSS und HTML in erster Linie die Gestaltung von Webseiten(-Elementen). Besonders erfolgreich in Szene setzen sich hierbei sehr kreativ gestaltete Header und Footer. Das nun folgende Photoshop für Fortgeschrittene von Gastautor Sebastian Kollat widmet sich dem momentan in nahezu allen Medien sehr präsenten Thema - Engeln, genauer gesagt einem "gefallenen Engel". In seinem letzten Tutorial mit dem Titel "Sportartwork im Urbanstyle" wurde bereits deutlich, dass er ein großer Freund von Fotomontagen und knackigen Effekten ist. Aus diesem Grund stellt sein aktueller Workshop ebenfalls eine Komposition aus unterschiedlichen Motiven dar. Allerdings wird es diesmal ein wenig düster und morbide. Aber genug der großen Worte - lassen wir Taten Folgen:

 (weiter)

Photoshop Tutorial für Fortgeschrittene - Sportartwork im Urbanstyle

Photoshop Tutorial für Fortgeschrittene - Sportartwork im UrbanstyleUrbanstyle mit Photoshop - Passend zu den aktuell sehr heißen Sommermonaten wird Euch heute in einem weiteren Photoshop-Tutorial ein sportliches Urbanstyle Artwork präsentiert, welches unter anderem Grunge-, Typo- und zahlreiche andere Effekte beinhaltet. Dieses Tutorial richtet sich insbesondere an fortgeschrittene Anwender der Adobe-Software. Einsteiger sollten sich von diesem Photoshop Tutorial für Fortgeschrittene allerdings nicht abschrecken lassen, denn mit etwas Geschick, Geduld und basierend auf der ausführlichen Beschreibung der einzelnen Arbeitsschritte in diesem Step-by-Step Workshop, sollten auch sie dem Tutorial folgen und zu einem erfolgreichen Endergebnis kommen können.

 (weiter)

Illustrator Portrait - Tutorial for Professionals

Illustrator Portrait - Tutorial for ProfessionalsIllustrator Portrait - Möglichkeiten ein Portrait mittels eines Grafikprogramms wie bspw. Adobe Illustrator zu vektorisieren gibt es viele. Das folgende eher für Fortgeschrittte und Profis ausglegte Illustrator-Tutorial soll daher einen solchen Entstehungsprozess etwas näher beleuchten. Wer dieses Tutorial nacharbeiten möchte, der sollte sich daher bereits intensiv mit dem Zeichen- und Buntstift-Werkzeug und auch mit der Pathfinder-Palette beschäftigt haben. Es stecken viele Stunden Arbeit in diesem Bild, daher ist es quasi unmöglich, jeden einzelnen Schritt zu dokumentieren. Man benötigt einiges an Übung im Umgang mit den verschiedenen Werkzeugen wie dem Zeichen- oder Buntstift und man muss viel probieren um zu einem zufrieden stellenden Ergebnis zu gelangen.

 (weiter)

JPG gegen GIF und PNG - Finde das ideale Dateiformat für Bilder

JPG gegen GIF und PNG - Finde das ideale Dateiformat für BilderJPG vs. GIF und PNG - Die drei großen Webformate stellen ohne Frage JPG, GIF und PNG da. Doch worin liegen die Unterschiede und welche Vor- und Nachteile bringen die jeweiligen Formate überhaupt mit sich. Eine Frage der man sich spätestens beim Erstellen des Bildmaterials seiner ersten eigenen Internetseite gegenüber steht. In diesem Artikel werden Euch daher diese drei Dateiformate von Bildern etwas näher vorgestellt. Hierbei werden ihre Tücken und ihre Stärken anschaulich erläutert und die hauptsächlichen Einsatzgebiete erklärt, denn jedes einzelne Bildformat hat bestimmte Stärken, die es für ein oder mehrere Einsatzgebiete interessant macht. Die Stärken der Formate PNG, JPG & GIF liegen bspw. eindeutig in der geringen Dateigröße wodurch Internetseiten die Bilddaten enthalten schnell geladen werden können.

 (weiter)

Photoshop Tutorial - Wallpaper im Apple-Style

Photoshop Tutorial - Wallpaper im Apple-StylePhotoshop Tutorial - Die umfassenden Funktionen und die durchaus vorhandene Komplexität von Adobe Photoshop macht den Umgang mit dieser Anwendung insbesondere für Einsteiger oftmals nicht sehr einfach. Das heutige 17 Schritte umfassende Step-by-Step Tutorial einer Fotowand soll daher insbesondere den Einsteigern in diese Software, aber auch dem geübten Nutzer, ähnlich dem hier bereits veröffentlichten Photoshop-Tutorial "Welcome to the jungle", einige Tricks und Kniffe für die Gestaltung von Grafiken ( u.a. Spiegelung und Biegung von Objekten, Perspektivisch verzerren, zuweisen von Ebenen-Effekten ), wie dem hier vorgestellten "Wallpaper im Apple-Style", mit an die Hand geben.

 (weiter)

Valentines Day - Photoshop-Brushes

Valentines Day - Photoshop-BrushesValentine's Day - Am 14.Februar ist es wieder so weit und zahlreiche Online-Shops präsentieren sich am Tag der Liebenden mit "romantischen Elementen und Accessoires" wie bspw. Herzen oder Blumen. Diese haben keine andere Aufgabe als die Emotionen des Betrachters anzusprechen und dann im Idealfall zu einem Kauf, Buchung, ect. zu führen. Diese stilistischen Elemente sind somit keine Verspieltheit des verantwortlichen Webdesigners, sondern einfach ein Mittel um das Augenmerk des Betrachters zielgerichtet auf "Valentinestags-Geschenke" zu lenken. Photoshop-Brushes, können bei der Erstellung solcher Elemente auch aufgrund der zahlreichen Stilrichtungen der Online-Shops, die im Laufe dieser Woche garantiert das ein oder andere Facelifting ihres Designs präsentieren werden, eine große Hilfe sein.

 (weiter)

Photoshop - Winter-Tutorials

Photoshop - Winter- & X-Mas-TutorialsDie bereits im Artikel Photoshop Winter-Brushes angesprochenen saisonalen Anpassungen viele Weblogs, Web-Shops und -Portale oder Umsetzungen entsprechender Werbebanner sind vielerorts ( wie bspw. bei Ebay oder dem Online-Shop des Versandhauses OTTO ) bereits zugange. Wer für seine eigene Webseite oder Banner noch die ein oder andere winterliche oder auch bald anstehende weihnachtliche Veränderung im Design vornehmen möchte, wird auf den folgenden Webseiten sicherlich auf die ein oder andere Inspiration stossen. Und nicht nur das! Denn die sehenswerten Step-by-Step Tutorials für Photoshop-Anwender zeigen zudem auch noch wie die dort vorgestellten Effekte von Euch selbst umgesetzt werden können. Vom obligatorischen Winterwald, über eine Schneekugel, bishin zur X-Mas Card im Retro Style, dürfte auch diesmal für (fast) jeden etwas dabei sein.

 (weiter)

Photoshop Pinselstriche - Schnee- und Winter-Brushes

Photoshop Pinselstriche - Schnee- und Winter-BrushesAuch wenn es in den meisten Regionen noch lange nicht danach aussieht, die Zeit von Winter und Schnee ist nicht mehr lange hin. Viele Webseiten, Portale und Blogs verändern in dieser Zeit oft ihr winterliches und verschneites Design, um bspw. Besucher in dieser Zeit besonders auf die saisonalen Produkte oder Inhalte aufmerksam zu machen. Neben Anpassung im Bereich der Farben und Formen, spielen hierbei für den ein oder anderen auch zusätzliche stilistische Mittel in Form von Schnee, Schneeflocken oder Eiszapfen eine nicht unerhebliche Rolle bei der Umgestaltung ihrer Webseite hin zu einem winterlichen Webauftritt. Brushes und Texturen, können bei der Erstellung solcher Effekte auch aufgrund der vielen möglichen verschiedenen Stilrichtungen eine große Hilfe sein.

 (weiter)

Best of High-Dynamic-Range - Fotos, Weblogs, Tutorials, Software, Books

HDR-Ressources - Best of High-Dynamic-RangeWie das Gewinnspiel zum Buch "HDR-Fotografie" gezeigt hat, ist das Interesse an High-Dynamic-Range-Fotografie , wie die Anzahl an Teilnehmern belegt, ungebrochen groß. Die von den Lesern zusammengetragenen Quellen zum Thema HDR werden im weiteren Verlauf zu einer Übersicht an HDR-Info-Material zusammengefasst. Neben Blogs die sich mit HDR beschäftigen und nützliche Infos enthalten, gibt es eine kleine Auflistung an Tutorials, HDR-Software-Anwendungen, HDR-Buchempfehlungen und für die Freunde der HDR-Fotografie natürlich auch ein paar handverlesene sehenswerte HDR-Fotografien aus dem Flickr Bilder-Pool.

 (weiter)

Photoshop Grunge Brushes - The ultimate Collection

Photoshop Grunge Brushes - The ultimate CollectionDie Werkzeug-Palette von Adobe Photoshop bietet zum Malen u.a. auch den Pinsel an, dessen "Pinselspitzen" ( Brushes ) in unterschiedlichsten Formen, Größen, Härten oder aber auch Dichte vorkommen. Um den verschiedenen Anforderungen und Ausrichtungen im Webdesign auch in diesem Bereich Rechnung zu tragen, können diese auch selbst erstellt und ebenso schnell eingesetzt werden. Die hier aufgelisteten Brushes im Grunge-Stil, können aufgrund ihrer Beschaffenheit auf Hintergrundgrafiken oder aber auch in derart bearbeiteten digitalen Fotografien wirkungsvolle Effekte erzielen und somit jede Webseite zu einem echten Hingucker machen kann. Außerdem erfahrt ihr ( aufgrund mehrfachen Wunsches ), wie ihr diese Pinselstriche selbst erstellen, in Photoshop hochladen und dann erfolgreich einsetzen könnt.

 (weiter)

Grunge-Photoshop-Tutorial - Welcome to the jungle

Großstadtdschungel-TutorialModerne Webseiten sollten mehr als nur die reine Darstellung von Informationen bieten. Vielmehr sollten die Informationen in der richtigen Art und Weise präsentiert und Emotionen transportiert werden. Im folgenden Photoshop-Tutorial zum Thema Gestaltung eines Webseitenkopfes, werden Euch Schritt für Schritt daher einige Tricks und Kniffe für die Gestaltung eines ausdrucksstarken Webseitenkopfes im Grunge-Stil geboten.

 (weiter)

Vintage, HDR, Blur und Co. - Tutorials zur Bildbearbeitung mit Adobe Photoshop

Tutorials zur Bildbearbeitung mit PhotoshopIm Gewinnspiel für "Das Photoshop-Buch für digitale Fotografie" wurden über 30 interessante Links zu Tutorials zur Bildbearbeitung digitaler Fotografien von den Lesern zusammengestellt. Da man im alltäglichen Umgang digitale Fotografien nicht selten Anpassungen vornehmen muss, habe ich von den zur Verfügung stehenden Tutorials, die 7 interessantesten Photoshop-Tutorials zusammengestellt. Ob dem Erzielen eines höheren Kontrastes, dem Erzeugen eines Bildes mit HDR-, Vintage- oder Film-Effekt, in wenigen Schritten gelangt man vom Ausgangsmotiv zu einem sehr ansehnlichen Endprodukt. Verdeutlicht werden die Möglichkeiten der Bildbearbeitung, durch einen "Vorher - Nachher - Vergleich".

 (weiter)

Gemeinsamkeiten von Illustrator und CSS

Aussehen EigenschaftenViele Illustrator-Anwender haben ein Problem mit dem Konzept von Aussehen-Eigenschaften. Diese dienen nicht bloß dem Einsatz von Effekten, sondern sind eigentlich die Grundlage objektorientierter Grafik. Wer das Aussehen verinnerlicht hat, kann nicht nur seine Objekte viel länger im Designprozess editierbar halten, sondern kann auch viel bequemer, schneller und vielseitiger mit Vektor-Programmen arbeiten. Ich schreibe hier ganz bewusst "Vektor-Programme", denn man findet Vergleichbares in CorelDraw, Inkscape oder aber auch FreeHand MX. Gerade CSS-Spezialisten könnten speziell die Verständnis-Schwierigkeiten über das Aussehen mit einem Lächeln quittieren, gehen sie doch tagtäglich mit einem sehr verwandten Konzept um. Wenn Ihr Euch die Aussehen-Eigenschaften mal vom CSS-Standpunkt aus betrachtet, dann bekommt Ihr vielleicht einen besseren Zugang zu dieser Thematik.

 (weiter)

Top Illustrator Tutorials

Illustrator-TutorialsDa die hier im Webstandardblog veröffentlichten Illustrator-Tutorials von Monika Gause, Betreiberin der Webseite Vektorgarten, bisher mehr als erfolgreich waren, möchte ich Euch daher ein paar sehenswerte Step-by-Step Illustrator-Tutorials zu verschiedensten Techniken und mit unterschiedlichen Ansprüchen ( Einsteiger bis Profi ) vorstellen. Vom Wikinger-Helm ( der im übrigen in diesem Sommer als Logo eines Wikinger-Camps für Kinder und Jugendliche wieder zu finden sein wird ), über das Erstellen eines Sketchbooks, die Herangehensweise bei der Gestaltung eines Logos, bis hin zur Umsetzung eines Etiketts für eine Milch-Flasche. Die kleine Auswahl dürfte für (fast) jedes Niveau ein Illustrator-Tutorial parat haben.

 (weiter)

Top Photoshop Tutorials - Part 4

Photoshop TutorialsEs wird langsam Zeit dem Keyword, welches am meisten Besucher von den Suchmaschinen zum Webstandardblog bringt, Rechnung zu tragen. Die Rede ist von "Photoshop". In Kombination mit "Brushes" oder "Tutorials", bildet es sogar zwei der Top-5 "Search-Queries" dieses Blogs. Aus diesem und aufgrund der Erfolge der bisherigen Artikel-Serie "Top Photoshop Tutorials", gibt wieder ein paar sehenswerte Step-by-Step Tutorials zu den verschiedensten Techniken für Euch. Von der richtigen "Belichtung eines Bildes", einer Photoshop-Montage, über das Erstellen eines Werbebanners, bis hin zur Umsetzung eines Posters im "Terror-Style", die Möglichkeiten in denen die Adobe-Software zum Einsatz kommt, sind nicht erst seit Erscheinen der CS4, größer denn je. Es dürfte also auch diesmal für (fast) jeden etwas dabei sein.

 (weiter)

Best Ressources for Photoshop Brushes - Part 2

Photoshop BrushesBrushes, zu deutsch Pinselstriche, sind zur Erstellung von Effekte mittels Photoshop nahezu unerlässlich und aufgrund der unglaublich vielen Stilrichtungen, auch dementsprechend vielfältig. Ob im Retro- oder im Grunge-Stil, technisch, abstrakt oder auf Ornamenten basierende Brushes, es gibt für (fast) jede Anforderung den Pinselstrich. Da diese allerdings im WWW auf zahlreiche Quellen verteilt sind, sind in diesem Beitrag 10 Ressourcen für Photoshop Brushes für Euch zusammengestellt worden. Im weiteren Verlauf dieses Artikels findet ihr zudem noch Quellen, die das Erstellen von Pinselstrichen Schritt für Schritt erklären und selbst für Einsteiger in die Thematik verständlich beschreiben.

 (weiter)

Top Photoshop Tutorials - Part 3

Photoshop TutorialsPhotoshop-Tutorials. Quelle der Inspiration, aber auch eine Möglichkeit viele interessante Techniken und Herangehensweisen im Umgang mit der Adobe-Software kennen zu lernen. Aus diesen genannten Gründen und aufgrund der Erfolge der bisherigen Artikel zum Thema "Photoshop Tutorials", präsentieren wir Euch auch im neuen Jahr wieder ein paar dieser Step-by-Step Tutorials zu den verschiensten Techniken. Ob von "Jungbrunnen", einem Tutorial welches die Restauration eines alten Bildes aufzeigt, bishin zu Erstellung einer Visitenkarte im Grunge-Stil, auch diesmal dürfte für (fast) jeden etwas dabei sein.

 (weiter)

Illustrator Tutorial - Feuerwerk

Illustrator Tutorial - Silvester-Feuerwerk Was bildet für die meisten Menschen den Abschluss eines jeden Jahres? Richtig, ein Silvester-Feuerwerk. Zu diesem Anlass hat unsere Gastautorin Monika Gause, ein Step-by-Step Tutorial für alle "Vektorianer" erstellt. Ziel ist es, in 24 Schritten ein kleines aber feines Feuerwerk mittels Illustrator zu erstellen. Außerdem taugt so ein Feuerwerk, prima dazu, um eine kleine Einführung über eines der am meist unterschätzten Features von Illustrator zu geben: dem Transformieren-Effekt. Allen interessierten Lesern und Anwendern vektorbasierter Software wünschen wir hiermit viel Spass und Erfolg bei unserem letzten Tutorial im Jahr 2008!

 (weiter)

Illustrationen - Faces

Illustrationen - FacesSeit Bestehen dieses Blogs präsentieren in unserer Linkzone unter der Überschrift "Recommended Art" in wechselnden Abständen Künstler, deren Arbeit wir für empfehlenswert halten. Und um eben diesen Künstlern auch mal ein wenig mehr Beachtung zu schenken, haben wir uns dazu entschlossen die Arbeiten innerhalb dieses Beitrags, einer vielleicht etwas breiteren Leserschaft zu präsentieren. Bei der Betrachtung der ausgewählten Arbeiten könnte man dieser Übersicht an Illustrationen auch den Titel "faces" geben. Aber seht selbst.

 (weiter)

Top Photoshop Tutorials - Part 2

Photoshop Tutorials Photoshop-Tutorials. Quelle der Inspiration, aber auch eine Möglichkeit interessante Techniken und Herangehensweisen im Umgang mit der Adobe-Software kennen zu lernen bzw. vorhandene Kenntnisse auszubauen. Aus diesen genannten Gründen und aufgrund des Erfolges des Artikels "Top Photoshop Tutorials" wollen wir Euch wieder einmal ein paar sehenswerte Tutorials dieser so begehrten Bildbearbeitungsprogramms vorstellen. Die Beispiele reichen von der Gestaltung eines Banners der mit Licht und Schatten spielt, bishin zu zahlreichen Wallpaper-Tutorials.

 (weiter)

Top Photoshop Tutorials

Photoshop TutorialsTutorials haben oftmals mehrere positive Aspekte. Neben dem Lerneffekt der sich bei manchen dieser Step-by-Step Tutorials einstellt, sind vor allem Tutorials aus Bereich Gestaltung zudem noch eine Quelle der Inspiration. Manchmal sind es nicht die Endergebnisse selbst, sondern die Herangehensweisen der Autoren. Aus diesen genannten Gründen wollen wir Euch heute ein paar Tutorials vorstellen, die diese Bedingungen durchaus erfüllen. Von Homer Simpson als Cartoon-Figur, über die Gestaltung von Icons, bis hin zur Erstellung von Hintergrund-Elementen.

 (weiter)

Illustrator Tutorial - Wikinger-Logo

Tutorial zum Logo eines WikingerhelmsDie Gestaltung eines Logos ist ein oftmals diffizieler Vorgang, der neben der entsprechenden Idee, vorhandener Kreativität, auch entsprechendes Können voraussetzt. Um einen solchen Entstehungsprozess eines Logos mal genauer unter die Lupe zu nehmen, präsentieren wir Euch heute ein Illustrator-Tutorial, bei dem Schritt für Schritt das abgebildete Wikinger-Logo erstellt wird. Warum es sich lohnt bis zum Ende des Tutorials dabei zu bleiben, werdet ihr am Ende des Beitrags sehen. Diese Wikingerhelm-Logo gestaltet Ihr im übrigen mit Illutrators Form-Werkzeugen und dem Pathfinder.

 (weiter)

Photoshop Aktionen, der schnelle Weg zum perfekten Bild

Photoshop AktionenViele von Euch können ein Lied davon singen. Bilder bearbeiten und das in Mengen. Arbeitsschritte die sich immer wieder wiederholen. Sie nehmen einem die Zeit, sich bei der Umsetzung eines Web-Projektes mit anderen Dingen zu beschäftigen. Für Anwender von Photoshop gibt es neben Brushes die Möglichkeit, immer wiederkehrende Arbeitsschritte in einer sogenannten Aktion zu speichern. Diese kann dann geladen werden und mit einem Knopfdruck führt Photoshop diese Aktion durch und das Bild, die Grafik oder Illustration, weißt genau die selben Eigenschaften auf wie die Grafik, mit der die Aktion erstellt wurde. Nun gibt es dafür eine Menge Ressourcen die einem Arbeitsschritte wie das Erstellen eines Bildes im Stile eines Polaroids. Wer jetzt auf den Geschmack gekommen sein sollte, wird in der folgende Auflistung zahlreiche interessante Aktionen finden, die einem das Leben erleichtern.

 (weiter)

Best 10 Photoshop-Brush Ressources

Brushes, zu deutsch Pinselstriche, sind zur Erstellung zahlreicher Effekte in Photoshop nahezu unerlässlich und aufgrund der steigenden Beliebtheit der Brushes, werden auch die Quellen dieser immer zahlreicher. Allerdings sind nicht alle Quellen immer sonderlich ergiebig, daher haben wir für Euch 10 Seiten zusammengestellt, deren Vielfalt an Pinselstrichen sich mehr als sehen lassen kann.

NaldzGraphics - Photoshop Resources & Tutorials
naldzgraphics.com

 (weiter)

In wenigen Schritten von der Skizze zur professionellen Vektorgrafik

Create Sketchy-Style VectorsAuf Vectips.com zeigt Ryan in seinem Tutorial "Create Sketchy-Style Vectors", wie man in wenigen Schritten von einer Skizze (siehe eingescannte Vorlage links) zu einer vektorbasierten in Illustrator erstellten Grafik gelangt (siehe rechter Teil der Abbildung). Wer diesbezüglich noch etwas Nachholbedarf hat oder gern mehr über das Arbeiten mit Illustrator CS3 erfahren möchte, kann sein Wissen im kürzlich vorgestellten Illustrator Crash-Course auffrischen bzw. ausbauen.

 (weiter)

Illustrator Crash-Kurs in 30 Tagen

Illustrator CS3 Crash-Kurs in 30 TagenIm iStockdiary erhalten Einsteiger und allgemein Interessierte in Sachen Illustrator, über 30 Tage einen kostenlosen Crash-Kurs. Damit auch diejenigen deren Zeitplan wenig Zeit für Weiterbildung übrig lässt, die Möglichkeit haben den Kurs durchführen können, nehmen die einzelnen kleinen Lektionen von Tony Soh nicht mehr als 20 Minuten täglich in Anspruch. Einfach den Feed abonnieren und jeden Tag ein paar Minuten "opfern". Das Portfolio von Tony, lässt erahnen das sich lohnen wird, bei diesem Crash-Kurs bis zum Ende am Ball zu bleiben. durch Das finale Projekt am letzten Tag heißt im übrigen "Designing a Logo". Einfacher und zeitsparender kann eine Einführung in dieses vektorbasierte Grafik- und Zeichenprogramm kaum sein. Allen Teilnehmern viel Spass!

Renovierungsarbeiten im Webstandardblog

Kopfbereich des Webstandardblogs vorherDie Besucher des Webstandardblogs werden festgestellt haben, dass am Layout kleine Änderungen vorgenommen worden sind. Nicht viel, aber soviel das es auffallen kann, wenn man sich beim Lesen unserer Inhalte nicht ausschließlich auf den Feed-Reader verlässt. Es ist kein verändertes Farbschemata oder gar ein verändertes Layoutverhalten. Betroffen ist, wie die beiden Abbildungen (vorher und nachher) zeigen, lediglich der Kopfbereich. Der bisherige Kopfbereich des Blogs war unfertig und wirkte, wie in der ersten Abbildung zu sehen, sehr klein und gestaucht. Daher wurden die Ausmaße dieser Bereich in Sachen Höhe fast verdoppelt. Eine weitere Layout-Änderung in diesem Bereich betrifft die Schriftart des Schriftzuges "Webstandard". Wurde diese bisher von der Schriftart Georgia präsentiert, wird die Aufgabe nun von der Handschrift Segoe Print übernommen, die einen etwas "frischeren und persönlicheren" Eindruck hinterlässt. Zudem wurde von einem Untertitel ergänzt.

 (weiter)

Mit Photoshop Brushes zum Grunge Layout

Diese besonderen "Pinselstriche" erfreuen sich nicht zuletzt aufgrund von Webseiten im Grunge-Stil immer größerer Beliebtheit. In wenigen Minuten kann auf diese Weise ein Webseiten-Layout entstehen, dass einen mehr als professionellen Eindruck hinterlässt. Die Anzahl an Seiten die die Vielfalt dieser Brushes darstellen ist immens. Aus diesem Grund werden an dieser Stelle vier ausgewählte Webseiten mit umfangreichen Sammlungen an hochwertigen Brushes vorgestellt.

qbrushes.comqbrushes.com

 (weiter)

Alpha-transparente PNG-Grafiken auch für den IE kleiner Version 7!

IE ohne TransparenzTransparenzen in Bildern und Grafiken für den IE kleiner der Version 7 darzustellen zeigt, ein nicht ganz unbekanntes Problem. Gerade bei Grafiken die sich wie die Abbildung über wechselnden Hintergrundfarben oder Farbverläufen befinden, ergibt dies ein oft unansehnliches Bild. Zur Lösung dieses Problems gibt es wie so oft, mehrere Ansätze. Da gerade bei den Suchanfragen oder direkten Anfragen an das Webstandard-Team, nach einer solchen Lösung gefragt wird, wollen wir an dieser Stelle auf ein kleines aber feines JavaScript hinweisen, welches von Dean Edwards entwickelt wurde. Neben vielen anderen Features die dieses Skript ermöglicht, ermöglicht der Download des Skriptes unter der zusätzlichen Verwendung einer transparent Grafik im GIF-Format, eine optimale Darstellung alpha-transparenter PNG-Grafiken in allen IE-Versionen kleiner der Version 7.

 (weiter)

Photoshop vs. Illustrator, der Weg zum eigenen RSS-Logo

Logo via PhotoshopDa allein die Position eines RSS-Logos nicht ausschlaggebend für die Wahrnehmung durch die User ist, sollte auch die gestalterische Seite entsprechend berücksichtigt werden. Die folgenden zwei Tutorials zeigen, dass der Weg zum Ziel wie gewohnt über verschiedene Wege erreicht werden kann. Sie zeigen, dass in wenigen Arbeitsschritten dein eigenes Badge (zu dt. „Abzeichen“) erstellt werden kann. Bei der Umsetzung eines solches Abzeichens, gibt es die Möglichkeit dies pixelgenau via Photoshop zu erstellen oder vektorbasiert mittels Illustrator.

 (weiter)

Inspirationen für Background-Pattern

k10k PixelpatternsDas die Grafiken einer Webseite je nach Dateigröße unterschiedlich lange Ladezeiten besitzen ist kein Geheimnis. Nicht immer muss eine Grafik daraufhin in ihren Ausmaßen verkleinert oder der Qualität gemindert werden. Denn es gibt auch Möglichkeiten, eine große Fläche einer Webseite mit einer Grafik auszustatten, ohne dabei eine diese Möglichkeiten in Betracht ziehen zu müssen. Im Bereich der Hintergrundgrafiken bspw. gibt es die Möglichkeit eine kleine Grafik mit bspw. 30x30px zu erstellen und diese durch einfaches Wiederholen in x- und y-Richtung zu kacheln. Durch diesen Wiederholungseffekt auch Background-Pattern genannt, entsteht eine Art Muster. Die nun folgenden Webseiten beinhalte zahlreiche Beispiele dieser Technik.

 (weiter)

Icons, Logos und Co. selbstgemacht

Icons & Logos. Viele setzen sie in ihren Webseiten oder Weblogs ein. Wobei viele von denen hierbei oft auf bereits bestehende Icon-Pakte zurück greifen. Wie aber ein Logo oder Icon in wenigen Schritten selbst erstellt werden kann, zeigt Veerle Pieters. Im Artikel "Using the Pathfinder and Align tool in Illustrator" ihres Blogs, beschreibt sie anhand eines kleinen aber feinen Illustrator-Tutorials, wie man mit der Pathfinder-Palette des Vektor-Programms schnell und einfach zu einem sehr ansehnlichen Ergebnis kommt. Einen weiteren Artikel zum Thema Pathfinder, bietet im übrigen Bittbox.