Tips and Tricks

19 Time Saving And Free Photoshop Actions For Designers

Photoshop actions are meant to simplify designers’ work and let them perform some sort of repetitive tasks quite easily and effortlessly. Adobe Photoshop is the most powerful as well as most widely used photo editing software. Many designers are dependent on this software for performing their everyday designing tasks. With Photoshop actions, designers can easily apply different types of effects on a given format.

Below, we have presented 19 very useful Photoshop actions for the designers. Check them out and pick the ones you like the best. We hope that you will like this collection and find these amazing Photoshop actions useful for you. Feel free to share your opinions with us via comment section below. Your comments are always more than welcome. Let us have a look. Enjoy!

Photoshop Soft Action

Photoshop Actions Set 2

Plexiglass by SparkleStock

Action 03

Photoshop waterscape Action

Denim & Leather

Curve

Najib17Stunning ColorFx by najib dod

Warm colors

Fun FX: Digital Corruption

10 Colorful Actions

Red Autumn

Yellow contrast

Yellow tree action

Fairytale actions

Dear diary

2010 color correction action

Summer Fade Ps Action

Autumn

40 Tutorials And Tools That Will Make You A CSS3 Master

Having a tough time in learning CSS? Well, not to worry as here we are presenting 40 excellent and extremely useful tutorials, tricks as well as some tools to make you a CSS3 master. With these resources, you can develop your CSS3 skills and can bring them into your work.

Without any further ado, here we are presenting a list of 40 awesome tutorials and tricks to help you become a CSS master and along with them you will also find some tools to help you with CSS. Here is the full collection after the jump. We hope that you will enjoy this collection. Feel free to share your opinions with us via comment section below. Enjoy!

Tutorials

Make a Stopwatch Using CSS3

This tutorial focuses on step based CSS3 keyframe animation, along with the usage of the animation-play-state property to start/stop/reset the stopwatch.

Create a flat bubble navigation

In this tutorial I’m going to show you how to create a flat bubble navigation with HTML and CSS3.

CSS3 Shapes

Here you’ll find a range off shapes all coded with just pure CSS3 code. Unfortunately not all shapes will render correctly in all browsers, currently only web browsers that support CSS3 will produce the correct geometric shapes.

Expanding Search Bar Deconstructed

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

Caption Hover Effects

A tutorial on how to create some subtle and modern caption hover effects.

Using CSS3 Pseudo-Classes And Transitions

Hyperlinks and buttons are a functional yet in general boring aspect of a website or web application. They tend to provide very little feedback when you interact with them. This doesn’t have to be the case, it’s very easy to add some simple styling to let the user know that they have either interacted with or can interact with an element.

Using CSS3 To Provide Smooth Resize Effects

Ever noticed if you resize your browser window with Gmail open (or Asana or a host of other sites) the various elements on screen resize automatically in a smooth animation? This can be done using JavaScript or jQuery, but can also be achieved using CSS3 transitions and @media selectors.

Animating CSS3 Gradients

In this tutorial we will learn about animating CSS3 Gradients.

CSS3 Radial Gradients

Gradients are much-used on web sites: if you want to liven up pretty much any UI feature (buttons, panels, headers, etc.) you can use a gradient, although you should use them sparingly to avoid the “web site christmas tree effect”™. Traditionally we used CSS background images to add gradients to our UIs, and they worked ok, but they were rather inflexible. You’d have to go to your image editor and make changes to the image file every time you wanted to change the colours, size or direction of the gradient.

How To Create Gmail Logo With CSS3

In this post, I’m going to show you how to create not one, but two variations of Gmail logo using just CSS3.

Code an Awesome Animated Download Button

Follow along as we create a simple and fun download button using some fancy CSS3.

Mastering CSS Gradients in Under an Hour

If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples.

Semantic CSS With Intelligent Selectors

CSS Technique

Absolute Horizontal And Vertical Centering In CSS.

CSS Layouts

Designing CSS Layouts With Flexbox Is As Easy As Pie.

Building A Circular Navigation

In this tutorial I’m going to show you how to create a flat bubble navigation with HTML and CSS3.

Natural Language Form With Custom Input Elements

An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements.

Web Audio Stylophone

The mighty stylophone. One of the greatest musical instruments ever created. Used by the likes of David Bowie, Kraftwerk and pretty much no-one else inbetween, I’ll show you how to make this fantastic invention using the Web Audio API.

CSS3 Cookbook

Below you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it. I’ve tried to ensure graceful degradation where possible so that you can provide a working experience to all users and a better experience to those with using webkit.

