Free and Useful Online Resources for Designers and Developers » Tutorials

Best Of 2011: Best Useful jQuery Plugins And Tutorials

Akhter — Mon, 26 Dec 2011 16:35:54 +0000

jQuery is one of the most accepted JavaScript library that possesses an enormous collection of plugins which makes it even more powerful. On the other hand, there is a good deal of additional codes or modules, from simple alert functions to multifaceted galleries or form validation methods, that are hard-coded inside websites & not convinced to plugins.

Of course, not each code must become a plugin that would be worthless. However converting the ones to be re-utilized will save loads of improvement time & if shared with the community, will make the code itself better.

In this post, you will unearth some of the most excellent, interesting fresh and useful jQuery plugins and tutorials that were created in 2011.

File Uploads with jQuery

( Demo | Download )
This plugin will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

ComboGrid

( Demo | Download )
Combogrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. Combogrid provides keyboard navigation support for selecting an item.

MotionCAPTCHA

( Demo | Download )
MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.

Elastislide

( Demo | Download )
With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

Spin.js

( Demo | Download )
The spin method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.

Craftyslide

( Demo | Download )
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.

Arbor.js

( Demo | Download )
Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

Recurly.js

( Demo | Download )
Recurly.js allows you to easily embed a PCI compliant order form within your website. Recurly.js is a Javascript library designed to be easily embedded and customized to match your website.

Ideal Forms

( Demo | Download )
Ideal Forms is a small framework to build powerful and beautiful online forms.

How to Block Adblock

( Demo | Download )
With this friendly jQuery plugin you can easily blog Block Adblock.

Power PWChecker

( Demo | Download )
Power PWChecker jQueryPlugin observes passwords as users type and provide instant password strength check (Weak, Medium, or Strong). This encourages users to review their password selection and ensure that the password is strong and secure. Power PWChecker also allows you to enforce password length policy by specifying minimum and maximum password length. It also matches password entries and provides visual alert in case of inconsistent passwords.

Sisyphus

( Demo | Download )
Imagine you’re filling a complex form on site, or typing effervescent and extensive comment. And when you’re almost done with that browser is crashed, or you closed tab mistakenly, or electricity is turned off, or something else break your efforts. Disgusting, huh? With Sisyphus on site you just reopen page in your modern (with HTML5 support) browser and see all your changes at that forms. It’s lightweight (3.5 KB) jQuery plugin uses Local Storage to prevent your work being lost.

Response Javascript

( Demo | Download )
Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve media progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

Responsly.js

( Demo | Download )
Responsive designs are cool! Not only do they allow you to reach mobile and tablet users with minimal effort, they also make your context scale up for desktop users with larger screens.

Fitvids.js

( Demo | Download )
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Isotope

( Demo | Download )
Isotope: An exquisite jQuery plugin for magical layouts

Slidorion

( Demo | Download )
Slidorion is a combination of an image slider and an accordion; displaying beautiful content through various effects.

Diapo

( Demo | Download )
With Diapo plugin you can creat a beautiufl slideshow.

Minimit

( Demo | Download )
Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states.

Circular Content Carousel

( Demo | Download )
The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

HTML5 Music Player

( Demo | Download )
With this plugin you can create HTML5 Music Player.

jQuery Mobile

( Demo | Download )
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Lettering.js

( Demo | Download )
A jQuery plugin for radical web typography.

Multi Node Range Data Slider jQ Slider

( Demo | Download )
JQ Slider is a multi-node range and data slider that allows to provide easy-to-use user data selection and filter tool. It can be used in many ways.

Xml Driven Vertical News Scroller Script Using jQuery vScroller

( Demo | Download )
Adding scrolling content to your website or blog makes much sense – it allows you display latest news, promotions, product updates, announcements, upcoming events, calendar items and much more in a limited space. It also allows you to add dynamic content to otherwise static web pages.

jQuery Sliding Content Bar Plugin

( Demo | Download )
It is a smart and quick content bar that you can integrate easily in any website or web application. It is integrated seamlessly in your website and can be popped up whenever required. PushUp Content Bar is easy to customize and strong enough to rely upon. You can add your contact details, location map via Google Maps, and a simple contact form that visitors can use to make contact with you.

Gmap3

( Demo | Download )
gmap3 is a jquery plugin which allows many manipulation of the google map API version 3.

Skitter

( Demo | Download )
With this plugin you can generate outstanding slideshows for your website.

jFontSize

( Demo | Download )
The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc. This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content

Wave Display Effect with jQuery

( Demo | Download )
How cool is it to sometimes just display content a little bit differently? This plugin let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. When clicking on a thumbnail, we’ll “zoom” in to see a medium sized version. Clicking again will make the large content area appear; here we will show some more content.

Simple jQuery Fluid Thumbnail menu Bar

( Demo | Download )
The idea of a fluid thumbnail bar is simple: Create a list of thumbnails within a space where the overflow can be flipped through page by page.

Useful image hover slide effect with jQuery

( Demo | Download )

jQuery plugin: Easy Image Zoom

( Demo | Download )
This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image.

ImageLens

( Demo | Download )
Use this jQuery plug-in to add lens style zooming effect to an image

Slides

( Demo | Download )
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

jShowOff

Easy Paginate

( Demo | Download )
This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects. It’s main purpose is to view certain number of list items at once, but it can also be set up to view one item by one.

Responsive Image Gallery with Thumbnail Carousel

( Demo | Download )
Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

PhotoSwipe

Elycharts

( Demo | Download )
Elycharts is a pure javascript charting library, easy to use and completely customizable.

Blueberry

( Demo | Download )
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

GALLERIA

( Demo | Download )
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

jQuery Image Gallery

( Demo | Download )
With this plugin you can create a beautiful jQuery Image Gallery.

Shuffle Letters Effect

( Demo | Download )
This jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.

SmartGallery

( Demo | Download )
SmartGallery is an interactive image gallery that is specifically designed to support huge data. It is lightweight, lightening fast and fully customizable. Powered by jQuery, SmartGallery comes with twelve transition effects including some unique transition effect and thumbnail navigation.

BxSlider

( Demo | Download )
BxSlider will allow you to create a beautiful Content Slider for your website.

FitText

( Demo | Download )
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

jQuery Pagination revised

( Demo | Download )
The pagination plugin combines a varity of features. It can be used to divide long lists or areas of content into multiple seperate pages, load paged content with pre-calculated database offset-parameters via Ajax and anything with full control to adapt the style properly to your site-layout. Of course, creating simple links with no event triggering is possible as well. The plugin also offers the facility to “overlap” pages, which means you can show elements of previous pages on the subsequent sites in order to allow a straightforward flow of reading.

E24TabMenu

( Demo | Download )
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.

Snippet

( Demo | Download )
Snippet provides a quick and easy way of highlighting source code passages in HTML documents.

AJAX PAYPAL CART

( Demo | Download )
AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.

Brought To You By

Do you want to advertise here? Click to get more info…

Best Of 2011: 45 Photoshop Web Design Layout Tutorials

Akhter — Fri, 23 Dec 2011 15:25:37 +0000

Photoshop is a well-liked web design instrument. With it, you can generate web design mock-ups that can later on be transformed to a practical and efficient HTML / CSS template. In today’s collection of tutorials, we are featuring some top-notch techniques on how to generate your own web design layouts by means of Photoshop. These tutorials were released in 2011.

Web layouts are essential for each web design. Whether it is a plain design or a sophisticated one, Photoshop can regularly come usable in creating such layouts. We have collected some truly innovative and helpful recent tutorials that demonstrate the procedure behind creating web layouts in Photoshop.
Let us take a look at this collection. Here is the full list after this jump. Enjoy!

Learn how to create a Sports Car layout in Photoshop

In this tutorial you are going to learn something new and exciting. Here we’ll be creating a nice Sports Car layout in Photoshop.

Create a website to sell your iPhone 5 apps

In this detailed tutorial we will create a website to sell your iPhone 5 apps.

How to Create a 3D Portfolio Layout

In this tutorial you will learn how to use simple techniques to create a sleek dark portfolio layout with a 3D look. The 3d look in this tutorial will be given using some simple shadows, and lights.

Clean Style Business Layout

In this tutorial artist will be showing you how to create a stylish business layout with a cool blue theme.

How to design a trendy wordpress theme

In this tutorial artist will show you how to create a trendy wordpress theme. The design is very simple, and in this tutorial you will have presented only the first page.

Create a Comic Book Themed Web Design

In this tutorial we will create a very original design for all the comicbook fans out there. We will create this blog layout from scratch using several tricks in Photoshop to make it look awesome.

Design a Warm, Cheerful Website Interface in Adobe Photoshop

In this tutorail you will learn how to design a warm, cheerful website interface in Adobe Photoshop.

How to create an advanced Game Portal Layout

In this tutorial you will learn how to create an advanced website for a game portal.

