I have more IT geek friends than I have designer friends, and some of these geek friends are starting to dabble a little in design. Many are intimidated because they don’t know where to begin, or because the interface is so foreign to them, they don’t even know what tools are available. This post is for them – and anyone else who feels like they’re “not creative enough” to design anything worthwhile in Photoshop.

If you don’t believe me, the lead image in this article was composited entirely in Photoshop – and there’s even a tutorial to show you how it was done. You’re wrong, I’m right. Read on.

Every one of the tutorials in this list are perfect demonstrations of how easy it can be to come up with amazing designs without years of Photoshop know-how. Each one features a stunning end result, and step-by-step directions that show you exactly how to get there yourself. I promise you, you really can do more than you imagine in Photoshop. Yes, even you.

A quick note: I strongly, strongly recommend actually going through these tutorials step-by-step. At the end of the tutorial, your end result may not look exactly like theirs, but I bet you’ll be impressed at what you managed to pull off. Plus, you may find yourself inspired half-way through, and take your design in a totally different direction. You just won’t get nearly as much out of these if you don’t actually spend some time working them.

Website Design

Would you think you were pretty hot shit if you could whip out a design like these? Keep reading – you can, and you don’t have to be a design guru to do it.

1. Design Reviver

2. PSDTuts

3. PSDTuts

4. PSDTuts

5. PSDTuts

6. PSDTuts

1. Premium WordPress Theme Design Part 1 – The Photoshop Mock Up – This is my all-time favorite Photoshop tutorial, especially for creating website designs.  The author takes you through the the process starting with a blank canvas, and ending with a fantastically rich design. He even shows you where to get the stock art he used, so you really can follow the tutorial step-by-step. What’s particularly awesome about this tutorial is that once you’ve created the Photoshop file, the next parts in the series tell you exactly how to slice the images, code the CSS/XTHML, and convert it into a WordPress template! This is the first place I send any code geeks who want to learn how to design websites.

2. Create a Magic Night Themed Web Design from Scratch in Photoshop – Another fantastic step-by-step tutorial with links to download each of the images used. Incredibly detailed and easy to follow, even for novice Photoshoppers. This tutorial demonstrates how subtle color shading, text and light effects can create an ethereal design from a little stock art and elbow-grease.

3. How to Create a Grunge Web Design in Photoshop – Another fabulous artsy-grunge web design tutorial. This one goes into an incredible level of detail, and is an excellent start point for any Photoshop noob. Every nuance is clearly documented and explained to show you

4. How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds – If you’re more into straight lines and clean edges, and feel like the first two examples were a little froo-froo for your style, this tutorial is priceless. In nine simple steps, you learn how to transform a blank canvas into a tight, clean web design. An added bonus, they show you results from quite a few variations of color and images, to show you how just a few tiny tweaks can completely change the feel of the design.

5. Design a Cartoon Grunge Web site Layout – While this tutorial won’t show you how to make the actual cartoon that forms the focal point of the design, it shows you how to do just about everything else. This is a great tutorial that walks you through a fun, lighthearted design with a casual flair.

6. Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it! – This tutorial has the same easy walk-through style as the others, plus it shows you how to create the textured paper background from scratch. What you end up with is a business-casual design with just the slightest hint of hip grunge.

Photo Composites & Effects

Think these photo manipulations are way too advanced for you? Think again! There were NO special filters used for these – everything you need is in Photoshop, and these tutorials walk you through it step by step!

1. Design Reviver

2. PSDTuts

3. PSDTuts

4. Abduzeedo

5. 10Steps

6. 10steps

7. 10steps

8. Anothera

9. 10steps

10. PSDtuts

11. DigitalArts

12. 10steps

13. DigitalArts

14. PSDlearning

15. PhotoshopLady

Additional Resources

If you liked these, be sure to hit the links below for more amazing (and amazingly easy) Photoshop tricks:

• 50+ Excellent Body Enhancement Photoshop Tutorials
• PSDTuts
• Photoshop Lady
• PSHero
• PSHero – Text in Stitches
• Painting in Photoshop
• Old Paper Layout

Also check out:

If you’re newer to designing websites, you’ve probably been taught CSS layout design and it’s already become a part of how you do things, but back in the day, CSS just wasn’t reliable enough to use as primary site layout for sophisticated designs. If you’ve been designing for at least 5+ years, you’ve (hopefully) already been using CSS for quite some time, for typographical formatting, basic page attributes, and so on, but may have still relied heavily on tables for the actual structural layout.

Now that solid, all-CSS layouts are a reality, where does an old-timer start in getting their CSS up to snuff to actually handle complex all-CSS layouts? It can be intimidating to get started, but thanks to the amazing community of design bloggers, you’ve got some great resources at your fingertips.

Note: Everything covered here is making the assumption that you are basically coding by hand and not using a WYSIWYG editor for layout – and that you have at least a basic understanding of how CSS works. If you’re interested in learning how to create CSS-based layouts in Dreamweaver, there is a great tutorial (including source files) available here, and another dealing with CSS layouts by way of Photoshop and Dreamweaver here.

Before You Begin

Making this transition is TOTALLY do-able, no matter how long you’ve been designing with tables – it just requires a little patience. When I first started web design, there were were only a handful of books on HTML (nothing on CSS) and not a web design class to be found. (Yes, and dinosaur’s roamed the earth, and cars were a dollar. Hush.) If I could make this transition, anyone can.

First, I think its important to demonstrate exactly how far CSS has come, and how incredibly robust it is for site layout. One of the best examples out there is CSS Zen Garden, which shows you multiple site layouts that are all very different, that all use the exact same HTML file, swapping only the CSS file. Click through to the different designs, and it won’t take long for you to see just how far CSS has come.

Taking the Plunge

The very first tutorial I would recommend is called Creating a CSS Layout from Scratch, on the Subcide web site. This is a long tutorial, but worth every page if you actually follow the steps. The author does a fantastic job of explaining why you use each and every attribute, how it impacts the design step-by-step, and potential pitfalls you might run into. It actually moves a lot faster than you might imagine, and you can get through it in about 20 minutes if you’re actually making changes to a sample file as you go (which I highly recommend myself, being a visual learner.) Follow the steps, making the changes discussed, and previewing your changes every time, so you get a clear idea of how each little CSS change makes a big impact on the end-result.

Also be sure to check out the Holy Grail article by A List Apart. In one page, you’ll see exactly how to create a liquid 3-column layout with very simple code.

Another great step-by-step, real-world CSS layout tutorial is by Webreference which walks you through a specific layout goal, providing code and explanations along the way.

Or, if you don’t need such a granular approach, SitePoint’s article, Breaking out of the Box with CSS, has a similar step-by-step method.

Also be sure to check out this list of 12 PSD to HTML/CSS tutorials.

An aspect of CSS design that is absolutely critical but can be a bit confusing for newbies is the float. Smashing Magazine does a great job illustrating where floats are appropriate, which ones you need where for a specific end result, and known bugs/workarounds in their article CSS Float Theory: Things You Should Know. Floatutorial is another great step-by-step that walks through how floats work in a very simple and visual manner. That one doesn’t go into quite as much detail as the Subcide tutorial does, which may be better for you if you feel you’ve already got a decent handle on CSS concepts, but might be confusing to someone a little greener.

One way you’ll really get a good idea of how CSS works for layout is by checking out some of the existing, semi-standardized layouts. You can use these as templates for your own designs, or just observe the different ways people have solved similar problems using CSS. There’s a great list of sample CSS layouts available on the Noupe website, and a list of 40 CSS layouts available on Mashable.Com. If those examples are a little too detailed and confusing, be sure to check out the Little Boxes demo, which shows you a small collection of very basic layouts (one box, two box, three column, etc) and then slightly more advanced variations.

Next Steps