CSS Transitions

If you haven’t used transitions before, here’s a brief introduction. On the element you want to have animate, add the following CSS:

CSS3 Navigation Menu

Been a while since I posted an update as i’ve been working alot, so I think it’s time for another CSS3 navigation menu tutorial. The tutorial will walk you through the process of structuring a navigation menu in HTML. Once the HTML is complete you will use Photoshop to create a textured background, and then the menu will be brought to life using CSS.

Google Nexus Website Menu

A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.

Height Equals Width With Pure CSS

CSS3 And The Nth-Child

How many times have you seen a piece of JavaScript or PHP code that’s only purpose is to add a specific class to the first, alternate or last element of a list or row of table? With CSS3 you can easily get rid of all of that logic and replace it clean and simple CSS selectors. This will help tidy up your code and depending on what exactly the code is doing reduce CPU load by removing unnecessary recursions (This is of course a minimal gain, but every little bit counts)

How To Edit CSS Dotted Outline

By default, when an anchor tag element is in active or focus state, a dotted line appears around it, as shown in the image below.

Tools

Same Gradient Generator

The coveted CSS3 Gradient Generator has undergone a redesign and moved to its new home within the CSS3 Factory. It has maintained all of it’s tools and functions but looks even better now. The redesign enhances the generator’s usability and I will be adding even more advanced functions soon.

Border Radius

CSS border radius generator for lazy people.

CSS3.0 Maker

CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.

CSS3 Generators

A fully customizable CSS3 generator to fit your needs. Now with older browser and Internet Explorer support!

HTML5 & CSS3 Support

cSS3Pie

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

Css Sprit

Please, choose and upload the image files you want to use in your css sprite and click “Create CSS Sprite”. The application will join all your images files into a single file and will generate the corresponding CSS and HTML code along with the rollover effect if any choosen.

Css3 Button

Css Arrow Please

Css Trick Button Maker

Layer Styles

Just like your favorite graphics editor, but in your browser. And it creates CSS.

Gradients

Spritebox

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.

Fontdragr

A revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop.

CSS3 Cheat Sheet

Sizzle

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

HTML 5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

Adobe Illustrator CS6 Beginners Guides & Tutorials

Smooth and seamless graphics is a task considered most substantial one, not so easily mastered,requires skills with techniques which at times can be most brain and time consuming. Thus, software development goes for all possibilities in quest for introducing and refurnishing technologies making near impossible as piece a cake, a flash-by process, quick, easy and pain-less!

Adobe Illustrator CS6, the latest of in family, is not short of such wonders! Adobe Illustrator CS6 saves time and effort, while giving the best results with in the matter of minutes. Whether you’re at logos, posters, promos, Illustrator CS6 has the newest techniques for generating more refined graphics ever dream by designers, with swift responsiveness, rebuilt user interface, advanced tools and much more. Progressing from grass-root, in this post we are showcasing Illustrator CS6 Tutorials for beginners. Start polishing your skills and while your inspirations flow as you’re on your way to pros arena!

How to Create a Realistic, Shiny Fountain Pen Nib in Vector


illustratortuts

How to Create an Abstract Web Design with 3D Spheres in Illustrator


illustratortuts

How to Utilize the Pattern Tool to Create a Pattern Brush in Illustrator CS6


illustratortuts

Recycle One Pattern into Nine New Patterns with Illustrator CS6


illustratortuts

How to Create Vector Camp Badges


illustratortuts

iOS App Icon Design Tutorial in Illustrator CS6 (Video & Written)


illustratortuts

How to Create Folded Text Effect in Illustrator CS6


illustratortuts

Create a One Stroke Tropical Flower Using Adobe Illustrator CS6


illustratortuts

Pattern Creation in Illustrator CS6

illustratortuts

How to Create Metal Chair Using Gradient on Strokes in Adobe Illustrator CS6


illustratortuts

How to Create a Vector Cross Stitch Effect in Adobe Illustrator


illustratortuts

Create a Barbecue Picnic Icon in Adobe Illustrator CS6


illustratortuts

Simple Vector Artwork in Adobe Illustrator


illustratortuts

How to Create a Seamless Pattern in Adobe Illustrator CS6


illustratortuts

A simple yet awesome Illustrator CS6 logo design tutorial


illustratortuts

How to Create Vector Skyscrapers with WidthScribe and Adobe Illustrator CS6

illustratortuts

How to Use the New Image Trace in Adobe Illustrator CS6


illustratortuts

100% Vector Drop Shadow with Illustrator CS6


