heather ketten

For me, it’s a bit of a review – I used to maintain a personal website for fun when I was a teenager, back before Myspace and Facebook were a thing. 😉

One assignment to practice HTML and CSS is to modify a basic animal trading card:

After practicing with the example, I decided to take it a step further and try to make Pokemon cards using only HTML, CSS, and a few images.

The Code

The finished HTML for the structure of the cards and CSS for the style of the cards are both available on my GitHub.

Let’s see how it went.

CSS Breakdown

First, I broke down the overall page setup as well as a typical Pokemon card into components and thought about how the structure (HTML) and style (CSS) would work.

Overall div that represents the card – Defined with a class to have a gradient background, gold border, fixed height and width

Top table – 2 rows. Top row column span 3, bottom row 3 columns. 100% width.

Basic Pokemon – TD class sets bold text, font size 11.

Name of Pokemon – TD class sets bold text, font size 18.

HP – TD class sets bold red text, font size 20, text aligned to the right.

IMG – The type of the card contains a small image. A TD class aligns this to the center and fixes the width of this cell at 5%.

Image of Pokemon – 300px wide by 200px tall

Pokemon Vitals – P class sets 2px of padding from above image (so that drop shadow does not interfere). The background is a linear gradient from goldenrod to yellow to goldenrod. Font size is 11px, italic, bold, and aligned to center.

Attacks – Each attack has its own table. They are separated by simple horizontal rules.

IMG – The energy cost is an image. A TD class sets the width to 18%, and the image aligns to the center.

Attack 1 – A span class sets the font to bold size 16.

Description – A span class sets the font size to 11.

DMG – The damage uses a TD class. The text is bold and aligned to the right.

Weakness, Resistance, Retreat Cost – This is all contained in one table with 3 columns and 2 rows. The table has a class to set the text to size 11 and centered, and the table width to 100%.

Header row has a TR class to set the headers to bold text. This could also have been achieved by making the table’s class have bold text since the next row only has images.

Cost icons are images.

Description – A P class sets the text to centered bold italic at size 11. The entire paragraph is bordered by 3 px solid gold, with a rounded radius of 6px.

Illustrator, Copyright, Series – This is a P class that sets the font size to 11 and the text aligned to center. The HTML sets the Illustrator and Series to bold text.

Then I put the code together, testing and modifying it until the cards looked like the originals!

Results

Once the HTML and CSS were written, it was just a matter of filling in the card information and images.

Here are the cards in the browser:

And here are photos of the real cards (left) versus the CSS cards (right).

I intentionally changed a few things around (names of attacks, HP, etc.) to show that I really wrote the HTML and CSS for them and didn’t just use an image editing program to modify the card photos. 🙂

Takeaways

Once I had the HTML and the CSS written, it was very easy to make subsequent cards. I created a dual class for the background div that set the background gradient color as well as the gold border of the card. For different types of Pokemon, I created a different class for each gradient combination, and the HTML references the CSS class for the proper gradient, which saves a lot of coding time.

The card “guts” can just be copy and pasted into infinity. They reference the same CSS classes for every card (except for the background, as I just mentioned). If you’ve already made a bunch of cards and decide you want to change something about the style – no worries, just modify the CSS, and every card gets the new style with one edit.

The only things you need to update to make a new card are the images and text.

This project was extremely helpful in understanding the power of HTML and CSS working together. 🙂

“Geographitecture”

There’s a conversation I have with people a lot who ask about what I do and what I’m studying. It’s usually something like “why did you study geography?” and, after an explanation into the technical and design aspects of GIS and cartography, they ask something like “but then why would you go on to study architecture?”

The truth is, I didn’t initially planto study geography. To make a long story…

Basically, encaustics are “paintings” made out of melted wax. Fancy artists will probably tell you that this means expensive tools, beeswax wax, and special pigments. But really, any wax that melts and sticks to stuff works in my book.

Can you guess what a really cheap, colorful source of wax is?

Crayons!!

Yeah, there’s probably some drawbacks for long-term art display to using crayons. But for experimentation and fun, you really can’t beat the price of crayons.

A common, basic experiment in crayon encaustics is using hot glue to glue a row of them to a canvas, and heating them with a hair dryer until they melt into waves of pretty rainbow splashes. You can easily find hundreds of examples by searching for “melted crayon art” in your favorite search engine.

I decided to take this a step further and use different tools and techniques to create some more precise art than rainbow splatters. After some extensive experimentation, I was ready to use my skills for a local art challenge.

Metamorphose

Metamorphose is an annual art challenge in Eugene, Oregon, put on by St. Vincent de Paul. Artists are challenged to use reclaimed materials to create upcycled art. Traditionally, this has meant fashion, and the Metamorphose fashion show is an awesome place to find some awesome artists.

This year, it also meant a 2D show, using paintings and canvas prints to create new art – without simply painting over the entire canvas and creating something completely different. They also paired with the Materials Exchange Center for the Community Arts (MECCA), to give artists more support and a $10 gift card for additional supplies.

The piece I chose to work with was a canvas print by K. Kinman, called “The Boulders”. I was drawn in to the detail of the piece and the attention to light and shadow. It took me quite a while to figure out what to do with it. I knew I would have to add something to the piece to participate in the challenge, but what?

