30 Graphic and Web Design Tutorials from Web Designer Wall
Sunday, January 24th, 2010
Tutorials have become an abundance in today’s web 2.0 world. New blogs are springing up each and every day with new tutorials on web design, graphic, design, Photoshop, Illustrator… nearly every piece of software and programming language you can think of! Now the levels of usefulness and professionalism in these tutorials varies from blog to blog, but I do hold my prejudices on certain blogs.
Web Designer Wall is one of these blogs, hosting tons of really useful and great tutorials. I have collected 30 of my personal favorite tutorials on graphic and web design, and hopefully they can help you with honing your digital artistic skills.
When first upgrading from Adobe Photoshop CS3 to CS4, there were some obvious changes. The colors of the toolbars and everything had been turned into a generic grey, which united throughout all of the CS4 software. A lot of the menus had also been changed, and new tools and image manipulation items were added.
With more and more resources being shared across the web today, there are tons of people starting careers in web design or web development. With how many tutorials about HTML/XHTML, CSS, JavaScript, and PHP there are out there, becoming a web designer has never been easier.
We have all worked with Photoshop before, at least a little bit. There are countless tutorials online to learn how to use the basics of Photoshop, and even many intermediate and advanced tutorials, too. These are all great to follow as a beginner, and learning to use Photoshop is a huge part of being a successful website designer.
Along with Digg’s sleek color scheme and AJAX-based development, there are many fancy features on the site that fascinate me. So for today’s demo, I have decided to create a character counter that counts how many characters you have entered into a field a limits the amount you can have. This is seen on Digg’s submit page, which limits the amount of characters you can enter for a title and a description. It is a really neat effect that can be useful for many different reasons, such as limiting how long a username can be, or making sure a set number of characters are entered for information (like a phone number).
If you have ever been to Digg’s submit page, after entering the URL, you will see some forms to fill out. These include a title and description, along with choosing a category for your submission. These are very common fields that you would expect to see on a submission page for an article, but what is great about Digg is that it shows you a live preview of your submission at the bottom of the page, and it updates as you change it around. Today I am going to show you how you can mimic this behavior with your own site using just simple JavaScript, and how it can really help improve your user’s experience!