Geknipte Objecten van een foto een getekende look meegeven

[yeehaw]

Beste grafische goden

Ik ben bezig met een showportfolio voor school en heb foto's gemaakt van een hoop bureauartikelen. Hiervan wil ik een website maken waarop een bureau te zien is met deze objecten. Deze objecten zullen dan allemaal bewegen en aanklikbaar zijn(doormiddel van html5).

Echter zou ik die objecten graag er getekend uit laten zien. Zoals ongeveer de objecten op de website van J.K. Rowling; http://www.jkrowling.com/en/ (hoeft natuurlijk niet precies hetzelfde).

Ik heb al gezocht op Google en op GoT, maar ik schijn er maar niet de juiste zoektermen voor kunnen vinden.

Is dit überhaupt mogelijk in Photoshop?

Kunnen jullie mij hiermee helpen, of iig een beetje op weg helpen?

[WernerL]

Volgens mij zijn de objecten op de website waar je naar linkt echt getekend..
En als het relatief eenvoudige objecten zijn heb je ze zo getraced in illustrator toch?

Maar afaik zitten er gewoon art filters in photoshop.

[yeehaw]

WernerL schreef op woensdag 09 juni 2010 @ 21:13:
Volgens mij zijn de objecten op de website waar je naar linkt echt getekend..
En als het relatief eenvoudige objecten zijn heb je ze zo getraced in illustrator toch?

Maar afaik zitten er gewoon art filters in photoshop.

Die art filters geven altijd lelijke effecten hier.

Verder heb ik niet zoveel ervaring met Illustrator. Zou je er na het tracen dan een getekend object van kunnen maken?

[teh_twisted]

je kan 't makkelijkst eerst in Photoshop het uitlichten, beetje met filters spelen dat 't wat duidelijkere lijnen krijgt en dan laten tracen in Illustrator en later in Photoshop het weer bijtekenen t.o.v. origineel.
Gaat je gewoon tijd/werk kosten

[yeehaw]

teh_twisted schreef op woensdag 09 juni 2010 @ 21:29:
je kan 't makkelijkst eerst in Photoshop het uitlichten, beetje met filters spelen dat 't wat duidelijkere lijnen krijgt en dan laten tracen in Illustrator en later in Photoshop het weer bijtekenen t.o.v. origineel.
Gaat je gewoon tijd/werk kosten

Ok, en ik maar hopen dat er een makkelijke manier was

Ik ga der morgen eens aan klussen.

Thx.

[Dark Blue]

yeehaw schreef op woensdag 09 juni 2010 @ 21:34:
Ok, en ik maar hopen dat er een makkelijke manier was

Nou, dat zijn je filters, want de 'lelijke effecten' krijg je alleen als je ze lompweg toepast op je afbeelding. Je moet er een beetje feeling mee krijgen en ze combineren. Juist dan leveren ze vaak nog wel een leuk plaatje op.

En naar die gemakkelijke manier zoekt iedereen hier, na een tijdje wen je wel aan de gang van zaken hier en komt de echte creativiteit in je boven! Dan schud je het zo uit je mouw.

yeehaw schreef op woensdag 09 juni 2010 @ 20:18:
Deze objecten zullen dan allemaal bewegen en aanklikbaar zijn(doormiddel van html5).

Ga nou niet af op het buzzword HTML5. Leer eerst eens wat HTML is, als je dat nog niet weet. HTML 5 is niet zoveel nieuws tov. 4 en het is zeker geen toverdoos waar je je plaatjes in gooit en er dan een fancy website uit krijgt . Begin desnoods eerst eens in Flash of Swisher, tot je echt de feeling van animerende objectjes, easing, voorgrond/achtergrond krijgt.

