Monthly Archives: July 2012

Monday in the HTMLab

Picture Tweaks for the Web

2 Comments

These are the days of instant picture-taking and sharing, and as such, most people don’t worry too much about how the pictures look; it’s more about the subject matter than anything. But, if you’re a webmaster/webdesigner, pictures take on a slightly different meaning. They are not only photos, but visual representations of your website.

It’s easy to get daunted by all the image-creation and image-editing software out there. But I’m here to tell you there are quick little tricks to make your photos (and your website) a little more awesome for your users. Read on and discover!

Photos in a Range of Sizes: Convenience for the User

When dialup and slower DSL connections ruled the Web, thumbnail photo galleries were all the rage. They were the fastest way to preview tons of photos, because users could see at a glance which photo they wanted to click on and view in full. Downside? They took forever to make, because you had to select the most salient point of the photo to make it attractive to click.

These days, web designers trying to present tons of visual content do not have to resort to thumbnails anymore due to slow connections (for the most part). Instead, what is most helpful for the modern Internet user is a selection of various sizes for your photos and graphics, a la Flickr. Like so:


This is the small size…


…and this is the larger size!

This way, your users do not have to try enlarging or shrinking the photo on their own; instead, you as the webdesigner/webmaster provide them with a choice of sizes for their convenience. (And the more convenient you can make photo-saving, the better!)

The “Levels” Tool: Beautifying Even the Most Drab of Photos

Looking for a way to subtly enhance your Web-ready photos and graphics without making your pictures look fake? Then you might want to try changing the images’ “Levels” settings, in your favorite trusty image editor/creator. (I’m using Photoshop Elements 8.0; your program may differ slightly in how this feature is set up, or it may not have a Levels tool at all. More about how to work around that in the next section. 🙂 )

Let me show you the difference a few Levels tweaks make:

Before changing Levels: A pretty outdoors picture.


Showing the Levels dialog box alongside the picture, with no changes yet.


With slight rightward shifts to the leftmost arrow (the Shadow settings), then slight leftward shifts to the middle arrow (the Midtone settings), the colors appear stronger and make the picture more interesting.


End result: a MUCH better “pretty nature pic.” And yet, it doesn’t look fake–it just looks better, at least to my eye.

Small, subtle changes like this can make your photos more vibrant and captivating–and who doesn’t want and need that kind of draw for their website?

Brightness/Contrast: The Poor Man’s Levels Tool

Now, if your image editor/creator does not have a “Levels” tool, all is not lost! Before I got Photoshop Elements, I used a long-forgotten program that had only the barest of image “editing” wizards and tools. The most sophisticated editing tool it had was a tool called “Brightness/Contrast,” and in a pinch, this can spiff up the colors of your photos like the Levels tool can. The following example uses a recent picture of me to demonstrate. (Avert your eyes if necessary–I am no model. xD)

My picture, before changing any Brightness/Contrast settings.
The Brightness/Contrast dialog box, ready to make my picture AWESOME!
With slight changes to the Brightness and Contrast settings (Brightness +10, Contrast +20), the pink of my shirt looks more colorful, my hair looks a little darker, and my skin looks a little bit smoother (and if that ain’t a miracle, I don’t know what is!).
Finished product: a slightly more presentable me–always a good thing on the Internet. (And if you recognize this picture from my Twitter avatar, points for you! xD)

With Brightness/Contrast, you can make your pictures just a little bit livelier. Just don’t go overboard changing these settings, otherwise you will end up with fake-looking pictures. Like, more fake than me with blonde hair. 😛

PNG-8 Format: Smoothest Gradients and Truest Colors

If you want a lovely gradient effect for your website, these days it’s best to turn toward the PNG format, and to the PNG-8 format in particular for smooth gradients in a small file size.

Observe the difference when you save the same exact gradient in the three major Web image file formats:

This is a low-quality JPEG rendering, with obvious diagonal striations going across the image. (You CAN get a smooth gradient with true colors in a JPEG format, but the file size will be much bigger.)
The GIF file format, especially with “Restricted” colors like this one, makes a pointillist mess of the gradient. (The “Perceptual” GIF setting does render the gradient better, but still has annoying striations running through it.)
Ah, perfection! The PNG file format renders the gradient just as well as when I created the image, but contains it within a 33 KB size!

