Ben Dunkle’s Blog

You might also want to check out
Field 2, my design consultancy | My teaching website

Nov 14th
2013

Hard to get into new music

There’s so much great music out there, but I can’t really find any. Problem is, the times in my life when I really discovered music were when I had a little peer pressure –  high school, college, working in an office – and the people around me would play stuff, make me listen to stuff, that at first sounded like dirt but after a few listens and seeing how enthusiastic the proponents were, I’d get into it and start listening on my own. Nowadays, there’s no impetus to listen to a new song more than once, even if someone suggests it on Facebook or Spotify. I need a music pusher.

Oct 16th
2013

The good old days of 25¢ video games

Once upon a time I was an arcade junkie. I would dump quarter upon quarter trying to understand the inner workings of the most beautiful machines I knew of, these arcade consoles. But I never had enough money.
My cousin Paul dinardo, apparently, did, as he pwned the high-score in tempest (the greatest video game ever) in Virginia Beach, circa 1980. He was also an amazing athlete, like the rest of the DiNardos.

Oct 16th
2013

Life

For me, life is seeing. Drawing is regurgitation.

Sep 26th
2013

Chubby design

You heard it here first, folks. The next big thing in cutting-edge design is hereby being dubbed “chubby” design.
What is chubby?
Bursting at the seams
Easy/inviting to touch/rub
The opposite of all this hyperthin helvetica apple rolled out with ios 7
Get the first unapologetic chubby design today – the chubbies icon font: https://github.com/field2/chubbies

Sep 24th
2013

Eli playing tuba

20130924-181024.jpg

Sep 21st
2013

Easy BBQ Chicken

Ingredients:

1 chicken, cut into 8 pieces, or whatever bone-in chicken you have laying around

1 bottle of your favorite BBQ sauce

———-

Start the grill.

Dump the bottle of sauce in a pot. Fill the bottle with water, shake it up, pour into the pot.

When it’s boiling, add the chicken. Cook for 20-25 minutes or sostirring occasionally,  until the chicken starts to fall of the bone a little.

Throw the chicken on the cooler side of the grill, if you can do indirect heat, otherwise make sure the grill is on low. You don’t want it to stick.

Brush some of the sauce on the chicken and cover. Wait a bit, brush more sauce on, wash, rinse, repeat until there’s like 1/4 of the original sauce left in the pot, and the chicken has some nice chariness/crispiness to it.

Throw the chicken back in the pot to coat w/the sauce and serve.

Sep 20th
2013

Intellectual property

So I think our DMA grads could be better suited to pursue IP law than any other program’s grads in the country.

Sep 9th
2013

Typehunting

20130909-145258.jpg20130909-145224.jpg

A couple cool type stuffies I got at a yard sale.

 

Sep 7th
2013

Filmo

20130907-223408.jpg

Sep 5th
2013

On WordPress as a career skill

WordPress is quickly becoming an essential skill for people in a wide variety of industries. Therefore, it’s imperative that educational institutions prepare graduates to manage, maintain, develop and design WordPress powered sites, blogs and apps. Soon we’ll see WP listed as a requirement on as many job listings as MS-Office, and students should confidently be including WordPress on their resumes.

Sep 2nd
2013

facebook icons

Hey FaceBook, fill in the status icon: photo

Aug 1st
2013

Thoughts on WordCamp San Francisco 2013

Have to say this was my best WC yet. First the bad:

  • I left my phone on the beach the first day. Thankfully someone found it and called my hotel, but I spent the whole evening trekking it across SF getting it back.
  • I wanted soo bad to take SouthWestern up on a delay for travel voucher, but just couldn’t bring myself to do it. Next time!
  • I forgot my business cards.
  • I forgot my laptop power cord.
  • I brought shorts.
  • I totally screwed up my travel plans by not extending my stay through Sunday, and thus missing out on contributor day. What is wrong with me? This was by far the biggest screw-up of the trip.

Now the good:

A few thoughts:

  • It was really well organized.
  • The amount of love for and pride in people’s connection with WP was everywhere. It’s just amazing to see a piece of technology have such a strong connection with the people who use it.
  • The sponsors were almost all hosting companies. Not that I have anything against it, but I would like to see more premium plugins sponsoring. Gravity Forms, iThemes, you heard me!
  • The Mosser Hotel is a great little place to stay, and half the price of anything around. Yeah, you have to share a bath and toilet with your floor, but c’mon people, stop being so pampered!
  • Matt Mullenweg is truly an amazing speaker. The challenge of putting a year’s worth of full-throttle development of one of the fastest growing technologies on the planet into a one hour presentation must be daunting. But he pulls it off every time. It’s fun to try and read into some of the stuff he says.