Om je toch nog 'n beetje met je actuele issues te helpen
- De objecten die je hebt gefotografeerd kunnen er atm wat 'bol' uitzien omdat je cameralens het beeld vervormt als je van heel dichtbij schiet. Met een lens correction (effect in Photoshop) kun je dat bolle er wat uit krijgen en ook wat van vignettering (zwart aan de hoeken) afkomen.
- Met een layer effect kun je al 1 ding doen. Kies een stroke, een zwarte of een donkergrijsbruine, zet 'm op 1 px. Als het effect niet mooi is: wegdoen. Alternatief voor zo'n kniprand is om een outer glow erop te zetten, blend mode op multiply of burn, of een drop shadow met een afstand van 0 en minieme waarden, zodat hij er recht onder blijft.
- Je foto kun je wat sketchier maken door een Noise -> Median te doen. Niet te sterk, want dan zijn je details weg.
- Dan het geknipte papier. Zoek op Google een plaatje van crumpled paper, iets van 800x800px. Copy/paste het in Photoshop en grayscale het. Met Levels kun je het contrast op een nette manier wat versterken.
Selecteer nu het ding en kies Edit - Define Pattern.
- In de layer effect over je knipsel kun je ook een 'pattern' effect instellen. Kies daarvoor je zojuist aangemaakte crumpled paper. Schaal het patroon 'n beetje tot het realistisch lijkt. Verander de opacity, en zet bijv. de blend mode op Overlay of Multiply.
- Met Hue/saturation kun je je plaatje nog wat grijziger maken.

Succes

[ Voor 37% gewijzigd door Dark Blue op 10-06-2010 11:27 ]

[yeehaw]

Dark Blue schreef op donderdag 10 juni 2010 @ 11:18:
[...]

Nou, dat zijn je filters, want de 'lelijke effecten' krijg je alleen als je ze lompweg toepast op je afbeelding. Je moet er een beetje feeling mee krijgen en ze combineren. Juist dan leveren ze vaak nog wel een leuk plaatje op.

En naar die gemakkelijke manier zoekt iedereen hier, na een tijdje wen je wel aan de gang van zaken hier en komt de echte creativiteit in je boven! Dan schud je het zo uit je mouw.


[...]

Ga nou niet af op het buzzword HTML5. Leer eerst eens wat HTML is, als je dat nog niet weet. HTML 5 is niet zoveel nieuws tov. 4 en het is zeker geen toverdoos waar je je plaatjes in gooit en er dan een fancy website uit krijgt . Begin desnoods eerst eens in Flash of Swisher, tot je echt de feeling van animerende objectjes, easing, voorgrond/achtergrond krijgt.

(X)HTML en CSS is voor mij geen probleem. Flash kan ik ook prima mee werken, echter probeer ik mee te gaan met de toekomst en alvast meer van HTML5 te leren.

Mijn slechte punt is echter de design kant. Ik kan wel een simpel layoutje in elkaar flansen in Photoshop, maar echt mooie dingen heb ik nog nooit gemaakt en daar probeer ik nu juist verandering in te brengen.

De website zal dan voor de browsers die html5 niet (voldoende) ondersteunen gewoon statisch zijn. De effecten die ik wil toepassen zijn vrij simpel en ik heb daar dan ook niet de uitgebreide flash functies voor nodig(denk ik).

Om je toch nog 'n beetje met je actuele issues te helpen
- De objecten die je hebt gefotografeerd kunnen er atm wat 'bol' uitzien omdat je cameralens het beeld vervormt als je van heel dichtbij schiet. Met een lens correction (effect in Photoshop) kun je dat bolle er wat uit krijgen en ook wat van vignettering (zwart aan de hoeken) afkomen.
- Met een layer effect kun je al 1 ding doen. Kies een stroke, een zwarte of een donkergrijsbruine, zet 'm op 1 px. Als het effect niet mooi is: wegdoen. Alternatief voor zo'n kniprand is om een outer glow erop te zetten, blend mode op multiply of burn, of een drop shadow met een afstand van 0 en minieme waarden, zodat hij er recht onder blijft.
- Je foto kun je wat sketchier maken door een Noise -> Median te doen. Niet te sterk, want dan zijn je details weg.
- Dan het geknipte papier. Zoek op Google een plaatje van crumpled paper, iets van 800x800px. Copy/paste het in Photoshop en grayscale het. Met Levels kun je het contrast op een nette manier wat versterken.
Selecteer nu het ding en kies Edit - Define Pattern.
- In de layer effect over je knipsel kun je ook een 'pattern' effect instellen. Kies daarvoor je zojuist aangemaakte crumpled paper. Schaal het patroon 'n beetje tot het realistisch lijkt. Verander de opacity, en zet bijv. de blend mode op Overlay of Multiply.
- Met Hue/saturation kun je je plaatje nog wat grijziger maken.