Create A Simple Clean Portfolio Layout In Photoshop

In this tutorial you will learn how to create a Simple Clean Portfolio layout in Photoshop. A few techniques discussed in this tutorial will include the use of proper spacing, typography and colors.

How to create an Administration panel layout

In this tutorial artist will show you how to create a sleek Administration Panel Layout. You can use this Admin panel if you want to create your own CMS.

Design a Clean & Colorful Ecommerce Layout in Photoshop

In this tutorial you will Learn how to create a clean and colorful E-Commerce Layout in Photoshop.

How to create a grunge portfolio layout

Sometimes you will need a simple website where you can showcase your portfolio. This is the most important thing when you work as a designer. In this tutorial artist will show you a very simple way to create your own grunge portfolio layout.

Learn how to create a Grunge Portfolio Layout

In this tutorial we’ll create an awesome grunge portfolio layout in Photoshop. We are going to learn how to use different textures and gradients to get an amazing rustic effect. Now let’s see what we need to create this layout. We’ll use the wood texture set, 27,000 gradient set, Grunge scuffed vector icon set, and Grunge texture set.

Learn How To Create Modern Light Business Layout In Photoshop

Today you will be learning how to create a modern business layout with Photoshop. With some small modifications you can use this PSD layout for another types of websites: Communication websites, education websites, security websites and a lot of other types.

Create a light grunge website layout

In this tutorial artist will show you how to create a light grunge website layout with very simple techniques. With small modifications you can use this layout for any theme you like: business layout, corporate layout, blog layout, etc.

Create a Clean, Minimal Website

In this web layout tutorial we’ll be creating a clean, minimal website design. This design would be perfect for a photography website or similar creative professional. Follow along as we explore some simple techniques to perfect a beautiful minimal design.

Create a movie video streaming website

In this tutorial artist will show you how to create a nice video related website. You can create this website like a membership, and you can charge people for watching the newest movies online. It is something like Netflix.

Windows 8 Inspired Portfolio Layout

Windows 8 will be pushed upon us soon with its brand new looking desktop user interface. So in this tutorial I’ve tried to incorporated some of its features into a stylish web layout.

Create a consulting web layout – business layout

In this tutorial artist will show you how easy is to create a consulting web layout. You can use this tutorial to create also a business web layout, a lawyer layout. The first thing is to create a new document with the following size 1000 width x 1200 height.

Design a Sleek, Dark Mobile App Website (Updated!)

In this tutorial we’ll be using Adobe Photoshop to design a sleek web interface that can be used for any mobile app website. We’ll be covering an array of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs.

How to Create a Professional Web Layout in Photoshop

Designing good looking clean and functional Web layouts is an essential part of a Web Designers life. In this tutorial we are going to create a clean and professional Web layout in Photoshop from scratch. Along the way you can learn useful methods to create designs. So get started!

Create a Photography Portfolio Website Design

Learn To Create A Gaming Layout In Photoshop

In this tutorial you’ll learn how to create a gaming themed web layout from scratch using just photoshop.

Learn How To Create An Ipad Apps Themed Layout

In this tutorial artist will be showing you how to create your very own ipad apps themed web layout from scratch using adobe photoshop.

How to create a distinguishable textured web layout in Photoshop

In this tutorial artist will show you how to create a textured web layout, starting from the concept on paper to Photoshop design. We will discuss about site structure and will use the 960 grid to organize our contents.

Underwater Content Box Design in Photoshop

In this tutorial artist will teach you how to create an underwater content box. We will make it appear as if the content box fell into the water using stock photos and different techniques. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Create a Modern Lab Theme Web Design in Photoshop

In this web design tutorial artist will show you how to create a web layout with a sleek and modern look using Adobe Photoshop. We will go from finding sources of inspiration to setting up the document in Photoshop and creating design elements that fit with the theme of the web layout.

Template Show: How to Design a Gallery Layout in Photoshop

In this tutorial we will create a gallery layout. Artist will not be using the 960 grid in this tutorial, the purpose is to show beginners out there how important the Ruler Tool is when you are designing in Photoshop. We will also tackle how to create and use patterns and using mask and filters.

Design a Clean Corporate Website Layout

In this tutorail you will learn how to design a Clean Corporate Website Layout.

Design The Layout Blue Hightech Using Photoshop

This tutorial for Photoshop has been written especially for web designers willing to increase their knowledge their technical capacity to create graphical templates for web sites. I wanted to create a layout regarding high-tech subjects, but with a bit of inspiration you can adapt it for several different themes. You have also to know that a psd source file is attached to this tutorial.

Graphic design studio web layout tutorial

In this tutorial you will learn how to create a fancy web layout for a design studio. As usual this layout can be used also for another types of websites. If you can create another versions of this layout please post them in the comment area.

Web 2.0 Professional Blog Layout Tutorial

This new tutorial from Alice will walk you through the steps for creating a Web 2.0 Layout for a blog. Be patient, take your time and have fun! Let’s get to work!

Design a Futuristic Chrome Web Layout in Photoshop

In this tutorial we will learn how to Design a Futuristic Chrome Web Layout in Photoshop.

Design an Artistic Watercolor Blog Layout

In this tutorial you will learn how to create an Artistic Watercolor Blog Layout.

Members Area Tutorial: Design a Sleek, Professional Travel Blog

This tutorial is available exclusively to our FanExtra members. In order to read the tutorial and download it’s original .psd source file you must sign up as a FanExtra member.

Create a gritty portfolio layout – moleskine layout

In this tutorial i will show you how to create a layout with a moleskine layout. This layout can be used for your portfolio, because it has the look of an open agenda.

Create a Professional App Store Web Layout

In this tutorial we will learn how to create a Professional App Store Web Layout.

Learn To Create A Clean Style Portfolio Layout

In this detailed tutorial I’ll be walking you through the process of create a clean style portfolio layout. Don’t forget the FREE PSD file is available to download at the bottom of the page. Lets get started…

How to create a vintage Photoshop file

In this tutorial artist will show you how to create a vintage website layout. The tutorial is quite simple and can be followed by anyone who have Photoshop installed on their machine.

Let’s create a cool Travel Agency layout

In this tutorial you will see how we create a cool, blue travel agency site. However, before we start, we‘ll need some stuff to create this amazing layout.

Create a Sleek, Corporate Web Design

In this video series, we’re going to walk you through how to create a sleek, professional web design for a corporate website.

Create A Dark, Clean Website Design In Adobe Photoshop

In this tutorial we’re about to learn how to design a dark, clean website in Adobe Photoshop. As we go through this tutorial, we’ll work with: simple shapes (rectangles, lines, arrows, etc), layer styles, patterns, importation, and paragraph styles, and many other Photoshop design techniques that you can adapt to your Website interface design workflow.

Design a Drupal Business Theme in Photoshop

In this tutorial artist is going to walk you through designing a simple website which can be converted into a functional Drupal theme. In this, we’ll cover basic photoshop techniques, such as styles, slicing, guides, layer structure and much more.

Create a Sleek, Corporate Web Design

In this video series, we’re going to walk you through how to create a sleek, professional web design for a corporate website.

How to create a clean interface in Photoshop

In this tutorial you will learn how to create a simple interface in Photoshop. This layout can be used as a business layout, corporate website, or even a wordpress theme. For start i will create a new document, and i will fill the background layer with the following color: #ece5db

Brought To You By

Do you want to advertise here? Click to get more info…

Best Of 2011: 40 Detailed Photoshop Icon Design Tutorials

Akhter — Fri, 16 Dec 2011 15:11:39 +0000

Icons are an imperative fraction of web design. In a lot of cases you can pay money for icons or download free ones, however every now and then you may require generating custom icons to acquire exactly what you want. Luckily, there are loads of tutorials out there that get through the process of designing an icon.

In today’s post, we have composed an extremely valuable list of Adobe Photoshop icon design tutorials that were created in 2011. These tutorials will teach you the techniques you will require for designing your own icons by means of Photoshop chiefly.

These tutorials will categorically help you accomplish your goals if you have a craze for icon design or are a GUI designer on the hunt for some tips. Enjoy and stay creative!

Draw a Realistic Steam Iron in Photoshop

This Photoshop tutorial will show you how to create a realistic Steam Iron from scratch. You’ll learn how to create realistic shadows & highlights on plastic and metal.

Create a Detailed Camera Icon in Photoshop

In this tutorial we will demonstrate how to create a detailed Fuji X100 camera icon in Photoshop. Let’s get started!

How To Create A Green Button Isolated

In this tutorial we will demonstrate how to create a green button isolated using layer styles, dodge and burn Tool. Let’s get started!

Industrial Folder Style Icon

In this tutorial artist will be walking you through the process of creating a industrial style folder icon. Lets get going…

Create a Star Trek Style Communicator in Photoshop