illustratortuts

How to Create Subtle Patterns for Web Projects in Adobe Illustrator CS6


illustratortuts

5 Tips To Create A Memorable Brand Identity

Today, consumers are almost overwhelmed by visuals. Whether driving down the highway, watching a television program, surfing the Internet, or shopping for groceries, consumers come across multiple brands during most daily activities. So is it even possible for a company to create a brand identity that will be remembered even after consumers encounter it?

The good news is that, yes, creating a memorable brand identity is entirely possible with lots of research, thought, and consideration for today’s technology. The following 5 tips are some of the most important for making sure that the brand you build is one that not only stands out but that consumers remember anytime they are in need of your products or services and can access from anywhere.

1.) Know Yourself

A memorable brand starts with a clear definition of your goals and mission as a company. A stronger vision of your company gives you a firm foundation to build your brand upon.

know_yourself

Resources

If you are unsure of where to start with defining your company, try one of these resources:

2.) Research Your Customers

You can’t stop with knowing yourself because self-identification means nothing if you don’t have a clear picture of your target audience – your ideal customer. Knowing the consumers you will most likely attract as a company will help you better choose aspects of your brand design that customers will relate to and remember.

Customers

Resources

Once you define your target market, do some research using some of these resources:

3.) Create a Brand Story

Developing a brand story goes back to making sure your company is relatable. A story draws customers in, and appeals to their emotions. If you can get them to feel an emotion that they relate to your company, then they will definitely remember you. Just make sure that your story is the same across every media that consumers encounter you – online, on their phones, or on a poster.

transmedia-Cover-The-Brand-Story

Resources

See some examples of companies who have built their brands on a memorable story and discover which story type you want to use for your brand:

4 Leading Brand Stories – read about four different brands and just how well they built their brand around a strong story.

7 Basic Types of Brand Stories – learn the different types of stories a brand can tell and choose which one is best for you.

4.) Be Simple but Creative

A complicated design is never memorable. So keep everything about your brand simple. Limit your colors and your fonts, and design a minimal logo. Keeping your story simple as well ensures that customers remember it and the emotions it elicits better. Keep in mind, though, that you also want to be creative. The most creative brands have always been the ones the public remembers long after their initial emergence.

Creative-Photography-creative-parrot

Resources

You may want to research other simple yet creative brands before outlining your own design parameters:

DesignCrowd – this crowdsourcing website is not only a great source of inspiration for seeing creative and logo designs, app design, business card design, website design, and more; but it is also a great place for getting different elements of your brand created. Check out the blog for tips on how to create an effective design brief.

Dribbble – this is another excellent place to find inspiration for a simple yet creative brand design; lots of professional designers post examples of their brand work on this site.

5.) Be Consistent

A simple yet creative brand also ensures that it is still translatable between screen sizes or digital and print marketing media, for example. If you are able to maintain brand consistency no matter where customers encounter you, then you will build a much stronger and memorable brand. They will recognize your company whether they access your website on their laptop or on their mobile phone.

consistency-big1

Resources

Make sure that your website looks the same from any device and works on most browser systems:

Responsive vs. Adaptive vs. Mobile – this site gives an excellent definition of each along with when to use each; it also explains mobile apps.

Mobile vs. Responsive Websites – this site puts the pros and cons in a table format, making the differences of each type of web design easier to understand.

Creating a memorable brand today involves more than just a nice logo. You have to be more aware of yourself, your target market, and the technology that consumers may want to use to access you. So do your research before hiring a design firm or crowdsourcing the different aspects of your brand. A clear outline for designers to follow will mean that your brand is much more likely to be one that clients remember no matter where they come across your company.

Author Bio – By Tara Horner, freelance writer at DesignCrowd.com

Image credits

40 High Quality Typographic Poster Design Tutorials

Wanna create some stunning typographic poster designs but do not know what to start with? Here is the solution to your problem. We have put together more than 40 high quality typographic poster designs tutorials for those who are interested in learning how to create such type of poster designs. In this collection, you will find high quality tutorials that will help you learn different techniques and will guide you regarding the tools used in creating typographic poster design.

So without any further ado, here we are presenting the complete collection of amazing and high quality typographic poster design tutorials. Enjoy looking into this collection and have more fun using them in your work. We hope that you will find this collection inspiring.

Create a Retro Metal Text poster in Photoshop

In this tutorial we are going to create a retro/grunge looking metal text using some basic Photoshop techniques as well as a texture. We are going to then finish off the image using another texture and a few other techniques to bring the whole image together.

