Entries Tagged as 'Tutorials'
30 High Quality Illustrator Icon Design Tutorials
Published April 4th, 2010 in Tutorials | 21 CommentsWell-designed icons can make a website more attractive and easier to use. While there are a lot of quality free icons available and stock icons that can be purchased, there may be situations where you want or need to design your own. In this post we’ll feature 30 tutorials that show you how to create beautiful icons in Adobe Illustrator.
25 jQuery Tutorials for Creating and Working with Forms
Published February 21st, 2010 in Tutorials | 22 CommentsA few weeks ago we published a collection of jQuery plugins for working with forms. While those plugins can be very useful, there may be times where you would rather learn how to code the solution yourself rather than simply using a plugin. There are a number of quality tutorials available for working with jQuery and forms, and in this post we will feature 25 of them.
jQuery Form Tutorials:
How to Design a Blue Marketing Company Layout in Photoshop
Published February 16th, 2010 in Tutorials | 17 CommentsToday we’ll be going through the process of designing a website for a fictitious marketing company, step-by-step. The design uses a blue color scheme and is intended to put the emphasis on services offered and what the company can do for its clients. Our friends at SnobbySlice are in the process of coding this design into a template that will be distributed for free in the near future.
What We Will Be Designing:
Here is a look at the end result (click the image to see in full size)
Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial
Published February 9th, 2010 in Tutorials | 45 CommentsLast week we published a tutorial for designing a basic corporate website layout in Photoshop, and in this tutorial we will walk through the process of coding that design in HTML and CSS. Here is a look at the design that we will be coding (click the image to see it in full-size).
How to Design A Corporate Website in Photoshop
Published February 1st, 2010 in Tutorials | 40 CommentsToday we’re going to walk through the process of designing an example corporate website in Photoshop.
Here is a look at the end result of what we will be creating (click on the image to see it in full size).
Illustrating a Business Briefcase in Windows 7 Style
Published January 26th, 2010 in Tutorials | 13 CommentsThe new O.S. Windows 7 has improved aesthetics to make the user interface at least more appealing. There are huge ultra detailed icons for folders, devices and so on. This time we will use Illustrator CS4 to create a nice briefcase with the Windows 7 style. You need only a few basics on how to copy, paste, rotate, scale and color the shapes. Let’s focus on business.
![]()
Step 1:
Start selecting the Rounded Rectangle Tool (fig. A) and make a single left click on the art board to bring the Rounded Rectangle options configuration window appear. Use 16 px. for corner radius (fig. B) and press Accept. Then left click and drag to draw a shape as shown.
![]()
How to Design a Portfolio Site in Photoshop, Plus Free WordPress Theme
Published January 18th, 2010 in Tutorials | 19 CommentsI’m happy to release a free WordPress portfolio theme called Modest Folio. It’s a simple design and layout that will allow your work to take center stage. It features a tabbed featured area on the front page to show the different services that you offer. Modest Folio was design by me and coded by our friends at Snobby Slice. They offer PSD to HTML services, as well as PSD to WordPress (and other CMSs).
30 Gadget Design Tutorials for Photoshop
Published December 22nd, 2009 in Tutorials | 16 CommentsGadgets are a favorite subject for many designers. There are some excellent tutorials out there to help you create amazing results in Photoshop for this type of design, and we’ll feature 30 of them here. You’ll find tutorials for designing iPods, iPhones, a Blackberry, cell phones and more.
Design an Ecommerce Website in Photoshop
Published December 15th, 2009 in Tutorials | 30 CommentsToday we are going to design the homepage layout for an ecommerce site in Photoshop. Our sample site will be an electronics shop, and since we are in the holiday season, our site will include some special promotions, which is typical of ecommerce sites at this time of year.
A Preview of the End Result:
Here is a look at what we will be designing in this tutorial (click the image to see it in full-size).
10 Tutorials to Take Your WordPress Development Skills to the Next Level
Published November 30th, 2009 in Tutorials | 42 CommentsAs the community of WordPress designers and developers continues to grow, and as new versions of WordPress are released, there are more opportunities to learn different techniques and tricks that you can apply in your own work. In these 10 tutorials you will find strategies that should prove to be very useful in your own theme development.
1. Using Custom Taxonomies to Create a Movie Database
Custom taxonomies in WordPress are similar to tags and categories, but they provide almost endless possibilities. In this tutorial Justin Tadlock shows a practical use for custom taxonomies while working on a movie database website. He shows how to set up custom taxonomies for actor, director, genre, producer, studio, and writer. This will make it easier for visitors to navigate the site as they can click on the actors name and see all of his/her movies. Justin also wrote an introductory post to Custom Taxonomies in WordPress 2.8.
You can also find more about custom taxonomies in Chris Coyier and Jeff Starr’s new book, Digging into WordPress, which I highly recommend.











