20 Useful Web Design Articles, Generators and Tutorials

Here are twenty articles, generators and tutorials on Photoshop, CSS, PHP and HTML that have helped me have the knowledge that I do today. Some are basic, talking about the difference between CSS ID’s and classes, and others are more in-depth, such as the “Create a Sleek, High End Web Design from Scratch” tutorial, that covers everything from the Photoshop concept to the final XHTML and CSS valid end result. Simple or not, I found these sites to be more useful than most, and now I am sharing them with you.

---

CSSTextWrap.com – CSS Text Wrapper BETA

“The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website”.

---

EasyKiss123.com – Easy setup of Login, Registration and Password Protected areas on your website

PHP:

“This video tutorial will walk you through setting up a registration and login system for your web pages. You can then password protect any pages you desire on your website.”

---

Tutorials007.com – Clean Site Layout

“In this tutorial you will learn how to make a clean website layout. Main motivation for this design was to create a simple, clean designers community design.”

---

Corz.org – More .htaccess Tips and Tricks..

Mod_rewrite is a very useful tool to make your website or web application browser-friendly and easier to remember for visitors. It works by sort of “masking” the real URL, such as if you had a website PHP system that looked like: http://elitenick.com/index.php?page=about, mod_rewrite could change it to http://elitenick.com/about.html. See the .html? You can even fake extensions. This article explains a lot about mod_rewrite and greatly helped me understand what the possibilites were.

---

KromeFX.com – The Amazing Pen Tool

“A lot of tutorials tell you to use the pen tool; this one will show you HOW to use the pen tool. Creating true vector shapes, partial pixel selections, curvature modification, and saved paths are just some of its features.”

---

MickM.com – Code Snippets: PHP

I had a hard time finding a site that showed how to get PHP to cut off text after a certain amount of characters until I found this post on MickM.com. Thanks guys!

---

NetTuts.com – From .PSD to HTML – Building a Set of Website Designs Step By Step

“Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!”

---

About.com – Absolute vs. Relative – Explaining CSS Positioning

CSS Positioning can be a confusing and somewhat difficult to understand concept at first. This tutorial was one of the few that really broke it down for me and helped make it make sense.

---

PSDTuts.com – Creating a Cool 3D Web Design Effect

“In this tutorial I will show you some very easy techniques, using gradients and layer styles, that we can use to produce nice subtle 3D effects in our web designs.”

---

Tizag.com – CSS Classes VS ID’s

“There is often confusion about when it is appropriate to use CSS IDs and when CSS Classes should be used instead. This lesson is geared to display the differences, as well as provide more information about CSS IDs.”

---

WebCredible.co.uk – Applying CSS to Forms

“Forms are an essential part of interaction on the Internet but they can look rather drab. With CSS we can position form items so they all line up nicely and add a bit of colour to jazz them up.” This article was published in 2004 and still helped me out!

---

SmileyCat.com – How to Create a Block Hover Effect for a List of Links

“Among the many things to like about Veerle’s redesign of her blog is the way she does the hover effects for lists of links, such as those in her “approved” section. Rather than force others to wade through Veerle’s CSS (wow, that’s quite a style sheet!) I thought it’d be helpful to show how to create this “block hover” effect.”

---

PSDTuts.com – Elements of Great Web Design: The Polish

“When I put together designs, I usually do so in two phases – Layout and Polish. During the layout phase, I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage – the Polish – I go over the design and adjust colors, type treatments, shadows, layers, and generally clean it all up. In this first of a series of tutorials on web design, we’ll be looking at the Polish.”

---

Easy-Designs.net – Select Something New, Part 1

“So you’ve built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You’ve mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your <select>s are. Well, today we’re going to explore a way to silence that little voice and truly complete our designs. With a little DOM scripting and some creative CSS, you too can make your <select>s beautiful and you won’t have to sacrifice accessibility, usability or graceful degradation.”

---

BarelyFitz.com – Learn CSS Positioning in Ten Steps

“This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.”

---

456BereaStreet.com – Turning a list into a navigation bar

“I’ve received a couple of requests for a description of how I created the navigation bar that is currently used on this site. The CSS used isn’t all that advanced, and I hadn’t really thought about describing it in detail, but after being asked about it I decided to do a write-up.”

---

WarpSpire.com – Top reasons your CSS columns are messed up

“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.”

---

Phoenity.com – CSS horizontal navigation list

This is a short and sweet tutorial with nice examples, showing how to make a navigation bar using CSS. You can take it further with images, and more effects of your own.

---

PSDTuts.com – Create a Sleek, High-End Web Design from Scratch

“In this tutorial, we’ll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.”

---

NetTuts.com – Build a Sleek Portfolio Site from Scratch

“There’s nothing like building an entire site to show you a good overview of how a CSS layout should work. Over at PSDTUTS we’ve got a tutorial where you design up a sleek, high end web design. In this tutorial we’re going to take that PSD file and build it with some nice clean HTML and CSS.”

More resources to come soon! As always, you can subscribe to my feed at Feedburner.com/EliteNickcom or subscribe to the feed through e-mail using the form on the right side of my site.

---

You may also be interested in reading:

• How to be a Better Web Designer
• New Tutorial: How to Design and Implement Marius Roosendaal-like Button Bars
• Wordpress: Customize the_content(); to Generate Your Own HTML/CSS Image & “More” Link
• Anatomy of a Website Redesign
• Top Tips for Beginning Web Designers