Hello. Welcome to the weblog of Sean Sperte. This is a collection of writings and links relevant to the topics of design and technology. Read more →
I celebrated my 25th birthday Tuesday. Besides a ton of text messages and ecards, it was a pretty uneventful day as far as celebrating. However, The Wife™ finally caved and let me get a Sony PSP for my birthday, even though she still says that only “yucky boys” have them. (Not that I disagree, I would just like to help change that demographic with my ownership.)
I wish I had time to do a full review, but that will have to wait. The bottom line? Winner. Hands-down, the PSP is a solid piece of hardware.
In the meantime, are there any essential games are peripherals I should get? (I only have Wipeout Pure so far, but LOVE it.)
Some great, practical inventions: Thumb Thing Book Holder and The Slanket. Well done, people. Well done.
Ladies and gentlemen, say hello to Dixar Animation Studios. (See also: “Ladies and gentlemen, say goodbye to meaningful, family-fun, computer animated films.”)
In Part 1 of this series I shared how the new Generation Church website was launched. This time I’d like to tell how the design came to be and how I created the elements. The goal here is inspire and educate other graphic designers. Hopefully this helps you.
Inspiration
It’s not hard to tell where I got the inspiration for the GC site from. That “Wicked Worn” look, although seemingly trendy (and possibly even passé), has always been a favorite style of mine. Not only is it unique, but it also communicates a level of attention to detail (ATD) that isn’t found in a lot of other styles. Some examples of inspiration (but not necessarily recommendation):
See? I told you it ain’t hard to see where I got it from (honorable mention goes to Sean Johnson for the super-fly background graphic idea).
Continuity
In addition to external inspiration, I also took a lot from GC’s own branding graphics, which were already in affect. Every week GC meets in the main auditorium of The City Church and use the three main screens to display graphics and worship lyrics. The main graphic currently being used is where I got the masthead for the website:
Method
It’s true that much of the “feel” of the site has to do with the color palette and font choice, but it’s the finer things (shadows, textures, etc.) that are my favorite. I applied some of the methods discussed in Cameron’s series, but mainly stuck to the brush tool and used many of the thousands of free, high quality brushes available on the web.
To create the Wicked Worn look using brushes (which is, arguably the quickest, dirtiest – no pun intended – way) you simply “hand-draw” the worn effects you want. In order to maintain the ability to edit and to have the most flexibility (for scaling, morphing, etc.) I usually always use the brush tool in conjunction with layer masks.
The first thing I do is create a new type layer. Font choice is always important; as is color, tracking, and style (or weight). Once I’m satisfied with the type, I add a new mask to the layer, select the brush tool and pick my brush. I have a library of hundreds of brush sets I’ve collected over the years. I keep them on an external hard drive and load one at a time when I need them:
- Select the brush tool
- Show the brushes pallette
- Open the palette menu – the circle icon (with the stemless arrow)
- Select “Replace Brushes…”
- Navigate to the desired brush set
I’m sure there’s a majority of Photoshop users who’ve never actually used the brush palette or tool in this way – so consider yourself enlightened. Consider that free, no charge.
Anyway, I like to see an outlined preview of the brush while I’m drawing (or, more accurately, clicking), so I always ensure the CAPS-LOCK is off. This will give you a preview of the brush (so long as there are defined edges), looking something like this:
Here’s where finesse comes in handy. There’s a rule I go by whenever I create something: Just because you can, doesn’t mean you should. In other words, the key to the brush tool is finding a healthy balance of detail. Once I’ve found that balance, I stop and do what I should have done at every step:
SAVE!
Now all that’s left is a little bit of layer effects. I usually add an inner shadow and/or drop shadow.
To be continued.
The new Generation Church site has been featured on CSS Beauty and Godbit! Woohoo! (I have mixed emotions about this since the site is nowhere near complete, but this is what I get for releasing a public beta.)
In honor of the Divisional Championships this weekend, I’ve whipped up some support badges for you to steal and use on your website. They come in two variations, the two teams I’ll actually be rooting for: Broncos and Seahawks.
Broncos badge
Seahawks badge
(Please don’t link directly to those files – I don’t want to have to pull them off my host or block external bandwidth mooching.)
The markup is quite simple:
<p id="broncos"><a href="http://www.denverbroncos.com/">Go Broncos</a></p>
And the CSS is:
#broncos {
position: fixed;
top: 0;
left: 0;
width: 190px;
margin: 0;
}
#broncos a {
display: block;
height: 110px;
text-decoration: none;
text-indent: -5000px;
overflow: hidden;
background: url(/images/broncos_badge.png) no-repeat;
}
Since these are .png images, you may want to use some JavaScript magic to load Microsoft’s PNG support, or else IE/5-6 will show a greyish box behind the image. (Also note, once the alpha has been loaded by IE, the link no longer works.)
Have fun, and go Broncos!
Run, don’t walk, to download NewsFire 1.3.
WinTel 2.0 allows you to run Windows native on an Macintel machine. (via)
“Strike two for Apple,” says Joshua; and I agree. Apple has blatently ripped a music video from Postal Service with their recent ad (for the Intel iMac). What did that meeting look like?
Apple execs: We need something cool to promo our new Intel-based computers … ooh, something like that! (Gestures to the plasma TV on the wall showing MTV and “Such Great Heights” video playing.)
Ad firm: Done!
Gimme a break.
UPDATE: It would seem this is a false alarm, and the director of the music video is also the director of the Apple ad … who just repurposed it. I don’t know whether to be pissed off or understanding – the idea is still cool.
Concerning 2006, I said, “One ‘iPod killer’ will finally take some market share, but only because some superstar pushes it” – well at least Klegg is trying.
My favorite newsreader, NewsFire (beta), has been updated to version 1.3b54.
I’ve made some minor changes to Geek & Mild, as you’ll notice:
- New masthead (hoorah)
- Clickable feed link on homepage - I’ve always had a feed available, but just via the
<head>
- Ability to comment and link to Link entries
- Denoted Link entries (the green “link” icon)
- Some minor code/system enhancements
- Fixed some comment bugs/quirks that supressed Textile’s HTML conversions (that’s for you, Simon)
I still want to implement live preview for comments and upgrade to ExpressionEngine 1.4. I’m also developing an actual top-level navigation (you know, like a “real” website would have?) for about and archive pages. And, of course, I definitely want to add some kickin’ AJAX stuff … All that in the future.
Anything else I need to do, like, ASAP?
Did I speak too soon? Apple.com is back to 800px width. Think they got compaints? I do. (Take that, ALA!)
Well if this is any indication of what we can expect from the Apple-designed templates in iWeb, I guess we’re not so bad off. The .Mac blog doesn’t validate because of a non-existant (in XHTML 1.0) parameter in their JavaScript (“onload”), but it comes close. All Most of the CSS is inline, and looks like it gets optimized before it’s uploaded – how well it’s optimized is the question. The generated external stylesheet could definitely benefit from shorthand.
