As you can see, I’ve marked up the image with the specific problems, all of which are quickly and easily identified. I could also bitch about all of the text being in half-unreadable grey, but at least that’s a design decision that one could defend. The other stuff there is just straight wrong.

Designers: run your designs past the people who will actually be using them day in and day out. Even better, WATCH those people as they use the stuff, and take notes. A few simple tweaks would make this login screen infinitely easier to use.

Run once a year, the survey helps provide insight into the demographics of the world of Web Design. It’s a simple survey (takes about ten minutes), it’s anonymous, and it really helps to paint a clearer picture of industry and how it is (or isn’t) changing.

Go take it now!

Dart Publishing

Dart Publishing, Ltd. is the official name of the business I’ve been trying to get started with my friend for a while now. We’ve made huge leaps recently, thanks in part to having some extra time due to the Crispy Gamer implosion. I’m very nearly done with the first draft of the business plan, and will be sending it out to a few folks I know with way more business experience than I have, in order to get their feedback on it. From there, it’ll be revisions, and then probably applying for some local grants. Investor money is good, but free money is even better. Might as well look for that first, right?

Writing

Last month I finished not one, but two novels — my NaNoWriMo projects from 2007 and 2009, “The Broken God Machine” and “Morgan Skylark and the Monster Hunters,” respectively. If anyone out there wants to read the first draft of The Broken God Machine, it’s ready for criticism. Just get in touch. I still need to make some tweaks to Monster Hunters before I open it up for critique from the outside world, but that should be happening soon. I’m also making some progress on the second draft of the sequel to The Blood That Bonds, currently titled “Blood Hunt.” I expect work on that to speed up significantly once I’m no longer spending my coffee shop time filling out competitive analysis forms and burn-rate spreadsheets for Dart. Speaking of TBTB …

The Blood That Bonds

I haven’t had too many responses in my agent search, and so far the responses I’ve had haven’t been positive. I’m not particularly discouraged — people are still reading the eBook and sending very positive feedback — but I’m beginning to wonder if I should revise the first chapter a little to make it a bit more attention-grabbing right from the start. There’s a little too much opening exposition and I think it’s turning agents off. We’ll see.

Photography

Unfortunately, the broken 18-55mm lens that I fixed with superglue for a while has broken again, so we’re stuck only using a distance lens on our camera, which is a pain in the ass, so we’re not taking many pics at the moment. I need to get off my ass and either re-fix the lens using a better piece of plastic (and more superglue), or just cough up the ~$140 it costs to buy a new one. Why does everything have to be so damn expensive these days? Blargh! Rotten kids … GET OFF MY LAWN!

Cocktails

I went on a bit of a beer kick the past few months, trying lots of craft beers and really strengthening my understanding and appreciation of the different types available (turns out I am way more of an ale guy than a lager guy, with a particular fondness for brown ales, porters, and stouts). I’m coming out of that now though and getting back to crafting new cocktails. I’m still experimenting right now, but when I come up with something good, I’ll post it here.

Video Games

I went out and picked up BioShock 2 the other night at my wife’s urging (one of many reasons why I married her!) and have been playing through it. I’ll post a full review here when I’m finished, but I’m pretty far in and while I’m enjoying it, I’m kind of disappointed in how much more they’ve chosen to focus on combat. You’re constantly being swarmed with enemies, and while I’m not dying a lot, it’s just not a whole lot of fun to be in non-stop firefights. After BioShock 2, I’ll be picking up Mass Effect 2, and Assassin’s Creed 2 … apparently it’s all about the sequels right now.

Reading

Sadly, given how many activities I have going on, I haven’t done much reading since Christmas, when I burned through Bill Simmons’s Book of Basketball in a week or so. I’ve got three novels and a short story collection all waiting for my attention, not to mention a non-fiction book on real estate investing that I really should finish

French

Mon francais n’est pas superb … but it’s getting better. I do a half an hour of studying per day almost every weekday, and Charlotte and I are beginning to try to speak to each other more in French. We’ve also found some French cultural events to go to around town, and I’m about to start in on French grammar in addition to speaking/listening. It’s still a halting, frustrating process — I don’t like being bad at things — but all these little steps should hopefully add up to me being able to hold something of a coherent conversation with her friends and family back in the homeland, sometime within the next couple of years. Hopefully!