In this tutorial, we will draw a retro Star Trek style communicator, a voice communication device used in the original Star Trek series. We will combine layer styles and lots of manual drawing. So, prepare your Wacom to boldly go where no Photoshop tutorial has gone before.

Learn To Create A Padlock Icon In Adobe Photoshop

Ever wanted to create a realistic padlock icon in adobe photoshop? Well you’ve come to the right place. In this tutorial artist will take you step-by-step in creating the best looking lock icon you’ve ever seen.

Design a Detailed Audio Receiver Icon in Photoshop

In this tutorial we will show you how to create a detailed audio receiver icon using Photoshop’s vector editing capabilities. Let’s get started!

Learn To Create A Glowing Google Plus Icon/Illustration

Google Plus is making its presence all over the internet, so in today’s tutorial I’ll be showing you how to create your very own glowing google plus icon/illustration.

Create a Sweet Donut Icon in Photoshop from Scratch

In this icon design tutorial we will learn how to make a sweet and tasty donut icon from an initial sketch. So let’s begin, and remember: don’t try to bite the screen!

How to Draw a Shopping Bag Icon in Photoshop

In this tutorial you will learn how to drawn a red shopping bag icon. This tutorial will cover the basic techniques of drawing such as creating the shape, shading, and adding shadows.

How To Draw a Vintage Polaroid Camera Icon

In this tutorial, we will create a Polaroid camera icon. We will use lots of layer styles and draw manually with the brush tool to achieve a realistic appearance. Let’s get started!

Create a Leatherback Book Icon in Photoshop

Learn how to create this leatherback book design in Photoshop. This tutorial will show you how to draw a book and apply textures and layer styles.

Draw a Roll of Camera Film in Photoshop

Icon design can be a lot of fun. In this tutorial we will demonstrate how to create a roll of camera film using Photoshop. Let’s get started!

How To Design a Realistic Takeout Coffee Icon

In this tutorial we’re going to show you how to design an Incredibly Detailed Drinks Icon. We’ll walk you through the process of creating the takeout coffee cup from start to finish, exploring a wide variety of techniques in Photoshop that can be applied to almost any type of design and drawing.

Create a Download Folder Icon in Photoshop

Icons are an important part of most interactive and web design. While icons are small, they can often be challenging to create. In today’s tutorial we will demonstrate how to create a download folder icon using different shapes and reflections in Photoshop. Let’s get started!

Stock royalty vector digital clock

In this tutorial we will illustration of digital clock using Pen tool, dodge and burn Tool. Let’s get started!

Create an Open Book Icon In Photoshop

In this tutorial we will demonstrate how to create an open book icon in Photoshop. Let’s get started!

Create a Detailed Vintage TV from Scratch in Photoshop

In today’s tutorial, artist will show you how to create a detailed vintage TV from scratch using Photoshop’s vector editing capabilities. The detailed step by step guide will help you to understand the process of its creation.

How to create a packing box

In this tutorial we will demonstrate how to create a packing box using layer styles, dodge and burn Tool. Let’s get started!

Create a Futuristic Bicycle Icon in Photoshop

It’s fun and challenging to create items from scratch in Photoshop. In this tutorial we will create a futuristic bicycle icon from scratch using some basic Photoshop tools. Let’s get started!

How to Illustrate a Realistic Guitar Using Photoshop

In this tutorial we’re going to explore how easy it is to illustrate a guitar in Photoshop using tiny shapes, gradients and subtle shadows. Using these techniques and a good reference photo you can create an amazing amount of detail and realism. Lets jump right in.

Learn How To Create A Nintendo WiiU From Scratch In Photoshop

The new Nintendo WiiU was recently revealed at the E3 gaming conference boasting new ways in which we play our games. Now you can create your very own WiiU in photoshop using this detailed tutorial. The tutorial itself is very “Layer Style” heavy so set a side a good two or three hours to complete it.

Design An IPod Shuffle Icon

Or this tutorial we will be dipping into a little bit of icon design for iOS applications. The example icon for the tutorial’s sake will be an iPod Shuffle icon that would be used for a music related app or something of that sort. The tutorial should give some exampled of how to shade elements in an icon as well as bases that typical iOS icons would use.

Create A Nintendo DS In Photoshop

Today we are going to be using basic layer styling and some basic tools in Photoshop to create the open version of our Nintendo DS. In this tutorial you will learn to create the open view of a DS from scratch, using nothing but basic tools and filters. Now, let’s get started. As always this is what we will be creating:

‘Zohf-Ee’ Cup Icon – Illustrator And Photoshop

Yep, another new tutorial author has joined the team here at HV-Designs and his first tutorial is awesome! Josh will be walking you through some simple Adobe Illustrator techniques on creating vector shapes and bringing them to photoshop and then applying some photoshop techniques to bring it all together. Let’s get started!

how to create a seal in Photoshop cs3

In this tutorial we will demonstrate how to create a seal using layer styles, dodge and burn Tool. Let’s get started!

Toggle Switch Photoshop Tutorial

Hey, guys. Today, we’re going to learn how to create a toggle (on/off) switch, and we’re gonna do it using vector shapes and layer styles. That’s right. For now, say goodbye to working in raster and open your eyes to the bright future of resolution independence. Kinda warm and glowy, isn’t it? Good stuff.

Stock photo vector portable meter interface

In this tutorial we will illustration of vector meter interface using Pen tool, dodge and burn Tool. Let’s get started!

Create an Apple Safari Icon in Photoshop

Learn how to create a detailed Apple Safari icon in Photoshop. This tutorial will show you how to create shapes and use different layer styles to create effects.

Create a Mac Style Home Icon in Photoshop

We occasionally need a home icon for our design project. Commonly, a designer draw with Illustrator, but this time let’s create a mac style home icon with Photoshop. The techniques used will be about making shape and playing with layer style. It’s not difficult to make this sweet icon.

How To Create A Cool Orb

In this tutorial we will demonstrate how to create a cool orb using layer styles, dodge and burn Tool. Let’s get started!

Create a Diana Mini LOMO Camera Icon in Photoshop

Learn how to create a LOMO camera icon with this detailed Photoshop tutorial. This tutorial covers many drawing techniques such as creating a leather texture, adding reflection to glass, shading, and more.

Creating Alarm In Photoshop

In this tutorial we will demonstrate how to create a Alarm using layer styles, dodge and burn Tool. Let’s get started!

How to Illustrate a Stethoscope Icon

This work is a common project created together with Iaroslav Lazunov and Oleksandr Iegupov. We have used Meshes, Art brushes, and Blends to create the final work. The skills you will learn here can easily be transferred to creating various objects. So let’s get started!

Radar Icon in Photoshop

In this tutorial artist will show you how to create a Mac style radar icon in Photoshop.

Learn To Create A Camera Lens In Photoshop

In this detailed tutorial artist will be showing you how to create a cool camera lens in photoshop. The camera lens later could be used as an icon or illustration, lets get going…

Stock vector water bottle

In this tutorial we will illustration of vector water bottle using Pen tool, dodge and burn Tool. Let’s get started!

How to create a process icon

In this tutorial we will demonstrate how to create a process icon using layer styles, dodge and burn Tool. Let’s get started!

Create A 3D Push Pin

In this Photoshop tutorial I’ll show you how to create a 3D Push Pin using Photoshop Extended’s 3D drawing and rendering capabilities. Put your 3D glasses on and enjoy the show!

Vector portable media player interface

Creating still life objects in Photoshop is often great practice for learning how to create other objects. In this tutorial we will illustration of portable media player using Pen tool, dodge and burn Tool. Let’s get started!

Brought To You By

Do you want to advertise here? Click to get more info…

40 Extremely Useful Adobe Fireworks Tutorials For Designers

Akhter — Wed, 14 Sep 2011 16:29:11 +0000

Over time, Adobe Fireworks became fashionable and popular among web designers. The space and capability to use Adobe Fireworks in web design is simply huge. In addition, Web designers will find it very fun to experiment with different techniques with Adobe Fireworks. They attempt to learn how to use a variety of features in Adobe Fireworks for adding vitality to boring pictures and renovate them into works of art.

Many designers who are interested in finding out new techniques for using Adobe Fireworks do not make out where to get help from. So for all those designers who are desperate to learn new skills, here is a compilation of tutorials for Adobe Fireworks. In this collection, you can find variety of advanced tutorials and resources. We hope that you will like this collection.

Creating Fading Light Vectors in Fireworks

In this tutorial, you’ll learn how to create some cool effects with fading light linear vectors in Fireworks. It’s really easy to do and takes just a few minutes. Create fading lights using vectors, then convert these vectors into bitmaps, and learn to use effects from Fireworks CS3.

The Abduzeetles Rockband Website in Fireworks

We are going to use nice commands on this tutorial, and what is really cool is trying to test other values on each step, other colors, other shapes, always exploring the whole potencial from every tool.

Web Site Design Tutorial

