Previous Posts

- درس في التشويه (اموت على التشويه ) الدرس اجنبي
- العاهره الصغيره
- تمبلات كامله
- درس إنشاء تأثير نزيف الدم
- وفاة الداعية الإسلامي أحمد ديدات ـ رحمه الله
- الستايل الرابع لموقعي الشخصي :)
- Logo Design Studio V1.6.22 العملاق لصناعة الشعارات...
- من يمين ومن شمال
- فن راقي :)
- بعض الصور والتصاميم
 

 

Archives

- June 2005

- July 2005

- August 2005

- September 2005

- October 2005

- November 2005

- December 2005

 

 

Links

se3loah

meeesho

saudiblog

crazyretiree

web-crazyretiree

Friday, August 19, 2005


Making a painting - Basic workflow

 

درس في التجميل يصلح للبنوتات الشينات
:)~~~


This
tutorial describes my workflow of making a painting step by step. No focus on
details like how to paint hair or eyes. Look for this later in other upcoming
tutorials I am currently working on that will be added to this site.



I use Photoshop 7 with a Wacom Intuos tablet for all my paintings. The
resolution is usually 300dpi, but the size varies. Make sure you have an idea
for the size before starting. 300dpi is important to use if you are going to
print this professionally. 200dpi is fine for lower quality prints, and 72dpi is
for screen use only.

 


I usually
start off by making a perfect grid in a separate layer of my reference photo. In
places I need some extra attention (like faces) I make the grid even denser. The
grid is an old trick to help keeping proportions in place, and works just as
fine on digital art as on the traditional medium.







Then I copy this grid into a blank window in Photoshop, and start sketching the
rough base for the main character on a separate layer behind the grid. By using
the grid, I really don´t have to think too much about what I´m drawing, but all
I have to do is draw what I see on the reference photo, square by square. Some
may not like this way of sketching, but as an artist who appreciates making
real-life looking paintings, this is a great tool to get the proportions in
place.

 


 


Now I
delete the grid on the reference photo, as I have a rough outlined base on my
other window. I also delete the grid on my drawing, and add a new layer which is
50% grey behind the outlined sketch layer.








Then I use
the brush tool with low pressure (1-5%) and with a sharp edged brush (the sharp
round ball, not the fluffy one) with a dense spacing (The "Brushes" window,
Brush Tip Shape, Spacing (4-7%)). I paint on the 50% grey layer, and by looking
at the reference photo I start off painting the shadows and dark areas, and the
high lighted and bright areas. By having black and white chosen as the
back/foreground colours you can toggle this by pressing "X" in Photoshop.
Some times I use the eyedropper tool to pick middle values if the black or white
gets too harsh.



I continue with this until I have a decent, grey scaled, rough base drawing.

 


Still
working on the grey scale version, I sometimes use the smudge tool to refine
details like around the eyes, or for the hair. This tool is perfect for the base
for the hair. By starting off with some really rough dark strokes, and some
white strokes on the highlights of the hair (picture to the left), it looks ok
pretty fast if you smudge this out and shape it using the smudge tool (picture
to the right). Drag the smudge tool in the direction of the hair, and play
around with the strengt of the tool for the different purposes. Trying out
different brusher might be a good idea as well.







At this stage I also collapse this layer with the outlined sketch layer. By
using both small brushes and picking colours with the eye dropper tool and/or
the smudge tool, the outlines can be erased or smudged out.



Before going any further I always flip the painting horizontally to fix errors
in proportions. This old trick should be used every now and then. You might turn
"blind" from looking at the same painting for hours, and by flipping it you see
errors immediately.

 


At this
stage I delete the area around the character as everything has been painted in
the same layer, and there´s several ways of doing this. I simply use the eraser
tool in Photoshop with a huge brush and remove everything around quite roughly
(left side of the picture) before I go up close with a smaller brush with a
slight softness to it to erase the outlines (right side of the picture).







Sometimes it is clever to choose a flashy colour (bright yellow for instance)
for the background placed in a new layer behind to see if the clipping is ok, or
if you missed some spots. Around hair I usually use a larger, soft brush, and
use the smudge tool to "re-paint" the hair around the edge.

 


Having a
grey scaled base, it´s now time to add some basic colours. First I activate the
layer with the character, and tint the entire layer in one base colour as close
to skin colour as possible (the picture to the left). (ctrl+U, and tick
off "tint" and adjust colour and saturation).