Travel

Speaking of the homeland, Charlotte and I will be making another France trip in May. Her sister is getting married in the south of France, which gives us the opportunity to fly into Barcelona in Spain, and spent the next week driving to Toulouse (actually, the nearby town of Albi), where we’ll attend the wedding, hang out for another day or two, and then I’ll fly back while she goes to Paris to take her finals for the French Lit program she’s working on. We’ve also got a trip to Florida happening in March, to visit my parents and sister, and a trip to Syracuse happening … sometime. Then as summer rolls into fall, we’ve got a wedding in New York City and a wedding in New Hampshire (I think) to attend. Yeesh!

… So that’s what’s up with me, in case anyone was wondering!

In late 2009 Crispy Gamer acquired GamerDNA.com, 360Voice.com, TweetMyGaming.com, and an associated ad network running ads on multiple privately-owned gaming websites. The board of directors, excited by the massive increase in page views and ad sales opportunities, decided that it was time to cut costs on the Crispy Gamer front, consolidate down to one company, and focus mainly on revenue. They laid off Crispy Gamer’s entire editorial staff, including the managing editor, the copy-editor, the senior writer, and several contract writers. They alerted the other freelancers that there would be no further work coming in. They also told the development team, consisting of myself, my friend Gabe, and our Junior Engineer Stanley, that our services would only be needed for a few more weeks as they transitioned Crispy Gamer to a more basic website.

To that end, Gabe and I were still technically employed by Crispy for a few more weeks, working on some back-end changes to the site. It felt a little creepy, like dressing up a friend for his own funeral, but this is a part of the internet startup world: sometimes things don’t go as expected and the board, who let’s not forget invested $8mm in this company, jumps in and assumes control in order to try and recoup their initial investment.

For my own part, I find the timing unfortunate. Beginning with the redesign in May 2009 and moving forward into the summer and fall of 2009, I thought the site had really turned the corner. It was much easier to use, much easier to navigate, and much easier to read than the previous design had been. We’d developed some really cool technology using current AJAX and DHTML techniques, and were looking forward to building even more. Our user community was taking off, with nearly every article getting several comments, and some of them getting dozens. Our numbers were holding steady despite dramatically decreasing the amount of paid traffic … in short: people were using the site, liking it, and coming back without having to be enticed by marketing or ads.

That’s exactly what you want, when you build a website. Unfortunately, that tipping point came too late. Instead of happening at about six months in, it took about eighteen, because there was a lot of stumbling in the first year. This, also, is not exactly uncommon in the world of startups, and I don’t blame the Crispy founders or employees for it — sometimes it takes time to find your voice and establish who you are. It’s just sad, because I’ve been on the other side of things. I started working for GameSpy in 1999, just as it was making its move from “three guys in an office running a couple volunteer sites” to “investment-backed real company with multiple product types”. It was touch-and-go during that time and a single different — not even necessarily bad — decision could’ve submarined the entire company. Instead, we struggled through, figured things out, and became profitable. It’s a great feeling and an amazing thing to have gone through, and I’m sorry that many of my fellow Crispy staffers don’t get to find out what it’s like.

I worked with a lot of good, smart, talented people at Crispy and I’m happy to have spent the last two-plus years there. We may not have made it over the hump, but we came damn close, and I’m proud of what we accomplished with the site. Now it’s time to move on to the next adventure. Gabe and I have both accepted some work with a San Francisco-based startup, for one thing. For another, I’m 35 pages and counting into a business plan for our own internet startup, which we’re hoping will allow us to raise some grant money and be able to employ ourselves full-time. It’s a very busy, very interesting time, but I’m excited about the possibilities out there and looking forward to continuing to learn and improve as a web designer and development director.

Oh, and now that I’m done with CG, you can expect more frequent updates to this blog, too. Woohoo!

I am officially on the job market, so if anyone out there in cyber land has any leads, please send ‘em my way!

