RSS

What is Gouache? (Rhymes with Squash)

It’s Sort of Like Watercolor

Gouache is a paint that is similar to watercolor. What makes it different from watercolor is that it can sustain greater value. In other words, you can paint more layers of gouache to get darker shades of a color.

Since it is a water-color type paint, it’s used on heavier paper. It works really well on watercolor paper, but bond paper also works.

What can it do?

Today was the first time I had used gouache, so I’m still learning what kind of paintings this media is good for producing. Since it is paint, it’s good for fluid drawings. In my art studio class, we’re using it to study line and line quality. It’s good for that because the lines that gouache painting creates have a nice natural variation. Also, gouache works well in layers, so you can paint a line several times.

One thing I noticed while painting in gouache was that you have to be careful to let layers of paint dry before going over them again. If you go over a line too soon, to say, make it darker, you can accidentally get splotches of spreading paint.

 
Leave a comment

Posted by on September 19, 2011 in Art

 

Beginning Sketching

Beginning Sketching

Drawing Studio: Day 2: Beginning Sketching

How to Start: Go from general to specific

  • draw lightly first
  • draw all of the shapes first
  • draw shapes, not details
  • don’t shade yet

It’s near impossible to get a drawing right the very first time you put pencil to paper. The key is in revision. Draw a few lines, look at what you are drawing, measure it, check the proportions, then go back and make changes if you need to. These techniques for sketching help because they make it easier to change and adjust lines.

Proportion

  • use your pencil to measure proportion (holding arm stiff while doing so)
  • choose an object/part of an object and measure everything else against it

My Drawings

The Subject

A Plaster of a Man's Head and Torso, wearing a velvet "Mad hatter" style hat

A Plaster of a Man's Head and Torso, wearing a velvet "Mad hatter" style hat

Day 1

Sketch of a man wearing a mad-hatter style velvet hat

The drawing I did on the first day of class. This was before any instruction, just as a warmup.

On the first day, still rusty with my sketching, I started drawing without doing too much thinking. I sketched out the general shapes first, but when I was frustrated with them, I worked on detail instead. This was a bad choice: I just dug myself into a deeper and deeper hole; as I added more detail to the drawing, it became more and more difficult to change it and correct lines I had drawn early on.

Day 2

Sketch of a man's head and torso

The sketch I did on the second day of class, doing my best to adhere to the advice above.

My second day’s sketch went better. I spent much more time working on the basic shapes and proportions before I added any extra lines or shading. My perception of the shapes and proportions was still imperfect, but the general to specific approach of sketching definitely helped. Another piece of useful advice (random): the need to establish a center line– a vertical reference point as well as a horizontal one. At first I only drew ellipses (ovals) and lines to get the shape of the torso. My professor advised me to add center lines through the face and torso to help with the proportions and to use as guides for where to place the other lines. Take it or leave it, it worked for me.

 
Leave a comment

Posted by on September 1, 2011 in Art, Classes, Uncategorized

 

How to embed .mov videos in an HTML page

I’m still new at web programming, so today was the first time that I wrote code to embed a video into an html webpage. Being fairly clueless about how to do this, I looked to Google. After several searches, I was still confused. I read about the new HTML5 video standards, but they weren’t that relevant: the site that I’m working on gets most of it’s traffic from users of outdated versions of IE (hooray!).

Anyway, I looked around and finally found a working example and a helpful post about how to resize .mov videos.

This is what I ended up with:

<div class="embeddedVideo">
	<object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' 
		width="600" height="400" 
		codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
		<param name='src' value="assets/videos/movie.mov">
		<param name='autoplay' value="false">
		<param name='controller' value="true">
		<param name='loop' value="false">
		
		<embed src="assets/videos/movie.mov" width="600" height="400" 
		scale="tofit" autoplay="false" 
		controller="true" loop="false" bgcolor="#000000" 
		pluginspage='http://www.apple.com/quicktime/download/'>
		</embed>
	</object> 	
</div>

The code is pretty generic. I’ll probably use it for other videos and only change the value (places where it currently says assets/videos/movie.mov), width, and height variables. I know there are better ways to go about this– using newer HTML5 standards, for instance. But to just get the video up on the page, this worked for me.

 
1 Comment

Posted by on July 8, 2011 in Programming, Web development

 

Tags: , , , ,

a href to the Current Page

The answer: don’t href, use <a name=”foo”> instead