In this tutorial artist will show you how he created a beutiful web layout using Fireworks.

LED Cinema Display in Fireworks

In this tutorial artist will teach you how to created a beautiful LED Cinema Display in Fireworks.

Page Curl in Fireworks Tutorial

In this tutorial artist will show you how to add a stylish page curl to the corner of your image. To start, lets get an image that we can add the page curl to.

Awesome Light Effects

In this tutorial you will learn how to create awesome Light Effects in Fireworks inspired by the James White’s O series.

Blend Mode Effect

This tutorial teaches you how to create a blend mode using Fireworks and thus assumes you are familiar with some design software, even if you are new to Adobe Fireworks. However be assured that our detailed instructions can be followed by even a total novice.

Simple Orbs Tutorial

The Simple Orbs Tutorial is a very simple technique , yet it could add some dramatic touches to your design. It is just one layer object but you can replicate it over and over, and change the sizes.

Easy Camera Icon in Fireworks

In this tutorial artist will show you how to create a camera icon in Fireworks. Artist will focus on the lens pretty much, but as you will see, to create a realistic effect it’s all about playing with gradients.

How to fast prototyping

In this tutorial, artist goes over some of the features that help with fast prototyping, like the fit canvas button and the optimizing panel.

Creating AIR Applications with Adobe Fireworks

In this tutorial, Tom Green shows how to design a simple Flex application and export it from Fireworks.

Photoshop Image to Web using Fireworks CS4

Tom Green shows off how to bring a Photoshop image into Fireworks and export it as an html document.

Create a Vibrant Digital Collage Mixing Buildings and Vector Shapes on Paper

In this tutorial, you’ll learn how to use Fireworks CS3 and Illustrator CS3 together. You’ll create some illustrative vector elements to add to the final composition. You’ll also mix in photos and light effects. Learn how to use a cool paper background and tips to improve your workflow.

Build a Promotional iPhone App Website Wireframe in Fireworks

In this tutorial We’ll cover the design process of creating a wireframe for an iPhone application website in Fireworks.

Creating an amazing Palm Pre icon on Fireworks

This tutorial will show you how to create in Fireworks the icon for the Palm Pre frame.

Awesome Floral Type in Fireworks and Photoshop

In this tutorial we will use Adobe Fireworks and Adobe Photoshop. Actually the whole effect will be done in Firewors, then in Photoshop, we will add some textures and a old paper background effect.

Twist and Fade Technique

In this tutorial you are going to learn how to create some fun abstract effects using Adobe Fireworks CS4. This tutorial explains how a single Image/Vector can be converted into various Images/Vectors using the properties such as Steps, Spacing, Rotation and Opacity.

Highway Sign

In this tutorial you will learn how to create an amazing Highway Sign.

Create a Night Scene

In this tutorial we will learn how to create a beautiful night scene in fireworks.

How to blur background in Adobe Fireworks

In this tutorial you will learn how to blur the background of digital photos with Adobe Fireworks in a non destructive way.

3d Text

In this tutorial you will learn how to create an outstanding 3D Text in Fireworks.

Dot Matrix Effect

In this tutorial you will learn how to create Dot Matrix Effect.

Barcode

This tutorial will show you how to create a barcode for any purpose.

Mobile workflows using Fireworks CS5 and Device Central CS5

In this tutorial Liz Myers will show you how to harness the power of Fireworks combined with Device Central in these common workflows:

Interaction design and rapid prototyping with Fireworks

In the following four short video presentations, David Hogue demonstrates how to use Adobe Fireworks CS4 for information and interaction design and creating interactive prototypes quickly, and how you can use Fireworks as a design tool that fits into your complete design process, from concept to development.

Prototyping for the Apple iPhone using Fireworks

This tutorial shows you how to use a few scripts to make your Fireworks prototype work for the Apple iPhone.

Making of Darth Android

In this tutorial you will learn how to Making of Darth Android.

Designing a Website in Fireworks CS4

At this MAX session, XD’s Paul Dorian showed attendees how to use Fireworks CS4 to rapidly prototype websites, application interfaces, and other interactive designs, then output their designs to Adobe AIR, Flash CS4 Professional, Flex, HTML, or CSS-based layouts. Paul also shared tips on making the most of the new Fireworks user interface and core functionality, such as consistent text handling, via the Adobe text engine.

How to do simple 3D text with Adobe Fireworks

Creating 3D text with Adobe Fireworks is very simple job. Here is a quick tutorial how to do funny 3D-letters in few steps, just using one layer.

Create a barcode

This tutorial will show you how to create a barcode for any purpose.

Extracting Logos

This tutorial shows you how to extract a logo and/or logotype from a raster image, using only Adobe® Fireworks®‘ Live Filters. With this method, you also have the option to re-color the lifted logo in anyway you want: solid, gradient, or textured. All of this, while avoiding the temptations of the quick-and-dirty Wand Tool

How to create a thick text outline

In this tutorial you will learn how to create a Thick Text Outline.

Photo Blur Effect

In this tutorial you are going to learn how to partially blur a photo or focus on an image part using Adobe Fireworks CS4/CS5. The image below shows how we have blurred the background that will help you create step-by-step.

Optimize Photos

In this tutorial artist will show you the basics of taking an old or under-saturated picture and optimizing it.

Add Radial Gradient in Text

This is a tip good for poster art. Add a radial gradient in bold text to spice things up. If you’re tired of using borders and bevels, try this.

Papel de Parede 2009

Learn how to create a grass text effect in adobe fireworks.

Light Painting

How to create Light Painting in Fireworks.

Designing a media player skin

In this tutorial you will learn how to create a media player skin in Fireworks.

Designing a website application

This tutorial shows you the process of creating a website application in Adobe Fireworks CS4—from sketching the original page design to developing wireframes, to creating the final design. All the essential tools and instructions will be covered in this article to help you begin creating websites and designs within Fireworks CS4 right away.

Fireworks 101

In this tutoria you will learn how to play with paths, combining, subtracting and much more. Also you will end up creating a logo.

Night Vision Effect

This tutorial demonstrates how to give a night vision effect to an image in Fireworks MX 2004.

Brought To You By

Do you want to advertise here? Click to get more info…

45+ Handy CSS3 Tools, Tutorials and Resources

Akhter — Mon, 22 Aug 2011 12:57:35 +0000

CSS or Cascading Style Sheet is a special style sheet language used to create website layouts and styles. It has been extensively used by web developers all around the world and has proved its worth in the field of web development.

Recently CSS3 comes with some magnificent new features that support cross browser usability and help improving the web development. Mastering the skills in CSS3 helps you achieving a constant look for your website and allows you gain more control on its style and layout.

Here is a showcase of 45+ Valuable CSS3 Tool and Resources, as well as CSS3 Tutorials to let you understand the techniques and master the skills. We hope that this collection gives you understanding to have the edge in the world web development.

CSS3 Tools and Resources

CSS3 Button Maker

You will be provided with a number of sliders and color pickers that you can use to style your own CSS3 button. You can use the code in your own project.

CSS3 Generator

With this tool, you can choose CSS properties from the list and fill in your required parameters and get the code with a live preview.

CSS3 Please

It is a CSS3 rule generator that acts as a type of playground. It lets you create a mixture of CSS3 tweaks and see a live preview. You can use it in your own file.

CSS3 Gradient Generator

The CSS3 Gradient Generator is a powerful CSS based gradient tool designed for developers and designers to generate a gradient in CSS.

CSS3 Transforms

This tool provides you a set of sliders to test different transforms. For example; position, rotation, skew and more. You can get the code on the fly.

CSS3 Selectors Test

CSS3 Selectors Test automatically runs a large number of small tests which determines if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.

CSS3 Pie

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

CSS3 Previews

Many new CSS3 feature previews and demos.

Techniques to Acquaint You With CSS 3

Learn some of the most popular new CSS3 features.

CSS3 Cheat Sheet

You will get a downloadable PDF file that contains entire listing of all the properties, selectors kinds and permitted values in the current CSS 3 specification from the W3C.

CSS3 Color Names

This tool supports 147 different colors by name including 17 standard colors plus 130 more. This tool also shows their RGB and hexadecimal values.

The Power Of HTML5 and CSS3

Article covering HTML5 and CSS3 combination advantages.

CSS3 Builder

With this tool, you can design composite CSS3 boxes by means of an interface looking precisely like the one employed for applying Photoshop effects.

Sizzle

A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

Web Designers’ Browser Support Checklist

This tool displays web browser support on HTML5 and CSS3.

CSS3 Tutorials

Sexy Image Hover Effects using CSS3

In this post artist is going to show to How to create a sexy css effect on image hover.This kinda effect you have seen before in Flash or in javascript as well.But why use Flash or js when CSS can do the same work.So lets do it …

Sexy Sliding Image Gallery in Pure CSS3

In this tutorial you will learn how to create a sexy sliding image gallery in pure CSS3.

