- monthly subscription or
- one time payment
- cancelable any time
"Tell the chef, the beer is on me."
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!
Najib17Stunning ColorFx by najib dod
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!
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.
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.
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.
In this tutorial we will learn about animating CSS3 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
Absolute Horizontal And Vertical Centering In CSS.
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.
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.
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.
If you haven’t used transitions before, here’s a brief introduction. On the element you want to have animate, add the following CSS:
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.
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
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.
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.
CSS border radius generator for lazy people.
CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.
A fully customizable CSS3 generator to fit your needs. Now with older browser and Internet Explorer support!
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
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.
Just like your favorite graphics editor, but in your browser. And it creates CSS.
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.
A revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop.
A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.
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.
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
How to Create an Abstract Web Design with 3D Spheres in Illustrator
How to Utilize the Pattern Tool to Create a Pattern Brush in Illustrator CS6
Recycle One Pattern into Nine New Patterns with Illustrator CS6
How to Create Vector Camp Badges
iOS App Icon Design Tutorial in Illustrator CS6 (Video & Written)
How to Create Folded Text Effect in Illustrator CS6
Create a One Stroke Tropical Flower Using Adobe Illustrator CS6
Pattern Creation in Illustrator CS6
How to Create Metal Chair Using Gradient on Strokes in Adobe Illustrator CS6
How to Create a Vector Cross Stitch Effect in Adobe Illustrator
Create a Barbecue Picnic Icon in Adobe Illustrator CS6
Simple Vector Artwork in Adobe Illustrator
How to Create a Seamless Pattern in Adobe Illustrator CS6
A simple yet awesome Illustrator CS6 logo design tutorial
How to Create Vector Skyscrapers with WidthScribe and Adobe Illustrator CS6
How to Use the New Image Trace in Adobe Illustrator CS6
100% Vector Drop Shadow with Illustrator CS6
How to Create Subtle Patterns for Web Projects in Adobe Illustrator CS6
Most UX designers I know aren’t masochists, but boy do they love chaos! Why else would they choose a field where, depending on where you work, a “matrix” could be a reference to content or Keanu Reeves? The fact is: unless they are the Che Guevara type, designers are often as good as the ecosystem and culture of their employer.
Consider the following scenario: your recent start up fails but you learn a lot about Lean UX along the way. Soon thereafter, you get a job offer to build the UX department at a major agency. However, at that agency, the project managers aren’t even sure what a task analysis is!
Introducing Lean UX there will probably take you a very long time (as will the cancerous growth on your UX soul).
Fear not, fellow UX designer! If you’re considering joining an agency, here are a couple of tips to make your search a little easier.
Everything has a culture. What’s theirs like?
You can’t do it alone. Even if you’re Donald Norman. Does this agency simply want a voice in the room that can pull usability principles out of their hat during design reviews? Don’t work there.
UX designers need a culture that appreciates the vast, overlapping universe of experience design. Of course: unless you work at an Adaptive Path, IDEO or EffectiveUI, you’re most likely not going to find a place that are deeply knowledgeable about user experience. That’s okay. Perform your own gap analysis and understand to what degree the culture has a passion for learning user experience. That way, the majority of work you do will be focused on the client, not your team’s culture.
This is a big one. Get a sense of whether or not the leadership truly cares about the people doing the work. If you’ve ever seen Paths of Glory with Kirk Douglas then you’ll know what I mean. Disconnected leaders see their team mates as pawns used to advance their goals.
When staffing a project, does management take into account people’s personalities in addition to their skillsets? …or are they just checking items off a list? While managers should always care about profit, the best also care about their team’s experience. This kind of receptive leadership implies two-way communication. It means that there’s an emotional maturity in place so that an organization can course-correct by listening to (and acting in the best interest of) its members.
Next comes the leadership part. Will they say no to a client? This is key. If an account manager is told to “compromise for client happiness at all costs” then it’s unlikely that their agency can lead the client and help their team produce its best work.
Finally, does the leadership express core principles the agency must abide by? I’d settle for something like “we’ll never deliver bad work, no matter the timeline.” Regardless, ask them what they stand for. Next, see if they walk the walk: talk to their junior designers.
My favorite quote from the Effective UI book is “intolerance to uncertainty is intolerable.” If only every agency I worked for had this chiseled in marble! A tolerant organization recognizes an essential and undeniable reality about good design: no solution is obvious.
Look for good values. The best agency will be steadfast on some issues and lax on others.
Do projects at this agency often begin without a signed Statement of Work (SOW)? This can happen when clients have an urgent deadline and/or when both sides “act on good faith.” In this case, the agency must communicate that work without an SOW is an investigation into what’s possible.
Next, note whether or not this agency explains working assumptions to their clients. If not, they’re vulnerable to scope creep and/or client bullying.
On the flip side, always avoid agencies that spell out every feature exhaustively. How can you find the best solution if the SOW already has? Without doing research there’s no way you can know what the best solution for a user should be.
Clients will always want work produced faster, for less money, and with more certainty. And while I feel for them (many have jobs riding on a project), agencies must do their part to both educate clients and earn their trust. A large part of that comes from managing expectations.
Scope is simply a measure of how much of their design problem a client wants to solve at any given time. Grill the agency as to what their scoping process is. Don’t look at the “cool” infographic they have on their website; talk to people on the ground and understand how plans come together.
Regardless of their actual methodology, an agency’s process should always protect the integrity of its design endeavors. Nothing wastes client money more than the internal kickoff in which someone says “what deliverables should we do?” The rest of the kickoff is then spent discussing how the design will be communicated rather than how design itself should communicate!
An agency’s team dynamic should encourage cross-disciplinary collaboration and debate. Design is a human endeavor, making camaraderie critical. One person who’s only out to make themselves look good can take the whole thing down.
How does this agency handle conflict resolution? What if, say, an Account Manager and a Project Manager don’t get along? Does the agency prefers to “let people work it out?” That’s not leadership.
Alternately, if they run witch hunts in their post-mortems then they’re running on a culture of fear. No one department should be favored over another. All departments – including UX – should be treated with respect to ensure a democratic system of checks and balances.
No agency is perfect. No company. No client. No person. It comes down to intention, really: does this group of people want to transform human experiences for the better?
Any agency can become a great place to practice experience design. But you can save yourself a lot of heartache by interviewing your future employers with the same rigor and diligence which which they’ll undoubtedly interview you. In the process you’ll really learn why you do what you do.
The post Five Tips to help Designers Find the Perfect UX Agency appeared first on UX Booth.
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.
( 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.
( 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.
( 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.
( 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.
( 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.
( 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.
( 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.
( 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.
( Demo | Download )
Ideal Forms is a small framework to build powerful and beautiful online forms.
( Demo | Download )
With this friendly jQuery plugin you can easily blog Block Adblock.
( 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.
( 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.
( 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.
( 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.
( Demo | Download )
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
( Demo | Download )
Isotope: An exquisite jQuery plugin for magical layouts
( Demo | Download )
Slidorion is a combination of an image slider and an accordion; displaying beautiful content through various effects.
( Demo | Download )
With Diapo plugin you can creat a beautiufl slideshow.
( Demo | Download )
Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states.
( 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.
( Demo | Download )
With this plugin you can create HTML5 Music Player.
( 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.
( 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.
( Demo | Download )
gmap3 is a jquery plugin which allows many manipulation of the google map API version 3.
( Demo | Download )
With this plugin you can generate outstanding slideshows for your website.
( 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
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.
( Demo | Download )
Use this jQuery plug-in to add lens style zooming effect to an image
( 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.
( 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.
( 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.
( 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.
( Demo | Download )
Elycharts is a pure javascript charting library, easy to use and completely customizable.
( Demo | Download )
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
( 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.
( Demo | Download )
With this plugin you can create a beautiful jQuery Image Gallery.
( 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.
( 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.
( Demo | Download )
BxSlider will allow you to create a beautiful Content Slider for your website.
( 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.
( 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.
( Demo | Download )
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.
( Demo | Download )
Snippet provides a quick and easy way of highlighting source code passages in HTML documents.
( 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.
Brought To You By
Do you want to advertise here? Click to get more info…
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
Awesome Cufonized Fly-out Menu with jQuery and CSS3
Create a Social Media Sharing Menu Using CSS and jQuery
Create a Slick Menu using CSS3
Creating a Fancy menu using CSS3 and jQuery
CSS UL LI – Horizontal CSS Menu
Grungy Random Rotation Menu with jQuery and CSS3
Sweet tabbed navigation using CSS3
Create an Advanced CSS3 Menu – Version 2
CSS Vertical Navigation with Teaser
How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3
Create Vimeo-like top navigation
Create an Advanced CSS Menu Using the Hover and Position Properties
CSS dropdown menu without javascripting or hacks
CSS: Sexy Vertical Popup Menu with CSS
CSS Sprite Navigation Tutorial
Pastel color menu with dynamic submenu using CSS
CSS3 Minimalistic Navigation Menu
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
Make a Mega Drop-Down Menu with jQuery
How To Create A Clean CSS3 Navigation Bar
Vertical CSS Menu With a ‘Behavior’ File.
Create your own drop down menu with nested submenus using CSS and a little JavaScript
jQuery Dropdown menu with google style
Create The Fanciest Dropdown Menu
Brought To You By
Do you want to advertise here? Click to get more info…
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 unique search engine 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 is a jQuery slider developed by ZURB. The plugin is lightweight(4KB), easy to implement and has a good set of features.
In this tutorial, you will learn to create a virtual Moleskine notebook with latest posts from the blog.
A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.
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 is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.
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.
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.
Brought To You By
Do you want to advertise here? Click to get more info…
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.
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 Dark Statue with 3D Tentacles Photo Manipulation
In this tutorial we will create a dark statue photomanipulation using Photoshop and Cinema 4D.
Create a Devastating Tidal Wave in Photoshop
In this tutorial you will learn how to create a devastating tidal wave in photoshop.
In this tutorial we will learn how to create a fantastic tree.
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.
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.
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.
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.
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.
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.
“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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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!
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!
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.
How to Apply Textures to Uneven Surfaces
In this tutorial you will loearn how to apply textures to uneven surfaces.
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.
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.
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!
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!
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.
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!
Army Squirrel Photo Manipulation
In this tutorial you will learn how to create a army squirrel photo manipulation.
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.
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.
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.
Brought To You By
Do you want to advertise here? Click to get more info…
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!
Photoshop action no.7 HIGH KEY
Brought To You By
Do you want to advertise here? Click to get more info…
We have previously posted many articles on CSS tutorials and resources you can learn CSS from. Today, again we come up with yet another great list of 40 CSS tutorials, techniques and resources that you will enjoy exploring. Every developer knows very well how important it is to learn and use CSS effectively. Therefore, tall the developers keep themselves updated with the latest development and advancement in the technology.
Below is the list of 40 useful CSS tutorials and resources you cannot afford to miss. We hope this broad list will train you something innovative, or moreover jog your memory and help you recall some methods you haven’t used for a while.
In this tutorial we are making something practical, a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
Sleek Card Pockets using CSS Only
In this CSS3 tutorial, you’ll learn how to create web card pockets using some great new CSS3 techniques.
CSS Absolute Positioning: Create A Fancy Link Block
Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive.
Create a Button with Hover and Active States using CSS Sprites
Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.
How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
In this tutorial will will create a Sexy Vertical Sliding Panel Using jQuery And CSS3.
A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.
Pushing Your Buttons With Practical CSS3
Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.
Build Multi-level Multi-column Multi Menus with pure CSS
In this tutorial we will learn how to build multi-level multi-column multi Menus with pure CSS.
Elegant Drop Menu with CSS only
In this tutorial, you will see a simplest way to build a same effect by using CSS only. With some CSS make-up, your menu will be elegant. Not sure which one is easiest, but for sure it’s the simplest menu comes with drop effect: horizontal and vertical navigation.
HOW TO CREATE A BEAUTIFUL DROPDOWN BLOGROLL WITHOUT JAVASCRIPT
In this tutorial author is going to walk you through how he have set up the blogroll in our upcoming redesign. Load up the example page to see how our final product will look.
How to Build a Simple Button with CSS Image Sprites
Let’s take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!
CSS3 Hover Tabs without JavaScript
A quick tip on CSS3 Hover Tabs without JavaScript.
How To Use Pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins
In this article you will learn how to use pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins.
In this tutorial author would like to go over how to create a simple navigation with a horizontal subnav.
In this tutorial you will learn how to create CSS3 Speech Bubble.
How to Create Nice Scalable CSS Based Breadcrumbs
In this tutorial author will teach you how to create nice scalable CSS Based Breadcrumbs. Author is using only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.
Creating a fluid search box when you only have a single element next to it is trivial. What you do is wrap the input in an element and use padding to create space for the fixed element, then position the fixed element absolutely (or relatively) in the space created by the padding.
Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.
6 Ways To Improve Your Web Typography
Typography on the web is anything but simple, and for many, it is a troubling mystery. In this tutorial we’re going to review six ways that web designers and developers can improve the typography of the sites they create.
Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
3 Easy and Fast CSS Techniques for Faux Image Cropping
These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.
How to Create a Fancy Image Gallery with CSS3
Here author have prepared a tutorial about how to use CSS3 to make an image gallery with animation. He recommend to use one of these browsers to see the animations; however, the gallery is going to be usable in browsers without support of the animation.
Creating an Animated CSS3 Horizontal Menu
This tutorial shows us how powerful CSS3 can be and how we can save some JavaScript code to achieve the same result. As you know, right know the transition property is only supported by Safari and Chrome.
How to Create a Cool Anaglyphic Text Effect with CSS
Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.
How To Create Depth And Nice 3D Ribbons Only Using CSS3
In this tutorial you will learn How To Create Depth And Nice 3D Ribbons Only Using CSS3.
How To Create Simple, Stylish and Swappable Image Captions
In this tutorial you will learn How To Create Simple, Stylish and Swappable Image Captions.
Polaroid pictures (or fake ones anyway) can be created using Photoshop or a similar graphics package but author aim to create the same kind of look by using CSS.
In this tutorial author will show you how to slice up the menu design (step by step) and put them together with CSS.
CSS Techniques: Using Sliding Doors with WordPress Navigation
This sliding doors CSS hack allows you to create sophisticated tabs for your navigation bar.
This tutorial is really very helpful, very nice and useful tip on creating Mac’s Dock menu.
In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.
Coding Apple’s Navigation Bar Using CSS Sprites
This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.
CSS Sprite Navigation Tutorial
This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.
Breaking Out of the Box With CSS Layouts
It’s true that CSS is heavily reliant upon a grid — everything flows on x and y axes (and can be positioned as such, much like designs built in Photoshop). However, this doesn’t mean that your design has to be boring. If you understand how the grid works, you can fracture or abstract that grid to make your layout more dynamic and interesting.
The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
Minimal and Modern Layout: PSD to XHTML/CSS Conversion
In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.
Create YouTube-like adaptable view using CSS and jQuery
In this tutorial you will learn how to create YouTube-like adaptable view using CSS and jQuery.
How to distribute elements horizontally using CSS
In this tutorial we will learn how to distribute elements horizontally using CSS.
Sticky (Fixed) SideNav Layout with CSS
In this tutorial author would like to go over how to create a fixed sidenav layout for your blog or website.
Useful CSS Tricks You Should Know
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know.
11 Classic CSS Techniques Made Simple with CSS3
In this tutorial, author will show you eleven different time-consuming effects that can be achieved quite easily with CSS3.
Brought To You By
Do you want to advertise here? Click to get more info…
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.
Here’s a tutorial showing you how artist go about aging a woman’s face in Photoshop.
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 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.
In this guide you will learn some useful tips about comets photography.
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.
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!
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.
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.
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.
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.
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.
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.
A Guide To Nightclub Photography
In this tutorial you will learn how to make a beauty makeover with cool retouching effects:
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.
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.
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.
Tips and techniques for using shallow depth of field to add impact to your macro shots.
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…
We use our smartphones to make calls, send and receive text messages, take picture, shoot and view videos, play games, and use various applications. All of this, needless to say, considerably drains the phone’s battery. If you do not take the right steps and modify your phone’s settings appropriately, your phone will need charging every now and then.
Charging the phone every day is surely inconvenient for all phone owners. Thankfully there are a number of steps you can take to increase your iPhone’s battery life. To check out what these tips are, read on the list below. Most of these tips apply to all smartphones; so even you own a smartphone other than iPhone, you will find these tips very helpful.
You are welcome to share if you know more useful tips to increase the battery life of smartphones which 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 do not forget to become our fan on facebook as well.
Bluetooth is used to transfer data from or to your phone. Activating Bluetooth takes a significatnt toll on the battery life. Therefore whenever you are not using Bluetooth, turn it off. Moreover, if you have a choice between transferring the data between the phone and your computer, opt for the phone’s cable instead of the Bluetooth connection.
Our phones are usually set at a brightness higher than the one we are comfortable with. By lowering the phone’s brightness not only will you save the battery, but also make viewing your phone more comfortable.
Timely look for latest versions of your phone’s firmware and OS. Moreover look for the latest versions for your installed applications. Usually new updates are less of a burden on the battery than their predecessors.
The principle behind turning off Wi-Fi is the same as turning off Bluetooth. By being on while you are not using it, Wi-Fi needlessly consumes battery power. Therefore keep the phone’s Wi-Fi off while it is not in use.
GPS is another one of your phone’s features that uses up the battery. All apps that have ‘checking in’ or location services use GPS. Thus by disabling these applications and by disabling GPS you will considerably improve the phone’s battery life.
This might be a micro tip, but an important one nonetheless. If your phone auto-locks quicker, than the screen turns off at an earlier time. Each time this happens the phone’s battery is saved up and in the end this accumulates to impressive battery savings.
Push mail forwards SMSs and other data from the server to your phone as soon as the data arrives. Needless to say this requires an active connection that consumes battery power. Since most text messages are non-urgent, you can safely turn off push mail and reduce the data fetching time to, say, 15 minutes. This way you will receive text messages 15 minutes late, in the worst delay case, but considerably save the battery life of your phone.
Each time the ‘beep’ sounds is made while you press a phone key, battery power is consumed. Any sound your phone produces drains the battery a little. The same applies to the phone’s vibrations. Therefore disabling the unnecessary sounds and vibrations will also save your phone’s battery.
By playing music at a non-default settings, the phone puts in extra effort; this is done by consuming more battery power. Disabling the equalizer use only the default power from the phone’s battery.
A charge cycle means charging your phone to the maximum level and then draining it to zero. Doing so every month ensures smooth functioning of the battery. Furthermore this increases the long term life of the battery.
Brought To You By
Do you want to advertise here? Click to get more info…
Here we have gathered a round about of some amazing jQuery image galleries and sliders that we hope you will like. You must have seen many of these jQuery image galleries and sliders on different portfolio websites because they are easy and helpful in displaying images and photos than any other medium.
The most amazing thing about jQuery is that you don’t have to be a techie to add jQuery to your website, you can easily add it even if you don’t know much about JavaScript and jQuery. So let us take a look at this assortment. Feel free to share your opinion with us.
Full Page Image Gallery with jQuery
Sliding Panel Photo Wall Gallery with jQuery
Create Fantastic Lightbox – Style Galleries and Slideshow
HTML5 Slideshow w/ Canvas & jQuery
Thumbnails Navigation Gallery with jQuery
Create image gallery in 4 lines of jQuery
AD Gallery, gallery plugin for jQuery
Animate Panning Slideshow with jQuery
Auto-Playing Featured Content Slider
Automatic Image Slider w/ CSS & jQuery
Create a Slick and Accessible Slideshow Using jQuery
Create Scrollable Interface with jQuery Image Scroller Plugin
Minimalistic Slideshow Gallery with jQuery
Image Highlighting and Preview with jQuery
Beautiful Photo Stack Gallery with jQuery and CSS3
Multimedia Gallery for Images, Video and Audio
Awesome Mobile Image Gallery Web App
Brought To You By
Do you want to advertise here? Click to get more info…
Photo Manipulation is a continually developing collaboration between photography, graphic design and digital editing. It is a process of mixing certain elements and produces an exceptional image that can influence even the most skilled set of eyes.
This is not as easy as it sounds; it requires a very creative set of skills in Photoshop and other tool and also a hell lot of patience. Photo manipulation is an excellent source of inspiration since designers have expressed their creativeness all the way through assorted aspects of design. Here we have collected some amazing examples of photo manipulation. Enjoy!
For this tutorial, you’ll need a photo of a persons head, octopus, and any grunge texture. If you like to use the same portrait of the face used in this tutorial, you may click on the image below to purchase it. Note that we only have the download link for the image of the woman.
This is a tutorial illustrating perspective techniques and how you can achieve the feeling of depth and motion. We will be doing this in a few steps, such as placing the main character, creating the volume fading away and adding foreground and background images. Let’s get started!
In this tutorial Nik Ainley walks us through the process of making a spectacular image. This tutorial focuses on the big picture steps taken to create this image. You’ll learn some incredible techniques in this tutorial, and get a view into how Nik creates beautiful photo-manipulation based images. Let’s check it out.
This is a Photoshop tutorial showing you all the steps you need to take in order to photo-manipulate yourself into a Na’vi (based on the characters in James Cameron’s movie “Avatar”). Artust used Photoshop CS2 in order to create this, but newer and older versions should do the same, as he used basic Photoshop tools only. He hope you will find this helpful.
In this Photoshop tutorial, artist will show you how to combine stock images and typography into a beautiful conceptual composition.
In this tutorial, artist will show you how to create your unique wallpapers using photo manipulation. Using some images you’ll learn how to blend in different landscapes creating a surreal effect.
If you want to take your photo manipulation skills to the next level, then we have an awesome tutorial for you. Learn more at the jump!
In this tutorial We will learn a good technique for incorporating glass transparency into photo manipulations, while placing
In this tutorial, we will use the Layer Mask Tool and Liquify filter to “melt” the camera. Artist recommend you work with a tablet for this one (it makes your work easier), but if you don’t have one it is also possible to go through this tutorial. Let’s start!
In this tutorial artist will show you how he created a fantasy photo manipulation called “You Can Not Frost The Time” with using several Photoshop tools such as Color Range, different blending modes, and more. Let’s get started!
In this Photoshop tutorial artist will be walking you through the making of an interesting art piece, “The Eye, the Key of the Soul.”
It is shown in this tutorial on how to make design a dark sea ship photo manipulation scene.
In this tutorial, you will learn how to create a fantasy landscape using some simple and easy techniques. Everyone with basic Photoshop skills can succeed to recreate this simple image using the most important thing in this kind of photo manipulation – the right stock. So let’s go!
In this tutorial artist will show you how to use different blending modes to blend flying hairs easily and to make semi-transparent planet. Artist will also show you different techniques of adjustment to get the most realistic results in your photo manipulations!
A useful and awesome tutorial for you. Learn more at the jump!
In this tutorial, we’re going to create a fantasy photo manipulation mixing different images and learning to use and modify the stock images in a creative way. The idea is to get a compact image that looks absolutely real, and at the same time, absolutely impossible!
Learn how to combine several photos to create a dramatic ‘fallen angel’ scene.
In this tutorial we are going to create a photo manipulation inspired by Valhalla, one of Mariusz Karasiewicz`s works. He is an amazing artist and his work is absolutly stunning. I want to thank him for allowing me to write this tutorial.
In this tutorial, we’re going to make a creative illustration in a style meant for a video game cover or sci-fi book cover. We’ll create this with mostly photo manipulation techniques. With some cool Photoshop options you can turn all the photos you chose, into one stunning looking explosive cover.
Create a breath taking scenery by combining two photos and applying several photo effects. When you follow this Photoshop tutorial, you’ll learn masking techniques and several photo effects.
This is a tutorial with a simple idea: to create an emotional photo manipulation. Following this tutorial, you will learn how to blend different images to make a dark atmospheric background, modify the dress of the model, apply makeup, paint hair, blend different objects in the background, and more – all to create a moody illustration. So, let’s start!
If you want to take your photo manipulation work to the next level, then we have an exciting tutorial for you. We’ll work with fire and other images to create this fantasy scene. Learn more at the jump!
Go simultaneously backward and forward in time with this Steampunk tutorial. The main focus, aside from the style of course, is fusing elements from different sources together to create a cohesive whole. There are many tricks to this end and we shall be looking at light sources, shadows, and image grading.
In this photoshop tutorial, you’ll learn how to mash up a series of photos in a highly creative poster based on a famous painting from the 1800’s. Let’s get started!
In this tutorial artist am going to show you how to create a surreal time-themed photomanipulation using Photoshop. The name of this photomanipulation is “Time Guardian” and it was originally created by Mariusz Karasiewicz
In this tutorial I will show you how to create the disintegration effect using brushes and the blur filter. It’s really simple and you will be able to create nice designs using this sort of trendy style of effect.
Learn all about how to manipulate images and combine them to create surreal scenes, in this case a rainy scene. Also, numerous details are covered in this tutorial such as adding highlights, shading, excellent photo-manipulation techniques, and more. Learn all about it at the jump!
Transform a man into a torture victim with a couple tricks and some basic tools.
I came across the amazing set of Paint Tossing freebies from Media Militia the other day and thought that I must create some artwork with them. So I visited my favorite Mjranum’s stock gallery again and done up this tutorial. Hope you will like it.
Let us do something different this week! We will be creating a game poster with magical theme. This tutorial shows how to draw a sword from scratch and also introducing some of the latest high quality brushes on the internet.
In this tutorial I will show you how to create a mystery photo manipulation using Photoshop brushes, different blend modes, and more. Let’s get started!
In this tutorial, we will learn how to manipulate a simple photo into a flooding torrent of a scene. We’ll use some relatively simple techniques to give this image a semi-realistic, stylized feel. Let’s get started!
In this tutorial you’ll discover how to incorporate mundane, everyday objects into a photoshop cyborg manipulation. Combining household objects with 3D renders is a technique that can and does have interesting results.
This tutorial will be a little different than all the other tutorials I wrote. Here I will teach you some basic things about Photomanipulation.
Today I’m going to show you how to put together a complex tree illustration. The idea for this tutorial is to show a workflow from concept to finish, not just so you can copy this illustration, but so that you can take the ideas behind it and use them for any design you have. It’s not just the finished design but the process we are after.
In this tutorial we will take a photo and use different color adjustments and something like pattern floral brushes to make it better or to make a different mood to our picture. So let’s go.
In this tutorial I’ll show you how – with a little time on your side – you can overcome the common myth of low budget work, creating an impressive piece of abstract work using Photoshop.
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.
This tutorial is intended for everyone who is beginning at digital drawing/painting, if you like drawing and Photoshop then you are the perfect candidate to follow this tutorial.
This tutorial will explain how to make a beautiful fairy from a single source image. We’ll go over each step on how to make the feathers, the hat, the background, the grass and the mountains.
In this tutorial, I will guide you through the steps to create a futuristic sci-fi scene. We will transform original pictures using Photoshop tools that will help to give the image a more spectacular look.
This tutorial will teach you how to create the piece ‘Medusa’ using a range of techniques including photo manipulation.
Brought To You By
Do you want to advertise here? Click to get more info…
Nearly all the designers and artists use, interact and rely on Photoshop and its tool for completing their design projects. Photoshop is being employed in all aspects of graphics designing. The majority of us don’t yet realize it because of the spectacular practicality and integration of the environments.
One of the major use of Photoshop comes in creating stunning text effect which has been required in banners and logos. An attractive text effect on the banner or on the logo can attract the huge numbers of visitors, and therefore it is very important to have an appealing text effect which can only be accomplished with the help of Photoshop.
Keeping this in mind, we have assembled this post which contains 45 beautiful and useful Photoshop text effect tutorials which are cool and easy to follow.
Create Gold Ornamental Text in Photoshop
Ornamental text can be created in several ways. In this tutorial we will demonstrate how to combine several stock images to create some nice gold ornamental typography. Let’s get started!
Design a Golden Flame Text Effect in Photoshop
In this tutorial, artist will show you the process involved in creating this golden flame text effect with soft smoke texture in Photoshop.
In this Photoshop tutorial artist will show you creative way how to displace the text and get an interesting effect on it.
Create Brilliant Glossy Typography in Photoshop
If you want to take your digital painting and illustration skills to the next level, then we have an awesome tutorial for you. Learn more after the jump!
Add Fantastic Color to 3D Text
In this tutorial, you will learn how to bring a simple text to life and place everything in fantastic, colored and glowing 3D space. Some neat techniques covered here will allow you to bring your artwork to the next level. Don’t miss it!
Create Vibrant Typography in a Rough Cartoon Style
Today we are going to take a look at a well-known type of typography treatment. You will not only get an idea of how to create cool typography, but you will also learn how to give it a nice cartoon touch.
In this tutorial, We will be creating a game poster with magical theme. This tutorial shows how to draw a sword from scratch and also introducing some of the latest high quality brushes on the internet.
How to Create an Incredible Typographic Illustration
In thi tutorial we’re going to take all the pieces of the puzzle and finalize them. It’s all about realism here as we explore seamless integration of separate 3D objects into a single document. Learn how to add color, match luminosity, and add beautiful contrast to your renders.
Create Astonishing Nightclub Themed 3D Typography
3D graphics are often created using several applications. Today, we will use Photoshop, Illustrator, and Cinema 4D to create a stunning nightclub themed 3D composite. Let’s get started!
On this Photoshop tutorial artist is going to show u how to make one interesting effect which he received by experimenting with Photoshop filters. In the end our effect will looks like cardiac rate.
How to Create a Gorgeous Glassy Text Effect
This text will be created using a series of shapes with different transparency and color effects. Let’s get to it!
Create Insanely Realistic Metal Text in Photoshop
This Adobe Photoshop tutorial takes the simple “create metal text effect in Photoshop” that thousands of people teach all over the web and turns it on it’s head! Adding polishes, shines, motion blurs, and oh yes… NINJA STARS. It’s a must read.
Chained Text photoshop tutorial
Create an Extruded Glossy 3D Text Effect in Photoshop
Today, we will combine those two popular styles and create an extruded 3D glossy text effect in Photoshop. Let’s get started!
Create a Metal Piece with a Graved Text
In this tutorial i am gonna show you how to create a piece of metal with a graved text on it.
Give a Medieval Game Logo a Rough Stone Look
In today’s tutorial we will take a black and white logo and give it a rough stone look in just a few short steps using textures and layer styles. Let’s get started!
Tutorials on creating metal type abound online, as do variations on simple liquid effects. Most are fairly short, offering a good foundation for the reader on how certain effects are achieved but fail to take that extra step (or few steps) to make the piece really shine.
Create Sparkling, Animated Text in Photoshop
In today’s quick tip tutorial we will demonstrate how to create a sparkling text animation in Photoshop with just a few easy steps. Let’s get started!
Create Metallic Text on a Concrete Background
In today’s quick tip tutorial I will demonstrate how to create some cool metallic text on a slick concrete background. This can be done in just a few steps so let’s get started!
Grungy Rusted Carbon Fiber Text Effect
In this Tutorial we will be creating a grungy rusted carbon fiber text effect. We will also be creating the accompanying rusted metal background effect seen in the preview.
How to Design a Print-Ready Flier with Photoshop and Illustrator
In this tutorial we are going to create 3D text and integrate it in a natural environment. We will not use any 3D programs, so all you need is Adobe Illustrator and Photoshop to create this effect.
Create a Steam Powered Typographic Treatment – Part II
In this tutorial, we’ll generate realistic textures and create a fitting scene for our text. Let’s get right to it!
How to Create 3D Text Blocks in Photoshop – Screencast
In this tutorial, I’ll show you how to create a 3D Blocks text effect. You need to have Adobe Photoshop CS4 Extended to practice this tutorial. This will be fun and I’m sure you can do lots of cool things using this technique. Let’s get started!
How to Create an Ice Text Effect with Photoshop
In this tutorial, you’ll learn how to create an ice effect completely from scratch using special Photoshop Brushes.
In this Photoshop tutorial, you will learn how to create a glowing text effects form a scratch.
How to Create Eroded Metal Text with Photoshop
In this tutorial I’ll show you how to create an eroded metal text effect. Throughout this tutorial we’ll make use of various drawing techniques, channels, and patterns. Let’s get started!
How to make a Typographic, Retro, Space Face
In this tutorial, artist will show you how to make a typographic face by using simple techniques. Using the Brush Tool and experimenting with light, you will get this amazing Typographic Space Face that looks like it’s created by letters and an amazing explosion. Let’s get started!
This tutorial is going to be a little more advanced than the other ones I have done. It shouldn’t be a problem if you have been following along with our other tutorials or have a grasp of Photoshop. So lets begin.
How to Design a Stunning, 3D, Sunset Type Illustration
Today we’re going to run through multiple platforms to create a warm and sunny typographic treatment. We’ll use C4D to create the text, Illustrator for several decorative motifs, and Photoshop to bring them all together. Let’s get our hands into creating this warm type illustration.
Create Detailed Letters of Gold and Diamond
This tutorial will show how we can create a set of detailed letters with gold and diamond. We will learn how to use the Polygonal tool to make a simple diamond and also introduce a convenient way to duplicate layers with minimal efforts.
Create a Stunning Text on Wild Fire Effect
Fire text is one of the most classic technique that you can see in Photoshop tutorials. In this tutorial artist is trying out another version here using some real fire images, mix with filters and blending methods. Here we go!
In this tutorial you will learn how to create text on fire, also I will explain all the techniques how to transform the text in right format.
A Slick Supernatural Text Effect
In this tutorial we’ll be creating a smoky night effect on text to give it an eerie supernatural sort of feel. It’s a good exercise in using the Wave distortion filter…
Design a Super Sleek Text Effect with Water Drop Texture
In this tutorial, artist will show you the steps he took to create the Super Sleek, eye-catching text effect with Water Drop Texture. This effect is simple but effective, and would be suitable for any water/rainy/ocean themed designs you’re creating.
In this tutorial, we’re going to create an icey-cold effect using layer styles and that you can apply to different objects. Then we’ll put it on a nice background to give it some kick.
Stunning 3D effects in 30 minutes
Colorful Glowing Text Effect in Photoshop
Elegant 3D Text Effect in Photoshop
This tutorial you’ll learn how to create an elegant 3D Text effect using simple the shape tool, layer styles and paths.
Brushed Silver Reflective Text Effect
In this Tutorial we will be creating a brushed silver reflective text effect. We will also be creating the accompanying abstract reflective watery background scene.
This tutorial shows you how to create a nice 3D text using only photoshop 7.
How to Create a Christmas card in Photoshop
In this tutorial, you’ll learn how a Christmas card can be designed with Photoshop. You will learn, how to create Christmas ball, draw snowflakes, customize brushes etc. Let’s get started!
In this tutorial artist will teach you how to create a similar type of effect using a letter or number. You’ll learn some awesome techniques. Give it a go!
This tutorial will teach you how to create Starcraft theme wallpaper.
Create an Awesome 3D Text Effect
In the tutorial, I will show you the processes I used to Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try
Brought To You By
Do you want to advertise here? Click to get more info…
WordPress is a highly popular blogging platform. Over the years the platform has seen countless improvements and today, it continues to improve the user experience it offers. Apart from being reliable and secure, WordPress offers great visual appeal through its countless themes.
Web developers have contributed a lot to WordPress by building themes for the platform. By spending time on visualizing a theme and then coding it, developers can share their brilliant blogging designs with other WordPress users. If you are a WordPress theme developer looking for a way to reduce the time spent on coding, check out the brilliant website WP-Snippets.
WP-Snippets is a free to use website with a fitting name. The site provides visitors with different snippets of code for WordPress themes. These snippets correspond to a variety of functions; ranging from “Remove Metadata Generator” to “Change Login Logo” you will find many snippets.
The snippets are listed in a tag cloud on the site’s homepage. You can use the search bar to filter the snippets and find the one you are looking for.
Clicking on your snippet will take you to its page.
The snippet’s page includes a brief description of the code. Scroll down and you will find the code itself. If any additional explanations or special instructions on how to use the snippet are required, they are included under the code.
You can share the snippet with your other WordPress developer friends via sharing the snippet’s URL or directly Tweeting it using the button provided on the top right.
In conclusion, WP-Snippets is a must-bookmark website for WordPress theme developers.
Brought To You By
Do you want to advertise here? Click to get more info…
Adobe Photoshop is a perfect tool to add flare to images and give them some nice effects which increase the beauty of that image. One of the commonly used effects in Photoshop is the lighting effect which is mainly used for creating the feeling of creativity, technology, magic, and fantasy.
In this post we have collected 35 most useful tutorials about creating lighting effect in Adobe Photoshop and we are sure after going thorough this post, you will be able to glow your artwork in a very creative manner. Feel free to share your opinion with us.
Create an Adrenaline Filled Car Chase Scene
In today’s tutorial we are going to use many techniques to turn several stock photos into an action packed car chase scene with explosions and weapons fire.
Design a Coldplay/Apple Inspired Portrait in Photoshop
This tutorial will show you how to create a portrait based on the style of the latest Coldplay / Apple Ad featuring “Viva la Vida”
Create a Futuristic Music Player Interface in Photoshop
This tutorial requires extensive knowledge of shading and lighting, as well as a lot of time. If there’s one thing I learned, it’s that lighting is the most critical aspect of these types of pieces. In today’s tutorial I will show you how to create a futuristic non-functional interface.
In this tutorial I will show you how to create an easy and super quick text effect in Photoshop. We will play with Brushes, Blend Modes, basic filters like Blur and Liquify, and also text.
Creating 3D Lighting Effects Using Cinema 4D and Photoshop
In this tutorial we will go over how to create 3D text in Cinema 4D, render it out in regular and wireframe mode, then import it into Photoshop to add the final touches, which include all sorts of lighting effects.
This tutorial explains how to create a energetic, vibrant, colorful wallpaper.
How to Create a Realistic IES Lighting Effect
In this tutorial, artist will show you how to create a realistic IES (photometric) lighting effect. We’ll be using Photoshop CS4 as well as some free plugins and software. Let’s get started!
Mysterious hell gate, the connection between two worlds
This tutorial was comprised from some scene from that film. You may use this technique to create a poster for a similar film.
Create Abstract Landscape Art From a Photograph
Today, artist will demonstrate an alternative way to create abstract artistic pieces using a photo merely as inspiration. We will start by choosing and simplifying its components and then proceed to apply a retro-futuristic look. Let’s get started!
Create a retro sci-fi movie poster
In this tutorial artist will show the simple process that is behind this composition. We will deal in particular with blending options and textures customization. This tutorial can be followed by Photoshop newbie without problems.
Create Awesome Abstract Photo Effect via Layer Masking and Custom Patterns
In this tutorial, artist will show you how you can Create this Awesome Abstract Photo Effect via Layer Masking and Custom Patterns. Some steps can be a little tricky, but why not have a try!
Change smoke into a dazzling unicorn
Use Photoshop CS5′s New feature – Puppet Warp to create a sexy Unicorn out of smoke, and add dazzling effects to finish!
Create a Magical Flaming Heart Illustration in Photoshop
The Warp feature in Photoshop can be a powerful tool if you know how to use it correctly. In today’s tutorial we will demonstrate how to combine a few stock images to create a magical flaming heart illustration. Let’s get started!
How to Create a Highly Detailed Hi-Tech Power Button
With this tutorial we will create a hi-tech style button that can be used in splash pages, applications or Powerpoint presentations. We will use Illustrator to create complex vectors and Photoshop to develop realistic effects.
Lighting effects are an effective way to add a detailed illustrative touch to a photo. Justin Maller demonstrates how to go about combining several lighting techniques
A step by step beautiful tutorial.
In this tutorial, we learn how to recreate that solar eclipse image in a slightly retro style using nothing but photoshop.
So in this tutorial we will create a composition from scratch first in Illustrator where we will play with shapes and the Blend Tool. After that in Photoshop we will add the light effects and the pattern overlay.
Here’s a great effect that will bring some energy to your subject. We’ll be wrapping this singer’s arm with a glowing beam of light, adding sparkles, and adjusting the colors to make it all seem magical.
Design a Beautiful Cosmic Space Scene in Photoshop
Follow this step by step walkthrough of its creation in Photoshop, from the making of the planets, to the vibrant nebula and bright lens flares.
Design a Vibrant Blackberry Inspired Ad
The Blackberry Loves U2 TV promo features some awesome, bright and vibrant lighting effects. Let’s take a look at recreating the style to produce a Blackberry inspired design of our own.
Create an Intense Movie Poster
In this tutorial, we’re going to create a poster for a fictional movie called “Fugitive.” The movie is meant to be a suspenseful thriller that features one’s escape under the cover of darkness, despite man’s attempt to capture the lone hero. Thin and cheesy plot? Check. Awesome opportunity to better your PSD skills? You got it!
Create a Simple Vibrant Light Effect in Photoshop
Starting away from the computer, we’ll use a few household objects to create some photographic resources. Then follow this Adobe Photoshop tutorial to manipulate the images with various tools and techiques to produce a vibrant design made up of intense light streams effect.
This tutorial will teach you to create stunning effects using glows, loads of Colour Dodge, and lots and lots of neon – hot pinks and lemon yellows are prominent here. You’ll also learn how to utilise white in all the right places, so that white areas look less like negative space and more like the result of added energy and light.
Add A Sparkle Trail To A Photo
In this Adobe Photoshop tutorial, we’re going to learn how to add a sparkle trail to a photo, using a custom Photoshop sparkle brush we’ll be creating.
In this tutorial, we’re going to see how to engulf text in an explosion of light and color.
A step by step Fantasy Art Photopshop Tutorial.
Change your text into magic glowing sparkles
In this tutorial you learn how you can convert your normal text into magic glowing sparkles. Using stroke path and layer style it isn’t so hard to get this texteffect
Design A Very Hot Winter Composition
A detailed and step by step tutorial.
This tutorial will mainly explore the brush engine and you will also learn how to create custom brushes and use them effectively, combined with some interesting layer styles.
This tutorial will teach you how to create creative and stylish fire lines in 10 easy steps!
Creating Energy Spheres in Photoshop
A step by step and beautitulf tutorial how to Creating Energy Spheres in Photoshop.
A wonderful step by step tutorial, in this you will learn how to create an abstract lightbulb.
This tutorial will show you how to create a fireworks effect using only Photoshop. I will not use any other images, everything will be created within photoshop.
Brought To You By
Do you want to advertise here? Click to get more info…
This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know.
Still using that pesky, impossible-to-memorize XHTML doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.
<!DOCTYPE html>
In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype
. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.
Consider the following mark-up for an image:
<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p>
There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure>
element. When combined with the <figcaption>
element, we can now semantically associate captions with their image counterparts.
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
Not long ago, I utilized the <small>
element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small
element has been redefined, more appropriately, to refer to small print. Imagine, a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small>
would be the correct wrapper for this information.
The
small
element now refers to “small print.”
Types
for Scripts and Links You possibly still add the type
attribute to your link
and script
tags.
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>
This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type
attribute all together.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
…That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself.
<p class=myClass id=someId> Start the reactor.
Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.
The new browsers have a nifty new attribute that can be applied to elements, called contenteditable
. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html>
Or, as we learned in the previous tip, we could write it as:
<ul contenteditable=true>
If we apply a type
of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html>
At this time, we cannot depend on browser validation. A server/client side solution must still be implemented.
It should also be noted that all the current browsers are a bit wonky when it comes to what elements and attributes they do and don’t support. For example, Opera seems to support email validation, just as long as the name
attribute is specified. However, it does not support the placeholder
attribute, which we’ll learn about in the next tip. Bottom line, don’t depend on this form of validation just yet…but you can still use it!
Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value
attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder
attribute remedies this.
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder
attribute, no harm done.
Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.
“localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.”
-QuirksBlog
While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists.
Header
and Footer
Gone are the days of:
<div id="header"> ... </div> <div id="footer"> ... </div>
Divs, by nature, have no semantic structure — even after an id
is applied. Now, with HTML5, we have access to the <header>
and <footer>
elements. The mark-up above can now be replaced with:
<header> ... </header> <footer> ... </footer>
It’s fully appropriate to have multiple
header
s andfooter
s in your projects.
Try not to confuse these elements with the “header” and “footer” of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer
element. The same holds true for the header
.
Learn about more helpful HTML5 form features in this quick video tip.
Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements.
All elements, by default, have a
display
ofinline
.
In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.
header, footer, article, section, nav, menu, hgroup { display: block; }
Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header
element even is. Luckily, there is an easy fix:
document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu");
Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Imagine that, in my site’s header, I had the name of my site, immediately followed by a subheading. While we can use an <h1>
and <h2>
tag, respectively, to create the mark-up, there still wasn’t, as of HTML4, an easy way to semantically illustrate the relationship between the two. Additionally, the use of an h2
tag presents more problems, in terms of hierarchy, when it comes to displaying other headings on the page. By using the hgroup
element, we can group these headings together, without affecting the flow of the document’s outline.
<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>
Forms allow for a new required
attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways:
<input type="text" name="someInput" required>
Or, with a more structured approach.
<input type="text" name="someInput" required="required">
Either method will do. With this code, and within browsers that support this attribute, a form cannot be submitted if that “someInput” input is blank. Here’s a quick example; we’ll also add the placeholder attribute as well, as there’s no reason not to.
<form method="post" action=""> <label for="someInput"> Your Name: </label> <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> <button type="submit">Go</button> </form>
If the input is left blank, and the form is submitted, the textbox will be highlighted.
Again, HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus
attribute.
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
Interestingly enough, while I personally tend to prefer a more XHTML approach (using quotation marks, etc.), writing "autofocus=autofocus"
feels odd. As such, we’ll stick with the single keyword approach.
No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio>
element. Well, at least, ultimately, we won’t have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it’s still a good practice to offer some form of backward compatibility.
<audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> Download this file. </audio>
Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio.
When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.
Much like the <audio>
element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn’t specify a specific codec for video, it’s left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.
<video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video>
Chrome can correctly display video that is encoded in both the “ogg” and “mp4″ formats.
There are a few things worth noting here.
type
attribute; however, if we don’t, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself. source
elements, we can either offer a download link, or embed a Flash version of the video instead. It’s up to you. controls
and preload
attributes will be discussed in the next two tips. The preload
attribute does exactly what you’d guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload="preload"
, or by simply adding preload
. I prefer the latter solution; it’s a bit less redundant.
<video preload>
If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls
attribute within the video
element.
<video preload controls>
Please note that each browser renders its player differently from one another.
How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern
attribute, we can insert a regular expression directly into our markup.
<form action="" method="post"> <label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go </button> </form>
If you’re moderately familiar with regular expressions, you’ll be aware that this pattern: [A-Za-z]{4,10}
accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.
Notice that we’re beginning to combine all of these new awesome attributes!
If regular expressions are foreign to you, refer here.
What good are these attributes if we have no way of determining whether the browser recognizes them? Well, good point; but there are several ways to figure this out. We’ll discuss two. The first option is to utilize the excellent Modernizr library. Alternatively, we can create and dissect these elements to determine what the browsers are capable of. For instance, in our previous example, if we want to determine if the browser can implement the pattern
attribute, we could add a bit of JavaScript to our page:
alert( 'pattern' in document.createElement('input') ) // boolean;
In fact, this is a popular method of determining browser compatibility. The jQuery library utilizes this trick. Above, we’re creating a new input
element, and determining whether the pattern
attribute is recognized within. If it is, the browser supports this functionality. Otherwise, it of course does not.
<script> if (!'pattern' in document.createElement('input') ) { // do client/server side validation } </script>
Keep in mind that this relies on JavaScript!
Think of the <mark>
element as a highlighter. A string wrapped within this tag should be relevant to the current actions of the user. For example, if I searched for “Open your Mind” on some blog, I could then utilize some JavaScript to wrap each occurrence of this string within <mark>
tags.
<h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
Some of us initially questioned when we should plain-ole div
s. Now that we have access to header
s, article
s, section
s, and footer
s, is there ever a time to use a…div
? Absolutely.
Div
s should be utilized when there’s no better element for the job.
For example, if you find that you need to wrap a block of code within a wrapper element specifically for the purpose of positioning the content, a <div>
makes perfect sense. However, if you’re instead wrapping a new blog post, or, perhaps, a list of links in your footer, consider using the <article>
and <nav>
elements, respectively. They’re more semantic.
With all this talk about HTML5 not being complete until 2022, many people disregard it entirely – which is a big mistake. In fact, there are a handful of HTML5 features that we can use in all our projects right now! Simpler, cleaner code is always a good thing. In today’s video quick tip, I’ll show you a handful of options.
People can be forgiven for assuming that awesome JavaScript-less transitions are grouped into the all-encompassing HTML5. Hey — even Apple has inadvertently promoted this idea. For non-developers, who cares; it’s an easy way to refer to modern web standards. However, for us, though it may just be semantics, it’s important to understand exactly what is not HTML5.
Regardless of how much distinction you require, all of these technologies can be grouped into the modern web stack. In fact, many of these branched specifications are still managed by the same people.
Thanks for reading! We’ve covered a lot, but have still only scratched the surface of what’s possible with HTML5. I hope this served as a helpful primer!
Finding text on a webpage is something that can be helpful in a number of situations. In the web browser Mozilla Firefox you can search for text on a webpage by using the “Ctrl+F” key combination. This pops up a mini-window at the page’s bottom from where you can search for a word or phrase. You can use the “Highlight All” option to highlight your search item wherever it is on the webpage.
Suppose you want to view the context each search item is used in. You would have to jump from one highlighted search item to another. This can be a problem especially if the results are many and spread out far over the webpage.
A solution to this is presented by “Find All.”
Find All is a browser add-on for Firefox. With the add-on installed, the “Highlight All” option changes to “Find All.” This “Find All” option lists all the search results in an easily navigable view which helps you compare the results.
This view also eliminates any special formatting and displays the results in simple text, making the comparison much easier.
You can access the add-on’s options to modify the font size in which the results are displayed.
The options also let you change the highlighting color, choose to alternate the row background color, and display the “Highlight All” option along with the “Find All” option.
For people who use Firefox’s search feature a lot, “Find All” will prove itself to be a very useful tool. Get “Find All” Firefox Add-on.
"Tell the chef, the beer is on me."
"Basically the price of a night on the town!"
"I'd love to help kickstart continued development! And 0 EUR/month really does make fiscal sense too... maybe I'll even get a shirt?" (there will be limited edition shirts for two and other goodies for each supporter as soon as we sold the 200)