Oh, this is a bit different collection I hope, because I couldn’t find really similar articles like this one. I did very big research through youtube, delicious, good-tutorials, vimeo, google and many more websites to find interesting Photoshop, little coding and tips video tutorials. What’s great with video tutorials? – you can see every mouse click and in the same time you hear author’s voice explaining things to you verbaly. In my opinion this is the fastest and the best way how to learn new techniques.

Actually I got this article idea, when I accidentaly found great video tutorial on Deviantart which by the way is the first video in this list as well. It is Photoshop tutorial, where author explains several of his great techniques while creating designs – what font to choose, how to think about spacing, wirefrime, colors, blending options and a lot more hidden tips.

1. Website design walkthrough from Derek Toigo

This video will walk you through Derek Toigo design process of a simple website template. He will explain and unreveal many hidden tips and techniques in his daily designing process.

Read more »

I know that you love Adobe products and I’m sure that you love even more the things that you are able to create using the Adobe products. That’s why, I’ve collected some easy to understand and very useful Adobe Illustrator video tutorials created by top Illustrator designers from all around the web. Most people consider that Photoshop is everything and they don’t actually need another product for their design projects. I strongly recommend you to take a look at this great Adobe Illustrator tutorials and you will understand why I say that you also need to use AI for more professional and artistic creations.

1. The Illustrator CS3 Interface

Learn about the User Interface and where you can find the tools you need.

2. Everything about Masking in Illustrator

One very important thing in Adobe Illustrator: – The Masking properties.

3. How to use the pen tool in Illustrator CS2

Use the pen tool to make things more interesting

4. CS 4 Video Training

A complete CS4 Video for Beginners

5. A Comprehensive Guide to the Pathfinder Panel

Learn how to use the Pathfinder in Illustrator.

6. Opacity Mask Tutorial

Hiding a part of your illustration can make more important another part of it.

7. Create an Ipod

We all love Apple products and this tutorial help you to customize the famous ipod in no time.

8. Metal Lightning Tutorial

Metal inspires professionals and this tutorial is 100% pro and free.

9. Make a 3D Logo in Illustrator

3D Logos are much more interesting than simple plain ones…so check this great tutorial to see how you can create one.

10. Adding Texture in Illustrator

Any type of texture for any type of Illustration.

11. Creating an Eye-Ball

Eyes are very important for any human character, and that’s why this is a very important tutorial.

12. Create a raw logo design

Professional Logo design for your company.

13. Create a neon glow in CS 3

This is a pro glowing effect.

14. Live Color

Choose most interesting and inspiring colors for your creations.

15. Drawing a gell progressbar

A progressbar is very important for Flash animations and applications.

16. Draw Gear

Drawing a gear is just the title, but this tutorial will help you to create many types of illustrations.

17. Create a Helix in Ai

A helix can be useful in many ways and that’s why you should take a look at this tutorial.

18. How to design a professional logo using Adobe Illustrator

Create a custom logo for your company.

19. Draw a Valentine’s Day e-card

I know that it isn’t february yet, but you definitely should know how to draw a valentine.

20. Shiny Text

Shiny text was always interesting and with this tutorial you will be able to create it too.

21. About Transformation Tools

Restizing, croping and wrapping can improve your works and make them more attractive.

22. Tribal Sun

Famous and cool sign created in illustrator.

23. The Gradient Tool

24. Blob Brush: Shape Objects

A cool new feature for Illustrator.

25. Artboards in CS4

Artboards feature for CS4.

26. Blending Gradients

“Play” with gradients to create interesting designs.

27. Create a fusion between Adobe Illustrate and Photoshop

Use Photoshop and Illustrator components to build better and powerful designs.

28. Create a metal like button

A very nice looking metal button.

29. Cool Award Badge

Vey useful illustration for any type of activity which includes competition or quality review.

30. Wood Effect with gradients

Bring the nature into your creations.

31. Background Effects Illustrator Way

Even if you are a beginner with this tutorial you will be able to create pro background effects.

32. Create Ribbons

Cool and instant ribbons.

33. Spacing Boxes in Illustrator

This will make your job a whole lot easier.

34. 3D Effects Graph

Create a cool stats graph in 3D.

35. Wraping in Illustrator

Modelate your images and illustrations in no time.

36. Using The Paint Brush Tool

The most essential drawing tool available in Illustrator and Photoshop.

37. Draw Fluffy Clouds

Funny and flower-power clouds.

38. How to draw Batman’s logo

One of the coolest Cartoon hero sign can now be easily reproduced in Illustrator

39. Intricate Patterns

Create cool backgrounds for your design projects.

40. Using Live Paint

Bring life into your Illustrator creations.

41. Line Draw for Cartoons