“I’m Bedazzled”

Well, for my $10, MECCA had a nudge for me to get started, in the form of a Bedazzler.

“You know you’ve always wanted a Bedazzler!”…you’re so right

I immediately took note of the colors of the Bedazzler “studs” and gems and the colors of the piece. I also noticed that my canvas print had a lot of foliage and flowers.

This was the result:

“You know you’ve always wanted a Bedazzler!” …you’re so right

But, as you can see from the bright green smudges, I’d already thought of how I could improve the piece with encaustics.

My plan went something like this:

Create borders between features with black glitter

Melt the encaustics within the borders so that it doesn’t spread everywhere

But “melting the encaustics” isn’t really as easy as it sounds. I have tried several methods myself without buying the tools specifically for the job.

There are pros and cons to every method.

Blow Dryers

Method: Use a blow dryer on the unwrapped crayons. The heat will melt the crayons eventually.

TIP: Use tape around the edges of your canvas to create a shield to prevent the crayons from being blown off the edges. Note that the heat can still deform the tape and some will inevitably escape and drip down the sides.

Pros: Melts the wax well, creates awesome blended colors and patterns, resulting melt is very smooth

Cons: Blow dryers blow the crayons and wax all over the place, often very messy

  Lighters

Method: Melt bits of unwrapped crayons by either holding the crayon and lighting it with a lighter, or lighting the crayon while it rests on the painting surface

Lighter-melted crayon wax on a slab of wood

Lighter-melted crayon wax on canvas

Pros: Much more controlled melt, easy to precisely blend colors into desired shapes

Cons: Dangerous! You are literally playing with fire. Many crayons (e.g. glitter crayons) have bits of metal in them. Different brands and colors can melt at different temperatures, making this unpredictable. Any remaining crayon wrappers will light on fire, and the painting surface (whether canvas, paper, wood, etc) will often light on fire as well. Additionally, it’s wasteful and expensive – you will use several lighters on one piece.

  Candles

Method: Instead of using lighters to light each piece of wax, light a candle. You can then use the candle’s flame to melt the wax, or rest a flame-safe metal bowl above the candle to melt wax inside of it. You can also use the candle wax on your painting. Why not?

Pros: Not as wasteful as using lighters. You can pick up slightly melted wax with metal tools (I used corn on the cob picks and paintbrushes I didn’t care about) and spread it around the canvas and “paint” this way.

Cons: Still extremely dangerous – crayon wax can start to bubble and smoke. Playing with an open flame. Metal bowl can still be dangerous and deform at the flame.

  Microwave?

Method: Use something as a mold (I used a plastic lid from a yogurt tub) and heat up bits of crayon wax on it in the microwave to create solid, yogurt tub lid-shaped chunks of melted wax. I then was planning to only have to melt the edges of the resulting piece of wax with a lighter to affix it to my art. This worked great for a “space” painting experiment, where I made a planet in the microwave.

Pros: Would probably work well with a beastly microwave

Cons: Bad idea with my microwave – actually caused it to activate the safety feature, shut itself off, and “cool down” for 2 days. Unknown danger of heating crayons in microwave on plastic yogurt tub lids.

  Oven?

Ovens definitely work to melt crayons. There’s a Martha Stewart recipe that’s been floating around for at least a decade about using ovens and muffin tins to make new crayons from old crayons.

You could probably use this method to create art (on some sort of oven-safe base) in one go, but I haven’t tried it yet.

  So what did I end up doing?

Well, let’s just say I used one of those methods in an unexpected way, to awesome results!

Ta-da!

  ** DISCLAIMER: Many of these techniques mentioned in this article are very dangerous. If you try them, this is at your own risk, and I am not responsible for any damage to you, your stuff, etc. **

CityEngine day 2 and 3

CityEngine, I quickly realized, is different from any other 3D program I had previously picked up. It merges the concepts of 3D drawing with GIS, sure, but it also has a scripting component – called “rules”, and using CGA script – that dictate how individual layers are displayed. Rule files can be saved to be applied later. But perhaps the most fun is tearing apart a rule file – like the ones…

Portfolio – March 2016

This portfolio was created for my application to the University of Oregon Master of Architecture program in March 2016.

An overview of my portfolio, table of contents, and a few projects

Urban sketching

Hand Drafting

3D Video Game Art

Rubicon Trail Map

GIS Work

Campus Operations

Spatial Modeling

Glass Sculpture

“Within”, recycled art

City Engine, day 1

I had been telling everyone I knew about how cool ESRI’s City Engine looked for a while.

“It’s got all these things where you can make 3D buildings and roads and change the windows procedurally and the land can be 3D and I don’t even know I just want to play with it!”

I probably sounded like an excited little kid.

Well, thankfully, I got about the coolest student job a girl could have. I work at…

‘Rubicon Trail scene’

ArcScene

2015

‘Blossom’

Flameworked borosilicate glass

1″ x 1″ x 1″

2015

‘Within’

High-density foam, crushed glass, crushed agate, acrylic paint, spray paint, nail polish, clear coat

2015

‘Giant Robot Burning City with Giant Magnifying Glass’

AutoCAD, Sculptris, Unity

2015

‘Thinking Place’

Markers

2012

‘Baby Bug’

Illustrator

2015