Design Tips & Tutorials (Archive)

Page 3 of 3 (30 total articles)
  • January 23, 2008 in Design Tips & Tutorials

    Photoshop Tutorial: Quick Glass Buttons for the Web Designer

    For a clean, impressive looking button set that doesn't take up a bunch of design time, glass buttons are the way to go. And slapping together cool glass buttons like the ones on apple.com is extremely simple in Photoshop. I've been using this process for several years now and I know web designers will find it helpful. It's essentially three steps and I found that after I perfected the technique, I could fly through it in a matter of seconds.

  • January 9, 2008 in Design Tips & Tutorials

    Two Column CSS Layout: The Absolute Basics

    This tutorial is for the designer who wants to get acquainted with the basics of CSS layout. There are a lot of articles floating around with advanced CSS tips and tricks but there seems to be a gaping hole where the basic tutorials should be. An article like this would have been tremendously helpful to me when I first started into CSS layouts. If you're about to to take the plunge I'm sure this will be helpful for you.

  • November 28, 2007 in Design Tips & Tutorials

    How Bad Pagination Ruined Blockbuster's Cool Web 2.0 Site

    Ah, pagination... we use it so often we forget it's even there. We glide gracefully from page to page taking every click for granted. That is, of course, until we are jolted back to reality by a site that has it all wrong. Bad pagination can make you do and say things you ordinarily wouldn't dream of. It's absolutely infuriating.

  • November 23, 2007 in Design Tips & Tutorials

    Simple Animation With CSS Is The Next Logical Step

    Webkit recently posted an article on their blog Surfin' Safari describing a new set of CSS functions currently in the works. The purpose of these new functions is to allow animation using simple CSS attributes. Vitamin's comment about the venture was "Now I don't know why you'd want to, but hey, you can". I couldn't disagree more.

  • June 1, 2007 in Design Tips & Tutorials

    RoundedCornr: Rounded Corner and Gradient Generator

    RoundedCornr: Rounded Corner and Gradient Generator Let’s face it. Rounded corners are cool and square ones just ain’t so cool. So, you can use PhotoShop to painstakingly build each rounded corner, or you can just use a little CSS from roundcornr.com. I know that this is a tool that I could use daily at Liquid Design Media.

  • May 26, 2007 in Design Tips & Tutorials

    Two Quick CSS Tips That Will Keep You From Committing Suicide

    Having fought these battles and come very close to killing myself, I know how important these two tips are. 1. Padding is interpreted differently in IE than it is in Firefox. So in order to make sure your layout won’t break in one or the other, nest a div tag inside another div tag and give the inner div tag a margin. Now you have the same effect as padding. 2. Set “overflow: hidden” on all div tags that need to be a certain height. Otherwise IE will add some extra padding at the bottom of them and drive you out of your mind. If you’ve just decided to make the switch from table-based layouts to all CSS or you’ve being doing CSS layouts for a little while now, these tips will help you keep your sanity.

  • May 17, 2007 in Design Tips & Tutorials

    Embedding a Calendar into Your Website or Blog

    I’m actually posting this to just say how impressed I am with 30boxes.com. As I mentioned in my last post, I’ve been searching for a good online calendar that can be embedded into a site. Google calendar is pretty good, jotlet.com is a little better, but 30boxes.com just takes the cake. It’s easy to use and extremely easy to share/embed into a blog or website. The event input is intuitive so if you put “John’s Birthday” it automatically asks you for the year he was born and keeps track of how old he is. They also have an RSS mashup feature that doesn’t even require you to sign up. You just put in an RSS address and it automatically creates a calendar mashup of the items in the feed. I did it with my family blog and it even pulled in the photos I had posted and slapped them into the day they were added to the blog. What more could you ask for. Great job guys!

  • May 14, 2007 in Design Tips & Tutorials

    Embedding Your Flickr on a Web Site

    You’d think this would be an easy task but it’s really not. Oh yeah, it’s easy to slap a slide show up there, but what if you want to post photo set up on your web site that isn’t just a slide show. Well, after a lot of searching and quite a few “That’s almost what I’m looking fors”, I found PictoBrowser. It’s easy. It’s fast. It’s like the YouTube of photos. You just have to enter your user name and choose what photo set you want to embed, and out pops the embed code. It also resized very well so feel free to change the size of the Flash object once you embed it.

  • May 8, 2007 in Design Tips & Tutorials

    How to make sexy buttons with CSS

    I actually saw this link on the Style Grind blog. Great find! This article gives a very simple solution to make expanding buttons with just an "a" tag and a "span" tag.

  • May 2, 2007 in Design Tips & Tutorials

    Adding a Maps Mashup to Your Site

    Adding maps to a web site is a great way to bring a more interactive and personal experience to the visitor. At Liquid Desgin Media it’s become standard practice to embed a Google map with directions on every site that we produce. Now, with the ability to easily add photos and videos to maps, we are already seeing some very creative mashups out there. With sites like palatial.com and communitywalk.com, you can add a lot of mapping capability to your site for free including the ability for your visitors to contribute to the map. Another good way to get your map up on your site fast is to use the new “My Maps” feature at maps.google.com and then use a service like ongopongo.com to embed the map that you create into your site. If you are willing to do a little coding, you can use yahoo! maps and do a mashup like I did on fightmap.com.

[BEGIN] [< 1 2 3 [Next>>] [END]