Sexy Image effect like Flash in Pure CSS3

In this tutorial artist is going to show a very different image effect using only CSS3. Previously this kind of effect is only possible in flash or js but now this can be done easily in CSS3.

Creating a PHP and CSS3 Powered About Page

In this tutorial, we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. It will present your contact information to your visitors, with an option for downloading it as a vCard (useful for importing it in third party applications).

Making a CSS3 Animated Menu

In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template.

Photobooth with PHP, jQuery and CSS3

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

Create a CSS3 Image Gallery with a 3D Lightbox Animation

In this short tutorial, you will learn how to Create a CSS3 Image Gallery with a 3D Lightbox Animation

Create a Slick CSS3 Button with box-shadow and rgba

In this tutorial you will learn how to create a Slick CSS3 Button with box-shadow and rgba.

Simulate Realism with CSS3

CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so. Here are a few examples of how CSS3 can improve the web.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Here’s a tutorial that let’s you create a backward-compatible website using HTML5 and CSS3. If you are not interested in the tutorial, you can just download the free HTML5 template and customize it as you wish.

Create An Elegant Website With HTML 5 And CSS3

A very detailed tutorial that will help you create a website using HTML5 and CSS3. This template has been tested with major browsers. A preview has been included as well as a download folder that contains the templates and images used in the website.

Create a Grid Based Web Design in HTML5 & CSS3

Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.

Sliding CSS3 Transition Image Gallery

This tutorial will show you how to create a “slide” effect image gallery using CSS3 transitions.

CSS Transitions – Throwing polaroids at a table

In this tutorial you will be shown how CSS3 transforms and WebKit transitions can add zing to the way you present images on your site by transforming some basic images into lots of differently sized Polaroid photos scattered across a table.

jQuery Style Vertical Menu with CSS3 – No Javascript

In this tutorial you will learn how to create an animated sliding vertical menu using some cool CSS3 properties, like ‘-webkit-transition:’ which will allow you to animate the ‘:hover’ state of a simple un-ordered list.
By adding styling to the anchor tags some fancy -webkit-border-radius and -webkit-box-shadow you will give the menu some shape and depth and complete it with a background image for each list item to enhance the interfaces effect – Basically, making them look like their coming from underneath the ridge.

CSS3 @font-face Design Guide

In this article, author will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr.

Adaptive & Mobile Design with CSS3 Media Queries

This tutorial will show you how to create a cross-browser adaptive design with HTML5 & CSS3 media queries.

CSS3 Rounded Image With jQuery

Learn to wrap a span tag around the image element to achieve rounded images which will be displayed right in all modern browsers.

CSS3 box-shadow and image hover effects

Explore a new way of adding drop shadow effects just by editing a style sheet.

Beautiful CSS3 Search Form

Most search forms looks boring. Using a little CSS3, you can turn the old and boring form into something definitely modern and cool. A must read tutorial.

Pure CSS3 Page Flip Effect

By using CSS3 gradients, transitions, 2d transforms and clipping, Roman Cortes achieved this pure CSS3 page flipping effect (no JavaScript is used). However, it works in Webkit browsers only (Safari and Chrome).

Wicked CSS3 3d bar chart

An attempt to create a 3D bar chart using CSS3. This example only works in the latest versions of Firefox, Chrome, Safari and Opera.

The Apple.com navigation menu created using only CSS3

In this tutorial you will learn how to create Apple.com inspired navigation menu using only CSS3.

Rotating billboard using only CSS3

In this tutorial you will learn how to create a Rotating billboard using only CSS3.

Animated CSS3 helix using 3d transforms

In this tutorial you will learn how to create a Animated CSS3 helix using 3d transforms.

Our Solar System in CSS3.

This is an attempt to recreate our solar system using CSS3 features such as border-radius, trans forms and animations. The result is surprising and quite interesting.

CSS3 Bookshelf

A very interesting idea that doesn’t look very nice because of rotation rendering, but is worth experimenting nevertheless.

Creating a Realistic Looking Button with CSS3

In this tutorial you will learn how to create a realistic looking button with CSS3.

Pure CSS3 Animated AT-AT Walker from Star Wars

In this article you;kk walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back. The author starts off by reviewing some CSS3 properties that made this animation possible. Then, he follows up with a list of the sections required to construct the AT-AT and the CSS3 code to move each section.

Paper Sticky Note Using Only CSS3

In this tutorial we will learn how to create a Paper Sticky Note Using Only CSS3.

Brought To You By

Do you want to advertise here? Click to get more info…

45 jQuery Plugins And Tutorials To Enhance Your Forms

Akhter — Mon, 15 Aug 2011 15:57:11 +0000

Creating awesome and appealing forms for your website has now become easy, thanks to jQuery plugins. Here we are sharing with you a collection of some extremely useful plugins and tutorials to help you create beautiful and awesome web forms.

Web forms are the crucial element for any website as website visitors use such forms to interact with the webmaster. Therefore, keeping them neat and functional while maintaining their aesthetic appeal is important. Here is the complete list. Enjoy!

Boxy –Facebook-like dialog/overlay ( Demo | Download )
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.

A jQuery Inline Form Validation ( Demo | Download )
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers.

ToChecklist plugin ( Demo | Download )
The toChecklist plugin for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.

A Fancy Contact Form ( Demo | Download )
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.

Select Multiple Form Fields ( Demo | Download )
asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options.

Creating a Digg Style Sign Up Form ( Demo | Download )
In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.

jQuery Show Password Plugin ( Demo | Download )
This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.

Create an AJAX/jQuery/PHP Contact Form ( Demo | Download )
This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page.

LightForm ( Demo | Download )
LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.

MeioMask ( Demo | Download )
With meioMask plugin you can create and apply maskstot text input fields.

LiveValidation ( Demo | Download )
LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms.

WordPress plugins for contact forms ( Demo | Download )
There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, Trevor is going to show how to use a custom page template to create a contact form in WordPress without a plugin.

How to Enhance Forms Using jQuery UI ( Demo | Download )
jQuery makes creating UI so much easier without compromising speed and quality. In this tutorial we are going to enhance form using jQuery UI, so let’s get started

Submit A Form Without Page Refresh using jQuery ( Demo | Download )
Submit a contact form that sends an email, without page refresh using jQuery, This tutorial will help you creating a form that can be submitted without page refreshing, using JQuery.

Timepickr ( Demo | Download )
jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.

Password Strength Indicator and Generator ( Demo | Download )
In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

JQByte StickyForms ( Demo | Download )
StickyForms is a jQuery plugin that automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.

File Style jQuery ( Demo | Download )
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Autocomplete ( Demo | Download )
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Emblematiq Niceforms ( Demo | Download )
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!

A BETTER FORM – SPAM-LESS ROBOT-LESS FORMS ( Demo | Download )
A Better Form is a jQuery plugin I designed to help eliminate spam comments, spam emails and other automated form submissions.

Progress Bar ( Demo | Download )
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.

jQuery AlphaNumeric ( Demo | Download )
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Build An Incredible Login Form With jQuery ( Demo | Download )
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

prettyCheckboxes ( Demo | Download )
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

Improved Current Field Highlighting in Forms ( Demo | Download )
In this tutorial CSS expert Chris Coyier will tell you how to improve your form usuability and enhance them visually.

jQuery Ajax delete ( Demo | Download )
Removing contents with Ajax is a useful tool to have in any web designers kit. Using a few lines of jQuery we can remove a div and simultaneously remove a record from the database with Ajax. In the download and demo you’ll see a small red cross to the right of each comment. Clicking the cross will remove the comment div with a slide up animation which will remove the div. click the image below to check out the demo.

jQuery Auto Complete ( Demo | Download )
Auto-complete takes input from the user, and tries to form a list of words that match the users input. The function attaches itself to the input field selected, and also creates the UL drop down from within so all you need is have the styles for it ready.

Date Picker ( Demo | Download )
Date Picker component with a lot of options and easy to fit in your web application.

Plugin for Password Masking ( Demo | Download )
This plugin gives users the option to see the chracters of the password the are entering, for usability purposes.

jQuery Form Plugin ( Demo | Download )
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process.

Input Fields with Images ( Demo | Download )
With this plugin you can add icons or images inside of input fields to add some flair to your forms.

Elastic ( Demo | Download )
Elastic makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

jQuery Checkbox ( Demo | Download )
This plugin allows you to style your forms checkboxes or radio buttons.

iPhone Style Checkboxes ( Demo | Download )
With this plugin you can enhance standard HTML checkboxes and gives them an iPhone-like styling.

jQuery Autosave ( Demo | Download )
Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong. The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.

AutoTab ( Demo | Download )
Autotab provides smart auto-tabbing and filtering on text fields in a form. Simply put: once you have typed the maximum number of characters in a text field, you will automatically have focus on the next defined text field. Target text fields are defined, as well as a defined previous text field.