With the exception of the photo source used in the Blue Rust pic, all of the photo source was acquired from GrungeTextures.com and are licensed under a Creative Commons Attribution-Noncommercial License. If you’re looking for free, quality photo source, GrungeTextures.com and its associated sites have tons!

Without further ado, here are the textures

Blue Rust

Download High Res

Big Bricks

Download High Res

Grimy Wood

Download High Res

Mossy Rock

Download High Res

I’m not giving up on my dream of print publication for The Blood That Bonds, or my other work. I’ve wanted to have a book published since I was eleven years old, and there’s no reason to stop trying until it happens or I’m dead. However, I’ve decided to use the skills I possess that other authors perhaps don’t in order to help the people who might want to read it, find it. There are a lot of people out there who’ve written a vampire book … but how many of them are professional web designers and developers with over a decade of experience? Probably not too many. Why not leverage those abilities to take a route less-traveled to getting the book out there and noticed?

Which is why I registered TheBloodThatBonds.com and have spent my free time creating an entire website to promote the upcoming free release of the novel, in eBook formats (PDF, Kindle, iPhone and more), to whomever wants it. The site’s not quite done yet and is still locked down under a username and password, which is why I didn’t link it, but it’s very close to finished and I anticipate it will launch in mid-August. I’m really excited about this project, as I think it’s a chance to get my writing out to a much wider audience than it’s previously seen (I’ll be doing heavy promotion of the site and the book, trying to get blogs and sites all over the internet to link it, review it, etc). Hopefully some of that audience will be people with ties to the print industry who might want to publish the book in print … but if not, hey, at least people will be reading, and that’s the goal, right?

It’s time to get this thing out there. :)

And it’s pretty cool, if I do say so myself. The site looks a lot better, and the underlying structure is a million, billion, billion, trillion times better than it was. I took the CSS file down from over 6000 lines to under 2000, reduced the size of the JavaScript, dramatically reduced the page weight in both graphics and HTML, and widgetized the living hell out of the site, so creating new pages with lots of dynamic chunks is super-easy.

I lost a lot of nights and weekends to this project (I’m typing this at the office, in fact), but thankfully my lovely wife has been super-supportive, taking care of the house and the cats, and even swinging by the office to provide moral support and/or Starbucks runs as necessary. She rocks. :)

So anyway, check out the site and let me know what you think. Or join our forums and let us know there. Either way, go go go!

Here now are some progress reports:

Lose 25 lbs. Project

Starting weight – 213.5

Current Weight – 213.5

Difference: 0 lbs. Son of a bitch!

Long Hair and Outrageous Muttonchops Project

Hair: Steadily growing out of control

Muttonchops: Mildly outrageous, as you can see!

I figured since a lot of people hit this site by the search terms “cool website background” I might as well cater to that audience. Here, after the jump, you’ll find a couple of textures. Well, a couple of base textures, but seven total. I’ve saved them at 50% jpg, which is a bit low, but it still provides a reasonable quality, particularly for a background. Oh, and all of these textures tile seamlessly.

So uh … hope you find these useful. They’re totally free. Just right click, choose “save as” … and save wherever you’d like. If you want to credit me somewhere on the site, that’s awesome … but not necessary. If you use them in a website, let me know and I’ll link it here!

Anyway, this is a pretty easy tutorial. The final result will look like this:

Let’s get started!

Step 1 – Find a Base Texture

This is pretty much a repeat of the process from the first tutorial. Flickr provides a ton of great textures, many of them with creative commons licenses. I found a terrific one posted by ian.crowther, though I only ended up using the top part of it:

Step 2 – Crop, Resize, Sharpen

Here’s our base texture, pulled into photoshop and cropped, but still at gigantic size:

That’s not going to work for us, obviously, so let’s resize it down to something more manageable, shall we? Just go to the Image menu, choose “image size” and set your dimensions. I chose 200 wide and the height, with “constrain aspect ratio” checked, automatically set itself to 103. That’ll work. It’s a little big, but hey … it’s a tutorial. Check it:

Much better.

