Powered by GoodBarry

“Ninja Training for Web Designers”

25 More Most Incredible Photoshop Tutorials

Tuesday, June 17, 2008 - Lawrence Hsu | BC

Like I’ve said before - it’s all about the process, not the end result. Don’t pass over a tutorial simply because you don’t like the finished product. Work the tutorial anyways to learn all the tools, tricks, and methods used in Photoshop to give some really neat effects.

25 More Most Incredible Photoshop Tutorials from Elite by Design

CSS Decorative Gallery

Tuesday, June 17, 2008 - Lawrence Hsu | BC

I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

CSS Decorative Gallery from Web Designer Wall

Unsharp Mask: How Do You Actually Use That Thing?

Monday, June 16, 2008 - Lawrence Hsu | BC

You never had to sharpen your photos when you were using film, so why do digital photos need it? Because film and digital cameras record images differently, young padawan. Read on…

For the lazy ones:

  • All-purpose sharpening: amount=85, radius=1, threshold=4
  • Sharpening for the web: amount=400, radius=0.3, threshold=0

Unsharp Mask: How Do You Actually Use That Thing? from Photojojo

Two Hidden Features New in Firefox 3

Saturday, June 14, 2008 - Lawrence Hsu | BC

For us developers, much has been said about the main improvements coming in Firefox 3. Stuff like built-in support for features web applications that work offline with locally cached data, and full-page zoom that makes it easier to design for visually impaired users, are all great to see, but in this post I’m going to take the opportunity to look at a couple of features that could be easily overlooked.

Firefox 3 finally supports display: inline-block!@#%$^

Two Hidden Features New in Firefox 3 from Sitepoint

Input vs. Button

Thursday, June 12, 2008 - Lawrence Hsu | BC

My latest redesign project at work was for Group Logic. Another company did the design and created static HTML templates. My role was to create a single header and footer to make maintaining the site easier, and to wrap the store and other dynamic applications in the new design. The company who designed it used images for the form buttons, and I found some interesting things while implementing them.

Input vs. Button by Trevor Davis

Creating Geometric Patterns in Illustrator

Wednesday, June 11, 2008 - Lawrence Hsu | BC

Sometimes when I create a pattern background in Illustrator I don’t end up with a Pattern Swatch. Instead, I create a Symbol of the repeating element and I create a whole background repeating this Symbol: duplicating 1, then 2, 4, 8, 16 and so on. It’s just not always that simple to create perfectly seamless patterns, especially with geometric forms. Today I’ll show you how to create a geometric pattern shape and fill a background with it using the method I just described.

Creating Geometric Patterns in Illustrator by Veerle Pieters

Top reasons your CSS columns are messed up

Saturday, June 07, 2008 - Lawrence Hsu | BC

Do not miss this post from Kyle Neath.

I believe the recent surge in popularity of CSS frameworks comes from a lack of basic understanding of the CSS box model and how it’s implemented across browsers. I wanted to share with you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework in no time flat, without all the cruft of having ten thousand column combinations available. Keeping these quick tips in mind at all times will allow you to do something I like to call defensive coding — and really that’s all CSS frameworks are: defensively coded snippets of CSS.

Top reasons your CSS columns are messed up from Warpspire

Learning JavaScript Programming Language through Video Lectures

Friday, June 06, 2008 - Lawrence Hsu | BC

These lectures are given by Douglas Crockford who is a senior JavaScript Architect at Yahoo!. He is well known for his work in introducing JavaScript Object Notation (JSON).

Learning JavaScript Programming Language through Video Lectures by Peteris Krumins

Using jQuery to Produce Rich User Interfaces

Thursday, June 05, 2008 - Lawrence Hsu | BC

All the animations used throughout the company site I’ve written with jQuery, the greatest JavaScript library on the planet (yeah, I went there). jQuery makes client-side scripting not only super-easy but a blast to write. I’ve written about jQuery before and how much I like it (I even recently gave a talk to that effect) but have long wanted to break down how it powers our little portfolio slider. (I won’t go into too much detail about jQuery itself — I leave finding introductory tutorials elsewhere on the intertubes as an exercise to the reader.)

Using jQuery to Produce Rich User Interfaces from OnWired

SEO Guide for Designers

Tuesday, May 27, 2008 - Lawrence Hsu | BC

