Saturday, December 30th, 2006

illustrated shapes

daisey - illustrated shapes

from a couple years ago…
but it’s how I feel right now.

1 comment » design, illustration    

Friday, December 29th, 2006

Tutorial - CSS Pre-Load Hover Buttons

Yes, I’m still working on the music sharing site. I’m finally in Code Land vs. Photoshop, which always comes as a perfectly-timed change of pace.

This tutorial will come in a series of steps, since the player control panel is a combination of a few different controls.

First, let’s focus on the big juicy play buttons.


Download the demo.

Create your HTML code like so: (each “BTN” will eventually be replaced by the play, back, next and pause icons)

<div id="playerControls">
   <a href="">BTN</a>
   <a href="">BTN</a>
   <a href="">BTN</a>
   <a href="">BTN</a>
</div>

Next, create your horizontal button strip. This image will contain all 3 states of the button: normal, hover and select. An individual button, in this case, is 31 x 31, so the 3-state button strip will be 31 x 93.

I chose to make the button background transparent to avoid any weirdness once overlayed on the brushed metal background.
Name this image “btnBackground.gif”

Now you’re ready to apply the CSS styles to the anchor tags. 

<style type="text/css">
<!--

#playerControls a {
	display:block;
	float: left;
	width:31px;
	height: 31px;
	margin: 3px 9px 3px 0px;
	padding: 0px 0px 0px 0px;
	background: url("btnBackground.gif");
	}
-->
</style>

Basically, what we’re doing is making each a href link a 31 x 31 container, using the button strip as the background and clipping the image to ONLY show 1 button at a time, depending on the button’s state.

Now your anchor tag should look like a button.
Let’s add the hover property:

<style type="text/css">
<!--

#playerControls a {
	display:block;
	float: left;
	width:31px;
	height: 31px;
	margin: 3px 9px 3px 0px;
	padding: 0px 0px 0px 0px;
	background: url("btnBackground.gif");
	}

#playerControls a:hover {
	background-position: -31px 0;
	}
–>
</style>

This will scoot the background image over by 31px to reveal the middle button image when you hover over it.

Nice! Except the buttons are naked! We need to create the icons to drop on top of these button backgrounds.

Again, we want to stick with transparent images so it doesn’t override the button action happening below it. I made the icon overlays the same dimensions as the buttons, to avoid having to fiddle with inner padding and margins.

Once you make your transparent icon overlays, you’re ready to plug them into the href tags, as follows:

<div id="playerControls">
   <a href=""><img src="btnBack.gif"></a>
   <a href=""><img src="btnPause.gif"></a>
   <a href=""><img src="btnPlay.gif"></a>
   <a href=""><img src="btnNext.gif"></a>
</div>

Refresh and voila! Fancy hovering CSS buttons - using minimal images, which is always a good thing.

One finishing touch is to add the selected state.

<style type="text/css">
<!--
#playerControls .select {
	background-position: -62px 0;
	}
–>
</style>

Next… the CSS/javascript slider.


10 comments » tutorials, web design    

Thursday, December 28th, 2006

flyer design - heavenly noise

heavenly noise - flyer design

1 comment » design, music projects, heavenly noise, flyers    

Wednesday, December 27th, 2006

Lost Cat

Lost Cat - Mr. Moto

damn. we hadn’t seen him since Christmas Eve. his sister (Quasi) came home, safe and sound, but acting a little antsy… no Moto. next day… no Moto.

I made flyers and we posted them on every corner, every lightpole, bus stop sign, stop sign. Today, we got a response - “I’m responding to your flyer about the lost cat” - me, excitedly “yeah???” — “yeah, bad news, I found a little black cat in the street right in front of my house and buried him on Christmas Eve”

silence.

damn. All I could think was how lonely his sister is going to be without him. They used to play, clean each other, eat together, sleep together. Now she’s on her own. Mr. Moto… we’ll miss you little guy.

1 comment » random bits    

Thursday, December 21st, 2006

flyer design

the Smile Rays

Flyer design for the Smile Rays - this event is the AB’s cd release party, so the main focus of the design is the ABs. their aesthetic is organic and colorful, so I used a gradient “gauze” overlay and saturated colors to make it feel natural and worn.


Leave a comment » design, music projects, smile rays, flyers    

Wednesday, December 20th, 2006

cool portfolio site

carbonmadeLooking for an easy to manage portfolio site?

check out cabonmade

a nice high-res portfolio management site for photos, graphics, videos and flash. they have a free plan with 35 images, 3 projects. the actual portfolio page is nice and clean with little branding, and you can also create an XML feed of your images.
check it out…
lots of great portfolios to explore!


Leave a comment » design, freelance    

Wednesday, December 20th, 2006

smile rays - promo photos

the Smile Rays the Smile Rays

I’m DIGGIN’ the red wall!!!

We so desperately needed Smile Rays promo shots, so we took a few photos in the Springfield area. I played around with texture, bumped the contrast and added a radial halftone… which works well with the *rays* concept. Usually, I prefer black and white photography but the colors really add a lot of playfulness… definitely a vibe we’re going for.

That red wall hasn’t seen the end of us…

Leave a comment » music projects, smile rays    



Credits and stuff

© pixels and digital bits | Powered by WP 2.0.3. | Tree by Headsetoptions a minimal theme based on HyperBallad | Ingredients: XHTML + CSS | Top