Archive | Web Design Badges RSS feed for this section

Flash Animation Badge: Let’s Play Dress Up!

30 Apr
A simple dress up game was way more complicated than I anticipated

A simple dress up game was way more complicated than I anticipated

One thing that’s been on my personal bucket list for a while is to make a flash dress up game. I’m not entirely sure of the reason.  Maybe it’s because they are cute? Or I like customizing things? Regardless, I come across them a fair amount, and due to the sheer volume of them floating around online, I assumed they must be super quick and easy to make. WRONG.

The most time consuming part was making the actual artwork, which I had anticipated. I made the doll base and everything in the game in Adobe Illustrator. Having to save each object as an EPS, open it in Photoshop, save it as a PNG, them import it to Flash was downright obnoxious. I asked myself “Jeeze, someone should make like Photoshop actions for Windows 7 to do this crap for me. Hell I should do that. I would be rich.” Then I started mentally decorating my imaginary mansion…I digress.

I kept my game fairly simple: 3 different sets of ears, tails, faces, and outfit/accessory choices. I used Actionscript 2.0 (I tried 3.0, I promise, but I could not invest enough time to make it work). I made clothes/ears/tails drag-and-snap because I personally find trying to line things up by hand (or cursor?) to be a huge pain. Making them snap turned out to be much more simple than I expected.

For the actual process of building the game, I used a few different tutorials I found on DeviantArt. The first one I used was this one by KawaiiPandah, which provided a good basic overview, but has some holes in it (like providing code without too much description or explanation) if like me, you aren’t familiar with Adobe Flash. This tutorial by BonnieMcPop was much more clear, and probably the one I’d be most likely to recommend because it gives good explanations while being fairly concise. Lastly, I referenced Hapuriainen’s tutorial when I wanted a little more clarification. Hers is probably the most comprehensive, but was little bit of information overload for me.

So, by the time I was finished making all the objects, and coding them, I was just dead exhausted…hence the super plain background. To all the people who make super involved dress up games with elaborate backgrounds, music, tons of color choices, etc.: mad respect, bro.

You can play the dress up game here (where it’s the proper pretty size) or just get the file of the transmedia server here.

Responsive Web Design Badge

3 Apr
A desktop view of my artist portfolio site

A desktop view of my artist portfolio site

Responsive web design is without a doubt a huge trend right now, and something I figured would be a great skill to have. I proposed my own badge for responsive web design and it looks like it was a overall success.

For my responsive website, I made a generic online artist’s portfolio type site.

I really expected the coding process to be a struggle, but it really wasn’t nearly as horrible as I anticipated. Media queries were surprisingly simple, and using percentages and em as measurements rather than pixels just took some trial and error.

Continue reading

Wireframe Wizard Badge

21 Mar
Balsamiq makes hashing out plans both clean and fast

Balsamiq makes hashing out plans both clean and fast

After hearing the word “wireframe” come up several times in class, I figured it was something worth looking into. What surprised me was the simplicity of it. I’d already been doing this on my own, albeit in a less precise manner. I usually make some basic sketches of the basic layout I plan on making for a website before I mock it up in Photoshop, so all I really had to do was convert my messy sketches into cleaner products. I used Balsamiq to make my wireframes because it seemed the most straight forward (and I thought the style of it was just really cute too).

I made wireframes for my personal website,, which I redesigned over the past couple weeks. I really liked using Balsamiq, and I plan on using it for the (real) planning process in the future.

Minimalist Badge

20 Mar
My minimalist Silence of the Lambs poster focuses on the Death's-head Hawkmoth.

My minimalist Silence of the Lambs poster focuses on the Death’s-head Hawkmoth.

While I generally prefer clean, simple designs, I would hesitate to say that I’m a minimalist. I am very cautious to make sure my work is never too busy, but I find I need a little more than just the bare bones. White space is one of the things I find difficult to accept, and usually prefer to add subtle textures to avoid it.

For my Silence of the Lambs movie poster, I made the decision to use only the Death’s-head Hawkmoth from the original design, and only half of it at that. I used a distressed paper background to soften the starkness that the white space left. While I normally would have preferred to use a handwritten font, I chose Avril for its straight lines and slightly rounded corners as to contrast with the delicate paper and the moth without looking too “sharp.” While the names of the leading actors worked best evenly distributed horizontally from the center, I kept the title right-aligned as to nest into the negative space left by the moth.

My desktop wallpaper offers some motivation.

My desktop wallpaper offers some motivation.

For the desktop wallpaper, I decided to make a simple motivational “badge.” I used to have a wallpaper that simply read, “Don’t be stupid. Do your work,” so it was inspired by that blunt form of motivation. While I could have just used text alone, I felt that the final product would be completely boring without something to make the message a little more interesting. I kept the background completely white, which adheres more to the minimalist design principals than the poster.