PNG-24 Format: Best Transparent Graphics Creation

On the other hand, there is a use for the PNG-24 graphics format: making truly transparent graphics. I’ll show you what I mean:

From left to right: GIF, PNG-8, PNG-24, all with transparency settings on. Which icon would you rather use in your webdesign?

To my eye, the PNG-24 format results in the best-looking transparent graphics, whether the graphics are small like icons or big like website headers. By contrast, the “fuzziness” around the GIF and PNG-8’s icons make them both undesirable for making true transparent graphics. While the file size may be a tiny bit bigger (the PNG-24 in my example is 618 bytes, as compared to 387 bytes for the GIF and 430 bytes for the PNG-8), the payoff is definitely worth it from a design perspective.

Dark Page Backgrounds: Show Off Those Beautified Pics!

Now, for the final question: How do you properly display your newly-spiffed pictures? Answer: with a darkly-colored page background!

Think this is too simple? It does work–way back in high school, I served on the Yearbook Staff for a year, and learned a similar trick of telling a “good” picture from a “bad” one. It seems that pictures just show up better if they’re against a black or dark-colored background, and it’s easier to tell if you need to reshoot the picture or if it’s worth using. The same goes for displaying pictures on the Web; a darker background can make the colors in an image pop a little more, or help the details show up better.

The following side-by-side example shows what I mean:

This is based on exactly the same picture, with no Brightness/Contrast or Level changes between the two. And yet, the one with the black background/border around it seems to have more detail and better colors than the one with the white background/border. Weird, but it works! Using a darker-colored background for your picture pages will make them show up just that much better.

Summary

You don’t have to be a photo whiz (or a Photoshop ninja) to make your pictures look awesome for the Web. All you need are a few quick and subtle tricks to spiff up those photos for their Internet closeups, and you’ll have a much better collection to show off!

Saturday with the Spark

The Lost Song (A True Story)

Leave a comment

In January of 2011, I had written a wistful, prayerful contemporary Christian song, titled “Adrift,” and performed it for my church. They enjoyed it, and I loved singing it because it was a way to worship. Once I had performed the song, however, I moved on to composing newer songs and working on other projects. Little did I know that it would be the last time I would perform the song as it existed then.

Sickness, Difficulties, and Losses

A few months later, I began to fall ill repeatedly, suffering strange new headaches that lasted up to 3 days and were not treatable with any medicines. My will to create, my will to write and sing and play, were thus taken from me, since I sometimes suffered up to 10 headaches a month like this. Soon, weeks went by in which I was never without burning, crushing head pain, whether I was sleeping or awake.

It felt, as spring blossomed into summer and summer faded into fall, that I was living 25% of my life. I went to bed feeling like I had been run over by an 18-wheeler, and woke up feeling like I’d been run over by a school bus. And the constant pain, which got worse if I tried to sleep it off and never truly went away, about drove me nuts. During this time, I also lost the use of my laptop for a little while (due to someone else’s carelessness), and that added stress didn’t help my health much. My mental creativity stunted, my physical energy sapped, and my creativity-producing machine gone–it felt as if I were getting slapped around by life.

Finally, during a routine visit to the dentist in October 2011, we discovered that my wisdom teeth were severely infected and had to be removed. The subsequent oral surgery in early November not only pulled the sources of infection from my jaw, but also seemingly got rid of those burning, never-ending headaches. At last, I could live my life again! I thought everything would be back to normal concerning my creativity, so I could get back to doing what I loved–writing and polishing my prose, poetry, and music.

Not so, as I found out. A mere month after my surgery, my poor injured laptop’s hard drive died, and the data on it was completely irrecoverable. All the work I had done since June 2010 was lost–including the lovely song I had written and performed almost a year previous. All I could remember, because of my grave illness and all the stress, was the title. No lyrics, no melody…no nothing. I mourned it along with the rest of my lost works, knowing that with my forgetfulness, I would likely never remember it.

A Little Scrap of Unexpected Song

I was horribly sad over this, but at least I could comfort myself with a large fraction of my work, which I could still build off of. Slowly, I began to amass more works, though they were nothing like what I had lost, I knew that.