Succes

Bedankt voor de tips!

[ Voor 6% gewijzigd door yeehaw op 12-06-2010 00:55 ]

[Anoniem: 226971]

Twee woorden: Dodge and Burn

[Dark Blue]

Fiko... denk je serieus dat de ts met deze oneliner geholpen is?
Bovendien wordt het me op geen enkele manier duidelijk hoe de layer effecten (of brushes) dodge en burn zonder alle andere genoemde handelingen kunnen leiden tot een getekende look. Doe de volgende keer iets meer je best

[yeehaw]

Dark Blue schreef op dinsdag 15 juni 2010 @ 21:37:
Fiko... denk je serieus dat de ts met deze oneliner geholpen is?
Bovendien wordt het me op geen enkele manier duidelijk hoe de layer effecten (of brushes) dodge en burn zonder alle andere genoemde handelingen kunnen leiden tot een getekende look. Doe de volgende keer iets meer je best

Ik had inderdaad al even gekeken op Google, maar heb niet kunnen vinden hoe dit handig zou kunnen zijn. Verder heb ik waarschijnlijk pas van het weekend tijd om hieraan te beginnen :-/

[Dark Blue]

Het weekend is 'n zee van vrije tijd hè? Laat je nog even zien (dmv wat plaatjes) wat je resultaten zijn? Dat kan erg behulpzaam zijn voor volgende Tweakers die hetzelfde effect willen bereiken en jouw topic in de Search vinden.

[yeehaw]

Dark Blue schreef op dinsdag 15 juni 2010 @ 23:21:
Het weekend is 'n zee van vrije tijd hè? Laat je nog even zien (dmv wat plaatjes) wat je resultaten zijn? Dat kan erg behulpzaam zijn voor volgende Tweakers die hetzelfde effect willen bereiken en jouw topic in de Search vinden.

Ik ga er vandaag mee aan de slag en dinsdag is de deadline. Dus ik denk dat ik van het weekend wel wat heb om te laten zien.

Edit:

Ik heb eerst de methode van Dark Blue geprobeerd. Dit gaf helaas niet het gewenste effect.

Verder ben ik bezig geweest met de trace manier in Illustrator. Dit werkte inderdaad aardig en er kwam precies het juiste effect. Het punt is echter dat hij de objecten traced met veel te veel lijnen. Dit zorgt ervoor dat het hele onduidelijke resultaten worden. Dit heb ik proberen op te lossen in Photoshop, maar dit is me niet netjes gelukt.

Overigens heb ik ook met het aantal colors gespeeld bij de trace-opties in Illustrator

Voorbeeld: http://i47.tinypic.com/2wgahhv.jpg

Toen heb ik nog de volgende tutorial gevolgd: http://www.graphic-design.com/Photoshop/drawing/index.html

Hier kwam het volgende effect uit: http://i48.tinypic.com/2rwqnvb.jpg

Wat op zich heel aardig is, ik heb alleen geen idee hoe ik dit netjes in kan kleuren in de juiste kleurspectras.

Iemand verder nog tips?

[ Voor 49% gewijzigd door yeehaw op 18-06-2010 15:19 ]