Saturday, May 16, 2009

Again, Line Art and Illustrated Look

Due to Mas Suryaden's question here, I really tickled to reset it down. This is still engaged to the advance tutorial in about to make a vector image. But this time... it's a quite different. If on that tutorial, I utilized Shape Layers as selection on Pen Tool (P) -meaning your beautiful image is closed trace- a part quotient, and this time, a bit different I think, I utilize Path as selection for Pen Tool (P). It means, that image no longer enclosed coloration thoroughly, but... you are free to use this amazing Pen Tool (P) as an Opened Shape.

I will give you today this magnifique lesson about how to create a stylized illustrated look from a photograph, remember that, from a photograph. The best part is that it requires no artistic ability! You can do this to any photo and pretty much any subject, but I think it works best with people.


Step One:

This time, I use this awesome pic from www.thesun.co.uk. OK now, create a new layer and fill it with White. Above that layer, create a new blank layer by hitting the New Layer Button at the bottom of the layer palette. Name that layer Basic Shapes. Turn both of those layers off.

Image Hosted by UploadHouse.com



Step Two:

This is it! We are going to use the Pen Tool (P) to trace all of the basic structural elements of the image, it will be the outline of the body and the outlines of the clothes.

If you don't get how to use Pen Tool (P), you should check this Energy Beams first or simply click here to find about the Vector thing out!

Image Hosted by UploadHouse.com


With the Pen Tool (P) selected, simply click anywhere you would like to start, I mean anywhere...! Continue to click and drag to trace the part you are working on with the path. To make it look more like a sketch, we are going to use a lot of small paths rather than trace the whole thing with one long path.

Here are a few shots of how I traced my image:



See..?!?!?

A common misconception is that a path needs to be a loop. Not true. We are going to use all open paths in this tutorial.


Step Three:

Turn on your white layer and your blank layer. Select the blank layer.



Image Hosted by UploadHouse.com

On your gready paths palette, drag your work path down to the New Path button at the bottom of the palette to save it.
Image Hosted by UploadHouse.com

After that... Select the Brush Tool (B) and open the Brushes Palette
by going to Menu > Window > Brushes or you guys could simply press F5 from your PC.


Isn't that simple?!?!? OK.. Select now any round, hard brush preset.



Under the Brush Tip Shape section, modify the brush to create a thin ellipse by bringing the roundness down to 12%. Make the angle 45 degrees.



Turn on the Shape Dynamics section bring the Size Jitter to 100, the Minimum diameter to 35, and the Angle Jitter to 5. Do some experiment on this step... it's quite fun if you did that with a glass of hot chocolate besides, lol.



With the blank layer still selected, hit D to make black your foreground color then right/control + click on the path and choose Stroke Path. Make sure that Simulate Pressure is checked and use Brush as your source. Hit OK. You might have to adjust the Master Diameter in the brushes palette if the lines are too thin or thick. It depends on how big your image size is ofcourse.




Repeat steps 2 and 3 a few more times, the more detail you trace, the thinner you should set the Master Diameter on the brushes palette. Each time you do a pass, make sure to apply the stroke onto a new layer. Remember about tons of layers I usually said when making something in Photoshop? Use Layers!



Step Four:

Now that we have the outlines, let's paint in some color. Copy the layer that contains your photograph (Background Layer). Put the duplicate image at the top, above all the other layers. Set the Blending Mode to Color. (that's the tricky part actually... without this step... just go to hell!)




Hit B for the Brush Tool. In the Brushes palette set the Brush Angle to -45 degrees and turn off the Shape Dynamics. Make the brush a bit larger.