In the middle of all this personal, creative rebuilding, my boyfriend and I had gone to the movies to watch The Avengers when it came out, and I was reminded of how much I had liked some of the other Marvel movies that had come out before, especially Thor, which had come out in March 2011, during the first stages of my terrible headache/wisdom tooth infection.

I ended up borrowing the movie from my boyfriend’s family, then buying a copy of my own, since it had quickly become a favorite of mine. (And, as is my wont when I really enjoy a film, I had already watched it several times back-to-back-to-back. xD)

But it was during one of my many repeat plays, as I watched the scene in Thor where Loki discovers he is not truly Odin’s son, that a little scrap of song started playing in my head. Occasionally this happens to me, where a character or a mood will inspire a new song within my head–it’s a great way to get new ideas. And, since I had composed very little during my illness, I was understandably stoked.

“COOL, I finally got an idea for a new song,” I thought, watching the evocative, sad scene play out as the plaintive, new little melody curled around my brain cells. The melody ached, expressing such wistful sorrow that it nearly brought me to tears. And then…something in the tune jarred memory awake. “Waitaminnit…” I thought, analyzing the short little melody. “That tune–oh, my God, that’s ‘Adrift!’ That’s my lost song!!”

Rebuilding The Lost Song

You never saw a chick pause a movie and run down the stairs to get to her piano keyboard so fast. In minutes, it felt like, I had reconstructed not only the chorus melody, which was the first bit I had remembered, but I had also gotten back the melodies for the verses and the bridge. Not only that, but some lyrics were coming back, too, albeit slowly and in pieces.

A couple of frenzied rebuilding hours passed, and I was able to get back 90% of the original song, with new lyrics put into the places I simply could not remember. I was overwhelmed with the creative urge–after all, my lost song had come back after I had feared I would never, ever remember it all.

Though I am still a little sad for the bits of lyrics I can’t remember, the new lyrics seem to fit even better than the old ones, at least in my estimation. This gives me hope that perhaps all of my lost works, all the little stories, poems, and beginnings of songs, might one day come back better than ever, too, after being cast “adrift” in the void of memory.

Friday around the Web

Words of the Masters, James’ Face, Orange Foliage, and Drugstore Beauty

Leave a comment

Words of the Masters
Quotes from some of the world’s best thinkers and philosophers…

James’ Face
James has one mean (Photoshop-geek) friend. Changing his pictures on Facebook to have a slightly different expression? Not cool…but very snicker-inducing.

Orange Tree Foliage
An explosion of sunset colors, except that this is growing on a tree!

10 of the Best Drugstore Beauty Buys
Learn what awesome, high-quality makeup products you can find at your local drug store (I’m not kidding)!

Thursday in the Zone

It’s Almost 900! (A Tale of Epic Life-Gain)

Leave a comment

It all started with me, my boyfriend, and two Magic decks we had never played against each other–his Zombie Clerics (known as “Priests of Pain and Drain”) against my Sanguine Bond & Boon Reflection (affectionately nicknamed “Sanguine Boon”) deck.


Priests of Pain and Drain decklist @ EssentialMagic.com

Sanguine Boon decklist @ EssentialMagic.com

The Opposing Strategies

My boyfriend’s Zombie Cleric deck’s strategy is actually pretty simple, revolving around a four-card combo: Cabal Archon, Rotlung Reanimator, Conspiracy, and any random Cleric to begin the fun. Use Cabal Archon to sacrifice Clerics to gain 2 life and make the opponent lose 2 life (this is called a “life swap”). Now, thanks to the Reanimator, the Clerics you sack through the Archon give you Zombie tokens, which then become Clerics themselves with the use of Conspiracy set to Clerics. Repeat cycle as long as you have mana to do it.

My Sanguine Boon deck is also pretty simple: gain enough life to be able to stall till I get Sanguine Bond (and, if I’m lucky, Boon Reflection). Then, play more super-cheap life-gain spells/abilities, causing major life loss through Sanguine Bond and the ability to draw more life-gain spells using Well of Lost Dreams. (I’ve spoken about this strategy before, but not in this larger context.)

How These Strategies Faced Off

