Tutorial | SpyreStudios

Archive for the ‘Tutorial’ category

How to Design a Dribbble-Style Homepage Layout

By Jake Rocheleau on January 26, 2012
Add Comment

The popular design network Dribbble has grown substantially in just a few short years. Graphics designers and illustrators from all over the world have flocked onto the web seeking invites. But aside from the exclusivity their layout design has become a prominent factor of the entire branding.

I love the simplistic nature of their gallery-style photo boxes. It matches well with a community of designers excited to share their latest pixels with the world. In this tutorial I’ll go over techniques for constructing a similar design in HTML5 and CSS3. You can build a very similar page structure with just bare-bones essential CSS. Yet when we can utilize new browser-supported properties like box shadows the process becomes much more captivating.

Live Demo – Download Source Code

35 Excellent Icon Design Tutorials

By Brant Wilson on November 8, 2011
Add Comment

In this post we have collected some photoshop and illustrator icon design tutorials. If you like these icon design tutorials you might also want to check out our previous posts below.

33 Brand New Icon Tutorials with Freebie Sets

35 Illustrator Icon Design Tutorials

Illustrator Tutorials

How to Make a Simple iOS style Book Icon

22 Useful HTML5 CSS3 Form Tutorials

By Brant Wilson on October 21, 2011
Add Comment

Using HTML5 and CSS3 you can create creative web forms with great specifications. So in this roundup we are featuring 22 CSS3 form tutorials.

Slick login form with HTML5 & CSS3

Design a Foursquare-like User Profile Page in HTML5/CSS3

By Jake Rocheleau on August 24, 2011
Add Comment

Social networking apps have become all the rage, especially with mobile users. You can’t search on Twitter or any corner of the web without finding some reference to checkin apps. The two industry giants are Foursquare and Gowalla which have both been online for just a few years. They feature many similar functions such as user checkins, badges, and friend feeds.

I’ll be demonstrating how to code a simple profile page similar to that of Foursquare. Their design is very simplistic with a 2-column layout split. We’ll be coding this page in HTML5 and CSS3, so I’ll be sure to introduce some of the newer techniques. Additionally I’ve offered the source code for free along with a live demo which you can check out below.

MySquare - Demo HTML5/CSS3 Profile Page

Live Demo – Download

30 Must See HTML5 Tutorials

By Brant Wilson on July 26, 2011
11 Comments

HTML5 and CSS3 Expanded the possibilities of Web Design.There are lots of designers and developers who started practicing HTML5 and also started implementing them in their web designs. In this roundup we have featured 30 useful HTML5 tutorials that will definitely help developers increase their skills..