How to Create an Ice-cold Poster with 3D Text

In this tutorial, you’ll learn how to combine stock images and 3D text into a cool poster. We’ll use an icy theme for it and color it the way we want. You’ll see it’s not that hard to create a simple appealing poster with effective use of text and imagery.

Design a Retro Typography Poster in Photoshop

In this tutorial you will learn to create a cool poster using Photoshop & Illustrator. This tutorial demonstrates some useful techniques combining Illustrator and Photoshop to get the job done.

Create a Nature Text Effect Poster in Photoshop

In this tutorial we are going to learn how to make a poster inspired by WWF creative posters. With a couple of images, we will create a beautiful realistic typography with natural theme. We will learn how to blend these images together to make them become a nice one. This tutorial is full of tricks and tips to manage layers and your images.

Design a Sin City Style Poster

In this tutorial, we will show you how to create that effect in Photoshop, but this time we’ll use Illustrator to create the perspectives and text. We will walk through the process of creating the effect; However, it’s always good if you play around and test different settings to see how it works. That for me is the best way to learn.

Create an Event Poster with C4D and Photoshop

In this tutorial we will learn how to create an Event Poster with C4D and Photoshop.

Create a Trendy Galactic Poster Design in Photoshop

Galactic space scenes are a popular theme for digital art, they’re packed full of texture and vibrant colour, which are two ingredients of an awesome design! Using Photoshop’s blending modes along with a mix of textures and brushes, let’s get lost in space and create an abstract cosmos poster design.

Design a Space-Themed Poster with Photoshop

In this Adobe Photoshop tutorial, we are going to design a poster with space as its central theme. We’re also going to have a high emphasis on creating beautiful typography to match our theme. I will show you how to develop consistent lighting, re-coloring the scene to help set the mood, and many more Photoshop techniques. The tutorial’s final product is a poster/ad for a mythical TV show called “Space”.

Typographic Poster Tutorial Using Photoshop

Typography is one of the buzzwords these days when it comes to cool poster designs. So in this tutorial, we will show you how to make your own typographic poster, but to make things interesting, with a more nostalgic theme to it.

Create and Then Shatter a Grid, while Making a Typographic Poster

Let’s get our own share of typography with this dark and grungy poster. No, this is not your typical design, as we’ll be ‘breaking the grid’ in hope of creating a dynamic and exciting layout. So grab the usual tools of the trade, Photoshop and Illustrator, and follow these steps into creating your own solution.

Retro Modernist Poster Design with 3D Typography

In this tutorial, you’re going to learn how to create a vintage, retro-modernist poster in Photoshop. You’ll also learn some vintage coloring techniques, retro photo effects, and some cool 3d typographic effects.

Designing a Typographic Concept Poster

In this tutorial we will take you through a few steps that will show you how designer created a poster design.

Create a Retro Grunge Typographic Poster

In this tutorial you will learn how to create a Retro Grunge Typographic Poster.

Creating a Spectrum Poster Design in Photoshop

In this tutorial, Jonathan Wong walks you through how to create a Spectrum Poster design using Adobe Photoshop. So pull up a chair and join in as Jonathan takes us on a trip through his creative process.

Make a Retro-Space Typography Poster with Colorful Lights

In this tutorial, I will show you how to create a stunning and high-impact retro-style typography poster that’s out of this world (literally). I will walk you through the steps for creating 3D text by combining the power of Photoshop and Cinema 4D. You’ll also learn how to create unique and detailed light streaks that give the typography poster its signature look.

Create a Variety of 3D Lettering Effects for Poster Design

In this tutorial we will showcase three different approaches for creating simple 3D lettering effects in the context of poster design. Onward and upward we go!

How To Create a Retro Style Typographic Poster Design

Follow this step by step tutorial to create a retro style typographic poster design with distressed textures and a muted colour scheme. We’ll create a typographic layout based on the number ‘one’ using Illustrator’s easy manipulation tools, then switch over to Photoshop to lay out the poster design composition and grunge everything up with some textures to create that cool dated retro look.

Create a Typographic Poster Using Photoshop and Wordle

In this Awesome Photoshop tutorial, we are going to show you how to create a Typographic poster of your favorite lyric.

Design a classic serif poster

In this tutorial we will learn how to create a classic serif poster.

Creating a Retro Grunge Poster

This tutorial is an add on from the Poster article the other day, we will create a Retro/Grunge style poster using the pen tool some textures and playing with text to make it look more retro.

Trendy Geometric Lines Design Tutorial

