Amy

29 portraits in 29 days! Tomorrow I will draw my last one and I will win the challenge.

Amy is also in the book club.  Once, she hosted a meeting and nobody made it.  A bunch of girls canceled ahead, but there were still some who didn’t go and didn’t say anything. That was a first meeting for me that I couldn’t make.  Amy forgave us, she’s that nice. Actually one of my fears is that nobody will come to my party and it doesn’t go away till the first guest arrives and I can relax.  It happened to Amy. She sent us an e-mail afterwards telling us she was upset and the unbelievable part was that she apologized later for sending the previous e-mail.  Honestly she had the right to be mad, not upset.  She spent a whole day cleaning, planning, preparing and nobody showed up. She should have been furious.  She’s too good.

I realize now that I didn’t finish shading her hand… I was too focused on her face, where I think I made it a bit too crooked.  She does have a crooked smile in the photo I used for reference, but I think I might have exaggerated it too much.

Amy

Amy – 9″ x 12″ Pencils

Razvan

From grade 5 to grade 10, I was in the same class as Razvan.  Things were different in Romania.  We had the same 30 something classmates the whole time and the classroom belonged to us instead of the teacher’s, who would come to us.  I think that actually helped prevent the serious bulling that happens in North America. We were always together and got to know each other really well and care for each other. Of course, we weren’t always nice, but never like the way I saw a girl bullied here in Canada. I am sure there are lots of other factors involved that could have affected our behaviour towards each other.  I did go to a more “elitist” school in Romania than the local high school I went to in Canada, so maybe that was a bigger factor than the fact that I knew everyone so well, but still I never head of any stories from any other schools either.

Razvan had a lion once.  A real baby lion from the zoo.  I’m not sure how his family got to care for it, but it was orphaned, so the zoo gave it to them to take care while it was young.  Razvan came to school full of scratches for a while. Everyone in our class went to see it.  I never did.  I don’t remember why I couldn’t make it.  I did see it on TV though.  I saw it on the evening news being bottle fed by Razvan’s sister.  The baby lion didn’t make it though.  It died before it got to go back to the zoo. I could have seen it then, but I was afraid. As a child I had the biggest fear of dead things and unfortunately my aunts kept dying all around me and giving me nightmares.  Even though I refused to go to funerals after my first one, the dead aunts still came to my dreams.

razvan

Razvan – 9″x12″ Pencils

 

Other Artists

To become a better writer, one reads a lot. To become a better artist, I continuously seek other artists and their art. I find that this is the best way I can learn new techniques and get new ideas. Here are some contemporary artists whose sites I’ve encountered recently.

Richard MacDonald Richard MacDonaldSculpture/Graphics

There are very few artists’ sites on the web compared to sites on other topics and there are even fewer sculptors’ sites. Richard MacDonald’s sculptures celebrate the beauty of the human body in a way I haven’t seen done since Rodin. His characters can be strong and tough and yet poses a lot of grace. The slideshows of sculptures on his website, I can watch over and over again.

Tom Haney Tom HaneySculpture/Artifacts

I don’t know if I could call Tom Haney’s work sculptures. His art probably fits better in the artifacts category, but he does create 3D objects, so they do fit in the wider category of sculptures. He uses metal, wood, wires, electricity to create the most complex and ‘cute’ objects. Toys would be an appropriate word to describe them. They’re a show of creativity and ingenuity that’s rarely found. The best part is, they come to life too.

Ana Duncan Ana DuncanSculpture

Ana Duncan’s sculptures are a show of beautiful simplicity of form and complex themes. The female form is apparent in most of her work, stretched and pulled by gravity displaying softness and strength.

Ralph Heimans Ralph HeimansPainting

When I look at his paintings I have to remember to breathe. Each of Ralph Heimans’ paintings holds so much beauty and emotion it’s hard for me to look away. They are not just paintings, they all have a story to tell and I have to stay and see it through.

Dan Krall Dan KrallPainting

Here is an artist who really knows how to have fun. Dan Krall’s art can be equally enjoyed by a younger audience and a more mature one. A child would be attracted by the cartoon like drawings and rich colors, an older person would find and ponder the hidden messages.

David Reeves David ReevesPainting

For me, watercolors are a frightening medium, David Reeves is a god. I don’t remember seeing anywhere else so much control when it comes to watercolors as I’ve seen in his paintings. His paintings are an unbelievable show of mastery, but also of interesting and captivating subjects. He is  Canadian and his art celebrates Canada and its culture.

Ralph Goings Ralph GoingsPainting

I’ve never been much of a fan of realism. I’ve always thought that it would be easier to just take a photograph if the painting is not going to look any different, but on a closer look I cannot but admire the incredible skill and the patience involved in creating his paintings. Ralph Goings’ art embraces the American culture with its dinners and pickup trucks signifying freedom of movement.

Chris Buzelli Chris BuzelliPainting