Magicpreview ( Demo | Download )
Magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.

Using form labels as text field values ( Demo | Download )
When designing you sometimes have limited space to put and display all of the form elements. Recently that happened to me and when I was trying to squeeze in a simple newsletter form to a 120px wide area (plus a limited height). I realized that some of the elements will have to go. The obvious solution was to get rid of the labels and put only the form text fields. How will the users know what are the text fields for? I will use value attributes and write the explanation in there, something like “Input your email here”. Problem solved? Not quite. Why? Because I am a web standards freak

Checking username availability with ajax using jQuery ( Demo | Download )
The time when username availability is checked after the page is normaly processed is long way behind us. Google has it, Yahoo has it and many many more sites have it, ajax username availability checker. So in this tutorial we will make an ajax username availability checker powered with jQuery.

jQuery Highlight plugin ( Demo | Download )
Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.

A Fancy AJAX Contact Form ( Demo | Download )
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

ASM Select ( Demo | Download )
A progressive enhancement to select multiple form elements. It provides a simpler alternative with lots of advantages.

BABYSTEPS ( Demo | Download )
BabySteps (A ‘What About Bob?’ reference) is a simple and easily configurable tool for turning long forms into broken out steps without going from page to page.

BS FORM ACCELERATOR ( Demo | Download )
BS Form Accelerator will be able to use Enter or Space buttons in your forms replacing the buttons such as Tab for changing focus in fields just with assigning an ID to the form.

Brought To You By

Do you want to advertise here? Click to get more info…

50 Truly Eye-Catching And Detailed Web Layout Tutorials

Akhter — Mon, 20 Jun 2011 16:37:58 +0000

An eye-catching web layout can help capture the attention of your potential customers by giving them a feel of confidence and trust. Designers mainly use Adobe Photoshop to create beautiful and stunning designs. Adobe Photoshop is the most widely used graphics software that is being employed all over the world.

Here we are showing 50+ most useful tutorials of Adobe Photoshop that show you the creation of beautiful web layouts by the sole use of Photoshop. We hope that you enjoy this collection.

Full Photoshop Web Design

Web Layout for Italian Restaurant

Create a gritty portfolio layout

Nature Portfolio Layout

Design a Clean Corporate Website Layout

Design a realistic website layout in photoshop

How to Create an Effective Coming Soon Page

Design a Heavily Textured Portfolio Website

Create a Professional App Store Web Layout

Learn how to create a Grunge Portfolio Layout

Create a cool Travel Agency layout

Create a Blog Web Layout With 3D-looking Elements in Photoshop

Create a Beautiful and Elegant portfolio in Photoshop

Create a colorful wordpress layout using Photoshop

Photography portfolio

How to create a recipe template in Photoshop

Urban layout perfect for Web Design Company

How to create an elegant business psd template in Photoshop

How to design a law/justice website in Photoshop

3D Studio

How to design an elegant website in Photoshop

How to design a health/nutrition or a fitness website in Photoshop

Design Agency Layout

Elegant, Wallpaper style template layout

Learn how to create a stylish/elegant web layout in Photoshop

Old paper layout

Create a minimalist web site design in Photoshop

Create a Valentine’s Day Layout with Photoshop

Learn how to create a website layout in Photoshop

How to create a trendy/colorful wordpress layout in Photoshop

Learn how to create a Sports Car layout in Photoshop

How to design a professional website for your school, college or university

Design a Sleek, Professional Travel Blog

Photographer layout

Personal Portfolio Layout

Create an Amazing Layout Using Textures

Design a Cool Textured Portfolio Website

Design a Quick and Clean Portfolio Website

Design a Trendy Yet Professional Website Layout

Create a one-page iPad/iPhone application web layout using Photoshop

Interior Design Layout

Create a Food Blog Layout in Photoshop

Web 2.0 Professional Blog Layout Tutorial

Chopper layout

Code a Textured Outdoors Website

Create a cool and trendy grunge web layout in Photoshop

Create a green energy website in Photoshop

Create a Real Estate Web Layout in Photoshop

Cheerful Website Interface in Adobe Photoshop

Elegant and Simple CSS3 Web Layout

Create a Web Application Website Design in Photoshop

Create a Vibrant Professional Web Design in Photoshop

Create an Elegant Patterned Web Design in Photoshop

Design a Modern Blog Layout in Photoshop

Brought To You By

Do you want to advertise here? Click to get more info…

50 Killer (Photoshop And Others) Tutorials For Graphic Designers

Obaid — Mon, 16 May 2011 15:40:51 +0000

Tutorials are the best source for the designers when they need to design a project that has been really putting them off. With the help of tutorials, one can learn the new skills and can also polish the skills he already possesses. This assortment of some killer Adobe Photoshop and Illustrator Tutorials will definitely come in handy for the majority of the designers all over the world. In this collection, you will find everything you need right whether it be creating a mummy text effect or designing a vintage style zombie movie poster. So get ready to be inspired. Here is the full list.

How To Draw a Vintage Polaroid Camera Icon

In this tutorial we will learn how to create a Polaroid camera icon. We will use lots of layer styles and draw manually with the brush tool to achieve a realistic appearance. Let’s get started!

Create a Vector Chopper with Illustrator CS5 and VectorScribe

In this tutorial you will learn how to create a vector chopper with illustrator CS5 and vectorscribe.

How to Illustrate a Tasty Watermelon

In this tutorial you will learn how to create a simple and great looking Watermelon illustration. Using Blends, Mesh, Brush, and Symbol Sprayer tool.

Draw a Shiny Make-Up Mirror with Adobe Illustrator

In this tutorial we will learn how to create a pretty make-up mirror using mostly grayscale and hard shapes to achieve a shiny metallic effect, also we’ll be using gaussian blur effects and the mesh tool for a better result.

Use Photoshop to Create a Still-Life Lamp Nightstand and Picture Frame

In this tutorial, we will learn how to create the inside of a home from scratch using only Photoshop. In the end, we will create a lamp, nightstand, a picture frame and several other elements using layer styles and filters along the way. Let’s get started!

Create an Open Book Icon In Photoshop

In this tutorial we will learn how to create an open book icon in Photoshop.Let’s get started!

Create a Vibrant Abstract Vector Design Illustrator

In this tutorial how to create a photo-realistic rendering of a car, in this case an Audi A1. This tutorial relies heavily on paths and should take about two hours to complete depending on skill level.

Create a Wacom Product Advertisement in Photoshop

In this tutorial, you willl learn how to create a Wacom tablet product advertisement.You will see how to take a product image and create a theme for an advertisement and then how to execute it with a variety of subtle touches.

How to Make a Golden Compass in Illustrator

In this tutorial, you will learn how to create an antique golden compass. We will use simple Illustrator drawing tools such as the Ellipse Tool, Pen Tool and Line Tool.

Create a Burning, Vector Match Using Gradient Meshes

Create a Quick Spring, Holiday Scene in Illustrator

In this tutorial you will learn how to create a quick spring holiday scene in illustrator.

Give a 3D, Vector Robot a Realistic Feel in Photoshop

In this tutorial you will learn how to combine different methods from Illustrator and Photoshop to enhance your 3D vector art. Through the process you will learn how to use the appearance panel, 3D extrude and 3D revolve.

Create a Royal Crown Using Adobe Illustrator CS5

In this tutorial you will learn how to create a crown using four stages of design: 3-D modeling, creating of elements of the crown, colors, and creating glare on the surface. Let’s get started!

Design Wedding Rings Using Adobe Illustrator

In this tutorial you will learn how to create wedding rings using 3D modeling in Illustrator.

How To Create a Jeweled Butterfly In Inkscape

In this tutorial you will learn how to create a sparkling jeweled butterfly.

Draw a Magician’s Hat in Illustrator

In this tutorial you will learn how to create a magician’s hat in Adobe Illustrator.

How to Draw a Classic Electric Guitar in Photoshop

In this tutorial you will learn how to create a classic electric guitar in photoshop.

Draw a Vector Traffic Cone with Adobe Illustrator

In this tutorial we will be creating a traffic cone. The creation process is quite simple: We just need to combine a few shapes, use the Pathfinder Panel and Illustrator’s shape tools smartly, and then apply nice gradients.

Create a Vintage Steam Locomotive Poster in Photoshop

In this tutroial you will learn how to create a vintage steam locomotive poster in photoshop.

Creating Vector Eyes with CorelDraw

In this tutorial you will learn how to make a vector based eye using coreldraw.

How to Design a Realistic Gamepad

In this tutorial, you will learn how to create an illustration of a gamepad using the Pen Tool, Gradients and Filters.

How to Draw a Realistic iPhone 4 with Photoshop

Create a Post-Apocalyptic Matte Painting

In this tutorial we will demonstrate how to create a post-apocalyptic matte painting of an old cathedral. Let’s get started!

