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!

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 think the results speak for themselves!

Big props to my lovely wife for talking me into the costumes (including awesome fake “mother” tattoo). She’s the best!

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!

• write cDebris Tutorial #3: CSS-based rollover buttons
• add Voices, Chapter 1 to the site
• post some cool textures that people can download and use for website backgrounds

I’ve also been running a test this month, advertising the site on Facebook for a couple of dollars a day. It’s producing views, but I’m not sure if those folks are ever coming back or not. Since I don’t run ads or otherwise make money off the site, it’s not really a big deal how much traffic it gets, but I was curious what kind of folks would click through. I’ll probably stop advertising there at the end of the month, but it was an interesting test.

I am basically all set up on my new PC. Windows Vista is pretty cool. I guess people were expecting something totally revolutionary compared to XP … and it’s definitely not. It’s more like a nice, evolutionary version of XP, so for those who were expecting more, it was probably a huge disappointment. Having read all of the bad press, however, I found myself expecting it to be terrible, and generally speaking I’m quite pleased with the UI changes and improvements.

I still think it’s insane that they haven’t made Taskbar Shuffle a native part of Windows, however.

Oh, and I’m removing the “Latest Photos” sidebar widget until I get a new digital camera to replace the one I left in a cab by mistake. I’d have done it already, but paying for my wedding kinda takes precedence!

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
		
		
		
		http://www.cwbuecheler.com/2008/07/16/cdebris-tutorial-001-making-a-cool-website-background/
		http://www.cwbuecheler.com/2008/07/16/cdebris-tutorial-001-making-a-cool-website-background/#comments
		Wed, 16 Jul 2008 16:08:54 +0000
		chris
				
		
		
		
		
		

		http://www.cwbuecheler.com/?p=26
		Continue reading →]]>
			
Welcome to the first in what will hopefully be a series of simple little web design tutorials. I’m going to try to keep things short, easy, and straightforward and not get bogged down in too much complexity. To aid people in further investigation, I’ll end the document with a list of relevant links that should help explain things (for example, this tutorial will link to an example HTML page, and a zip file that contains the final Photoshop PSD).
Today we’ll be making a website background image that’s similar to the one I use for Cerebral Debris. It has a photorealistic texture at the top, followed by a fading color. The final result will look like this:

Let’s get started!

Step 1 – Get Some Textures
I like to use photo source when I make my textures. I have a pretty nice digital camera, so I typically take my own, but if that doesn’t work for you, a great place to find free textures is to search Flickr for textures that are licensed under Creative Commons – a ton of awesome stuff will come up. For this tutorial I used two textures, both of which I posted to Flickr. Here they are:


Both of those pictures were taken in the subway system under Manhattan, by the way — I think I was at the 59th street station on the A-C line.
Step 2 – Getting Started in Photoshop
Now that we’ve chosen our textures, let’s get them into Photoshop. I tend to work with a lot of windows open until I’m finished, so that in case I screw something up, I can snag a previous version from one of the other open windows. Obviously, you can work in whatever way you’d like. Here we have 1600×1200 versions of both textures pasted into new documents in Photoshop, along with a third window that’s going to contain my final background image (it’s 600×800).

Step 3 – The Base Texture
What I’ve done here is pasted the first texture into my final background image window, resized it down, and clipped it to create a horizontal band o’ texture.

I did the same thing with the second texture, lining them up, and then switched the layer mode on the second texture to “multiply” — If you’re not familiar with layer modes, you should play around with this step … you can generate some amazing effects just by stacking a few textures with different layer modes. It’s the little drop-down box in the layers panel that says “Normal” to start with, right next to the Opacity drop-down.

Step 4 – Tiling the Texture
Here’s the important part: making sure the image tiles properly! What I did was copy the texture above (shift-ctrl-c to copy all layers) and paste it into a new document … makes editing easier. The new document is 600px wide, so I used Photoshop’s Offset Filter (located in filters:other) to offset it by 300pixels. So basically now the edges are in the center. It’s hard to see with this particular texture, but there’s a definite seam there … sometimes the seam is REALLY in your face, it just depends on the textures you choose. Here’s the offset filter at work:

Next I used the Clone Tool to edit the seam. I also took out the big, chunky grey thing on the right of the seam, as I didn’t like it. I’m not going to give a full tutorial on the Clone Tool here, because it’s fairly complex, but if you Google it, there’s a zillion of them on the web. It just takes some practice, but it’s pretty vital to making textures from photo source. Here’s the post-clone-tool texture, which should now tile seamlessly, horizontally:

Step 5 – Make It Pretty!
Ok, now the hard part’s done. I pasted the finished, seamless texture back into my original page background document. Below that, I added a nice, gradienting blue, and I stuck a little drop shadow under the texture to give it some 3D feel. You’ll be able to see these separate layers if you download the PSD (linked at the end of the document), but here’s what it looks like:

Step 6 – Tweaking for Aesthetics
I’m rarely satisfied with my first pass at something in Photoshop, and this project was no exception. This next screenshot shows how I made a few tweaks — I shortened the texture vertically, brightened the background, and added a tiny bevel to the lower edge of the texture. Fairly minor tweaks, but I think I ended up with a better background because of them.

After making those changes, I added some subtle scanlines (which fade to a solid color at the bottom – this is important!) and very slightly brightened the texture area. These are REALLY minor tweaks, but I took a screenshot anyway. See if you can spot the differences:

Step 7 – Save Your Background
This one’s easy. Using Photoshop’s “Save for Web and Devices” option (the longest name for “export” ever), you can save your background image as a JPG, GIF, or PNG … I chose JPG in this case. PNG and GIF are mostly good for images that have big, solid blocks of color, not textures and gradients … unless you’re using 24-bit PNG, which looks beautiful but often has huge filesizes. Anyway, I went with JPG at 80%, which is a little bulky from an image standpoint but, hey, we’re living in the era of broadband, right?

Step 8 – Get Your Background Color
Remember how I said it was important that the texture be a solid color at the bottom? That’s because we’re only going to tile this horizontally, not vertically (otherwise the band of texture would repeat and it’d look awful). So we’re going to set the page background color to the same color as the bottom pixels of the texture, and it’ll all blend together seamlessly. Just use Photoshop’s eye dropper tool to snag the color, and then you can get the necessary hex value (#67B3D7 in this case) from Photoshop’s color picker.

Step 9 – Build Your Web Page
All that’s left to do at this point is some basic html/css to get your background displaying in a web page. We’ve got a link at the bottom to the example web page, where you can view the source, or the html file is also included in the zip file with the PSD in it. Either way, the relevant lines of code are:
body {
	background:#67b3d7 url("bkg.jpg") repeat-x top center;
}
Pretty simple. What that line does is set the body background color to the hex string we picked in Step 8, and then says “use our background image, repeating horizontally only, and start it from the top-center of the page.”
When you view it in the browser, you get this:

And that’s it. You’ve got a tiling, textured background for your website. With a little experimentation, the techniques described in this tutorial can produce all kinds of cool effects. Never be afraid to play around with Photoshop — you’ll learn lots of new stuff.
Feel free to leave questions or comments on this tutorial.
Essential Links:

Texture PSD and HTML Zip
Example Web Page




]]>
			http://www.cwbuecheler.com/2008/07/16/cdebris-tutorial-001-making-a-cool-website-background/feed/
		1