Articles tagged as ‘Tutorials’

URL Encode/Decode Webapp with jQuery

Most developers will know of URL encoding as UTF-8 encoding. This converts non-ASCII characters into a syntax of %NN where N stands for a unique numeric format. For example, an empty space converts to %20 when encoded. Nobody wants to do this by hand so developers have made encoding tools for convenience. This is all […]

Read More ».

50 Top Quality After Effects Tutorials

After Effects is Adobe’s product for creating motion graphics and visual effects. It’s amazing what you can make with After Effects and some knowledge, or in this case a little help from some tutorials. In this post we’ll feature 50 of the best After Effects tutorials for creating amazing work with After Effects. No prior […]

Read More ».

How to Setup an Editable Client Site with Cushy CMS

If you design websites for clients you know that most clients these days want the ability to update the site themselves. Fortunately, content management systems make this possible. However, depending on the types of clients that you work with, you may find that sometimes going with a full-feature CMS is overkill for a client that only needs to update a few pages.

Each client has there own unique needs, and there may be times when you come across someone who is not interested in anything fancy, but they want a small website that will allow them to change the content of pages.

Read More ».

Guide to Setting Up a LightCMS Website from Scratch

Choosing the right content management system for a particular project can be a critical decision that has long-lasting impact on the client and the success of their website. Unfortunately, with so many options out there it is difficult to get to know more than just those that you use on a regular basis.

In this post I’d like to present some basic information about LightCMS and provide a tutorial for getting a simple website working with the basic features of LightCMS. This is a very simple tutorial that only covers the basics of the system, but hopefully it will be helpful to learn a little bit more about the Light CMS engine to use it for some of your clients…

Read More ».

Generate an InDesign Table of Contents from a Template

Once you get the hang of it, the Table of Contents generator in Adobe InDesign is a breeze to use, and if you’re using an InDesign template, most of the work is already done for you, making your job flow that much easier and faster.

Here’s why:

InDesign’s Table of Contents generator works with Character Styles and Paragraph Styles to generate a Table of Contents. The generator searches your document for Styles of various titles, subtitles, headings, and subheadings, as specified by you, the user, and generates a Table of Contents based on these Styles, along with certain formatting options that you choose from the generator dialogue.

Your InDesign template most likely comes with a handful of Styles predefined, and you can make new ones easily by formatting your text with the Character and Paragraph palettes, highlighting your text, and choosing New Paragraph Style from the dropdown menu in the upper right hand corner of the Paragraph Styles palette. Be sure to name your new Style by double clicking it in the palette’s list and entering a name that you can remember.

Text styles are pre-defined

Read More ».

The Ultimate Roundup of Resources, Tools, and Print Design Tutorials

It may seem like the design world is all digital but there’s still a tremendous demand for print work. Graphic designers commonly jump around to various print jobs or even shift into digital interface design. But it’s slightly less common to see an interface designer move into print design – however this doesn’t mean print work is any less desirable or less valuable.

In fact, you can earn a good living by juggling print work at an agency or running your own freelance studio. But if you’re a general web/graphic designer who hasn’t really looked into print design, this can be a confusing area to learn.

I’d like to share a collection of helpful resources, tools and print design tutorials for designers who want to make the leap into print design. You may not brand yourself solely as a “print designer” but these skills will give you more leverage to adorn your resume & portfolio with a few print work samples…

Read More ».

How to Set Up Simple E-Commerce with DPD

E-commerce is obviously an enormous industry. But major players like Amazon and Wal-Mart aren’t the only ones who can make money by selling products through their websites. Many bloggers and website owners are interested in using e-commerce on a much smaller scale to sell their own products. But the technical details of setting up an e-commerce website trip up a lot of people who would like to sell products from their site.

Perhaps you already have a blog or a website and you’re not looking to create an entirely new website on an e-commerce platform. You’d rather be able to just sell some products in a simple way from your existing site. Several years ago most site owners who wanted a simple e-commerce solution were pretty much limited to using PayPal’s buy now buttons, which could get the job done, but lacked many important features, most notably automatic delivery of digital products.

In recent years a number of e-commerce systems have been developed specifially to make it quick and easy to start selling products from your existing website or blog. Many of these systems have been designed primarilly for digital products, but most can also support sales of tangible products as well. E-Junkie is probably the most well-known options, but today I want to cover another option that I think is a great fit for those who want to get started with selling their own products from a website or blog. DPD (short for Digital Product Delivery) is a simple, affordable option that also offers some impressive features. In this article I’ll go through the process of getting started with DPD and setting up your first product. I’ll also cover many of the additional features that make DPD a great choice.

DPD

Read More ».

Free Resources for Creating a Flat Design

Flat designs are taking over quite quickly it seems. I doubt anyone could argue against it being the latest and greatest for (fairly) new trends on the web, in mobile devices, and even in print. The simple description for a flat style of design is one that lacks 3D effects, such as bevels or drop shadows.

The stylistic details of a flat design can vary somewhat, just as with most design styles. Usually, though, a flat design is quite minimalist with primary-ish colors and lots of “white space”. The font is usually thin without too much flare. Boxes and buttons are, of course, without strokes or 3D effects. Some flat designs do contain shadows, but these are usually flat-ish as well.

Whether you are new to flat design or simply need some fresh, new resources for your next project, most should be able to find a few items below to help. The list below is divided into 5 categories: UI kits, icons, templates, WordPress themes, and tutorials. The best part? All are free. The ones that specifically mention “free for commercial use” are noted as well. Have fun browsing and be sure to let us know of any other amazingly free flat resources.

UI Kits

A UI kit is a user interface collection that comes with all the parts and pieces you need to design your own website. Usually they are PSD but sometimes will come with other components as well. While you can use the color scheme in the file, you can create your own color scheme. They also come with patterns, brushes, and much more. Hence, UI kits save a web designer a lot of time, improving workflow and decreasing time spent on projects.

DesignModo Flat UI

Read More ».

Create a Sidebar that Sticks Within an Element

You’ve probably seen this trick used before with social icons or a sidebar that sticks to the top of your screen as you scroll down the page.

The problem is that often they don’t stop scrolling and up either disappearing behind another element or overlapping something they shouldn’t, which looks cheap and unprofessional.

In this tutorial we’ll create a ‘sticky element’ that only scrolls until the maximum height of it’s parent element which will prevent that unsightly overflow.

Let’s start with a very basic html structure:

Read More ».

How To Code Unique Avatar Photo Styles with CSS3

The popularity of social networking has converted a lot of websites to be more user-centric. This means you can find loads of new profile features and direct-connect OAuth apps through Twitter, Facebook, Tumblr, Pinterest, and others. Typically the profile photo is a common facet to each profile webpage design. Photos or avatars can be uploaded by the user, and sometimes pulled directly from their other accounts online.

In this tutorial I want to demonstrate 5 specific user avatar styles with CSS3. You may utilize any of these features on your own website or startup idea. Design trends have been advancing where new CSS properties are becoming much more widely supported. This means frontend developers can start really pushing the boundaries of how we style media in webpages. The user experience of a profile page is definitely a good place to start.

How To Code Unique Avatar Photo Styles with CSS3

Read More ».

Displaying JavaScript Modal Windows using Bootstrap

It is true that Bootstrap has grown to include supporters from all around the globe. As there are plans for a Bootstrap 3 release I want to go into detail for one topic in particular. The Bootstrap JavaScript effects are not always useful to developers, so JS files are not necessary for running the whole framework. But they do provide quicker features to define common UI elements without having to reinvent the wheel.

I want to focus this tutorial on using modal windows within a typical webpage. We just need to include two files out of the Bootstrap framework. And the JS codes are not overly complicated to understand. My example demo allows users to dynamically update the background color, so this does admittedly have some more sample JS then you will need. But it is an excellent introduction to adding these brief components into any ordinary website.

Displaying JavaScript Modal Windows using Bootstrap

Read More ».

Build a Single-Page Sliding Navigation Bar with jQuery

Many web design studios and freelance portfolios will incorporate the popular single page navigation technique. The benefits of such a layout allows visitors to go through all your main content without needing to reload the website. Additionally this helps to keep the interface very simple and easy to maneuver.

In this tutorial I want to demonstrate how we can build a demo single-page layout with sliding navigation effects. I will be using the jQuery One Page Nav plugin which offers more control onto each of the page elements. Additionally the layout is standards compliant with HTML5 and CSS3 specs and the nav will still load properly in browsers where JavaScript is disabled. If you want to catch a glimpse of the final product we are building check out my demo page below.

Build a Single-Page Sliding Navigation Bar with jQuery

Read More ».

How To Build a Fullscreen Background Video Player

After looking over countless jQuery plugins I have seen a lot of new HTML5 video techniques. The audio and video elements have created a new method of publishing digital media, streaming off a web server. But developers have been hard at work customizing these features to be used within advanced layouts.

In this tutorial I want to look at using big video backgrounds within typical website layouts. I’ve chosen the jQuery plugin BigVideo.js which includes a list of resources in the documentation. We can setup genuine HTML5 videos streaming as backgrounds behind the main page content. It is not an easy setup, but I’ll provide a clear step-by-step process to follow along.

How To Build a Fullscreen Background Video Player

Read More ».

How To Code a Vertical Accordion Nav Menu with jQuery

Website navigation is an important aspect to any functioning layout. Users will often be looking for methods to traverse over your pages, and sometimes this requires a bit of creativity. I love the idea of vertical navigations especially with sub-menu links.

In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click. Using this method we can also build sub-menu links, splitting up headers by ID or class names. Follow along with the ideas below and feel free to download a copy of my source code.

How To Code a Vertical Accordion Nav Menu with jQuery

Read More ».

CSS3 Image Gallery with Dynamic Caption Text

I have run into lots of tutorials on the web focused around creating stunning image galleries. These often include photo boxes or alternate JavaScript-enhanced functionality. Nominally in the modern era of web design there isn’t any problem with dynamic scripting.

For this tutorial I want to show how we can build a standards-compliant HTML5/CSS3 image gallery with fading captions. We will be using CSS3 transitions to create the animated effects. Also I have been working with a number of CSS3-specific properties on this tutorial alone. It leaves room for interpretation if you wanted to implement a JavaScript frontend animation using CSS3 as a fallback.

CSS3 Image Gallery with Dynamic Caption Text

Read More ».

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

There are a lot of tutorials out there explaining the major benefits of building an e-mail newsletter. It definitely draws attention to your website and helps regular readers keep up with new publications. But not everybody has the time or knowledge to build their own newsletter design.

In this tutorial I want to go over the process of building a very basic HTML newsletter. I’ll explain some key steps along the way and you can grab a copy of my source code as well. When you’re building HTML code for e-mail clients the work process is a whole lot different. But once you understand the basics you’ll have an easier time working with more complex layouts.

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

Read More ».

How To Build a Mobile Detail List Webapp in HTML5/CSS3

There are countless mobile applications which use list views in their UI. Both Android and iOS offer platform-specific designs to make building applications easier. But there is another template you can build with just typical HTML5 and CSS properties.

In this tutorial I want to introduce a method for building clean HTML5 mobile web applications. For the demo below I’ve limited the width at a maximum of 800px but you can theoretically scale to any browser size. This is what makes mobile web development so profitable – the amount of control you have over the user experience. You can follow along with the tutorial code and download a copy of my source files from the link below.

How To Build a Mobile Detail List Webapp in HTML5/CSS3

Read More ».

How to Create a Scratches Photoshop Brush