Create a Sleek and Clean MP3 Player Interface

In this tutorial, we will design a sleek and clean MP3 player interface. The process involves a lot of manual drawing and lots of layer styles. Let’s get started!

Create a Download Folder Icon in Photoshop

In this tutorial we will demonstrate how to create a download folder icon using different shapes and reflections in Photoshop. Let’s get started!

Create a Fictional Arctic Snow Frog in Photoshop

In this tutorial we will combine several stock images and effects to create a fictional arctic snow frog in Photoshop.

How to Make a Detailed Printer Icon Using Illustrator

In this tutorial we will construct a desktop printer icon that is rich in detail. We will use the industry-standard vector illustration tool Adobe Illustrator.

Create a Centaur Photo Manipulation in Photoshop

In this tutorial we will create one of these mythological creatures by blending several images together and adding some dramatic lighting and depth to the scene.

Create a Realistic Blueprint Image From a 3D Object

In this tutorial we’ll create a a quick mock-up of a 3D car blueprint. Then we’ll place it on an image of a drafting table. This time we’ll use a particular Photoshop 3D Render Mode to create this awesome effect. Let’s get it started!

Create a Fallen, Rain-Soaked, Angel Composition in Photoshop

In this tutorial we will demonstrate how to create a lonely, fallen, rain-soaked, angel composition in Photoshop using photo manipulation techniques. Let’s get started!

Make a Divinely Dark Zen Composition in Photoshop

In this tutorial we will photo manipulate different photos textures and organic elements to produce a mysterious Zen-inspired composition.

Color Your Artwork Using Actions in Photoshop

In this tutorial we will demonstrate how to use actions to help color your artwork. Let’s get started!

Create a Minion Character From the Despicable Me Movie

In this tutorial we will use Photoshop and Illustrator to create a cute minion character. Let’s get started!

How to Create a Delicious Green Apple Illustration

In this tutorial you will learn how to draw a shiny green apple. We’ll have a look at various painting techniques throughout this tutorial. It will be fun and you’ll learn something new – let’s started!

Create a Scenic Castle Hallway in Photoshop

In this tutorial we will combine stock photography and some basic digital painting techniques to create a scenic castle hallway in Photoshop. Let’s get started!

Create a Vibrant and Eye-Catching Drink Composition using Photoshop

In this Photoshop tutorial you will learn how to create a Sobe fruit drink advertisement using some simple water stock images and a lot of easy to use techniques that will yield high quality results.

Create a Cardboard Box Icon in Photoshop

In this tutorial we will show you how to make a cardboard box that can be used for a number of purposes, such as for icons or for other design purposes.

Undress a Giraffe in Photoshop

In this tutorial we will demonstrate how to undress a giraffe by removing its spots. We will then show how to turn its spots into an outfit that will be draped over an ironing board. Pretty cool! Let’s get started!

Turn an Ordinary Photo Into an Avatar Style Portrait in Photoshop

In this tutorial we will demonstrate how to use basic digital painting techniques to turn an ordinary photo into an Avatar style portrait. Let’s get started!

Create a Golden Heart-Shaped Box

In this tutorial we will demonstrate how to create an elegant heart-shaped box in Photoshop. Let’s get started!

Create a Powerful Mental Wave Explosion Effect

In this tutorial we will demonstrate how to create a powerful mental wave effect using Photoshop. Let’s get started!

Design a 3D Digital Clock Icon with Illustrator

In this tutorial will explain how to create a glossy and stylized digital clock from scratch in Adobe Illustrator composed of basic shapes and nifty gradients.

Create an Awesome Number-Based Illustration

Create a Shampoo Advertisement in Photoshop

In this tutorial we will use the pen tool, some basic shape transformations, and color blending to create a fresh-looking shampoo bottle within the context of an advertisement. Let’s get started!

Draw a Spilled Paint Bucket in Illustrator

In this tutorial We will take advantage of many excellent features in Illustrator, such as the 3D Extrude & Bevel command, Blend command, drawing shapes with the Pen Tool and Pencil Tool, using Pathfinder commands to combine and create shapes, and more. The resulting product is a scalable vector drawing.

Make a 3D Recycling Bin Icon with Photoshop

In this tutorial we will show you how to make an appealing drawing of a recycling bin with crumpled and creased white paper inside and around it all from scratch.

Create a Cartoon-Like Fish Illustration in Photoshop

In this tutorial we will demonstrate how to create a cartoon-like fish illustration in Photoshop. Let’s get started!

Draw a 3D Mailbox With Photoshop

In this tutorial we will create a 3D mailbox using several of Photoshop’s tools and techniques. Let’s get started!

Draw a Sound Dock System With Photoshop

In this tutorial we will demonstrate how to draw a Sound Dock System with Photoshop. Let’s get started!

How to Make a Sleek Aluminium Hard Drive in Photoshop

In this Adobe Photoshop tutorial, we will create from scratch an external hard drive that has a smooth, metallic finish.

Brought To You By

Do you want to advertise here? Click to get more info…

30 (Really) Amazing Tutorials And Techniques To Become A Master Of Photoshop

AN Jay — Mon, 11 Apr 2011 17:07:07 +0000

Adobe Photoshop is a comprehensive design tool that designers need to explore continually. The best way to explore new ways of using tools of Adobe Photoshop is definitely with the help of Photoshop tutorials that are extensively available on the internet. This post also features a collection of really New Photoshop Tutorials that you have not seen before. We hope that this collection proves to be very useful for you. These tutorials will help you in fulfilling your Image editing & photo enhancement related needs.

Create a Red Giant Star in Photoshop

In this tutorial you will leran how to create a red giant star in photoshop.

How to Create an Audi A1 Digital Car Painting in Photoshop

How to Create a Medieval Movie Poster in Photoshop

In this tutorial we will show you how to create a 3D grunge metal movie poster title in Adobe Photoshop CS5 by using the Repousse tool. Every movie poster needs a spectacular title whether it is in a grunge, metal, typographic style.

Create an Explosive Flaming Poker Card in Photoshop

In this tutorial we will show you how to create your own custom poker card from scratch by using the wide variety of shapes that come with Photoshop.

Create a Mysterious Fashion Photo Manipulation in Photoshop

In this tutorial you’ll learn how to use different custom brushes to create stormy weather, save your masks to save your time, work with different adjustment layers, and make adjustments only on small parts of the image to achieve the exact result you want. Let’s get started!

Adidas Sneaker

In this tutorial You’ll learn how to create the shape with the Pen tool and use different techniques for coloring and shading.

Design a Vintage Baseball Card in Photoshop

In this tutorial you will learn how to create a Design a Vintage Baseball Card in Photoshop.

Valentine’s Day Photoshop Ideas

In this tutorial you will learn how to create a valentine’s day photoshop ideas. Shiny heart on the dark background.

Design a Conceptual Album Cover in Photoshop

In this tutorial we will take a look at the step-by-step process of creating a conceptual album cover in Photoshop. Let’s get started!

Draw a Roll of Camera Film in Photoshop

In this tutorial we will demonstrate how to create a roll of camera film using Photoshop. Let’s get started!

Create a Paint Brush in Photoshop

In this tutorial you will learn how to create a paint brush in photoshop.

How to Apply Textures to Uneven Surfaces

In this tutorial you will learn how to create a apply textures to uneven surfaces.

The Cosmos: Create a Spiral Galaxy

In this tutorial we will show you how to create a spiral galaxy.

Painting “The Nightmare” in Photoshop

In this tutorial you will learn how to create a painting the nightmare in photoshop.

Create a Download Folder Icon in Photoshop

In this tutorial we will demonstrate how to create a download folder icon using different shapes and reflections in Photoshop. Let’s get started!

Glass Yellow Tomatoes

Create realistic glossy glass tomatoes with liquid in them, make reflections and shadows.

How to Make a Textured 3D Spray Can

In this tutorial we will demonstrate how to combine Illustrator and Photoshop to create a 3D, textured spray can. This tutorial requires some basic understanding of Illustrator and Photoshop as well as the pen tool. Let’s get started!

Create a Fictional Arctic Snow Frog in Photoshop

In this tutorial, we will combine several stock images and effects to create a fictional arctic snow frog in Photoshop.

Create an Ancient Egyptian Tomb in Photoshop

In this tutorial we will create an ancient Egyptian scene using stock images, textures, and some basic knowledge of perspective. Let’s get started!

Create a Flowerpot From Scratch in Photoshop

In this tutorial we will show you how to create a flowerpot from scratch using several techniques in Photoshop.

Create a “Minion” Character From the Despicable Me Movie

In this tutorial you will leran how to create a cute minion character.Let’s get started!

Create an Alien Invasion Photo Manipulation in Photoshop

In this tutorial you will leran how to create a destroying city manipulation by using some basic techniques like color correction, masking and brushes.

“Piece of the Artic” Pie Chart Photo Manipulation