Step 3 – Find Another Texture

What’s better than one texture? Two textures of course. Texture layering is one of my five keys to success when it comes to making cool images. The other four keys? Start with good source pics, experiment a lot, don’t oversaturate/overdarken (I sometimes fail to remember this one), and listen to loud music while you work!

Anyway, I found another awesome, creative-commons-licensed texture, this one by joelgoodman on Flickr.

And with a little pasting and resizing (hint: Edit menu, “transform”, “scale”) we’ve now got a part of it that I like sitting on top of our original texture:

Now just drop the layer mode to “multiply” and we get this:

Which is a pretty cool texture, and good enough for our needs without further embellishment! So let’s make us a button, huh?

Step 4 – The Button Shape

The first thing I like to do is make a new layer, and then set some guides showing about how large I want my button to be. Then I use photoshop’s shape tool to draw a curved rectangle. You can scroll through the different shape tool settings by hitting shift-u, or just hitting U and then checking out the shapes up in your top toolbar (assuming you’re using a modern version of Photoshop. If you’re not … God help you. I remember Photoshops 3 through CS2). If you do things right, your result (zoomed in to 300%) should look like this:

Step 5 – Carving It Out

Next thing I do is turn off several of the layers, leaving just the original composite texture we had at the end of Step 3. I ctrl-click on the hidden layer that contains the button shape. This makes a selection based on that layer, without turning that layer on – very handy! Then I shift-ctrl-c (copy all layers — this basically means ‘copy what I can see’), and ctrl-v. This pastes the multi-layer copy. Now I make a new layer above everything else, and fill it with white. It’s like starting over fresh except all your other stuff is below it. This isn’t necessary, really … it’s just how I work. Move the white background below the layer I just pasted, and we’ve got this:

As you can see, I turned off all the layers that are no longer important. We’re really just working with “layer 4″ there – the textured button shape.

Step 6 – Give It Some Depth

Now, there’s about a hojillion ways of giving a shape depth in Photoshop. For simplicity’s sake, I’m going to stick with some very basic, easy things you can do using layer styles. Purists who love channels, paths and the like, please forgive me.

Double-click your layer (not on the text) to bring up the layer styles menu. Then turn on “Bevel and Emboss” and play around with the settings until you have something you like. I ended up with this:

Then turn on the Gradient Overlay and mess around some more. Remember: experimentation is good! When you have something you like, it’ll probably look similar to this:

And if it doesn’t, well … hopefully it looks good. That’s all that really matters, when you get down to it. Anyway, let’s give it a nice drop shadow just to increase the feeling of depth. That’s always fun. Turn on the Drop Shadow option, play around … you get the idea. Should end up looking roughly like this:

Sweet. Now turn the white layer off again, hit ctrl-a (select all), ctrl-shift-c, ctrl-n (new doc), enter, and ctrl-v (paste). Now you’ve got just the button and its shadow, with no excess border. See what I mean?

Step 7 – Save It

Now you have a choice – you can either save-for-web it with the white background on, or turn it off and save it as a 24-bit, transparent PNG. Keep in mind that IE6 and similar, older browsers don’t natively support 24-bit transparent PNGs (only 8-bit, which is crappy). There are tricks to get around this, of course, but that goes beyond the scope of this tutorial. Anyway, I ended up just saving it as a jpg with a white background, like this:

Now, let’s stop screwing around in Photoshop and get this thing into a web page, eh?

Step 8 – The HTML

This part is mostly simple, other than some minorly tricky stuff you need to remember when you get to the CSS stuff. First off, you need something upon which to click. Forms and their components are a pain in the ass, and I avoid them whenever possible, so let’s go with an anchor tag:

<a href="#" class="button">Click Me!</a>

Very exciting, eh? But that’s the beauty of CSS, of course … all your transformational work is done with stylesheets, leaving only the barebones html, easily readable by spiders and the like. And easier to modify, in the long run.

Here’s the CSS you need. It’s a pretty big chunk:

]]>
			http://www.cwbuecheler.com/2008/08/25/cdebris-tutorial-002-making-a-textured-button/feed/
		0