Once you’ve mastered the basics, you should try creating some simple layouts from scratch using your newly acquired powers. Once you’ve got those nailed, you can create more sophisticated samples, or convert an existing table-based site into a CSS-based site, with a little help (or maybe more than a little help) from this tutorial from Liquid CSS. Incidentally, that tutorial does a great job of illustrating how the z-axis works in CSS, a concept that can be a sticking point for some people. Doing a table-to-CSS conversion will be time-consuming (and at times, possibly more than a little frustrating), but it will be great practice (since you already know what the site is supposed to look like) and will give you a practical reason to go back and update some of your old, bloated table-based layout code. Win win!

Soon you’ll be ready to check out some more advanced concepts in CSS, including fancy lightbox image effects and graphs, navigation menu image rollovers, prettier form buttons, reliable image-based buttons, sexy image buttons, and CSS speech bubbles. You may already be using some of these within your table-based layout, but how they work (or occasionally don’t work) may make a little more sense to you once you’ve gone through the process of learning CSS layout. Two more gems for great tips and techniques are Using CSS to Do Anything and 101 CSS Tips of All Time, both from Noupe.

I strongly recommend checking out Smashing Magazine, Noupe.Com, and CSS-Tricks.Com for some of the most thorough and advanced tips, tricks and tutorials you’ll find online. Add their RSS feeds to your newsreader if you haven’t already.

Best Practices

Like any other new technology (and by new, I mean new to you), reading up on and implementing established best practices will go a long way. There is an outstanding breakdown of best practices in the Smashing Magazine article 70 Expert Ideas for Better CSS Coding. Seventy may sound like a daunting number, but many of these tips address workflow, naming conventions and other aspects that are less confusing as learning the actual CSS, but will save you tons of time as you begin to make CSS more of a workhorse in your own designs. (I’m a big fan of having strong fundamentals, planning and workflow, so I may be a little biased here, but its served me well over the past fifteen years of developing websites professionally.)

Many of these tips are not for the faint of heart, and will require a pretty solid understanding of CSS before they will be meaningful, so you may want to get some practice in before tackling this article.

CSS Frameworks

Now that you’ve got a decent handle on CSS layout principles, you may want to look into using a CSS framework. (I leave this part for the end because understanding the fundamentals is key, and it’s tempting to skip right to using a framework instead of teaching yourself how to do it right on your own.) There are several decent CSS frameworks out there, each with their own pros and cons.

If you’re not sure what a CSS framework is, the Wikipedia entry says it well:

A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks (usually packaged as external .css sheets inserted into the header) package a number of ready-made options for designing and outlaying a webpage.

Wikipedia also has an extensive list of available CSS frameworks. Before you jump head-first into the CSS framework shortcut, Smashing Magazine has an excellent overview of CSS frameworks, including pros and cons (of which there are many on both sides), and a brief review of some of the more popular ones. The article is from 2007, but the principles remain important and valid today. If CSS franeworks interest you, you may also want to check out the blog post and comments on this article on the Monday by Noon website.

I personally almost never use CSS frameworks, for many of the reasons outlined in the Smashing Magazine article, but that absolutely doesn’t mean that I discourage you from investigating them and using them as a tool where appropriate.

Conclusion

Not that I necessarily agree with this website, but it makes me chuckle every time I see it. Obviously, there may be times when you’re under deadline, and you just don’t have the luxury of learning under the gun.

Realistically speaking, if you were to devote your full attention and effort to the basics tutorials here, making sure to actually follow along and do the code step-by-step, you would have a pretty decent grasp on pure CSS layouts within several hours. Several hours might seem like a long time to spend on this, and you might be looking for a shortcut, but if you really want to understand it, it’s worth investing the time, especially if this is what you do for a living. Find the time. It’s important.

Also check out:

While its certainly possible to do this on your own in Photoshop, this online conversion does such a nice job, I can’t imagine doing it manually. There’s nothing to download, and the conversion is free, so check it out!

Bakamatsu Koshashin Generator via [Lifehacker]

Also check out: