Discover How You Can Make
More Money as a Web
Designer and Find High-Paying Clients

My name is Conrad Feagin and over the past 8 years, I’ve taught over 30,370 people to make more money using the best web design tools on the market.

Now I’ll teach you the techniques for quickly and easily building websites so you can make 4 times more than other web designers.

Plus, my income-increasing methods are simple, easy-to-follow, and work for beginning or advanced web designers.

32058 Readers

Free Updates via Email, Facebook, or Twitter!

25 Tutorials for Advanced Freelance Web Designers

Posted December 3, 2008 in Tools/Resources, Web Design

In the world of web design, a good tutorial can literally be a godsend. But it’s often hard to find a suitable tut, and sometimes it seems like we’re just stuck reading the same stuff over and over again.
 
When it comes to advanced design, finding the right stuff can be even harder. Advanced effects require a much more in-depth tutorial, and often writers aren’t willing to go into the detail needed.
 
To help the situation, we’ve tracked down some of the best articles written by the web’s top designers. Here are 25 tutorials for advanced web designers:

Advanced Web Design Tutorials

Trendy Geometric Lines

Learn how to create the popular geometric line effects used in web and print design.

 

Mastering Keyboard Shortcuts

Keyboard shortcuts are a must for anyone in advanced web design, and this tut has enough information for even the most seasoned pro.

 
Create a Dream Design with 3D Typography

Create 3D organic text and an accompanying design with this excellent tutorial.

 
9 Information Design Tips to Make You a Better Web Designer

Learn how to base your website’s visual presentation on a solid information architecture.

 
Grid Masking

This tutorial explains how to create a grid masking effect that can be used in print media or on the web.

 
Simple jQuery Spy Effect

Create a simple jQuery spy effect like that used in the Digg Spy tool.

 
How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

How to create a single layout and then transform it into multiple different designs using png transparency.

 
5 Ways to Spice up Your Images with CSS

From captions to stylish borders, this tutorial shows you how to use css to spice up your images.

 
The Grid System

Almost every grid-related resource imaginable in one place — including tutorials, sample files, and more.

 
How to Mimic the iGoogle Interface

A very detailed tutorial for creating a design that mimics the interface used in iGoogle.

 
Create a magical rainbow color flame in Photoshop

Learn how to create a ‘magical’ flame with multiple glowing colors.

 
CSS Gradient Text Effect

Create a gradient effect using only CSS and text. No need to remake every image for glossy headlines anymore.

 
Writing an Interface Style Guide

This article by ALA gives good reasoning and good instructions for creating an Interface Style Guide for your websites.

 
7 Principles of Effective Icon Design

Quickly become an icon design pro by following these principles of effective icon design.

 
Enhance Your Web Development Using the Firefox Web Developer Extension

The Web Developer Extension for Firefox is probably in any advanced designers toolbox, and this article provides 9 more ways to use it to your advantage.

 
A Simple Guide on How to Effectively Talk to Clients

A simple set of instructions for dealing with clients — for those unfortunate times you’ve got to pull away from work to deal with them.

 
Creating a Techno Background with Illustrator and Photoshop

Several background experiments that could come in handy with web design.

 
Rapid prototyping in Fireworks CS3

A quick guide to using Fireworks CS# for rapid prototyping purposes.

 
Elements of Great Web Design: The Polish

Learn how to improve any design by focusing on the finishing touches.

 
Premium WordPress Theme Design — The Mock Up

The first part in a series on creating a premium WordPress theme.

 
Creating a Hand Drawn Website Layout

Learn how to create a trendy hand drawn layout using photoshop and several custom brushes.

 
Advanced Glow Effects

Learn how to create advanced glow effects on lines or text.

 
Trendy Circle Brush in Photoshop

Creating a trendy circle brush in Photoshop is easier than you might think.

 
Build a Sleek Portfolio Site from Scratch