I look at his paintings and I try to find the meaning, I think I understand what’s going on, but then I read the title and it’s like a bulb that goes on and I say “of course”. Often I’m very close to the original intention. He seems to find the most creative and intelligent way to represent anything. Chris Buzelli’s paintings are captivating and what I really like about them is that there are so many ways one can look at them and understand them. In a way, they are very personal to the viewer.

Melissa Moss Melissa MossPainting

Melissa Moss’ art is simply beautiful. Her paintings float me away to a simple world where there are no conflicts just peace and beauty. There is a calming quality to her art. I can’t help but remember a perfect day floating on a lake keeping my hand in the water over the boat’s edge and listening to the wind and birds and nothing else.

Rafal Olbinski Rafal OlbinskiPainting

Rafal Olbinski’s art is my kind of art. His level is where I aspire to get. His art stretches the bounds of the imagination, creating a marvelous new universe.

Jovi Schnell Jovi SchnellPainting

Some of Jovi Schnell’s works look like drawings for a science project, one of those where a ball travels from one end of the construction to the other and on the way it sets off a triggers to light bulbs, open traps, pull levers, set off another ball. One has to stop and see where the maze ends. Her paintings have a poster like quality to them, being created with flat colors and simple lines, but they are also extremely inventive and wacky.

Duy Huynh Duy HuynhPainting

I find Duy Huynh’s work to be quite melancholic, somber. His paintings often have a single person in them in a surreal landscape and to me they talk about the fact that we are all alone on our journey. We might get help at some point or other, but in the end, we’re by ourselves.

How to Slice Your Photoshop Design for the Web

EDIT on January 2013: The strange thing is that this is my most popular blog post and this website is really not a How To site, but a personal site about my art.  Anyway, I wrote this post a long time ago and some of the info is outdated and the entire post is not that clear, so I rewrote this info here: http://www.franciart.com/wordpress/how-to-slice-and-save-images-in-photoshop-for-the-web/

Before a site is coded, it is most likely designed first in Photoshop, or some other software. If it’s another program, hopefully this tutorial will still show you how to minimize the amount of images on a webpage.

What is slicing and what is it good for? First, if you have ever wanted just part of a bigger image and the only way you were able to get that was by cropping the image, then you should read this tutorial. Photoshop slicing allows you to select the part of the image you want and then save it separate from the rest. The best part is that you can do this with multiple slices at the same time. It is useful for web development, because it allows you to plan out the site in whole and decide which images will be links and which will be just static images and which will not be images at all, but replaced by HTML and CSS.

Very often during my web browsing, I notice web pages that have images for objects that could have been easily done with CSS. For example, you do not need an image for a solid (one color) background since that can be filled out (colored) in CSS. More specific, you have a logo on a solid background, you do not need have an image bigger than the logo.

For the design below, I can see right away that I will not need to use images for the right panel and the center panel backgrounds because they are solid colors. To get the color code for those colors, in Photoshop, I use the Eyedropper Tool (see image below) to select the colors and then I open the Color Picker Window (by clicking on the Foreground Color in the Tools Window).

page layout  eyedropper tool  set_foreground_color.jpg

color picker window

In this case the right panel has #9bcefd as background. In CSS it will look like this:

div#rightPanel {background-color: #9bcefd;}