Starting with the design application of Adobe Illustrator create a group of vector based geometric lines at dynamic 45 degree angles, then follow the walkthrough to rough them up with brush textures in Adobe Photoshop resulting in a cool and trendy design style.

Create an Awesome Grunge Poster in Photoshop

In this tutorial we will walk through the process of creating a grunge poster. We will cover techniques like creating diamond shaped patterns, knocking out white backgrounds and keeping layer transparency. This tutorial includes a text version as well as a video version. Both cover the same techniques so take what you prefer and enjoy!

Create a Trendy Typographic Poster Design

This time we’ll look at stripping back the tools to creating an interesting and eye-catching poster with a single typographic word.

Design a Simple Textured Typographic Poster in Photoshop

In this Photoshop tutorial, we will demonstrate how to design a simple, textured and clean typographic poster. Following the steps in this tutorial, you will find techniques for creating a beautiful textured background and working with type in Photoshop.

Inception Poster with Repousse in Photoshop CS5

So in this tutorial we will show you how to create the effect of one of the Inception posters, the one with the word Inception made of buildings on an aerial photo of a city.

Create a Pulsing Poster with a Vinyl Record and Grunge Type

In this tutorial, we will explain how to create a vinyl record with blends and opacity masks. We’ll also create some funky pulsing elements, grunge typography, and put it together into a unique poster design. Let’s jump into this upbeat tutorial.

Make an Inspiring Artistic Poster with Drawn Elements

In this tutorial, we’ll create drawn elements, use design brushes, bring them into Photoshop, and merge them into a unique poster composition that feels hand-made, stylistically unified, and personalized. The techniques here are focused on creating an original artistic illustration. Let’s see how this poster design was created.

How to Create Typography Poster Enigma Using Photoshop

In this tutorial we will go through the process of making this typography poster called “Enigma” only using Adobe Photoshop. You will have a basic look into the 3D-Tool of Photoshop, how to texture and stylize your 3D Typography and how to make a shiny space background to create your own space-inspired text. This is my first tutorial and I hope you guys will enjoy it!

Using Typography to Create a Lunar New Year Card

In this quick tip you will learn how to use typography, gradients and the shear tool to make a striking card design, it can also be use for poster design.

How to Create a Retro Sci-Fi Computer Game Poster

Combine stock photos and design resources to create an awesome retro sci-fi themed game poster that takes inspiration from Atari games of the 80s. By mixing up bright and vibrant cosmic designs with old, distressed and grungey textures we’ll create a retro futuristic poster design for ‘Galactic Attack’.

Quick Grungy Poster

In this tutorial, we will show you how to create a sort of grunge poster. We will learn how to make some elements look a bit dirty, create textures, and add some depths to the elements using shadows and blend modes.

Create a Distressed Vector Typographic Poster Design

Follow this step by step walkthrough of my recent design process for the ‘Spectrum’ poster. Starting with custom made type in Illustrator, we’ll move our vector graphics into Photoshop for some serious distressing with Photoshop brushes, blending modes and more!

Use glyphs to create a striking typographic poster in InDesign

In this tutorial you will learn how to use glyphs to create a striking typographic poster in InDesign.

How to Create a Typographical Shape for Posters

The tutorial below walks you through these necessary steps, then shows you how to create a weathered paper background, and finally reveals how to put it all together to create a retro or grunge poster. We will first start in Illustrator and then move to Photoshop for the final touches.

Design a Retro Typographic Poster Using 3D Elements in Photoshop

Using modern technology to achieve a vintage or retro look can be a bit challenging. In this tutorial, author Alex Beltechi will demonstrate how to give shiny 3D renderings a nice vintage feel. In this tutorial we will spend quite a bit of time in Cinema 4D, Illustrator, and Photoshop.

Create Illustrated Type from Sketch to Vector

We have another great Vector tutorial here. If you want to learn how to combine illustration and typography, then we have an awesome tutorial for you. Learn more about this tutorial at the jump!

Using Extreme Typography to Make Vector Art

If you want to learn extreme uses for typography when creating your vector art, then we have an awesome tutorial for you. Learn more about this tutorial at the jump!

Conclusion

In this post, you will discover some high quality and truly helpful tutorials on creating typographic poster designs. We have compiled this post to help you learn new and useful techniques thereby improving your designing skills. Here is the full collection after the jump. We hope that you will enjoy this.

Best Of 2011: Best Useful jQuery Plugins And Tutorials

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

