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:

    a.button {
        display:block;
        width:160px; height:56px;
        padding:20px 14px 0px 10px;
        margin:auto;
        background:transparent url("button.jpg") no-repeat;
        color:#FFF;
        font-size:24px;
        font-weight:bold;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-align:center;
        text-decoration:none;
    }

Let’s take a closer look at what we’re doing there. I’ve grouped the CSS into three sections: physical shape, imagery, and text treatment. I try to stay pretty organized with my stylesheets … when you’re working with CSS documents that are 3000+ lines long, it comes in handy, trust me. Anyway, let’s break this down, line by line:

display:block; – This is vital. It tells your browser to treat the anchor tag as a block-level element and not an inline-element. Without this, things like width, height, and padding may not work.

width:160px; height:56px; – These are not the actual dimensions of the image. The basic formula here is: subtract all PADDING, MARGINS, and BORDERS to get to the final width and height. Look at the next line for more info.

Padding:20px 14px 0px 10px; – This means: 20 pixels top padding, 14pixels right padding, 0 pixels bottom padding, 10 pixels left padding. Why more right than left? Because the shadow extends slightly further to the right than our actual button. This helps the font centering (below) look correct. Crafty!

margin:auto; - this is just in here so if you stick the anchor in a centered container, it will float in the center, rather than slam to the left (which is the default way that display:block tends to work).

background:transparent url(“button.jpg”) no-repeat; – ah, the nitty-gritty of making the button look like our image. This sets the background’s color to “transparent” (ie: clear), sets the background to our button image, and tells it not to repeat the background, in case the container gets forced too big, for some reason (too much text, for example).

color:#FFF; – Make the font white. In CSS you can shorthand full hex values that have duplicate vaules. So FFFFFF becomes FFF, FF6600 becomes F60, and such. Not vital, but a nice thing to know.

font-size:24px; – Set the font size.

font-weight:bold; – Make it bold.

font-family:Verdana, Arial, Helvetica, sans-serif; – Pretty much every computer has one of the first three fonts, but on the off chance the system doesn’t, it’s damn near guaranteed to have a default sans-serif font of some sort.

text-align:center; – center the text.

text-decoration:none; – Don’t underline the text, even though it’s a link (which most browsers underline automatically).

Now, here’s what we get:

Bigtime exciting, I know … but hey, a tutorial’s gotta start somewhere. Here are some handy links:

• » Example HTML
• » Tutorial Zip File (includes PSD, Example HTML, and example JPG)

I hope this was useful to you. Feel free to leave questions or comments! Next time, I’ll show you how to make this same button change on mouse over without using any JavaScript at all. Hooray!

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.cerebraldebris.com/2008/07/16/cdebris-tutorial-001-making-a-cool-website-background/feed/ 1