If the design is all ready you can start slicing. I am assuming here that you are slightly familiar with the basic HTML tags and basic CSS.

  1. Solid background

    For the design above, let’s assume the background of the banner was a solid color.

    banner with solid background

    Pressing “K” in Photoshop you’ll get the slice tool. You have two of them. One for slicing, the “Slice Tool”, one for selecting and adjusting slices, the “Slice Select Tool”. Zooming in I sliced the logo. Then I switched to the “Slice Select Tool” and double clicked on the slice to bring up the “Slice Options”. I have renamed the slice to “logo” and now I can save just the sliced image. File>Save For Web will bring up a window that will allow you to select just the slices you want to save. If you want to code this yourself, make sure you select to save “Images Only” in the “Save as Type” box.

    slice example

    Now that I have my image, the HTML will look something like this:


    <div id=”banner”>
    <a href=”/”><img src=”/images/logo.jpg” alt=”the name of my website” border=”0”></a></div>

    I usually like to have the logo link back to the home page, hence the link.

    The alt tag is very important, leave it without any value, but never leave it out if you want to have valid HTML. The text in the alt tag is the text that appears if the image is broken or missing.

    The CSS will look something like this:

    div#banner {width: 962px; height: 142px; background: #069; padding: 10px 0 0 20px;}

    Padding, margins and borders have to be subtracted from the width and height in div tags, not so for td tags. So for the example above the actual width is 962px + 20px = 982px. Margins are on the outside of a div (block), the padding is inside.

    You can declare the padding for all the sides in one line:

    padding: top right bottom left;

    padding margin

    If you want the padding to be the same all around you only need to have padding: ###px; or if the padding is the same for the top and bottom and the same for left and right you can write it like this: padding: ###px ###px; It’s the same with margins.

    return to top

  2. Gradient background

    If you have an image on top of a gradient you only need to slice a small sliver of the gradient and then the image.

    banner with gradient background

    Because the gradient does not go across the entire banner, I didn’t need to cut a slice that goes all the way across.

    example of gradient slice

    The HTML looks the same as in the example above, the CSS changes like this:

    div#banner {width: 962px; height: 142px; background: #069 url(/images/banner_gradient.jpg) top right repeat-y;}

    The top and right coordinates for the url can be replaced with percentages, in this case 0 and 100%, or with pixels, 0 and 962px. The repeat-y repeats the slice up and down, repeat-x would repeat it left right and no-repeat, would not repeat it at all.

    return to top

  3. Navigation

    Every menu (navigation bar) is basically a list of elements.

    Listamatic website lists every kind of navigation a designer might come up with and how to code it.

  4. Borders and Rounded Corners

    Borders should be straight out CSS. The code below will add a gray 1px border to an element with attribute class=”mybox”.

    .mybox { border: 1px solid #ccc;}

    For a box with rounded corners and no border you only need four images, one for each corner.

    slice_solid_corner.jpg

    There are two ways to code this box, one is with tables and one is using divs. I will show the divs way because it’s the newer way to do things and the harder way too.

    One way to code this using divs is to use five of them and put them all one inside the other. The first one (outer div) will set the width and the background color. Each of the nested divs will add a corner and the most inner div will set the padding and any other styles the content inside the rounded corners box will have.

    CSS

    .background {width: 200px; background-color: red;}.top_left_corner {background: red url(top_left_corner.jpg) 0 0 no-repeat;}.top_right_corner {background: red url(top_right_corner.jpg) 100% 0 no-repeat;}

    .bottom_left_corner {background: red url(bottom_left_corner.jpg) 0 100% no-repeat;}

    .bottom_right_corner {background: red url(bottom_right_corner.jpg) 100% 100% no-repeat; padding: 5px;}

    HTML

    <div class=”background”><div class=”top_left_corner”><div class=”top_right_corner”>

    <div class=”bottom_left_corner”>

    <div class=”bottom_right_corner”>

    <!– content goes in here–>

    </div>

    </div>

    </div>

    </div>

    </div>

    For a box with rounded corners and a border you need eight images unless you really want to complicate your life and risk having your borders and corners misalign. To the example above you’d need to add four extra images (one for each side) and four extra divs. In this case, I would actually use a table, the code ends up being much cleaner.

    Of course if your box is always going to be the exact same width you can always just get a slice for the top and one for the bottom and solve your problem in three divs. Having the corners divided like this creates a more flexible box that can be used for different widths across the website. If you get even more advanced you can write yourself a JavaScript of PHP function which you could call like this: drawRoundedCornerBox(mycontent, width).

Michelle

Michelle is the only person who actually asked me to draw her.  She’s really nice, she likes my art, so I like her back.  It always scares me to draw someone on request.  Somehow I feel really bad if it doesn’t come out well.  If it’s a bad one and the person didn’t ask for it, then I think they don’t care either way, but I have a feeling that someone who asks for one, expects something somewhat flattering.  I could be wrong.  I wonder if the reaction someone gets at seeing their drawn face, is the same as hearing your own recorded voice for the first time.

I love the huge hand in this picture.  That’s probably my favourite part about it and I’m glad it came out well.  I got the hair right, Michelle has crazy hair, but it’s hard to tell it’s her.  I picked this pose because of the hands, but I got screwed at the blowing lips.

michelle

Michelle – 9″x12″ Pencils

Laura

I used to work with Laura, a really smart girl and probably the youngest VP I know.  The photo of her that I picked had really interesting light coming from a window behind her. I think I was able to render that.  I’m not too sure about the eyes.  One was way bigger, I made it smaller, but it still feels big.

Laura

Laura – 9″x12″ Pencils

Tom

I used two different photos for this drawing.  One for the head and one for the guitar.  I notice now that the head is a bit too big. Oops. I shouldn’t have done the guitar, that wasn’t fun… I think I went crazy trying to count all the strings and lines on it.  I gave up in the end and don’t care if it’s not accurate.

Tom used to be my boss.  I learned a lot of PHP from him. He’s one of the smartest guys I know. He sat next to me for a while and he always hummed. I bet he still does it.

Tom

Tom
9″x12″ Pencils

 

Swami

Swami and I worked together about four years ago. He’s a designer and one of the better ones I’ve had a chance to work with.  At the time I worked with him, I drew portraits of my coworkers, but I never got a chance to draw Swami, so here he is now.  It doesn’t quite look like him.  I’m not sure if it’s because the photo I drew from wasn’t exactly right, or because I’ve done something wrong.  It’s probably my fault.  I picked to do this because it had hands in it and I wanted to practise drawing hands more.  The photo is a bit blurry.  My camera died right after taking this photo.

Swami

Swami
9″x12″ Pencils