My boyfriend’s strategy would have probably succeeded against mine in the early stages of the game, if I had not played an Isochron Scepter with Rest for the Weary imprinted on it. Ever after, every time I played a land, I would be gaining 8 life instead of just 4, and I could gain at least 4 life every turn. But, because I don’t play much offense in my deck, he was able to amass his combo fairly soon after I had played the Scepter-Rest combo, and so he was able to start draining me of my newly-gained life points.

Stalling Like Mad vs. Life Drain Like Mad

Fast-forward to about turn 25 or 30, and both of our decks were running at near-top capacity. I now had two Boon Reflections out, gaining 16 a turn off Rest for the Weary if I hadn’t played a land and 32 a turn if I had played a land. But my boyfriend was able to drain at least 16-20 life off me per turn with the Cabal Archon “sack-a-Cleric” combo. With all the early-game life gain I had done, he was not able to defeat me entirely, but was able to make my life total yo-yo all over the place. We were both fighting for purchase; he was trying to keep my life total under control, and I was trying to survive until I could get that darned Sanguine Bond, which still hadn’t shown up yet.

Game-Changer: Well of Lost Dreams for 7 Cards

The almost literal stalemate continued for the next few turns. At last, I pulled Well of Lost Dreams; I played it, used Ghost-Lit Redeemer’s ability to gain 8 life, and paid 7 mana to draw 7 cards, since I had been top-decking for most of the game. The long-awaited Sanguine Bond was the first card I drew, and Demonic Tutor was the last, promising a second Sanguine Bond in hand if I could last that long. My life total was now up around 400-500, with my boyfriend’s life total just a little higher. I thought I could make it. 😉

Sanguine Bond (x2) for the Win!

Once the first Sanguine Bond was played, I sacked the two Sunspring Expeditions I’d had ready and waiting on the table for most of the game, which created a 32-point life-swap thanks to the double Boon Reflections. That, plus my usual Scepter-Rest combo and a Ghost-Light Redeemer or two gaining me more life, drained him of over 150 life in one turn. Then…well, I managed to retrieve the other Sanguine Bond; though I wasn’t able to play it that turn, I knew next turn would become even stronger, as I gained quadruple life and made him lose quadruple life, twice.

A couple of turns after I played the second Sanguine Bond, it was over, 2 hours after we had started. My ending life total was 894–and that was with my boyfriend draining off 32 every turn for close to 20 turns. :O How high would it have gone if he hadn’t been keeping it down somewhat? The world may never know.

So, using my Sanguine Boon deck, I finally beat my boyfriend’s Zombie Cleric deck…and it only took 2 hours of free time. Ahh, extreme-long-game Magic at its best. 😀

Wednesday in the Word

Everything God Does is For Our Good

Leave a comment

Jeremiah 29:11
11 For I know the plans I have for you,” declares the LORD, “plans to prosper you and not to harm you, plans to give you hope and a future.”

This oft-quoted verse is couched within a letter that Jeremiah sent to the remaining elders of the Israelite exiles, telling them what he had heard from God. The exiles by this time were disheartened and felt abandoned by God, and needed to hear from Him again, needed to feel His presence, even if they were still a little spiritually rebellious.

God had indeed used the Babylonian exile period as a way to teach the Israelites, but it was not for an evil purpose–it was to help them remember that they needed to depend on him. They had been far too proud and far too headstrong before, and the period of exile taught them humility. Thus, this letter from Jeremiah carries a message of reconciliation from God, including this verse. God wants to reassure the Israelites that He has great plans for them, which are for their best interests.

In fact, God has always worked for their best interests, even if the Israelites have not always understood it. Like children rebelling against a parent, the Israelites have been wayward and nearly untenable, worshipping any “god” but God, doing anything but what God has asked them to do. So, much like a parent who disciplines to teach their children respectful behavior, God has disciplined the Israelites with this time of exile, to teach them that His blessing is something they should rejoice in, not spurn. This discipline does not come from a place of hate and anger, but a place of love and nurturing–no matter how much it hurts at the time.