Then I make sure I don't paint outside the clipped layer-object, and tick off
the "Lock transparent pixels" options, which is to be found at the top of the
layers window (It says "lock:, and then the square with the transparency grid in
it").



Then I use the brush tool with a higher pressure (20-70%) to apply the different
colours on the different main elements of the character. Like a different colour
on the dress, different colour on the eyeballs, the centre of the eyes, the
hair, teeth etc. (the picture to the right, note the eyes, lips and dress)



I also make sure to get a feeling about the "ambient colour" and the color of
the "main light source" of the painting at this stage. I want the ambient colour
to be slightly blue (the dominant colour in the room that reflects and
illuminates on dark areas). I make sure to use cold, blue colors in shadows and
dark places. The main light source is slighly more yellow, so I make sure I use
some more yellow. On this painting I don´t want to have any bright colour on the
light souce, so I am toning down the yellow colour. I use ctrl+B to
adjust the dark (ambient) colours and the hightlight (main light source) colours
as well.



With the "Lock transparent pixels" still enabled, I now change the settings of
my brush into low pressure (1-4%) and with the "colour mode" enabled onto the
brush. Now I add the different skin tones, red on areas like the nose, cheeks,
forehead, knuckles, knees etc. "Warm" places on the body, or places that are
exposed to sun. In some areas the skin is thin and almost transparent, and the
veins are visible through and tints the skin in a blue-ish colour, or even maybe
purple some places. Some places the skin may look yellow, or even green. Look at
the reference photo (or yourself up close), and try to sort out the different
skin tones and overdo it slightly.







After applying the basic skin tones this way, I usually turn my brush back to
"normal" mode, and fiddle around with the eyedropper tool and fix things that
looks weird.

 


At this
stage I start thinking of what I would like the painting to look like. I change
the canvas size and move the character around until I think it will balance
nicely.







I also start drawing some rough strokes for the background on a separate layer
behind the main character.

 


Now I
paint the background using the same technique as the shading of the character. I
may start adding colour earlier in the process, but this varies form painting to
painting. On this painting I used brown colour in stead of grey scale. I added
the wood patterns first, and then used a soft brush with "multiply" mode enabled
to make sure I didn´t paint over the patterns on the floor. The smudge tool
helped me alot for the patterns.







It is very important that you keep consistency in direction of light and
shadows, so make sure you look at the main character when doing this to make
them look as if they belong in the same scene.

 


When I add
colours for the background I think of the colours I decided in "Step 5". I want
the ambient colour to be blue, so I adjust the colours more towards blue on the
darkest areas, and for the "sky". The main light source has a slightly more
yellow colour, so I make sure I use this as well. I use ctrl+B to adjust
colours differently in dark areas and on high lights.







Having the same "ambient color", "main light source colour" and the direction of
the light the same on the main element and the background makes the painting
come together.

 


When I´m
satisfied with the painting I add a new layer on top of everything else and use
a soft brush with white colour and low pressure (1-4%) to apply a soft glow to
the bright areas in the painting. This to soften the overall impression, and
make it appear more real.







High lights in eyes, metal, skin, etc. should be softened up with a large, soft
brush. Note that the girls shoulder on the right side has got a vague, soft,
glow. This noise really helps, but should be used moderately not to be used too
much as it will appear more disturbing than soft.

 




 

posted by ashkal at 9:30 PM
link | 2 comments

 

 

2 Comments:

Blogger Meeshosaur commented at 8:07 AM~  

يا حبك للاهانات يا اشكال .. خخخخخخ .. ذحين كل البنات اكيد حفظوا الدرس من قلوبهم .. خخخخ

والله الصورة النهائية .. فظييييعة .. ولا كنت اتوقع انهم يصمم هالاشكال من اشكال ناس حقيقية .. تسلم وعلى الدرس .. وإلى الامام ..

Blogger ashkal commented at 2:24 PM~  

هلابك والله ميشو
موب اهانات والله بس من جد يصلح لشينات :|
مثلك انا بعد انصدمت لما شفت النتيجه بالفعل كان الشكل خيالي مقارنه بالشكل الاول والصوره الاساسيه
شاكر لك مرورك :)

Want to Post a Comment?

back to main page