According to a poll I conducted, just over 1 out of 10 people don’t think SEO (Search Engine Optimization) is mandatory as a designer; and what really surprised me is about 24% don’t even know what SEO is! If you’re among the quarter of people who don’t know what SEO is or understand how it can help you, you should really read this article. This is an SEO guide for designers who want to learn about making it easier for websites or blogs to be found by search engines. I’ll explain the common mistakes made by designers and developers. Then I’ll provide some basic tips that you should be practicing to optimize your site for search engines.

SEO Guide for Designers from Web Designer Wall

How To Create A "Mootools Homepage" Inspired Navigation Effect Using JQuery

Monday, May 26, 2008 - Lawrence Hsu | BC

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I've always liked the way the menu on MooTools worked. So in this tutorial we'll recreate that same effect ... but we'll do it in jQuery!

How To Create A "Mootools Homepage" Inspired Navigation Effect Using JQuery from Nettuts

HTML Email Signature with Embedded Image in OS X Mail

Monday, May 26, 2008 - Lawrence Hsu | BC

I accidently figured out how to create HTML signatures with embedded image in OS X so here's a tiny tutorial to show you how it's done.

  1. Create your HTML signature and embed the image.
  2. View the HTML signature in any browser.
  3. Select all (command + a) and copy (command + c)
  4. Open Mail -> Preferences (command + ,) -> Signatures tab -> Create a signature (+ below the second panel)
  5. Paste (command + v) in the signature panel (the third panel).
  6. To add a signature to an email account simply drag the signature into the email account (from second panel to the first panel).

Too easy :]

Create a Slick Tabbed Content Area using CSS & jQuery

Friday, May 23, 2008 - Lawrence Hsu | BC

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we're going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we'll achieve the same thing using the jQuery library.

Create a Slick Tabbed Content Area using CSS & jQuery from Nettuts

Understanding Channels in Photoshop CS3

Friday, May 23, 2008 - Lawrence Hsu | BC

Photographer Chris Alvanas wants to take some time to go over Channels. That's because understanding what they are and what they do is key to understanding what their potential is.

Understanding Channels in Photoshop CS3 from Layers Magazine

Web Monkey is Back!

Tuesday, May 20, 2008 - Lawrence Hsu | BC

Ahh I used to learn stuff from Webmonkey back in the days. Good to see it's back :)

The original web developer's resource has returned. Webmonkey has been completely redesigned, and we're ready to rock once more. Also, our entire content library is now hosted on a wiki, so every tutorial, reference page and code example is open for editing. Come on in and show us what you've got!

Webmonkey

53 Killer Photoshop Illustrator Effects and Tutorials

Tuesday, May 20, 2008 - Lawrence Hsu | BC

It’s always fun to experiment different techniques and learn how to work with various aspects of Adobe Photoshop to spice up boring pictures and make them into works of arts and masterpieces. So, if you’re interested in learning some new skills, whether you’re a beginner, intermediate or advanced user, these Photoshop and Illustrator tutorials are for you.

53 Killer Photoshop Illustrator Effects and Tutorials from Noupe

Custom Javascript Dialogue Boxes

Monday, May 19, 2008 - Lawrence Hsu | BC

I have put together a lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success. There is nothing to add to your page except references to the JavaScript and CSS if you choose not to incorporate them in your existing files.

Custom Javascript Dialogue Boxes by Michael Leigeber

Sliding JavaScript Dropdown Menu

Sunday, May 18, 2008 - Lawrence Hsu | BC

This lightweight JavaScript drop down menu script (~1.8kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. The script has been tested working in IE6, IE7, IE8, Firefox, Opera and Safari. The markup for the menu including the mouse events looks like the following.

Sliding JavaScript Dropdown Menu by Michael Leigeber

jQuery Examples - Horizontal Accordion

Saturday, May 17, 2008 - Lawrence Hsu | BC

In this example, I have created an accordion effect that reveals a caption for each thumbnail. I’ve done similar navigations like this in flash, so I wanted to see how it compared to doing it with jQuery.

jQuery Examples - Horizontal Accordion from Design Reviver

Multilevel Drop Down Navigation Menus: Examples and Tutorials

Sunday, May 11, 2008 - Lawrence Hsu | BC

Navigation menus are the most important element one should pay attention when designing a website. Web-developers can create user-friendly horizontal or vertical navigation menus using CSS. Javascript makes it possible to create more interactive, more responsive and more flexible navigation to any website.

Multilevel Drop Down Navigation Menus: Examples and Tutorials from Noupe

Recent Posts

Category

Archive

    Back to Top