Browsing Category

Design

Code Your Own Juicy Tabbed Slider (using the Nivo Slider)

Code Your Own Juicy Tabbed Slider (using the Nivo Slider)

A week ago, on our sister-site, Webdesigntuts+, we showed you how to design a “Juicy Tabbed Slider” in Photoshop. Today we’re going to show you how to actually code it in a few quick steps. No heavy CSS or Javascript knowledge required – promise! We’ll be using the popular Nivo Slider to handle the animation, so let’s dig in!

Save Time and Money by Systematizing your Photoshop Workflow

Save Time and Money by Systematizing your Photoshop Workflow

Repetitive tasks can quickly become tedious. As a designer, you probably often find yourself designing the same elements over and over from scratch. STOP!

Wasting time is so old-fashioned. It also means you’re wasting money! So, let’s review some ways that you can automate and systematize your Photoshop workflow. And be sure to download the project base for all of your new designs!

How to Build and Enhance a 3-Level Navigation Menu
videos

How to Build and Enhance a 3-Level Navigation Menu

Perhaps more than any other topic, I’m most often contacted about how to build cross-browser navigation menus. Understandably, the reason is because every web designer has built one at some point, if not during every project! Nonetheless, it can absolutely be a tricky task. In this video tutorial, I’ll teach you how to build an attractive cross-browser navigation menu; notable features include CSS3 gradients, multiple sub-menus, and jQuery animations.

How to Design a Website with Fireworks
plus

How to Design a Website with Fireworks: New Premium Tutorial

In this week’s Premium video tutorial, we’ll teach you how to design a home page for a website using Adobe Fireworks CS4. Over the course of the video, you’ll learn numerous tips and tricks to accomplish the final design, including how to work with a grid. Help give back to Nettuts+, and join Plus!

Quick Tip: Different Layouts for Different Widths
videos

Quick Tip: Different Layouts for Different Widths

It’s becoming more and more common for web sites and applications to provide different layouts dependent upon the user’s window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions.

In this video quick tip, we’ll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.

Quick Tip: How to Work with @Font-face
videos

Quick Tip: How to Work with @Font-face

Due to the fact that @font-face can be a bit overly complicated, it hasn’t caught on quite as much as it should. Once you start reading about licensing, different font formats, browser consistencies, it can potentially become more trouble than it’s worth.

But – in five minutes, I’ll try to simplify the process of working with custom fonts as much as I possibly can. Services like Font Squirrel help to make the task a cinch!

Design and Code a Website Design from Scratch – Part I

Design and Code a Slick Website from Scratch –
Part I

With the Internet becoming more and more popular every minute, a great-looking website is somewhat of a must-have. You could obviously pay a web designer to design one for you, but wouldn’t it be really cool to design and code it yourself? “Difficult”, you may say; but it’s actually not too hard once you’ve learned how to do it!

In this first part, you’ll learn how to design a neat-looking website that you can easily adapt to your business. It’s time to get started!