<body><!-- --><div id="flagi" style="visibility:hidden; position:absolute;" onmouseover="showDrop()" onmouseout="hideDrop()"><div id="flagtop"></div><div id="top-filler"></div><div id="flagi-body">Notify Blogger about objectionable content.<br /><a href="http://help.blogger.com/bin/answer.py?answer=1200"> What does this mean? </a> </div></div><div id="b-navbar"><a href="http://www.blogger.com/" id="b-logo" title="Go to Blogger.com"><img src="http://www.blogger.com/img/navbar/3/logobar.gif" alt="Blogger" width="80" height="24" /></a><form id="b-search" name="b-search" action="http://search.blogger.com/"><div id="b-more"><a href="http://www.blogger.com/" id="b-getorpost"><img src="http://www.blogger.com/img/navbar/3/btn_getblog.gif" alt="Get your own blog" width="112" height="15" /></a><a id="flagButton" style="display:none;" href="javascript:toggleFlag();" onmouseover="showDrop()" onmouseout="hideDrop()"><img src="http://www.blogger.com/img/navbar/3/flag.gif" name="flag" alt="Flag Blog" width="55" height="15" /></a><a href="http://www.blogger.com/redirect/next_blog.pyra?navBar=true" id="b-next"><img src="http://www.blogger.com/img/navbar/3/btn_nextblog.gif" alt="Next blog" width="72" height="15" /></a></div><div id="b-this"><input type="text" id="b-query" name="as_q" /><input type="hidden" name="ie" value="UTF-8" /><input type="hidden" name="ui" value="blg" /><input type="hidden" name="bl_url" value="ashkal.blogspot.com" /><input type="image" src="http://www.blogger.com/img/navbar/3/btn_search_this.gif" alt="Search This Blog" id="b-searchbtn" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='ashkal.blogspot.com'" /><input type="image" src="http://www.blogger.com/img/navbar/3/btn_search_all.gif" alt="Search All Blogs" value="Search" id="b-searchallbtn" title="Search all blogs with Google Blog Search" onclick="document.forms['b-search'].bl_url.value=''" /><a href="javascript:BlogThis();" id="b-blogthis">BlogThis!</a></div></form></div><script type="text/javascript"><!-- var ID = 13797608;var HATE_INTERSTITIAL_COOKIE_NAME = 'dismissedInterstitial';var FLAG_COOKIE_NAME = 'flaggedBlog';var FLAG_BLOG_URL = 'http://www.blogger.com/flag-blog.g?nav=3&toFlag=' + ID;var UNFLAG_BLOG_URL = 'http://www.blogger.com/unflag-blog.g?nav=3&toFlag=' + ID;var FLAG_IMAGE_URL = 'http://www.blogger.com/img/navbar/3/flag.gif';var UNFLAG_IMAGE_URL = 'http://www.blogger.com/img/navbar/3/unflag.gif';var ncHasFlagged = false;var servletTarget = new Image(); function BlogThis() {Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) { Q=y.getSelection();} else if (x.getSelection) { Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes');void(0);} function blogspotInit() {initFlag();} function hasFlagged() {return getCookie(FLAG_COOKIE_NAME) || ncHasFlagged;} function toggleFlag() {var date = new Date();var id = 13797608;if (hasFlagged()) {removeCookie(FLAG_COOKIE_NAME);servletTarget.src = UNFLAG_BLOG_URL + '&d=' + date.getTime();document.images['flag'].src = FLAG_IMAGE_URL;ncHasFlagged = false;} else { setBlogspotCookie(FLAG_COOKIE_NAME, 'true');servletTarget.src = FLAG_BLOG_URL + '&d=' + date.getTime();document.images['flag'].src = UNFLAG_IMAGE_URL;ncHasFlagged = true;}} function initFlag() {document.getElementById('flagButton').style.display = 'inline';if (hasFlagged()) {document.images['flag'].src = UNFLAG_IMAGE_URL;} else {document.images['flag'].src = FLAG_IMAGE_URL;}} function showDrop() {if (!hasFlagged()) {document.getElementById('flagi').style.visibility = 'visible';}} function hideDrop() {document.getElementById('flagi').style.visibility = 'hidden';} function setBlogspotCookie(name, val) {var expire = new Date((new Date()).getTime() + 5 * 24 * 60 * 60 * 1000);var path = '/';setCookie(name, val, null, expire, path, null);} function removeCookie(name){var expire = new Date((new Date()).getTime() - 1000); setCookie(name,'',null,expire,'/',null);} --></script><script type="text/javascript"> blogspotInit();</script><div id="space-for-ie"></div>