Make a New Blank Layer (Shortcut : Shift + Ctrl + N) and call it Paint (...or whatever you'd like..!). Make sure that it's below all of your outline layers. Make sure that your foreground color is still set to Black (it's also the tricky part of this such amazing tut).

In the properties bar, set the Opacity of the brush to about 5 - 10%. Very roughly paint in the color where you want it. Be sure to release the mouse every now and then so that the color begins to multiply over itself. Don't worry about staying in the lines too much. Just do the best you can. Lol...

So far.. your Palette Layer should be like this ;



or not??? I don't give a damn! Lmao! Kidding!


Step Five:

Hit E for the Eraser Tool. Set the eraser brush up the same way that we did the paint brush. Make the eraser brush's Opacity is at 40 - 50% or even under. Now go back and tidy up your paint job. I like it when you can still slightly see the paint going over the lines.




Step Seven:

Create another New Blank Layer below the Paint layer. Call it BG Image. Hit the Brush Tool (B) again and make the master diameter huge. Mine is at 200. or sometimes, I like use it in 2500 (don't try this if you're not so sure about that, lol) with just one click on my damn image. That's it! You guys could set it totally different with mine ofcourse.. With the brush opacitie's at 5% do a few really broad strokes across the whole image just to bring in a little color to the background.

...and this is my final image ;





Satisfied?!!?!

Other samples of this tut!

Read also : How to use this amazing Pen Tool and do not miss about this Vektor with Photoshop!


63 comments:

  1. wah pesenan kang surya ya
    kalo pake program aplikasi pembuat sketsa bisa ga ya?

    ReplyDelete
  2. pesenan langsung sii ngga... cma tergelitik aja ngangkat masalah ini sekali lagihh :)

    huaaa... aplikasi pembuat sketsa?!??!
    kasii tau saiia kang, itu apaaaaaaa?!?!?!

    ReplyDelete
  3. keren hasilnya kang..
    TFS :)

    ReplyDelete
  4. pernah baca dimajalah ch.. (ntar dikira iklan) ada aplikasi gratisan yg bisa mbuat sketsa dari gambar/photo. cuma lupa namanya dan majalah no berapa.

    ReplyDelete
  5. @ kakara : dimonggo kang :)
    @ attayaya : “Photo to Cartoon v4.08“ atawa "Sketch v3.2" pastinya kang iia??? wahh klu itu, saya pun baru tau dari akangnya... makasih infonya, saya jd pingin tau :)

    ReplyDelete
  6. sy gak pake 'headlines today' dn panel krn sering macet.sy sndiri org baru di dunia blog,gak ngerti knp srg macet.makanya,hapus aja.
    tp panelnya abang jalan lancar.selalu lancar spt ini ya?gmn caranya?

    ReplyDelete
  7. wih rapih line artnya ;)

    tapi mata kadang pegel nyari kontur gambar, apalagi monitor dudutz, hrs dikontrasin/brightness kali yah kang biar agak terang gitu :D

    ReplyDelete
  8. @ karumbu : waktu pertama kali pasang sii emang... malah gk pernah jln... tp akhirnya lancar... musti di panasin dulu kalee ia kang biar lancar kek motor pagi2 mo brangkat gawe gtu :) hihihihi...

    @ gdenarayana : bener banged kang... tp biasanya saiia ngelakuin itu di finishing touchnya... seneng bgt klu udah sampe finishing touch.. terserah kita mau gmn... heheheh...

    ReplyDelete
  9. Ih, kok keren jadinya, Nel ..??
    Bikinin gue dong, bikinin foto gue dijadiin kaya' gitu dunk
    :)
    Pleaseee ...

    ReplyDelete
  10. sy jg ga tau namanya (si JS itu).asal pasang aja.mengkhawatirkan gimana bang?bahaya yah?!kalo bahaya biar ta' delet aja.

    ReplyDelete
  11. makasih banyak bang sarannya.i wanna follow u,but how?

    ReplyDelete
  12. ini akang yg di panggil Rae kah?!?!?

    ReplyDelete
  13. ooo bukan iiahh :(
    hehehhehh... iya deyh :)
    saiia off duluan iaapp guys :)
    thnx for all :)

    ReplyDelete
  14. haaaaaa yg ada nama sketch gitu deh kalo ga salah

    ReplyDelete
  15. hallo thanks for visiting our blog, please sign in at follow frind conect

    ReplyDelete
  16. selalu ada yang baru kalo main kesini padahal lamaaa banget gak mampir....tak save yo kang

    ReplyDelete
  17. kunjungan persahabatan di mlm hari,
    blog content yg bagus...

    ReplyDelete
  18. lho bang fiko minta di oret2

    ReplyDelete
  19. mampir numpang nyontek ya om?? :) twew..

    ReplyDelete
  20. hai mas, pa kabar?

    keren nih postnya, coba2 ah ^^

    ReplyDelete
  21. postinganya mantab terus nihh...

    ReplyDelete
  22. alhamdulillah kalo bener, berarti gue ga dodong-dodong amadh dalam berbahasa inggris...

    awardnya udah gue liadh kok...

    ReplyDelete
  23. asik asik.. ada tutorial baru..

    ReplyDelete
  24. gambrnya keren tp tutornya gila...puyeng xi xi xi...

    ReplyDelete
  25. Adakah hubungan sukses dengan komunikasi? Temukan jawabannya..

    ReplyDelete
  26. wah sudah barang tentu itu sii mas :) maksih udah berkunjung :)

    ReplyDelete
  27. thnx to you too Manajemen Dakwah :)

    ReplyDelete
  28. hey! I think..i will come often here.. you seem to be giving tips on drawing. adobe etc... today i dont have time.. but will explore this weekend. Goood job done!!

    ReplyDelete
  29. great to see you here Sir... you are very welcome... and i'll wait 'till that time then :)

    ReplyDelete
  30. What a wonderful job you've done sir.
    Wow, I believe can order to you someday for my blog logo.
    Have fun and great success for you, my friend.

    Cheers, frizzy.

    ReplyDelete
  31. Hi I think without searching on the net by good luck alone I have come to a site which I needed long ago! Since I take photos and also use ADOBE.. I needed help long ago.. now I will follow thi site and see what oyu say.. but two things :-
    1. Question.. do we need to have some pentool instead of a mouse or mouse enough to use adobe all features? I never could trace withmy mouse [i uselaptop touchpad] the body outline perfectly ao long..
    2. suggestion. why not have some index or content on your blog? then we could acess the needed post easily?

    Great Job!

    ReplyDelete
  32. Hi again :-)

    I am asking some basic questions..

    .. Today being a Sunday I tried my hand in this. But a few doubts:-
    1. What does a work path do? I did that in step 3 but never understood why it was needed.

    2. I completed all my tracing in step-2 itself and so I also did not understand why step 2 & 3 you told us to repeat? I think I have not understood the use of step 3 so am in doubt. I am talkig about the work path thing. Pls note that this is the first time I am using Adobe for its real use. Earlier I used it only to edit the photos -curve tool mostly.

    3. In step 3 I also did not understand what you meant by Right?Control+Click. I did

    4. In step-3 I also did not understand the use of brushes. What does it do?

    5. I did not find the use of the last layer for background.. i created the layer like u said,, and painted it.. on the layer window i cld see the colour appearing but not on the main window itself as long as this layer was below the paint layer.. but only when I was moving above paint layer.. oops! now i rbr.. maybe I shld have made the paint layer less than 100% opaque?

    by the way without brush techinque and this last layer I did the thing.. and is looking GREAT! Thnx for teaching.. but pls clarify the above I think i will otherwise miss something. sply the work path and the brush thing in step-3.
    thnx!

    LOL!!

    ReplyDelete
  33. naww! my dear... though I am seeing the pen lines on the PSD file.. when I am trying to save as JPEG.. only the colour is coming.. but not the lines!!.. How do I get that?

    ReplyDelete
  34. Really appreciate that Jakarta SPA and thnx for comin' here.

    @ Shantanu : what a question Sir!!!

    I'm gonna 'welcome' you first to PSD-Holic or FCDB right here before we continue... tons of probs? Calmez-vous monsieur!

    OK.. please be seated and make your self comfortable... we're gonna talk about this amazing tool. 1st, you're talking about a pen. A real pen that we could easily use for drawing with this adobe photoshop thing, right? Nowadays, there is a tool like what you've said called Wacom Tablet.

    Adobe Photoshop is specifically designed to be used with a Wacom pen tablet. Pen pressure, pen tilt, and even the airbrush's finger-wheel can control attributes like opacity, size, color, and exposure. With a Wacom pen, you have the power to dynamically control Photoshop's tools in the most natural and intuitive way possible.

    I'm not using that thing acdtually, 'coz you know... i ain't got that... lol... a mouse is enuf for me.

    2nd... index and content of this blog... Sir, I have to tell you something... this is a new template for me and you're not the one who confuse how navigate all this content of blog... i my self doubt about keeping this template.. i have no idea how to find my preview post, las page, or even my fourth note there... geeezz....

    ReplyDelete
  35. 1. Work Path ; paths, which is a useful Photoshop tool for working with and saving selections. Although working with paths brings you into contact with the sometimes complex Pen tool, the combined power of these two tools makes them important additions to your Photoshop skill set.

    some handy Photoshop tools that are often overlooked or misunderstood, either because they’re hidden away or because their use isn’t immediately apparent. Yet these tools provide smart and useful ways to perform various tasks in Photoshop, so they’re worthy of adding to your Photoshop skill list.

    2. When creating line art you want to vary to thickness of the line (line weight). Varying the line weight emphasizes the perspective of the drawing. As lines become closer the viewers the lines get thicker. Lines taper towards the furtherest part of the object.

    That's way i suggest you to repeat that steps in condition you wanna get your line vary (use different size of brush ofcourse).

    3. Right + Click or Control + Click on the path and choose Stroke Path. This way needed to choose your Path come up unto your workflow, then change the Path into 'what ever you want' by Right Clicking the mouse, hold your Control Key in the sametime Click it on stage or whatever you name it... see your question next about 'why Brush?' Here you can choose anything you want, experiment on that, it's fun!

    4. I did answer that.

    5. That's way I told you to turn your Brush Opacity in about 5-10%...

    6. Saving prob??? I didn't see any obstacle when i have to change this tons of layers into JPEG format... simply open file menu, save as or Shift + Ctrl + S or do what i use to do by hitting Shift + Ctrl + Alt + S, that's the easiest way i use to be without flatten the Layers or something.

    About the Path... at its simplest... a Photoshop path is a line with anchor points at either end. It can be a straight line or it can be curved, depending on how you create it. More-complex paths are made up of multiple segments, each with an anchor point at either end. You can have an open path or you can close the path so the anchor point at the end is created over the top of the first anchor point, thus closing the shape.

    ReplyDelete
  36. Hi!! Hey thanks a tonne! for so much explanation! Not everybody does this! Of course I now need to understand what you said but with exploration I am sure I will be able to grasp what you said.

    I am now wondering why my pen lines do not get saved!! It is as if my stroke paths are just paths but no lines exist in actual. That is why my jpeg file does not show the lines. How to convrt my paths into lines? I think that should be my question.

    The jpeg file gets created but with only the filled colours not the traced lines.

    I do havea tablet APTEK one (bought from Singapore long ago) but it will probably not work on XP.. I hv to check. I am working with mouse only.

    Thanks once again!!

    ReplyDelete
  37. Oops!! I GOT IT! I did this.

    With the layer where the paths were drawn with the pen tool (I drew around the body outlines and dress outline etc as you did) and rest of the layers off, including the original photo layer off, I went to 'paths' Tab and then clicked the "path-1" thumbnail that was already created yesterday. Then just clicked the second icon at the bottom from left "Stroke Path with Brush" AND LO & BEHOLD! The paths got the colour from the foreground colour.which by the way can be anything . and now when I saved as Jpeg I got the lines.. Hellooo!! Good blog you have! It got me started!!.
    Keep giving more ideas!!
    :D

    ReplyDelete
  38. ohh hhooo!! Now one more I did.. and this time I saw what I did wrong last time.. I had missed switching off the white and blank levels when i used the pen in step-2 and in step-3 when I click thing was not done properly by me, hence instead of just lines along the paths sections were appearing like your vector diagram and the face was getting cut etc.. (which by itself is ok.. somewhat like your step-2 samples on vectors).. but now when I clicked rightly the lines appeared and when I saved as jpeg the lines were still there .. yooo hoo!

    Pls chk this...
    http://indiathroughmyphotoblog.blogspot.com/2009/06/fashion-sketch-1.html

    Merci Beaucoup!!

    ReplyDelete
  39. de rien monsieur de rien!!!
    i'm happy now after this long visit.. finally i can see one of your result.. and this is gorgeous!!!

    three thumbsup for you!

    Monsieur... pardonnez-moi, parce que je dois dormir... maintenant c'est 4:45 am...

    arrivederci!

    ReplyDelete
  40. Blog sampean g ada duanya:p
    Ohya thanks ud mampir ke blog sy. Btw msh ada tempat bwt tukeran link? ditunggu konfirmasinya:)

    ReplyDelete
  41. jarang banget nemukan konten blog yang total tutorial seperti ini. langsung follow yah

    ReplyDelete
  42. @ Shantanu : you are very welcome brow :)
    @ ^kacong^ + TRIMATRA : sudah banrang tentu masih tersedia seluas2nya kang :) tapi iia itu td, spt yg sudah saiia konfirmasi.. mungkin baru bisa nanti di atas jam 12an... koneksi payah sepayah orangnya nii kang :( hehehehe...

    terimakasih atas kedatangan akang berdua di tempat ini :)

    ReplyDelete
  43. kereeeen euuuuyyy...

    mau donk photo ella dibikin sketsa gitu hehhehe

    ella follow yaa blognya dan add linknya ^_^

    ReplyDelete
  44. Sobat link sampeyan udah terpasang. Cek di link sahabat ya. Salam kenal... Siomay tolong dianter ke blog sy:))

    ReplyDelete
  45. kreen euuyy..
    aku nda bisa bikin kaya 9ituh.. :(

    ReplyDelete
  46. tipsnya manjur banget...sering2 nulis kayak gini yah ya...

    ReplyDelete
  47. bagus....bagus....LANJUTKAN!!!!

    ReplyDelete
  48. @ Susy Ella : makasih iia ella :) aQ lagi nyoba2 tu fotonya ella, tp anehnya knp gag kelar2 iia??!?!? huakakakaka... kalah sama blogwalking kek nya :( maaf iia :) nti klu emang beneran jd... tek kabari yoo :)

    @ ^kacong^ : salam kenal juga mas :) link mas nya juga udah bertengger di sini :) sila di cek di Get connected yg ada di hlmn muka

    @ wi3nd : bsa ajja nii wi3nd :( pan kita sama2 wee :P

    @ TRIMATRA : terimakasih jika emang bener2 majur spt yg akangnya bilang... pastinya saiia akan terus berusaha update postingan yg sehubungan dengan PS kang :)

    @ tejo : go go power ranger!!!

    ReplyDelete
  49. salam kenal juga :) makasih udah mo mampir :)

    ReplyDelete
  50. Thank you . To all participant, please have a look at our updated contest post.
    more templates easy to download

    ReplyDelete
  51. hey!! why am I not finding the comment page on your blog

    http://6raphic.blogspot.com/2009/10/electric-texture-for-your-image.html#comments

    I find your blog template too confusing for my dull brain.. never know where to look .. though I would really like NOT to miss a single post dear!!

    And I wanted to ask you.. where do I get a good crack? adobe cs 4 i mean ? hehe!! asking is not illegal i hope!!

    ReplyDelete
  52. Luckily I got this earlier comment reply saved in my email so just clicked "post comment" and commented.. but how to find it on your posts?

    ReplyDelete
  53. just click the 'line art' label on my side bar... then you can find this entry sir :)

    ReplyDelete

When you gotta go, you gotta go! Throw it all away HERE! Lmao!