It’s much the same way with us. God does not do evil things in our lives or cause evil things to happen, but He uses trials and problems to help us develop strength and faith. This ultimately helps us grow into the people He created us to be. Nothing God does is for harming us; even the harshest trials we face can end up showing us how strong God’s love is for us. During my horrible failure of a teaching career, for instance, I felt very distant from God, so overwhelmed…but He never let me die, never let me really hurt myself or anyone else. In fact, I found myself reaching for God in those darkest of days, and I found Him there, with a plan ready to lift me from pain. God wants to do the same for all of us, whenever we decide we’re ready to listen.

Tuesday on the Soapbox

A Butterfly Landing on My Car

Leave a comment

It was just after 2:00 pm, which meant that the interior of my car was more like the surface of the sun as I sat in traffic, waiting for one of Shelby’s many stoplights to deign to let me pass. But this particular stoplight seemingly had a grudge against me today. Literal minutes were ticking by, it was hot as all get out, and I had somewhere to be. The discontented stream of grumbling in my head was quickly building to a fever pitch.

And then, I saw it: a butterfly, its wings patterned in brilliant blue and silky black, flitting among the cars gathered at the stoplight. It hovered and darted among hoods and roofs shimmering like metal carapaces, flying as if it were searching for something to light on. After a few more seconds, it came closer, and finally lit on my windshield, right in my line of sight.

I expected it to take off again right away, but instead, it was almost preternaturally still, except for its little antennae waving about as if trying to get my attention. How delicate its wings were, fragile and almost translucent…I studied it for a moment or two more, wondering how it was staying so still, and why.

The light up ahead finally turned green at last, but it seemed the butterfly knew to lift off the windshield even before I lifted my foot from the brake; I watched it hover just above the glass, as if it was trying to keep my attention. All too soon, though, I had to advance forward, leaving the butterfly behind, hopefully avoiding the tide of traffic behind me.

Driving on through the intersection, blessedly moving at last, I wasn’t quite so grumbly anymore. The butterfly’s moments of stillness, as it balanced daintily on the windshield, had reminded me that sometimes it was okay to be still, when moving too fast could endanger you. Maybe I didn’t need to worry about rushing ahead to make up time; maybe I would be better off not to drive as if the gas pedal were an enemy to stomp into the ground.

Now, I know that butterflies in the late spring are not uncommon, certainly, but allowing myself to be still a moment and ponder such a tiny, delicate creature was uncommon for me. I’m not known for being still, or quiet, or content…and yet, in those very few moments, I was perfectly content being all of those things, merely looking at a butterfly. How much calmer would I be, if I allowed myself more of those moments? …Come to think of it, how much calmer would we all be?

I like to think that sometimes God uses the littlest of creatures to remind us of huge essential truths, like the importance of just being still. What do you think?

Monday in the HTMLab

You Might Be a Webmaster If…

Leave a comment

For a little lightness and humor in today’s Webdesign post, I thought I’d include a Jeff Foxworthy-style list of ways you know you’re a webmaster. See if these aren’t as true for you as they are for me!

You Might Be a Webmaster If…

  • …you instantly know what font a business’s sign uses.
  • …you find yourself admiring the gradient effect of a sunset.
  • …you can type the following code in your sleep: <html><head><title></title><link rel=”stylesheet” type=”text/css” href=”style.css”></head><body></body></html>
  • …you routinely have nightmares about a PHP script that just won’t run right.
  • …you find yourself bracketing your sarcastic comments on the Internet with <sarcasm> and </sarcasm>.
  • …you make the analogy that kudzu is like a Javascript without a </script> ending tag.
  • …you have been known to shout at sluggish uploaders, FTP programs, code editors, and any other program which dares to get in the way of your creation.
  • …you see a bottle of AJAX brand dish soap at the grocery store, and wonder idly what part of the aisle it’s updating.
  • …you have been known to dance around your room upon getting a page to display properly.
  • …you use the Copy and Paste keyboard shortcuts on your computer more than the Spacebar itself.
  • …you often curse the existence of old Internet Explorers (especially version 6).
  • …you have officially broken up with GIFs (especially the animated kind).
  • …you cringe inwardly when someone asks you “Hey can you look at my website and fix it?! I think it’s pretty cool cause I have a lot of colors and tables and I’ve got links all over the place…?!”
  • …you saw this comic at The Oatmeal, and wept for joy that someone else finally understood your last freelance job.

Know any more funny “You Might Be a Webmaster If…” moments? Leave a comment and share your ideas!