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 […]
Articles tagged as ‘Tutorials’
A big challenge when coding a contact form is choosing a reliable backend language. However thanks to MailThis.to this is no longer a problem. The MailThis API is free to use and takes an HTML form to send messages directly to an e-mail address. The API is surprisingly simple and you only need basic HTML/CSS […]
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 […]
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.
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…
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.
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.
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…
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
We recently published a tutorial that demonstrated the new Iris Blur in Photoshop CS6. Another improvement in CS6 is the ability to quickly and easily create tilt shift effects. In this post I’ll demonstrate how you can give an ordinary photo a tilt shift effect in no time.
I’ll be working with this photo:
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.
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.
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.
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.
Photo credits joeymc86
Today we’re going to creat a cascade content show with CSS3. The key point is using the checkbox button and a combination of the :checked pseudo-class with sibling combinators.
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.
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!
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
In this tutorial, I will show you how to draw a notes icon for an iPhone app using Photoshop. We will combine the power of Layer Styles and traditional drawing to achieve a realistic result.
Here’s a preview of icon we are going to make.
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:
A few months ago at Vandelay Premier we recently released a set of highlighter brushes for Adobe Illustrator,and in this tutorial we’ll show how you can accomplish the same thing on your own. We’ll scan some lines made by a highlighter and that will give us a nice brush for using whenever highlighter or marker effects are needed.
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.
Popular WordPress Themes
- WordPress Business Themes
- Responsive WordPress Portfolio Themes
- WordPress Photography Themes
- WordPress eCommerce Themes
- WordPress Magazine Themes
- WordPress Real Estate Themes
- WordPress Band Themes
- WordPress Wedding Themes
- WordPress Hotel Themes
- WordPress Theme Builders
- Comparison of WordPress Theme Clubs
More Design Inspiration
- Ecommerce Websites
- Photography Websites
- Design Portfolio Websites
- One-Page Portfolios
- Design Agency Websites
- Church Websites
- Non-Profit Websites
- Educational Websites
- College and University Websites
- Corporate Websites
- Real Estate Websites
- Travel Websites
- Minimalist Websites
- Colorful Websites
- Websites with Unique Layouts
- Magazine Style Designs
- Creative Website Headers
- Websites with Creative Navigation
- Textured Websites