Make your cartoon creations more interesting for everyone.

When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many design blocks in a stylish and elegant manner. In this article, we’ll have a look at how such lists can create a whole new look, feel, and effect of a site.

Style Your Ordered List

Styling your Lists

By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

Elastic Calendar Styling with CSS

Styling your Lists

You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.

Three Column CSS

Styling your Lists

A Three Column CSS Layout Using Just an Unordered List

Simulating a Table Using an Unordered List

Styling your Lists

With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. Here is how to simulate a table using an unordered list.

How to Create a Block Hover Effect for a List of Links

Styling your Lists

Learn how to create this “block hover” effect. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of <em> and <span> tags.

<div id="links">
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>

The Amazing LI

Styling your Lists

Using CSS and Unordered List Items to Do Just About Anything.

Centering List Items Horizontally

Styling your Lists

Slightly Trickier Than You Might Think, by wrapping the list inside a table div and using display: table; trick.

Turning a list into a navigation bar

Styling your Lists

Learn how to create a navigation bar using unordered lists.

FORM elements design using CSS and list (ul and dl)

Styling your Lists

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. In this post you will see another way to design FORM using list elements <ul> and <li>.

<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />

5 Ways to Set Your Unordered Lists Apart

Styling your Lists

Here are five different ways to style your unordered lists with CSS.

Taming Lists

Styling your Lists

In this article, Mark Newhouse demonstrates how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page.

<div id="bread">
	<li class="first">Home
		<li>&#187; Products
			<li>&#187; Computers
				<li>&#187; Software</li>

Nested lists used to create a simple folder metaphore

Styling your Lists

Here’s a rough and ready example showing how to make a folder analalogy using a nested list.

<ul id="sitemap">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#" class="open">item 4</a>
<li><a href="#">sub-item 1</a></li>
<li><a href="#">sub-item 2</a></li>
<li><a href="#" class="open">sub-item 3</a>
<li><a href="#">sub-sub-item 1</a></li>
<li><a href="#">sub-sub-item 2</a></li>
<li><a href="#" class="open">sub-sub-item 3</a>
<li><a href="#">sub-sub-sub-item 1</a></li>
<li><a href="#">sub-sub-sub-item 2</a></li>
<li><a href="#">sub-sub-sub-item 3</a></li>
<li><a href="#">sub-sub-sub-item 4</a></li>
<li><a href="#">sub-sub-item 4</a></li>
<li><a href="#">sub-item 4</a></li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>

Handcrafted CSS + HTML Grid Calendar 2009

Styling your Lists

Some experiments with css and grids in order to make CSS Grid Calendar for 2009.

Best Practices

Mixx’s Popular Stories

Styling your Lists

The markup is not simple, since they are using child <ul> along with a voting form and <span> tags.

      <h4><a href="#"></a><span><a target="_blank" href="#"></a></span></h4>
		    <button type="submit"><span></span></button>
	  <li><a href="#"></a></li>
	  <li><a href="#"></a></li>
	  <li><a href="#"></a></li>
	  <li><a href="#"></a></li>



Styling your Lists

Thecosmicmachine’s Supported social networks, uses unordered list. Clean and simple.

<ul id="web2List">
						<img src="images/twitter_32.png"/>
						What are you doing?
						<img src="images/facebook_32.png"/>
						Connect with the people around you.

Viget- Inspire

Styling your Lists

Viget- Inspire uses a pretty nice calender in their footer using unordered list.

<ul class="clearfix">
       <li><a href="http://www.viget.com/inspire/2009/05/">May 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/04/">Apr 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/03/">Mar 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/02/">Feb 09</a></li>

Product Planner

Styling your Lists