( 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.

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

( 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.

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.

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.

30 Amazingly Great CSS Menu Tutorials

At the moment, we would like to give you an idea about some amazing and useful CSS menu tutorials that will help you in using CSS more efficiently and expertly. CSS for sure is the wonderful language for designing attractive and eye-catching navigation menus. It is able to be employed to any kind of website and is exceptionally flexible.

Not to worry if your CSS skills are comparatively inadequate because there are loads of great tutorials for you to learn and sharpen your CSS skills. These tutorials will teach you how to add sparkling and proficient looking CSS menu to your websites. You can either modify the menu or you can copy and paste the code into your design to fulfill your needs.

So, take a look at this collection and grab some amazing techniques to make your website navigation easier for your visitors in order to find their desired content. Enjoy!

Slide Down Box Menu with jQuery and CSS3

css

Download | Demo

CSS3 Dropdown Menu

css

Demo

Image Menu with Jquery

css

Download | Demo

jQuery style menu with CSS3

css

Demo

Awesome Cufonized Fly-out Menu with jQuery and CSS3

css

Download | Demo

Create a Social Media Sharing Menu Using CSS and jQuery

css

Demo

Create a Slick Menu using CSS3

css

Demo

Creating a Fancy menu using CSS3 and jQuery

css

Download | Demo

CSS UL LI – Horizontal CSS Menu

css

Download

A Different Top Navigation

css

Download | Demo

Grungy Random Rotation Menu with jQuery and CSS3

css

Download | Demo

Sweet tabbed navigation using CSS3

css

Download | Demo

Create an Advanced CSS3 Menu – Version 2

css

Download | Demo

CSS Vertical Navigation with Teaser

css

Demo


How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3


css

Download | Demo

Create Vimeo-like top navigation

css

Download | Demo

Create an Advanced CSS Menu Using the Hover and Position Properties


css

Download | Demo

CSS dropdown menu without javascripting or hacks

css

Demo

Making a CSS3 Animated Menu

css

Download | Demo

CSS: Sexy Vertical Popup Menu with CSS

css

Download | Demo

CSS Sprite Navigation Tutorial


css

Download | Demo

Pastel color menu with dynamic submenu using CSS

css

Download | Demo

CSS3 Minimalistic Navigation Menu


css

Download | Demo

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial


css

Download | Demo

Make a Mega Drop-Down Menu with jQuery


css

Demo

How To Create A Clean CSS3 Navigation Bar

css

Download | Demo

Vertical CSS Menu With a ‘Behavior’ File.


css

Download | Demo

Create your own drop down menu with nested submenus using CSS and a little JavaScript


css

Demo

CSS Drop Down Menu Tutorial


css

Demo

jQuery Dropdown menu with google style


css

Demo

Create The Fanciest Dropdown Menu


css

Demo

Animated Menus Using jQuery


css

Download | Demo

naviDropDown 1.0 Plugin


css

Download | Demo

Seven Premium Style jQuery Plugins And Tutorials To Display Images On Websites

There are many jQuery plugins out there, but getting by free and good ones is not that easy. Today, we are sharing Seven Premium Style jQuery Plugins And Tutorials To Display Images On Website. Read each entry in the list and see which one suits your needs best.

You are welcome if you want to share more jQuery plugins to show images that our readers/viewers may like. Do you want to be the first one to know the latest happenings at  SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.

Orbit: A Slick jQuery Image Slider Plugin

Orbit is a jQuery slider developed by ZURB. The plugin is lightweight(4KB), easy to implement and has a good set of features.

Moleskine Notebook with jQuery Booklet

In this tutorial, you will learn to create a virtual Moleskine notebook with latest posts from the blog.

SIDEWAYS – jQuery fullscreen image gallery

A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

TN3 Gallery

TN3 Gallery is a jQuery image gallery with slideshow, transitions effects, multiple album options, CSS skinning and much more. It’s compatible with all modern desktop and mobile browsers.

PhotoSwipe

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

Sponsor Flip Wall With jQuery & CSS

Sponsor Flip Wal is using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

Nivo Slider

The Nivo Slider is world renowned as the most beautiful and easy to user slider on the market. It’s completely free and totally open source.

35 Photoshop Tutorials To Get Visually Appealing Photo Manipulation Artwork

Photoshop is like a magic for the designers as loads of different tasks can be accomplished through it. Designers all over the world are exclusively using Adobe Photoshop not only to create creative and visually appealing web designs but also to create something very amazing. With Adobe Photoshop, designers can even play with the real photographs and make them look what they want them to be looked.

Here we are sharing an amazing collection of some useful Photoshop tutorials that will guide you remarkable and interesting tricks regarding photo manipulation. Photo manipulation lets you to bring your creativity into play and place it to apply with Photoshop. There are copious numbers of great tutorials available on the internet but in this collection we are showcasing 35 tutorials that are great for learning more about photo manipulation.

Don’t Leave Me – Photoshop Tutorial

In this tutorial we will show you how to turn a free stock image into a beautiful manipulation.You will learn how to manipulate light and how to create beautiful realistic shadows.


Ptutorial

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!


Ptutorial

Make a Dark Statue with 3D Tentacles Photo Manipulation

In this tutorial we will create a dark statue photomanipulation using Photoshop and Cinema 4D.


Ptutorial

Create a Devastating Tidal Wave in Photoshop

In this tutorial you will learn how to create a devastating tidal wave in photoshop.


Ptutorial

Fantastic Tree

In this tutorial we will learn how to create a fantastic tree.


Ptutorial

Photo Manipulate an Explosive Magical Reading Scene

In this tutorial you will learn how to create a magical scene, where a girl’s reading book comes to life and explodes with a fantasy world.


Ptutorial

Create A Unique Steampunk Photo Manipulation In Photoshop

In this tutorial you will how to create a composite image using various elements that will come together to make a unique Steampunk design. We will be using the Pen Tool, Layer Masks and Adjustment Layers, and doing quite a bit of Photo Manipulating throughout the tutorial.


Ptutorial

Dazzling Dance Photo Manipulation

In this detailed and lengthy Photoshop tutorial, you will learn how to combine photos and add special effects to turn a normal photograph into a stunning artwork. You will also learn several tricks to reduce your Photoshop document file size and number of layers and layer styles.


Ptutorial

Create a Minimalist Portal Scene in Photoshop

In this tutorial you will learn how to create an stormy landscape with a portal to another dimension. This tutorial will show you how to blend images using blending modes and use brush sets to create a stormy desert scene.


Ptutorial

Create a Dark and Mysterious Fantasy Portrait

In this tutorial we will combine several stock images, adjust color, use retouching techiniques as well as make and control custom brushes to create a dark and mysterious blue portrait.


Ptutorial

How to Create Feet Shoes in Photoshop

In this tutorial you will learn how to create this photo manipulation of a feet shoe. This tutorial will show you basic photo manipulation techniques that you can use on your own projects. A PSD is included with this tutorial.


Ptutorial

“Sleeping Girl in Tub” Photo Manipulation

In this Photoshop tutorial, we are going to learn how to seamlessly combine photos to create a realistic image of a girl sleeping in a bathtub on a beautiful field while the sun sets. We are going to learn how to use the Brush tool to create light and shadows and how to make the colors of an image more vivid.


Ptutorial

How to Change Ordinary Photo into Fantasy Photo Manipulation

In this tutorial you will learn how you can change ordinary photo into a fantasy photo manipulation and also different ways how you can play with lights and shadows.


Ptutorial

Create a Beautiful River Scenery in Photoshop

In this tutorial, we will learn how to create a breathtaking and fantasy-themed, painting-like photo-manipulation. You will learn how to create this scenery by combining images, using Photoshop brushes, then finishing it with a soft photo effect.


Ptutorial

Creating the Terrifying Photo-Manipulation ‘Wrath’

In this tutorial you will learn how to create the terrifying photo-manipulation wrath, using a combination of advanced blending techniques, adjustment layers, masking and lighting effects.


Ptutorial

Make a Story Book Come to Life in Photoshop

In this tutorial you will learn how to create this surreal photo manipulation in Photoshop. You’ll learn the basics of combining stock photos, how to blend them in by adding light and shadows, and complete it with a vintage photo effect.


Ptutorial

Facing a New Day Photoshop Manipulation

In this manipulation tutorial we will show you how to create a really nice sunrise scene.we will show you how to transform a day picture into a sunrise using some adjustment layers and gradient maps.


Ptutorial

Create a Surreal Apocalypse Photomanipulation Photoshop Tutorial

In this Photoshop tutorial, you will learn how to create a surreal photomanipulation, and then add a touch of apocalyptic destruction to it. You’ll see how to balance colors, integrate stock images, and also how to create realistic looking smoke trails.


Ptutorial

Create a Floating Over-Grown “Tree House” in Photoshop

In this tutorial we will combine several stock images to create a floating over-grown tree house in Photoshop.


Ptutorial

The Making of the Nutty Boat Trip

In this tutorial, we will demonstrate how to place a couple of squirrels in a coffee mug that is floating in a body of water.


Ptutorial

Create a Surreal Out of Bounds Photo Manipulation 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!


Ptutorial

Combine Images to Create a Surreal Portrait in Photoshop

In this tutorial we will use the liquify tool and several image blending techniques to create a surreal and slightly creepy photo manipulation. Let’s get started!


Ptutorial

How to Create a Photo Manipulation of a Flooded City Scene

In this tutorial, we will learn how to manipulate a simple photo into a flooding torrent of a scene. We will use some relatively simple techniques to give this image a semi-realistic, stylized feel. Let’s get started!


Ptutorial

Create A Striking Nature Scene In Photoshop

In this tutorial we will show you how to create a nature inspired design that is both organic and visually arresting.


Ptutorial

How to Apply Textures to Uneven Surfaces

In this tutorial you will loearn how to apply textures to uneven surfaces.


Ptutorial

Quick Tip: Straighten and Level Out a Crooked Photo

In this tutorial you will learn how to create straighten and level out a crooked photo.


Ptutorial

How to Create a Flaming Photo Manipulation

In this tutorial, we will manipulate a picture so it looks like a woman burning in flames. The idea behind this manipulation was to create a nice looking illustration, only by using simple techniques and tools such as the Brush tool and Warp command. I hope you enjoy the tutorial and try it with your own stock imagery.


Ptutorial

Create a Nature Inspired Photo Manipulation in Photoshop

In this tutorial we will demonstrate how to combine several images to create a nature inspired photo manipulation. Let’s get started!


Ptutorial

Combine Stock Photography to Create a Sleepy Japanese Village in Photoshop

In today’s tutorial, we will create a sleepy Japanese village in Photoshop by combining several stock photos. Let’s get started!


Ptutorial

How to Create a Traditional Painting-Like Surreal Image using Photoshop

In this tutorial you will learn how to create a surreal image that has the look and feel of a traditional image.we will learn how to blend images seamlessly together.


Ptutorial

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!


Ptutorial

Army Squirrel Photo Manipulation

In this tutorial you will learn how to create a army squirrel photo manipulation.


Ptutorial

Create an Intense Apocalyptic Photo Manipulation

In this tutorial you will learn how to create this amazing apocalyptic photo manipulation with Photoshop! You’ll learn how to blend elements such as water and moon, create seamless structures with the Clone Stamp tool, and finish it off with a cold movie photo effect.


Ptutorial

Create a Lost Fantasy Micro World with Powerful Photo Manipulation Techniques in Photoshop

In this tutorials you will learn how to build up your own micro society using many different pictures and some cool photo manipulation techniques.


Ptutorial

Create Surreal Human Face with Flame Hair and Disintegration Effect in Photoshop

In this tutorial we will show you how to create surreal human face with flame hair and disintegration effect in photoshop.


Ptutorial

50 Extremely Useful And Time Saving Free Photoshop Action Sets

Among the most commonly used designing software is the Adobe Photoshop that not only automates designers work but also improves their workflow. This is such a wonderful tool that allows you to automate your repetitive tasks saving you valuable time. You can use Photoshop actions to quickly perform monotonous tasks with a simple click.

In this session, we have come up with the collection of more than 50 high-quality Photoshop actions that help you expedite your work. You can download them for free so that you can also perform some awfully complex techniques with just a push of a button. Enjoy!

Cute Actions

Photoshop Color Actions 2

Landscape Action

Enhancing skin color

Powerful Colors 3.2

Classic 3.8

Cross-Processing ATN

Photoshop Action Set 1

Photoshop actions 4

Forest Action

Action contagious

Melon Actions

Toasted Photoshop Actions

Oldmatic Photoshop Action

photoshop actions Set 11

Bright Eyes

Blue action

Sacool action 2.02 Retro

Thinking of you action

Photoshop Actions Set 28

Photoshop Action Coffee

Action set 07

Black And White

Summer Heat Action

Photoshop Actions Set 2

Fairytale actions

24 Photoshop Actions

HDR Tools

LT’s Marshmallow Action

Wedding Theme Action

Lights action

Photoshop Dream Blur Action

Black and White ps actions

Skin Smoothing

Cinematic Effect

Photo Improvement v1

Bella action

Darker effect 5.1

Burnt Sharpness Action

Action 01

Photoshop Actions 11

Action 03

Photoshop action no.7 HIGH KEY

Focus Action

Nature Actions 2

Enchanted Action

Retro Vintage

Set 136 Vintage

Set 10 Color Contrast

Photoshop Action – Misc 003