Maybe the most loaded topic was on WordPress as an app framework. WP as a foundation to build on is a controversial topic, and faces a ton of skepticism and criticism. WordPress will outgrow itself, it’s getting too big, it’s losing touch with the simplicity of just writing, etc. are all sentiments that seem to be all the rage these days, but it’s hard to go to one of these giant WordCamps and not feel confident that the WP world will always remain a truly user-focused, community-driven, open source, and free.

 

Jun 5th
2013

Posts to facebook and twitter

I’m researching plugins that will auto-post to FB and Twitter accounts. Most plugins force you to create facebook “apps” to do the FB thing, a process that I despise. This one is called “social”, and it apparently doesn’t require an app.  I’ll report my findings at the next Buffalo WordPress Users meetup tomorrow evening. If you haven’t joined the meetup group yet, what are you waiting for? It’s free! http://www.meetup.com/Buffalo-Wordpress/

Jun 5th
2013

Dirty Shrimp Risotto Recipe

Made this last night, easy and quick, mmm. This is a great way to cook shrimp as it’s hard to overcook them, and they absorb all the flavors of the rice. I call it “Dirty” rice because this batch ended up with a nice grey-brown color, but YMMV…

Ingredients:

  • 1 bag frozen, EZ-Peel shrimp, 24-30 count (preferable western hemisphere like Belize)
  • 1 cup rice (I used Jasmine, anything should work)
  • 2 cups chicken stock
  • 2 tbsp white wine
  • 1 peeled carrot
  • 1/2 peeled red onion
  • 3-4 cloves peeled garlic
  • 1 stalk celery
  • 1 Jalapeño pepper
  •  2 tsp. black peppercorns
  • 1 tsp.  caraway seeds
  • 1 tsp. sea salt
  • 1 tsp. ground cayenne pepper
  • 2 tbsp. oil of your choice

Rinse the shrimp briefly under cold water and allow to thaw. The bag says run continuously under cold water until thaw. Great advice;  way to conserve water. When they’re ready, peel off and chuck the skins.

Dice the veggies into small pieces.

Mortar/pestle the spices into a coarse mixture.

Heat up the oil in a heavy pot on medium-low heat. Let the oil get really hot, then throw in the veggies. Stir them until they caramelize.

Pour in white wine to de-glaze. Add rice and continue stirring until wine is absorbed and stuff starts to sizzle again.

Pour the chicken broth slowly, a little at a time, stirring continuously, over a 15-18 minute period. Test the rice occasionally, it should get tender yet firm, creamy and maybe a little crunchy.

Turn heat on low, toss in the shrimp, and cover for 5 minutes.

Serves 4.

May 29th
2013

The Paper Lady

the-paper-lady

May 17th
2013

Need to design a tutorial framework

There is a huge need for something that would make it easy to design tutorials. As I see it, a tutorial is a step by step document leading the viewer toward completion of a goal, whether it be the design of a graphic, a game, some code, or any process realting to graphic and web design.

The system I envision would present the author with a series of nodes that could be text, image, or video. Text would be written instructions/links, Image would be drag and drop or upload from computer, Video would be screen capture-either a selected window or the entire screen.

The tool would allow authors to create tutorials as needed, store them, present them, password-protect them, even sell them.

The biggest issue with tutorials is that they are difficult to make and wildly inconsistent-two tutorials on the same subject can contain a completely different structure. This tool would  make it easy and establish a framework for tutorials.

May 16th
2013

Lawn Mower Sketch

mower

Apr 17th
2013

Making hand drawn fonts with a tablet, Adobe Illustrator and Glyphs Mini

Watch a video explaining my process for making hand drawn fonts with Adobe Illustrator CS6, Glyphs Mini and my bamboo tablet:


The finished product:

quickworms

You can download the font here:

https://github.com/field2/quickworms

 

 

Mar 15th
2013

Designing Dashicons

The dashicons font created for the mp6 plugin has pretty much taken up all of my time the last few weeks. This even with help from Mel Choyce, Joen Asmussen and the rest of the WP design team.

There are quite a few resources on how to do this, but most of the ones I’ve read, although I’m sure worked for some, went against a few of my own design principals. So I set out to find the perfect workflow for me, and here it is.

When I design icons in Photoshop (AP),  the end goal is a png sprite. Using a split window, I can zoom in on one window and see the actual size icon in the other. I can click on an anchor point and nudge it with the arrow keys, getting sub-pixel placement just right and having absolute control over the end product.

The move to vector as the final source has been really weird and challenging. In Illustrator, vectors don’t anti-alias the same was as they do in Photoshop. That is, if you draw a rectangle with the edges half-way between the edges of a pixel, in Photoshop, you might get a different grey value than if you did that in Illustrator (AI). And pixel snapping is inconsistent. I would copy/paste a shape from AP to AI, and  my perfectly sharp edges would become fuzzy, even though the paths were exactly in the same place. If I click/dragged an anchor over a pixel, then dragged it back, it would become sharp again. Very weird.

