Baby Shoes

I went to a baby shower today and I made these cute little shoes this morning. I can’t really say how long they took to make because I was constantly interrupted by my son, but they turned out to be easier to make than I thought.

Baby Shoes. Flannel

Baby Shoes. Flannel.

 

Excuses

I’ve been gone for a while, but I painted a cat today.  Summer was nice.  Just came back from Oregon.  Things I’ve learned during the trip: do not travel with a toddler and when it rains, Oregon beaches are just like British Columbia beaches — one wonders why the bother, we could have stayed at home.  We were all so depressed after a rainy day spent listening to a bored child whine that  when I saw a corner store I said “Stop the car. We’re making a fire on the beach”.  My “husband” (we’re not really married, but I’ll call him that since he’s the father or my child) said “Suit yourself”. I walked into the store. “What do I need to make a fire?” I asked the clerk. He looked at me funny. “Outside?” he asked as his eyes traveled to the window were rain drops were sliding happily down. “Yep” I said. “See that stack of newspapers?” he said “They’re free. Normally you’d only need one. I suggest you take a stack.” He sold me some dry wood and a lighter and before I left the store he gave me a fire-starter. “If nothing else, the paper and this will burn” he said. The rain stopped for the most part by the time we got to the beach and we did manage to get a very nice fire that cheered us all up.  Too bad I didn’t think of buying something to cook on that fire.  If you look at our pictures, we had a fantastic time, but really, there was nothing relaxing about this vacation.

Pink Cat

Pink Cat

Getting Ready for Valentine’s Day

Tomorrow I’ll take these paintings to the store and I’ll find out if any of the other ones have sold. I’m honestly a bit nervous about that. I know I’ll be disappointed if nothing sold, but also glad to keep them. No, I want them to sell. These paintings come with stories.

Elephant Love

Luna and Sebastian 8.5″ x 11″ Watercolour
Once upon a time there was an elephant named Luna, who lived at a zoo in South Africa. One day a boy, Daniel, started volunteering at the zoo. He loved the elephant and brought her mangoes every day. Daniel noticed that even though the elephant was happy with the mangoes, she was lonely, so he convinced the zookeeper to find a friend for Luna. At the San Diego zoo, the zookeeper found another lonely elephant named Sebastian and brought him in. This is a painting of the two happy, no longer lonely, elephants: Luna and Sebastian.

Lion in Love

Lion in Love 8.5″ x 11″ Watercolour
Here is Mchumba, the African lion. He worked as an extra on Disney’s Lion King for a while, but he never got any screen time, though he had a lot of fun on set. This lion is hopelessly romantic and always in love with everyone he meets. I bet he’s going to fall in love with you too.

Zuri and Zola

Zuri and Zola 8.5″ x 11″ Watercolour
One day Zuri, the giraffe, heard a cry for help. He looked down to where the sound was coming from. That was something he didn’t do very often since he mostly looked up for leaves in trees all day long. Close by he saw a pit. He went to the edge of it and inside he noticed a rabbit scrambling to get out. Zuri lowered his head into the pit and allowed the rabbit to climb out onto his long neck. The rabbit was so grateful, he gave Zuri a carrot, which was indeed a rare treat. As Zuri was about to bite into the carrot, Zola, the beautiful giraffe, stole it and ran away. Zuri, more intrigued and amused than upset, followed Zola around for days, but she always managed to evade him. In the end, Zuri asked the rabbit for another carrot and the rabbit was more than happy to oblige. Zola came right over and this time, they shared the carrot. Zuri and Zola have been together since.

 

How to Slice and Save Images in Photoshop for the Web

Definition of a Photoshop slice: a Photoshop slice is a part of a bigger image.  So, if you have a big image, which is usually the case with designs for websites, you want to be able to “slice” that big image into multiple smaller images that will each have a different role on the website.

Step by step

  • Press “K” in Photoshop to 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”.
  • Slice the part of the image you want.
  • Zoom in.
  • Switch to the “Slice Select Tool”
  • Click on your slice and adjust it by dragging on the corners and edges.
  • Double click on the slice to bring up the “Slice Options”.
  • Rename the slice to “whatever you want” and now you 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. (Keep “Control” key down as you select the slices you want to save.)
  • If you don’t want any HTML pages, make sure you select to save “Images Only” in the “Save as Type” box.

Hints on how to minimize the amount of images your website has

  • Don’t slice any solid backgrounds. If your image has a lot of solid background, slice only the image part and set the background using CSS.
  • You only need a sliver (1px width or height depending on the direction) for a gradient, which can be repeated with CSS.
  • Any solid borders should just be done with CSS.
  • The text on links, should never be images, it makes them hard to change and they’re some of the things that are most often modified.

Bits of HTML and CSS code for your images

  • Here’s the code to make an image into a link. (It’s a good idea to set the border=”0” for your linked images in case someone still has some ancient browser.  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.)

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

  • Not really about images, but a good thing to check for when things don’t align properly: padding, margins and borders have to be subtracted from the width and height in div tags, not so for td tags.
  • Example CSS for a gradient that goes from right to left:

div#gradient {

width: 900px;

height: 140px;

background: blue url(/images/banner_gradient.jpg) top right repeat-y;}

  • For old times sake, because you can do all of this now with just CSS, here’s how to do rounded corners retro style:

 

For a box with rounded corners and no border you only need four images, one for each corner. Check out the slices :).

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 (EDIT: this was written back in year 2006) 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. 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).

 

 

The New Theatre

I’ve go blisters on my hands and my back is sore from putting this thing together, but now I can’t wait to paint this and even use my oil paints again.  I should really have read the instructions before putting hinges in, I’m not a man!  I failed to read the instructions that said to drill a hole before screwing, and I swore and broke my hands and kicked and almost gave up.  Everything went so much smoother after I bothered to read the directions. Lesson learned. Hopefully.

Puppet Show Theatre

Puppet Show Theatre