Gorillaz is een virtuele Britse band die na enige tijd weer een nieuwe CD heeft uitgebracht. Dit is een coole promotie clip: Stylo:

Bij mij komt het regelmatig voor dat ik bepaalde afbeeldingen zwart/wit wil maken. Vroeger hadden we nog zwart/wit rolletjes voor je fototoestel. (waar ik veel van gebruikt hebt) Tegenwoordig kun je deze instellingen gewoon op je fototoestel aan en uitzetten.

Maar het is ook softwarematig in Photoshop te realiseren. Een korte video tutorial:

Mensen die niet bekend zijn met PaperVision3D en wat dit softwarepakket doet en kan, kunnen het beste naar de voorbeelden hieronder bekijken. Dit softwarepakket is echt geweldig als je het goed onder de knie hebt. Toch nog even een korte uitleg:  PaperVision 3D is real-time 3D engine voor Adobe Flash die je in staat stelt mooie 3D “filmpjes” (ook games) te creëren.. Vooral in de laatste jaren wordt dit pakket door steeds meer Flash-developers gebruikt. Het resultaat wat je met dit pakket kan bereiken is in sommige gevallen adembenemend.

Kijk zelf even naar de onderstaande voorbeelden:

WHITEvoid

WonderWall

Dasi

The Economist

Carlousulloa

Hook

Foot Locker

Wrong Door

Ik hou van lettertypes (Fonts) en kan zeggen dat ik in de jaren aardige collectie heb opgebouwd.  Met de juiste lettertype en inspiratie kan je prachtige ontwerpen creëren. Met de hieronder afgebeelde (gratis) Sketch Fonts kan je decoratieve effect aan een ontwerp geven. Download ze gratis.

Sketch Rockwell

Broken Phone Nails

Crazy Killer

Fail

Holyrose Sale

Jamai Stevie

Just Jessie

Karabine

Mr. B.

Nerwus

Roughage

Sketched Alphabet

Thurston

Urban Sketch

WC Roughtrad

Zelf  surf ik regelmatig naar DeviantArt om inspiratie voor webdesign op te doen.  Ik waardeer alle kwalitatieve werk die daar te vinden is. Er zijn veel talentvolle (web)designers die zich graag willen presenteren door hun creaties op DevinatArt te plaatsen. Ik wil ze daarbij nog een handje helpen om hun werk verder te promoten. Hieronder heb ik een lijst samengesteld van de naar mijn mening prachtige webinterfaces die ik in november heb gevonden.

Portfolio redesign door dioxyzone

Teacher Board III door SencerBugrahan

AVG-HHBlog door AntoniaVG

Osae door osec

AudioTech door DouglasEltz

Europhia door alighandour

Salleedesign v1 door LeMex

CoffeeCup door Pilej

Eastern Drilling Services door Nas-wd

Studio Portfolio door luxxxoR

Water Design Portfolio by waterdesign

Ready Made Designs v2.2 door bassmansgz

Webee door zee7

New Folio Site door inspiredMark

BVD WP Theme door bestofthemeforest

Financial webdesign door SneakyOne1990

Myportfolio.com door koenigpersoenlich

My folio 02 door aadi-f

SOLVERE s.r.o. door ArtMark

Cloudblack WP door gdnz

CG Society aan het surfen was kwam ik prachtige designs tegen van verschillende artiesten die ik jullie niet wil onthouden. Het gaat hier voornamelijk over Computer Generated Graphics oftewel  CG’s. Mocht er iets moois voor je tussen zitten laat het mij dan weten door een reactie te plaatsen.

Internet Explorer 6 kan bij het ontwerpen van websites een echte ‘pain in the ass’ zijn. Dit komt doordat IE 6 HTML en CSS anders interpreteert in vergelijking met andere browsers. Dit zijn o.a. Float Elementen, Negatieve Margins, Minimale Height waardes etc. Tegenwoordig laten gelukkig veel mensen Internet Explorer links liggen maar ondanks dat wordt IE 6 nog steeds veel gebruikt. Volgens de statistieken van van W3Schools had IE6 in aug 2009 13,6% marktaandeel tegen 24,5% een jaar eerder. We zijn op de goede weg.
In sommige gevallen wil een klant toch die 13,6% ook bekleden en je ontkomt er dus niet aan om ook voor IE6 te gaan ontwikkelen/debuggen. Om het leven van webdesigner iets makkelijker te maken heb ik een onlinetool gevonden die een aparte CSS bestand voor je maakt waar veel hacks inzitten. Dit scheelt je ontzettend veel ontwikkelingstijd. Deze tool is niet perfect maar bekleedt wel de meeste problemen die je in IE6 kunt vinden.

Website :

In deze eerste reeks Photoshop tutorials gaan we een goed uitziend prijskaartje creëren voor bijvoorbeeld een webwinkel. Veel grafische elementen worden in Photoshop of Illustrator gecreëerd. Ik zal proberen om stap voor stap uit te leggen hoe je dit prijskaartje kunt maken.

Het resultaat ziet er als volgt uit:

Stap 1. Nieuwe Document

Start Photoshop en creëer een nieuw blank document van 250×250 pixels.

Stap 2. De Vorm.

In deze stap gaan we de vorm van de prijskaart creëren.

Voordat we de vorm gaan aanbrengen maken we eerste een nieuwe layer aan.

Kies in de Toolbar:

Layer >> New >> Layer

Selecteer de nieuwe layer en geef deze de naam “Vorm”.

Kies daarna het vierkant-met-de-ronde-hoeken-icon (rounded rectangle tool) zoals hieronder is afgebeeld:

Kies vervolgens de shape layers tool:

Zet de radius op 15px en kies zelf de kleur uit (de kleur passen we later nog aan). Teken nu de vorm van je prijskaartje. De vorm ziet er ongeveer zo uit:

Nu gaan we de vorm aanpassen met Transform. Kies in het Menu Toolbar: Edit >> Transform Path >> Warp

Kies uit het menu Arc en zet de waarde op 5.

Na de transformatie ziet je afbeelding er ongeveer zo uit:

Stap 3. Gat toevoegen

Maak een nieuwe layer aan. Layer >> New >> Layer. En geef deze de naam: Cirkel.

We gaan nu een cirkel in onze vorm aanbrengen zodat we er later een touw doorheen kunnen spannen.

Kies de Ellipse Tool zodat we een cirkel kunnen tekenen.

Voordat je de cirkel aan gaat brengen is het misschien handig om je afbeelding iets te vergroten zodat je makkelijker kunt werken. Zet de afbeelding bijvoorbeeld op 150%.

Teken een cirkel, wanneer je Shift ingedrukt houd blijft de cirkel perfect rond.

Maak een nieuwe layer en noem hem: Cirkel Groot.

Zet de kleur op grijs (of de kleur van je keuze) en teken vervolgens een nieuwe cirkel, maar dan iets groter dan de vorige. Zorg ervoor dat jouw nieuwe layer onder die van Cirkel Layer komt te staan zodat de kleinere cirkel op de voorgrond staat. Met de tool kan je de cirkels op de juiste posities plaatsen zoals hier:

Stap 4. 3D effect

We gaan aan de Grote Cirkel een 3D effect toevoegen. Zorg dat je de Cirkel Groot Layer hebt geselecteerd.

Ga naar Layer >> Layer Style >> Bevel and Emboss

Zet de Opacity op 30%

De afbeelding ziet er nu zo uit:

Stap 5. Gradient Kleuren

Tijdens deze stap gaan we twee kleuren aan de prijskaart toevoegen. Namelijk de kleuren #d7003b en #60001e.

Om een mooi effect te creëren gaan we de Gradient tool gebruiken:

Selecteer de Vorm Layer en kies Layer >> Layer Style >> Gradient Overlay

Neem de volgende waardes over:

Klik op de gradient tool:

En kies de juiste kleuren:

Neem de bovenstaande kleuren over zodat je een mooie overgang creëert.

De afbeelding zal er als volgt uitzien:

Stap 6. Een rand toevoegen

Nu gaan we een rand aan de prijskaart toevoegen zodat deze realistischer zal worden. De kleur van de rand mag je natuurlijk zelf bepalen, ik heb gekozen voor: #840027

Maak een nieuwe layer aan. Layer >> New >> Layer en noem deze Rand.

Selecteer de Vorm Layer en kies uit de Toolbar Layer >> Layer Style >> Stroke

Zorgt ervoor dat de Position op Inside staat. Neem de andere waardes over van het voorbeeld:

Je prijskaart begint steeds meer vorm te krijgen:

Stap 7. Draad toevoegen

Nu is het tijd dat we draad aan ons prijskaartje toevoegen.

Maak een nieuwe layer aan. Layer >> New >> Layer en noem deze Draad.

Selecteer de Brush Tool en zet de grote van de tool op 3 of 4 en Opacity op 50%

Teken zelf een mooie draad. Ga net zo lang door totdat je tevreden bent.

Stap 8. Roteren van de afbeelding

Wanneer je het touw hebt getekend en daarmee tevreden mee bent gaan we alle Layers selecteren.

Kies: Select >> All Layers

Wanneer al deze layers geselecteerd zijn gaan we alles roteren.

Kies: Edit >> Transform >> Rotate

Roteer de prijskaartje zoals jij het wilt hebben.

Als het goed is ziet jouw prijskaartje er nu zo uit:

Om de afbeelding mooier uit te laten komen heb ik voor de achtergrond Gradient tool gebruikt.

Met de transparantie in webdesign kun je mooie pagina’s ontwikkelen die er net iets gelikter uit kunnen zien dan ‘traditionele’ websites (dit is natuurlijk niet altijd zo). Transparantie kun je gebruiken voor  lay-outs, logo’s, menu’s, achtergrondafbeeldingen, randen etc.

Lange tijd was transparantie in webdesign door Internet Explorer 6 tegengehouden en kon dus niet op grootte schaal worden gebruikt omdat IE6 niet met het .png formaat overweg kon. Gelukkig zijn er steeds meer ontwikkelaars die IE6 links laten liggen en hun gebruikers adviseren om de browser up-to-daten naar een nieuwere versie of een andere browser te kiezen zoals bijv. Firefox, Opera, Google Chrome of Safari. Mocht je toch voor IE6 moeten/willen gaan ontwikkelen dan zijn er tegenwoordig goede JavaScripts beschikbaar die de IE6 beperking kunnen omzeilen. Hieronder heb ik ter inspiratie een lijstje samengesteld van de transparantie in webdesign die van het .png formaat gebruik maken.

In mijn vorige post: Computer Generated Graphics kon je al bewonderen hoe mooi de computer generated graphics tegenwoordig al zijn. De uitdaging van sommige ontwerpers is een afbeelding te creëren die niet meer van een echte foto te onderscheiden is. De hoge kwaliteit en het hoge detail gehalte spelen hierbij een zeer grote rol. Het gaat hier niet altijd om personen maar ook landschappen en zelfs fantasy figuren. Hieronder heb ik 12 afbeeldingen geselecteerd die naar mijn mening dicht bij  deze realiteit komen.

Bron: CGsociety.org