The tutorials I read through, https://github.com/blog/1135-the-making-of-octicons and http://glyphsapp.com/blog/importing-from-illustrator/ were really helpful, but as I said earlier, there are fundamental flaws with those workflows, at least as far as I’m able to incorporate them into mine. For some reason, 16×16 is this imposing number that icon designers hold sacred. It’s a good target, but it really does overly constrain design. I decided 20×20 was a much easier canvas to work within, and as long as I left a pixel or two breathing room around the icons, they look great in a 16×16 space-not too big, but not leaving out important details in the name of absolute limits. I also got nervous when scanning through the article at all the weird numbers: 2048, 2052, -17something. Do we really need all those complex numbers? As for the glyphsapp.com article, while trying to draw directly in Glyphs may be the best way, it’s gonna be tough to put aside my AI experience to learn a new method for drawing vectors until I have lots of time on my hands.

After trying all sorts of settings, I came to the conclusion that 20x20pixel icons should be designed in a 2000×2000 upm font. The glyphs article points out that 1 ai point=1 glyphs unit. So I worked in points.

Another oddity was the Glyphs vs Glyphs Mini (GM) inconstancies. Joen Asmussen, who I can’t thank enough for all his help on this, designed the icon font you see at WordPress.com, using GM and following the octicons article pretty closely. I had a trial version of Glyphs, but decided to spring for GM for the sake of consistency. Although I started the font in Glyphs, bringing it into GM was an eye opener. The major issue was that GM doesn’t allow you to change the font’s UPM settings; so when I opened the .glyphs file I created in Glyphs, I was stuck with the 1000 upm I was originally working with. When I decided to try 2000 upm, so that it mapped more (theoretically) naturally with the 20pt x 20pt AI designs, my glyphs all got cut to 50% of their size. Resizing in glyphs was not something I wanted to learn how to do, so I returned my workflow to Glyphs.

Screenshots:

New AI file, 20pt x 20pt with points as units

New AI file, 20pt x 20pt with points as units

Keyboard increment set to 1/8th of a point, so I can nudge vectors between pixel edges as needed.

Keyboard increment set to 1/8th of a point, so I can nudge vectors between pixel edges as needed.

Gridline every 10pt, with 10 subdivisions

Gridline every 10pt, with 10 subdivisions

Snap to grid as needed

Snap to grid as needed

Select all your glyphs in Glyphs mini, set widths to 2000 upm

Select all your glyphs in Glyphs mini, set widths to 2000 upm

Choose font info in glyphs mini

Choose font info in glyphs mini

Ascender/caps height to 2000, giving you a perfect square for each glyph

Ascender/caps height to 2000, giving you a perfect square for each glyph

Icon drawn in AI, with a 20pt by 20pt box drawn around it as a bounding box

Icon drawn in AI, with a 20pt by 20pt box drawn around it as a bounding box

Scale it up to 2000x 2000, note the little chain lock ensuring proportional scaling

Scale it up to 2000x 2000, note the little chain lock ensuring proportional scaling

Copy the icon, Double-click a glyph in Glyphs Mini, Paste into the glyph window. Make sure the x/y/w/h are exactly as shown

Copy the icon, Double-click a glyph in Glyphs Mini, Paste into the glyph window. Make sure the x/y/w/h are exactly as shown

Double-click on the "bounding box" and delete it.

Double-click on the “bounding box” and delete it.

You can download the glyphs file, AI source file, and .otf here. Stay tuned for a video post.

Feb 6th
2013

WP Icon font

I made a font out of the icons I’m proposing for future versions of WordPress. Here’s how I did it:

Designed them in AI CS6. Preferences set like this:

File handling preferences in AI

Note the copy as settings; apparently you need this so you can copy/paste into fontlab…

AI preferences

Gridline every 10px, w/10 subdivisions. Icons are based on a 10×10 grid. I made the color black so they’re easy to see.

 

snap settings

Make sure snap to grid and snap to point are turned on, and that you can see the grid.

Close up of a couple icons

Note the extra strokeless/fill-less 20x20px box around the icons. You need this to copy/paste into fontlab and not have them get scaled up.

 

Then I created a new font in Fontlab 5, with metrics set like this:

fontlab metrics Screen Shot 2013-02-06 at 9.02.30 AM

I copy/pasted each icon-the shape and the invisible bounding box- into a separate  glyph in fontlab. I tried to make it intuitive; “a” is appearance, “d” for dashboard. “p” was problematic; posts, pages both have p.

After I generated the otf file, I used @font-face to embed it on a test page. I set a base size to 62.5% and set the icons to 2.0em; effectively rendering them at their native 20×20 pixels. The key thing is the -webkit-font-smoothing:antialiased property in the css. Without it, they look like garbage. They pretty much look like garbage anyway in firefox/opera, and I have no clue how to get them in IE. But in webkit it’s gold.

I’m trying to get the whole thing on github since I guess that’s what you’re supposed to do, so stay tuned…

 

 

Older Posts »