Learn how one of the web’s top designers creates a portfolio site from start to finish.
 

Do you know of any tutorials that belong in this list? Let us know in the comments.

 

Related posts:

  1. 5 Other Services all Freelance Web Designers Should Offer!
  2. 200+ Resources for Freelance Web Designers
  3. Freelance Designers: Is Name Recognition Important for Success?
  4. How to Create Raining Clouds – Adobe Tutorial
  5. How To Get Paid Freelance Work While You’re Still A Design Student

About the author: Mason Hipp is a designer, entrepreneur, and writer. He is co-author of the Book The Unlimited Freelancer, and has just recently launched a collection of premium graphic resources for web designers called MediaLoot. Follow him on twitter @MasonHipp



 
The Unlimited Freelancer is Now Only $19

Unleash the true potential of your business. Get The Unlimited Freelancer and start transforming your freelance business,
now only $19.

69 Comments
  • User Gravatar
    serj
    December 3rd, 2008 at 2:04 pm

    interesting, intriguing and very beautiful but will you consider web design a art or just a way to communicate something to a target market?
    anyone knows that when you crate a web grafic, like a logo you implement marketing , when you design a header or introduce a design that has only 3 colors, for exmaple it’s created around marketing.
    the question that bugs me, when does the marketing stop and when can you adress to a design as art?

    mason?

  • User Gravatar
    Janet Martin
    December 3rd, 2008 at 3:30 pm

    Thanks! This is a great collection. I’m not a designer but feel as a web writer the more I know about design the better. These are very helpful.

  • User Gravatar
    Doug Heacock
    December 3rd, 2008 at 4:07 pm

    Great article, Mason, and a great collection that I will definitely bookmark for later. Thanks!

  • User Gravatar
    joyoge designers' bookmark
    December 3rd, 2008 at 5:32 pm

    nice list, thank you so much…

  • User Gravatar
    Mason Hipp
    December 3rd, 2008 at 7:14 pm

    Hey everyone, thanks for the positive comments :-)

    @Serj — The line between marketing/business and art is very fine when it comes to web design. Almost every design project will have some constraints that need to be worked around, but how constraining they are will vary by project. Also, it varies a lot by the designer. Some designers will only work on artistic or very creative projects, while others are happy to apply their creativity to a more business-oriented project.

  • User Gravatar
    Shawn Bouchard
    December 3rd, 2008 at 8:15 pm

    Hi Mason,
    Thanks for putting this list together. My company’s blog offers our customers this kind of information. I’m going to add your site to our resource list. Thanks!

  • User Gravatar
    aljuk
    December 4th, 2008 at 5:45 am

    What exactly does learning to “create a ‘magical’ flame with multiple glowing colors” in photoshop have to do with web design (aside from nothing)? “Advanced glow effects”???

  • User Gravatar
    wallpapers
    December 4th, 2008 at 6:56 am

    advanced glow! nice!

  • User Gravatar
    Mason Hipp
    December 4th, 2008 at 10:22 am

    @aljuk — Do you use creative visual imagery in your web designs? If so, then things like the glow and flame effects could come in handy.

  • User Gravatar
    Análisis
    December 4th, 2008 at 10:46 am

    Congratulations, good post!.

  • User Gravatar
    Henry
    December 4th, 2008 at 12:39 pm

    Excelent…!!! Great post
    http://www.crea-t.net

  • User Gravatar
    Clara E Mejia
    December 4th, 2008 at 9:46 pm

    Thanks!!!!! It’s an incredible list. It;s a wonderful tool for learning and improving our skills. Thanks again.

  • User Gravatar
    Rhys
    December 5th, 2008 at 2:07 am

    This has to be the stupidest list in existence.

    Yes, as an advanced web developer, I’m all about the advanced glow effects. Oh, and I’m glad i can now cross that advanced techo text barrier that I’ve been hitting (not to mention the ever impossible CSS gradient effect).

  • User Gravatar
    Mason Hipp
    December 5th, 2008 at 2:26 pm

    Thanks everyone for the positive comments, I hope this list will prove beneficial to you :-)

    To the naysayers, I’ll happily consider your suggestions when I’m writing my next roundup.

  • User Gravatar
    Raymond Selda
    December 5th, 2008 at 9:50 pm

    Great list! If I can read articles like this everyday then I don’t need to go to design school. hehehe. Thank you for this post.

  • User Gravatar
    Jared Walker
    December 6th, 2008 at 9:46 pm

    Thanks for the list. Some very interesting tutorials and a nice variety.

  • User Gravatar
    Mr Javo
    December 6th, 2008 at 10:22 pm

    Thanks for sharing these awesome tutorials!

  • User Gravatar
    Alberto Villalobos
    December 7th, 2008 at 5:36 am

    Good list, but i´ll dont call it a list of tutorials for advanced web designers, i could say i am a benginner and i have read many of these, i think css, xhtml and wordpress template are more apropiate to this list.

  • User Gravatar
    Eric Shafer
    December 8th, 2008 at 4:55 pm

    Tracked back from here: http://www.presidiacreative.com/web-picks-1/

  • User Gravatar
    piskorapci
    December 12th, 2008 at 8:45 am

    thankx çok güzel olmuş devamını bekleriz

  • User Gravatar
    cutt
    December 24th, 2008 at 1:36 pm

    great post!
    Thanks

  • User Gravatar
    Sean
    January 9th, 2009 at 8:51 pm

    I’ve had this list saved in bloglines forever – finally getting to it and reading several here. Thanks for the great post.

  • User Gravatar
    dave
    January 13th, 2009 at 4:56 pm

    thank you, some GREAT stuff here that ive been looking for

  • User Gravatar
    Chiang Mai Web Design
    January 27th, 2009 at 2:47 am

    Great Tutorials. thanks.

  • User Gravatar
    wazime
    February 23rd, 2009 at 5:02 pm

    Thanks for a great list of resources.

  • User Gravatar
    ehis
    October 7th, 2009 at 11:15 am

    how do i save links to database

  • User Gravatar
    egyptian web designer
    October 27th, 2009 at 7:12 pm

    amazing list thanks you very much
    first one is my best

  • User Gravatar
    SWP
    November 3rd, 2009 at 1:56 am

    Nice resources. Thanks for compiling this list.

  • User Gravatar
    seo
    December 13th, 2009 at 8:42 am

    realy love this blog post,can i bookmark you site, :))

  • User Gravatar
    swan
    January 3rd, 2010 at 4:52 pm

    thanks ! these are really helpful !!
    i was also pretty impressed by
    http://www.statsmogul.com/www.paintshopblog.com
    u should check it out

  • User Gravatar
    Chris
    February 7th, 2010 at 3:17 pm

    very useful!

  • User Gravatar
    Fun Spill
    July 31st, 2010 at 1:43 am

    Awesome! Awesome! Awesome!

  • User Gravatar
    load shedding
    August 16th, 2010 at 6:06 am

    Great collection of stumbles, and I always get a lot of great SEO info from your site. Thanks for the contributions to the web community, and keep up the great work!!

  • User Gravatar
    kamal mohammed
    February 10th, 2011 at 2:55 am

    I need to practice the web page developing using c# so would you help me?

  • User Gravatar
    web design
    February 15th, 2011 at 10:34 am

    awesome….really a good collection…thanks for sharing this…

  • User Gravatar
    WebsiteTemplates
    March 17th, 2011 at 5:37 am

    this article was written 3 years ago, but even one is very useful and interesting. I think i will use some of these tutorials for my web design blog http://blog.websitetemplates.bz/
    hope it will do it better and sparkling

  • User Gravatar
    chris george
    April 19th, 2011 at 4:13 am

    As a Web Design Company India CYBERMOUNT is one of the fastest growing web site designing company spreading wings in USA UK and India. Expertise in Web Designing, Web Applications and Online Marketing.

  • User Gravatar
    Skyu
    April 28th, 2011 at 10:41 pm

    Tutorial is good job.. :)

  • User Gravatar
    wed developer
    January 18th, 2013 at 1:34 pm

    Hi.
    This tutorial was amazingly detailed. I learned more by creating the website via your tutorial than I did in my Graphic Design and Photoshop classes put together. Thank you so much! A very annoying cloud has been lifted off of the intimidating monster that is Photoshop.
    Thanks again……

  • User Gravatar
    Tara Singh Danu
    February 26th, 2013 at 5:46 am

    Hi,

    I need web site design work

  • User Gravatar
    weblogs.asp.net
    April 14th, 2013 at 8:58 am

    I visited multiple web sites except the audio quality for audio songs existing at this site is genuinely
    excellent.

  • User Gravatar
    http://itp.nyu.edu/RepresentingEarth/?p=957&cpage=133
    April 20th, 2013 at 3:11 am

    I know this if off topic but I’m looking into starting my own blog and was wondering what all is required to get setup? I’m assuming having
    a blog like yours would cost a pretty penny? I’m not very internet savvy so I’m not 100% certain. Any suggestions or advice would be greatly appreciated. Appreciate it

  • User Gravatar
    บทความ
    April 24th, 2013 at 8:45 pm

    Very good article. I am experiencing many of these issues as well.
    .

  • User Gravatar
    Hacer una web
    May 11th, 2013 at 9:24 pm

    Simply great!! Nice recopilation of good guides. Loved the photo with the “talk nerdy to me” message.

Trackbacks

  1. links for 2008-12-03 « Minesa IT
  2. 25 Tutorials for Advanced Freelance Web Designers | DesignerMill
  3. JeremiahTolbert.com » Blog Archive » links for 2008-12-04
  4. 25 Tutorials for Advanced Freelance Web Designers
  5. 25 Tutorials for Advanced Freelance Web Designers | Freelance Folder - Illuminations
  6. links for 2008-12-04 at James A. Arconati
  7. Digi-Scrap Webmaster Goodies - Digital Scrapbook Designer Professionals
  8. Links for 2008-12-07 [del.icio.us] | Blog do Camillo - O dia-a-dia de um Desenvolvedor Web
  9. Arbenting’s Best of the Week (11/30 - 12/06) | Arbenting
  10. Best of the web #1 - November 08
  11. Links (Diciembre 10th - 14:33 - 14:44) | Buanzolandia
  12. Webzappr - daily « My Random Web Snippets
  13. Bookmarks for Diciembre 25th through Diciembre 26th | FACIL TUTORIALES
  14. 37 Ultimate Resources And Inspirational Pieces For Designers To Discover The Best Of The Web In December - Opensource, Free and Useful Online Resources for Designers and Developers
  15. JadeArrow.Com » Blog Archive » 13 Icredible Resources For Designers
  16. DIGITALife » Tutorial for Web Designer - Best 2008
  17. Just Curious » Blog Archive » Die Liste
  18. 45 resources to help you get started as a freelancer | Sam Bowler, graphic and web design
  19. Useful Links for Web Designer « Chiang Mai Web Design
  20. Dallas McLaughlin's Extravagantly Self Accumulated Design Link Roundup | Dallas McLaughlin
  21. links for 2009-06-18 « Free Hogg
  22. The MEGA list of lists! | designstar
  23. 6 Things to Do Before Sending a Site Design to a Developer | Freelancing Help
  24. 6 Things to Do Before Sending a Site Design to a Developer – Your online guide for finding a job
  25. Cool iPhone Apps | Smashing Apps | Cool iPhone Apps | Download Vector & PSD Free » 37 Top Most Creative & Best Designs of 2011

Share your thoughts, leave a comment!