Grunge effects like textures and scratches can be used create backgrounds, to distress text, or just to add a subtle texture to an element in a design. One of the easiest ways to add texture and scratches is through the use of Photoshop brushes. In this tutorial we’ll show how you can create a custom scratched surface brush that will be highly useful in your own design work.

This is the same technique that was used to create our set or Scratched Surface Brushes that are available at Vandelay Premier.

How to Create a Scratches Photoshop Brush

Read More ».

Facebook-Style Inline Profile Edit Fields with Ajax

The standard Facebook layout is well known amongst fans of social media. Many of the dynamic form fields on the website started a huge trend of Ajax-powered backend scripts. Now we can see open source PHP developers offering examples of their code for dozens of platforms such as Wordpress, Drupal, or Joomla!

In this tutorial I’d like to focus on building a simple jQuery inline edit field. We won’t store any data locally, but instead we can update the HTML data directly on the page after each edit. It’s possible to then tie into a MySQL database and store all these values as default. But for now let’s code the mere frontend functionality.

Facebook-Style Inline Profile Edit Fields with Ajax

Read More ».

Quickly Design an E-Commerce Website Using a UI Set

Being able to work efficiently is one of the keys to success as a freelance designer. There are many ways that you can go about improving your own efficiency, and taking advantage of available resources is one option.

In this tutorial we’ll look at the process of designing an e-commerce website and how you can speed up the process by using a UI set. A few months ago we released the huge Zephirro UI Set, which was created for the purpose of helping to reduce the time needed for designing e-commerce sites.

If you have never used a UI set in your own work this tutorial will show how it can be done and how easy it is quickly create your own website mockups by having some of the elements already designed. We’ll use several of the basic elements of Zephirro to design a product category page for an e-commerce site, and we’ll make some changes and customizations to the elements, which you will probably want to do when using a UI set (for example, changing the color of elements).

Quickly Design an E-Commerce Website Using a UI Set

Read More ».

Coding a Pixel-Style Video Game Fansite in HTML5/CSS3

There are not as many newer gaming fansites which utilize the power of HTML5 and CSS3 techniques. Some of the more popular gaming titles such as Final Fantasy and Kingdom Hearts have a devoted following. A large fan base will accompany forums and other online message boards – but this isn’t always the most successful CMS solution.

In this tutorial I want to demonstrate how we can build a simple retro Pokemon fansite layout using some newer CSS3 tricks. To keep the template fairly simple I haven’t included any extra jQuery effects. Although admittedly there is plenty of room for such a system of dropdown menus or sliding panels on the home page. Additionally I’ve included a few sprite resources ripped from the first 2 generation games.

Coding a Pixel-Style Video Game Fansite in HTML5/CSS3

Read More ».

How to Use Iris Blur in Photoshop CS6

Photoshop CS6 brings new features in the Blur Gallery that give you the control to easily add precise blur effects to your photos. In this brief tutorial we’ll be looking specifically at the Iris Blur, which allows you to determine what areas should be sharp and what areas should be blurred.

To demonstrate the Iris Blur I will be using a photo from EJP Photo that is available on Flickr. Here is the photo.

Read More ».

Design an Elegant Photography Website in Photoshop

A few weeks ago we released the free Elegant Photography WordPress theme. Today we’re going to walk through the process of designing the theme’s home page in Photoshop.

While the design was used to create a WordPress theme, the same design could be coded to use with another CMS or just with static HTML/CSS.

What We’ll Be Creating

Here is a look at the final design that we’ll be creating in this tutorial. Click the image to see it in full size.

Design an Elegant Photography Website in Photoshop

Read More ».

Coding a Guided Registration Form with jQuery

Techniques for building a usable registration form can be a major factor towards bringing in new users. When you’ve got an overly complicated form it can scare away so many first time visitors. But a great technique for keeping these people around is coding form hints into the layout.

In this tutorial I want to demonstrate how we can build such an interface with CSS3 and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords. But it’s a great usability tactic which livens up even the most dull websites.

Coding a Guided Registration Form with jQuery

Read More ».

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 ».
Page 1 of 212