Product Planner uses ordered list to show the user the steps of using their service. Each item (#how_to_use li.step_1) uses a different image.

		<li class="step_1">Find a flow from the gallery.</li>
		<li class="step_2">Use that flow to create your own.</li>
		<li class="step_3">Share it with your colleagues.</li>

Onwired Code block

Styling your Lists

Onwired uses ordered list to create their code block.

Jobs on the wall

Styling your Lists

Nick La uses unordered lists to display all available jobs.

<ul class="joblist">
   <li class="">
        <img class="employerlogo" alt="" src="http://jobs.webdesignerwall.com/images/logos/small_1390806013"/>
        <img class="category" alt="" src="http://jobs.webdesignerwall.com/images/cat-design.gif"/>
        <h3><a href="http://jobs.webdesignerwall.com/job.php?id=310">Web/Graphic Designer</a></h3>
        <p class="jobinfo"><span class="type">Full-Time</span>   <em>at</em> Hallmark Channel <em>(Studio City, Ca)</em></p>

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries.

1. Simple Toggle with CSS & jQuery

A simple toggle tutorial with an explanation of how to switch the “open” and “close” graphic state. The markup is pretty straight forward, where the h2 tag is a link that “trigger” the toggle effect. Below the h2, we will have our container where we hold the content.

Toggle Header

Content Header

2. jquery-fade-infade-out

A nice fade in fade out effect you can add to your website. The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website wether it be an image, text, a link or even a div.

$(“ELEMENT HERE”).fadeTo(“slow”, 0.3);
$(“ELEMENT HERE”).hover(function(){
$(this).fadeTo(“slow”, 1.0);
$(this).fadeTo(“slow”, 0.3);
3. How to Mimic the iGoogle Interface

In this tutorial you will learn how to create a customizable interface with widgets. Each widget can be collapsed, removed and edited. The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique). The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications using jQuery’s UI library and specifically the “sortable” and “draggable” modules.

4. Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a show/hide login/signup panel for your website using Mootools 1.2

5. jQuery pageSlide

jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.

The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.
6. Liquid expandable section with rounded corners using CSS

This tutorial explains how to design a nice liquid expandable section with rounded corners (top-left, top-right, bottom-left, bottom-right) using some lines of CSS, HTML and JavaScript code.

7. How to Make a Smooth Animated Menu with jQuery

This menu has a smooth animation using “easing” effect. There are two actions in the code used here. When the mouse moves over a menu item, that item starts an animation where it expands to 150px tall over 0.6 seconds. The easing applied through the plugin is ‘easeOutBounce’ which causes the box to “bounce” a little as it reaches the end of the animation (”out”). When the mouse is moved off the animation to the starting size is triggered.

8. Lazy Load

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of view port (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.


MooSlide’s functional solution is to present any contentis. It is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. It is based on the mootools framework.

10. The Sexy Curls jQuery Plugin

Sexy Curls jQuery plugin is an open source solution which lets you share in the beauty of the page fold feature with ease. It uses the jQuery UI & its resizable package.

WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of javascript with WordPress, the possibilities are infinite. This article will share 10 great practices, examples & Plugins for using the most popular Javascript frameworks out there to spice up your WordPress theme.

1. Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

Learn how to implement a Nice & CleanSliding Panel in WordPress 2.7+ using jQuery. If user didn’t log in or register yet, we will show the login and register forms in the sliding panel with a short Welcome Message:

10 Impressive Techniques to Spice up your WordPress Theme

2. jBreadCrumb

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way. The length of a breadcrumb menu may be very long, jBreadCrumb is a great solution for this issue. It creates a collapsible interface that smartly decides the display method according to the amount and length of the elements.

10 Impressive Techniques to Spice up your WordPress Theme

Learn how to create this navigation technique, and display it on our posts, pages and categories archives in your WordPress theme. You can also use this great plugin or this interesting one to automatically create breadcrumbs in your blog.

3. Sliding Boxes and Captions with jQuery

The basic idea of the sliding box animations is very simple. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. I can see this script works great for a CSS gallery, really interesting.

10 Impressive Techniques to Spice up your WordPress Theme

4. How To Create An Amazing jQuery Style Switcher

Add a nice style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

10 Impressive Techniques to Spice up your WordPress Theme

5. Styling Buttons and Toolbars with the jQuery UI CSS Framework

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.

10 Impressive Techniques to Spice up your WordPress Theme

6. MooTools Link Nudging

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Link nudging is the process of adjusting the padding on a link slightly to show a simple, tasteful “jump” when you place your mouse over a link. The effect is magnified when mousing on and off a link quickly.

10 Impressive Techniques to Spice up your WordPress Theme

7. jQuery (mb)Menu 1.5

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

There are many tutorials out there for creating a WordPress drop down menues. You might want to check here and there.

10 Impressive Techniques to Spice up your WordPress Theme

8. Fantastic News Ticker Newsvine-like using Mootools

This tutorial explains how to implement a News Ticker, with news vertical scrolling, using mootools. It’s very simple and quick to implement in your blog. I can see this very useful if you are having a news submission are on your website and want to display your user’s contributed links in a nice and fancy way in your sidebar.

10 Impressive Techniques to Spice up your WordPress Theme

9. Snazzy Archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. You can select different layouts and special effects. Main features of Snazzy Archives are: Unique visual presentation of blog posts, Will work out of the box with all features, Posts are scanned for images and youtube videos and shown together with number of comments, Different editable layouts (HTML and CSS), Special effects using jQuery and more.

10 Impressive Techniques to Spice up your WordPress Theme

10. J Post Slider

Show your post in fancy jQuery box, rotating images, with show-up text box with post description. Mousover stop the animation, and user can click on post link anytime.

10 Impressive Techniques to Spice up your WordPress Theme