Articles tagged as ‘Tutorials’

How to Add an Awesome Parallax Banner for Your WordPress Site

The parallax effect has been used in the movie industry for a long, long time. Also, cartoons make great use of this simple technique. The general idea is to have 2 overlapped items moving in different speed ratios, to create an illusion of depth.

Parallax effects can work great even for websites. We can see many uses out there, and today we’ll take it a little deeper and create a banner making use of this technique.

The main challenge here is to do something simple because we’re dealing with dynamic content so everything will change pretty often. Our effect will need, for example, to automatically detect heights, since the only fixed dimension will be the width.

Also, we’ll learn how to do that on the top of a WordPress theme, in our case the Twenty Eleven theme (default theme), but you can easily use the concepts and snippets here to apply on your own theme.

How to Add an Awesome Parallax Banner for Your WordPress Site
Photo credits joeymc86

Read More ».

Building a List/Grid View Switcher with jQuery

A fairly common web interface feature is the dynamic view switcher. On product pages or blog archives you’ll sometimes find buttons to change the layout from display lists to smaller grids. In this tutorial I’ve built a simpler example using basic CSS and some jQuery commands.

I’ll be using interface elements from the Zephirro E-Commerce UI Set which include buttons and thumbnail photos. Feel free to demo the code yourself and try out a similar experience on your own website. This is a tricky effect to nail down, but when done properly your users will love the unique experience.

Building a List/Grid View Switcher with jQuery

Read More ».

Code an Awesome Registration Form with the Exotico UI Set

Today we’ll learn a few CSS tricks that you can use to code your UI elements and keep them as awesome as they were in the psds.

I know, things are much easier when you have a good design, so we’ll use Exotico UI this time. You can buy it for $19, or if you are a Vandelay Premier, you can just download it as a member. Also, we have a free version so you can see how awesome that UI Kit is.

We’ll use inputs, progress bars, and buttons this time. If you want to see any other element coded, you can let us know via comments.

That’ said, let’s start the fun part.

Demo and Download!

This is the final result we’ll get. You can download demo files or just check the online demo and see how it works!

Code an Awesome Registration Form with the Exotico UI Set

Read More ».

How to Code an Awesome Categories Menu for Your WordPress Site

Sometimes it’s good to ditch the default functions for components and create our own stuff. WordPress has great features for category listing but when it comes to customization we need to dig a little deeper on its functions.

Today we’ll see how to do an awesome categories menu, based on Pawel Kadysz’s awesome menu design.

We’ll see alternatives to WordPress wp_list_categories functions that allows full customization. Also we’ll see how to do it with clean CSS and a little jQuery for final touches to make it smoother.

So, are you ready to rock?

The Final Look

How to Code an Awesome Categories Menu for Your WordPress Site

Read More ».

How to Create a Soft Grunge Photoshop Brush

The use of soft or subtle textures in web design is very common right now. Extremely grungy designs with heavy textures are still used in some situations, but a more subtle use of textures has become much more common. These softer textures are ideal for website backgrounds or for applying to specific elements within a design.

One of the easiest ways to use textures in your designs is with the help of Photoshop brushes. There are countless pre-made brushes available, but sometimes you won’t be able to find exactly what you want, or maybe the brush that you want to use isn’t licensed for a commercial project. In these situations you can simply create your own set of brushes and use them whenever you need a subtle texture.

In this tutorial we’ll go through the process of creating a soft or subtle grunge brush. Of course, you can duplicate the process and create a full set of brushes if you like the outcome.

Here is a preview of the texture that will be created by this brush:

Create a Soft Grunge Brush in Photoshop

Read More ».

How to Photograph Your Own Textures

Textures are used all the time by designers for both web and print projects. A effective use of texture adds character and makes a design more interesting and appealing (for some examples see our post 35 Websites with Outstanding Use of Textures). At Vandelay Premier we provide high resolution textures to our members and customers, and there are of course countless other places where you can buy textures. However, creating your own textures is also an option, and in this article we’ll provide some tips to help make your texture photography more effective.

For the purposes of this article, we’re assuming that your goal for photographing textures is to use them in your own graphic design, or to distribute them to other designers. Someone who wants to photograph textures for the art of photography may approach things differently. We’re primarily interested in photos that will be highly useful for incorporating into graphic design. Scanning textures is also an effective option for flat objects like paper and fabric, but for this article we’ll focus on photographing textures.

How to Photograph Your Own Textures

Read More ».

How to Create a Job Board with Gravity Forms

Niche or industry-specific job boards are highly useful for job searchers who are looking for work in a specific field, and they’re also great for allowing employers to reach a targeted audience of job searchers.

For those who want to create a job board or add a job board to an existing website or blog, there are several options for creating and managing it. There are several different WordPress plugins and themes that have been developed over the past few years for running job boards.

I have used 2 commercial plugins and 1 commercial theme for job boards with very mixed results. In some cases setting up the job board was rather complicated, and in other cases the support was poor and the developer disappeared. If you’re building a website or a critical part of a website on a commercial plugin or theme it’s important to have confidence that the product will continue to be supported in the future, otherwise you could have major problems as new versions of WordPress are released.

Gravity Forms is a very popular commercial WordPress plugin for creating forms and it includes all of the functionality needed to create a job board. Although it is not specifically a job board plugin there are a few significant reasons why you may want to consider using Gravity Forms if you are looking to create a job board for yourself or for a client:

  • Gravity Forms is well-established and due to it’s popularity it is not in danger of becoming unsupported.
  • The inteface is easy to use and manage.
  • A PayPal add-on is available to those who have a developer’s license of Gravity Forms, so you can easily charge a fee for job submissions.

Gravity Forms

Read More ».
Page 3 of 512345