testimonials

Design 101: Creating a Website

August 16, 2009 at 11:39 pm | Design, Design 101, Design Tutorials, Tutorials, Web Development | 5 comments

So you want to make a website? Anyone can throw together a simple site using a WYSIWYG editor like Dreamweaver or Microsoft Expression Web, but that usually results in non-valid code and a very “cheap-looking” website. Taking a design and turning it into raw, standards-compliant code may seem like a daunting task, but after you get through this tutorial, you’ll be using “DIV”s and styling with CSS like you’ve known it your whole life! That’s right, I said DIVs, no tables here (don’t worry if you don’t know what a div is)! This is a massive 4-part tutorial that will teach you the very fundamentals of design and give you the tools you need to make professional, high-caliber websites. It will walk you through conceptualizing the website, designing it, turning it into valid XHTML/CSS and lastly coding it to the blogging software WordPress. We’ll make a web designer out of you yet!

(more…)

Creating a Website (Part 4: The Coding)

August 16, 2009 at 11:22 pm | Design 101, PHP Tutorials, Tutorials, Web Development | No comments

Congratulations, you’ve made it to the final segment of this tutorial series. In the first part, we conceptualized our website. Then we designed it. After that, we wrote the XHTML and CSS for it. Now it’s time to turn it into a WordPress template using some PHP.

(more…)

Getting Rid of the Dotted Border on Links

August 13, 2009 at 10:01 pm | CSS, Tutorials, Web Development, XHTML/CSS Tutorials | No comments

FireFox’s default stylesheet adds a dotted border around images when they are clicked. It can really detract from a website’s design, especially when the image is indented and the border comes all the way from the left of the page. How can you remove that border? It’s actually really easy to do.

dotted border

(more…)

Creating Contact Forms With XHTML

August 13, 2009 at 12:02 am | CSS, PHP, Programming, Tutorials, Web Development, XHTML, XHTML/CSS Tutorials | 3 comments

Here’s another nice tutorial for beginners. In this one we’ll write the markup for a simple contact form that you could use on a website. Nothing too complicated or fancy, but we’ll talk about how we can add some nice effects to it easily using CSS. We’ll use PHP to have the form send an email when it’s filled out. I’ll also talk about what we can do for form validation.

(more…)

Hover Effect Using JavaScript

August 10, 2009 at 9:36 pm | JavaScript, JavaScript Tutorials, Programming, Tutorials | No comments

Here’s a pretty simple JavaScript tutorial. This script will allow us to change images on mouse over and mouse out, letting us create a nice hover effect. I’ve used this technique on several sites that I’ve designed. We’ll also take a look at how we can pre-load the images to reduce lag time in the hover. Here’s the end result. Let’s get started.

(more…)

Creating a Website (Part 3: The Markup)

August 7, 2009 at 1:48 am | CSS, Design 101, Tutorials, Web Development, XHTML | 1 comment

In the previous part of this series, we created a design for a travel blog in Photoshop. Now it’s time to turn that design into code. Open up your web development application (I’ll be using Dreamweaver) and open up the design in Photoshop and let’s begin (if you skipped the design segment and would like to download the PSD click here).

(more…)

Creating a Website (Part 2: The Design)

February 22, 2009 at 10:03 pm | Design, Design 101, Design Tutorials, Tutorials, Web Development | 8 comments

In the previous part of this tutorial, we conceptualized our website, which is a travel blog,  by deciding on a color scheme and structure and by brainstorming some ideas. Now it’s time for the fun part, designing! Open up Photoshop and let’s start. (more…)

Design 101: Creating a Streak of Light

February 20, 2009 at 6:48 pm | Design 101, Tutorials | No comments

This is a cool technique and really easy to do. I used it in Clarion Media’s current splash/under construction page:

cm1

(more…)

Creating an Exhaust Effect

February 13, 2009 at 1:18 am | 3ds Max, 3ds Max Tutorials, Tutorials | No comments

This is a quick and easy tutorial for creating a cool exhaust effect in 3ds Max. It’s great for using with jet airplanes or other vehicles with jet engines, but it has a variety of other uses as well. To do it, we’ll use a particle system called “Super Spray”. When we’re all done, this is what we’ll get:

(more…)

Creating a Website (Part 1: The Concept)

February 11, 2009 at 8:10 pm | Design, Design 101, Design Tutorials, Web Development | 3 comments

Before a designer jumps straight into designing, it’s generally good practice to first understand what direction you want to take with your website. What goal is the website trying to achieve? What’s the site’s theme? What will it look like? How will it be structured? These are some of the questions you should ask yourself before you even touch Photoshop. This is what I call the conceptualizing process. Thinking about these questions will help us in our design decisions and give us focus. Otherwise, the design process becomes, more or less, a series of trial and error (although trial and error is still very much a part of designing). (more…)

Next Page »