Articles tagged as ‘Tutorials’

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 ».
Page 2 of 512345