Today I was making lefthand navigation for my current project. I wanted to make a collapsing side menu (an accordion like this one. The menu is basically a list within a list, structured like so:

Menu

Submenu 1

Page Link

Page Link

Submenu 2

Page Link

It was surprisingly challenging to translate this to HTML though. The trouble was mainly that, in my initial html, I didn’t know what tags to wrap the Submenus in: they aren’t active links. I considered headers, but headers can’t exhibit the behavior of links (<a> tags), at least as far as I know. It’s common to put <a href=”#”> as a placeholder for a link that doesn’t go anywhere, but when I did that the link ended up redirecting to the root directory of my site. Besides, using an <a href> for a link that doesn’t actually go anywhere didn’t seem particularly semantic. So what to do?

My solution was to simply make the Submenu <a href> tags, <a name> tags instead. <a name> tags are meant to provide hooks into the html– a way to link to a location on the same page. They’re often used for indices that appear at the top of a web page. Using an <a name> tag works because the tag is not meant to link to another page. It behaves like an <a href> tag and can be styled as one, but it doesn’t redirect the user to another page.

In the end, my html looked like this:

<div id="sideNav">

	<ul id="sideMenu">

			<!-- first submenu -->
			<li>
				<a name="MenuHeader1">Menu Category 1</a>
				<ul>
					<li>
						<a href = http://site.com/1 >Topic 1</a>
					</li>

					<li>
						<a href = http://site.com/2 >Topic 2</a>
					</li>

					<li>
						<a href = http://site.com/3 >Topic 3</a>
					</li>

				</ul>
			</li>

			<!-- second submenu -->

			<li>
				<a name="MenuHeader2">Menu Category 2</a>
				<ul>
					<li>
						<a href = http://site.com/10 >Topic 10</a>
					</li>

					<li>
						<a href = http://site.com/20 >Topic 20</a>
					</li>

					<li>
						<a href = http://site.com/30 >Topic 30</a>
					</li>

				</ul>
			</li>

		</ul>
</div>
 
Leave a comment

Posted by on July 7, 2011 in Uncategorized

 

Tags:

Make Notepad++ A Little Less Cluttered

Remove the toolbar in Notepad++

Notepad++ is a great, free IDE for Windows. Unfortunately, its user interface is not exactly stunning. The icons in the toolbar at the top, for example, are as cryptic as Ancient Egyptian hieroglyphs. Since I don’t use the toolbar anyway, I figured out how to get rid of the toolbar and leave the text editor looking a bit cleaner.

Here goes:

We start with ugly notepad++:

Notepad++ with a not-that-useful, not-that pretty toolbar at the top.

 

Then we go to the Settings menu and select Preferences. In the dialogue that appears, the General tab should be selected by default. To the left side of the box, there are options to configure the toolbar. Check the box that says “Hide”.

Preferences menu to hide the toolbar.

Close the dialogue box and there you go, a cleaner looking Notepad++.

 
2 Comments

Posted by on July 7, 2011 in Programming, Software

 

Tags: , ,

How to enable syntax highlighting for LESS in Notepad++

After doing a fair bit of searching over several days, I found a way to enable syntax highlighting for the LESS CSS programming language in my text editor of choice, Notepad++. The real key here was finding this page, which lists countless user-defined language files for Notepad++. From there, you can download the LESS.js file. It is an XML file. Once you’ve downloaded that, simply open up Notepad++, go into the View menu,  then click User-Defined Dialogue. That will make a dialogue box pop up. Toward the top of the box, there’s a button that says Import… click it and select the LESS XML file that you downloaded. Close the window, and go to a .less file. Go into the Languages menu, and you should see LESS at the bottom of the list.  After you click on it, the .less file you have open should show proper syntax highlighting.

One issue I ran into with this is that the LESS escape character, ~ is not included in the language file download. Luckily, this is easy to fix by returning to the User-Defined Dialogue box. In the dialogue box, underneath the Operators tab, check the box that says “Enable escape character”, and type “~” into the adjacent text box. Voila!

One other thing: since this is a user defined language, if you are using a style other than the default style in Notepad++, the highlighting will look strange; all the text will be highlighted in white (it looks weird against a black background). I haven’t found a way around this yet, and am just using the Default Notepad++ style when I’m working on .less files.

 
21 Comments

Posted by on July 7, 2011 in Programming, Software, Uncategorized

 

Tags: , , , ,

 
Follow

Get every new post delivered to your Inbox.