In this tutorial we will show you how to create a piece of the artic pie chart photo manipulation.

Create a Vibrant and Eye-Catching Drink Composition using Photoshop

In this tutorial, you’ll learn how to create a vibrant and eye-catching drinl composition using photoshop.

Create a Scenic Castle Hallway in Photoshop

In this tutorial, we will combine stock photography and some basic digital painting techniques to create a scenic castle hallway in Photoshop. Let’s get started!

Egg Planet Fantastic Globe Photo Manipulation

In this tutorial you will learn how to create a egg planet fantastic globe photo manipulation.

Milk Monster And Chocolate Splash

In this tutorial we will show you how to create a milk monster and chocolate splash.

Create a Powerful Mental Wave Explosion Effect

In this tutorial we will demonstrate how to create a powerful mental wave effect using Photoshop. Let’s get started!

How to Create a Beautiful Printer Icon in Photoshop

In this tutorial you will learn how to create this beautiful printer icon with reflections and shadows all within Photoshop.

Create a Stylish Coffee Cup With Smart Objects

In this tutorial we will demonstrate how to create a realistic coffee cup with a customizable label using smart objects in Photoshop. Let’s get started!

Brought To You By

Do you want to advertise here? Click to get more info…

45 Totally Awesome Tutorials And Techniques To Become A Master Of Photography

AN Jay — Wed, 02 Mar 2011 21:58:36 +0000

This post showcases a list of useful and unique photography related tutorials that will help you learning the skills of a trained photographer. The field of photography has extensively grown over the past few years to such a huge industry with millions of photographers emerging every day around the globe and mastering their skills in different areas of photography.

The tutorials listed below let you learn how to capture a digital photograph in a better way and then direct you all the way throughout photo-editing process by means of using photo-editing software such as Photoshop.

Professional Photograph Restoration Workflow

In this tutorial, we’ll take an in-depth look at restoring an old torn photograph.

Age Progression

Here’s a tutorial showing you how artist go about aging a woman’s face in Photoshop.

Changing Hair Color

Here in this tutorial we will teach how to change a person’s hair color using Photoshop’s brush tool and the soft light blend.

Colorizing Black-And-White Photos

Using Photoshop to create a classic hand-painted effect.

Street Photography Explained

Street photography is one of those techniques that sounds simple, ‘just go out and take some photos of people wondering about’, but some time it is very difficult, in this guide you will find some tips and basics for great street photography.

Self Portrait Photography Guide

In this guide you will learn some useful tips for snapping self-photos.

Waterfall Photography Tips and Techniques

Waterfalls provide their own unique set of problems which requires a unique set of solutions. This article is about those unique problems and the solutions that allow photographers to produce images that communicate the power and beauty that is inherent in the waterfalls that stand before their lenses.

How to Photograph Comets

In this guide you will learn some useful tips about comets photography.

How to Make Your Twins

Imagine one day you announce to all your friends that you have a twin, by showing them a very realistic photo. There must be many fun then! In this tutorial artis will show you how to do that in this photoshop tutorial.

Infrared Photography Technique

Infrared photography is one of those techniques that requires a bit of practice. Its not that hard to produce an infrared photograph but adjusting the image in post processing is a business that yeilds different results each and every time, learn all about it through this guide.

Dual View Photo Editing in Photoshop

In this Photoshop tutorial, we’ll look at how to give ourselves two different views of the same image by opening it in two separate document windows, each set to a different zoom level, making it much easier to judge the effect our edits are having on the overall image.

Local Contrast

Is your lens lacking contrast? Find out how to simulate the contrast qualities of high quality lens with this Photoshop retouching tutorial. This effect increases visible detail and edge contrast without increasing the overall image contrast.

Use Photoshop to Turn Day Into Dusk

In this tutorial we will demonstrate a quick technique to make your photos look as if they were taken at night. Let’s get started!

Souping up a Photo

There are times when a regular photo just doesn’t cut it and you need your photo to pack a punch. Here is one technique that you may find useful.

Wedding Photography Explained

In this guide you will learn tips and techniques for taking professional level weddings photography.

Add a Realistic Rainbow to a Photo in Photoshop

In this Photoshop photo effects tutorial, we’ll learn how to easily add a rainbow, and even a double rainbow, to a photo! As we’ll see, Photoshop ships with a ready-made rainbow gradient for us to use. We’ll learn where to find it and how to load it in.

Remove a Person from a Photo with Photoshop CS5

One of the new features we will be looking at this tutorial is called Content Aware. This feature allows you to quickly fill in a selection with surrounding content making it look like a part of the original image.

How to Use Lines in Photography Compositions

In this guide we will discuss the usefulness of lines for better shots.

How to Capture Really Sharp Photos

One of the most frustrating experiences for a photographer is to get home from a photo trip with some great images only to find that some of the images are not sharp. To help solve this problem, this article covers seven things that a photographer can do to create really sharp images.

Look More Muscular

Ok, So You Wanna Look Muscular? But don’t afford the money nor the time to train in a gym? Who cares, it’s only a quick impression picture that matters, right? Well, You can be right! Check out this tutorial to see how you can improve yourself!

Create Your Own Bokeh for Beautiful Photo Effect

What’s a bokeh you say? It’s that oh-so-wonderful fuzziness in the background of photographs with a shallow depth of field and accompanying starry highlights. You can create you own bokeh effects with a little craftiness.

Photographing Complex Architecture

Photographer Philipp Klinger gives his advice on capturing elaborate structures.

Tilt-Shift Photography Photoshop Tutorial

This tutorial has been produced using Photoshop CS2 on a PC and shows you how to give a city shot a neat miniaturization effect.

Intuitive B&W Conversions

Try this simple step-by-step process for making beautiful monochrome images.

Color Correction Basics in Photoshop

Have you wanted to learn more about color correction? The focus of this tutorial is to help you delve deeper into color correcting to up the production value of your images. Learn a few simple techniques while creating.

How to Photograph Wakeboarders & Waterskiing

In this tutorial we will find some useful tips on how to achieve great wakeboarding pictures.

Camera Toss Photography Technique

In this step by step guide we will learn some technique of camera toss photography.

Make Your Photo Impressive

There are so many methods to change your photo’s color, but here artist will show you some best ways to do that.

Give a Photo a Complete Glamour Makeover With Stunning Light and 3D Effects

In this tutorial, you will learn how to retouch a model’s face and subtly manipulate her hair. In addition, we will enhance the canvas by adding attractive lighting and 3D effects.

Color Correction in Photoshop with the Curves Adjustment Tool

This tutorial will teach you how to use this tool to color correct photos efficiently.

Reducing Wrinkles With the Healing Brush in Photoshop

In this tutorial, we will look at the Healing Brush, by far the best photo retouching tool in all of Photoshop, and how we can use it to easily reduce distracting skin wrinkles in an image.

Portrait Lighting Tutorial: Character Study

In this tutorial you will learn how to make a portrait more honorable and admirable.

Macro Photography Tips

Photographing insects in flight is one of the greatest challenges for all wildlife photographers. This article describes how to capture crisp, sharp images of the Emperor Dragonfly.

Nightclub Photography

A Guide To Nightclub Photography

Face Makeover

In this tutorial you will learn how to make a beauty makeover with cool retouching effects:

Aperture and Shutter Priority

Shutter Priority is an auto exposure system in which the camera achieves correct exposure by selecting the aperture after the user has selected the shutter speed.

How to Create Sunshine Effect in Studio with Artificial Sunlight

In this tutorial video we’ll give you tips on how to cheat Mother Nature and show you How to Create Your Own Sunshine in the Studio.

How To Photograph Moving Vehicles

A step-by-step guide to capturing that perfect motion shot.

Travel With Still+Video

Tips for better technical and creative results shooting video with your DSLR.

Professional Lighting in Model Photography

This case study shows how lighting was manipulated to create the perfect environment for a fashion photoshoot.

Portable Lighting for the Studio and on Location

In this lesson, we decided to keep things very simple and just illustrate some uses of this one simple shoe mount flash lighting kit, the XS OctoDome nxt Basic Kit with Grids, for both indoor and outdoor portraits.

Photography Tutorial: Get the Right Light

When shooting portraits, good lighting is all-important. To make sure you have it, you can buy expensive lighting rigs and multiple flash units. Or you can spend a few bucks and carry just the right mix of sun and clouds in your pack.

Macro Photography

How to take close-up pictures of small things.

DIY – High Speed Photography at Home

You can use this technique to take picture of exploding things like tomatoes, water balloons, watermelons, or even your Canon camera as you smash it against a wall for not understanding the menus.

Isolated Sharpness

Tips and techniques for using shallow depth of field to add impact to your macro shots.

Beyond HDR

In this tutorial you will learn how to expand your photo’s tonal range when HDR techniques aren’t ideal.

Brought To You By

Do you want to advertise here? Click to get more info…