While I do enjoy minimalist design, I tend to find that it actually give me more trouble because of the level of precision and exactness…and I’m pretty OCD as it is. When I know that all the focus is going to be on just a few details, the pressure for perfection is hard to ignore.

Domain Hosting Badge

11 Mar

My online portfolio

Oh domain hosting, how you hide your simplicity behind a cluster-cuss of obnoxious customer service.

I had purchased my domain ( several months ago through GoDaddy and built my online portfolio using Wix, which also hosted the site. For various reasons, I decided I wanted to scrap my Wix site and built an html site from scratch. Meaning, instead of being able to go about the normal process of purchasing a domain, finding a host, etc., I had to go through the rat race of transferring my domain to a new (less expensive) provider where I would also host my site.

I started the whole process by searching for general lists of web hosts which usually took the format of a top 10 list. I realized pretty quickly that I could get better options than what I could with GoDaddy, whose cheapest plan capped out disk space at 100GB. I ultimately decided on HostGator’s Hatchling Plan which ended up costing less than $5/month with unlimited disk space, bandwidth, etc. They also transferred my domain for free.

The actual process of transferring my domain was a bit of a hassle. I’m not sure if it was because I didn’t know what to except something else. My first request to transfer my domain was declined for some reason, so I had to go through customer support and have them re-initiate the transfer, which wasn’t as fast as I’d hoped. It took about 48 hours from the time I made my first request for a transfer to the time the transfers was complete. After that, I had to change my name servers so that my domain would no longer be connected to my old Wix site. That took about 24 hours to go into effect. Once that was complete, the process was simple though, as all I had to do was upload my files with Filezilla.

So far, everything is working great and I’m glad to have complete control over my site as opposed to with Wix’s interface.

A reflection on my time with the pen tool

1 Mar
In 2006, I was only using the pen tool to stroke my line art.

In 2006, I was only using the pen tool to stroke my line art.

I think I first started using the pen tool when I was around fourteen years old. At the time, I had already been using Photoshop for a couple years for illustrations and was frustrated with the less-than-perfect look of hand-drawn outlines I drew with my Wacom tablet. I wanted the line art to be pristine and perfect.

In 2007, I was using the pen tool in a different way, but still only for line art.

In 2007, I was using the pen tool in a different way, but still only for line art.

I searched online for line art tutorials and came across one that introduced the pen tool. I recall being incredibly confused by how it worked since I was only used to drawing in the traditional sense. I started experimenting with it and eventually got the hang of it. I initially only used it to stroke lines, but transitioned to filling paths to achieve the varied stroke weights I wanted. Looking back at my old work, it’s obvious that I was oblivious to more technical details. Furthermore, I was only using the pen tool for the outlines of my illustrations. I was still using the brush tool to color all of my images.

In 2012, I started using using the pen tool with vector masks for greater flexibility.

In 2012, I started using using the pen tool with vector masks for greater flexibility.

It was only a year ago that I started putting the pen tool’s potential to work by abandoning the brush tool all together and using it to make vector masks in Photoshop. Up until that point, I never had any need to resize my images because I rarely did anything with them once they were finished. When I started wanting to do more with my illustrations, it became painfully clear that I would need to be able to resize them and alter them.

When I finally got myself a copy of Illustrator this past November, I couldn’t help but kick myself for not taking notice of all it had to offer earlier. Everything was just so much easier and faster.

Several months ago, I started using Illustrator and the pen tool has never been better.

Several months ago, I started using Illustrator and the pen tool has never been better.

For the most part, I learned the pen tool through practice. I made more drawings that I could count. It really is one of those things that you can’t master unless you physically experiment with it and devote time to. For more nitty-gritty details, I found the book Vector Basic Training by Von Glitschka to be very informative. I have to say that the biggest help has definitely been the Xtream Path Illustrator plugin. It makes the whole process fast and intuitive, and allows for greater control over your paths. After the 15 day free trial, I had no regrets about spending the $140 for it.

I guess the reason I’ve never declared to hate the pen tool like so many people is because I felt it was the only way I could accomplish what I wanted to. I never spent time trying to resist it. I poured lots of time and energy into it, and I think it’s paid off immensely.

Be sure to check out my pen tool tutorial site.

CSS Framework Badge

7 Feb

Layout 1 | Layout 2 | Layout 3

For the CSS Framework Badge, I used the 960 CSS framework, specifically the 12 column framework. The first time I sat down to work on it, I opened the 960 zip file and just stared at my screen in horror. I went through Thomas Cannon’s article, “Using the 960 grid system as a design framework,” hoping it would make things magically fit together in my brain. Not so. I found his “tutorial” a bit ironic. One of the major benefits of the framework is that it eliminates a lot of tedious and precise coding, making the process of building a decent-looking website much more accessible to those who are new to coding. All I could think (or rather mentally scream) while reading Cannon’s instructions was “You say to do this but you don’t say HOW!?” Cue frustrated weeping, self-deprecating sputtering, etc.

Continue reading